Use --theme-icon-* colors for all Debugger icons (#7743, #7936) (#7939)

firefox-devtools · Feb 12, 2019 · e67b519 · e67b519
1 parent f39173f
commit e67b519
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 26 deletions.
diff --git a/images/arrow.svg b/images/arrow.svg
diff --git a/packages/devtools-components/src/tree.css b/packages/devtools-components/src/tree.css
@@ -55,36 +55,33 @@
 }
 
 .tree-node button.arrow {
-  background:url(/images/arrow.svg) no-repeat;
-  background-size:contain;
-  background-position:center center;
+  mask: url(/images/arrow.svg) no-repeat center;
+  mask-size: 10px;
+  vertical-align: -1px;
   width: 10px;
   height: 10px;
-  border:0;
-  padding:0;
+  border: 0;
+  padding: 0;
   margin-inline-start: 1px;
   margin-inline-end: 4px;
-  transform: rotate(-90deg);
   transform-origin: center center;
-  transition: transform 0.125s ease;
-  align-self: center;
-  -moz-context-properties: fill;
-  fill: var(--theme-splitter-color, #9B9B9B);
+  transition: transform 125ms var(--animation-curve);
+  background-color: var(--theme-icon-dimmed-color);
 }
 
-html[dir="rtl"] .tree-node button.arrow {
-  transform: rotate(90deg);
+.tree-node button.arrow:not(.expanded) {
+  transform: rotate(-90deg);
 }
 
-.tree-node button.arrow.expanded.expanded {
-  transform: rotate(0deg);
- }
+html[dir="rtl"] .tree-node button:not(.expanded) {
+  transform: rotate(90deg);
+}
 
 .tree .tree-node.focused {
   color: white;
   background-color: var(--theme-selection-background, #0a84ff);
 }
 
 .tree-node.focused button.arrow {
-  fill: currentColor;
+  background-color: currentColor;
 }
diff --git a/packages/devtools-reps/src/reps/reps.css b/packages/devtools-reps/src/reps/reps.css
@@ -251,7 +251,7 @@ button.open-inspector {
   margin: 0 4px;
   padding: 0;
   border: none;
-  background-color: var(--comment-node-color);
+  background-color: var(--theme-icon-color);
   cursor: pointer;
 }
 
@@ -260,7 +260,7 @@ button.open-inspector {
 .objectBox-textNode:hover .open-inspector,
 .open-accessibility-inspector:hover,
 .open-inspector:hover {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-icon-checked-color);
 }
 
 /******************************************************************************/
@@ -269,14 +269,14 @@ button.open-inspector {
 button.jump-definition {
   mask: url(/images/jump-definition.svg) no-repeat;
   display: inline-block;
-  background-color: var(--comment-node-color);
+  background-color: var(--theme-icon-color);
   height: 16px;
   margin-left: 0.25em;
   vertical-align: middle;
 }
 
 .jump-definition:hover {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-icon-checked-color);
 }
 
 /******************************************************************************/
@@ -285,14 +285,14 @@ button.jump-definition {
 button.invoke-getter {
   mask: url(/images/input.svg) no-repeat;
   display: inline-block;
-  background-color: var(--comment-node-color);
+  background-color: var(--theme-icon-color);
   height: 10px;
   vertical-align: middle;
   border:none;
 }
 
 .invoke-getter:hover {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-icon-checked-color);
 }
 
 /******************************************************************************/

diff --git a/src/components/Editor/Footer.css b/src/components/Editor/Footer.css
@@ -58,7 +58,7 @@
 }
 
 .source-footer > .commands > .blackboxed > .img.blackBox {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-icon-checked-color);
 }
 
 .source-footer .blackbox-summary,

diff --git a/src/components/SecondaryPanes/CommandBar.css b/src/components/SecondaryPanes/CommandBar.css
@@ -42,7 +42,7 @@ html[dir="rtl"] .command-bar {
 }
 
 .command-bar .active .disable-pausing {
-  background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-icon-checked-color);
 }
 
 .bottom {

diff --git a/src/components/shared/ResultList.css b/src/components/shared/ResultList.css
@@ -60,7 +60,7 @@
 }
 
 .result-list li .result-item-icon {
-  background-color: var(--theme-comment);
+  background-color: var(--theme-icon-dimmed-color);
 }
 
 .result-list li .icon {