Bug 1538367 - Fix quantumbar popup's vertical position on Mac. r=mak
authorDão Gottwald <dao@mozilla.com>
Tue, 02 Apr 2019 14:39:38 +0000
changeset 467603 c1f4e710ff8e2a002640afd221e23f57646df3d8
parent 467602 281f1757c40eb781a8ede5d30ad2454865c77ef8
child 467604 07800c801230ef8d5d273009496db05e1cff5e37
push id82073
push userdgottwald@mozilla.com
push dateTue, 02 Apr 2019 14:40:50 +0000
treeherderautoland@c1f4e710ff8e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1538367
milestone68.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 1538367 - Fix quantumbar popup's vertical position on Mac. r=mak Differential Revision: https://phabricator.services.mozilla.com/D25753
browser/components/urlbar/UrlbarView.jsm
browser/themes/osx/browser.css
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -336,22 +336,16 @@ class UrlbarView {
     if (this.isOpen) {
       return;
     }
     this.controller.userSelectionBehavior = "none";
 
     this.panel.removeAttribute("hidden");
     this.panel.removeAttribute("actionoverride");
 
-    this._alignPanel();
-
-    this.panel.openPopup(this.input.textbox, "after_start");
-  }
-
-  _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.
     let contentWidth = width - 2;
@@ -389,20 +383,22 @@ class UrlbarView {
       this.panel.style.removeProperty("--item-padding-start");
       this.panel.style.removeProperty("--item-padding-end");
     }
     this.panel.style.setProperty("--item-content-width", Math.round(contentWidth) + "px");
 
     // Align the panel with the input's parent toolbar.
     let toolbarRect =
       this._getBoundsWithoutFlushing(this.input.textbox.closest("toolbar"));
-    this.panel.style.marginInlineStart = this.window.RTL_UI ?
-      inputRect.right - documentRect.right + "px" :
-      documentRect.left - inputRect.left + "px";
-    this.panel.style.marginTop = inputRect.top - toolbarRect.top + "px";
+    let offsetX = Math.round(this.window.RTL_UI ?
+      inputRect.right - documentRect.right :
+      documentRect.left - inputRect.left);
+    let offsetY = Math.round(inputRect.top - toolbarRect.top);
+
+    this.panel.openPopup(this.input.textbox, "after_start", offsetX, offsetY);
   }
 
   _createRow() {
     let item = this._createElement("div");
     item.className = "urlbarView-row";
     item.setAttribute("role", "option");
     item._elements = new Map;
 
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -334,17 +334,18 @@ html|input.urlbar-input {
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 /* Give an extra margin top to align the top of the awesomebar with the
  * bottom of the nav bar, OSX calculates the panel position with an missing
  * 1px - https://bugzilla.mozilla.org/show_bug.cgi?id=1406353
  */
-#PopupAutoCompleteRichResult {
+#PopupAutoCompleteRichResult,
+#urlbar-results {
   margin-top: 1px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid #C7C7C7;
 }
 
 .ac-title,