Bug 799077 - slide the breakpoint with a CSS transition when the server moves it r=past

browser/devtools/debugger/debugger-controller.js

@@ -1751,12 +1751,14 @@ Breakpoints.prototype = {
     // Initialize the breakpoint, but don't update the editor, since this
     // callback is invoked because a breakpoint was added in the editor itself.
     this.addBreakpoint(location, { noEditorUpdate: true }).then(aBreakpointClient => {
-      // If the breakpoint client has an "requestedLocation" attached, then
+      // If the breakpoint client has a "requestedLocation" attached, then
       // the original requested placement for the breakpoint wasn't accepted.
       // In this case, we need to update the editor with the new location.
       if (aBreakpointClient.requestedLocation) {
-        DebuggerView.editor.removeBreakpoint(aBreakpointClient.requestedLocation.line - 1);
-        DebuggerView.editor.addBreakpoint(aBreakpointClient.location.line - 1);
+        DebuggerView.editor.moveBreakpoint(
+          aBreakpointClient.requestedLocation.line - 1,
+          aBreakpointClient.location.line - 1
+        );
       }
       // Notify that we've shown a breakpoint in the source editor.
       window.emit(EVENTS.BREAKPOINT_SHOWN);

browser/devtools/sourceeditor/codemirror/mozilla.css

@@ -24,6 +24,11 @@
 
 .breakpoint {
   background-image: url("chrome://browser/skin/devtools/editor-breakpoint.png");
+  position: relative;
+}
+
+.breakpoint[adding] {
+  transition: transform .25s;
 }
 
 .debugLocation {

browser/devtools/sourceeditor/debugger.js

@@ -153,6 +153,29 @@ function removeBreakpoint(ctx, line) {
   ed.emit("breakpointRemoved", line);
 }
 
+function moveBreakpoint(ctx, fromLine, toLine) {
+  let { ed, cm } = ctx;
+  let info = cm.lineInfo(fromLine);
+
+  var fromTop = cm.cursorCoords({ line: fromLine }).top;
+  var toTop = cm.cursorCoords({ line: toLine }).top;
+
+  var marker = ed.getMarker(info.line, "breakpoints", "breakpoint");
+  if (marker) {
+    marker.setAttribute("adding", "");
+    marker.style.transform = "translateY(" + (toTop - fromTop) + "px)";
+    marker.addEventListener('transitionend', function(e) {
+      ed.removeBreakpoint(info.line);
+      ed.addBreakpoint(toLine);
+
+      // 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";
+    });
+  }
+}
+
 /**
  * Returns a list of all breakpoints in the current Editor.
  */
@@ -236,6 +259,6 @@ function findPrev(ctx, query) {
 
 [
   initialize, hasBreakpoint, addBreakpoint, removeBreakpoint,
-  getBreakpoints, setDebugLocation, getDebugLocation,
+  moveBreakpoint, getBreakpoints, setDebugLocation, getDebugLocation,
   clearDebugLocation, find, findNext, findPrev
 ].forEach(function (func) { module.exports[func.name] = func; });

browser/devtools/sourceeditor/editor.js

@@ -509,16 +509,7 @@ Editor.prototype = {
    * Returns whether a marker of a specified class exists in a line's gutter.
    */
   hasMarker: function (line, gutterName, markerClass) {
-    let cm = editors.get(this);
-    let info = cm.lineInfo(line);
-    if (!info)
-      return false;
-
-    let gutterMarkers = info.gutterMarkers;
-    if (!gutterMarkers)
-      return false;
-
-    let marker = gutterMarkers[gutterName];
+    let marker = this.getMarker(line, gutterName);
     if (!marker)
       return false;
 
@@ -561,6 +552,19 @@ Editor.prototype = {
     cm.lineInfo(line).gutterMarkers[gutterName].classList.remove(markerClass);
   },
 
+  getMarker: function(line, gutterName) {
+    let cm = editors.get(this);
+    let info = cm.lineInfo(line);
+    if (!info)
+      return null;
+
+    let gutterMarkers = info.gutterMarkers;
+    if (!gutterMarkers)
+      return null;
+
+    return gutterMarkers[gutterName];
+  },
+
   /**
    * Remove all gutter markers in the gutter with the given name.
    */