Bug 1088660 - Improve the search bar UI to support one-off searches - polish CSS for Windows/Linux, rs=dolske, a=gavin.
authorFlorian Quèze <florian@queze.net>
Thu, 20 Nov 2014 22:59:58 +0100
changeset 234074 a87ab9d302eb36b70aa1b6d499dbb606e70cb45f
parent 234073 b1f228b6722539cde9f9dc07dc44c96e6640a21e
child 234075 7f675d2bd889c1eac1191b1db2fd9dbfb1b11813
push id1
push usersledru@mozilla.com
push dateThu, 04 Dec 2014 17:57:20 +0000
reviewersdolske, gavin
bugs1088660
milestone35.0a2
Bug 1088660 - Improve the search bar UI to support one-off searches - polish CSS for Windows/Linux, rs=dolske, a=gavin.
browser/components/preferences/in-content/search.css
browser/components/preferences/in-content/search.js
browser/components/preferences/in-content/search.xul
browser/components/preferences/search.css
browser/components/preferences/search.js
browser/components/preferences/search.xul
browser/themes/linux/searchbar.css
browser/themes/windows/searchbar.css
--- a/browser/components/preferences/in-content/search.css
+++ b/browser/components/preferences/in-content/search.css
@@ -1,16 +1,20 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #oneClickProvidersList richlistitem {
   -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox");
 }
 
+.searchengine-menuitem > .menu-iconic-left {
+  display: -moz-box
+}
+
 .checkbox-label-box {
   -moz-box-align: center;
 }
 
 .checkbox-icon {
   -moz-margin-end: 8px;
   max-width: 16px;
 }
--- a/browser/components/preferences/in-content/search.js
+++ b/browser/components/preferences/in-content/search.js
@@ -14,17 +14,17 @@ var gSearchPane = {
         document.location.hash = "";
       return;
     }
 
     let list = document.getElementById("defaultEngine");
     let currentEngine = Services.search.currentEngine.name;
     Services.search.getVisibleEngines().forEach(e => {
       let item = list.appendItem(e.name);
-      item.setAttribute("class", "menuitem-iconic");
+      item.setAttribute("class", "menuitem-iconic searchengine-menuitem menuitem-with-favicon");
       if (e.iconURI)
         item.setAttribute("image", e.iconURI.spec);
       item.engine = e;
       if (e.name == currentEngine)
         list.selectedItem = item;
     });
 
     this.displayOneClickEnginesList();
--- a/browser/components/preferences/in-content/search.xul
+++ b/browser/components/preferences/in-content/search.xul
@@ -35,14 +35,14 @@
                 accesskey="s"
                 preference="browser.search.suggest.enabled"/>
     </groupbox>
 
     <groupbox id="oneClickSearchProvidersGroup" data-category="paneSearch">
       <caption label="One-click search engines"/>
       <label>The search bar lets you search alternate engines directly. Choose which ones to display.</label>
 
-      <richlistbox id="oneClickProvidersList" style="min-height: 50px;"/>
-      <hbox pack="end" style="margin-bottom: 2em">
+      <richlistbox id="oneClickProvidersList"/>
+      <hbox pack="end">
         <label id="addEngines" class="text-link" value="Add more search providers…"
                onclick="if (event.button == 0) { Services.wm.getMostRecentWindow('navigator:browser').BrowserSearch.loadAddEngines(); }"/>
       </hbox>
     </groupbox>
--- a/browser/components/preferences/search.css
+++ b/browser/components/preferences/search.css
@@ -8,16 +8,20 @@
   height: 22px; /* setting the height of checkboxes is required to let the
                    window auto-sizing code work. */
 }
 
 #oneClickProvidersList {
   height: 178px;
 }
 
+.searchengine-menuitem > .menu-iconic-left {
+  display: -moz-box
+}
+
 .checkbox-label-box {
   -moz-box-align: center;
 }
 
 .checkbox-icon {
   margin: 3px 3px;
   max-width: 16px;
 }
