From e67b519736efc25bbcfcf2bcf6f7e04913717a9e Mon Sep 17 00:00:00 2001
From: Florens Verschelde <florens@fvsch.com>
Date: Tue, 12 Feb 2019 02:36:35 +0100
Subject: [PATCH] Use --theme-icon-* colors for all Debugger icons (#7743,
 #7936) (#7939)

---
 images/arrow.svg                             |  2 +-
 packages/devtools-components/src/tree.css    | 29 +++++++++-----------
 packages/devtools-reps/src/reps/reps.css     | 12 ++++----
 src/components/Editor/Footer.css             |  2 +-
 src/components/SecondaryPanes/CommandBar.css |  2 +-
 src/components/shared/ResultList.css         |  2 +-
 6 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/images/arrow.svg b/images/arrow.svg
index d10640814c..d1217f2dd2 100644
--- a/images/arrow.svg
+++ b/images/arrow.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10">
   <path d="M5 8c-.25 0-.35-.1-.65-.4l-3.1-3.35C.75 3.7 1.1 3 1.75 3h6.5c.65 0 1 .7.5 1.25L5.65 7.6c-.3.3-.4.4-.65.4z"/>
 </svg>
diff --git a/packages/devtools-components/src/tree.css b/packages/devtools-components/src/tree.css
index ca98cbfa2d..fa343d0ea7 100644
--- a/packages/devtools-components/src/tree.css
+++ b/packages/devtools-components/src/tree.css
@@ -55,30 +55,27 @@
 }
 
 .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;
@@ -86,5 +83,5 @@ html[dir="rtl"] .tree-node button.arrow {
 }
 
 .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
index ffb02674ff..3d4d4bd7bb 100644
--- 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
index d392e33c68..7b9c2ac70d 100644
--- 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
index e76cf81fad..8bac62a0b6 100644
--- 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
index 2c1a10695c..9842245697 100644
--- 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 {