DevTools: SourceFrame pretty print improvements

I extracted out some improvements to inplace pretty print in
SourceFrame from my sources auto pretty print patch.

* Line numbers become blue when pretty print is active
* Selection is properly scrolled into view when pretty print is toggled

Change-Id: Ib1cf8f0a15b8495594ecf121cef8786d8cfd0f16
Reviewed-on: https://chromium-review.googlesource.com/1044878
Commit-Queue: Joel Einbinder <einbinder@chromium.org>
Reviewed-by: Dmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556318}

third_party/blink/renderer/devtools/front_end/externs.js

@@ -526,7 +526,7 @@ CodeMirror.prototype = {
   setHistory: function(histData) {},
   setLine: function(line, text) {},
   setOption: function(option, value) {},
-  setSelection: function(anchor, head) {},
+  setSelection: function(anchor, head, options) {},
   /**
    * @param {number=} primaryIndex
    * @param {?Object=} config

third_party/blink/renderer/devtools/front_end/source_frame/SourceFrame.js

@@ -110,12 +110,32 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
     this._prettyToggle.setToggled(value);
     this._prettyToggle.setEnabled(false);
 
+    const wasLoaded = this.loaded;
     const selection = this.selection();
+    let newSelection;
     if (this._pretty && this._rawContent) {
       this.setContent(await this._requestFormattedContent());
       const start = this._rawToPrettyLocation(selection.startLine, selection.startColumn);
       const end = this._rawToPrettyLocation(selection.endLine, selection.endColumn);
-      this.setSelection(new TextUtils.TextRange(start[0], start[1], end[0], end[1]));
+      newSelection = new TextUtils.TextRange(start[0], start[1], end[0], end[1]);
+    } else {
+      this.setContent(this._rawContent);
+      const start = this._prettyToRawLocation(selection.startLine, selection.startColumn);
+      const end = this._prettyToRawLocation(selection.endLine, selection.endColumn);
+      newSelection = new TextUtils.TextRange(start[0], start[1], end[0], end[1]);
+    }
+    if (wasLoaded) {
+      this.textEditor.revealPosition(newSelection.endLine, newSelection.endColumn, this._editable);
+      this.textEditor.setSelection(newSelection);
+    }
+    this._prettyToggle.setEnabled(true);
+    this._updatePrettyPrintState();
+  }
+
+  _updatePrettyPrintState() {
+    this._prettyToggle.setToggled(this._pretty);
+    this._textEditor.element.classList.toggle('pretty-printed', this._pretty);
+    if (this._pretty) {
       this._textEditor.setLineNumberFormatter(lineNumber => {
         const line = this._prettyToRawLocation(lineNumber - 1, 0)[0] + 1;
         if (lineNumber === 1)
@@ -128,12 +148,7 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
       this._textEditor.setLineNumberFormatter(lineNumber => {
         return String(lineNumber);
       });
-      this.setContent(this._rawContent);
-      const start = this._prettyToRawLocation(selection.startLine, selection.startColumn);
-      const end = this._prettyToRawLocation(selection.endLine, selection.endColumn);
-      this.setSelection(new TextUtils.TextRange(start[0], start[1], end[0], end[1]));
     }
-    this._prettyToggle.setEnabled(true);
   }
 
   /**
@@ -294,7 +309,7 @@ SourceFrame.SourceFrame = class extends UI.SimpleView {
 
   _innerSetSelectionIfNeeded() {
     if (this._selectionToSet && this.loaded && this.isShowing()) {
-      this._textEditor.setSelection(this._selectionToSet);
+      this._textEditor.setSelection(this._selectionToSet, true);
       this._selectionToSet = null;
     }
   }

third_party/blink/renderer/devtools/front_end/text_editor/CodeMirrorTextEditor.js

@@ -1163,15 +1163,16 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
   /**
    * @override
    * @param {!TextUtils.TextRange} textRange
+   * @param {boolean=} dontScroll
    */
-  setSelection(textRange) {
+  setSelection(textRange, dontScroll) {
     this._lastSelection = textRange;
     if (!this._editorSizeInSync) {
       this._selectionSetScheduled = true;
       return;
     }
     const pos = TextEditor.CodeMirrorUtils.toPos(textRange);
-    this._codeMirror.setSelection(pos.start, pos.end);
+    this._codeMirror.setSelection(pos.start, pos.end, {scroll: !dontScroll});
   }
 
   /**

third_party/blink/renderer/devtools/front_end/text_editor/cmdevtools.css

@@ -546,3 +546,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
 .CodeMirror-composing {
     border-bottom: 2px solid;
 }
+
+.pretty-printed .CodeMirror-linenumber {
+    color: var(--accent-color-b);
+}