Bug 717219 - Source Editor should highlight the current line in HTML documents; r=rcampbell

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

@@ -93,6 +93,7 @@ const ORION_ANNOTATION_TYPES = {
   matchingBracket: "orion.annotation.matchingBracket",
   breakpoint: "orion.annotation.breakpoint",
   task: "orion.annotation.task",
+  currentLine: "orion.annotation.currentLine",
 };
 
 /**
@@ -155,6 +156,7 @@ SourceEditor.prototype = {
   _annotationStyler: null,
   _annotationModel: null,
   _dragAndDrop: null,
+  _currentLineAnnotation: null,
   _mode: null,
   _expandTab: null,
   _tabSize: null,
@@ -267,7 +269,7 @@ SourceEditor.prototype = {
     }.bind(this);
 
     this._view.addEventListener("Load", onOrionLoad);
-    if (Services.appinfo.OS == "Linux") {
+    if (config.highlightCurrentLine || Services.appinfo.OS == "Linux") {
       this._view.addEventListener("Selection", this._onOrionSelection);
     }
 
@@ -548,8 +550,9 @@ SourceEditor.prototype = {
   },
 
   /**
-   * Orion Selection event handler for the X Window System users. This allows
+   * The Orion Selection event handler. The current caret line is
-   * one to select text and have it copied into the X11 PRIMARY.
+   * highlighted and for Linux users the selected text is copied into the X11
+   * PRIMARY buffer.
    *
    * @private
    * @param object aEvent
@@ -557,13 +560,63 @@ SourceEditor.prototype = {
    */
   _onOrionSelection: function SE__onOrionSelection(aEvent)
   {
-    let text = this.getText(aEvent.newValue.start, aEvent.newValue.end);
+    if (this._config.highlightCurrentLine) {
-    if (!text) {
+      this._highlightCurrentLine(aEvent);
+    }
+
+    if (Services.appinfo.OS == "Linux") {
+      let text = this.getText(aEvent.newValue.start, aEvent.newValue.end);
+      if (!text) {
+        return;
+      }
+
+      clipboardHelper.copyStringToClipboard(text,
+                                            Ci.nsIClipboard.kSelectionClipboard);
+    }
+  },
+
+  /**
+   * Highlight the current line using the Orion annotation model.
+   *
+   * @private
+   * @param object aEvent
+   *        The Selection event object.
+   */
+  _highlightCurrentLine: function SE__highlightCurrentLine(aEvent)
+  {
+    let annotationModel = this._annotationModel;
+    let model = this._model;
+    let oldAnnotation = this._currentLineAnnotation;
+    let newSelection = aEvent.newValue;
+
+    let collapsed = newSelection.start == newSelection.end;
+    if (!collapsed) {
+      if (oldAnnotation) {
+        annotationModel.removeAnnotation(oldAnnotation);
+        this._currentLineAnnotation = null;
+      }
       return;
     }
 
-    clipboardHelper.copyStringToClipboard(text,
+    let line = model.getLineAtOffset(newSelection.start);
-                                          Ci.nsIClipboard.kSelectionClipboard);
+    let lineStart = model.getLineStart(line);
+    let lineEnd = model.getLineEnd(line);
+
+    let title = oldAnnotation ? oldAnnotation.title :
+                SourceEditorUI.strings.GetStringFromName("annotation.currentLine");
+
+    this._currentLineAnnotation = {
+      start: lineStart,
+      end: lineEnd,
+      type: ORION_ANNOTATION_TYPES.currentLine,
+      title: title,
+      html: "<div class='annotationHTML currentLine'></div>",
+      overviewStyle: {styleClass: "annotationOverview currentLine"},
+      lineStyle: {styleClass: "annotationLine currentLine"},
+    };
+
+    annotationModel.replaceAnnotations(oldAnnotation ? [oldAnnotation] : null,
+                                       [this._currentLineAnnotation]);
   },
 
   /**
@@ -587,6 +640,10 @@ SourceEditor.prototype = {
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.matchingBracket);
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.currentBracket);
     styler.addAnnotationType(ORION_ANNOTATION_TYPES.task);
+
+    if (this._config.highlightCurrentLine) {
+      styler.addAnnotationType(ORION_ANNOTATION_TYPES.currentLine);
+    }
   },
 
   /**
@@ -1032,7 +1089,6 @@ SourceEditor.prototype = {
 
         this._styler = new TextStyler(this._view, aMode, this._annotationModel);
         this._styler.setFoldingEnabled(false);
-        this._styler.setHighlightCaretLine(true);
         break;
 
       case SourceEditor.MODES.HTML:
@@ -1187,7 +1243,7 @@ SourceEditor.prototype = {
    */
   destroy: function SE_destroy()
   {
-    if (Services.appinfo.OS == "Linux") {
+    if (this._config.highlightCurrentLine || Services.appinfo.OS == "Linux") {
       this._view.removeEventListener("Selection", this._onOrionSelection);
     }
     this._onOrionSelection = null;
@@ -1208,6 +1264,7 @@ SourceEditor.prototype = {
     this._dragAndDrop = null;
     this._annotationModel = null;
     this._annotationStyler = null;
+    this._currentLineAnnotation = null;
     this._eventTarget = null;
     this._eventListenersQueue = null;
     this._view = null;

browser/devtools/sourceeditor/source-editor.jsm

@@ -180,6 +180,12 @@ SourceEditor.DEFAULTS = {
    */
   showOverviewRuler: false,
 
+  /**
+   * Highlight the current line.
+   * @type boolean
+   */
+  highlightCurrentLine: true,
+
   /**
    * An array of objects that allows you to define custom editor keyboard
    * bindings. Each object can have:

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

@@ -33,3 +33,8 @@ gotoLineCmd.promptMessage=Jump to line number:
 # front of any breakpoint annotation when it is displayed as a tooltip in one of
 # the editor gutters. This feature is used in the JavaScript Debugger.
 annotation.breakpoint.title=Breakpoint: %S
+
+# LOCALIZATION NOTE  (annotation.currentLine): This is the text shown in
+# a tooltip displayed in any of the editor gutters when the user hovers the
+# current line.
+annotation.currentLine=Current line

browser/themes/gnomestripe/devtools/orion.css

@@ -146,11 +146,13 @@
   background-position: left center;
 }
 
-.line_caret { /* Current line */
+.line_caret,
+.annotationLine.currentLine { /* Current line */
   background: #dae2ee; /* lighter than the background */
 }
 
-.readonly .line_caret {
+.readonly .line_caret,
+.readonly .annotationLine.currentLine {
   background: #cddae5; /* a bit darker than the background */
 }
 

browser/themes/pinstripe/devtools/orion.css

@@ -146,11 +146,13 @@
   background-position: left center;
 }
 
-.line_caret { /* Current line */
+.line_caret,
+.annotationLine.currentLine { /* Current line */
   background: #dae2ee; /* lighter than the background */
 }
 
-.readonly .line_caret {
+.readonly .line_caret,
+.readonly .annotationLine.currentLine {
   background: #cddae5; /* a bit darker than the background */
 }
 

browser/themes/winstripe/devtools/orion.css

@@ -146,11 +146,13 @@
   background-position: left center;
 }
 
-.line_caret { /* Current line */
+.line_caret,
+.annotationLine.currentLine { /* Current line */
   background: #dae2ee; /* lighter than the background */
 }
 
-.readonly .line_caret {
+.readonly .line_caret,
+.readonly .annotationLine.currentLine {
   background: #cddae5; /* a bit darker than the background */
 }