--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -192,20 +192,17 @@ devtools.jar:
     skin/images/command-eyedropper.png (themes/images/command-eyedropper.png)
     skin/images/command-eyedropper@2x.png (themes/images/command-eyedropper@2x.png)
     skin/images/command-rulers.png (themes/images/command-rulers.png)
     skin/images/command-rulers@2x.png (themes/images/command-rulers@2x.png)
     skin/images/command-measure.png (themes/images/command-measure.png)
     skin/images/command-measure@2x.png (themes/images/command-measure@2x.png)
     skin/markup.css (themes/markup.css)
     skin/images/editor-error.png (themes/images/editor-error.png)
-    skin/images/editor-breakpoint.png (themes/images/editor-breakpoint.png)
-    skin/images/editor-breakpoint@2x.png (themes/images/editor-breakpoint@2x.png)
-    skin/images/editor-debug-location.png (themes/images/editor-debug-location.png)
-    skin/images/editor-debug-location@2x.png (themes/images/editor-debug-location@2x.png)
+    skin/images/breakpoint.svg (themes/images/breakpoint.svg)
     skin/webconsole.css (themes/webconsole.css)
     skin/images/webconsole.svg (themes/images/webconsole.svg)
     skin/images/breadcrumbs-divider@2x.png (themes/images/breadcrumbs-divider@2x.png)
     skin/images/breadcrumbs-scrollbutton.png (themes/images/breadcrumbs-scrollbutton.png)
     skin/images/breadcrumbs-scrollbutton@2x.png (themes/images/breadcrumbs-scrollbutton@2x.png)
     skin/animationinspector.css (themes/animationinspector.css)
     skin/eyedropper.css (themes/eyedropper.css)
     skin/canvasdebugger.css (themes/canvasdebugger.css)

--- a/devtools/client/sourceeditor/codemirror/mozilla.css
+++ b/devtools/client/sourceeditor/codemirror/mozilla.css
@@ -1,22 +1,33 @@
 /* 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/. */
 
