Bug 1703590 - Fix custom themes urlbar/searchbar separators. r=harry,desktop-theme-reviewers,rpl
authorMarco Bonardo <mbonardo@mozilla.com>
Tue, 20 Apr 2021 11:24:22 +0000
changeset 576748 867ad974e957e1edbaeec336dab287d7095f5bf4
parent 576747 43711f4646a717e033a43a7494f19d1ea648bad4
child 576749 8978a336e3aa96ff04ba34920dbb04d67c715c61
push id38391
push userncsoregi@mozilla.com
push dateTue, 20 Apr 2021 21:39:49 +0000
treeherdermozilla-central@0c0c1834fbd1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry, desktop-theme-reviewers, rpl
bugs1703590
milestone89.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 1703590 - Fix custom themes urlbar/searchbar separators. r=harry,desktop-theme-reviewers,rpl Stop supporting toolbar_field_separator in themes. We have no more vertical separators in toolbar fields, and it could hide functional horizontal separators in the urlbar panel, because it was misused there. Introduce an autocomplete_popup_separator experimental color instead and use a color-mix of currentColor to better adapt to LWT theme colors. Differential Revision: https://phabricator.services.mozilla.com/D112616
browser/modules/ThemeVariableMap.jsm
browser/themes/addons/alpenglow/manifest.json
browser/themes/addons/dark/manifest.json
browser/themes/addons/light/manifest.json
browser/themes/shared/browser-custom-colors.inc.css
browser/themes/shared/browser.inc.css
browser/themes/shared/identity-block/identity-block.inc.css
browser/themes/shared/searchbar.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/shared/urlbarView.inc.css
toolkit/components/extensions/parent/ext-theme.js
toolkit/components/extensions/schemas/theme.json
toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
toolkit/mozapps/extensions/default-theme/manifest.json
--- a/browser/modules/ThemeVariableMap.jsm
+++ b/browser/modules/ThemeVariableMap.jsm
@@ -77,22 +77,16 @@ const ThemeVariableMap = [
   ],
   [
     "--toolbar-color",
     {
       lwtProperty: "toolbar_text",
     },
   ],
   [
-    "--urlbar-separator-color",
-    {
-      lwtProperty: "toolbar_field_separator",
-    },
-  ],
-  [
     "--tabs-border-color",
     {
       lwtProperty: "toolbar_top_separator",
       optionalElementID: "navigator-toolbox",
     },
   ],
   [
     "--toolbarseparator-color",
--- a/browser/themes/addons/alpenglow/manifest.json
+++ b/browser/themes/addons/alpenglow/manifest.json
@@ -40,17 +40,16 @@
       "toolbar_vertical_separator": "hsla(261, 53%, 15%, .2)",
       "toolbar_field": "hsla(0, 0%, 100%, .8)",
       "toolbar_field_focus": "hsla(261, 53%, 15%, .96)",
       "toolbar_field_text": "hsla(261, 53%, 15%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
       "toolbar_field_border": "transparent",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
-      "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
       "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsla(261, 53%, 15%, .32)",
       "bookmark_text": "hsla(261, 53%, 15%, 1)",
       "tab_text": "hsla(261, 53%, 15%, 1)",
       "tab_background_text": "hsla(261, 53%, 15%, 1)",
       "tab_background_separator": "hsla(261, 53%, 15%, 1)",
       "tab_line": "hsla(265, 100%, 72%, 1)",
       "tab_loading": "hsla(265, 100%, 72%, 1)",
@@ -97,17 +96,16 @@
       "toolbar_vertical_separator": "hsla(271, 100%, 77%, .4)",
       "toolbar_field": "hsla(250, 43%, 25%, 1)",
       "toolbar_field_focus": "hsla(250, 43%, 25%, .98)",
       "toolbar_field_text": "hsla(255, 100%, 94%, 1)",
       "toolbar_field_text_focus": "hsla(255, 100%, 94%, 1)",
       "toolbar_field_border": "transparent",
       "toolbar_field_border_focus": "hsla(265, 100%, 72%, 1)",
       "toolbar_field_highlight": "hsla(265, 100%, 72%, .32)",
-      "toolbar_field_separator": "hsla(261, 53%, 15%, .32)",
       "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsla(245, 38%, 33%, .96)",
       "bookmark_text": "hsla(255, 100%, 94%, 1)",
       "tab_selected": "rgb(60, 31, 123)",
       "tab_text": "hsla(255, 100%, 94%, 1)",
       "tab_background_text": "hsla(255, 100%, 94%, 1)",
       "tab_background_separator": "hsla(255, 100%, 94%, 1)",
       "tab_line": "hsla(265, 100%, 72%, 1)",
--- a/browser/themes/addons/dark/manifest.json
+++ b/browser/themes/addons/dark/manifest.json
@@ -28,17 +28,16 @@
       "tab_line": "transparent",
       "toolbar": "rgb(43,42,51)",
       "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
       "toolbar_field": "rgb(28,27,34)",
       "toolbar_field_border": "transparent",
       "toolbar_field_text": "rgb(251,251,254)",
       "toolbar_field_focus": "rgb(66,65,77)",
-      "toolbar_field_separator": "rgb(82,82,94)",
       "toolbar_text": "#BFBFC9",
       "ntp_background": "rgb(28, 27, 34)",
       "ntp_text": "rgb(251, 251, 254)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",
       "sidebar_border": "rgba(255, 255, 255, 0.1)",
       "button": "rgb(43,42,51)",
       "button_hover": "rgb(82,82,94)",
@@ -56,16 +55,17 @@
       "checkbox_checked_background_hover": "rgb(128, 235, 255)",
       "checkbox_checked_background_active": "rgb(170, 242, 255)",
       "error_text_color": "rgb(255, 154, 162)",
       "input_background": "#42414D",
       "input_color": "#BFBFC9",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
       "zoom_controls": "rgb(74,74,85)",
+      "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_warning_icon_color": "#FFBD4F",
       "appmenu_info_icon_color": "#80EBFF"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
       "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
@@ -90,16 +90,17 @@
       "checkbox_checked_color": "--checkbox-checked-color",
       "checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
       "checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
       "error_text_color": "--error-text-color",
       "input_background": "--input-bgcolor",
       "input_color": "--input-color",
       "input_border": "--input-border-color",
       "input_border_error": "--input-error-border-color",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "--arrowpanel-dimmed-further",
       "panel_active_darker": "--arrowpanel-dimmed-even-further"
--- a/browser/themes/addons/light/manifest.json
+++ b/browser/themes/addons/light/manifest.json
@@ -29,17 +29,16 @@
       "tab_line": "rgba(128,128,142,0.9)",
       "toolbar": "#f9f9fb",
       "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "#ccc",
       "toolbar_field": "#f0f0f4",
       "toolbar_field_text": "rgb(21,20,26)",
       "toolbar_field_border": "transparent",
       "toolbar_field_focus": "white",
-      "toolbar_field_separator": "rgb(240,240,244)",
       "toolbar_text": "rgb(21,20,26)",
       "ntp_background": "#fff",
       "ntp_text": "rgb(21, 20, 26)",
       "popup_action_color": "rgb(21,20,26)",
       "button": "rgb(240,240,244)",
       "button_hover": "rgb(224,224,230)",
       "button_active": "rgb(207,207,216)",
       "button_primary": "rgb(0, 97, 224)",
@@ -53,16 +52,17 @@
       "checkbox_checked_background": "rgb(0, 97, 224)",
       "checkbox_checked_background_hover": "rgb(2, 80, 187)",
       "checkbox_checked_background_active": "rgb(5, 62, 148)",
       "checkbox_checked_color": "rgb(251, 251, 254)",
       "panel_hover": "rgb(224,224,230)",
       "panel_active": "rgb(207,207,21)",
       "panel_active_darker": "rgb(191,191,201)",
       "autocomplete_popup_hover": "rgb(240,240,244)",
+      "autocomplete_popup_separator": "rgb(240,240,244)",
       "appmenu_update_icon_color": "#2AC3A2",
       "appmenu_warning_icon_color": "#FFA436",
       "appmenu_info_icon_color": "#0090ED"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 12%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
       "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)"
@@ -84,16 +84,17 @@
       "checkbox_unchecked_background": "--checkbox-unchecked-bgcolor",
       "checkbox_unchecked_background_hover": "--checkbox-unchecked-hover-bgcolor",
       "checkbox_unchecked_background_active": "--checkbox-unchecked-active-bgcolor",
       "checkbox_checked_background": "--checkbox-checked-bgcolor",
       "checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
       "checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
       "checkbox_checked_color": "--checkbox-checked-color",
       "autocomplete_popup_hover": "--autocomplete-popup-hover-background",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "-arrowpanel-dimmed-further",
       "panel_active_darker": "--arrowpanel-dimmed-even-further"
--- a/browser/themes/shared/browser-custom-colors.inc.css
+++ b/browser/themes/shared/browser-custom-colors.inc.css
@@ -44,17 +44,17 @@
     --tab-line-color: rgba(128,128,142,0.9);
     --tab-selected-bgcolor: rgb(255,255,255);
     --tabs-border-color: transparent;
     --toolbar-color: rgb(21,20,26);
 
     --urlbar-popup-action-color: rgb(21,20,26);
     --urlbar-popup-url-color: rgb(0,97,224);
 
-    --urlbar-separator-color: rgb(240,240,244);
+    --autocomplete-popup-separator-color: rgb(240,240,244);
     --toolbar-field-border-color: transparent;
     --arrowpanel-border-color: transparent;
 
     --toolbar-field-non-lwt-bgcolor: rgb(240,240,244);
 
     --autocomplete-popup-highlight-background: var(--arrowpanel-dimmed);
     --autocomplete-popup-highlight-color: rgb(21,20,26);
     --autocomplete-popup-hover-background: rgb(240,240,244);
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -27,35 +27,40 @@
   --button-color: currentColor;
 
   --buttons-destructive-bgcolor: #e22850;
   --buttons-destructive-hover-bgcolor: #c50042;
   --buttons-destructive-active-bgcolor: #810220;
   --buttons-destructive-color: #fbfbfe;
 
   --autocomplete-popup-hover-background: var(--arrowpanel-dimmed);
+  --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 14%, transparent);
 
   --identity-box-margin-inline: 4px;
   --identity-box-label-opacity: .8;
   --urlbar-box-bgcolor: var(--button-bgcolor);
   --urlbar-box-hover-bgcolor: var(--button-hover-bgcolor);
   --urlbar-box-active-bgcolor: var(--button-active-bgcolor);
