DevTools: Changes Drawer

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.
+
+/**
+ * @unrestricted
+ * @implements {UI.ListDelegate}
+ */
+Changes.ChangesView = class extends UI.VBox {
+  constructor() {
+    super();
+    Changes.ChangesView.SharedInstance = this;
+    this.registerRequiredCSS('changes/changesView.css');
+    var splitWidget = new UI.SplitWidget(true, false);
+    var mainWidget = new UI.Widget();
+    splitWidget.setMainWidget(mainWidget);
+
+    /** @type {?Workspace.UISourceCode} */
+    this._uiSourceCode = null;
+
+    /** @type {!Array<!Changes.ChangesView.Row>} */
+    this._rows = [];
+
+    this._maxLineDigits = 1;
+
+
+    var code = mainWidget.element.createChild('div', 'code');
+    this._editor = new TextEditor.CodeMirrorTextEditor(
+        {lineNumbers: true, lineWrapping: false, mimeType: 'devtools-diff', maxHighlightLength: Infinity});
+    this._editor.setReadOnly(true);
+    this._editor.show(code);
+    this._editor.setLineNumberFormatter(() => '');
+
+    this._toolbar = new UI.Toolbar('changes-toolbar', mainWidget.element);
+    var revertButton = new UI.ToolbarButton(Common.UIString('Revert all changes'), 'largeicon-undo');
+    revertButton.addEventListener(UI.ToolbarButton.Events.Click, this._revert.bind(this));
+    this._toolbar.appendToolbarItem(revertButton);
+    this._diffStats = new UI.ToolbarText('');
+    this._toolbar.appendToolbarItem(this._diffStats);
+    this._toolbar.setEnabled(false);
+
+    this._navigator = new Changes.ChangesNavigator();
+    splitWidget.setSidebarWidget(this._navigator);
+    splitWidget.show(this.element);
+
+    Workspace.workspace.addEventListener(
+        Workspace.Workspace.Events.WorkingCopyCommittedByUser, this._refreshUISourceCode, this);
+    Workspace.workspace.addEventListener(
+        Workspace.Workspace.Events.WorkingCopyChanged, this._refreshUISourceCode, this);
+  }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  static showChanges(uiSourceCode) {
+    UI.viewManager.showView('changes.changes');
+    var changesView =
+        /** @type {!Changes.ChangesView} */ (self.runtime.sharedInstance(Changes.ChangesView));
+    this._navigator.revealUISourceCode(uiSourceCode, true);
+    changesView._revealUISourceCode(uiSourceCode);
+  }
+
+  _revert() {
+    var uiSourceCode = this._uiSourceCode;
+    if (!uiSourceCode)
+      return;
+    uiSourceCode.requestOriginalContent().then(original => uiSourceCode.addRevision(original || ''));
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _refreshUISourceCode(event) {
+    var uiSourceCode = /** @type !Workspace.UISourceCode */ (event.data.uiSourceCode);
+    this._navigator.refreshUISourceCode(uiSourceCode);
+    if (uiSourceCode === this._uiSourceCode)
+      this._revealUISourceCode(uiSourceCode);
+  }
+
+  /**
+   * @param {?Workspace.UISourceCode} uiSourceCode
+   */
+  _revealUISourceCode(uiSourceCode) {
+    var scrollTop = 0;
+    if (this._uiSourceCode === uiSourceCode) {
+      scrollTop = this._editor.element.scrollTop;
+    } else {
+      this._diffStats.setText('Loading..');
+      this._editor.setText('');
+    }
+
+    this._uiSourceCode = uiSourceCode;
+    this._toolbar.setEnabled(!!uiSourceCode);
+
+    if (!uiSourceCode) {
+      this._rows = [];
+      this._diffStats.setText('');
+      this._editor.setText('');
+      return;
+    }
+    uiSourceCode.requestOriginalContent().then(originalContent => {
+      if (this._uiSourceCode !== uiSourceCode)
+        return;
+      this._rows = [];

[lushnikov, 2017/02/14 00:05:11]

this is scary to follow

+      var lineSeparator = (originalContent || '').indexOf('\r\n') >= 0 ? '\r\n' : '\n';
+      var originalLines = (originalContent || '').split(lineSeparator);
+      var currentLines = uiSourceCode.workingCopy().split(lineSeparator);
+
+      var insertions = 0;
+      var deletions = 0;
+      this._maxLineDigits = Math.ceil(Math.log10(Math.max(originalLines.length, currentLines.length)));
+
+      /**
+       * @param {number} numbers
+       * @param {string} text
+       * @param {string} className
+       * @return {!Changes.ChangesView.Row}
+       */
+      var createRow = (numbers, text, className) => {
+        if (className === 'addition')
+          insertions++;
+        if (className === 'deletion')
+          deletions++;
+        return {
+          base: numbers & 1 ? baselineLineNumber : 0,
+          current: numbers & 2 ? currentLineNumber : 0,
+          content: text ? [{text: text, className: 'double'}] : [],
+          className: className,
+          loc: currentLineNumber
+        };
+      };
+
+      var diff = Diff.Diff.lineDiff(originalLines, currentLines);
+      var currentLineNumber = 0;
+      var baselineLineNumber = 0;
+      var paddingLines = 3;
+
+      for (var i = 0; i < diff.length; ++i) {
+        var token = diff[i];
+        if (token[0] === Diff.Diff.Operation.Insert && diff[i - 1] && diff[i - 1][0] === Diff.Diff.Operation.Delete)

[lushnikov, 2017/02/14 00:05:10]

it feels like this all is already written in sourcecodediff

+          continue;
+        if (token[0] === Diff.Diff.Operation.Equal) {
+          if (i > 0) {
+            for (var j = 0; j < paddingLines && j < token[1].length; j++) {
+              baselineLineNumber++;
+              currentLineNumber++;
+              this._rows.push(createRow(3, token[1][j], 'equal'));
+            }
+            if (token[1].length > paddingLines * 2 + 1 && i < diff.length - 1) {
+              this._rows.push(createRow(
+                  0, Common.UIString('( \u2026 Skipping ') + (token[1].length - paddingLines * 2) +
+                      Common.UIString(' matching lines \u2026 )'),
+                  'spacer'));
+            }
+          }
+          if (i < diff.length - 1) {
+            var start = Math.max(token[1].length - paddingLines - 1, i > 0 ? paddingLines : 0);
+            baselineLineNumber += start - Math.min(i > 0 ? paddingLines : 0, token[1].length);
+            currentLineNumber += start - Math.min(i > 0 ? paddingLines : 0, token[1].length);
+            for (var j = start; j < token[1].length; j++) {
+              baselineLineNumber++;
+              currentLineNumber++;
+              this._rows.push(createRow(3, token[1][j], 'equal'));
+            }
+          }
+          continue;
+        }
+        var deletion = token[0] === Diff.Diff.Operation.Delete;
+        if (deletion && diff[i + 1] && diff[i + 1][0] === Diff.Diff.Operation.Insert) {
+          var internalDiff = Diff.Diff.charDiff(token[1].join(lineSeparator), diff[i + 1][1].join(lineSeparator));
+          baselineLineNumber++;
+          currentLineNumber++;
+          var deletionElements = [createRow(1, '', 'deletion')];
+          var insertionElements = [createRow(2, '', 'addition')];
+
+          for (var j = 0; j < internalDiff.length; j++) {
+            var text = internalDiff[j][1];
+            var type = internalDiff[j][0];
+            var className = type === Diff.Diff.Operation.Equal ? '' : 'double';
+            var first = true;
+            for (var line of text.split(lineSeparator)) {
+              if (first) {
+                first = false;
+              } else {
+                if (type !== Diff.Diff.Operation.Insert) {
+                  baselineLineNumber++;
+                  deletionElements.push(createRow(1, '', 'deletion'));
+                }
+                if (type !== Diff.Diff.Operation.Delete) {
+                  currentLineNumber++;
+                  insertionElements.push(createRow(2, '', 'addition'));
+                }
+              }
+              if (type !== Diff.Diff.Operation.Insert)
+                deletionElements[deletionElements.length - 1].content.push({text: line, className: className});
+
+              if (type !== Diff.Diff.Operation.Delete)
+                insertionElements[insertionElements.length - 1].content.push({text: line, className: className});
+            }
+          }
+
+          this._rows = this._rows.concat(deletionElements);
+          this._rows = this._rows.concat(insertionElements);
+          continue;
+        } else {
+          for (var j = 0; j < token[1].length; j++) {
+            if (deletion) {
+              baselineLineNumber++;
+              this._rows.push(createRow(1, token[1][j], 'deletion'));
+            } else {
+              currentLineNumber++;
+              this._rows.push(createRow(2, token[1][j], 'addition'));
+            }
+          }
+        }
+      }
+      Changes.ChangesView._currentContent = this._rows;
+      this._editor.setText(this._rows.map(row => row.content.map(t => t.text).join('')).join(lineSeparator));
+      this._editor.setLineNumberFormatter(this._lineFormatter.bind(this));
+      this._editor.element.scrollTop = scrollTop;
+
+      this._diffStats.setText(Common.UIString(
+          '%d insertion%s (+), %d deletion%s (-)', insertions, insertions > 1 ? 's' : '', deletions,
+          deletions > 1 ? 's' : ''));
+    });
+  }
+
+  /**
+   * @param {number} lineNumber
+   * @return {string}
+   */
+  _lineFormatter(lineNumber) {
+    var row = this._rows[lineNumber - 1];
+    if (!row)
+      return spacesPadding(this._maxLineDigits * 2 + 1);
+    var base =
+        row.base ? numberToStringWithSpacesPadding(row.base, this._maxLineDigits) : spacesPadding(this._maxLineDigits);
+    var current = row.current ? numberToStringWithSpacesPadding(row.current, this._maxLineDigits) :
+                                spacesPadding(this._maxLineDigits);
+    return base + spacesPadding(1) + current;
+  }
+
+  /**
+   * @param {number} baselineLineNumber
+   * @param {number} currentLineNumber
+   * @param {string} text
+   * @param {string=} className
+   * @return {!Element}
+   */
+  _createRow(baselineLineNumber, currentLineNumber, text, className) {
+    var element = createElementWithClass('div', className);
+    element.createChild('span', 'number').textContent = baselineLineNumber ?
+        numberToStringWithSpacesPadding(baselineLineNumber, this._maxLineDigits) :
+        spacesPadding(this._maxLineDigits);
+    element.createChild('span', 'number').textContent = currentLineNumber ?
+        numberToStringWithSpacesPadding(currentLineNumber, this._maxLineDigits) :
+        spacesPadding(this._maxLineDigits);
+    element.createChild('span', 'double').textContent = text;
+    return element;
+  }
+
+  /**
+   * @override
+   * @param {!Element} item
+   * @return {!Element}
+   */
+  createElementForItem(item) {
+    return item;
+  }
+
+  /**
+   * @override
+   * @return {number}
+   */
+  heightForItem() {
+    return 0;
+  }
+
+  /**
+   * @override
+   * @return {boolean}
+   */
+  isItemSelectable(item) {
+    return false;
+  }
+
+  /**
+   * @override
+   */
+  selectedItemChanged() {
+  }
+};
+
+/** @typedef {!{base: number, current: number, content: !Array<!{text: string, className: string}>, className: string, loc: number}} */
+Changes.ChangesView.Row;
+
+Changes.ChangesNavigator = class extends Sources.NavigatorView {
+  constructor() {
+    super();
+    this.dontGroup();
+    this.element.classList.add('changes-navigator');
+  }
+
+  /**
+   * @override
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   * @return {boolean}
+   */
+  accept(uiSourceCode) {
+    if (uiSourceCode.project().type() !== Workspace.projectTypes.Network)
+      return false;
+
+    if (!uiSourceCode.mightHaveChanges)
+      return false;
+    uiSourceCode.hasChanges().then(hasChanges => {
+      if (!hasChanges)
+        this.refreshUISourceCode(uiSourceCode);
+    });
+    return true;
+  }
+
+  /**
+   * @override
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   * @param {boolean} focusSource
+   */
+  revealSource(uiSourceCode, focusSource) {
+    Changes.ChangesView.SharedInstance._revealUISourceCode(uiSourceCode);
+    if (focusSource)
+      Changes.ChangesView.SharedInstance._editor.focus();
+  }
+
+  /**
+   * @override
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  uiSourceCodeAdded(uiSourceCode) {
+    if (!Changes.ChangesView.SharedInstance._uiSourceCode)
+      this.revealSource(uiSourceCode, false);
+  }
+
+  /**
+   * @override
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  uiSourceCodeRemoved(uiSourceCode) {
+    if (Changes.ChangesView.SharedInstance._uiSourceCode !== uiSourceCode)
+      return;
+    var anyUISourceCode = this.anyUISourceCode();
+    if (anyUISourceCode)
+      this.revealSource(anyUISourceCode, false);
+  }
+};
+
+Changes.UISourceCodeChange = class {
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  constructor(uiSourceCode) {
+    this.uiSourceCode = uiSourceCode;
+  }
+};
+
+/**
+ * @implements {Common.Revealer}
+ */
+Changes.UISourceCodeChangeRevealer = class {
+  /**
+   * @override
+   * @param {!Object} uiSourceCodeChange
+   * @param {boolean=} omitFocus
+   * @return {!Promise}
+   */
+  reveal(uiSourceCodeChange, omitFocus) {
+    if (!(uiSourceCodeChange instanceof Changes.UISourceCodeChange))
+      return Promise.reject(new Error('Changes.UISourceCodeChange'));
+    Changes.ChangesView.showChanges(uiSourceCodeChange.uiSourceCode);
+    return Promise.resolve();
+  }
+};
+
+Changes.ChangesView._currentContent = [];
+/** @typedef {!{lineNumber: number, index: number}} */
+Changes.ChangesView.DiffState;
+
+CodeMirror.defineMode('devtools-diff', function() {
+  return {
+    /**
+     * @return {!Changes.ChangesView.DiffState}
+     */
+    startState: function() {
+      return {lineNumber: 0, index: 0};
+    },
+
+    /**
+     * @param {!{next: function()}} stream
+     * @param {!Changes.ChangesView.DiffState} state
+     * @return {string}
+     */
+    token: function(stream, state) {
+      var row = Changes.ChangesView._currentContent[state.lineNumber];

[lushnikov, 2017/02/14 00:05:10]

let's not use singleton 

+      if (!row) {
+        stream.next();
+        return '';
+      }
+      var classes = '';
+      if (state.index === 0)
+        classes += ' line-background-' + row.className + ' line-' + row.className;
+      var chars = row.content[state.index].text.length;
+      for (var i = 0; i < chars; i++)
+        stream.next();
+      classes += ' ' + row.content[state.index].className;
+      state.index++;
+      if (state.index >= row.content.length) {
+        state.lineNumber++;
+        state.index = 0;
+      }
+      return classes;
+    },
+
+    /**
+     * @param {!Changes.ChangesView.DiffState} state
+     * @return {string}
+     */
+    blankLine: function(state) {
+      var row = Changes.ChangesView._currentContent[state.lineNumber];
+      state.lineNumber++;
+      return row ? 'line-background-' + row.className + ' line-' + row.className : '';
+    },
+  };
+});
+
+CodeMirror.defineMIME('devtools-diff', 'devtools-diff');