Bug 602671 - New theme for the search engine popup [r=mfinkle]
authorMatt Brubeck <mbrubeck@mozilla.com>
Tue, 19 Oct 2010 15:54:45 -0700
changeset 66866 6cccb0536afcd8580f634fd70005255a0cb2d77f
parent 66865 670b76beb6251a48ff9dd813b26f370f441b22c6
child 66867 9e257aa7fcae994dee95fa256c7f918864b1d49e
push id1
push userroot
push dateTue, 26 Apr 2011 22:38:44 +0000
treeherdermozilla-beta@bfdb6e623a36 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs602671
Bug 602671 - New theme for the search engine popup [r=mfinkle]
mobile/chrome/content/browser-ui.js
mobile/chrome/content/browser.js
mobile/chrome/content/browser.xul
mobile/themes/core/browser.css
mobile/themes/core/images/tab-active-hdpi.png
mobile/themes/core/platform.css
--- a/mobile/chrome/content/browser-ui.js
+++ b/mobile/chrome/content/browser-ui.js
@@ -1015,25 +1015,17 @@ var BrowserUI = {
         }
 
         // Show/hide bookmark popup
         BookmarkPopup.toggle(autoClose);
         break;
       }
       case "cmd_opensearch":
         this.blurFocusedElement();
-
-        MenuListHelperUI.show({
-          title: Elements.browserBundle.getString("opensearch.searchWith"),
-          menupopup: { children: BrowserSearch.engines },
-          set selectedIndex(aIndex) {
-            let name = this.menupopup.children[aIndex].label;
-            BrowserUI.doOpenSearch(name);
-          }
-        });
+        BrowserSearch.toggle();
         break;
       case "cmd_bookmarks":
         this.activePanel = BookmarkList;
         break;
       case "cmd_history":
         this.activePanel = HistoryList;
         break;
       case "cmd_remoteTabs":