-
   --urlbar-min-height: 32px;
   --urlbar-icon-fill-opacity: 1;
   --urlbar-icon-padding: 6px; /* (32px - 2px border - 2px padding - 16px icon) / 2 */
-  --urlbar-separator-color: var(--panel-separator-color);
   --urlbar-popup-url-color: -moz-nativehyperlinktext;
 
   --lwt-additional-images: none;
   --lwt-background-alignment: right top;
   --lwt-background-tiling: no-repeat;
   --lwt-popup-brighttext-url-color: #74c0ff;
 }
 
+@media (prefers-contrast) {
+  :root {
+    --autocomplete-popup-separator-color: color-mix(in srgb, currentColor 86%, transparent);
+  }
+}
+
 @media not (-moz-proton) {
   :root {
     --focus-outline-width: 0;
     --identity-box-margin-inline: 3px;
     --identity-box-label-opacity: .6;
     --urlbar-icon-fill-opacity: .6;
   }
 } /*** END !proton ***/
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -84,31 +84,32 @@
   border-radius: var(--toolbarbutton-border-radius);
 }
 
 @media not (-moz-proton) {
 .identity-box-button {
   padding-inline: calc(var(--urlbar-icon-padding) / 2);
   border-radius: 0;
 }
+
+#identity-box:not(.chromeUI, .extensionPage, .notSecureText) {
+  --autocomplete-popup-separator-color: transparent;
+}
 } /*** END !proton ***/
 
 #identity-box[pageproxystate="valid"].notSecureText #identity-icon-label,
 #identity-box[pageproxystate="valid"].chromeUI #identity-icon-label,
 #identity-box[pageproxystate="valid"].extensionPage #identity-icon-label,
 .urlbar-label {
   opacity: var(--identity-box-label-opacity);
 }
 
 #identity-icon-label {
   padding-inline-start: 4px;
 }
