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 307245 ab643d9880b45d3567c390b11936fc7c38388b77
parent 307244 cf23addcfa4d9224a7d186481ecfb48194bb37be
child 307246 0cb2c7646aa072218accaf14615a2d4ba4408133
push id30507
push usercbook@mozilla.com
push dateSat, 30 Jul 2016 14:15:35 +0000
treeherdermozilla-central@c3565c8b1cdb [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;