Bug 1088660 - Improve the search bar UI to support one-off searches - polish CSS for Windows/Linux, rs=dolske.
authorFlorian Quèze <florian@queze.net>
Thu, 20 Nov 2014 22:59:58 +0100
changeset 242163 6bcf7110d616fdf560cc1ae2df9a58950be6f16e
parent 242162 c922c2fb6cf8ce9914863bdd87b4a5a682d110e7
child 242164 fcd31dc5cb15dafa6e6c99a2c47191e2e66045ae
push id4311
push userraliiev@mozilla.com
push dateMon, 12 Jan 2015 19:37:41 +0000
treeherdermozilla-beta@150c9fed433b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdolske
bugs1088660
milestone36.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1088660 - Improve the search bar UI to support one-off searches - polish CSS for Windows/Linux, rs=dolske.
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;