Bug 1382187 - Theme specific filter added to devtools notification bar 'close' icon. r=Honza
MozReview-Commit-ID: LpWRhJpUW24
--- a/devtools/client/shared/components/notification-box.css
+++ b/devtools/client/shared/components/notification-box.css
@@ -78,17 +78,17 @@
height: 20px;
margin: 4px;
margin-inline-end: 8px;
background-image: url("chrome://devtools/skin/images/close.svg");
background-position: center;
background-color: transparent;
background-repeat: no-repeat;
border-radius: 11px;
- filter: invert(0);
+ filter: var(--theme-messageCloseButtonFilter);
}
.notificationbox .messageCloseButton:hover {
background-color: gray;
filter: invert(1);
}
.notificationbox .messageCloseButton:active {
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -91,16 +91,17 @@
--theme-tooltip-background: rgba(255, 255, 255, .9);
--theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
--theme-codemirror-gutter-background: #f4f4f4;
+ --theme-messageCloseButtonFilter: invert(0);
}
:root.theme-dark {
--theme-body-background: var(--grey-80);
--theme-sidebar-background: var(--grey-90);
--theme-contrast-background: #ffb35b;
/* Toolbar */
@@ -173,16 +174,17 @@
--theme-tooltip-background: rgba(19, 28, 38, .9);
--theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
/* Command line */
--theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
--theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
--theme-codemirror-gutter-background: #262b37;
+ --theme-messageCloseButtonFilter: invert(1);
}
:root.theme-firebug {
--theme-body-background: #fff;
--theme-sidebar-background: #fcfcfc;
--theme-contrast-background: #e6b064;
--theme-tab-toolbar-background: rgb(240, 240, 240) linear-gradient(rgba(255, 255, 255, 0.8), transparent);