Bug 1288963 - Fix inversion of various devtools icons. r=bgrins
authorTim Nguyen <ntim.bugs@gmail.com>
Fri, 29 Jul 2016 08:37:00 -0400
changeset 347275 ab643d9880b45d3567c390b11936fc7c38388b77
parent 347274 cf23addcfa4d9224a7d186481ecfb48194bb37be
child 347276 0cb2c7646aa072218accaf14615a2d4ba4408133
push id6389
push userraliiev@mozilla.com
push dateMon, 19 Sep 2016 13:38:22 +0000
treeherdermozilla-beta@01d67bfe6c81 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1288963
milestone50.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1288963 - Fix inversion of various devtools icons. r=bgrins MozReview-Commit-ID: LHBWeczyPpV
devtools/client/shared/components/notification-box.css
devtools/client/themes/memory.css
devtools/client/themes/shadereditor.css
--- a/devtools/client/shared/components/notification-box.css
+++ b/devtools/client/shared/components/notification-box.css
@@ -81,20 +81,17 @@
   height: 20px;
   margin: 4px;
   margin-inline-end: 8px;
   background-image: url("chrome://devtools/skin/images/close.svg");
   background-position: 3px center;
   background-color: transparent;
   background-repeat: no-repeat;
   border-radius: 10px;
-  filter: invert(1);
 }
 
 .notificationbox .messageCloseButton:hover {
-  background-color: gray;
-  filter: invert(0);
+  background-color: rgba(170, 170, 170, .2); /* --toolbar-tab-hover */
 }
 
 .notificationbox .messageCloseButton:active {
-  background-color: rgb(102, 102, 102);
-  filter: invert(0);
+  background-color: rgba(170, 170, 170, .4); /* --toolbar-tab-hover-active */
 }
--- a/devtools/client/themes/memory.css
+++ b/devtools/client/themes/memory.css
@@ -207,18 +207,18 @@ html, body, #app, #memory-tool {
 
 .snapshot-list-item .delete {
   cursor: pointer;
   position: relative;
   min-height: 1em;
   min-width: 1.3em;
 }
 
-.theme-light .snapshot-list-item.selected .delete {
-  filter: invert(100%);
+.snapshot-list-item.selected .delete::before {
+  filter: invert(1);
 }
 
 .snapshot-list-item .delete::before {
   background-image: url("chrome://devtools/skin/images/close.svg");
   background-position: 0.2em 0;
 }
 
 .snapshot-list-item > .snapshot-title {
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -60,18 +60,22 @@
     background-image: url(images/itemToggle@2x.png);
   }
 }
 
 .side-menu-widget-item-checkbox[checked] .checkbox-check {
   background-position: 0 0;
 }
 
-/* Invert all toggle icons but the one in the active row for light theme */
-.theme-light .side-menu-widget-item:not(.selected) .checkbox-check {
+.side-menu-widget-item:not(.selected) .checkbox-check {
+  filter: var(--icon-filter);
+}
+
+/* Make sure icon is white when the item is selected */
+.side-menu-widget-item.selected .checkbox-check {
   filter: invert(1);
 }
 
 /* Shader source editors */
 
 .editor-label {
   padding: 1px 12px;
   border-top: 1px solid;