--- a/mobile/chrome/content/browser.js
+++ b/mobile/chrome/content/browser.js
@@ -1202,16 +1202,71 @@ nsBrowserAccess.prototype = {
 
   isTabContentWindow: function(aWindow) {
     return Browser.browsers.some(function (browser) browser.contentWindow == aWindow);
   }
 };
 
 
 const BrowserSearch = {
+  get _popup() {
+    delete this._popup;
+    return this._popup = document.getElementById("search-engines-popup");
+  },
+
+  get _list() {
+    delete this._list;
+    return this._list = document.getElementById("search-engines-list");
+  },
+
+  get _button() {
+    delete this._button;
+    return this._button = document.getElementById("tool-search");
+  },
+
+  toggle: function bs_toggle() {
+    if (this._popup.hidden)
+      this.show();
+    else
+      this.hide();
+  },
+
+  show: function bs_show() {
+    let popup = this._popup;
+    let list = this._list;
+    while (list.lastChild)
+      list.removeChild(list.lastChild);
+
+    this.engines.forEach(function(aEngine) {
+      let button = document.createElement("button");
+      button.className = "prompt-button";
+      button.setAttribute("label", aEngine.name);
+      button.setAttribute("pack", "start");
+      button.setAttribute("image", aEngine.iconURI ? aEngine.iconURI.spec : null);
+      button.onclick = function() {
+        popup.hidden = true;
+        BrowserUI.doOpenSearch(aEngine.name);
+      }
+      list.appendChild(button);
+    });
+
+    popup.hidden = false;
+    popup.top = BrowserUI.toolbarH - popup.offset;
+    popup.anchorTo(document.getElementById("tool-search"));
+
+    document.getElementById("urlbar-icons").setAttribute("open", "true");
+    BrowserUI.pushPopup(this, [popup, this._button]);
+  },
+
+  hide: function bs_hide() {
+    this._popup.hidden = true;
+    document.getElementById("urlbar-icons").removeAttribute("open");
+    BrowserUI.popPopup();
+  },
+
   observe: function bs_observe(aSubject, aTopic, aData) {
     if (aTopic != "browser-search-engine-modified")
       return;
 
     switch (aData) {
       case "engine-added":
       case "engine-removed":
         // force a rebuild of the prefs list, if needed
@@ -1233,26 +1288,18 @@ const BrowserSearch = {
         break;
     }
   },
 
   get engines() {
     if (this._engines)
       return this._engines;
 
-    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;
+    this._engines = Services.search.getVisibleEngines({ });
+    return this._engines;
   },
 
   updatePageSearchEngines: function updatePageSearchEngines(aNode) {
     let items = Browser.selectedBrowser.searchEngines.filter(this.isPermanentSearchEngine);
     if (!items.length)
       return false;
 
     // XXX limit to the first search engine for now
@@ -1270,17 +1317,17 @@ const BrowserSearch = {
     let iconURL = BrowserUI._favicon.src;
     Services.search.addEngine(aEngine.href, Ci.nsISearchEngine.DATA_XML, iconURL, false);
 
     this._engines = null;
   },
 
   isPermanentSearchEngine: function isPermanentSearchEngine(aEngine) {
     return !BrowserSearch.engines.some(function(item) {
-      return aEngine.title == item.label;
+      return aEngine.title == item.name;
     });
   }
 };
 
 
 /** Watches for mouse events in chrome and sends them to content. */
 const ContentTouchHandler = {
   // Use lightweight transactions so that old context menus and tap
@@ -1735,23 +1782,16 @@ IdentityHandler.prototype = {
     this._identityPopup.hidden = true;
     this._identityBox.removeAttribute("open");
 
     BrowserUI.popPopup();
     BrowserUI.unlockToolbar();
   },
 
   toggle: function ih_toggle() {
-    // 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 (this._identityPopup.hidden)
       this.show();
     else
       this.hide();
   },
 
   /**
    * Click handler for the identity-box element in primary chrome.
--- a/mobile/chrome/content/browser.xul
+++ b/mobile/chrome/content/browser.xul
@@ -512,16 +512,20 @@
       <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"/>
 #ifdef MOZ_SERVICES_SYNC
       <remotetabslist id="remotetabs-items" onopen="RemoteTabsList.openLink(event)" flex="1" hidden="true"/>
 #endif
     </vbox>
 
+    <arrowbox id="search-engines-popup" hidden="true" align="center" offset="18" flex="1">
+      <hbox id="search-engines-list" class="prompt-buttons"/>
+    </arrowbox>
+
     <vbox id="newtab-popup" hidden="true" class="dialog-dark" onclick="NewTabPopup.selectTab()" align="center" left="21">
       <label/>
     </vbox>
 
     <!-- options dialog for select form field -->
     <vbox id="select-container" hidden="true" pack="center">
       <spacer id="select-spacer" flex="1000"/>
       <vbox id="select-container-inner" class="dialog-dark" flex="1">
--- a/mobile/themes/core/browser.css
+++ b/mobile/themes/core/browser.css
@@ -36,17 +36,17 @@
  * ***** END LICENSE BLOCK ***** */
 
 /* main toolbar (URL bar) -------------------------------------------------- */
 #toolbar-main {
   -moz-appearance: none;
   -moz-box-align: center;
   padding: 0 8px; /* core spacing */
   border: none;
-  background: #444444;
+  background: #5e6166;
 }
 
 #toolbar-moveable-container[top="0"] {
   position: fixed;
   left: 0;
   z-index: 1000;
 }
 
@@ -288,17 +288,17 @@ toolbarbutton.urlbar-button {
 }
 
 /* right toolbar (browser controls) ---------------------------------------- */
 #browser-controls {
   -moz-box-align: start;
   padding: 0;
   -moz-border-start: 3px solid #262629;
   min-width: 80px !important;
-  background: #444444;
+  background: #5e6166;
 }
 
 toolbarbutton.button-control {
   padding: 0 !important;
   min-width: 80px !important;
   border-top: 1px solid rgba(255,255,255,0.2) !important;
   border-bottom: 1px solid rgba(0,0,0,0.2) !important;
   background-color: transparent !important;
@@ -814,17 +814,17 @@ autocompleteresult.noresults > .autocomp
   text-align: center;
   color: grey;
 }
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
   padding-top: 8px;
   -moz-border-end: 3px solid #262629;
