Don't inline SVG images in devtools-reps.

This causes warning in the browser console AND can cause performance issue.
Using those images as background images means we can remove InlineSVG dependency
and helpers.
It also means we need to have a postCSS config to be able to transform those
images URL for development in launchpad, and also for the copy-assets command.

Author: nchevobbe

packages/devtools-reps/bin/copy-assets.js

@@ -3,9 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const {
-  tools: { makeBundle, symlinkTests, copyFile }
+  tools: { makeBundle }
 } = require("devtools-launchpad/index");
-const fs = require("fs-extra");
 const path = require("path");
 const minimist = require("minimist");
 const getConfig = require("./getConfig");
@@ -17,6 +16,7 @@ const args = minimist(process.argv.slice(2), {
 
 function start() {
   console.log("start: copy assets");
+  process.env.NODE_ENV = "production";
   const projectPath = path.resolve(__dirname, "..");
   const mcModulePath = "devtools/client/shared/components/reps";
 
@@ -33,15 +33,13 @@ function start() {
   }
 
   console.log("  output path is:", mcPath);
-
   console.log("  creating reps.js bundle...");
+
   makeBundle({
     outputPath: path.join(mcPath, mcModulePath),
     projectPath,
     watch: args.watch
   }).then(() => {
-    console.log("  remove build artifacts...");
-    fs.removeSync(path.join(mcPath, mcModulePath, "reps.js.map"));
     console.log("done: copy assets");
   }).catch(e => {
     console.error(e);

packages/devtools-reps/bin/dev-server.js

@@ -2,12 +2,24 @@
  * 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/. */
 
+const path = require("path");
 const toolbox = require("devtools-launchpad/index");
 const feature = require("devtools-config");
 const getConfig = require("./getConfig");
+const serve = require("express-static");
 
 const envConfig = getConfig();
 feature.setConfig(envConfig);
 
-const webpackConfig = require("../webpack.config");
-toolbox.startDevServer(envConfig, webpackConfig);
+let webpackConfig = require("../webpack.config");
+
+let { app } = toolbox.startDevServer(envConfig, webpackConfig, __dirname);
+
+// Serve devtools-reps images
+app.use("/devtools-reps/images/", serve(path.join(__dirname, "../src/shared/images")));
+
+// As well as devtools-components ones, with a different path, which we are going to
+// write in the postCSS config in development mode.
+app.use("/devtools-components/images/",
+  serve(path.join(__dirname, "../node_modules/devtools-components/src/images")));
+

packages/devtools-reps/package.json

@@ -26,15 +26,14 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "devtools-components": "^0.3.0",
+    "devtools-components": "^0.4.1",
     "lodash": "^4.17.2",
     "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-dom-factories": "^1.0.2",
     "react-redux": "^5.0.7",
-    "redux": "^3.7.2",
-    "svg-inline-react": "^3.0.0"
+    "redux": "^3.7.2"
   },
   "devDependencies": {
     "@sucrase/webpack-object-rest-spread-plugin": "^1.0.0",
@@ -55,9 +54,9 @@
     "immutable": "^3.8.2",
     "jest": "^22.4.2",
     "jest-flow-transform": "^1.0.1",
+    "postcss-url-mapper": "^1.2.0",
     "react-immutable-proptypes": "^2.1.0",
-    "redux-logger": "=3.0.6",
-    "svg-inline-loader": "^0.8.0"
+    "redux-logger": "=3.0.6"
   },
   "jest": {
     "rootDir": "src",
@@ -81,8 +80,7 @@
       "node_modules/(?!devtools-)"
     ],
     "moduleNameMapper": {
-      "\\.css$": "<rootDir>/test/__mocks__/styleMock.js",
-      "\\.svg$": "<rootDir>/test/__mocks__/svgMock.js"
+      "\\.css$": "<rootDir>/test/__mocks__/styleMock.js"
     }
   }
 }

packages/devtools-reps/postcss.config.js

@@ -0,0 +1,35 @@
+/* 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/. */
+
+const mapUrl = require("postcss-url-mapper");
+const MC_PATH = "chrome://devtools/skin/images/devtools-reps/";
+const EXPRESS_PATH = "/devtools-reps/images/";
+
+function mapUrlProduction(url, type) {
+  const newUrl = url
+    .replace("/images/open-inspector.svg", MC_PATH + "open-inspector.svg")
+    .replace("/images/jump-definition.svg", MC_PATH + "jump-definition.svg");
+
+  return newUrl;
+}
+
+function mapUrlDevelopment(url) {
+  const newUrl = url
+    .replace("/images/open-inspector.svg", EXPRESS_PATH + "open-inspector.svg")
+    .replace("/images/jump-definition.svg", EXPRESS_PATH + "jump-definition.svg");
+
+  return newUrl;
+}
+
+module.exports = ({ file, options, env }) => {
+  if (env === "production") {
+    return {
+      plugins: [mapUrl(mapUrlProduction)]
+    };
+  }
+
+  return {
+    plugins: [mapUrl(mapUrlDevelopment)]
+  };
+};

packages/devtools-reps/src/object-inspector/index.css

@@ -36,6 +36,7 @@
   color: var(--theme-comment);
 }
 
-.tree.object-inspector .arrow svg {
-  pointer-events: none;
+.object-inspector .tree-node img.arrow {
+  display: inline-block;
+  vertical-align: middle;
 }

packages/devtools-reps/src/reps/element-node.js

@@ -13,7 +13,6 @@ const {
 const {rep: StringRep} = require("./string");
 const { MODE } = require("./constants");
 const nodeConstants = require("../shared/dom-node-constants");
-const Svg = require("../shared/images/Svg");
 
 const dom = require("react-dom-factories");
 const { span } = dom;
@@ -61,9 +60,8 @@ function ElementNode(props) {
     }
 
     if (onInspectIconClick) {
-      inspectIcon = Svg("open-inspector", {
-        element: "a",
-        draggable: false,
+      inspectIcon = dom.button({
+        className: "open-inspector",
         // TODO: Localize this with "openNodeInInspector" when Bug 1317038 lands
         title: "Click to select the node in the inspector",
         onClick: (e) => onInspectIconClick(object, e)

packages/devtools-reps/src/reps/function.js

@@ -13,7 +13,6 @@ const {
   wrapRender,
  } = require("./rep-utils");
 const { MODE } = require("./constants");
-const Svg = require("../shared/images/Svg");
 
 const dom = require("react-dom-factories");
 const { span } = dom;
@@ -41,8 +40,8 @@ function FunctionRep(props) {
     grip.location.url &&
     !IGNORED_SOURCE_URLS.includes(grip.location.url)
   ) {
-    jumpToDefinitionButton = Svg("jump-definition", {
-      element: "a",
+    jumpToDefinitionButton = dom.button({
+      className: "jump-definition",
       draggable: false,
       title: "Jump to definition",
       onClick: e => {

packages/devtools-reps/src/reps/reps.css

@@ -230,35 +230,35 @@
 /******************************************************************************/
 /* Open DOMNode in inspector button */
 
-.open-inspector svg {
-  fill: var(--comment-node-color);
+button.open-inspector {
+  mask: url(/images/open-inspector.svg) no-repeat;
+  display: inline-block;
+  background-color: var(--comment-node-color);
   height: 16px;
-  width: 16px;
   margin-left: .25em;
-  cursor: pointer;
   vertical-align: middle;
 }
 
-.objectBox-node:hover .open-inspector svg,
-.objectBox-textNode:hover .open-inspector svg,
-.open-inspector svg:hover {
-  fill: var(--theme-highlight-blue);
+.objectBox-node:hover .open-inspector,
+.objectBox-textNode:hover .open-inspector,
+.open-inspector:hover {
+  background-color: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/
 /* Jump to definition button */
 
-.jump-definition svg {
-  stroke: var(--comment-node-color);
+button.jump-definition {
+  mask: url(/images/jump-definition.svg) no-repeat;
+  display: inline-block;
+  background-color: var(--comment-node-color);
   height: 16px;
-  width: 16px;
   margin-left: .25em;
-  cursor: pointer;
   vertical-align: middle;
 }
 
-.jump-definition svg:hover {
-  stroke: var(--theme-highlight-blue);
+.jump-definition:hover {
+  background-color: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/

packages/devtools-reps/src/reps/text-node.js

@@ -12,7 +12,6 @@ const {
   wrapRender,
 } = require("./rep-utils");
 const { MODE } = require("./constants");
-const Svg = require("../shared/images/Svg");
 
 const dom = require("react-dom-factories");
 const { span } = dom;
@@ -59,8 +58,8 @@ function TextNode(props) {
     }
 
     if (onInspectIconClick) {
-      inspectIcon = Svg("open-inspector", {
-        element: "a",
+      inspectIcon = dom.button({
+        className: "open-inspector",
         draggable: false,
         // TODO: Localize this with "openNodeInInspector" when Bug 1317038 lands
         title: "Click to select the node in the inspector",