Bug 1691535 - Add Proton styles for the Urlbar results panel. r=mak,desktop-theme-reviewers,ntim

This patch changes the selection colour in the Urlbar view. It only changes the colours when a theme is not applied, to not break the many themes that depend on the panel background/color being Highlight/HighlightText. It also only changes the default theme on macOS and the default Windows theme. Windows High Contrast and Linux OS themes would break if the autocomplete background was not Highlight.

This patch also reduces the padding in the search one-offs and changes the color of arrowpanel-dimmed slightly to better match the spec. The hover colour shown in the spec is rgb(240,240,244). The new arrowpanel-dimmed colour is rgb(240,240,240).

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

browser/themes/addons/alpenglow/manifest.json

@@ -60,6 +60,7 @@
       "popup_text": "hsla(255, 100%, 94%, 1)",
       "popup_border": "hsla(255, 100%, 94%, .32)",
       "popup_highlight": "hsla(255, 100%, 94%, .12)",
+      "popup_highlight_text": "hsla(0, 0%, 100%, 1)",
       "sidebar": "hsla(240, 15%, 95%, 1)",
       "sidebar_text": "hsla(261, 53%, 15%, 1)",
       "sidebar_border": "hsla(261, 53%, 15%, .24)",
@@ -116,6 +117,7 @@
       "popup_text": "hsla(255, 100%, 94%, 1)",
       "popup_border": "hsla(255, 100%, 94%, .32)",
       "popup_highlight": "hsla(255, 100%, 94%, .12)",
+      "popup_highlight_text": "hsla(0, 0%, 100%, 1)",
       "sidebar": "hsla(250, 43%, 25%, 1)",
       "sidebar_text": "hsla(255, 100%, 94%, 1)",
       "sidebar_border": "hsla(255, 100%, 94%, .24)",

browser/themes/linux/browser.css

@@ -18,7 +18,7 @@
   --toolbarbutton-icon-fill-opacity: .85;
 
   --panel-separator-color: ThreeDShadow;
-  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
+  --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
@@ -204,9 +204,11 @@ menuitem.bookmark-item {
 
 %include ../shared/urlbarView.inc.css
 
-:root {
+:root:not(:-moz-lwtheme) {
   --urlbar-popup-url-color: -moz-nativehyperlinktext;
   --urlbar-popup-action-color: -moz-nativehyperlinktext;
+  --autocomplete-popup-highlight-background: Highlight;
+  --autocomplete-popup-highlight-color: HighlightText;
 }
 
 /* Translation infobar */

browser/themes/osx/browser.css

@@ -18,7 +18,7 @@
   --toolbarbutton-icon-fill-opacity: .7;
 
   --panel-separator-color: hsla(210,4%,10%,.14);
-  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
+  --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
@@ -247,11 +247,6 @@
 
 %include ../shared/urlbarView.inc.css
 
-:root {
-  --urlbar-popup-url-color: hsl(210, 77%, 47%);
-  --urlbar-popup-action-color: hsl(178, 100%, 28%);
-}
-
 .urlbarView:not(:-moz-lwtheme),
 #PopupSearchAutoComplete:not(:-moz-lwtheme) {
   /* Set custom disabled text color since native graytext is too faint on macOS 10.14+. */

browser/themes/shared/compacttheme.inc.css

@@ -15,12 +15,15 @@
 }
 
 :root:-moz-lwtheme-darktext {
-  --lwt-toolbar-field-background-color: #F0F0F4 !important;
+  --lwt-toolbar-field-background-color: #f0f0f4 !important;
+  --autocomplete-popup-highlight-background: #e0e0e6 !important;
+  --autocomplete-popup-highlight-color: black !important;
 }
 
-/* TODO: Bug 1692046: Add brighttext --lwt-toolbar-field-background-color
-    override. */
-}
+/* TODO: Bug 1692046: Add brighttext --lwt-toolbar-field-background-color,
+   --autocomplete-popup-highlight-background, and
+   --autocomplete-popup-highlight-color overrides. */
+} /*** END proton ***/
 
 :root:-moz-lwtheme-brighttext {
   /* !important to override LightweightThemeConsumer.jsm */

browser/themes/shared/urlbarView.inc.css

@@ -19,6 +19,9 @@
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
 
+  --urlbar-popup-url-color: hsl(210, 77%, 47%);
+  --urlbar-popup-action-color: hsl(178, 100%, 28%);
+
   /* Colors copied from in-content button styling */
   --urlbarView-button-background: rgba(12, 12, 13, 0.1);
   --urlbarView-button-background-hover: rgba(12, 12, 13, 0.2);
@@ -30,11 +33,6 @@
   --urlbarView-action-slide-in-distance: 200px;
 }
 
