Bug 590476 - Open search engines awesome screen row take a lot of space [r=mfinkle]

mobile/chrome/content/browser-ui.js

@@ -544,8 +544,6 @@ var BrowserUI = {
     if (this.isAutoCompleteOpen())
       return;
 
-    BrowserSearch.updateSearchButtons();
-
     this._hidePopup();
     this.activePanel = AllPagesList;
   },
@@ -564,13 +562,7 @@ var BrowserUI = {
     return this._edit.popup.popupOpen;
   },
 
-  doButtonSearch: function(button) {
-    if (!("engine" in button) || !button.engine)
-      return;
-
-    // We don't want the button to look pressed for now
-    button.parentNode.selectedItem = null;
-
+  doOpenSearch: function doOpenSearch(aName) {
     // save the current value of the urlbar
     let searchValue = this._edit.value;
 
@@ -582,7 +574,8 @@ var BrowserUI = {
     // Make sure we're online before attempting to load
     Util.forceOnline();
 
-    let submission = button.engine.getSubmission(searchValue, null);
+    let engine = Services.search.getEngineByName(aName);
+    let submission = engine.getSubmission(searchValue, null);
     Browser.loadURI(submission.uri.spec, { postData: submission.postData });
   },
 
@@ -862,6 +855,7 @@ var BrowserUI = {
       case "cmd_go":
       case "cmd_openLocation":
       case "cmd_star":
+      case "cmd_opensearch":
       case "cmd_bookmarks":
       case "cmd_history":
       case "cmd_remoteTabs":
@@ -945,6 +939,18 @@ var BrowserUI = {
         BookmarkPopup.toggle(autoClose);
         break;
       }
+      case "cmd_opensearch":
+        this._edit.blur();
+
+        MenuListHelperUI.show({
+          title: "TTTTTTTTTTTTTTTTTTTTTTTTTTEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEESSSSSSSSSSSSSSSSSTTTTTTTTTTTT" || Elements.browserBundle.getString("opensearch.searchWith"),
+          menupopup: { children: BrowserSearch.engines },
+          set selectedIndex(aIndex) {
+            let name = this.menupopup.children[aIndex].label;
+            BrowserUI.doOpenSearch(name);
+          }
+        });
+        break;
       case "cmd_bookmarks":
         this.activePanel = BookmarkList;
         break;
@@ -2100,12 +2106,18 @@ var MenuListHelperUI = {
     return this._popup = document.getElementById("menulist-popup");
   },
 
+  get _title() {
+    delete this._title;
+    return this._title = document.getElementById("menulist-title");
+  },
+
   _currentList: null,
   show: function mn_show(aMenulist) {
     this._currentList = aMenulist;
+    this._title.value = aMenulist.title || "";
 
     let container = this._container;
-    let listbox = this._popup.firstChild;
+    let listbox = this._popup.lastChild;
     while (listbox.firstChild)
       listbox.removeChild(listbox.firstChild);
 
@@ -2117,6 +2129,10 @@ var MenuListHelperUI = {
       // by the richlistbox behavior (it sets the "current" and "selected" attribute
       item.setAttribute("class", "menulist-command" + (child.selected ? " selected" : ""));
 
+      let image = document.createElement("image");
+      image.setAttribute("src", child.image || "");
+      item.appendChild(image);
+
       let label = document.createElement("label");
       label.setAttribute("value", child.label);
       item.appendChild(label);
@@ -2124,13 +2140,16 @@ var MenuListHelperUI = {
       listbox.appendChild(item);
     }
 
+    window.addEventListener("resize", this, true);
     container.hidden = false;
+    this.sizeToContent();
     BrowserUI.pushPopup(this, [this._popup]);
   },
 
   hide: function mn_hide() {
     this._currentList = null;
     this._container.hidden = true;
+    window.removeEventListener("resize", this, true);
     BrowserUI.popPopup();
   },
 
@@ -2138,11 +2157,37 @@ var MenuListHelperUI = {
     this._currentList.selectedIndex = aIndex;
 
     // Dispatch a xul command event to the attached menulist
-    let evt = document.createEvent("XULCommandEvent");
-    evt.initCommandEvent("command", true, true, window, 0, false, false, false, false, null);
-    this._currentList.dispatchEvent(evt);
+    if (this._currentList.dispatchEvent) {
+      let evt = document.createEvent("XULCommandEvent");
+      evt.initCommandEvent("command", true, true, window, 0, false, false, false, false, null);
+      this._currentList.dispatchEvent(evt);
+    }
 
     this.hide();
+  },
+
+  sizeToContent: function sizeToContent() {
+    // Make sure the container is at least sized to the content
+    let popup = this._popup;
+    let preferredHeight = 0;
+    for (let i=0; i<popup.childElementCount; i++) {
+      preferredHeight += popup.children[i].getBoundingClientRect().height;
+    }
+
+    // Ensure to reset the assigned width/height to have the default's one set
+    // by the content
+    popup.width = popup.height = "";
+
+    let rect = popup.getBoundingClientRect();
+    let height = Math.min(preferredHeight, 0.75 * window.innerWidth);
+    let width = Math.min(rect.width, 0.75 * window.innerWidth);
+
+    popup.height = height;
+    popup.width = width;
+  },
+
+  handleEvent: function handleEvent(aEvent) {
+    this.sizeToContent();
   }
 }
 

mobile/chrome/content/browser.js

@@ -1538,7 +1538,17 @@ const BrowserSearch = {
   get engines() {
     if (this._engines)
       return this._engines;
-    return this._engines = Services.search.getVisibleEngines({ });
+
+    let engines = Services.search.getVisibleEngines({ }).map(
+      function(item, index, array) {
+        return { 
+          label: item.name,
+          default: (item == Services.search.defaultEngine),
+          image: item.iconURI ? item.iconURI.spec : null
+        }
+    });
+
+    return this._engines = engines;
   },
 
   updatePageSearchEngines: function updatePageSearchEngines(aNode) {
@@ -1567,29 +1577,6 @@ const BrowserSearch = {
     return !BrowserSearch.engines.some(function(item) {
       return aEngine.title == item.name;
     });
-  },
-
-  updateSearchButtons: function updateSearchButtons() {
-    let container = document.getElementById("search-buttons");
-    if (this._engines && container.hasChildNodes())
-      return;
-
-    // Clean the previous search engines button
-    while (container.hasChildNodes())
-      container.removeChild(container.lastChild);
-
-    let engines = this.engines;
-    for (let e = 0; e < engines.length; e++) {
-      let button = document.createElement("radio");
-      let engine = engines[e];
-      button.id = engine.name;
-      button.setAttribute("label", engine.name);
-      button.className = "searchengine";
-      if (engine.iconURI)
-        button.setAttribute("src", engine.iconURI.spec);
-      container.appendChild(button);
-      button.engine = engine;
-    }
   }
 };
 
@@ -1945,13 +1932,20 @@ IdentityHandler.prototype = {
   handleIdentityButtonEvent: function(aEvent) {
     aEvent.stopPropagation();
 
+    // When the urlbar is active the identity button is used to show the
+    // list of search engines
+    if (Elements.urlbarState.getAttribute("mode") == "edit") {
+      CommandUpdater.doCommand("cmd_opensearch");
+      return;
+    }
+
     if ((aEvent.type == "click" && aEvent.button != 0) ||
         (aEvent.type == "keypress" && aEvent.charCode != KeyEvent.DOM_VK_SPACE &&
          aEvent.keyCode != KeyEvent.DOM_VK_RETURN))
       return; // Left click, space or enter only
 
     this.toggle();
-    },
+  },
 
   handleEvent: function(aEvent) {
     if (aEvent.type == "URLChanged" && !this._identityPopup.hidden)

mobile/chrome/content/browser.xul

@@ -131,6 +131,7 @@
     <command id="cmd_quit" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_menu" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_actions" oncommand="CommandUpdater.doCommand(this.id);"/>
+    <command id="cmd_opensearch" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_panel" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_bookmarks" oncommand="CommandUpdater.doCommand(this.id);"/>
     <command id="cmd_history" oncommand="CommandUpdater.doCommand(this.id);"/>
@@ -234,8 +235,9 @@
                     <box id="identity-box"
                          onclick="getIdentityHandler().handleIdentityButtonEvent(event);"
                          onkeypress="getIdentityHandler().handleIdentityButtonEvent(event);">
-                      <box id="urlbar-image-box" mousethrough="always">
+                      <box id="urlbar-image-box" mousethrough="always" observes="bcast_urlbarState">
                         <image id="urlbar-throbber"/>
+                        <image id="urlbar-magnifier" hidden="true"/>
                         <image id="urlbar-favicon" hidden="true"/>
                       </box>
                     </box>
@@ -511,19 +513,7 @@
       </hbox>
 
       <!-- titlebar autocomplete results -->
-      <vbox id="popup_autocomplete" class="panel-dark" flex="1" onshow="BrowserUI._edit.showHistoryPopup();" hidden="true">
-        <arrowscrollbox id="autocomplete_navbuttons"
-                        style="-moz-user-focus: ignore;"
-                        align="center"
-                        flex="1"
-                        orient="horizontal">
-          <image class="tool-search"/>
-          <radiogroup id="search-buttons" class="toggle-dark" style="-moz-user-focus: ignore;"
-                      onclick="BrowserUI.doButtonSearch(event.target);">
-          </radiogroup>
-        </arrowscrollbox>
-      </vbox>
-
+      <vbox id="popup_autocomplete" class="panel-dark" flex="1" onshow="BrowserUI._edit.showHistoryPopup();" hidden="true"/>
       <placelist id="bookmarks-items" type="bookmarks" onopen="BookmarkList.openLink(event);" onhide="BrowserUI.updateStar();" flex="1" hidden="true"/>
       <historylist id="history-items" onopen="HistoryList.openLink(event);" flex="1" hidden="true"/>
       <remotetabslist id="remotetabs-items" onopen="RemoteTabsList.openLink(event)" flex="1" hidden="true"/>
@@ -543,7 +533,8 @@
 
     <hbox id="menulist-container" class="window-width window-height context-block" top="0" left="0" hidden="true" flex="1">
       <vbox id="menulist-popup" class="dialog-dark">
-        <richlistbox id="menulist-commands" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);" flex="1"/>
+        <label id="menulist-title" crop="center" flex="1"/>
+        <richlistbox id="menulist-commands" onclick="if (event.target != this) MenuListHelperUI.selectByIndex(this.selectedIndex);"/>
       </vbox>
     </hbox>
 

mobile/locales/en-US/chrome/browser.properties

@@ -154,3 +154,5 @@ helperApp.open=Open
 helperApp.save=Save
 helperApp.nothing=Nothing
 
+# Open Search
+opensearch.searchWith=Search With:

mobile/themes/core/browser.css

@@ -224,10 +224,23 @@ toolbarbutton.urlbar-cap-button {
   background: url("images/rightcapSSL-active-64.png");
 }
 
+#urlbar-image-box[mode=edit] > #urlbar-favicon,
+#urlbar-image-box[mode=edit] > #urlbar-throbber {
+  display: none;
+}
+
 #urlbar-throbber[loading] {
   list-style-image: url("chrome://browser/skin/images/throbber.png");
 }
 
+#urlbar-magnifier {
+  list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png");
+}
+
+#urlbar-image-box[mode=edit] > #urlbar-magnifier {
+  display: block !important;
+}
+
 #urlbar-favicon {
   width: 32px;
   height: 32px;
