firefox-devtools · jasonLaster · Oct 13, 2017 · Oct 12, 2017 · Oct 12, 2017 · Oct 12, 2017
diff --git a/assets/images/Svg.js b/assets/images/Svg.js
@@ -45,8 +45,8 @@ const svg = {
   togglePanes: require("./toggle-panes.svg"),
   "whole-word-match": require("./whole-word-match.svg"),
   worker: require("./worker.svg"),
-  "sad-face": require("./sad-face.svg"),
-  refresh: require("./refresh.svg"),
+  "sad-face": require("devtools-mc-assets/assets/devtools/client/themes/images/sad-face.svg"),
+  refresh: require("devtools-mc-assets/assets/devtools/client/themes/images/reload.svg"),
   webpack: require("./webpack.svg"),
   node: require("./node.svg"),
   express: require("./express.svg"),

diff --git a/assets/images/refresh.svg b/assets/images/refresh.svg
diff --git a/assets/images/sad-face.svg b/assets/images/sad-face.svg
diff --git a/assets/module-manifest.json b/assets/module-manifest.json
diff --git a/assets/panel/debugger.properties b/assets/panel/debugger.properties
@@ -646,7 +646,7 @@ functionSearchSeparatorLabel=←
 # LOCALIZATION NOTE(gotoLineModal.placeholder): The placeholder
 # text displayed when the user searches for specific lines in a file
 gotoLineModal.placeholder=Go to line…
-gotoLineModal.commandKey=CmdOrCtrl+Shift+;
+gotoLineModal.key=CmdOrCtrl+Shift+;
 
 # LOCALIZATION NOTE(symbolSearch.search.functionsPlaceholder): The placeholder
 # text displayed when the user searches for functions in a file

diff --git a/bin/copy-assets.js b/bin/copy-assets.js
@@ -5,6 +5,7 @@ const path = require("path");
 const minimist = require("minimist");
 var fs = require("fs");
 var fsExtra = require("fs-extra");
+const rimraf = require("rimraf");
 
 const feature = require("devtools-config");
 const getConfig = require("./getConfig");
@@ -27,6 +28,95 @@ function updateFile(filename, cbk) {
   fs.writeFileSync(filename, cbk(text), "utf-8");
 }
 
+function searchText(text, regexp) {
+  let matches = [];
+  let match;
+  do {
+    match = regexp.exec(text);
+    if (match) {
+      matches.push(match[1]);
+    }
+  } while (match);
+
+  return matches;
+}
+
+const walkSync = (dir, filelist = []) => {
+  fs.readdirSync(dir).forEach(file => {
+    filelist = fs.statSync(path.join(dir, file)).isDirectory()
+      ? walkSync(path.join(dir, file), filelist)
+      : filelist.concat(path.join(dir, file));
+  });
+
+  return filelist;
+};
+
+function copySVGs({ projectPath, mcPath }) {
+  /*
+   * Copying SVGs
+   * We want to copy the SVGs that we include in our CSS into the
+   * MC devtools/client/themes directory. To do this, we look for the
+   * SVGs that are inlcuded in our CSS files and then copy the files
+   * and include them in the jar.mn file
+   */
+
+  const projectImagesPath = path.join(projectPath, "assets/images/");
+  const mcImagesPath = path.join(
+    mcPath,
+    "devtools/client/themes/images/debugger"
+  );
+
+  let usedSvgs = [];
+  const svgTest = new RegExp(/url\(\/images\/(.*)\);/, "g");
+  const cssFiles = walkSync(path.join(projectPath, "src/components"))
+    .filter(file => file.match(/css$/))
+    .forEach(file =>
+      usedSvgs.push(...searchText(fs.readFileSync(file, "utf-8"), svgTest))
+    );
+
+  const files = fs
+    .readdirSync(projectImagesPath)
+    .filter(file => file.match(/svg$/))
+    .filter(file => usedSvgs.includes(file));
+
+  rimraf.sync(mcImagesPath);
+  files.forEach(file =>
+    fsExtra.copySync(
+      path.join(projectImagesPath, file),
+      path.join(mcImagesPath, `${file}`)
+    )
+  );
+
+  const newText =
+    files
+      .map(
+        file =>
+          `    skin/images/debugger/${file} (themes/images/debugger/${file})`
+      )
+      .join("\n") + "\n";
+
+  const mcJarPath = path.join(mcPath, "devtools/client/jar.mn");
+  updateFile(mcJarPath, text => {
+    const newJar = text.replace(
+      /(.*skin\/images\/debugger\/.*$\n)+/gm,
+      newText
+    );
+    return newJar;
+  });
+}
+
+function copyTests({ mcPath, projectPath, mcModulePath, shouldSymLink }) {
+  const projectTestPath = path.join(projectPath, "src/test/mochitest");
+  const mcTestPath = path.join(mcPath, mcModulePath, "test/mochitest");
+  if (shouldSymLink) {
+    symlinkTests({ projectPath, mcTestPath, projectTestPath });
+  } else {
+    // we should rm the test dir first
+    rimraf.sync(mcTestPath);
+    copyFile(projectTestPath, mcTestPath, { cwd: projectPath });
+  }
+}
+
 function start() {
   console.log("start: copy assets");
   const projectPath = path.resolve(__dirname, "..");
@@ -39,6 +129,8 @@ function start() {
   // it will override whatever is in projectPath.
   mcPath = path.resolve(projectPath, mcPath);
 
+  const config = { shouldSymLink, mcPath, projectPath, mcModulePath };
+
   copyFile(
     path.join(projectPath, "./assets/panel/debugger.properties"),
     path.join(mcPath, "devtools/client/locales/en-US/debugger.properties"),
@@ -69,41 +161,8 @@ function start() {
     { cwd: projectPath }
   );
 
-  const projectTestPath = path.join(projectPath, "src/test/mochitest");
-  const mcTestPath = path.join(mcPath, mcModulePath, "test/mochitest");
-  if (shouldSymLink) {
-    symlinkTests({ projectPath, mcTestPath, projectTestPath });
-  } else {
-    // we should rm the test dir first
-    copyFile(projectTestPath, mcTestPath, { cwd: projectPath });
-  }
-
-  const projectImagesPath = path.join(projectPath, "assets/images/");
-  const mcImagesPath = path.join(mcPath, "devtools/client/themes/images/debugger");
-
-  const files = fs.readdirSync(projectImagesPath)
-    .filter(file => file.match(/svg$/))
-
-  files
-    .forEach(file =>
-        fsExtra.copySync(
-          path.join(projectImagesPath, file),
-          path.join(mcImagesPath, `${file}`)
-        )
-      )
-
-
-  const newText = files
-    .map(file => `    skin/images/debugger/${file} (themes/images/debugger/${file})`)
-    .join("\n") + '\n'
-
-  const mcJarPath = path.join(mcPath, "devtools/client/jar.mn");
-  updateFile(mcJarPath, text => {
-    const newJar = text.replace(/(.*skin\/images\/debugger\/.*$\n)+/mg, newText)
-    return newJar;
-  });
-
-
+  copySVGs(config);
+  copyTests(config);
   writeReadme(path.join(mcPath, "devtools/client/debugger/new/README.mozilla"));
 
   makeBundle({

diff --git a/src/components/App.js b/src/components/App.js
@@ -109,7 +109,7 @@ class App extends Component {
     );
 
     shortcuts.on(
-      L10N.getStr("gotoLineModal.commandKey"),
+      L10N.getStr("gotoLineModal.key"),
       this.toggleGoToLineModal
     );