diff options
| -rwxr-xr-x | browser/base/content/browser.js | 21 | ||||
| -rw-r--r-- | browser/themes/windows/browser-aero.css | 471 | ||||
| -rw-r--r-- | browser/themes/windows/browser.css | 17 | ||||
| -rw-r--r-- | browser/themes/windows/caption-buttons.svg | 133 | ||||
| -rw-r--r-- | browser/themes/windows/devedition.css | 10 | ||||
| -rw-r--r-- | widget/windows/nsWindow.cpp | 2 |
6 files changed, 427 insertions, 227 deletions
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index d813a55cc..a8aff1bd7 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); } }, @@ -8130,16 +8144,19 @@ 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"); } + + // Clear pref if set, since we're done applying the color changes. + gPrefService.clearUserPref("ui.colorChanged"); } } diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 5ff9d8250..28599af7a 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; @@ -303,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; } 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 @@ +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- This Source Code Form is subject to the terms of the Mozilla Public - License, v. 2.0. If a copy of the MPL was not distributed with this - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> -<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <style> + g { + stroke: ButtonText; + stroke-width: 0.9px; + fill: none; + } + g:not(:target) { display: none; } + use:target > g { display: initial; } - g { - stroke: ButtonText; - stroke-width: 0.9px; - fill: none; - } - g:not([id|="close"]) { - shape-rendering: crispEdges; + .highlight > g { + stroke: HighlightText; } - .highcontrast { - stroke-width: 1.9px; + .inactive > g { + stroke: black; } - .highcontrast-hover > g { - stroke: HighlightText; + + .bolder { + stroke-width: 1.6px; + stroke: black; } - .white > g { - stroke: #fff; + + .outline { + stroke-width: 4px; + stroke: white; + opacity: 0.75; } - .themes { - stroke: #fff; - stroke-width: 1.9px; + + .inverted { + stroke-width: 1.6px; + stroke: white; } - .outer-stroke { - stroke: #000; - stroke-width: 3.6; - opacity: .75; + .outline-inverted { + stroke-width: 4px; + stroke: black; + opacity: 0.75; } - .restore-background-window { - stroke-width: .9; + + .outline-thinner { + stroke-width: 3.6px; } + </style> + <g id="close"> - <path d="M1,1 l 10,10 M1,11 l 10,-10"/> + <line x1="1" y1="1" x2="11" y2="11" stroke-width="1px"/> + <line x1="11" y1="1" x2="1" y2="11" stroke-width="1px"/> </g> <g id="maximize"> <rect x="1.5" y="1.5" width="9" height="9"/> @@ -56,45 +68,54 @@ <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/> </g> - <use id="close-white" class="white" xlink:href="#close"/> - <use id="maximize-white" class="white" xlink:href="#maximize"/> - <use id="minimize-white" class="white" xlink:href="#minimize"/> - <use id="restore-white" class="white" xlink:href="#restore"/> - - <g id="close-highcontrast" class="highcontrast"> - <path d="M1,1 l 10,10 M1,11 l 10,-10"/> + <g id="close-outline"> + <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline"/> + <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline"/> + <line x1="1" y1="1" x2="11" y2="11" class="bolder"/> + <line x1="11" y1="1" x2="1" y2="11" class="bolder"/> </g> - <g id="maximize-highcontrast" class="highcontrast"> - <rect x="2" y="2" width="8" height="8"/> + <g id="maximize-outline"> + <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline"/> + <rect x="1.5" y="1.5" width="9" height="9" class="bolder"/> </g> - <g id="minimize-highcontrast" class="highcontrast"> - <line x1="1" y1="6" x2="11" y2="6"/> + <g id="minimize-outline"> + <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline outline-thinner"/> + <line x1="1" y1="5.5" x2="11" y2="5.5" class="bolder"/> </g> - <g id="restore-highcontrast" class="highcontrast"> - <rect x="2" y="4" width="6" height="6"/> - <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/> + <g id="restore-outline"> + <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline"/> + <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline"/> + <rect x="1.5" y="3.5" width="7" height="7" class="bolder"/> + <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="bolder"/> </g> - <use id="close-highcontrast-hover" class="highcontrast-hover" xlink:href="#close-highcontrast"/> - <use id="maximize-highcontrast-hover" class="highcontrast-hover" xlink:href="#maximize-highcontrast"/> - <use id="minimize-highcontrast-hover" class="highcontrast-hover" xlink:href="#minimize-highcontrast"/> - <use id="restore-highcontrast-hover" class="highcontrast-hover" xlink:href="#restore-highcontrast"/> - - <g id="close-themes" class="themes"> - <path d="M1,1 l 10,10 M1,11 l 10,-10" class="outer-stroke" /> - <path d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/> + <g id="close-outline-inverted"> + <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline-inverted"/> + <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline-inverted"/> + <line x1="1" y1="1" x2="11" y2="11" class="inverted"/> + <line x1="11" y1="1" x2="1" y2="11" class="inverted"/> </g> - <g id="maximize-themes" class="themes"> - <rect x="2" y="2" width="8" height="8" class="outer-stroke"/> - <rect x="2" y="2" width="8" height="8"/> + <g id="maximize-outline-inverted"> + <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline-inverted"/> + <rect x="1.5" y="1.5" width="9" height="9" class="inverted"/> </g> - <g id="minimize-themes" class="themes"> - <line x1="0" y1="6" x2="12" y2="6" class="outer-stroke"/> - <line x1="1" y1="6" x2="11" y2="6"/> + <g id="minimize-outline-inverted"> + <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline-inverted outline-thinner"/> + <line x1="1" y1="5.5" x2="11" y2="5.5" class="inverted"/> </g> - <g id="restore-themes" class="themes"> - <path d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8" class="outer-stroke"/> - <rect x="2" y="4" width="6" height="6"/> - <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/> + <g id="restore-outline-inverted"> + <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline-inverted"/> + <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline-inverted"/> + <rect x="1.5" y="3.5" width="7" height="7" class="inverted"/> + <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="inverted"/> </g> + + <use id="close-highlight" class="highlight" xlink:href="#close"/> + <use id="maximize-highlight" class="highlight" xlink:href="#maximize"/> + <use id="minimize-highlight" class="highlight" xlink:href="#minimize"/> + <use id="restore-highlight" class="highlight" xlink:href="#restore"/> + <use id="close-inactive" class="inactive" xlink:href="#close"/> + <use id="maximize-inactive" class="inactive" xlink:href="#maximize"/> + <use id="minimize-inactive" class="inactive" xlink:href="#minimize"/> + <use id="restore-inactive" class="inactive" xlink:href="#restore"/> </svg> 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 { 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); } } } |