-  background: #444444;
+  background: #5e6166;
 }
 
 #tabs:-moz-locale-dir(rtl) {
   -moz-box-align: start;
 }
 
 #tabs > .tabs-list {
   display: block;
index 435b56a907c1a960ff742962add012fdde6b88b6..98621cf091aa1c92c0430cf22f9553429fa4813a
GIT binary patch
literal 1133
zc$|GyU1-x#6t2I_`B!}q91cT#QL*{yOlz}M>5^6}W{j?2W%VaZZr9KyH%o5UY$(bE
zQ9)nC7oP+l1i^~JggH>A;17bRAdv~8Fi^4LgHA-5c(bij#O}hq=bpp&oqO)NUvjFw
zZRhg(hI*gRw>-H^OkvxPXS!}aUN>D?`3;-3D4szbFo#OA1$;3Tb^#)(%iSOaWVOHd
z5oq!G7LZyxgEG<{UV%C#dl<^mO`kVfb~vW26aXT+K(}T@$<HHqNJ3Mi<X%o<BvSx+
zZP$PWItJR(%0NMhsN|0AM2o}Y1Uf)6;pjbv%{x(YDld=sUYI6{DF`Y=$?2jpQad3)
z3lJQ|1QaI35FwUgo3@6-;VndvVHuhU(rhrmhWVx-&oIQyAn|FIn&VSqV&*LDMaeuu
zCQs9)Qi&=xQPAq9*+?Yf<p>4?7!k1h4J11O!`@KMAOc&lG!tpiAUt30f<+W1$?6q!
zb2hDE&$J0QjCN#`W+{gL3n)o*Lv?)?ZKD*(&5gFx{U)GOz=lOj!4H?);E_#Uuz-x9
zm4>jV+Qs%fM9|JdlMp&MLXs8D@cb#fB=JeZMzW!Rq!=Y}gwiyXkB7pENFo*%o3@5n
zR!p>t;YeIy*icvyn0RZf$`zqf)PaGjT=frkTTQMfg=sdhv_7CFET|JxSLU_awQ#j-
zndYjsYYEll(zqD<pNFo7uzI}htZcC}D|}#JwOd%$?-wO^;!omjQjDdYvC0@*e~j^q
z&o&--Avgz`J4c^qF0a`4^82q<+wWBt-l#m-=fAsqo|`>hD35agH*YRrQw-irZC+|c
z_m>Oj3yq}v)XiS{P-tB3y2hpKV{Uw`bMfn-HF-RHj&S?xDj(M!nY?lF+64EtcshIT
zP3YE{_m4Q&x_V7M`0k~9^6}7$>q5o<aOieoL>TAmjt))?H4Z+>j-2Uj7R#Uf!zW(l
zzl?S!$`f40|FgjgxS{p;$A1jdYkF=k`PmRVJb#%FQn_aC+1ZEQ4<H$D6U(iK27d#g
C28z=F
--- a/mobile/themes/core/platform.css
+++ b/mobile/themes/core/platform.css
@@ -180,16 +180,21 @@ button:not([disabled="true"]):hover:acti
 button[disabled="true"] {
   color: #aaa !important;
 }
 
 button:focus > .button-box {
   border: 1px solid transparent;
 }
 
+/* Override GTK2 system setting */
+.button-icon {
+  display: -moz-initial !important;
+}
+
 /* dark buttons ------------------------------------------------------------ */
 /*
   we set notification buttons here as well, since the style can't be set in
   scoped CSS file, like notification.css, when the buttons are added later
 */
 
 button.button-dark,
 notification button {