Bug 1541910 - Use the chrome/content separator color for the urlbar results popup's top and bottom borders consistently across platforms and remove left and right borders. r=mak
authorDão Gottwald <dao@mozilla.com>
Thu, 11 Apr 2019 11:47:18 +0000
changeset 468989 cec02915533974e9ad62aad07838cdbfdb477f15
parent 468988 b2bc140a4d766e6b86d85b77e2bc12733402dc27
child 468990 54e502f0f78edfe26fc4faa080dcd9ea5f6047a8
push id35856
push usercsabou@mozilla.com
push dateFri, 12 Apr 2019 03:19:48 +0000
treeherdermozilla-central@940684cd1065 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmak
bugs1541910
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 1541910 - Use the chrome/content separator color for the urlbar results popup's top and bottom borders consistently across platforms and remove left and right borders. r=mak Differential Revision: https://phabricator.services.mozilla.com/D26192
browser/components/urlbar/UrlbarView.jsm
browser/modules/ThemeVariableMap.jsm
browser/themes/osx/browser.css
browser/themes/shared/urlbar-autocomplete.inc.css
--- a/browser/components/urlbar/UrlbarView.jsm
+++ b/browser/components/urlbar/UrlbarView.jsm
@@ -341,25 +341,23 @@ class UrlbarView {
     this.panel.removeAttribute("hidden");
     this.panel.removeAttribute("actionoverride");
 
     // 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;
-    this._mainContainer.style.maxWidth = contentWidth + "px";
+    this._mainContainer.style.maxWidth = width + "px";
 
     // 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 contentWidth = width;
     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] -
@@ -383,22 +381,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"));
-    let offsetX = Math.round(this.window.RTL_UI ?
+    this.panel.style.marginInlineStart = Math.round(this.window.RTL_UI ?
       inputRect.right - documentRect.right :
-      documentRect.left - inputRect.left);
-    let offsetY = Math.round(inputRect.top - toolbarRect.top);
+      documentRect.left - inputRect.left) + "px";
+    this.panel.style.marginTop = Math.round(inputRect.top - toolbarRect.top) + "px";
 
-    this.panel.openPopup(this.input.textbox, "after_start", offsetX, offsetY);
+    this.panel.openPopup(this.input.textbox, "after_start");
   }
 
   _createRow() {
     let item = this._createElement("div");
     item.className = "urlbarView-row";
     item.setAttribute("role", "option");
     item._elements = new Map;
 
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -65,19 +65,16 @@ const ThemeVariableMap = [
     lwtProperty: "tab_selected",
   }],
   ["--autocomplete-popup-background", {
     lwtProperty: "popup",
   }],
   ["--autocomplete-popup-color", {
     lwtProperty: "popup_text",
   }],
-  ["--autocomplete-popup-border-color", {
-    lwtProperty: "popup_border",
-  }],
   ["--autocomplete-popup-highlight-background", {
     lwtProperty: "popup_highlight",
   }],
   ["--autocomplete-popup-highlight-color", {
     lwtProperty: "popup_highlight_text",
   }],
   ["--sidebar-background-color", {
     lwtProperty: "sidebar",
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -334,18 +334,17 @@ 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,
-#urlbar-results {
+#PopupAutoCompleteRichResult {
   margin-top: 1px;
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
   border-top: 1px solid #C7C7C7;
 }
 
 .ac-title,
--- a/browser/themes/shared/urlbar-autocomplete.inc.css
+++ b/browser/themes/shared/urlbar-autocomplete.inc.css
@@ -5,19 +5,18 @@
 %endif
 
 %filter substitution
 %define urlbarViewPadding 4px
 %define urlbarViewIconMarginEnd 8px
 %define urlbarViewFaviconOffset (@urlbarViewPadding@ + 16px /* type icon width */ + @urlbarViewIconMarginEnd@)
 
 :root {
-  --autocomplete-popup-background: -moz-field;
-  --autocomplete-popup-color: -moz-fieldtext;
-  --autocomplete-popup-border-color: ThreeDShadow;
+  --autocomplete-popup-background: var(--arrowpanel-background);
+  --autocomplete-popup-color: var(--arrowpanel-color);
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
 }
 
 :root[lwt-popup-darktext] {
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
@@ -26,17 +25,19 @@
   --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
   --urlbar-popup-action-color: #30e60b;
 }
 
 #urlbar-results {
   -moz-appearance: none;
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
-  border: 1px solid var(--autocomplete-popup-border-color);
+  border: 1px solid var(--chrome-content-separator-color);
+  border-left-style: none;
+  border-right-style: none;
 }
 
 .urlbarView-body-inner {
   box-sizing: border-box;
 }
 
 #urlbarView-results {
   box-sizing: border-box;
@@ -187,17 +188,17 @@
 }
 
 /* legacy URL bar styles below */
 
 #PopupAutoCompleteRichResult,
 #PopupSearchAutoComplete {
   background: var(--autocomplete-popup-background);
   color: var(--autocomplete-popup-color);
-  border-color: var(--autocomplete-popup-border-color);
+  border-color: var(--arrowpanel-border-color);
 }
 
 #PopupAutoCompleteRichResult .autocomplete-richlistbox {
   padding: 4px 3px;
   background: transparent;
   color: inherit;
 }