author | Marco Bonardo <mbonardo@mozilla.com> |
Tue, 20 Apr 2021 11:24:22 +0000 | |
changeset 576748 | 867ad974e957e1edbaeec336dab287d7095f5bf4 |
parent 576747 | 43711f4646a717e033a43a7494f19d1ea648bad4 |
child 576749 | 8978a336e3aa96ff04ba34920dbb04d67c715c61 |
push id | 38391 |
push user | ncsoregi@mozilla.com |
push date | Tue, 20 Apr 2021 21:39:49 +0000 |
treeherder | mozilla-central@0c0c1834fbd1 [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | harry, desktop-theme-reviewers, rpl |
bugs | 1703590 |
milestone | 89.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
|
--- 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"