Bug 1106054 - Search dropdown should have a minimum width. r=florian, a=sledru
authorFelipe Gomes <felipc@gmail.com>
Fri, 19 Dec 2014 00:40:38 -0200
changeset 242567 de3849c3d5ee9c0b4908a5bbc12b312702a25b35
parent 242566 1548fb0d8aa078afba8bc6245dfa44f5669e4eb9
child 242568 f2d2a910e7cefb1f66eab89c6b6059754b006dd4
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)
reviewersflorian, sledru
bugs1106054
milestone36.0a2
Bug 1106054 - Search dropdown should have a minimum width. r=florian, a=sledru
browser/base/content/urlbarBindings.xml
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -1117,26 +1117,32 @@
 
         let header = document.getAnonymousElementByAttribute(this, "anonid",
                                                              "search-panel-one-offs-header")
         header.collapsed = list.collapsed = !engines.length;
 
         if (!engines.length)
           return;
 
-        let panel = document.getElementById("PopupSearchAutoComplete");
-        let minWidth = parseInt(panel.width) + 23;
-        panel.setAttribute("style", "min-width: " + minWidth + "px");
-
         // 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.
-        // The + 1 is because the last button doesn't have a right border.
+        const ENGINE_WIDTH = 49;
+
+        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");
+
         let panelWidth = parseInt(panel.clientWidth);
-        let enginesPerRow = Math.floor((panelWidth + 1) / 49);
+        // 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.
 
         // If the <description> tag with the list of search engines doesn't have
         // a fixed height, the panel will be sized incorrectly, causing the bottom
         // of the suggestion <tree> to be hidden.