Bug 1358382 - Compute the searchbar panel size and position without sync reflow, r=adw.
authorFlorian Queze <florian@queze.net>
Sat, 22 Apr 2017 02:09:05 +0200
changeset 566728 c1db9bb48b283e79f95ad3691b05737128e8088c
parent 566727 68e88b3e0e573392aba1e342b4dfd7bad9ecfeef
child 566729 7e83c4c31ee5b906283d09b98489de04442f4570
push id55308
push userbmo:rajesh.kathiriya507@gmail.com
push dateSat, 22 Apr 2017 10:15:05 +0000
reviewersadw
bugs1358382
milestone55.0a1
Bug 1358382 - Compute the searchbar panel size and position without sync reflow, r=adw.
browser/components/search/content/search.xml
browser/themes/linux/searchbar.css
browser/themes/osx/searchbar.css
browser/themes/windows/searchbar.css
--- a/browser/components/search/content/search.xml
+++ b/browser/components/search/content/search.xml
@@ -1073,32 +1073,33 @@
           let searchbar = document.getElementById("searchbar");
           searchbar.handleSearchCommandWhere(event, engine, where, params);
         ]]></body>
       </method>
     </implementation>
 
     <handlers>
       <handler event="popupshowing"><![CDATA[
-        if (!this._computedMinWidth) {
-          // 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(this)[
-                                 ltr ? "marginLeft" : "marginRight"
-                               ]) * -1;
-          // Ensure the panel is wide enough to fit at least 3 engines.
-          let minWidth = Math.max(
-            parseInt(this.width) + magnifierWidth,
-            this.oneOffButtons.buttonWidth * 3
-          );
-          this.style.minWidth = minWidth + "px";
+        // Force the panel to have the width of the searchbar rather than
+        // the width of the textfield.
+        let DOMUtils = window.QueryInterface(Ci.nsIInterfaceRequestor)
+                             .getInterface(Ci.nsIDOMWindowUtils);
+        let textboxRect = DOMUtils.getBoundsWithoutFlushing(this.mInput);
+        let inputRect = DOMUtils.getBoundsWithoutFlushing(this.mInput.inputField);
 
-          this._computedMinWidth = true;
-        }
+        // Ensure the panel is wide enough to fit at least 3 engines.
+        let minWidth = Math.max(textboxRect.width,
+                                this.oneOffButtons.buttonWidth * 3);
+        this.style.minWidth = minWidth + "px";
+        // Alignment of the panel with the searchbar is obtained with negative
+        // margins.
+        this.style.marginLeft = (textboxRect.left - inputRect.left) + "px";
+        // This second margin is needed when the direction is reversed,
+        // eg. when using command+shift+X.
+        this.style.marginRight = (inputRect.right - textboxRect.right) + "px";
 
         // First handle deciding if we are showing the reduced version of the
         // popup containing only the preferences button. We do this if the
         // glass icon has been clicked if the text field is empty.
         let searchbar = document.getElementById("searchbar");
         let tree = document.getAnonymousElementByAttribute(this, "anonid",
                                                            "tree")
         if (searchbar.hasAttribute("showonlysettings")) {
--- a/browser/themes/linux/searchbar.css
+++ b/browser/themes/linux/searchbar.css
@@ -1,23 +1,12 @@
 /* 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 {
-  /* JS code forces the panel to have the width of the searchbar rather than
-   * the width of the textfield. Alignment of the panel with the searchbar is
-   * obtained with negative margins here: margin-inline-start when the text
-   * field is in the same direction as the rest of the UI, margin-inline-end
-   * when the textfield's direction has been reversed.
-   * (eg. using ctrl+shift+X) */
-  margin-inline-start: -23px;
-  margin-inline-end: -16px;
-}
-
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
 
 .textbox-input-box {
   margin: 0;
 }
 
--- a/browser/themes/osx/searchbar.css
+++ b/browser/themes/osx/searchbar.css
@@ -1,23 +1,12 @@
 /* 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 {
-  /* JS code forces the panel to have the width of the searchbar rather than
-   * the width of the textfield. Alignment of the panel with the searchbar is
-   * obtained with negative margins here: margin-inline-start when the text
-   * field is in the same direction as the rest of the UI, margin-inline-end
-   * when the textfield's direction has been reversed.
-   * (eg. using command+shift+X) */
-  margin-inline-start: -23px;
-  margin-inline-end: -21px;
-}
-
 .searchbar-textbox {
   border-radius: 10000px;
 }
 
 .searchbar-popup {
   margin-top: 4px;
   margin-inline-start: 3px;
 }
--- a/browser/themes/windows/searchbar.css
+++ b/browser/themes/windows/searchbar.css
@@ -1,23 +1,12 @@
 /* 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 {
-  /* JS code forces the panel to have the width of the searchbar rather than
-   * the width of the textfield. Alignment of the panel with the searchbar is
-   * obtained with negative margins here: margin-inline-start when the text
-   * field is in the same direction as the rest of the UI, margin-inline-end
-   * when the textfield's direction has been reversed.
-   * (eg. using ctrl+shift+X) */
-  margin-inline-start: -25px;
-  margin-inline-end: -18px;
-}
-
 .autocomplete-textbox-container {
   -moz-box-align: stretch;
 }
 
 .textbox-input-box {
   margin: 0;
 }