Converted Source Tree SVG's (including Blackbox) to images using CSS …

…styles (#4350) (#4477)
firefox-devtools · Oct 24, 2017 · eb88cf3 · eb88cf3
1 parent cd97e1c
commit eb88cf3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 28 deletions.
diff --git a/src/components/PrimaryPanes/Sources.css b/src/components/PrimaryPanes/Sources.css
@@ -131,34 +131,34 @@
   fill: var(--theme-body-color);
 }
 
-.sources-list .managed-tree .tree .node .blackBox svg {
+.sources-list .managed-tree .tree .node img.blackBox {
+  mask: url(/images/blackBox.svg) no-repeat;
+  mask-size: 100%;
+  background-color: var(--theme-highlight-blue);
   width: 13px;
-  position: relative;
-  top: 2px;
+  height: 13px;
+  display: inline-block;
   margin-inline-end: 5px;
-}
-.sources-list .managed-tree .tree .node .blackBox path {
-  fill: var(--theme-textbox-box-shadow);
+  margin-bottom: -2px;
 }
 
-.sources-list .managed-tree .tree .node.focused .blackBox path {
-  fill: white;
+.sources-list .managed-tree .tree .node.focused img.blackBox {
+  background-color: white;
 }
 
 .theme-dark
 .sources-list
 .managed-tree
 .tree
 .node:not(.focused)
-.blackBox
-svg {
-  fill: var(--theme-content-color3);
+img.blackBox {
+  background-color: var(--theme-content-color3);
 }
 
-.theme-dark .sources-list .managed-tree .tree .node .blackBox circle {
-  fill: var(--theme-body-color);
+.theme-dark .sources-list .managed-tree .tree .node img.blackBox {
+  background-color: var(--theme-body-color);
 }
 
-.theme-dark .sources-list .managed-tree .tree .node.focused .blackBox circle {
-  fill: white;
+.theme-dark .sources-list .managed-tree .tree .node.focused img.blackBox {
+  background-color: white;
 }
diff --git a/src/components/PrimaryPanes/SourcesTree.js b/src/components/PrimaryPanes/SourcesTree.js
@@ -227,18 +227,18 @@ class SourcesTree extends Component<Props, State> {
     }
 
     if (depth === 0) {
-      return <Svg name="domain" />;
+      return <img className="domain" />;
     }
 
     if (!nodeHasChildren(item)) {
       const source = sources.get(item.contents.get("id"));
       if (source.get("isBlackBoxed")) {
-        return <Svg name="blackBox" />;
+        return <img className="blackBox" />;
       }
-      return <Svg name="file" />;
+      return <img className="file" />;
     }
 
-    return <Svg name="folder" />;
+    return <img className="folder" />;
   }
 
   onContextMenu(event, item) {

diff --git a/src/components/shared/Svg.css b/src/components/shared/Svg.css
@@ -1,14 +1,17 @@
 .arrow,
-.folder,
-.domain,
-.file,
 .worker,
 .refresh,
 .shortcut,
 .add-button {
   fill: var(--theme-splitter-color);
 }
 
+.file,
+.folder,
+.domain {
+  background-color: var(--theme-splitter-color);
+}
+
 .worker,
 .folder {
   position: relative;
@@ -24,22 +27,41 @@
   top: 1px;
 }
 
-.domain svg,
-.folder svg,
 .worker svg,
 .refresh svg,
 .shortcut svg,
 .add-button svg {
   width: 15px;
 }
 
-.file svg {
+img.domain,
+img.folder {
+  width: 15px;
+  height: 15px;
+}
+
+img.domain {
+  mask: url(/images/domain.svg) no-repeat;
+}
+
+img.folder {
+  mask: url(/images/folder.svg) no-repeat;
+}
+
+img.file {
+  mask: url(/images/file.svg) no-repeat;
   width: 13px;
+  height: 13px;
+}
+
+img.domain,
+img.folder,
+img.file {
+  mask-size: 100%;
+  margin-inline-end: 5px;
+  display: inline-block;
 }
 
-.file svg,
-.domain svg,
-.folder svg,
 .refresh svg,
 .shortcut svg,
 .worker svg {