DevTools: Add syntax highlighting to ChangesView

third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 Changes.ChangesView = class extends UI.VBox {
   constructor() {
     super(true);
     this.registerRequiredCSS('changes/changesView.css');
     var splitWidget = new UI.SplitWidget(true /* vertical */, false /* sidebar on left */);
     var mainWidget = new UI.Widget();
@@ skipping 114 matching lines @@
       this._editor.hideWidget();
       this._emptyWidget.showWidget();
       return;
     }
 
     var insertions = 0;
     var deletions = 0;
     var currentLineNumber = 0;
     var baselineLineNumber = 0;
     var paddingLines = 3;
+    var originalLines = [];
+    var currentLines = [];
 
     for (var i = 0; i < diff.length; ++i) {
       var token = diff[i];
       switch (token[0]) {
         case Diff.Diff.Operation.Equal:
           this._diffRows.pushAll(createEqualRows(token[1], i === 0, i === diff.length - 1));
+          originalLines.pushAll(token[1]);
+          currentLines.pushAll(token[1]);
           break;
         case Diff.Diff.Operation.Insert:
           for (var line of token[1])
             this._diffRows.push(createRow(line, Changes.ChangesView.RowType.Addition));
           insertions += token[1].length;
+          currentLines.pushAll(token[1]);
           break;
         case Diff.Diff.Operation.Delete:
           deletions += token[1].length;
+          originalLines.pushAll(token[1]);
           if (diff[i + 1] && diff[i + 1][0] === Diff.Diff.Operation.Insert) {
             i++;
             this._diffRows.pushAll(createModifyRows(token[1].join('\n'), diff[i][1].join('\n')));
             insertions += diff[i][1].length;
+            currentLines.pushAll(diff[i][1]);
           } else {
             for (var line of token[1])
               this._diffRows.push(createRow(line, Changes.ChangesView.RowType.Deletion));
           }
           break;
       }
     }
 
     this._maxLineDigits = Math.ceil(Math.log10(Math.max(currentLineNumber, baselineLineNumber)));
 
     this._diffStats.setText(Common.UIString(
         '%d insertion%s (+), %d deletion%s (-)', insertions, insertions !== 1 ? 's' : '', deletions,
         deletions !== 1 ? 's' : ''));
     this._toolbar.setEnabled(true);
     this._emptyWidget.hideWidget();
 
     this._editor.operation(() => {
       this._editor.showWidget();
-      this._editor.setHighlightMode({name: 'devtools-diff', rows: this._diffRows});
+      this._editor.setHighlightMode({
+        name: 'devtools-diff',
+        rows: this._diffRows,

[lushnikov, 2017/04/03 23:11:19]

diffRows

+        mimeType: Bindings.NetworkProject.uiSourceCodeMimeType(
+            /** @type {!Workspace.UISourceCode} */ (this._selectedUISourceCode)),
+        baselineLines: originalLines,
+        currentLines: currentLines
+      });
       this._editor.setText(this._diffRows.map(row => row.content.map(t => t.text).join('')).join('\n'));
       this._editor.setLineNumberFormatter(this._lineFormatter.bind(this));
     });
 
     /**
      * @param {!Array<string>} lines
      * @param {boolean} atStart
      * @param {boolean} atEnd
      * @return {!Array<!Changes.ChangesView.Row>}}
      */
@@ skipping 105 matching lines @@
  */
 Changes.ChangesView.Row;
 
 /** @enum {string} */
 Changes.ChangesView.RowType = {
   Deletion: 'deletion',
   Addition: 'addition',
   Equal: 'equal',
   Spacer: 'spacer'
 };