Bug 1387723 - Remove --toolbarbutton-icon-fill and --toolbarbutton-icon-fill-inverted. r?johannh
--toolbarbutton-icon-fill and --toolbarbutton-icon-fill-inverted are largely unused;
only the dark theme uses --toolbarbutton-icon-fill-inverted as intended to change
icon colors. The variables are footguns in that people think they should somehow use
them when they really shouldn't, see
bug 1384898,
bug 1384893,
bug 1384895, and
pocket.css.
MozReview-Commit-ID: 8qAZAWJDkrt
--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -10,22 +10,16 @@ panelmultiview[mainViewId=PanelUI-pocket
#PanelUI-pocketView > .panel-subview-body,
#PanelUI-pocketView {
overflow: visible;
}
#pocket-button {
list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
- -moz-context-properties: fill;
- fill: var(--toolbarbutton-icon-fill);
-}
-
-toolbar[brighttext] #pocket-button {
- fill: var(--toolbarbutton-icon-fill-inverted);
}
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
fill: transparent;
}
@keyframes pocket-animation {
from {
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -48,18 +48,16 @@
--chrome-navigator-toolbox-separator-color: hsla(240, 5%, 5%, .1);
--chrome-nav-bar-separator-color: rgba(0,0,0,.2);
--chrome-nav-buttons-background: hsla(240, 5%, 5%, .1);
--chrome-nav-buttons-hover-background: hsla(240, 5%, 5%, .15);
--chrome-nav-bar-controls-border-color: hsla(240, 5%, 5%, .3);
--chrome-selection-color: #fff;
--chrome-selection-background-color: #5675B9;
- --toolbarbutton-icon-fill-inverted: rgba(249, 249, 250, .7);
-
%endif
/* Url and search bars */
%ifndef MOZ_PHOTON_THEME
--url-and-searchbar-background-color: #171B1F;
%else
--url-and-searchbar-background-color: hsla(0, 0%, 100%, .1);
%endif
@@ -121,16 +119,20 @@ toolbar:-moz-lwtheme-darktext {
/* Give some space to drag the window around while customizing
(normal space to left and right of tabs doesn't work in this case) */
#main-window[tabsintitlebar][customizing] {
--space-above-tabbar: 9px;
}
%endif
+toolbar[brighttext] .toolbarbutton-1 {
+ fill: rgba(249, 249, 250, .7);
+}
+
#urlbar ::-moz-selection,
#navigator-toolbox .searchbar-textbox ::-moz-selection,
.browserContainer > findbar ::-moz-selection {
background-color: var(--chrome-selection-background-color);
color: var(--chrome-selection-color);
}
/* Change the base colors for the browser chrome */
--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -250,18 +250,16 @@ toolbar[brighttext] #downloads-indicator
%endif
#downloads-indicator-notification {
opacity: 0;
%ifdef MOZ_PHOTON_ANIMATIONS
min-width: 1344px;
height: 98px; /* Height is equal to height of each frame in the SVG animation */
-moz-context-properties: fill;
- /* Intentionally not using --toolbarbutton-icon-fill to get better contrast/balance
- across default, dark and light themes */
fill: #737373;
%else
background-size: 16px;
background-position: center;
background-repeat: no-repeat;
width: 16px;
height: 16px;
%endif
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -1,21 +1,19 @@
:root {
- --toolbarbutton-icon-fill: #4c4c4c;
- --toolbarbutton-icon-fill-inverted: #fff;
--toolbarbutton-icon-fill-attention: #177ee5;
}
.toolbarbutton-1 {
-moz-context-properties: fill;
- fill: var(--toolbarbutton-icon-fill);
+ fill: #4c4c4c;
}
toolbar[brighttext] .toolbarbutton-1 {
- fill: var(--toolbarbutton-icon-fill-inverted);
+ fill: #fff;
}
#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
%ifdef MOZ_PHOTON_THEME
#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
#library-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
%endif