From 00394217bb561b6e8bdf6170e60a6e52f6f95b47 Mon Sep 17 00:00:00 2001
From: David Walsh <dwalsh@mozilla.com>
Date: Fri, 5 Apr 2019 17:33:04 +0000
Subject: [PATCH] Bug 1541563 - Sync 131 - Use SVG files for breakpoints
 directly r=loganfsmyth

Differential Revision: https://phabricator.services.mozilla.com/D25990

--HG--
extra : moz-landing-system : lando
---
 .../debugger/new/images/BreakpointSvg.js      | 21 -------------------
 .../new/src/components/Editor/Breakpoint.js   |  7 +++----
 .../src/components/Editor/ColumnBreakpoint.js | 14 ++++++-------
 3 files changed, 10 insertions(+), 32 deletions(-)
 delete mode 100644 devtools/client/debugger/new/images/BreakpointSvg.js

diff --git a/devtools/client/debugger/new/images/BreakpointSvg.js b/devtools/client/debugger/new/images/BreakpointSvg.js
deleted file mode 100644
index adba0a048f8a..000000000000
--- a/devtools/client/debugger/new/images/BreakpointSvg.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/* 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/>. */
-
-import React from "react";
-
-const BREAKPOINT_SVG =
-  '<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>';
-const COLUMN_MARKER_SVG =
-  '<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>';
-
-type Props = {
-  column: boolean
-};
-
-export default function BreakpointSvg({ column }: Props) {
-  const svg = column ? COLUMN_MARKER_SVG : BREAKPOINT_SVG;
-
-  /* eslint-disable react/no-danger */
-  return <span dangerouslySetInnerHTML={{ __html: svg }} />;
-}
diff --git a/devtools/client/debugger/new/src/components/Editor/Breakpoint.js b/devtools/client/debugger/new/src/components/Editor/Breakpoint.js
index 9fd4a0461121..5fd57f62b1b6 100644
--- a/devtools/client/debugger/new/src/components/Editor/Breakpoint.js
+++ b/devtools/client/debugger/new/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/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js b/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
index 6f7227a0a513..ce709a5a609b 100644
--- a/devtools/client/debugger/new/src/components/Editor/ColumnBreakpoint.js
+++ b/devtools/client/debugger/new/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;