Bug 1115307 - Search bar alignment fixes and cleanup. r=florian, a=sledru
authorDão Gottwald <dao@mozilla.com>
Fri, 09 Jan 2015 19:00:51 +0100
changeset 242864 c7e58ab0e1f6
parent 242863 423cb20b5f43
child 242865 17b6018c53f0
push id4322
push userryanvm@gmail.com
push date2015-01-14 15:18 +0000
treeherdermozilla-beta@82cce51fb174 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian, sledru
bugs1115307
milestone36.0
Bug 1115307 - Search bar alignment fixes and cleanup. r=florian, a=sledru
browser/base/content/browser.css
browser/base/content/urlbarBindings.xml
browser/themes/linux/searchbar.css
browser/themes/osx/searchbar.css
browser/themes/windows/searchbar.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -412,17 +412,16 @@ panel[noactions] > richlistbox > richlis
 }
 
 #PopupAutoComplete {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-autocomplete-result-popup");
 }
 
 #PopupSearchAutoComplete {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#browser-search-autocomplete-result-popup");
-  margin-left: -23px;
 }
 
 /* Overlay a badge on top of the icon of additional open search providers
    in the search panel. */
 .addengine-item > .button-box > .button-icon {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addengine-icon");
   display: -moz-stack;
 }
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -1122,31 +1122,36 @@
         let engines = Services.search.getVisibleEngines()
                               .filter(e => e.name != currentEngineName &&
                                            hiddenList.indexOf(e.name) == -1);
 
         let header = document.getAnonymousElementByAttribute(this, "anonid",
                                                              "search-panel-one-offs-header")
         header.collapsed = list.collapsed = !engines.length;
 
-        if (!engines.length)
-          return;
-
         // 49px is the min-width of each search engine button,
         // adapt this const when changing the css.
         // It's actually 48px + 1px of right border.
         const ENGINE_WIDTH = 49;
+        let panel = document.getElementById("PopupSearchAutoComplete");
+        // The panel width only spans to the textbox size, but we also want it
+        // to include the magnifier icon's width.
+        let ltr = getComputedStyle(this).direction == "ltr";
+        let magnifierWidth = parseInt(getComputedStyle(panel)[
+                               ltr ? "marginLeft" : "marginRight"
+                             ]) * -1;
+        let minWidth = parseInt(panel.width) + magnifierWidth;
+        if (engines.length) {
+          // Ensure the panel is wide enough to fit at least 3 engines.
+          minWidth = Math.max(minWidth, ENGINE_WIDTH * 3);
+        }
+        panel.setAttribute("style", "min-width: " + minWidth + "px");
 
-        let panel = document.getElementById("PopupSearchAutoComplete");
-        // The + 23 is because the panel width only spans to the textbox
-        // size, but we also want it to include the magnifier icon's width.
-        let minWidth = parseInt(panel.width) + 23;
-        // Ensure the panel is wide enough to fit at least 3 engines.
-        minWidth = Math.max(minWidth, ENGINE_WIDTH * 3);
-        panel.setAttribute("style", "min-width: " + minWidth + "px");
+        if (!engines.length)
+          return;
 
         let panelWidth = parseInt(panel.clientWidth);
         // The + 1 is because the last button doesn't have a right border.
         let enginesPerRow = Math.floor((panelWidth + 1) / ENGINE_WIDTH);
         let buttonWidth = Math.floor(panelWidth / enginesPerRow);
         // There will be an emtpy area of:
         //   panelWidth - enginesPerRow * buttonWidth  px
         // at the end of each row.
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -1,12 +1,16 @@
 /* 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/. */
 
