Bug 1115307 - Search bar alignment fixes and cleanup. r=florian
authorDão Gottwald <dao@mozilla.com>
Fri, 09 Jan 2015 19:00:51 +0100
changeset 249021 05511d05f1e05d5162062f45b9aea01ea69fd00a
parent 249020 0f784b15c6c70261897e02c452c74116e334f6be
child 249022 50c51c5df1b6ca0bceb64a8d2634b71b1149779b
push id4489
push userraliiev@mozilla.com
push dateMon, 23 Feb 2015 15:17:55 +0000
treeherdermozilla-beta@fd7c3dc24146 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersflorian
bugs1115307
milestone37.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 1115307 - Search bar alignment fixes and cleanup. r=florian
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
@@ -436,17 +436,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
@@ -1127,31 +1127,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);