-#identity-box:not(.chromeUI, .extensionPage, .notSecureText) {
-  --urlbar-separator-color: transparent;
-}
 
 #identity-box[pageproxystate="valid"].notSecureText,
 #identity-box[pageproxystate="valid"].chromeUI,
 #identity-box[pageproxystate="valid"].extensionPage,
 #urlbar-label-box {
   margin-inline-end: 8px;
 }
 
@@ -148,31 +149,31 @@
   pointer-events: none;
 }
 
 @media not (-moz-proton) {
 #identity-box[pageproxystate="valid"].notSecureText,
 #identity-box[pageproxystate="valid"].chromeUI,
 #identity-box[pageproxystate="valid"].extensionPage,
 #urlbar-label-box {
-  border-inline-end: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
+  border-inline-end: 1px solid var(--autocomplete-popup-separator-color);
+  border-image: linear-gradient(transparent 15%, var(--autocomplete-popup-separator-color) 15%, var(--autocomplete-popup-separator-color) 85%, transparent 85%);
   border-image-slice: 1;
 }
 
 #identity-box[pageproxystate="valid"].notSecureText > #identity-icon-box,
 #identity-box[pageproxystate="valid"].chromeUI > #identity-icon-box,
 #identity-box[pageproxystate="valid"].extensionPage > #identity-icon-box {
   padding-inline: 8px;
   border-radius: 0;
 }
 
 #urlbar-label-box {
   padding-inline: 4px;
