Don't use inline SVG for the arrow in Tree component.

Author: nchevobbe

packages/devtools-components/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "copy-assets": "node bin/copy-assets",
     "license-check": "devtools-license-check",
-    "storybook": "start-storybook -p 9002 -c .storybook",
+    "storybook": "start-storybook -p 9002 -c .storybook -s ./src",
     "test": "jest"
   },
   "author": "Jason Laster",
@@ -15,15 +15,14 @@
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "react-dom-factories": "^1.0.2",
-    "svg-inline-loader": "^0.8.0",
-    "svg-inline-react": "^3.0.0"
+    "react-dom-factories": "^1.0.2"
   },
   "devDependencies": {
     "@storybook/react": "^3.3.14",
     "babel-jest": "^22.4.1",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
     "babel-preset-react": "^6.24.1",
+    "devtools-launchpad": "^0.0.117",
     "devtools-license-check": "^0.5.1",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
@@ -52,8 +51,7 @@
       "node_modules/(?!devtools-)"
     ],
     "moduleNameMapper": {
-      "\\.css$": "<rootDir>/tests/__mocks__/styleMock.js",
-      "\\.svg$": "<rootDir>/tests/__mocks__/svgMock.js"
+      "\\.css$": "<rootDir>/tests/__mocks__/styleMock.js"
     }
   }
 }

packages/devtools-components/src/images/arrow.svg

@@ -389,9 +389,9 @@ describe("Tree", () => {
 
     getTreeNodes(wrapper).forEach(n => {
       if ("ABECDMN".split("").includes(getSanitizedNodeText(n))) {
-        expect(n.find("i.arrow.expanded").exists()).toBe(true);
+        expect(n.find("img.arrow.expanded").exists()).toBe(true);
       } else {
-        expect(n.find("i.arrow").exists()).toBe(false);
+        expect(n.find("img.arrow").exists()).toBe(false);
       }
     });
   });
@@ -401,7 +401,7 @@ describe("Tree", () => {
     expect(formatTree(wrapper)).toMatchSnapshot();
 
     getTreeNodes(wrapper).forEach(n => {
-      const arrow = n.find("i.arrow");
+      const arrow = n.find("img.arrow");
       expect(arrow.exists()).toBe(true);
       expect(arrow.hasClass("expanded")).toBe(false);
     });
@@ -462,7 +462,7 @@ function formatTree(wrapper) {
     .map((node) => {
       const level = (node.prop("aria-level") || 1) - 1;
       const indentStr = "|  ".repeat(level);
-      const arrow = node.find("i.arrow");
+      const arrow = node.find("img.arrow");
       let arrowStr = "  ";
       if (arrow.exists()) {
         arrowStr = arrow.hasClass("expanded") ? "▼ " : "▶︎ ";

packages/devtools-components/src/tests/__mocks__/svgMock.js

@@ -57,33 +57,32 @@
   cursor: default;
 }
 
-.tree .tree-node.focused {
-  color: white;
-  background-color: var(--theme-selection-background, #0a84ff);
-}
-
-.tree-node.focused .arrow svg {
-  fill: currentColor;
-}
-
-.tree-node:hover img {
-  background-color: var(--theme-content-color3);
-}
-
-.arrow svg {
-  fill: var(--theme-splitter-color, #9B9B9B);
-  transition: transform 0.125s ease;
-  width: 10px;
-  margin-inline-end: 5px;
+.tree-node img.arrow {
+  mask: url(/images/arrow.svg) no-repeat;
+  mask-size: 100%;
+  width: 9px;
+  height: 9px;
+  margin-inline-start: 1px;
+  margin-inline-end: 4px;
+  background-color: var(--theme-splitter-color, #9B9B9B);
   transform: rotate(-90deg);
+  transition: transform 0.125s ease;
+  align-self: center;
 }
 
-html[dir="rtl"] .arrow svg,
-.arrow svg:dir(rtl),
-.arrow svg:-moz-locale-dir(rtl) {
+html[dir="rtl"] .tree-node img.arrow {
   transform: rotate(90deg);
 }
 
-.arrow.expanded.expanded svg {
+.tree-node img.arrow.expanded.expanded {
   transform: rotate(0deg);
+ }
+
+.tree .tree-node.focused {
+  color: white;
+  background-color: var(--theme-selection-background, #0a84ff);
+}
+
+.tree-node.focused img.arrow {
+  background-color: currentColor;
 }

packages/devtools-components/src/tests/tree.js

@@ -3,11 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from "react";
-const { Component, createFactory, createElement } = React;
+const { Component, createFactory } = React;
 import dom from "react-dom-factories";
 import PropTypes from "prop-types";
-import InlineSVG from "svg-inline-react";
-import svgArrow from "./images/arrow.svg";
 
 require("./tree.css");
 
@@ -37,9 +35,8 @@ class ArrowExpander extends Component {
     if (expanded) {
       classNames.push("expanded");
     }
-    return createElement(InlineSVG, {
+    return dom.img({
       className: classNames.join(" "),
-      src: svgArrow
     });
   }
 }

packages/devtools-components/src/tree.css

@@ -32,7 +32,9 @@ const webpackConfig = {
   }
 };
 
-const extra = {};
+const extra = {
+  disablePostCSS: true,
+};
 webpackConfig.plugins = [];
 if (!isDevelopment()) {
   extra.excludeMap = {