From 403199a32125ddb14082b536bbac6168b283d44c Mon Sep 17 00:00:00 2001 From: Jared Wein Date: Fri, 26 Mar 2021 01:17:01 +0000 Subject: [PATCH] Bug 1686529 - Update the tab and toolbar colors for Proton Light and Proton Dark themes. r=desktop-theme-reviewers,harry Differential Revision: https://phabricator.services.mozilla.com/D109418 --- browser/base/content/tabbrowser-tab.js | 1 - browser/themes/addons/alpenglow/manifest.json | 10 +-- .../themes/addons/proton-dark/manifest.json | 6 +- .../themes/addons/proton-light/manifest.json | 6 +- browser/themes/linux/browser.css | 5 +- browser/themes/osx/browser.css | 10 ++- .../shared/browser-custom-colors.inc.css | 4 + browser/themes/shared/tabs.inc.css | 30 ++++---- browser/themes/windows/browser-aero.css | 14 +++- browser/themes/windows/browser.css | 9 ++- browser/themes/windows/compacttheme.css | 2 + .../browser/browser_ext_themes_tab_line.js | 8 +- .../extensions/default-theme/manifest.json | 76 ++++++++++++++++--- 13 files changed, 130 insertions(+), 51 deletions(-) diff --git a/browser/base/content/tabbrowser-tab.js b/browser/base/content/tabbrowser-tab.js index 448878d9855f..81dab9d56f93 100644 --- a/browser/base/content/tabbrowser-tab.js +++ b/browser/base/content/tabbrowser-tab.js @@ -13,7 +13,6 @@ ? ` - ` diff --git a/browser/themes/addons/alpenglow/manifest.json b/browser/themes/addons/alpenglow/manifest.json index 72387b8f4b94..b284078ab588 100644 --- a/browser/themes/addons/alpenglow/manifest.json +++ b/browser/themes/addons/alpenglow/manifest.json @@ -9,7 +9,7 @@ "name": "Firefox Alpenglow", "description": "Use a colorful appearance for buttons, menus, and windows.", - "version": "1.3", + "version": "1.4", "icons": { "32": "icon.svg" }, "theme": { @@ -42,11 +42,11 @@ "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": "hsla(261, 53%, 15%, .32)", + "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": "hsla(261, 53%, 15%, 1)", + "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)", @@ -99,11 +99,11 @@ "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": "hsla(255, 100%, 94%, .32)", + "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": "hsla(255, 100%, 94%, .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)", diff --git a/browser/themes/addons/proton-dark/manifest.json b/browser/themes/addons/proton-dark/manifest.json index a5b7bd0f1456..abf2191123b5 100644 --- a/browser/themes/addons/proton-dark/manifest.json +++ b/browser/themes/addons/proton-dark/manifest.json @@ -10,13 +10,15 @@ "name": "Proton Dark", "description": "A theme with a dark color scheme.", "author": "Mozilla", - "version": "1.1", + "version": "1.2", "icons": {"32": "icon.svg"}, "theme": { "colors": { "tab_background_text": "#fbfbfe", + "tab_selected": "rgb(66,65,77)", + "tab_text": "rgb(251,251,254)", "icons": "rgb(249, 249, 250, 0.7)", "frame": "#1c1b22", "popup": "rgb(66,65,77)", @@ -24,7 +26,7 @@ "popup_border": "rgb(82,82,94)", "popup_highlight": "rgb(43,42,51)", "tab_line": "#0a84ff", - "toolbar": "hsl(240, 1%, 20%)", + "toolbar": "rgb(43,42,51)", "toolbar_bottom_separator": "hsl(240, 5%, 5%)", "toolbar_field": "rgb(28,27,34)", "toolbar_field_border": "transparent", diff --git a/browser/themes/addons/proton-light/manifest.json b/browser/themes/addons/proton-light/manifest.json index dff4034360d6..1687eea67771 100644 --- a/browser/themes/addons/proton-light/manifest.json +++ b/browser/themes/addons/proton-light/manifest.json @@ -10,13 +10,15 @@ "name": "Proton Light", "description": "A theme with a light color scheme.", "author": "Mozilla", - "version": "1.1", + "version": "1.2", "icons": {"32": "icon.svg"}, "theme": { "colors": { - "tab_background_text": "#15141a", + "tab_background_text": "rgb(21,20,26)", + "tab_selected": "#fff", + "tab_text": "rgb(21,20,26)", "icons": "rgb(24, 25, 26, 0.7)", "frame": "#f0f0f4", "popup": "#fff", diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css index 908d845f4015..8fbc44a23acd 100644 --- a/browser/themes/linux/browser.css +++ b/browser/themes/linux/browser.css @@ -25,6 +25,7 @@ --panel-separator-color: ThreeDShadow; + --tabs-border-color: rgba(0,0,0,.3); --chrome-content-separator-color: ThreeDShadow; } @@ -35,10 +36,6 @@ } } /*** END proton ***/ -#navigator-toolbox { - --tabs-border-color: rgba(0,0,0,.3); -} - #tabbrowser-tabs { --tab-line-color: -moz-accent-color; } diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index f60bb3a347f9..ce6834e2c698 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -34,17 +34,24 @@ --arrowpanel-field-background: rgba(12,12,13,.3); } +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { #navigator-toolbox { appearance: none; --tabs-border-color: rgba(0,0,0,.2); } +} /*** end !proton ***/ + +@supports -moz-bool-pref("browser.proton.tabs.enabled") { +#navigator-toolbox { + appearance: none; +} -@supports -moz-bool-pref("browser.proton.enabled") { #navigator-toolbox:not(:-moz-lwtheme) { background-color: #f0f0f4; } } /*** END proton ***/ +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { #navigator-toolbox:not(:-moz-lwtheme):-moz-window-inactive { --tabs-border-color: rgba(0,0,0,.05); } @@ -52,6 +59,7 @@ #navigator-toolbox:-moz-lwtheme { --tabs-border-color: rgba(0,0,0,.3); } +} /*** end !proton ***/ /* This is a workaround for Bug 1482157 diff --git a/browser/themes/shared/browser-custom-colors.inc.css b/browser/themes/shared/browser-custom-colors.inc.css index 3bcbaeca1cae..d49415bcc255 100644 --- a/browser/themes/shared/browser-custom-colors.inc.css +++ b/browser/themes/shared/browser-custom-colors.inc.css @@ -41,6 +41,10 @@ --input-bgcolor: rgb(255,255,255); --input-border-color: rgb(143,143,157); --input-error-border-color: #E22850; + + --tab-selected-bgcolor: rgb(255,255,255); + --tabs-border-color: transparent; + --toolbar-color: rgb(21,20,26); } } /** END Proton **/ diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css index 6baac6c219e9..c300908cbb45 100644 --- a/browser/themes/shared/tabs.inc.css +++ b/browser/themes/shared/tabs.inc.css @@ -703,15 +703,11 @@ color: var(--lwt-tab-text, var(--toolbar-color)); } +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { .tab-line { height: 2px; } - -@supports -moz-bool-pref("browser.proton.tabs.enabled") { -.tab-line { - display: none; -} -} /*** END proton ***/ +} /* end !proton */ /* Selected tab */ @@ -730,12 +726,8 @@ margin-top: 0 !important; } -.tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background { - box-shadow: 0px 1px 2px rgba(58, 57, 68, 0.1); -} - -.tabbrowser-tab[visuallyselected=true]:hover > .tab-stack > .tab-background { - box-shadow: 0px 2px var(--tab-shadow-max-size) rgba(58, 57, 68, 0.2); +#TabsToolbar:not([brighttext]) .tabbrowser-tab[visuallyselected=true] > .tab-stack > .tab-background { + box-shadow: 0 0 1.5px rgba(128,128,142,0.9), 0 0 4px rgba(128,128,142,0.5); } } /*** END proton ***/ @@ -765,7 +757,7 @@ .tab-background[multiselected=true], .tab-background[selected=true] { border-top-color: var(--tabs-border-color); - background-color: var(--toolbar-bgcolor); + background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); background-image: var(--toolbar-bgimage); background-repeat: repeat-x; } @@ -776,10 +768,12 @@ opacity: .1; } +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { .tab-line[multiselected], .tab-line[selected=true] { background-color: var(--tab-line-color); } +} /* end !proton */ /* * LightweightThemeConsumer will set the current lightweight theme's header @@ -801,6 +795,7 @@ /* Tab hover */ +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { background-color: rgba(0,0,0,.1); } @@ -808,7 +803,15 @@ #TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { background-color: rgba(255,255,255,.1); } +} /* END !proton */ +@supports -moz-bool-pref("browser.proton.tabs.enabled") { +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { + background-color: color-mix(in srgb, currentColor 11%, transparent); +} +} /* END proton */ + +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { @media (prefers-reduced-motion: no-preference) { .tab-line:not([selected=true], [multiselected]) { transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function); @@ -833,6 +836,7 @@ .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line[multiselected]:not([selected=true]) { opacity: 0.5; } +} /* end !proton */ /* Pinned tabs */ diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 898c03fd6d7c..f89fef389c29 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -44,6 +44,7 @@ @media not (-moz-os-version: windows-win7) { @media not (-moz-os-version: windows-win8) { @media (-moz-windows-default-theme) { + @supports not -moz-bool-pref("browser.proton.enabled") { :root:not(:-moz-lwtheme) { background-color: hsl(0, 0%, 78%); } @@ -75,9 +76,18 @@ --toolbarbutton-icon-fill-opacity: .7; } } + } /*** end !proton ***/ + + @supports -moz-bool-pref("browser.proton.enabled") { + @media (-moz-windows-accent-color-in-titlebar) { + :root[sizemode=normal][tabsintitlebar] { + border-top: .5px solid -moz-accent-color; + } + } + } /*** END proton ***/ :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive { - border-top-color: rgba(0,0,0,.3); + border-top-color: rgb(57,57,57); } :root[tabsintitlebar] .tab-label:-moz-window-inactive { @@ -87,7 +97,7 @@ } @supports -moz-bool-pref("browser.proton.tabs.enabled") { - :root[tabsintitlebar] .tab-icon-sound:-moz-window-inactive { + :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive { opacity: .6; } } /*** END proton ***/ diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index ae2b3d6d46e0..4b64d297d501 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -21,6 +21,7 @@ --panel-separator-color: ThreeDLightShadow; --chrome-content-separator-color: ThreeDShadow; + --tabs-border-color: threedshadow; } @supports not -moz-bool-pref("browser.proton.enabled") { @@ -29,10 +30,6 @@ } } /* END !proton */ -#navigator-toolbox { - --tabs-border-color: threedshadow; -} - #tabbrowser-tabs { --tab-line-color: highlight; } @@ -52,9 +49,11 @@ --toolbar-field-non-lwt-bgcolor: #f0f0f4; } + @supports not -moz-bool-pref("browser.proton.tabs.enabled") { #navigator-toolbox { --tabs-border-color: rgba(0,0,0,.3); } + } /* END !proton */ #tabbrowser-tabs { --tab-line-color: #0a84ff; @@ -71,9 +70,11 @@ --panel-separator-color: rgba(249,249,250,.1); } +@supports not -moz-bool-pref("browser.proton.tabs.enabled") { #navigator-toolbox:-moz-lwtheme { --tabs-border-color: rgba(0,0,0,.3); } +} /* END !proton */ #menubar-items { -moz-box-orient: vertical; /* for flex hack */ diff --git a/browser/themes/windows/compacttheme.css b/browser/themes/windows/compacttheme.css index 5adb3573349a..04ad636ed5f2 100644 --- a/browser/themes/windows/compacttheme.css +++ b/browser/themes/windows/compacttheme.css @@ -47,12 +47,14 @@ color: hsl(240,9%,98%); } + @supports not -moz-bool-pref("browser.proton.tabs.enabled") { /* Because we're forcing the tabs toolbar to be [brighttext] to * get white toolbar button icons, we need to manually set the * correct color for the tab hover state for the light theme. */ .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true], [multiselected]):-moz-lwtheme-darktext { background-color: rgba(0,0,0,.2) !important; } + } /* end !proton */ } } } /*** END !proton ***/ diff --git a/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js index 928fa4edee75..4783bbbdafde 100644 --- a/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js +++ b/toolkit/components/extensions/test/browser/browser_ext_themes_tab_line.js @@ -30,13 +30,7 @@ add_task(async function test_support_tab_line() { ".tabbrowser-tab[selected]" ); let line = selectedTab.querySelector(".tab-line"); - if (protonTabsEnabled) { - Assert.equal( - newWin.getComputedStyle(line).display, - "none", - "Tab line should not be displayed when Proton is enabled" - ); - } else { + if (!protonTabsEnabled) { Assert.equal( newWin.getComputedStyle(line).backgroundColor, `rgb(${hexToRGB(TAB_LINE_COLOR).join(", ")})`, diff --git a/toolkit/mozapps/extensions/default-theme/manifest.json b/toolkit/mozapps/extensions/default-theme/manifest.json index 8df8907add7c..c4bc0acb6023 100644 --- a/toolkit/mozapps/extensions/default-theme/manifest.json +++ b/toolkit/mozapps/extensions/default-theme/manifest.json @@ -19,22 +19,78 @@ "dark_theme": { "colors": { - "tab_background_text": "rgb(249, 249, 250)", + "tab_background_text": "#fbfbfe", + "tab_selected": "rgb(66,65,77)", + "tab_text": "rgb(251,251,254)", "icons": "rgb(249, 249, 250, 0.7)", - "frame": "hsl(240, 5%, 5%)", - "popup": "#4a4a4f", - "popup_text": "rgb(249, 249, 250)", - "popup_border": "#27272b", + "frame": "#1c1b22", + "popup": "rgb(66,65,77)", + "popup_text": "rgb(251,251,254)", + "popup_border": "rgb(82,82,94)", + "popup_highlight": "rgb(43,42,51)", "tab_line": "#0a84ff", - "toolbar": "hsl(240, 1%, 20%)", + "toolbar": "#2b2a33", "toolbar_bottom_separator": "hsl(240, 5%, 5%)", - "toolbar_field": "rgb(71, 71, 73)", - "toolbar_field_border": "rgba(249, 249, 250, 0.2)", + "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_field_text": "rgb(249, 249, 250)", + "toolbar_text": "#BFBFC9", + "ntp_background": "#2A2A2E", + "ntp_text": "rgb(249, 249, 250)", "sidebar": "#38383D", "sidebar_text": "rgb(249, 249, 250)", - "sidebar_border": "rgba(255, 255, 255, 0.1)" + "sidebar_border": "rgba(255, 255, 255, 0.1)", + "button": "rgb(43,42,51)", + "button_hover": "rgb(82,82,94)", + "button_active": "rgb(91,91,102)", + "checkbox_border_color": "rgb(143, 143, 157)", + "checkbox_unchecked_background": "rgb(43, 42, 51)", + "checkbox_unchecked_background_hover": "rgb(82, 82, 94)", + "checkbox_unchecked_background_active": "rgb(91, 91, 102)", + "checkbox_checked_background": "rgb(0, 221, 255)", + "checkbox_checked_color": "rgb(43, 42, 51)", + "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)" + }, + "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)" + } + }, + + "theme_experiment": { + "colors": { + "button": "--button-bgcolor", + "button_hover": "--button-hover-bgcolor", + "button_active": "--button-active-bgcolor", + "checkbox_border_color": "--checkbox-border-color", + "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_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", + "zoom_controls": "--zoom-controls-bgcolor" + }, + "properties": { + "panel_hover": "--arrowpanel-dimmed", + "panel_active": "--arrowpanel-dimmed-further", + "panel_active_darker": "--arrowpanel-dimmed-even-further" } } }