-  border-inline-start: 1px solid var(--urlbar-separator-color);
+  border-inline-start: 1px solid var(--autocomplete-popup-separator-color);
   border-radius: 0;
 }
 
 #urlbar[searchmode]:not([breakout-extend]) > #urlbar-input-container > #urlbar-label-box {
   border-inline-start-color: transparent;
   border-image-width: 0 1px 0 0;
 }
 
@@ -327,18 +328,18 @@
   /* This is needed in order to position the blue dot indicator. */
   position: relative;
 }
 
 @media not (-moz-proton) {
 #tracking-protection-icon-container {
   border-radius: 0;
   /* Separator */
-  border-inline-end: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
+  border-inline-end: 1px solid var(--autocomplete-popup-separator-color);
+  border-image: linear-gradient(transparent 15%, var(--autocomplete-popup-separator-color) 15%, var(--autocomplete-popup-separator-color) 85%, transparent 85%);
   border-image-slice: 1;
 }
 } /*** END !proton ***/
 
 #urlbar-input-container[pageproxystate="valid"] > #tracking-protection-icon-container.chromeUI {
   display: none;
 }
 
--- a/browser/themes/shared/searchbar.inc.css
+++ b/browser/themes/shared/searchbar.inc.css
@@ -243,17 +243,17 @@
   padding: var(--arrowpanel-menuitem-margin);
 }
 
 .searchbar-separator {
   appearance: none;
   margin: var(--panel-separator-margin);
   padding: 0;
   border: 0;
-  border-top: 1px solid var(--panel-separator-color);
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
   color: inherit;
 }
 
 .search-panel-tree[collapsed=true] + .searchbar-separator {
   display: none;
 }
 
 @media not (-moz-proton) {
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -588,18 +588,18 @@
 } /*** END proton ***/
 
 @media not (-moz-proton) {
 #pageActionSeparator {
   /* This draws the separator the same way that #urlbar-label-box draws its
      left and right borders, which end up looking like separators.  It might not
      be the best way in this case, but it makes sure that all these vertical
      lines in the urlbar look the same: same height, vertical position, etc. */
-  border-inline-start: 1px solid var(--urlbar-separator-color);
-  border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
+  border-inline-start: 1px solid var(--autocomplete-popup-separator-color);
+  border-image: linear-gradient(transparent 15%, var(--autocomplete-popup-separator-color) 15%, var(--autocomplete-popup-separator-color) 85%, transparent 85%);
   border-image-slice: 1;
   width: 1px;
   visibility: hidden;
 }
 
 #page-action-buttons > :not([hidden], toolbartabstop) ~ #pageActionSeparator {
   /* Show the separator between the page actions and other elements when at
      least one of the latter is shown. */
