Bug 1396062 - If the contrast between the Windows accent color and the loading throbber isn't high enough, use the accentcolortext as the loading throbber fill color. r?gijs
MozReview-Commit-ID: 48EXykskjtZ
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1585,16 +1585,41 @@ var gBrowserInit = {
gBrowser.tabContainer.addEventListener("TabSelect", function() {
for (let panel of document.querySelectorAll("panel[tabspecific='true']")) {
if (panel.state == "open") {
panel.hidePopup();
}
}
});
+ if (window.matchMedia("(-moz-windows-accent-color-in-titlebar)").matches) {
+ BrowserUtils.promiseLayoutFlushed(document, "style", () => {
+ let accentColor = getComputedStyle(document.documentElement).backgroundColor;
+ accentColor = /rgb\((\d+), (\d+), (\d+)\)/.exec(accentColor).splice(1);
+ accentColor = accentColor.map(c => +c);
+ accentColor = new Color(...accentColor);
+ let loadingColor = getComputedStyle(document.documentElement).getPropertyValue("--tab-loading-fill");
+ loadingColor = /rgb\((\d+), (\d+), (\d+)\)/.exec(loadingColor).splice(1);
+ loadingColor = loadingColor.map(c => +c);
+ loadingColor = new Color(...loadingColor);
+
+ requestAnimationFrame(() => {
+ if (window.closed) {
+ return;
+ }
+
+ if (accentColor.isContrastRatioAcceptable(loadingColor)) {
+ document.documentElement.removeAttribute("highcontrast-winaccentcolor");
+ } else {
+ document.documentElement.setAttribute("highcontrast-winaccentcolor", "true");
+ }
+ });
+ });
+ }
+
this.delayedStartupFinished = true;
_resolveDelayedStartup();
SessionStore.promiseAllWindowsRestored.then(() => {
this._schedulePerWindowIdleTasks();
document.documentElement.setAttribute("sessionrestored", "true");
});
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -5,31 +5,35 @@
%endif
%filter substitution
%define horizontalTabPadding 9px
:root {
--tab-toolbar-navbar-overlap: 1px;
--tab-line-color: highlight;
--tab-min-height: 33px;
- --tab-loading-fill: #0A84FF;
+ --tab-loading-fill: rgb(10, 132, 255);
}
:root[uidensity=compact] {
--tab-min-height: 29px;
}
:root[uidensity=touch] {
--tab-min-height: 41px;
}
:root:-moz-lwtheme {
--tab-line-color: var(--lwt-accent-color);
}
+:root[highcontrast-winaccentcolor] .tabbrowser-tab:not([visuallyselected=true]) {
+ --tab-loading-fill: -moz-win-accentcolortext;
+}
+
#tabbrowser-tabs,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
min-height: var(--tab-min-height);
}
.tab-stack {
min-height: inherit;
}