[DevTools] Make line highlight stay in readonly editor.

With no cursor in readonly editor, highlight disappears very fast and
it's impossible to say where it was.

BUG=670417

Review-Url: https://codereview.chromium.org/2574443003
Cr-Commit-Position: refs/heads/master@{#437938}

third_party/WebKit/Source/devtools/front_end/text_editor/CodeMirrorTextEditor.js

@@ -172,6 +172,8 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
 
     this._needsRefresh = true;
 
+    this._readOnly = false;
+
     this._mimeType = '';
     if (options.mimeType)
       this.setMimeType(options.mimeType);
@@ -711,6 +713,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
    * @param {boolean} readOnly
    */
   setReadOnly(readOnly) {
+    if (this._readOnly === readOnly)
+      return;
+    this.clearPositionHighlight();
+    this._readOnly = readOnly;
     this.element.classList.toggle('CodeMirror-readonly', readOnly);
     this._codeMirror.setOption('readOnly', readOnly);
   }
@@ -903,8 +909,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
       return;
     this.scrollLineIntoView(lineNumber);
     if (shouldHighlight) {
-      this._codeMirror.addLineClass(this._highlightedLine, null, 'cm-highlight');
-      this._clearHighlightTimeout = setTimeout(this.clearPositionHighlight.bind(this), 2000);
+      this._codeMirror.addLineClass(
+          this._highlightedLine, null, this._readOnly ? 'cm-readonly-highlight' : 'cm-highlight');
+      if (!this._readOnly)
+        this._clearHighlightTimeout = setTimeout(this.clearPositionHighlight.bind(this), 2000);
     }
     this.setSelection(Common.TextRange.createFromLocation(lineNumber, columnNumber));
   }
@@ -914,8 +922,10 @@ TextEditor.CodeMirrorTextEditor = class extends UI.VBox {
       clearTimeout(this._clearHighlightTimeout);
     delete this._clearHighlightTimeout;
 
-    if (this._highlightedLine)
-      this._codeMirror.removeLineClass(this._highlightedLine, null, 'cm-highlight');
+    if (this._highlightedLine) {
+      this._codeMirror.removeLineClass(
+          this._highlightedLine, null, this._readOnly ? 'cm-readonly-highlight' : 'cm-highlight');
+    }
     delete this._highlightedLine;
   }
 

third_party/WebKit/Source/devtools/front_end/text_editor/cmdevtools.css

@@ -70,6 +70,14 @@
     to { background-color: transparent; }
 }
 
+.cm-readonly-highlight {
+    background-color: rgb(255, 255, 120);
+}
+
+.-theme-with-dark-background .cm-readonly-highlight {
+    background-color: hsla(133, 100%, 30%, 0.5);
+}
+
 .cm-highlight.cm-execution-line {
     -webkit-animation: fadeout-execution-line 1s 0s;
 }
@@ -378,11 +386,11 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
     top: -9px;
 }
 
-.CodeMirror .text-editor-line-with-warning:not(.cm-execution-line) {
+.CodeMirror .text-editor-line-with-warning:not(.cm-execution-line):not(.cm-readonly-highlight) {
     background-color: rgba(241, 230, 0, 0.1);
 }
 
-.CodeMirror .text-editor-line-with-error:not(.cm-execution-line) {
+.CodeMirror .text-editor-line-with-error:not(.cm-execution-line):not(.cm-readonly-highlight) {
     background-color: rgba(255, 0, 0, 0.05);
 }