Fix copy assets for SVG (firefox-devtools#8166)

ruturajv · Mar 27, 2019 · 53de132 · 53de132
1 parent 97c008b
commit 53de132
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 56 deletions.
diff --git a/bin/copy-assets.js b/bin/copy-assets.js
@@ -126,13 +126,6 @@ function copySVGs({ projectPath, mcPath }) {
 
   const mozBuildSourcePath = path.join(mcPath, "devtools/client/debugger/new/images/sources/moz.build");
   fs.writeFileSync(mozBuildSourcePath, mozBuildSourceText, "utf-8");
-
-  console.log("[copy-assets] - Svg.js");
-  copyFile(
-    path.join(projectPath, "/images/Svg.js"),
-    path.join(mcPath, "devtools/client/debugger/new/images/Svg.js"),
-    { cwd: projectPath }
-  );
 }
 
 function copyTests({ mcPath, projectPath, mcModulePath, shouldSymLink }) {

diff --git a/images/BreakpointSvg.js b/images/BreakpointSvg.js
diff --git a/src/components/Editor/Breakpoint.js b/src/components/Editor/Breakpoint.js
@@ -4,10 +4,8 @@
 
 // @flow
 
-import React, { PureComponent } from "react";
-import ReactDOM from "react-dom";
+import { PureComponent } from "react";
 import classnames from "classnames";
-import BreakpointSvg from "../shared/BreakpointSvg";
 
 import { getDocument, toEditorLine } from "../../utils/editor";
 import { getSelectedLocation } from "../../utils/source-maps";
@@ -20,7 +18,8 @@ import type { EditorItemActions } from "./menus/editor";
 import type { Source, Breakpoint as BreakpointType } from "../../types";
 
 const breakpointSvg = document.createElement("div");
-ReactDOM.render(<BreakpointSvg column={false} />, breakpointSvg);
+breakpointSvg.innerHTML =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 15" width="60" height="15"><path d="M53.07.5H1.5c-.54 0-1 .46-1 1v12c0 .54.46 1 1 1h51.57c.58 0 1.15-.26 1.53-.7l4.7-6.3-4.7-6.3c-.38-.44-.95-.7-1.53-.7z"/></svg>';
 
 type Props = {
   breakpoint: BreakpointType,

diff --git a/src/components/Editor/ColumnBreakpoint.js b/src/components/Editor/ColumnBreakpoint.js
@@ -3,12 +3,11 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-import React, { PureComponent } from "react";
-import ReactDOM from "react-dom";
+import { PureComponent } from "react";
 import classnames from "classnames";
-import { getDocument } from "../../utils/editor";
-import BreakpointSvg from "../shared/BreakpointSvg";
 import { showMenu } from "devtools-contextmenu";
+
+import { getDocument } from "../../utils/editor";
 import { breakpointItems, createBreakpointItems } from "./menus/breakpoints";
 
 // eslint-disable-next-line max-len
@@ -27,11 +26,12 @@ type Props = {
   breakpointActions: BreakpointItemActions
 };
 
-const breakpointImg = document.createElement("button");
-ReactDOM.render(<BreakpointSvg column={true} />, breakpointImg);
+const breakpointButton = document.createElement("button");
+breakpointButton.innerHTML =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 13" width="11" height="13"><path d="M5.07.5H1.5c-.54 0-1 .46-1 1v10c0 .54.46 1 1 1h3.57c.58 0 1.15-.26 1.53-.7l3.7-5.3-3.7-5.3C6.22.76 5.65.5 5.07.5z"/></svg>';
 
 function makeBookmark({ breakpoint }, { onClick, onContextMenu }) {
-  const bp = breakpointImg.cloneNode(true);
+  const bp = breakpointButton.cloneNode(true);
 
   const isActive = breakpoint && !breakpoint.disabled;
   const isDisabled = breakpoint && breakpoint.disabled;

diff --git a/src/components/shared/BreakpointSvg.js b/src/components/shared/BreakpointSvg.js
diff --git a/src/vendors.js b/src/vendors.js
@@ -33,7 +33,6 @@ import * as reselect from "reselect";
 import classnames from "classnames";
 import devtoolsSplitter from "devtools-splitter";
 import move from "lodash-move";
-import BreakpointSvg from "./components/shared/BreakpointSvg";
 
 // We cannot directly export literals containing special characters
 // (eg. "my-module/Test") which is why they are nested in "vendored".
@@ -52,8 +51,5 @@ export const vendored = {
   "lodash-move": move,
   "react-aria-components/src/tabs": reactAriaComponentsTabs,
   "react-transition-group/Transition": transition,
-  reselect,
-  // Svg is required via relative paths, so the key is not imported path.
-  // See .babel/transform-mc.js
-  BreakpointSvg
+  reselect
 };