Bug 1544030 - Fix quantumbar popup's vertical borders and position on Mac once again. r=mak

Differential Revision: https://phabricator.services.mozilla.com/D29340

--HG--
extra : moz-landing-system : lando

browser/components/urlbar/UrlbarView.jsm

@@ -12,6 +12,7 @@ XPCOMUtils.defineLazyModuleGetters(this, {
   UrlbarPrefs: "resource:///modules/UrlbarPrefs.jsm",
   UrlbarTokenizer: "resource:///modules/UrlbarTokenizer.jsm",
   UrlbarUtils: "resource:///modules/UrlbarUtils.jsm",
+  AppConstants: "resource://gre/modules/AppConstants.jsm",
 });
 
 XPCOMUtils.defineLazyGetter(this, "bundle", function() {
@@ -371,10 +372,16 @@ class UrlbarView {
     // Align the panel with the input's parent toolbar.
     let toolbarRect =
       this._getBoundsWithoutFlushing(this.input.textbox.closest("toolbar"));
-    this.panel.style.marginInlineStart = px(this.window.RTL_UI ?
+    let horizontalOffset = this.window.RTL_UI ?
       inputRect.right - documentRect.right :
-      documentRect.left - inputRect.left);
-    this.panel.style.marginTop = px(inputRect.top - toolbarRect.top);
+      documentRect.left - inputRect.left;
+    let verticalOffset = inputRect.top - toolbarRect.top;
+    if (AppConstants.platform == "macosx") {
+      // Adjust vertical offset to account for the popup's native outer border.
+      verticalOffset++;
+    }
+    this.panel.style.marginInlineStart = px(horizontalOffset);
+    this.panel.style.marginTop = px(verticalOffset);
 
     this.panel.openPopup(this.input.textbox, "after_start");
   }

browser/themes/osx/browser.css

@@ -336,6 +336,12 @@ html|input.urlbar-input {
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
+/* Remove our custom border since we already get a native one that we can't
+ * seem to override. */
+#urlbar-results {
+  border-style: none;
+}
+
 /* 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