--- a/browser/themes/shared/urlbarView.inc.css
+++ b/browser/themes/shared/urlbarView.inc.css
@@ -104,17 +104,17 @@
 }
 } /*** END !proton ***/
 
 .urlbarView-body-inner {
   width: 100%;
 }
 
 #urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner {
-  border-top: 1px solid var(--urlbar-separator-color);
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
 }
 
 .urlbarView-results {
   padding-block: @urlbarViewPadding@;
   white-space: nowrap;
 }
 
 /* Vertically center the one-offs when no results are present. */
@@ -692,23 +692,22 @@
 #urlbar .search-one-offs:not([hidden]) {
   display: flex;
   align-items: start;
   padding-block: 16px;
   flex-wrap: wrap;
 }
 
 .urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
-  border-top: 1px solid var(--panel-separator-color);
+  border-top: 1px solid var(--autocomplete-popup-separator-color);
 }
 
 @media (-moz-proton) {
 #urlbar .search-one-offs:not([hidden]) {
   padding-block: 6px;
-  border-top-color: var(--urlbar-separator-color);
 }
 
 :root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) {
   padding-block: 11px;
 }
 } /*** END proton ***/
 
 #urlbar .search-panel-one-offs-container {
--- a/toolkit/components/extensions/parent/ext-theme.js
+++ b/toolkit/components/extensions/parent/ext-theme.js
@@ -204,17 +204,16 @@ class Theme {
         case "tab_background_separator":
         case "tab_loading":
         case "tab_text":
         case "tab_line":
         case "tab_selected":
         case "toolbar_field":
         case "toolbar_field_text":
         case "toolbar_field_border":
-        case "toolbar_field_separator":
         case "toolbar_field_focus":
         case "toolbar_field_text_focus":
         case "toolbar_field_border_focus":
         case "toolbar_top_separator":
         case "toolbar_bottom_separator":
         case "toolbar_vertical_separator":
         case "button_background_hover":
         case "button_background_active":
--- a/toolkit/components/extensions/schemas/theme.json
+++ b/toolkit/components/extensions/schemas/theme.json
@@ -166,17 +166,18 @@
                 "optional": true
               },
               "toolbar_field_border": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_field_separator": {
                 "$ref": "ThemeColor",
-                "optional": true
+                "optional": true,
+                "deprecated": "This color property is ignored in Firefox >= 89."
               },
               "toolbar_top_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
               },
               "toolbar_bottom_separator": {
                 "$ref": "ThemeColor",
                 "optional": true
--- a/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
+++ b/toolkit/components/extensions/test/browser/browser_ext_themes_separators.js
@@ -15,45 +15,51 @@ add_task(async function test_support_sep
         images: {
           theme_frame: "image1.png",
         },
         colors: {
           frame: ACCENT_COLOR,
           tab_background_text: TEXT_COLOR,
           toolbar_top_separator: SEPARATOR_TOP_COLOR,
           toolbar_vertical_separator: SEPARATOR_VERTICAL_COLOR,
+          // This property is deprecated, but left in to check it doesn't
+          // unexpectedly break the theme installation.
           toolbar_field_separator: SEPARATOR_FIELD_COLOR,
           toolbar_bottom_separator: SEPARATOR_BOTTOM_COLOR,
         },
       },
     },
     files: {
       "image1.png": BACKGROUND,
     },
   });
 
