Bug 606595 - Use a label to show the title [r=vingtetun,mfinkle]

mobile/chrome/content/bindings.xml

@@ -76,7 +76,7 @@
               // but if the urlbar receive a keydown when it is readOnly this
               // could be because of a hardware keyboard or a user generated event.
               // In this case we want the text to be taken into account.
-              if (this.hasAttribute("open") && !this.hasAttribute("inactive") && this.readOnly &&
+              if (!this.collapsed && !this.hasAttribute("inactive") && this.readOnly &&
                   !(aEvent.originalTarget instanceof HTMLInputElement))
                 this.readOnly = false;
 
@@ -89,7 +89,7 @@
               break;
 
             case "PanBegin":
-              if (this.hasAttribute("open") && !this.readOnly) {
+              if (!this.collapsed && !this.readOnly) {
                 this.readOnly = true;
                 this.blur();
               }
@@ -100,13 +100,6 @@
     </implementation>
 
     <handlers>
-      <handler event="ValueChange" phase="bubbling">
-        <![CDATA[
-          if (this.readOnly)
-            this.inputField.selectionStart = this.inputField.selectionEnd = 0;
-        ]]>
-      </handler>
-
       <handler event="text" phase="bubbling">
         <![CDATA[
           if (this.mController.input == this)

mobile/chrome/content/browser-ui.js

@@ -96,9 +96,10 @@ const TOOLBARSTATE_LOADING  = 1;
 const TOOLBARSTATE_LOADED   = 2;
 
 var BrowserUI = {
-  _edit : null,
-  _throbber : null,
-  _favicon : null,
+  _edit: null,
+  _title: null,
+  _throbber: null,
+  _favicon: null,
   _dialogs: [],
 
   _domWillOpenModalDialog: function(aBrowser) {
@@ -124,7 +125,13 @@ var BrowserUI = {
     if (Util.isURLEmpty(url))
       caption = "";
 
-    this._setURI(caption);
+    if (caption) {
+      this._title.value = caption;
+      this._title.classList.remove("placeholder");
+    } else {
+      this._title.value = this._title.getAttribute("placeholder");
+      this._title.classList.add("placeholder");
+    }
   },
 
   /*
@@ -191,18 +198,16 @@ var BrowserUI = {
       document.getElementById("toolbar-moveable-container").top = "";
   },
 
-  _setURI: function _setURI(aCaption) {
+  _setURL: function _setURL(aURL) {
     if (this.activePanel)
-      this._edit.defaultValue = aCaption;
+      this._edit.defaultValue = aURL;
     else
-      this._edit.value = aCaption;
+      this._edit.value = aURL;
   },
 
   _editURI: function _editURI(aEdit) {
     Elements.urlbarState.setAttribute("mode", "edit");
     this._edit.defaultValue = this._edit.value;
-
-    this._showURI();
   },
 
   _showURI: function _showURI() {
@@ -421,6 +426,7 @@ var BrowserUI = {
 
   init: function() {
     this._edit = document.getElementById("urlbar-edit");
+    this._title = document.getElementById("urlbar-title");
     this._throbber = document.getElementById("urlbar-throbber");
     this._favicon = document.getElementById("urlbar-favicon");
     this._favicon.addEventListener("error", this, false);
@@ -433,8 +439,6 @@ var BrowserUI = {
     window.addEventListener("NavigationPanelShown", this, false);
     window.addEventListener("NavigationPanelHidden", this, false);
 
-    document.getElementById("toolbar-main").ignoreDrag = true;
-
     let tabs = document.getElementById("tabs");
     tabs.addEventListener("TabSelect", this, true);
     tabs.addEventListener("TabOpen", this, true);
@@ -572,7 +576,7 @@ var BrowserUI = {
     if (Util.isURLEmpty(urlString))
       urlString = "";
 
-    this._setURI(urlString);
+    this._setURL(urlString);
   },
 
   goToURI: function(aURI) {
@@ -841,11 +845,8 @@ var BrowserUI = {
         break;
       // URL textbox events
       case "click":
-        // if there is an already opened panel, keep it active (bug 596614).
-        if (this.activePanel && this._edit.readOnly)
+        if (this._edit.readOnly)
           this._edit.readOnly = false;
-        else if (!this.activePanel)
-          AllPagesList.doCommand();
         break;
       case "mousedown":
         if (!this._isEventInsidePopup(aEvent))
@@ -863,7 +864,11 @@ var BrowserUI = {
         break;
       // Awesome popup event
       case "NavigationPanelShown":
-        this._edit.setAttribute("open", "true");
+        this._edit.collapsed = false;
+        this._title.collapsed = true;
+
+        if (!this._edit.readOnly)
+          this._edit.focus();
 
         // Disabled the search button if no search engines are available
         let button = document.getElementById("urlbar-icons");
@@ -874,7 +879,9 @@ var BrowserUI = {
 
         break;
       case "NavigationPanelHidden":
-        this._edit.removeAttribute("open");
+        this._edit.collapsed = true;
+        this._title.collapsed = false;
+
         document.getElementById("urlbar-icons").removeAttribute("disabled");
         break;
     }

mobile/chrome/content/browser.xul

@@ -242,18 +242,20 @@
                         <image id="urlbar-favicon" hidden="true"/>
                       </box>
                     </box>
+                    <label id="urlbar-title" class="uri-element" crop="end" flex="1"
+                           command="cmd_openLocation" onclick="this.doCommand();"
+                           placeholder="&urlbar.emptytext;"/>
                     <textbox id="urlbar-edit"
                              type="autocomplete"
                              class="uri-element"
                              autocompletesearch="history"
                              autocompletepopup="popup_autocomplete"
-                             enablehistory="false"
-                             maxrows="6"
                              completeselectedindex="true"
                              minresultsforpopup="0"
                              oncontextmenu="event.preventDefault();"
                              onsearchbegin="BrowserUI.updateAwesomeHeader(this.controller.searchString);"
                              placeholder="&urlbar.emptytext;"
+                             collapsed="true"
                              flex="1"
                              readonly="true"
                              ontextentered="BrowserUI.goToURI();"

mobile/chrome/content/input.js

@@ -521,10 +521,6 @@ var ScrollUtils = {
 
     for (; elem; elem = elem.parentNode) {
       try {
-        if (elem.ignoreDrag) {
-          break;
-        }
-
         if (elem.scrollBoxObject) {
           scrollbox = elem;
           qinterface = elem.scrollBoxObject;

mobile/chrome/tests/browser_awesomescreen.js

@@ -48,8 +48,9 @@ gTests.push({
   },
 
   onPopupShown: function() {
-    is(BrowserUI.activePanel == AllPagesList, true, "AllPagesList should be visible");
-    is(BrowserUI._edit.hasAttribute("open"), true, "The urlbar edit element should have the open attribute");
+    is(BrowserUI.activePanel, AllPagesList, "AllPagesList should be visible");
+    ok(!BrowserUI._edit.collapsed, "The urlbar edit element is visible");
+    ok(BrowserUI._title.collapsed, "The urlbar title element is not visible");
 
     window.addEventListener("NavigationPanelHidden", function(aEvent) {
       window.removeEventListener(aEvent.type, arguments.callee, false);
@@ -60,8 +61,9 @@ gTests.push({
   },
 
   onPopupHidden: function() {
-    is(BrowserUI.activePanel == null, true, "AllPagesList should be dismissed");
-    is(BrowserUI._edit.hasAttribute("open"), false, "The urlbar edit element should not have the open attribute");
+    is(BrowserUI.activePanel, null, "AllPagesList should be dismissed");
+    ok(BrowserUI._edit.collapsed, "The urlbar edit element is not visible");
+    ok(!BrowserUI._title.collapsed, "The urlbar title element is visible");
 
     runNextTest();
   }
@@ -225,12 +227,9 @@ gTests.push({
 
     Panels.forEach(function(aPanel) {
       aPanel.doCommand();
-      // XXX for some reason the selectionStart == 0 && selectionEnd = edit.textLength
-      // even if visually there is no selection at all
-      todo_is(edit.selectionStart == edit.textLength && edit.selectionEnd == edit.textLength, true, "urlbar text should not be selected on a simple show");
-
+      ok(edit.selectionStart ==  edit.selectionEnd, "urlbar text should not be selected on a simple show");
       edit.click();
-      is(edit.selectionStart == 0 && edit.selectionEnd == edit.textLength, true, "urlbar text should be selected on a click");
+      ok(edit.selectionStart == 0 && edit.selectionEnd == edit.textLength, "urlbar text should be selected on a click");
 
     });
 
@@ -238,11 +237,9 @@ gTests.push({
     edit.clickSelectsAll = false;
     Panels.forEach(function(aPanel) {
       aPanel.doCommand();
-      // XXX for some reason the selectionStart == 0 && selectionEnd = edit.textLength
-      // even if visually there is no selection at all
-      todo_is(edit.selectionStart == edit.textLength && edit.selectionEnd == edit.textLength, true, "urlbar text should not be selected on a simple show");
+      ok(edit.selectionStart == edit.selectionEnd, "urlbar text should not be selected on a simple show");
       edit.click();
-      is(edit.selectionStart == edit.selectionEnd, true, "urlbar text should not be selected on a click");
+      ok(edit.selectionStart == edit.selectionEnd, "urlbar text should not be selected on a click");
     });
     edit.clickSelectsAll = oldClickSelectsAll;
 

mobile/chrome/tests/browser_navigation.js

@@ -74,11 +74,11 @@ gTests.push({
     is(forward.disabled, !gCurrentTest._currentTab.browser.canGoForward, "Forward button check");
 
     // Focus the url edit
-    let urlbarEdit = document.getElementById("urlbar-edit");
+    let urlbarTitle = document.getElementById("urlbar-title");
 
     // Wait for the awesomebar to load, then do the test
     window.addEventListener("NavigationPanelShown", gCurrentTest.onFocusReady, false);
-    EventUtils.synthesizeMouse(urlbarEdit, urlbarEdit.width / 2, urlbarEdit.height / 2, {});
+    EventUtils.synthesizeMouse(urlbarTitle, urlbarTitle.width / 2, urlbarTitle.height / 2, {});
   },
 
   onFocusReady: function() {
@@ -173,8 +173,8 @@ gTests.push({
   },
 
   onPageReady: function() {
-    let urlbarEdit = document.getElementById("urlbar-edit");
-    is(urlbarEdit.value, "English Title Page", "The title must be displayed in urlbar");
+    let urlbarTitle = document.getElementById("urlbar-title");
+    is(urlbarTitle.value, "English Title Page", "The title must be displayed in urlbar");
     Browser.closeTab(gCurrentTest._currentTab);
     gCurrentTest._currentTab = BrowserUI.newTab(testURL_04);
 
@@ -186,8 +186,8 @@ gTests.push({
   },
 
   onPageReady2: function(){
-    let urlbarEdit = document.getElementById("urlbar-edit");
-    is(urlbarEdit.value, testURL_04, "The url for no title must be displayed in urlbar");
+    let urlbarTitle = document.getElementById("urlbar-title");
+    is(urlbarTitle.value, testURL_04, "The url for no title must be displayed in urlbar");
     Browser.closeTab(gCurrentTest._currentTab);
 
     // Check whether title appears after a pageload
@@ -200,12 +200,12 @@ gTests.push({
   },
 
   onPageReady3: function(){
-    let urlbarEdit = document.getElementById("urlbar-edit");
-    is(urlbarEdit.value, "Browser Blank Page 01", "The title of the first page must be displayed");
+    let urlbarTitle = document.getElementById("urlbar-title");
+    is(urlbarTitle.value, "Browser Blank Page 01", "The title of the first page must be displayed");
 
     // Wait for the awesomebar to load, then do the test
     window.addEventListener("NavigationPanelShown", gCurrentTest.onFocusReady, false);
-    EventUtils.synthesizeMouse(urlbarEdit, urlbarEdit.width / 2, urlbarEdit.height / 2, {});
+    EventUtils.synthesizeMouse(urlbarTitle, urlbarTitle.width / 2, urlbarTitle.height / 2, {});
   },
 
   onFocusReady: function() {
@@ -221,8 +221,8 @@ gTests.push({
   },
 
   onPageFinish: function() {
-    let urlbarEdit = document.getElementById("urlbar-edit");
-    is(urlbarEdit.value, "Browser Blank Page 02", "The title of the second page must be displayed");
+    let urlbarTitle = document.getElementById("urlbar-title");
+    is(urlbarTitle.value, "Browser Blank Page 02", "The title of the second page must be displayed");
     Browser.closeTab(gCurrentTest._currentTab);
     runNextTest();
   }

mobile/themes/core/browser.css

@@ -122,28 +122,13 @@ toolbarbutton.urlbar-button {
   color: #000;
   border-radius: 8px;
   margin: 8px;
-  background-image: url("chrome://browser/skin/images/button-bg.png");
+  background: url("chrome://browser/skin/images/button-bg.png") bottom left repeat-x;
 }
 
 #urlbar-container[mode="edit"] > #identity-box {
   visibility: collapse;
 }
 
-#urlbar-container[mode="edit"] > #urlbar-edit {
-  border-left: none;
-  border-right: 1px solid rgba(0,0,0,0.5);
-}
-
-#urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(ltr) {
-  -moz-border-radius-topleft: 8px;
-  -moz-border-radius-bottomleft: 8px;
-}
-
-#urlbar-container[mode="edit"] > #urlbar-edit:-moz-locale-dir(rtl) {
-  -moz-border-radius-topright: 8px;
-  -moz-border-radius-bottomright: 8px;
-}
-
 /* URL bar cap buttons */
 .urlbar-cap-button {
   margin: 0 !important;
@@ -215,22 +200,44 @@ toolbarbutton.urlbar-button {
 }
 
 /* Main urlbar textbox */
-#urlbar-edit {
-  -moz-appearance: none !important;
-  min-height: 64px;
-  margin: 0 !important;
-  padding: 0 !important;
-  border-radius: 0;
-  border: 0 solid transparent;
-  border-left: 1px solid white;
-  border-right: 1px solid white;
-  background: transparent;
+#urlbar-title {
+  padding: 16px 8px;
 }
 
-#urlbar-edit[open="true"],
-#urlbar-edit:hover:active {
+#urlbar-title.placeholder {
+  color: gray;
+}
+
+#urlbar-edit,
+#urlbar-title {
+  margin: 0 !important;
+  border-left: 1px solid white;
+  border-right: 1px solid white;
+  min-height: 64px;
+}
+
+#urlbar-edit,
+#urlbar-title:hover:active {
   background-color: #f9f9f9;
-  background: url("chrome://browser/skin/images/textbox-bg.png") top left repeat-x;
+  background: url("chrome://browser/skin/images/textbox-bg.png") bottom left repeat-x;
+}
+
+#urlbar-edit {
+  -moz-appearance: none !important;
+  border-radius: 0;
+  border: 0 solid transparent;
+  border-right: 1px solid rgba(0,0,0,0.5);
+  padding: 0 !important;
+}
+
+#urlbar-edit:-moz-locale-dir(ltr) {
+  -moz-border-radius-topleft: 8px;
+  -moz-border-radius-bottomleft: 8px;
+}
+
+#urlbar-edit:-moz-locale-dir(rtl) {
+  -moz-border-radius-topright: 8px;
+  -moz-border-radius-bottomright: 8px;
 }
 
 #urlbar-edit > hbox > .textbox-input-box {