Bug 1859994 - Rename --autocomplete-popup-* variables to --urlbarView-*. r=adw

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

browser/themes/ThemeVariableMap.sys.mjs

@@ -99,13 +99,13 @@ export const ThemeVariableMap = [
     },
   ],
   [
-    "--autocomplete-popup-highlight-background",
+    "--urlbarView-highlight-background",
     {
       lwtProperty: "popup_highlight",
     },
   ],
   [
-    "--autocomplete-popup-highlight-color",
+    "--urlbarView-highlight-color",
     {
       lwtProperty: "popup_highlight_text",
     },

browser/themes/addons/dark/manifest.json

@@ -50,7 +50,7 @@
       "input_background": "#42414D",
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
-      "autocomplete_popup_separator": "rgb(82,82,94)",
+      "urlbar_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",
       "tab_icon_overlay_stroke": "rgb(66,65,77)",
@@ -77,7 +77,7 @@
       "input_background": "--input-bgcolor",
       "input_color": "--input-color",
       "input_border": "--input-border-color",
-      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "urlbar_popup_separator": "--urlbarView-separator-color",
       "zoom_controls": "--zoom-controls-bgcolor",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",

browser/themes/addons/light/manifest.json

@@ -47,8 +47,8 @@
       "button_primary_color": "rgb(251, 251, 254)",
       "input_color": "rgb(21,20,26)",
       "input_background": "rgb(255,255,255)",
-      "autocomplete_popup_hover": "rgb(240,240,244)",
-      "autocomplete_popup_separator": "rgb(240,240,244)",
+      "urlbar_popup_hover": "rgb(240,240,244)",
+      "urlbar_popup_separator": "rgb(240,240,244)",
       "appmenu_update_icon_color": "#2AC3A2",
       "appmenu_info_icon_color": "#0090ED",
       "tab_icon_overlay_stroke": "rgb(255,255,255)",
@@ -79,8 +79,8 @@
       "input_background": "--input-bgcolor",
       "input_color": "--input-color",
       "input_border": "--input-border-color",
-      "autocomplete_popup_hover": "--autocomplete-popup-hover-background",
-      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "urlbar_popup_hover": "--urlbarView-hover-background",
+      "urlbar_popup_separator": "--urlbarView-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
       "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",

browser/themes/shared/browser-custom-colors.css

@@ -74,27 +74,26 @@
     --toolbarbutton-icon-fill: light-dark(rgb(91, 91, 102), rgb(251, 251, 254));
     --toolbarbutton-icon-fill-attention: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
 
+    --toolbar-field-border-color: transparent;
+    --toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
+    --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
+    --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
+    --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
+
     --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
+    --urlbarView-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
+    --urlbarView-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
+    --urlbarView-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
+    --urlbarView-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));
+
     --urlbar-box-bgcolor: light-dark(white, rgb(66, 65, 77));
     --urlbar-icon-fill-opacity: 0.72;
     @media (prefers-color-scheme: dark) {
       --urlbar-icon-fill-opacity: 1;
     }
 
-    --autocomplete-popup-separator-color: light-dark(rgb(240, 240, 244), rgb(82, 82, 94));
-    --toolbar-field-border-color: transparent;
     --chrome-content-separator-color: light-dark(rgb(204, 204, 204), hsl(240, 5%, 5%));
 
-    --toolbar-field-background-color: light-dark(rgb(240, 240, 244), rgb(28, 27, 34));
-    --toolbar-field-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
-
-    --toolbar-field-focus-background-color: light-dark(white, rgb(66, 65, 77));
-    --toolbar-field-focus-color: light-dark(black, rgb(251, 251, 254));
-
-    --autocomplete-popup-highlight-background: light-dark(#e0e0e6, rgb(43,42,51));
-    --autocomplete-popup-highlight-color: light-dark(rgb(21, 20, 26), rgb(251, 251, 254));
-    --autocomplete-popup-hover-background: light-dark(rgb(240, 240, 244), var(--arrowpanel-dimmed));
-
     --link-color: light-dark(rgb(0, 97, 224), rgb(0, 221, 255));
   }
 }

browser/themes/shared/browser-shared.css

@@ -66,9 +66,6 @@
   --checkbox-checked-hover-bgcolor: var(--button-primary-hover-bgcolor);
   --checkbox-checked-active-bgcolor: var(--button-primary-active-bgcolor);
 
-  --autocomplete-popup-hover-background: var(--arrowpanel-dimmed);
-  --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent);
-
   --identity-box-margin-inline: 4px;
   --urlbar-box-bgcolor: var(--button-bgcolor);
   --urlbar-box-focus-bgcolor: var(--button-bgcolor);
@@ -111,7 +108,6 @@
 
 @media (prefers-contrast) {
   :root {
-    --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent);
     --urlbar-icon-fill-opacity: 1;
     --checkbox-checked-border-color: var(--checkbox-checked-bgcolor);
   }

browser/themes/shared/searchbar.css

@@ -91,13 +91,13 @@
 /* We don't handle `:active` because it doesn't work on the search or settings
    buttons due to event.preventDefault() in SearchOneOffs._on_mousedown(). */
 .searchbar-engine-one-off-item:not([selected]):hover {
-  background-color: var(--autocomplete-popup-hover-background);
+  background-color: var(--urlbarView-hover-background);
   color: inherit;
 }
 
 .searchbar-engine-one-off-item[selected] {
-  background-color: var(--autocomplete-popup-highlight-background);
-  color: var(--autocomplete-popup-highlight-color);
+  background-color: var(--urlbarView-highlight-background);
+  color: var(--urlbarView-highlight-color);
 }
 
 .searchbar-engine-one-off-item > .button-box > .button-text {
@@ -120,7 +120,7 @@
 }
 
 .search-panel-tree > .autocomplete-richlistitem:hover {
-  background-color: var(--autocomplete-popup-hover-background);
+  background-color: var(--urlbarView-hover-background);
 }
 
 .search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