+  // Test the deprecated color property.
+  let deprecatedMessagePromise = new Promise(resolve => {
+    Services.console.registerListener(function listener(msg) {
+      if (msg.message.includes("toolbar_field_separator")) {
+        resolve();
+        Services.console.unregisterListener(listener);
+      }
+    });
+  });
+  ExtensionTestUtils.failOnSchemaWarnings(false);
   await extension.startup();
+  ExtensionTestUtils.failOnSchemaWarnings(true);
+  info("Wait for property deprecation message");
+  await deprecatedMessagePromise;
 
   let navbar = document.querySelector("#nav-bar");
   Assert.ok(
     window
       .getComputedStyle(navbar)
       .boxShadow.includes(`rgb(${hexToRGB(SEPARATOR_TOP_COLOR).join(", ")})`),
     "Top separator color properly set"
   );
 
-  let mainWin = document.querySelector("#main-window");
-  Assert.equal(
-    window
-      .getComputedStyle(mainWin)
-      .getPropertyValue("--urlbar-separator-color"),
-    `rgb(${hexToRGB(SEPARATOR_FIELD_COLOR).join(", ")})`,
-    "Toolbar field separator color properly set"
-  );
-
   let panelUIButton = document.querySelector("#PanelUI-button");
   if (CustomizableUI.protonToolbarEnabled) {
     // XXX: This should test bookmark item toolbar separators instead
     Assert.equal(
       window
         .getComputedStyle(panelUIButton)
         .getPropertyValue("border-image-source"),
       "none",
--- a/toolkit/mozapps/extensions/default-theme/manifest.json
+++ b/toolkit/mozapps/extensions/default-theme/manifest.json
@@ -31,17 +31,16 @@
       "tab_line": "transparent",
       "toolbar": "#2b2a33",
       "toolbar_top_separator": "transparent",
       "toolbar_bottom_separator": "hsl(240, 5%, 5%)",
       "toolbar_field": "rgb(28,27,34)",
       "toolbar_field_border": "transparent",
       "toolbar_field_text": "rgb(251,251,254)",
       "toolbar_field_focus": "rgb(66,65,77)",
-      "toolbar_field_separator": "#5F6670",
       "toolbar_text": "#BFBFC9",
       "ntp_background": "rgb(28, 27, 34)",
       "ntp_text": "rgb(251, 251, 254)",
       "sidebar": "#38383D",
       "sidebar_text": "rgb(249, 249, 250)",
       "sidebar_border": "rgba(255, 255, 255, 0.1)",
       "button": "rgb(43,42,51)",
       "button_hover": "rgb(82,82,94)",
@@ -59,16 +58,17 @@
       "checkbox_checked_background_hover": "rgb(128, 235, 255)",
       "checkbox_checked_background_active": "rgb(170, 242, 255)",
       "error_text_color": "rgb(255, 154, 162)",
       "input_background": "#42414D",
       "input_color": "#BFBFC9",
       "input_border": "#8f8f9d",
       "input_border_error": "rgb(255, 132, 138)",
       "zoom_controls": "rgb(74,74,85)",
+      "autocomplete_popup_separator": "rgb(82,82,94)",
       "appmenu_update_icon_color": "#54FFBD",
       "appmenu_warning_icon_color": "#FFBD4F",
       "appmenu_info_icon_color": "#80EBFF"
     },
     "properties": {
       "panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
       "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
       "panel_active_darker": "color-mix(in srgb, currentColor 25%, transparent)"
@@ -93,16 +93,17 @@
       "checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
       "checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
       "error_text_color": "--error-text-color",
       "input_background": "--input-bgcolor",
       "input_color": "--input-color",
       "input_border": "--input-border-color",
       "input_border_error": "--input-error-border-color",
       "zoom_controls": "--zoom-controls-bgcolor",
+      "autocomplete_popup_separator": "--autocomplete-popup-separator-color",
       "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
       "appmenu_warning_icon_color": "--panel-banner-item-warning-icon-bgcolor",
       "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor"
     },
     "properties": {
       "panel_hover": "--arrowpanel-dimmed",
       "panel_active": "--arrowpanel-dimmed-further",
       "panel_active_darker": "--arrowpanel-dimmed-even-further"