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.setText(this._diffRows.map(row => row.content.map(t => t.text).join('')).join('\n'));
+      this._editor.setHighlightMode({
+        name: 'devtools-diff',
+        diffRows: this._diffRows,
+        mimeType: Bindings.NetworkProject.uiSourceCodeMimeType(
+            /** @type {!Workspace.UISourceCode} */ (this._selectedUISourceCode)),
+        baselineLines: originalLines,
+        currentLines: currentLines
+      });
+      this._editor.setText(this._diffRows.map(row => row.tokens.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>}}
      */
     function createEqualRows(lines, atStart, atEnd) {
@@ skipping 40 matching lines @@
         var className = type === Diff.Diff.Operation.Equal ? '' : 'inner-diff';
         var lines = text.split('\n');
         for (var i = 0; i < lines.length; i++) {
           if (i > 0 && type !== Diff.Diff.Operation.Insert)
             deletionRows.push(createRow('', Changes.ChangesView.RowType.Deletion));
           if (i > 0 && type !== Diff.Diff.Operation.Delete)
             insertionRows.push(createRow('', Changes.ChangesView.RowType.Addition));
           if (!lines[i])
             continue;
           if (type !== Diff.Diff.Operation.Insert)
-            deletionRows[deletionRows.length - 1].content.push({text: lines[i], className});
+            deletionRows[deletionRows.length - 1].tokens.push({text: lines[i], className});
           if (type !== Diff.Diff.Operation.Delete)
-            insertionRows[insertionRows.length - 1].content.push({text: lines[i], className});
+            insertionRows[insertionRows.length - 1].tokens.push({text: lines[i], className});
         }
       }
       return deletionRows.concat(insertionRows);
     }
 
     /**
      * @param {string} text
      * @param {!Changes.ChangesView.RowType} type
      * @return {!Changes.ChangesView.Row}
      */
     function createRow(text, type) {
       if (type === Changes.ChangesView.RowType.Addition)
         currentLineNumber++;
       if (type === Changes.ChangesView.RowType.Deletion)
         baselineLineNumber++;
       if (type === Changes.ChangesView.RowType.Equal) {
         baselineLineNumber++;
         currentLineNumber++;
       }
 
-      return {baselineLineNumber, currentLineNumber, content: text ? [{text, className: 'inner-diff'}] : [], type};
+      return {baselineLineNumber, currentLineNumber, tokens: text ? [{text, className: 'inner-diff'}] : [], type};
     }
   }
 
   /**
    * @param {number} lineNumber
    * @return {string}
    */
   _lineFormatter(lineNumber) {
     var row = this._diffRows[lineNumber - 1];
     var showBaseNumber = row.type === Changes.ChangesView.RowType.Deletion;
     var showCurrentNumber = row.type === Changes.ChangesView.RowType.Addition;
     if (row.type === Changes.ChangesView.RowType.Equal) {
       showBaseNumber = true;
       showCurrentNumber = true;
     }
     var base = showBaseNumber ? numberToStringWithSpacesPadding(row.baselineLineNumber, this._maxLineDigits) :
                                 spacesPadding(this._maxLineDigits);
     var current = showCurrentNumber ? numberToStringWithSpacesPadding(row.currentLineNumber, this._maxLineDigits) :
                                       spacesPadding(this._maxLineDigits);
     return base + spacesPadding(1) + current;
   }
 };
 
 /**
  * @typedef {!{
  *  baselineLineNumber: number,
  *  currentLineNumber: number,
- *  content: !Array<!{text: string, className: string}>,
+ *  tokens: !Array<!{text: string, className: string}>,
  *  type: !Changes.ChangesView.RowType
  * }}
  */
 Changes.ChangesView.Row;
 
 /** @enum {string} */
 Changes.ChangesView.RowType = {
   Deletion: 'deletion',
   Addition: 'addition',
   Equal: 'equal',
   Spacer: 'spacer'
 };