-.errors,
-.breakpoints {
+:root {
+  --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#light");
+  --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#light-hover");
+  --breakpoint-active-background: url("chrome://devtools/skin/images/breakpoint.svg#light-active");
+}
+
+.theme-dark:root {
+  --breakpoint-background: url("chrome://devtools/skin/images/breakpoint.svg#dark");
+  --breakpoint-hover-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-hover");
+  --breakpoint-active-background: url("chrome://devtools/skin/images/breakpoint.svg#dark-active");
+}
+
+.errors {
   width: 16px;
 }
 
 .hit-counts {
   width: 6px;
 }
 
-.error, .breakpoint, .debugLocation, .breakpoint-debugLocation {
+.error {
   display: inline-block;
   margin-left: 5px;
   width: 12px;
   height: 12px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
 }
@@ -32,53 +43,38 @@
   pointer-events: none;
 }
 
 .error {
   background-image: url("chrome://devtools/skin/images/editor-error.png");
   opacity: 0.75;
 }
 
-.breakpoint {
-  background-image: url("chrome://devtools/skin/images/editor-breakpoint.png");
-  position: relative;
-}
-
-@media (min-resolution: 1.1dppx) {
-  .breakpoint {
-    background-image: url("chrome://devtools/skin/images/editor-breakpoint@2x.png");
-  }
-}
-
-.breakpoint[adding] {
-  transition: transform .25s;
-}
-
-.debugLocation {
-  background-image: url("chrome://devtools/skin/images/editor-debug-location.png");
+.CodeMirror-linenumber {
+  background-size: calc(100% - 2px) 12px;
+  background-repeat: no-repeat;
+  background-position: right center;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .debugLocation {
-    background-image: url("chrome://devtools/skin/images/editor-debug-location@2x.png");
-  }
+.breakpoint .CodeMirror-linenumber,
+.debug-line .CodeMirror-linenumber {
+  padding-inline-end: 9px;
+  color: var(--theme-body-background);
 }
 
-.breakpoint.debugLocation {
-  background-image:
-    url("chrome://devtools/skin/images/editor-debug-location.png"),
-    url("chrome://devtools/skin/images/editor-breakpoint.png");
+.breakpoint .CodeMirror-linenumber {
+  background-image: var(--breakpoint-background) !important;
 }
 
-@media (min-resolution: 1.1dppx) {
-  .breakpoint.debugLocation {
-    background-image:
-      url("chrome://devtools/skin/images/editor-debug-location@2x.png"),
-      url("chrome://devtools/skin/images/editor-breakpoint@2x.png");
-  }
+.debug-line .CodeMirror-linenumber {
+  background-image: var(--breakpoint-active-background) !important;
+}
+
+.debug-line .CodeMirror-line {
+  background-color: rgba(44,187,15,.1);
 }
 
 .CodeMirror {
   cursor: text;
 }
 
 .CodeMirror-gutters {
   cursor: default;

--- a/devtools/client/sourceeditor/debugger.js
+++ b/devtools/client/sourceeditor/debugger.js
@@ -111,21 +111,20 @@ function initialize(ctx) {
  */
 function hasBreakpoint(ctx, line) {
   let { cm } = ctx;
   // In some rare occasions CodeMirror might not be properly initialized yet, so
   // return an exceptional value in that case.
   if (cm.lineInfo(line) === null) {
     return null;
   }
-  let markers = cm.lineInfo(line).gutterMarkers;
+  let markers = cm.lineInfo(line).wrapClass;
 
   return markers != null &&
-    markers.breakpoints &&
-    markers.breakpoints.classList.contains("breakpoint");
+         markers.contains("breakpoint");
 }
 
 /**
  * Adds a visual breakpoint for a specified line. Third
  * parameter 'cond' can hold any object.
  *
  * After adding a breakpoint, this function makes Editor to
  * emit a breakpointAdded event.
@@ -138,17 +137,17 @@ function addBreakpoint(ctx, line, cond) 
 
     // The line does not exist in the editor. This is harmless, the
     // architecture calling this assumes the editor will handle this
     // gracefully, and make sure breakpoints exist when they need to.
     if (!info) {
       return;
     }
 
-    ed.addMarker(line, "breakpoints", "breakpoint");
+    ed.addLineClass(line, "breakpoint");
     meta.breakpoints[line] = { condition: cond };
 
     // TODO(jwl): why is `info` null when breaking on page reload?
     info.handle.on("delete", function onDelete() {
       info.handle.off("delete", onDelete);
       meta.breakpoints[info.line] = null;
     });
 
@@ -180,43 +179,28 @@ function removeBreakpoint(ctx, line) {
     return;
   }
 
   let { ed, cm } = ctx;
   let meta = dbginfo.get(ed);
   let info = cm.lineInfo(line);
 
   meta.breakpoints[info.line] = null;
-  ed.removeMarker(info.line, "breakpoints", "breakpoint");
+  ed.removeLineClass(info.line, "breakpoint");
   ed.emit("breakpointRemoved", line);
 }
 
 function moveBreakpoint(ctx, fromLine, toLine) {
   let { ed, cm } = ctx;
 
   let fromTop = cm.cursorCoords({ line: fromLine }).top;
   let toTop = cm.cursorCoords({ line: toLine }).top;
 
   ed.removeBreakpoint(fromLine);
   ed.addBreakpoint(toLine);
-  let info = cm.lineInfo(toLine);
-  let marker = ed.getMarker(info.line, "breakpoints", "breakpoint");
-  if (marker) {
-    marker.setAttribute("adding", "");
-    marker.style.position = "relative";
-    marker.style.top = -(toTop - fromTop) + "px";
-    marker.style.transform = "translateY(" + (toTop - fromTop) + "px)";
-    marker.addEventListener("transitionend", function(e) {
-      // For some reason, we have to reset the styles after the marker
-      // is already removed, not before.
-      e.target.removeAttribute("adding");
-      e.target.style.transform = "none";
-      e.target.style.top = "0px";
-    });
-  }
 }
 
 /**
  * Returns a list of all breakpoints in the current Editor.
  */
 function getBreakpoints(ctx) {
   let { ed } = ctx;
   let meta = dbginfo.get(ed);
@@ -236,17 +220,16 @@ function getBreakpoints(ctx) {
  */
 function setDebugLocation(ctx, line) {
   let { ed } = ctx;
   let meta = dbginfo.get(ed);
 
   clearDebugLocation(ctx);
 
   meta.debugLocation = line;
-  ed.addMarker(line, "breakpoints", "debugLocation");
   ed.addLineClass(line, "debug-line");
 }
 
 /**
  * Returns a line number that corresponds to the current debug
  * location.
  */
 function getDebugLocation(ctx) {
@@ -260,17 +243,16 @@ function getDebugLocation(ctx) {
  * Clears the debug location. Clearing the debug location
  * also removes a visual anchor from the breakpoints gutter.
  */
 function clearDebugLocation(ctx) {
   let { ed } = ctx;
   let meta = dbginfo.get(ed);
 
   if (meta.debugLocation != null) {
-    ed.removeMarker(meta.debugLocation, "breakpoints", "debugLocation");
     ed.removeLineClass(meta.debugLocation, "debug-line");
     meta.debugLocation = null;
   }
 }
 
 /**
  * Starts a new search.
  */

--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -222,24 +222,16 @@ div.cm-s-mozilla span.CodeMirror-matchin
   color: white;
 }
 
 /* Highlight for a line that contains an error. */
 div.CodeMirror div.error-line {
   background: rgba(255,0,0,0.2);
 }
 
-/* Highlight for a line that represents a stack frame's location. */
-div.CodeMirror div.debug-line {
-  background: rgba(0,128,255,0.1);
-  box-shadow:
-    0 1px 0 0 rgba(0,128,255,0.4),
-    0 -1px 0 0 rgba(0,128,255,0.4);
-}
-
 /* Generic highlighted text */
 div.CodeMirror span.marked-text {
   background: rgba(255,255,0,0.2);
   border: 1px dashed rgba(192,192,0,0.6);
   -moz-margin-start: -1px;
   -moz-margin-end: -1px;
 }
 

new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/breakpoint.svg
@@ -0,0 +1,45 @@
+<!-- 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/. -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33" height="12" viewBox="0 0 33 12">
+  <defs>
+    <style>
+      use:not(:target) {
+        display: none;
+      }
+      #light {
+        fill: #46afe3;
+      }
+      #light-hover {
+        fill: #9aa6b3;
+      }
+      #light-active {
+        fill: #2cbb0f;
+      }
+      #light-conditional {
+        fill: #d97e00;
+      }
+      #dark {
+        fill: #46afe3;
+      }
+      #dark-hover {
+        fill: #3d454d;
+      }
+      #dark-active {
+        fill: #70bf53;
+      }
+      #dark-conditional {
+        fill: #d89b28;
+      }
+    </style>
+    <path id="base-path" d="M27.1,0H1C0.4,0,0,0.4,0,1v10c0,0.6,0.4,1,1,1h26.1 c0.6,0,1.2-0.3,1.5-0.7L33,6l-4.4-5.3C28.2,0.3,27.7,0,27.1,0z"/>
+  </defs>
+  <use xlink:href="#base-path" id="light"/>
+  <use xlink:href="#base-path" id="light-hover"/>
+  <use xlink:href="#base-path" id="light-active"/>
+  <use xlink:href="#base-path" id="light-conditional"/>
+  <use xlink:href="#base-path" id="dark"/>
+  <use xlink:href="#base-path" id="dark-hover"/>
+  <use xlink:href="#base-path" id="dark-active"/>
+  <use xlink:href="#base-path" id="dark-conditional"/>
+</svg>

deleted file mode 100644
index 401f26b3f05589e8b65a160ea47371085c751ed7..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index 7253aeee23f8a49de747dafc56519eafed432e4b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index d590573a8f0a1c84077c5087ec0389a23ddf55b6..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

deleted file mode 100644
index b1dd7ee0b20beab27be41386b758ed254c1cb63a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001

--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -221,24 +221,16 @@ div.cm-s-mozilla span.CodeMirror-matchin
   color: black;
 }
 
 /* Highlight for a line that contains an error. */
 div.CodeMirror div.error-line {
   background: rgba(255,0,0,0.2);
 }
 
-/* Highlight for a line that represents a stack frame's location. */
-div.CodeMirror div.debug-line {
-  background: rgba(0,128,255,0.1);
-  box-shadow:
-    0 1px 0 0 rgba(0,128,255,0.4),
-    0 -1px 0 0 rgba(0,128,255,0.4);
-}
-
 /* Generic highlighted text */
 div.CodeMirror span.marked-text {
   background: rgba(255,255,0,0.2);
   border: 1px dashed rgba(192,192,0,0.6);
   -moz-margin-start: -1px;
   -moz-margin-end: -1px;
 }