DevTools: Add syntax highlighting to ChangesView

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

Index: third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js b/third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js
index 690f07f1fc79f3483e28a75f329f83a83e0023f8..99f99546714ca7a05fc95b7e4e82422cc3552be2 100644
--- a/third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js
+++ b/third_party/WebKit/Source/devtools/front_end/changes/ChangesView.js
@@ -132,24 +132,31 @@ Changes.ChangesView = class extends UI.VBox {
     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._rows.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._rows.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._rows.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._rows.push(createRow(line, Changes.ChangesView.RowType.Deletion));
@@ -168,7 +175,14 @@ Changes.ChangesView = class extends UI.VBox {
 
     this._editor.operation(() => {
       this._editor.showWidget();
-      this._editor.setHighlightMode({name: 'devtools-diff', rows: this._rows});
+      this._editor.setHighlightMode({
+        name: 'devtools-diff',
+        rows: this._rows,
+        mimeType: Bindings.NetworkProject.uiSourceCodeMimeType(
+            /** @type {!Workspace.UISourceCode} */ (this._selectedUISourceCode)),
+        baselineLines: originalLines,
+        currentLines: currentLines
+      });
       this._editor.setText(this._rows.map(row => row.content.map(t => t.text).join('')).join('\n'));
       this._editor.setLineNumberFormatter(this._lineFormatter.bind(this));
     });