@@ -146,7 +146,7 @@
   margin: var(--panel-separator-margin);
   padding: 0;
   border: 0;
-  border-top: 1px solid var(--autocomplete-popup-separator-color);
+  border-top: 1px solid var(--urlbarView-separator-color);
   color: inherit;
 }
 

browser/themes/shared/urlbar-dynamic-results.css

@@ -126,12 +126,12 @@
   }
 
   &:hover:not([disabled]):not([selected]) {
-    background-color: var(--autocomplete-popup-hover-background);
+    background-color: var(--urlbarView-hover-background);
   }
 
   &[selected] {
-    background-color: var(--autocomplete-popup-highlight-background);
-    color: var(--autocomplete-popup-highlight-color);
+    background-color: var(--urlbarView-highlight-background);
+    color: var(--urlbarView-highlight-color);
   }
 
   > .urlbarView-label {

browser/themes/shared/urlbarView.css

@@ -7,8 +7,11 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
-  --autocomplete-popup-highlight-background: SelectedItem;
-  --autocomplete-popup-highlight-color: SelectedItemText;
+  --urlbarView-hover-background: var(--arrowpanel-dimmed);
+  --urlbarView-separator-color: color-mix(in srgb, currentColor 14%, transparent);
+
+  --urlbarView-highlight-background: SelectedItem;
+  --urlbarView-highlight-color: SelectedItemText;
 
   --urlbarView-secondary-text-color: color-mix(in srgb, currentColor 73%, transparent);
 
@@ -39,12 +42,12 @@
 
   &:-moz-lwtheme {
     --urlbarView-action-color: light-dark(rgb(91, 91, 102), rgb(191, 191, 201));
-    /* Fallback colors for when themes don't specify popup_highlight / popup_highlight_text. */
-    --autocomplete-popup-highlight-background: light-dark(rgb(0, 99, 255), rgb(0, 99, 225));
-    --autocomplete-popup-highlight-color: white;
+    --urlbarView-highlight-background: light-dark(rgb(0, 99, 255), rgb(0, 99, 225));
+    --urlbarView-highlight-color: white;
   }
 
   @media (prefers-contrast) {
+    --urlbarView-separator-color: color-mix(in srgb, currentColor 86%, transparent);
     --urlbarView-result-button-background-opacity: 100%;
     --urlbarView-secondary-text-color: currentColor;
   }
@@ -76,7 +79,7 @@
   margin-inline: calc(-1 * var(--urlbarView-row-gutter));
 
   #urlbar[open] > .urlbarView > .urlbarView-body-outer > & {
-    border-top: 1px solid var(--autocomplete-popup-separator-color);
+    border-top: 1px solid var(--urlbarView-separator-color);
   }
 }
 
@@ -106,12 +109,12 @@
   background-clip: padding-box;
 
   &[row-selectable]:not([selected]):hover {
-    background-color: var(--autocomplete-popup-hover-background);
+    background-color: var(--urlbarView-hover-background);
   }
 
   &[selected] {
-    background-color: var(--autocomplete-popup-highlight-background);
-    color: var(--autocomplete-popup-highlight-color);
+    background-color: var(--urlbarView-highlight-background);
+    color: var(--urlbarView-highlight-color);
   }
 
   :root:not([uidensity=compact]) &:not([type=tip], [type=dynamic]) {
@@ -320,7 +323,7 @@
 
   &[selected] {
     outline: var(--focus-outline);
-    outline-color: var(--autocomplete-popup-highlight-color);
+    outline-color: var(--urlbarView-highlight-color);
     outline-offset: 1px;
   }
 
@@ -424,12 +427,12 @@
   border-radius: 0;
 
   &:not(:last-child) {
-    border-bottom: 1px solid var(--autocomplete-popup-separator-color);
+    border-bottom: 1px solid var(--urlbarView-separator-color);
     margin-bottom: 4px;
   }
 
   &:not(:first-child) {
-    border-top: 1px solid var(--autocomplete-popup-separator-color);
+    border-top: 1px solid var(--urlbarView-separator-color);
     margin-top: 4px;
   }
 
@@ -832,7 +835,7 @@
 }
 
 .urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
-  border-top: 1px solid var(--autocomplete-popup-separator-color);
+  border-top: 1px solid var(--urlbarView-separator-color);
 }
 
 :root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) {
@@ -942,6 +945,6 @@
 }
 
 #PopupSearchAutoComplete .autocomplete-richlistitem[selected] {
-  background: var(--autocomplete-popup-highlight-background);
-  color: var(--autocomplete-popup-highlight-color);
+  background: var(--urlbarView-highlight-background);
+  color: var(--urlbarView-highlight-color);
 }

toolkit/mozapps/extensions/default-theme/manifest.json

@@ -51,7 +51,7 @@
       "input_background": "#42414D",
       "input_color": "rgb(251,251,254)",
       "input_border": "#8f8f9d",
-      "autocomplete_popup_separator": "rgb(82,82,94)",
+      "urlbar_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_info_icon_color": "#80EBFF",
       "tab_icon_overlay_stroke": "rgb(66,65,77)",
@@ -78,7 +78,7 @@
       "input_background": "--input-bgcolor",
       "input_color": "--input-color",
       "input_border": "--input-border-color",
-      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
+      "urlbar_popup_separator": "--urlbarView-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",
       "tab_icon_overlay_stroke": "--tab-icon-overlay-stroke",