@@ -1513,17 +1526,36 @@ pageaction:hover:active > vbox > .pageaction-desc {
   -moz-border-radius: 8px;
 }
 
+#menulist-popup > #menulist-title {
+  padding: 12px 4px 4px 4px;
+  font-size: 18px;
+}
+
+#menulist-popup > #menulist-title[value=""] {
+  display: none;
+}
+
 #menulist-commands {
   border: 1px solid rgb(207,207,207);
   -moz-border-radius: 8px;
 }
 
+#menulist-popup > label:not([value=""]) + #menulist-commands {
+  -moz-border-radius-topleft: 0px;
+  -moz-border-radius-topright: 0px;
+}
+
 .menulist-command {
   -moz-box-align: center;
   background-color: rgb(245,245,245);
   min-width: 200px; /* keep the command from being too narrow */
 }
 
+.menulist-command > image {
+  width: 32px;
+  height: 32px;
+}
+
 .menulist-command:first-child {
   background: -moz-linear-gradient(top, rgb(255,255,255), rgb(245,245,245));
   -moz-border-radius: 8px 8px 0 0;
@@ -1547,6 +1579,18 @@ pageaction:hover:active > vbox > .pageaction-desc {
   pointer-events: none;
 }
 
+.menulist-command.selected > image {
+  width: 30px;
+  height: 30px;
+  list-style-image: url("chrome://browser/skin/images/check-30.png");
+  margin-right: 2px;
+  margin-top: 2px;
+}
+
+.menulist-command:not(.selected) > image[src=""] {
+  visibility: hidden;
+}
+
 /* context popup ----------------------------------------------------------- */
 #context-popup {
   /* Remove some dialog-dark styles */