+#PopupSearchAutoComplete {
+  -moz-margin-start: -24px;
+}
+
 .searchbar-textbox {
   min-height: 22px;
   background-color: -moz-field;
 }
 
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
@@ -19,17 +23,16 @@
   font-weight: bold;
 }
 
 /* Engine button */
 .searchbar-engine-image {
   height: 16px;
   width: 16px;
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
-  -moz-margin-start: 2px;
 }
 
 .searchbar-engine-button {
   -moz-appearance: none;
   min-width: 0;
   margin: 0;
   border: 0;
   -moz-box-align: center;
@@ -67,24 +70,22 @@ menuitem[cmd="cmd_clearhistory"][disable
   list-style-image: url("moz-icon://stock/gtk-clear?size=menu&state=disabled");
 }
 
 
 
 
 .searchbar-search-button-container {
   -moz-box-align: center;
-  padding: 2px 3px;
-  -moz-padding-end: 2px;
 }
 
 .searchbar-search-button {
   list-style-image: url("chrome://browser/skin/search-indicator.png");
   -moz-image-region: rect(0, 20px, 20px, 0);
-  margin: -2px -2px;
+  -moz-margin-start: 2px;
 }
 
 .searchbar-search-button[addengines="true"] {
   list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
 }
 
 .searchbar-search-button:hover {
   -moz-image-region: rect(0, 40px, 20px, 20px);
@@ -235,17 +236,17 @@ searchbar[oneoffui] .searchbar-engine-bu
   border-top: none !important;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-cell-text {
   -moz-padding-start: 4px;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-image {
-  -moz-padding-start: 6px;
+  -moz-padding-start: 5px;
   width: 14px;
   height: 14px;
 }
 
 .search-panel-tree > .autocomplete-treebody::-moz-tree-image(fromhistory) {
   list-style-image: url("chrome://browser/skin/search-history-icon.svg#search-history-icon");
 }
 
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -1,12 +1,16 @@
 /* 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/. */
 
+#PopupSearchAutoComplete {
+  -moz-margin-start: -23px;
+}
+
 .searchbar-dropmarker-image {
   --searchbar-dropmarker-url: url("chrome://browser/skin/searchbar-dropmarker.png");
   --searchbar-dropmarker-2x-url: url("chrome://browser/skin/searchbar-dropmarker@2x.png");
 }
 
 .searchbar-textbox {
   border-radius: 10000px;
 }
@@ -44,28 +48,27 @@
 
 .search-go-container {
   -moz-box-align: center;
   -moz-padding-end: 6px;
 }
 
 .searchbar-search-button-container {
   -moz-box-align: center;
-  -moz-padding-start: 6px;
-  -moz-padding-end: 4px;
 }
 
 .search-go-button {
   list-style-image: url("chrome://browser/skin/Search.png");
 }
 
 .searchbar-search-button {
   list-style-image: url("chrome://browser/skin/search-indicator.png");
   -moz-image-region: rect(0, 20px, 20px, 0);
-  margin: 0 -3px;
+  -moz-margin-start: 3px;
+  -moz-margin-end: 1px;
 }
 
 .searchbar-search-button[addengines="true"] {
   list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
 }
 
 .searchbar-search-button:hover {
   -moz-image-region: rect(0, 40px, 20px, 20px);
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -1,12 +1,16 @@
 /* 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/. */
 
+#PopupSearchAutoComplete {
+  -moz-margin-start: -25px;
+}
+
 .searchbar-dropmarker-image {
   --searchbar-dropmarker-url: url("chrome://browser/skin/searchbar-dropdown-arrow.png");
 }
 
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
 
@@ -16,17 +20,16 @@
 
 /* ::::: searchbar-engine-button ::::: */
 
 .searchbar-engine-image {
   height: 16px;
   width: 16px;
   list-style-image: url("chrome://global/skin/icons/folder-item.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
-  -moz-margin-start: 2px;
 }
 
 .searchbar-engine-button {
   -moz-appearance: none;
   min-width: 0;
   margin: 0;
   padding: 0;
   -moz-padding-end: 2px;
@@ -78,24 +81,24 @@
 .searchbar-engine-menuitem[selected="true"] > .menu-iconic-text {
   font-weight: bold;
 }
 
 
 
 .searchbar-search-button-container {
   -moz-box-align: center;
-  padding: 3px 4px;
-  -moz-padding-end: 2px;
 }
 
 .searchbar-search-button {
   list-style-image: url("chrome://browser/skin/search-indicator.png");
   -moz-image-region: rect(0, 20px, 20px, 0);
-  margin: -2px -2px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  -moz-margin-start: 4px;
 }
 
 .searchbar-search-button[addengines="true"] {
   list-style-image: url("chrome://browser/skin/search-indicator-badge-add.png");
 }
 
 .searchbar-search-button:hover {
   -moz-image-region: rect(0, 40px, 20px, 20px);