Bug 1491277 - Align UrlbarView results with the textbox. r=paolo
authorDão Gottwald <dao@mozilla.com>
Thu, 22 Nov 2018 16:29:51 +0000
changeset 506925 87bad1f80deeaf4a3cd715d75b405877165c1eeb
parent 506924 e23085e6b51f7d2ab2e9c11fedbc1ef0177f30ed
child 506926 07a947ccd73ad20f12144df34462150ca6962ca1
push id1905
push userffxbld-merge
push dateMon, 21 Jan 2019 12:33:13 +0000
treeherdermozilla-release@c2fca1944d8c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspaolo
bugs1491277
milestone65.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 1491277 - Align UrlbarView results with the textbox. r=paolo Differential Revision: https://phabricator.services.mozilla.com/D12548
browser/components/urlbar/UrlbarView.jsm
browser/themes/shared/urlbar-autocomplete.inc.css
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -52,30 +52,17 @@ class UrlbarView {
   }
 
   /**
    * Opens the autocomplete results popup.
    */
   open() {
     this.panel.removeAttribute("hidden");
 
-    let panelDirection = this.panel.style.direction;
-    if (!panelDirection) {
-      panelDirection = this.panel.style.direction =
-        this.window.getComputedStyle(this.urlbar.textbox).direction;
-    }
-
-    // Make the panel span the width of the window.
-    let documentRect =
-      this._getBoundsWithoutFlushing(this.document.documentElement);
-    let width = documentRect.right - documentRect.left;
-    this.panel.setAttribute("width", width);
-
-    // Subtract two pixels for left and right borders on the panel.
-    this._mainContainer.style.maxWidth = (width - 2) + "px";
+    this._alignPanel();
 
     // TODO: Search one off buttons are a stub right now.
     //       We'll need to set them up properly.
     this.oneOffSearchButtons;
 
     this.panel.openPopup(this.urlbar.textbox.closest("toolbar"), "after_end", 0, -1);
 
     this._rows.firstElementChild.toggleAttribute("selected", true);
@@ -117,16 +104,58 @@ class UrlbarView {
   _getBoundsWithoutFlushing(element) {
     return this.window.windowUtils.getBoundsWithoutFlushing(element);
   }
 
   _createElement(name) {
     return this.document.createElementNS("http://www.w3.org/1999/xhtml", name);
   }
 
+  _alignPanel() {
+    // Make the panel span the width of the window.
+    let documentRect =
+      this._getBoundsWithoutFlushing(this.document.documentElement);
+    let width = documentRect.right - documentRect.left;
+    this.panel.setAttribute("width", width);
+
+    // Subtract two pixels for left and right borders on the panel.
+    this._mainContainer.style.maxWidth = (width - 2) + "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.  We define
+    // "too far" as "more than 30% of the window's width AND more than
+    // 250px".
+    let isRTL = this.document.documentElement.matches(":-moz-locale-dir(rtl)");
+    let boundToCheck = isRTL ? "right" : "left";
+    let inputRect = this._getBoundsWithoutFlushing(this.urlbar.textbox);
+    let startOffset = Math.abs(inputRect[boundToCheck] - documentRect[boundToCheck]);
+    let alignSiteIcons = startOffset / width <= 0.3 || startOffset <= 250;
+    if (alignSiteIcons) {
+      // Calculate the end margin if we have a start margin.
+      let boundToCheckEnd = isRTL ? "left" : "right";
+      let endOffset = Math.abs(inputRect[boundToCheckEnd] -
+                               documentRect[boundToCheckEnd]);
+      if (endOffset > startOffset * 2) {
+        // Provide more space when aligning would result in an unbalanced
+        // margin. This allows the location bar to be moved to the start
+        // of the navigation toolbar to reclaim space for results.
+        endOffset = startOffset;
+      }
+      let identityIcon = this.document.getElementById("identity-icon");
+      let identityRect = this._getBoundsWithoutFlushing(identityIcon);
+      let start = isRTL ? documentRect.right - identityRect.right : identityRect.left;
+
+      this.panel.style.setProperty("--item-padding-start", Math.round(start) + "px");
+      this.panel.style.setProperty("--item-padding-end", Math.round(endOffset) + "px");
+    } else {
+      this.panel.style.removeProperty("--item-padding-start");
+      this.panel.style.removeProperty("--item-padding-end");
+    }
+  }
+
   _addRow(resultIndex) {
     let result = this._queryContext.results[resultIndex];
     let item = this._createElement("div");
     item.className = "urlbarView-row";
     item.addEventListener("click", this);
     item.setAttribute("resultIndex", resultIndex);
     if (result.type == UrlbarUtils.MATCH_TYPE.TAB_SWITCH) {
       item.setAttribute("action", "switch-to-tab");
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -1,14 +1,19 @@
 %if 0
 /* 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/. */
 %endif
 
+%filter substitution
+%define urlbarViewPadding 5px
+%define urlbarViewIconMarginEnd .6em
+%define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* action icon width */ + @urlbarViewIconMarginEnd@)
+
 :root {
   --autocomplete-popup-background: -moz-field;
   --autocomplete-popup-color: -moz-fieldtext;
   --autocomplete-popup-border-color: ThreeDShadow;
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
 }
 
@@ -29,23 +34,25 @@
   border: 1px solid var(--autocomplete-popup-border-color);
 }
 
 .urlbarView-body-inner {
   box-sizing: border-box;
 }
 
 .urlbarView-results {
-  padding: 5px;
+  padding: @urlbarViewPadding@;
   white-space: nowrap;
 }
 
 .urlbarView-row {
-  padding: 7px 50px;
   border-radius: 2px;
+  padding: 7px;
+  padding-inline-start: calc(var(--item-padding-start, calc(7px + @urlbarViewFaviconOffset@)) - @urlbarViewFaviconOffset@);
+  padding-inline-end: var(--item-padding-end, 7px);
 }
 
 .urlbarView-row-inner {
   overflow: hidden;
   display: block;
 }
 
 .urlbarView-row-inner[overflow] {
@@ -62,17 +69,17 @@
 }
 
 .urlbarView-action-icon,
 .urlbarView-favicon {
   display: inline-block;
   vertical-align: middle;
   width: 16px;
   height: 16px;
-  margin-inline-end: .6em;
+  margin-inline-end: @urlbarViewIconMarginEnd@;
   background-repeat: no-repeat;
   background-size: contain;
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
 }
 
 .urlbarView-favicon {