Bug 731721 - Source Editor stepping support; r=rcampbell,past

browser/devtools/debugger/DebuggerUI.jsm

@@ -578,6 +578,7 @@ DebuggerUI.prototype = {
     script.contentType = aContentType;
     elt.setUserData("sourceScript", script, null);
     dbg._updateEditorBreakpoints();
+    dbg.debuggerWindow.StackFrames.updateEditor();
   }
 };
 

browser/devtools/debugger/debugger.js

@@ -24,6 +24,7 @@
  *   Dave Camp <dcamp@mozilla.com>
  *   Panos Astithas <past@mozilla.com>
  *   Victor Porof <vporof@mozilla.com>
+ *   Mihai Sucan <mihai.sucan@gmail.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -175,6 +176,7 @@ var StackFrames = {
 
     this.activeThread = aThreadClient;
     aThreadClient.addListener("paused", this.onPaused);
+    aThreadClient.addListener("resumed", this.onResume);
     aThreadClient.addListener("framesadded", this.onFrames);
     aThreadClient.addListener("framescleared", this.onFramesCleared);
     this.onFramesCleared();
@@ -186,6 +188,7 @@ var StackFrames = {
    */
   disconnect: function TS_disconnect() {
     this.activeThread.removeListener("paused", this.onPaused);
+    this.activeThread.removeListener("resumed", this.onResume);
     this.activeThread.removeListener("framesadded", this.onFrames);
     this.activeThread.removeListener("framescleared", this.onFramesCleared);
   },
@@ -197,6 +200,13 @@ var StackFrames = {
     this.activeThread.fillFrames(this.pageSize);
   },
 
+  /**
+   * Handler for the thread client's resumed notification.
+   */
+  onResume: function SF_onResume() {
+    window.editor.setDebugLocation(-1);
+  },
+
   /**
    * Handler for the thread client's framesadded notification.
    */
@@ -265,11 +275,15 @@ var StackFrames = {
     // Move the editor's caret to the proper line.
     if (DebuggerView.Scripts.isSelected(frame.where.url) && frame.where.line) {
       window.editor.setCaretPosition(frame.where.line - 1);
+      window.editor.setDebugLocation(frame.where.line - 1);
     } else if (DebuggerView.Scripts.contains(frame.where.url)) {
       DebuggerView.Scripts.selectScript(frame.where.url);
       SourceScripts.onChange({ target: DebuggerView.Scripts._scripts });
       window.editor.setCaretPosition(frame.where.line - 1);
+    } else {
+      window.editor.setDebugLocation(-1);
     }
+
     // Display the local variables.
     let localScope = DebuggerView.Properties.localScope;
     localScope.empty();
@@ -301,6 +315,28 @@ var StackFrames = {
     }
   },
 
+  /**
+   * Update the source editor current debug location based on the selected frame
+   * and script.
+   */
+  updateEditor: function SF_updateEditor() {
+    if (this.selectedFrame === null) {
+      return;
+    }
+
+    let frame = this.activeThread.cachedFrames[this.selectedFrame];
+    if (!frame) {
+      return;
+    }
+
+    // Move the editor's caret to the proper line.
+    if (DebuggerView.Scripts.isSelected(frame.where.url) && frame.where.line) {
+      window.editor.setDebugLocation(frame.where.line - 1);
+    } else {
+      window.editor.setDebugLocation(-1);
+    }
+  },
+
   _addExpander: function SF_addExpander(aVar, aObject) {
     // No need for expansion for null and undefined values, but we do need them
     // for frame.arguments which is a regular array.
@@ -408,6 +444,7 @@ var StackFrames = {
 };
 
 StackFrames.onPaused = StackFrames.onPaused.bind(StackFrames);
+StackFrames.onResume = StackFrames.onResume.bind(StackFrames);
 StackFrames.onFrames = StackFrames.onFrames.bind(StackFrames);
 StackFrames.onFramesCleared = StackFrames.onFramesCleared.bind(StackFrames);
 StackFrames.onClick = StackFrames.onClick.bind(StackFrames);
@@ -614,6 +651,7 @@ var SourceScripts = {
     } else {
       window.editor.setText(aScript.text);
       window.updateEditorBreakpoints();
+      StackFrames.updateEditor();
     }
     window.editor.resetUndo();
   }

browser/devtools/debugger/test/Makefile.in

@@ -67,6 +67,7 @@ _BROWSER_TEST_FILES = \
 	browser_dbg_stack-02.js \
 	browser_dbg_stack-03.js \
 	browser_dbg_stack-04.js \
+	browser_dbg_stack-05.js \
 	browser_dbg_location-changes.js \
 	browser_dbg_script-switching.js \
 	browser_dbg_pause-resume.js \

browser/devtools/debugger/test/browser_dbg_script-switching.js

@@ -61,6 +61,9 @@ function testScriptsDisplay() {
       ok(gDebugger.editor.getText().search(/debugger/) != -1,
         "The correct script was loaded initially.");
 
+      is(gDebugger.editor.getDebugLocation(), 5,
+         "editor debugger location is correct.");
+
       gDebugger.editor.addEventListener(SourceEditor.EVENTS.TEXT_CHANGED,
                                         function onChange() {
         gDebugger.editor.removeEventListener(SourceEditor.EVENTS.TEXT_CHANGED,
@@ -83,6 +86,9 @@ function testSwitchPaused()
   ok(gDebugger.editor.getText().search(/firstCall/) != -1,
     "The first script is displayed.");
 
+  is(gDebugger.editor.getDebugLocation(), -1,
+     "editor debugger location has been cleared.");
+
   gDebugger.StackFrames.activeThread.resume(function() {
     gDebugger.editor.addEventListener(SourceEditor.EVENTS.TEXT_CHANGED,
                                       function onSecondChange() {
@@ -103,6 +109,9 @@ function testSwitchRunning()
   ok(gDebugger.editor.getText().search(/firstCall/) == -1,
     "The first script is no longer displayed.");
 
+  is(gDebugger.editor.getDebugLocation(), -1,
+     "editor debugger location is still -1.");
+
   closeDebuggerAndFinish(gTab);
 }
 

browser/devtools/debugger/test/browser_dbg_stack-05.js

@@ -0,0 +1,92 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Test that switching between stack frames properly sets the current debugger
+// location in the source editor.
+
+const TAB_URL = EXAMPLE_URL + "browser_dbg_script-switching.html";
+
+var gPane = null;
+var gTab = null;
+var gDebuggee = null;
+var gDebugger = null;
+
+function test() {
+  debug_tab_pane(TAB_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebuggee = aDebuggee;
+    gPane = aPane;
+    gDebugger = gPane.debuggerWindow;
+
+    testRecurse();
+  });
+}
+
+function testRecurse() {
+  gPane.activeThread.addOneTimeListener("scriptsadded", function() {
+    Services.tm.currentThread.dispatch({ run: function() {
+      let frames = gDebugger.DebuggerView.Stackframes._frames;
+      let childNodes = frames.childNodes;
+
+      is(frames.querySelectorAll(".dbg-stackframe").length, 4,
+        "Correct number of frames.");
+
+      is(childNodes.length, frames.querySelectorAll(".dbg-stackframe").length,
+        "All children should be frames.");
+
+      ok(frames.querySelector("#stackframe-0").classList.contains("selected"),
+        "First frame should be selected by default.");
+
+      ok(!frames.querySelector("#stackframe-2").classList.contains("selected"),
+        "Third frame should not be selected.");
+
+      is(gDebugger.editor.getDebugLocation(), 5,
+         "editor debugger location is correct.");
+
+      EventUtils.sendMouseEvent({ type: "click" },
+        frames.querySelector("#stackframe-2"),
+        gDebugger);
+
+      ok(!frames.querySelector("#stackframe-0").classList.contains("selected"),
+         "First frame should not be selected after click.");
+
+      ok(frames.querySelector("#stackframe-2").classList.contains("selected"),
+         "Third frame should be selected after click.");
+
+      is(gDebugger.editor.getDebugLocation(), 4,
+         "editor debugger location is correct after click.");
+
+      EventUtils.sendMouseEvent({ type: "click" },
+        frames.querySelector("#stackframe-0 .dbg-stackframe-name"),
+        gDebugger);
+
+      ok(frames.querySelector("#stackframe-0").classList.contains("selected"),
+         "First frame should be selected after click inside the first frame.");
+
+      ok(!frames.querySelector("#stackframe-2").classList.contains("selected"),
+         "Third frame should not be selected after click inside the first frame.");
+
+      is(gDebugger.editor.getDebugLocation(), 5,
+         "editor debugger location is correct (frame 0 again).");
+
+      gDebugger.StackFrames.activeThread.resume(function() {
+        is(gDebugger.editor.getDebugLocation(), -1,
+           "editor debugger location is correct after resume.");
+        closeDebuggerAndFinish(gTab);
+      });
+    }}, 0);
+  });
+
+  gDebuggee.firstCall();
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gPane = null;
+  gTab = null;
+  gDebuggee = null;
+  gDebugger = null;
+});

browser/devtools/sourceeditor/source-editor-orion.jsm

@@ -113,6 +113,7 @@ const ORION_ANNOTATION_TYPES = {
   breakpoint: "orion.annotation.breakpoint",
   task: "orion.annotation.task",
   currentLine: "orion.annotation.currentLine",
+  debugLocation: "mozilla.annotation.debugLocation",
 };
 
 /**
@@ -354,12 +355,7 @@ SourceEditor.prototype = {
         {styleClass: "ruler annotations"});
       this._annotationRuler.onClick = this._annotationRulerClick.bind(this);
       this._annotationRuler.addAnnotationType(ORION_ANNOTATION_TYPES.breakpoint);
-      this._annotationRuler.setMultiAnnotation({
-        html: "<div class='annotationHTML multiple'></div>"
-      });
-      this._annotationRuler.setMultiAnnotationOverlay({
-        html: "<div class='annotationHTML overlay'></div>"
-      });
+      this._annotationRuler.addAnnotationType(ORION_ANNOTATION_TYPES.debugLocation);
       this._view.addRuler(this._annotationRuler);
     }
 
@@ -385,6 +381,7 @@ SourceEditor.prototype = {
       this._overviewRuler.addAnnotationType(ORION_ANNOTATION_TYPES.matchingBracket);
       this._overviewRuler.addAnnotationType(ORION_ANNOTATION_TYPES.currentBracket);
       this._overviewRuler.addAnnotationType(ORION_ANNOTATION_TYPES.breakpoint);
+      this._overviewRuler.addAnnotationType(ORION_ANNOTATION_TYPES.debugLocation);
       this._overviewRuler.addAnnotationType(ORION_ANNOTATION_TYPES.task);
       this._view.addRuler(this._overviewRuler);
     }
@@ -911,6 +908,7 @@ SourceEditor.prototype = {
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.matchingBracket);
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.currentBracket);
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.task);
+    styler.addAnnotationType(ORION_ANNOTATION_TYPES.debugLocation);
 
     if (this._config.highlightCurrentLine) {
       styler.addAnnotationType(ORION_ANNOTATION_TYPES.currentLine);
@@ -1692,6 +1690,65 @@ SourceEditor.prototype = {
     return this._view.getOptions("readonly");
   },
 
+  /**
+   * Set the current debugger location at the given line index. This is useful in
+   * a debugger or in any other context where the user needs to track the
+   * current state, where a debugger-like environment is at.
+   *
+   * @param number aLineIndex
+   *        Line index of the current debugger location, starting from 0.
+   *        Use any negative number to clear the current location.
+   */
+  setDebugLocation: function SE_setDebugLocation(aLineIndex)
+  {
+    let annotations = this._getAnnotationsByType("debugLocation", 0,
+                                                 this.getCharCount());
+    if (annotations.length > 0) {
+      annotations.forEach(this._annotationModel.removeAnnotation,
+                          this._annotationModel);
+    }
+    if (aLineIndex < 0) {
+      return;
+    }
+
+    let lineStart = this._model.getLineStart(aLineIndex);
+    let lineEnd = this._model.getLineEnd(aLineIndex);
+    let lineText = this._model.getLine(aLineIndex);
+    let title = SourceEditorUI.strings.
+                formatStringFromName("annotation.debugLocation.title",
+                                     [lineText], 1);
+
+    let annotation = {
+      type: ORION_ANNOTATION_TYPES.debugLocation,
+      start: lineStart,
+      end: lineEnd,
+      title: title,
+      style: {styleClass: "annotation debugLocation"},
+      html: "<div class='annotationHTML debugLocation'></div>",
+      overviewStyle: {styleClass: "annotationOverview debugLocation"},
+      rangeStyle: {styleClass: "annotationRange debugLocation"},
+      lineStyle: {styleClass: "annotationLine debugLocation"},
+    };
+    this._annotationModel.addAnnotation(annotation);
+  },
+
+  /**
+   * Retrieve the current debugger line index configured for this editor.
+   *
+   * @return number
+   *         The line index starting from 0 where the current debugger is
+   *         paused. If no debugger location has been set -1 is returned.
+   */
+  getDebugLocation: function SE_getDebugLocation()
+  {
+    let annotations = this._getAnnotationsByType("debugLocation", 0,
+                                                 this.getCharCount());
+    if (annotations.length > 0) {
+      return this._model.getLineAtOffset(annotations[0].start);
+    }
+    return -1;
+  },
+
   /**
    * Add a breakpoint at the given line index.
    *

browser/devtools/sourceeditor/test/Makefile.in

@@ -62,6 +62,7 @@ _BROWSER_TEST_FILES = \
 		browser_bug700893_dirty_state.js \
 		browser_bug729480_line_vertical_align.js \
 		browser_bug725430_comment_uncomment.js \
+		browser_bug731721_debugger_stepping.js \
 		head.js \
 
 libs:: $(_BROWSER_TEST_FILES)

browser/devtools/sourceeditor/test/browser_bug731721_debugger_stepping.js

@@ -0,0 +1,59 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+function test() {
+
+  let temp = {};
+  Cu.import("resource:///modules/source-editor.jsm", temp);
+  let SourceEditor = temp.SourceEditor;
+
+  waitForExplicitFinish();
+
+  let editor;
+
+  const windowUrl = "data:text/xml,<?xml version='1.0'?>" +
+    "<window xmlns='http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'" +
+    " title='test for bug 731721' width='600' height='500'><hbox flex='1'/></window>";
+  const windowFeatures = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";
+
+  let testWin = Services.ww.openWindow(null, windowUrl, "_blank", windowFeatures, null);
+  testWin.addEventListener("load", function onWindowLoad() {
+    testWin.removeEventListener("load", onWindowLoad, false);
+    waitForFocus(initEditor, testWin);
+  }, false);
+
+  function initEditor()
+  {
+    let hbox = testWin.document.querySelector("hbox");
+    editor = new SourceEditor();
+    editor.init(hbox, {showAnnotationRuler: true}, editorLoaded);
+  }
+
+  function editorLoaded()
+  {
+    editor.focus();
+
+    editor.setText("line1\nline2\nline3\nline4");
+
+    is(editor.getDebugLocation(), -1, "no debugger location");
+
+    editor.setDebugLocation(1);
+    is(editor.getDebugLocation(), 1, "set debugger location works");
+
+    editor.setDebugLocation(3);
+    is(editor.getDebugLocation(), 3, "change debugger location works");
+
+    editor.setDebugLocation(-1);
+    is(editor.getDebugLocation(), -1, "clear debugger location works");
+
+    editor.destroy();
+
+    testWin.close();
+    testWin = editor = null;
+
+    waitForFocus(finish, window);
+  }
+}

browser/locales/en-US/chrome/browser/devtools/sourceeditor.properties

@@ -38,3 +38,9 @@ annotation.breakpoint.title=Breakpoint: %S
 # a tooltip displayed in any of the editor gutters when the user hovers the
 # current line.
 annotation.currentLine=Current line
+
+# LOCALIZATION NOTE  (annotation.debugLocation.title): This is the text shown in
+# a tooltip displayed in any of the editor gutters when the user hovers the
+# current debugger location. The debugger can pause the JavaScript execution at
+# user-defined lines.
+annotation.debugLocation.title=Current step: %S

browser/themes/gnomestripe/devtools/orion.css

@@ -61,6 +61,9 @@
 .annotationHTML.breakpoint {
   background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
 }
+.annotationHTML.debugLocation {
+  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
+}
 
 /* Styles for the overview ruler  */
 .annotationOverview {
@@ -77,6 +80,10 @@
   background-color: lightblue;
   border: 1px solid blue;
 }
+.annotationOverview.debugLocation {
+  background-color: white;
+  border: 1px solid green;
+}
 .annotationOverview.currentBracket {
   background-color: lightgray;
   border: 1px solid red;

browser/themes/gnomestripe/jar.mn

@@ -98,6 +98,7 @@ browser.jar:
   skin/classic/browser/devtools/orion-container.css   (devtools/orion-container.css)
   skin/classic/browser/devtools/orion-task.png        (devtools/orion-task.png)
   skin/classic/browser/devtools/orion-breakpoint.png  (devtools/orion-breakpoint.png)
+  skin/classic/browser/devtools/orion-debug-location.png (devtools/orion-debug-location.png)
   skin/classic/browser/devtools/breadcrumbs/ltr-end-pressed.png              (devtools/breadcrumbs/ltr-end-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/ltr-end-selected-pressed.png     (devtools/breadcrumbs/ltr-end-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/ltr-end-selected.png             (devtools/breadcrumbs/ltr-end-selected.png)

browser/themes/pinstripe/devtools/orion.css

@@ -61,6 +61,9 @@
 .annotationHTML.breakpoint {
   background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
 }
+.annotationHTML.debugLocation {
+  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
+}
 
 /* Styles for the overview ruler  */
 .annotationOverview {
@@ -77,6 +80,10 @@
   background-color: lightblue;
   border: 1px solid blue;
 }
+.annotationOverview.debugLocation {
+  background-color: white;
+  border: 1px solid green;
+}
 .annotationOverview.currentBracket {
   background-color: lightgray;
   border: 1px solid red;

browser/themes/pinstripe/jar.mn

@@ -134,6 +134,7 @@ browser.jar:
   skin/classic/browser/devtools/orion-container.css         (devtools/orion-container.css)
   skin/classic/browser/devtools/orion-task.png              (devtools/orion-task.png)
   skin/classic/browser/devtools/orion-breakpoint.png        (devtools/orion-breakpoint.png)
+  skin/classic/browser/devtools/orion-debug-location.png    (devtools/orion-debug-location.png)
   skin/classic/browser/devtools/toolbarbutton-close.png     (devtools/toolbarbutton-close.png)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
   skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)

browser/themes/winstripe/devtools/orion.css

@@ -61,6 +61,9 @@
 .annotationHTML.breakpoint {
   background-image: url("chrome://browser/skin/devtools/orion-breakpoint.png");
 }
+.annotationHTML.debugLocation {
+  background-image: url("chrome://browser/skin/devtools/orion-debug-location.png");
+}
 
 /* Styles for the overview ruler  */
 .annotationOverview {
@@ -77,6 +80,10 @@
   background-color: lightblue;
   border: 1px solid blue;
 }
+.annotationOverview.debugLocation {
+  background-color: white;
+  border: 1px solid green;
+}
 .annotationOverview.currentBracket {
   background-color: lightgray;
   border: 1px solid red;

browser/themes/winstripe/jar.mn

@@ -121,6 +121,7 @@ browser.jar:
         skin/classic/browser/devtools/orion-container.css           (devtools/orion-container.css)
         skin/classic/browser/devtools/orion-task.png                (devtools/orion-task.png)
         skin/classic/browser/devtools/orion-breakpoint.png          (devtools/orion-breakpoint.png)
+        skin/classic/browser/devtools/orion-debug-location.png      (devtools/orion-debug-location.png)
         skin/classic/browser/devtools/toolbarbutton-close.png       (devtools/toolbarbutton-close.png)
         skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
         skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
@@ -293,6 +294,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/orion-container.css       (devtools/orion-container.css)
         skin/classic/aero/browser/devtools/orion-task.png            (devtools/orion-task.png)
         skin/classic/aero/browser/devtools/orion-breakpoint.png      (devtools/orion-breakpoint.png)
+        skin/classic/aero/browser/devtools/orion-debug-location.png  (devtools/orion-debug-location.png)
         skin/classic/aero/browser/devtools/toolbarbutton-close.png   (devtools/toolbarbutton-close.png)
         skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)
         skin/classic/aero/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)