-:root:-moz-lwtheme {
-  --urlbar-popup-url-color: hsl(210, 77%, 47%);
-  --urlbar-popup-action-color: hsl(178, 100%, 28%);
-}
-
 :root:-moz-lwtheme[lwt-toolbar-field-focus-brighttext] {
   --urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
   --urlbar-popup-action-color: #30e60b;
@@ -45,6 +43,32 @@
   --urlbarView-button-background-active: rgba(249, 249, 250, 0.2);
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+:root {
+  --urlbar-popup-action-color: #005e5e;
+}
+
+@media not (prefers-contrast) {
+  :root {
+    --autocomplete-popup-highlight-background: #e0e0e6;
+    --autocomplete-popup-highlight-color: black;
+    /* TODO: Bug 1692046: Add override for --autocomplete-popup-highlight-background
+    and --autocomplete-popup-highlight-color in
+    :root[lwt-default-theme-in-dark-mode]. */
+  }
+}
+
+/* Fallback colours for when theme authors don't define
+    popup_highlight/popup_highlight_text. */
+:root:-moz-lwtheme {
+  --autocomplete-popup-highlight-background: rgb(0, 99, 255);
+  --autocomplete-popup-highlight-color: white;
+}
+:root[lwt-toolbar-field-brighttext] {
+  --autocomplete-popup-highlight-background: rgb(0, 99, 225);
+}
+} /*** END proton ***/
+
 :root:-moz-locale-dir(rtl) {
   --urlbarView-action-slide-in-distance: -200px;
 }
@@ -108,6 +132,12 @@
   padding-block: 6px;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+.urlbarView-row-inner {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+} /*** END proton ***/
+
 :root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) {
   padding-block: 11px;
 }
@@ -335,6 +365,12 @@
   -moz-context-properties: fill, fill-opacity;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+.urlbarView-help  {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+} /*** END proton ***/
+
 .urlbarView-help[selected] {
   box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
 }
@@ -398,6 +434,12 @@
   flex-shrink: 0;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+.urlbarView-tip-button {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+} /*** END proton ***/
+
 .urlbarView-tip-button:hover {
   background-color: var(--urlbarView-button-background-hover);
 }
@@ -570,6 +612,12 @@
   flex-wrap: wrap;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+#urlbar .search-one-offs:not([hidden]) {
+  padding-block: 12px;
+}
+}
+
 .urlbarView[noresults] > .search-one-offs {
   border-top: none;
 }
@@ -599,6 +647,12 @@
   margin-inline-end: 8px;
 }
 
+@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
+#urlbar .searchbar-engine-one-off-item {
+  border-radius: var(--toolbarbutton-border-radius);
+}
+} /*** END proton ***/
+
 #urlbar .searchbar-engine-one-off-item:last-child {
   /* This applies to both the last one-off and the compact settings button */
   margin-inline-end: 0;

browser/themes/windows/browser.css

@@ -18,7 +18,7 @@
   --toolbarbutton-icon-fill-opacity: 1;
 
   --panel-separator-color: ThreeDLightShadow;
-  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
+  --arrowpanel-dimmed: hsla(0,0%,80%,.3);
   --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
   --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
 
@@ -557,11 +557,6 @@ menuitem.bookmark-item {
 
 %include ../shared/urlbarView.inc.css
 
-:root {
-  --urlbar-popup-url-color: hsl(210, 77%, 47%);
-  --urlbar-popup-action-color: hsl(178, 100%, 28%);
-}
-
 @media (-moz-windows-default-theme: 0) {
   :root:not(:-moz-lwtheme) {
     --urlbar-popup-url-color: -moz-nativehyperlinktext;