From c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Sat, 17 Feb 2018 16:28:03 +0100 Subject: Use windows 10 Accent colors. --- browser/themes/windows/browser-aero.css | 466 +++++++++++++++++++---------- browser/themes/windows/browser.css | 17 +- browser/themes/windows/caption-buttons.svg | 133 ++++---- browser/themes/windows/devedition.css | 10 +- 4 files changed, 406 insertions(+), 220 deletions(-) diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 5ff9d8250..8e1de9577 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -46,8 +46,7 @@ color: graytext; } - @media (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7) { + @media (-moz-os-version: windows-win7) { .sidebar-header:not(:-moz-lwtheme), #sidebar-header:not(:-moz-lwtheme) { background-color: #EEF3FA; @@ -83,190 +82,353 @@ -moz-appearance: -moz-win-exclude-glass; } - @media not all and (-moz-os-version: windows-vista) { - @media not all and (-moz-os-version: windows-win7) { - @media not all and (-moz-os-version: windows-win8) { - @media (-moz-windows-default-theme) { - #main-window { - background-color: hsl(0, 0%, 78%); - } - - :root[tabsintitlebar] .tab-label:-moz-window-inactive { - /* Calculated to match the opacity change of Windows Explorer - titlebar text change for inactive windows. */ - opacity: .6; - } - } + @media (-moz-os-version: windows-win10) { + /* Draw XUL caption buttons and background on Windows 10 */ + @media (-moz-windows-default-theme) { + #main-window { + background-color: hsl(0, 0%, 78%); + } - @media not all and (-moz-windows-default-theme) { - #main-window { - background-color: transparent; - } - } + :root[tabsintitlebar] .tab-label:-moz-window-inactive { + /* Calculated to match the opacity change of Windows Explorer + titlebar text change for inactive windows. */ + opacity: .6; + } + } - #titlebar-buttonbox, - .titlebar-button { - -moz-appearance: none !important; - } + @media not all and (-moz-windows-accent-color-applies) { + /* Default styling for when no accent color is applied */ + #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: hsl(235, 33%, 19%); + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --titlebar-text-color: white; + } + + #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight); + } - .titlebar-button { - border: none; - margin: 0 !important; - padding: 10px 17px; - } + #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight); + } - #main-window[sizemode=maximized] .titlebar-button { - padding-top: 8px; - padding-bottom: 8px; - } + #main-window[sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); + } - .titlebar-button > .toolbarbutton-icon { - width: 12px; - height: 12px; - } + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 100%, .17); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 100%, .27); + transition: none; + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 39%, 1); + transition: none; + } + } + @media (-moz-windows-accent-color-applies) { + /* Styling for when an accent color is applied to the titlebar */ + #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: -moz-win-accentcolor; + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --titlebar-text-color: -moz-win-accentcolortext; + } + + #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + + #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + + #main-window[sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + + #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + .titlebar-button:hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + @media (-moz-windows-accent-color-is-dark) { + /* dark accent color */ #titlebar-min { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight); } #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight); } #main-window[sizemode="maximized"] #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight); } #titlebar-close { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); - } - #titlebar-close:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); } - - #titlebar-min:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes); + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 100%, .17); } - #titlebar-max:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes); + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 100%, .27); + transition: none; } - #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes); + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); } - #titlebar-close:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes); + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 39%, 1); + transition: none; } + } + } /* Windows 10 accent color applies */ + @media not all and (-moz-windows-default-theme) { + #main-window { + background-color: transparent; + } + } - /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which - * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */ - @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) { - .titlebar-button > .toolbarbutton-icon { - width: 11.5px; - height: 11.5px; - } - } + #titlebar-buttonbox, + .titlebar-button { + -moz-appearance: none !important; + } - /* 175% dpi should result in the same device pixel sizes as 150% dpi. */ - @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) { - .titlebar-button { - padding-left: 14.1px; - padding-right: 14.1px; - } - - .titlebar-button > .toolbarbutton-icon { - width: 10.8px; - height: 10.8px; - } - } + .titlebar-button { + border: none; + margin: 0 !important; + padding: 9px 17px; + transition: background-color linear 120ms; + } + + #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs { + min-height: 28px; + } - /* 225% dpi should result in the same device pixel sizes as 200% dpi. */ - @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) { - .titlebar-button { - padding-left: 15.3333px; - padding-right: 15.3333px; - } - - .titlebar-button > .toolbarbutton-icon { - width: 10.8px; - height: 10.8px; - } - } + #main-window[sizemode=maximized] .titlebar-button { + padding-top: 8px; + padding-bottom: 8px; + } - /* 275% dpi should result in the same device pixel sizes as 250% dpi. */ - @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) { - /* NB: todo: this should also change padding on the buttons - * themselves, but without a device to test this on, it's - * impossible to know by how much. */ - .titlebar-button > .toolbarbutton-icon { - width: 10.8px; - height: 10.8px; - } - } + .titlebar-button > .toolbarbutton-icon { + width: 12px; + height: 12px; + } - @media (-moz-windows-default-theme) { - .titlebar-button:hover { - background-color: hsla(0, 0%, 0%, .12); - } + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { + opacity: 0.5; + } - .titlebar-button:hover:active { - background-color: hsla(0, 0%, 0%, .22); - } + #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox { + margin-top: -4px; + } - .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { - opacity: 0.5; - } + #main-window[sizemode="maximized"] #titlebar-close { + padding-right: 19px; + } + + #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); + background-color: hsla(0, 86%, 49%, 1); + } - #titlebar-close:hover { - background-color: hsl(355, 86%, 49%); - } + #titlebar-close:hover:active { + background-color: hsla(0, 86%, 49%, 0.6); + transition: none; + } + + /* inactive window */ - #titlebar-close:hover:active { - background-color: hsl(355, 82%, 69%); - } - } - @media not all and (-moz-windows-default-theme) { - .titlebar-button { - background-color: -moz-field; - } - .titlebar-button:hover { - background-color: Highlight; - } - - #titlebar-min { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast); - } - #titlebar-min:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast-hover); - } - - #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast); - } - #titlebar-max:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast-hover); - } - - #main-window[sizemode="maximized"] #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast); - } - #main-window[sizemode="maximized"] #titlebar-max:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast-hover); - } - - #titlebar-close { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast); - } - #titlebar-close:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast-hover); - } - } + #titlebar-min:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + + #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + + #main-window[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + + #titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + /* light persona */ + + .titlebar-button:-moz-lwtheme-darktext:hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:-moz-lwtheme-darktext:hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + #titlebar-min:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline); + } + + #titlebar-max:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline); + } + + #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline); + } + + #titlebar-close:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline); + } + #titlebar-close:hover:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline); + } + + /* dark persona */ + + .titlebar-button:-moz-lwtheme-brighttext:hover { + background-color: hsla(0, 0%, 100%, .27); + } + + .titlebar-button:-moz-lwtheme-brighttext:hover:active { + background-color: hsla(0, 0%, 100%, .37); + transition: none; + } + + #titlebar-min:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted); + } + + #titlebar-max:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted); + } + + #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted); + } + + #titlebar-close:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted); + } + #titlebar-close:hover:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted); + } + + /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which + * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */ + @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) { + .titlebar-button > .toolbarbutton-icon { + width: 11.5px; + height: 11.5px; + } + } + + /* 175% dpi should result in the same device pixel sizes as 150% dpi. */ + @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) { + .titlebar-button { + padding-left: 14.1px; + padding-right: 14.1px; + } + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; } } - } - @media (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7), + /* 225% dpi should result in the same device pixel sizes as 200% dpi. */ + @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) { + .titlebar-button { + padding-left: 15.3333px; + padding-right: 15.3333px; + } + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + /* 275% dpi should result in the same device pixel sizes as 250% dpi. */ + @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) { + /* NB: todo: this should also change padding on the buttons + * themselves, but without a device to test this on, it's + * impossible to know by how much. */ + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + + @media not all and (-moz-windows-default-theme) { + .titlebar-button { + background-color: -moz-field; + } + .titlebar-button:hover { + background-color: Highlight; + } + + #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outine-inverted); + } + + #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outine-inverted); + } + + #main-window[sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outine-inverted); + } + + #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted); + } + #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted); + } + } + } /* Win 10 styling */ + + @media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) { #main-window[sizemode="maximized"] #titlebar-buttonbox { margin-inline-end: 3px; diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index 2de5a6545..15e776da1 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -16,6 +16,8 @@ %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper :root { + --titlebar-text-color: currentColor; + --space-above-tabbar: 15px; --backbutton-urlbar-overlap: 6px; @@ -187,19 +189,22 @@ toolbar:-moz-lwtheme { transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear; } +#toolbar-menubar, +#TabsToolbar { + color: var(--titlebar-text-color); +} + @media not all and (-moz-windows-compositor), not all and (-moz-windows-default-theme) { /* Please keep the menu text colors in this media block in sync with * devedition.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718. */ - #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme), - #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) { - color: CaptionText; + :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) { + --titlebar-text-color: CaptionText; } - #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive, - #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive { - color: InactiveCaptionText; + :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive { + --titlebar-text-color: InactiveCaptionText; } } diff --git a/browser/themes/windows/caption-buttons.svg b/browser/themes/windows/caption-buttons.svg index 3ba4f95a1..9cb42d539 100644 --- a/browser/themes/windows/caption-buttons.svg +++ b/browser/themes/windows/caption-buttons.svg @@ -1,49 +1,61 @@ + - + - + + @@ -56,45 +68,54 @@ - - - - - - - + + + + + - - + + + - - + + + - - - + + + + + - - - - - - - - + + + + + - - - + + + - - - + + + - - - - + + + + + + + + + + + + + + diff --git a/browser/themes/windows/devedition.css b/browser/themes/windows/devedition.css index 4c25f33a1..2dc72eeeb 100644 --- a/browser/themes/windows/devedition.css +++ b/browser/themes/windows/devedition.css @@ -193,14 +193,12 @@ /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */ @media not all and (-moz-windows-compositor), not all and (-moz-windows-default-theme) { - #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar, - #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar { - color: CaptionText; + :root[tabsintitlebar]:not([inFullscreen]) { + --titlebar-text-color: CaptionText; } - #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive, - #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive { - color: InactiveCaptionText; + :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive { + --titlebar-text-color: InactiveCaptionText; } #main-window[tabsintitlebar] #main-menubar > menu { -- cgit v1.2.3 From d6d1c2dad1079a09a131a94c87c78aca9aa0d1da Mon Sep 17 00:00:00 2001 From: Lootyhoof Date: Fri, 21 Jul 2017 20:47:35 +0100 Subject: Don't force colors in tabbar and menubar --- browser/themes/windows/browser-aero.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 8e1de9577..28599af7a 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -465,11 +465,6 @@ } @media (-moz-windows-default-theme) { - #toolbar-menubar:not(:-moz-lwtheme), - #TabsToolbar:not(:-moz-lwtheme) { - color: black; - } - #main-menubar > menu:not(:-moz-lwtheme) { color: inherit; } -- cgit v1.2.3 From 4ccbe3620eb1cd354ce66f51730d7baf9b1a5f81 Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Sat, 22 Jul 2017 01:53:42 +0200 Subject: Add a signal preference for dynamic color changes to adjust "brighttext" in the front-end. This makes all relevant toolbars pick up the fact that the Windows accent color has changed and should check and if necessary update the "brighttext" property on them for styling of controls. This is a bit of a hack-around to the fact that there is no real easy way otherwise to notify the front-end of color changes without needing a change in focus of the window. There is a deliberate 300ms delay built in, because otherwise the styles might not have propagated yet, resulting in brighttext not being updated properly. --- browser/base/content/browser.js | 17 +++++++++++++++++ widget/windows/nsWindow.cpp | 2 ++ 2 files changed, 19 insertions(+) diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index d813a55cc..bbfef0049 100755 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -8075,6 +8075,7 @@ var ToolbarIconColor = { window.addEventListener("activate", this); window.addEventListener("deactivate", this); Services.obs.addObserver(this, "lightweight-theme-styling-update", false); + gPrefService.addObserver("ui.colorChanged", this, false); // If the window isn't active now, we assume that it has never been active // before and will soon become active such that inferFromText will be @@ -8089,6 +8090,7 @@ var ToolbarIconColor = { window.removeEventListener("activate", this); window.removeEventListener("deactivate", this); Services.obs.removeObserver(this, "lightweight-theme-styling-update"); + gPrefService.removeObserver("ui.colorChanged", this); }, handleEvent: function (event) { @@ -8107,6 +8109,18 @@ var ToolbarIconColor = { // lightweight-theme-styling-update observer. setTimeout(() => { this.inferFromText(); }, 0); break; + case "nsPref:changed": + // system color change + var colorChangedPref = false; + try { + colorChangedPref = gPrefService.getBoolPref("ui.colorChanged"); + } catch(e) { } + // if pref indicates change, call inferFromText() on a small delay + if (colorChangedPref == true) + setTimeout(() => { this.inferFromText(); }, 300); + break; + default: + console.error("ToolbarIconColor: Uncaught topic " + aTopic); } }, @@ -8140,6 +8154,9 @@ var ToolbarIconColor = { else toolbar.setAttribute("brighttext", "true"); } + + // Clear pref if set, since we're done applying the color changes. + gPrefService.clearUserPref("ui.colorChanged"); } } diff --git a/widget/windows/nsWindow.cpp b/widget/windows/nsWindow.cpp index e721267ba..a8923f78e 100644 --- a/widget/windows/nsWindow.cpp +++ b/widget/windows/nsWindow.cpp @@ -7141,8 +7141,10 @@ nsWindow::OnSysColorChanged() NotifySysColorChanged(); // On Windows 10 only, we trigger a theme change to pick up changed media // queries that are needed for accent color changes. + // We also set a temp pref to notify the FE that the colors have changed. if (IsWin10OrLater()) { NotifyThemeChanged(); + Preferences::SetBool("ui.colorChanged", true); } } } -- cgit v1.2.3 From 6f5c57ae74045228c2cbe4b797fe228f03274e6c Mon Sep 17 00:00:00 2001 From: wolfbeast Date: Sat, 22 Jul 2017 01:59:19 +0200 Subject: Align ToolbarIconColor luminance computation with UWP guideline as well to make it consistent with the rest of the browser. --- browser/base/content/browser.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index bbfef0049..a8aff1bd7 100755 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -8144,12 +8144,12 @@ var ToolbarIconColor = { let luminances = new Map; for (let toolbar of document.querySelectorAll(toolbarSelector)) { let [r, g, b] = parseRGB(getComputedStyle(toolbar).color); - let luminance = 0.2125 * r + 0.7154 * g + 0.0721 * b; + let luminance = (2 * r + 5 * g + b) / 8; luminances.set(toolbar, luminance); } for (let [toolbar, luminance] of luminances) { - if (luminance <= 110) + if (luminance <= 128) toolbar.removeAttribute("brighttext"); else toolbar.setAttribute("brighttext", "true"); -- cgit v1.2.3