Bug 1561534 - Anchor quantumbar results to the input behind megabar pref. r=dao
authorharry <htwyford@mozilla.com>
Wed, 14 Aug 2019 14:37:25 +0000
changeset 487986 0fe31de4a2712c918b59fba1c9de7e20db92d3bd
parent 487985 7e09ad9ceea6cc1dafe35ceed18af6a8b3bc007b
child 487987 dee7db615c4e59d244fdd679a1eeef1c03187c2e
push id36434
push usercbrindusan@mozilla.com
push dateThu, 15 Aug 2019 09:44:30 +0000
treeherdermozilla-central@144fbfb409b7 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1561534
milestone70.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 1561534 - Anchor quantumbar results to the input behind megabar pref. r=dao Differential Revision: https://phabricator.services.mozilla.com/D41842
browser/components/urlbar/UrlbarView.jsm
browser/themes/shared/urlbar-autocomplete.inc.css
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -30,16 +30,20 @@ class UrlbarView {
    */
   constructor(input) {
     this.input = input;
     this.panel = input.panel;
     this.controller = input.controller;
     this.document = this.panel.ownerDocument;
     this.window = this.document.defaultView;
 
+    if (this.input.megabar) {
+      this.panel.classList.add("megabar");
+    }
+
     this._mainContainer = this.panel.querySelector(".urlbarView-body-inner");
     this._rows = this.panel.querySelector("#urlbarView-results");
 
     this._rows.addEventListener("mousedown", this);
     this._rows.addEventListener("mouseup", this);
 
     // For the horizontal fade-out effect, set the overflow attribute on result
     // rows when they overflow.
@@ -418,76 +422,86 @@ class UrlbarView {
   _openPanel() {
     if (this.isOpen) {
       return;
     }
     this.controller.userSelectionBehavior = "none";
 
     this.panel.removeAttribute("actionoverride");
 
-    // Make the panel span the width of the window.
+    let inputRect = this._getBoundsWithoutFlushing(this.input.textbox);
+
     let px = number => number.toFixed(2) + "px";
-    let documentRect = this._getBoundsWithoutFlushing(
-      this.document.documentElement
-    );
-    let width = documentRect.right - documentRect.left;
-    this.panel.setAttribute("width", width);
+    let width;
+    if (this.input.megabar) {
+      // Make the panel span the width of the textbox.
+      width = inputRect.width;
+    } else {
+      // Make the panel span the width of the window.
+      let documentRect = this._getBoundsWithoutFlushing(
+        this.document.documentElement
+      );
+      width = documentRect.right - documentRect.left;
+
+      // Keep the popup items' site icons aligned with the input'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 boundToCheck = this.window.RTL_UI ? "right" : "left";
+      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 = this.window.RTL_UI ? "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;
+        }
+
+        // We need to align with the tracking protection icon if the
+        // 'pageproxystate' is valid since the tracking protection icon would be
+        // at the first position instead of the identity icon in this case.
+        let alignIcon;
+        if (this.input.getAttribute("pageproxystate") === "valid") {
+          alignIcon = this.document.getElementById(
+            "tracking-protection-icon-box"
+          );
+        } else {
+          alignIcon = this.document.getElementById("identity-icon");
+        }
+        let alignRect = this._getBoundsWithoutFlushing(alignIcon);
+        let start = this.window.RTL_UI
+          ? documentRect.right - alignRect.right
+          : alignRect.left;
+
+        this.panel.style.setProperty("--item-padding-start", px(start));
+        this.panel.style.setProperty("--item-padding-end", px(endOffset));
+      } else {
+        this.panel.style.removeProperty("--item-padding-start");
+        this.panel.style.removeProperty("--item-padding-end");
+      }
+    }
+
+    this.panel.style.width = px(width);
     this._mainContainer.style.maxWidth = px(width);
 
-    // Keep the popup items' site icons aligned with the input'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 boundToCheck = this.window.RTL_UI ? "right" : "left";
-    let inputRect = this._getBoundsWithoutFlushing(this.input.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 = this.window.RTL_UI ? "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;
-      }
-
-      // We need to align with the tracking protection icon if the
-      // 'pageproxystate' is valid since the tracking protection icon would be
-      // at the first position instead of the identity icon in this case.
-      let alignIcon;
-      if (this.input.getAttribute("pageproxystate") === "valid") {
-        alignIcon = this.document.getElementById(
-          "tracking-protection-icon-box"
-        );
-      } else {
-        alignIcon = this.document.getElementById("identity-icon");
-      }
-      let alignRect = this._getBoundsWithoutFlushing(alignIcon);
-      let start = this.window.RTL_UI
-        ? documentRect.right - alignRect.right
-        : alignRect.left;
-
-      this.panel.style.setProperty("--item-padding-start", px(start));
-      this.panel.style.setProperty("--item-padding-end", px(endOffset));
-    } else {
-      this.panel.style.removeProperty("--item-padding-start");
-      this.panel.style.removeProperty("--item-padding-end");
-    }
-
-    // Align the panel with the input's parent toolbar.
-    let toolbarRect = this._getBoundsWithoutFlushing(
-      this.input.textbox.closest("toolbar")
-    );
-    this.panel.style.top = px(toolbarRect.bottom);
+    // Align the panel with the input or the input's parent toolbar, depending
+    // on megabar status.
+    let alignmentRect = this.input.megabar
+      ? this._getBoundsWithoutFlushing(this.input.textbox)
+      : this._getBoundsWithoutFlushing(this.input.textbox.closest("toolbar"));
+    this.panel.style.top = px(alignmentRect.bottom);
 
     this.panel.removeAttribute("hidden");
     this.input.inputField.setAttribute("aria-expanded", "true");
     this.input.dropmarker.setAttribute("open", "true");
 
     this.window.addEventListener("mousedown", this);
     this.panel.addEventListener("mousedown", this);
     this.input.textbox.addEventListener("mousedown", this);
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -24,21 +24,28 @@
 :root[lwt-popup-brighttext] {
   --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
   --urlbar-popup-action-color: #30e60b;
 }
 
 #urlbar-results {
   position: fixed;
   z-index: 1;
-  left: 0;
-  right: 0;
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
   text-shadow: none;
+}
+
+#urlbar-results.megabar {
+  margin-inline-start: 5px;
+}
+
+#urlbar-results:not(.megabar) {
+  left: 0;
+  right: 0;
   border-block: 1px solid var(--chrome-content-separator-color);
 }
 
 #urlbar-contextual-tip {
   font-size: 13px;
   align-items: center;
   display: flex;
 
@@ -246,20 +253,23 @@
 .urlbarView-row[selected] > .urlbarView-row-inner > .urlbarView-tags > .urlbarView-tag {
   background-color: var(--autocomplete-popup-highlight-color);
   color: var(--autocomplete-popup-highlight-background);
 }
 
 /* Search one-offs. */
 #urlbar-results > .search-one-offs {
   -moz-box-orient: horizontal;
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+#urlbar-results:not(.megabar) > .search-one-offs {
   padding-inline-start: var(--item-padding-start, 5px);
   padding-inline-end: var(--item-padding-end, 5px);
-  padding-top: 16px;
-  padding-bottom: 16px;
 }
 
 #urlbar-results .search-panel-one-offs {
   padding-left: 12px;
   padding-right: 12px;
 }
 
 #urlbar-results .search-panel-header {