--- a/browser/components/preferences/search.js
+++ b/browser/components/preferences/search.js
@@ -7,17 +7,17 @@ Components.utils.import("resource://gre/
 var gSearchPane = {
 
   init: function ()
   {
     let list = document.getElementById("defaultEngine");
     let currentEngine = Services.search.currentEngine.name;
     Services.search.getVisibleEngines().forEach(e => {
       let item = list.appendItem(e.name);
-      item.setAttribute("class", "menuitem-iconic");
+      item.setAttribute("class", "menuitem-iconic searchengine-menuitem menuitem-with-favicon");
       if (e.iconURI)
         item.setAttribute("image", e.iconURI.spec);
       item.engine = e;
       if (e.name == currentEngine)
         list.selectedItem = item;
     });
 
     this.displayOneClickEnginesList();
--- a/browser/components/preferences/search.xul
+++ b/browser/components/preferences/search.xul
@@ -44,18 +44,18 @@
                 accesskey="s"
                 preference="browser.search.suggest.enabled"/>
     </groupbox>
 
     <groupbox id="oneClickSearchProvidersGroup">
       <caption label="One-click search engines"/>
       <label>The search bar lets you search alternate engines directly. Choose which ones to display.</label>
 
-      <richlistbox id="oneClickProvidersList" style="min-height: 50px;"/>
-      <hbox pack="end" style="margin-bottom: 2em">
+      <richlistbox id="oneClickProvidersList"/>
+      <hbox pack="end" style="margin-bottom: 1em">
         <label id="addEngines" class="text-link" value="Add more search providers…"
                onclick="if (event.button == 0) { Services.wm.getMostRecentWindow('navigator:browser').BrowserSearch.loadAddEngines(); }"/>
       </hbox>
     </groupbox>
 
   </prefpane>
 
 </overlay>
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -106,20 +106,20 @@ searchbar[oneoffui] .search-go-button:ho
 searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 
 .search-panel-current-engine {
   border-top: none !important;
   border-bottom: 1px solid #ccc;
+  -moz-box-align: center;
 }
 
 .search-panel-header {
-  font-size: 10px;
   font-weight: normal;
   background-color: rgb(245, 245, 245);
   border-top: 1px solid #ccc;
   margin: 0 1px;
   padding: 3px 5px;
   color: #666;
 }
 
@@ -178,17 +178,17 @@ searchbar[oneoffui] .search-go-button:-m
   display: -moz-box;
   -moz-margin-end: 0;
   width: 16px;
   height: 16px;
 }
 
 .addengine-item {
   -moz-appearance: none;
-  font-size: 10px;
+  border: none;
   height: 32px;
   margin: 0 0;
   padding: 0 10px;
 }
 
 .addengine-item > .button-box {
   -moz-box-pack: start;
 }
@@ -219,17 +219,17 @@ searchbar[oneoffui] .searchbar-engine-bu
   display: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   -moz-padding-start: 16px;
   border-top: none !important;
 }
 
-.searchbar-engine-image {
+searchbar[oneoffui] .searchbar-engine-image {
   -moz-margin-start: -1px;
 }
 
 .search-setting-button {
   -moz-appearance: none;
   border-bottom: none;
   border-left: none;
   border-right: none;
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -117,20 +117,20 @@ searchbar[oneoffui] .search-go-button:ho
 searchbar[oneoffui] .search-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
   transform: scaleX(-1);
 }
 
 
 .search-panel-current-engine {
   border-top: none !important;
   border-bottom: 1px solid #ccc;
+  -moz-box-align: center;
 }
 
 .search-panel-header {
-  font-size: 10px;
   font-weight: normal;
   background-color: rgb(245, 245, 245);
   border-top: 1px solid #ccc;
   margin: 0;
   padding: 3px 6px;
   color: #666;
 }
 
@@ -187,17 +187,17 @@ searchbar[oneoffui] .search-go-button:-m
 
 .searchbar-engine-one-off-item > .button-box > .button-icon {
   width: 16px;
   height: 16px;
 }
 
 .addengine-item {
   -moz-appearance: none;
-  font-size: 10px;
+  border: none;
   height: 32px;
   margin: 0 0;
   padding: 0 10px;
 }
 
 .addengine-item > .button-box {
   -moz-box-pack: start;
 }
@@ -228,17 +228,17 @@ searchbar[oneoffui] .searchbar-engine-bu
   display: none;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell {
   -moz-padding-start: 15px;
   border-top: none !important;
 }
 
-.searchbar-engine-image {
+searchbar[oneoffui] .searchbar-engine-image {
   -moz-margin-start: -1px;
 }
 
 .search-setting-button {
   -moz-appearance: none;
   border-bottom: none;
   border-left: none;
   border-right: none;