From f611594f2adff3c4f70ade8162044c8edd4796b1 Mon Sep 17 00:00:00 2001 From: Lootyhoof Date: Wed, 18 May 2016 22:15:48 +0100 Subject: Infer from each toolbar's text color whether to use inverted icons --- browser/base/content/browser-fullScreen.js | 2 + browser/base/content/browser.js | 84 ++++++++++++++++++++++++++ browser/themes/linux/downloads/downloads.css | 6 ++ browser/themes/osx/browser.css | 26 ++++---- browser/themes/osx/downloads/downloads.css | 9 ++- browser/themes/windows/browser.css | 26 ++++---- browser/themes/windows/downloads/downloads.css | 9 ++- 7 files changed, 132 insertions(+), 30 deletions(-) (limited to 'browser') diff --git a/browser/base/content/browser-fullScreen.js b/browser/base/content/browser-fullScreen.js index 7be21d655..7a418f9bd 100644 --- a/browser/base/content/browser-fullScreen.js +++ b/browser/base/content/browser-fullScreen.js @@ -589,6 +589,8 @@ var FullScreen = { navbar.appendChild(fullscreenctls); } fullscreenctls.hidden = aShow; + + ToolbarIconColor.inferFromText(); } }; XPCOMUtils.defineLazyGetter(FullScreen, "useLionFullScreen", function() { diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js index 1e119a381..cf6ab8b1e 100644 --- a/browser/base/content/browser.js +++ b/browser/base/content/browser.js @@ -980,6 +980,7 @@ var gBrowserInit = { gPrivateBrowsingUI.init(); TabsInTitlebar.init(); retrieveToolbarIconsizesFromTheme(); + ToolbarIconColor.init(); #ifdef XP_WIN if ((window.matchMedia("(-moz-os-version: windows-win8)").matches || @@ -1399,6 +1400,8 @@ var gBrowserInit = { TabsOnTop.uninit(); TabsInTitlebar.uninit(); + + ToolbarIconColor.uninit(); var enumerator = Services.wm.getEnumerator(null); enumerator.getNext(); @@ -4567,6 +4570,9 @@ function setToolbarVisibility(toolbar, isVisible) { #ifdef MENUBAR_CAN_AUTOHIDE updateAppButtonDisplay(); #endif + + if (isVisible) + ToolbarIconColor.inferFromText(); } var TabsOnTop = { @@ -4717,6 +4723,8 @@ var TabsInTitlebar = { titlebar.style.marginBottom = ""; } + + ToolbarIconColor.inferFromText(); }, _sizePlaceholder: function (type, width) { @@ -7168,3 +7176,79 @@ let BrowserChromeTest = { this._cb = cb; } }; + +let ToolbarIconColor = { + init: function () { + this._initialized = true; + + window.addEventListener("activate", this); + window.addEventListener("deactivate", this); + Services.obs.addObserver(this, "lightweight-theme-styling-update", 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 + // called from the initial activate event. + if (Services.focus.activeWindow == window) + this.inferFromText(); + }, + + uninit: function () { + this._initialized = false; + + window.removeEventListener("activate", this); + window.removeEventListener("deactivate", this); + Services.obs.removeObserver(this, "lightweight-theme-styling-update"); + }, + + handleEvent: function (event) { + switch (event.type) { + case "activate": + case "deactivate": + this.inferFromText(); + break; + } + }, + + observe: function (aSubject, aTopic, aData) { + switch (aTopic) { + case "lightweight-theme-styling-update": + // inferFromText needs to run after LightweightThemeConsumer.jsm's + // lightweight-theme-styling-update observer. + setTimeout(() => { this.inferFromText(); }, 0); + break; + } + }, + + inferFromText: function () { + if (!this._initialized) + return; + + function parseRGB(aColorString) { + let rgb = aColorString.match(/^rgba?\((\d+), (\d+), (\d+)/); + rgb.shift(); + return rgb.map(x => parseInt(x)); + } + + let toolbarSelector = "toolbar:not([collapsed=true])"; +#ifdef XP_MACOSX + toolbarSelector += ":not([type=menubar])"; +#endif + + // The getComputedStyle calls and setting the brighttext are separated in + // two loops to avoid flushing layout and making it dirty repeatedly. + + 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; + luminances.set(toolbar, luminance); + } + + for (let [toolbar, luminance] of luminances) { + if (luminance <= 110) + toolbar.removeAttribute("brighttext"); + else + toolbar.setAttribute("brighttext", "true"); + } + } +} \ No newline at end of file diff --git a/browser/themes/linux/downloads/downloads.css b/browser/themes/linux/downloads/downloads.css index 7c4cd2cc4..049132713 100644 --- a/browser/themes/linux/downloads/downloads.css +++ b/browser/themes/linux/downloads/downloads.css @@ -312,6 +312,12 @@ toolbar[iconsize="large"] > #downloads-indicator[attention] > #downloads-indicat text-align: center; } +toolbar[brighttext] #downloads-indicator-counter { + color: white; + text-shadow: 0 0 1px rgba(0,0,0,.7), + 0 1px 1.5px rgba(0,0,0,.5); +} + #downloads-indicator-progress { width: 16px; height: 6px; diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css index 5132733c9..1f5c98571 100644 --- a/browser/themes/osx/browser.css +++ b/browser/themes/osx/browser.css @@ -243,7 +243,7 @@ menuitem.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -.toolbarbutton-1:-moz-lwtheme-brighttext { +toolbar[brighttext] .toolbarbutton-1 { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } @@ -260,8 +260,8 @@ menuitem.bookmark-item { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); } -.toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext, -.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext { +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } @@ -589,7 +589,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { #home-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -#home-button.bookmark-item:-moz-lwtheme-brighttext { +toolbar[brighttext] #home-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } @@ -615,7 +615,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -#bookmarks-menu-button.bookmark-item:-moz-lwtheme-brighttext { +toolbar[brighttext] #bookmarks-menu-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } @@ -1473,8 +1473,8 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- background-origin: border-box; } -.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext, -.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext { +toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-up, +toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-down { list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png); } @@ -1517,8 +1517,8 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- } .tabs-newtab-button:-moz-lwtheme-brighttext, -#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext, -#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext { +toolbar[brighttext] #TabsToolbar > #new-tab-button, +toolbar[brighttext] #TabsToolbar > toolbarpaletteitem > #new-tab-button { list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png); } @@ -1540,11 +1540,11 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- -moz-image-region: auto; } -#alltabs-button:-moz-lwtheme-brighttext { +toolbar[brighttext] #alltabs-button { list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-inverted.png"); } -#alltabs-button[type="menu"]:-moz-lwtheme-brighttext { +toolbar[brighttext] #alltabs-button[type="menu"] { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } @@ -1583,7 +1583,7 @@ richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url- } @media (min-resolution: 2dppx) { - .tabs-closebutton:-moz-lwtheme-brighttext { + toolbar[brighttext] .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } } @@ -2188,7 +2188,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { @media (min-resolution: 2dppx) { - #addonbar-closebutton:-moz-lwtheme-brighttext { + toolbar[brighttext] #addonbar-closebutton { list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } } diff --git a/browser/themes/osx/downloads/downloads.css b/browser/themes/osx/downloads/downloads.css index 3f4ee7e65..4904dcd69 100644 --- a/browser/themes/osx/downloads/downloads.css +++ b/browser/themes/osx/downloads/downloads.css @@ -248,7 +248,7 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti min-height: 18px; } -#downloads-indicator-icon:-moz-lwtheme-brighttext { +toolbar[brighttext] #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90) center no-repeat; } @@ -266,6 +266,11 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti background-size: 12px; } +toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), + 0, 108, 18, 90) center no-repeat; +} + #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: url("chrome://browser/skin/downloads/download-glow.png"); } @@ -325,7 +330,7 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti text-align: center; } -#downloads-indicator-counter:-moz-lwtheme-brighttext { +toolbar[brighttext] #downloads-indicator-counter { color: white; text-shadow: 0 0 1px rgba(0,0,0,.7), 0 1px 1.5px rgba(0,0,0,.5); diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index a204689b5..05a15cb7b 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -749,7 +749,7 @@ menuitem.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -.toolbarbutton-1:-moz-lwtheme-brighttext { +toolbar[brighttext] .toolbarbutton-1 { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } %ifdef WINDOWS_AERO @@ -771,8 +771,8 @@ menuitem.bookmark-item { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow.png"); } -.toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext, -.toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext { +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menu-dropmarker, +toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } @@ -1123,7 +1123,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { #home-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -#home-button.bookmark-item:-moz-lwtheme-brighttext { +toolbar[brighttext] #home-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } %ifdef WINDOWS_AERO @@ -1154,7 +1154,7 @@ toolbar[mode=full] .toolbarbutton-1 > .toolbarbutton-menubutton-button { list-style-image: url("chrome://browser/skin/Toolbar.png"); } -#bookmarks-menu-button.bookmark-item:-moz-lwtheme-brighttext { +toolbar[brighttext] #bookmarks-menu-button.bookmark-item { list-style-image: url("chrome://browser/skin/Toolbar-inverted.png"); } %ifdef WINDOWS_AERO @@ -2155,8 +2155,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- } %endif -.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext, -.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext { +toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-up, +toolbar[brighttext] .tabbrowser-arrowscrollbox > .scrollbutton-down { list-style-image: url(chrome://browser/skin/tabbrowser/tab-arrow-left-inverted.png); } @@ -2206,8 +2206,8 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- %endif .tabs-newtab-button:-moz-lwtheme-brighttext, -#TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext, -#TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext { +toolbar[brighttext] #TabsToolbar > #new-tab-button, +toolbar[brighttext] #TabsToolbar > toolbarpaletteitem > #new-tab-button { list-style-image: url(chrome://browser/skin/tabbrowser/newtab-inverted.png); } @@ -2231,7 +2231,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- -moz-image-region: auto; } -#alltabs-button:-moz-lwtheme-brighttext { +toolbar[brighttext] #alltabs-button { list-style-image: url("chrome://browser/skin/tabbrowser/alltabs-inverted.png"); } @@ -2239,7 +2239,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > #alltabs-button[type=menu]:-moz-system-metric(windows-compositor):not(:-moz-lwtheme), :-moz-any(#TabsToolbar, #nav-bar[tabsontop=false], #toolbar-menubar) > toolbarpaletteitem > #alltabs-button[type=menu]:-moz-system-metric(windows-compositor):not(:-moz-lwtheme), %endif -#alltabs-button[type="menu"]:-moz-lwtheme-brighttext { +toolbar[brighttext] #alltabs-button[type="menu"] { list-style-image: url("chrome://browser/skin/toolbarbutton-dropdown-arrow-inverted.png"); } @@ -2277,7 +2277,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action- border: none; } -.tabs-closebutton:-moz-lwtheme-brighttext { +toolbar[brighttext] .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } @@ -2876,7 +2876,7 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] { -moz-appearance: none; } -#addonbar-closebutton:-moz-lwtheme-brighttext { +toolbar[brighttext] #addonbar-closebutton { list-style-image: url("chrome://global/skin/icons/close-inverted.png"); } diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css index ff4a13855..7f5f195e4 100644 --- a/browser/themes/windows/downloads/downloads.css +++ b/browser/themes/windows/downloads/downloads.css @@ -254,7 +254,7 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti min-height: 18px; } -#downloads-indicator-icon:-moz-lwtheme-brighttext { +toolbar[brighttext] #downloads-indicator-icon { background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), 0, 108, 18, 90) center no-repeat; } @@ -272,6 +272,11 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti background-size: 12px; } +toolbar[brighttext] #downloads-indicator:not([counter]) > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { + background: -moz-image-rect(url("chrome://browser/skin/Toolbar-inverted.png"), + 0, 108, 18, 90) center no-repeat; +} + #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor > #downloads-indicator-progress-area > #downloads-indicator-counter { background-image: url("chrome://browser/skin/downloads/download-glow.png"); } @@ -331,7 +336,7 @@ richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:acti text-align: center; } -#downloads-indicator-counter:-moz-lwtheme-brighttext { +toolbar[brighttext] #downloads-indicator-counter { color: white; text-shadow: 0 0 1px rgba(0,0,0,.7), 0 1px 1.5px rgba(0,0,0,.5); -- cgit v1.2.3