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 draft
authorJared Wein <jwein@mozilla.com>
Thu, 07 Sep 2017 11:01:49 -0400
changeset 660790 a4af699bd648dc50796a60e34ddc22f7244623df
parent 660600 8c386102de2c11532562806f4c1ecb9a01ae845b
child 730360 8b0ffca2b860295e6ce924414b9af21acf0c8d83
push id78534
push userbmo:jaws@mozilla.com
push dateThu, 07 Sep 2017 15:02:07 +0000
reviewersgijs
bugs1396062
milestone57.0a1
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
browser/base/content/browser.js
browser/themes/shared/tabs.inc.css
--- 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;
 }