Bug 1383009 - fix logic for url bar autocomplete item positioning to allow it to position items in more cases, r?adw draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 08 Aug 2017 21:16:44 +0100
changeset 644172 b128b00a5b00d2465d5f693af5a3e193614c668d
parent 644171 a146c5b8223aec7f0212d6addda281bfe0a98252
child 725511 825340478ec29b355e67056be4d010bd4a06bfc2
push id73328
push usergijskruitbosch@gmail.com
push dateThu, 10 Aug 2017 15:45:52 +0000
reviewersadw
bugs1383009
milestone57.0a1
Bug 1383009 - fix logic for url bar autocomplete item positioning to allow it to position items in more cases, r?adw MozReview-Commit-ID: 8D5WzfzoNOV
browser/base/content/urlbarBindings.xml
--- a/browser/base/content/urlbarBindings.xml
+++ b/browser/base/content/urlbarBindings.xml
@@ -1836,47 +1836,43 @@ file, You can obtain one at http://mozil
             return;
           }
 
           this.mInput = aInput;
           aInput.controller.setInitiallySelectedIndex(this._isFirstResultHeuristic ? 0 : -1);
           this.view = aInput.controller.QueryInterface(Components.interfaces.nsITreeView);
           this._invalidate();
 
-          var rect = window.document.documentElement.getBoundingClientRect();
-          var width = rect.right - rect.left;
+          var documentRect = window.document.documentElement.getBoundingClientRect();
+          var width = documentRect.right - documentRect.left;
           this.setAttribute("width", width);
 
           // Adjust the direction of the autocomplete popup list based on the textbox direction, bug 649840
           var popupDirection = aElement.ownerGlobal.getComputedStyle(aElement).direction;
           this.style.direction = popupDirection;
 
           // Make the popup's starting margin negative so that the leading edge
           // of the popup aligns with the window border.
           let elementRect = aElement.getBoundingClientRect();
           if (popupDirection == "rtl") {
-            let offset = elementRect.right - rect.right
+            let offset = elementRect.right - documentRect.right
             this.style.marginRight = offset + "px";
           } else {
-            let offset = rect.left - elementRect.left;
+            let offset = documentRect.left - elementRect.left;
             this.style.marginLeft = offset + "px";
           }
 
           // Keep the popup items' site icons aligned with the urlbar's identity
-          // icon if it's not too far from the edge of the window.  If there are
-          // at most two toolbar buttons between the window edge and the urlbar,
-          // then consider that as "not too far."  The forward button's
-          // visibility may have changed since the last time the popup was
-          // opened, so this needs to happen now.  Do it *before* the popup
-          // opens because otherwise the items will visibly shift.
-          let nodes = [...document.getElementById("nav-bar-customization-target").childNodes];
-          let urlbarPosition = nodes.findIndex(n => n.id == "urlbar-container");
-          let alignSiteIcons = urlbarPosition <= 5 &&
-                               nodes.slice(0, urlbarPosition)
-                                    .every(n => n.localName == "toolbarbutton" || n.id == "stop-reload-button");
+          // icon if it's not too far from the edge of the window.  We define
+          // "too far" as "more than 30% of the window's width AND more than
+          // 250px"
+          let boundToCheck = popupDirection == "rtl" ? "right" : "left";
+          let inputRect = this.DOMWindowUtils.getBoundsWithoutFlushing(aInput);
+          let startOffset = Math.abs(inputRect[boundToCheck] - documentRect[boundToCheck]);
+          let alignSiteIcons = startOffset / width <= 0.3 || startOffset <= 250;
           if (alignSiteIcons) {
             let identityRect =
               document.getElementById("identity-icon").getBoundingClientRect();
             this.siteIconStart = popupDirection == "rtl" ? identityRect.right
                                                          : identityRect.left;
           } else {
             // Reset the alignment so that the site icons are positioned
             // according to whatever's in the CSS.