DevTools: Changes View

third_party/WebKit/Source/devtools/front_end/changes/FileList.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.FileList = class extends UI.Widget {
+  /**
+   * @param {!WorkspaceDiff.WorkspaceDiff} workspaceDiff
+   */
+  constructor(workspaceDiff) {
+    super();
+    this._treeoutline = new UI.TreeOutlineInShadow();
+    this._treeoutline.registerRequiredCSS('changes/fileList.css');
+    this._treeoutline.setComparator((a, b) => a.titleAsText().compareTo(b.titleAsText()));
+    this._treeoutline.addEventListener(UI.TreeOutline.Events.ElementSelected, this._selectionChanged, this);
+
+    this.element.appendChild(this._treeoutline.element);
+
+    /** @type {!Map<!Workspace.UISourceCode, !Changes.FileList.UISourceCodeTreeElement>} */
+    this._treeElements = new Map();
+    /** @type {!Map<!UI.TreeElement, !Workspace.UISourceCode>} */
+    this._uiSourceCodes = new Map();
+    this._workspaceDiff = workspaceDiff;
+    this._workspaceDiff.modifiedUISourceCodes().forEach(this._addUISourceCode.bind(this));
+    this._workspaceDiff.on(WorkspaceDiff.ModifiedEvent, event => this._addUISourceCode(event.uiSourceCode));
+    this._workspaceDiff.on(WorkspaceDiff.UnmodifiedEvent, event => this._removeUISourceCode(event.uiSourceCode));
+  }
+
+  /**
+   * @override
+   */
+  wasShown() {
+    this._selectionChanged();
+  }
+
+  /**
+   * @override
+   */
+  willHide() {
+    for (var uiSourceCode of this._uiSourceCodes.values())
+      this._removeUISourceCode(uiSourceCode);

[luoe, 2017/03/23 02:03:16]

joel: remove this

[einbinder, 2017/03/23 04:32:48]

Done.

+    this._workspaceDiff.off(WorkspaceDiff.ModifiedEvent, event => this._addUISourceCode(event.uiSourceCode));
+    this._workspaceDiff.off(WorkspaceDiff.UnmodifiedEvent, event => this._removeUISourceCode(event.uiSourceCode));
+  }
+
+  _selectionChanged() {
+    var uiSourceCode = null;
+    if (this._treeoutline.selectedTreeElement)
+      uiSourceCode = this._uiSourceCodes.get(this._treeoutline.selectedTreeElement) || null;
+    this.emit(new Changes.FileList.SelectionChanged(uiSourceCode));
+  }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  _removeUISourceCode(uiSourceCode) {
+    var treeElement = this._treeElements.get(uiSourceCode);
+    if (!treeElement)
+      return;
+    this._treeElements.delete(uiSourceCode);
+    this._uiSourceCodes.delete(treeElement);
+    var wasSelected = this._treeoutline.selectedTreeElement === treeElement;
+    this._treeoutline.removeChild(treeElement);
+    treeElement.dispose();
+    if (wasSelected) {
+      if (this._treeElements.size)
+        this._treeElements.values().next().value.select(true);
+      else
+        this._selectionChanged();
+    }
+  }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  _addUISourceCode(uiSourceCode) {
+    if (this._treeElements.has(uiSourceCode))
+      return;
+    var treeElement = new Changes.FileList.UISourceCodeTreeElement(uiSourceCode);
+    this._treeElements.set(uiSourceCode, treeElement);
+    this._uiSourceCodes.set(treeElement, uiSourceCode);
+    this._treeoutline.appendChild(treeElement);
+    if (!this._treeoutline.selectedTreeElement)
+      treeElement.select(true);
+  }
+};
+
+/**
+ * @implements {Common.Emittable}
+ */
+Changes.FileList.SelectionChanged = class {
+  /**
+   * @param {?Workspace.UISourceCode} uiSourceCode
+   */
+  constructor(uiSourceCode) {
+    this.uiSourceCode = uiSourceCode;
+  }
+};
+
+Changes.FileList.UISourceCodeTreeElement = class extends UI.TreeElement {
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  constructor(uiSourceCode) {
+    super();
+    this._uiSourceCode = uiSourceCode;
+    this.listItemElement.classList.add('navigator-' + uiSourceCode.contentType().name() + '-tree-item');
+
+    var iconType = 'largeicon-navigator-file';
+    if (this._uiSourceCode.contentType() === Common.resourceTypes.Snippet)
+      iconType = 'largeicon-navigator-snippet';
+    var defaultIcon = UI.Icon.create(iconType, 'icon');
+    this.setLeadingIcons([defaultIcon]);
+
+    this._eventListeners = [
+      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.updateTitle, this),
+      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.updateTitle, this),
+      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.updateTitle, this)
+    ];
+
+    this.updateTitle();
+  }
+
+  updateTitle() {
+    var titleText = this._uiSourceCode.displayName();
+    if (this._uiSourceCode.isDirty() || Persistence.persistence.hasUnsavedCommittedChanges(this._uiSourceCode))
+      titleText = '*' + titleText;
+    this.title = titleText;
+
+    var tooltip = this._uiSourceCode.url();
+    if (this._uiSourceCode.contentType().isFromSourceMap())
+      tooltip = Common.UIString('%s (from source map)', this._uiSourceCode.displayName());
+    this.tooltip = tooltip;
+  }
+
+  dispose() {
+    Common.EventTarget.removeEventListeners(this._eventListeners);
+  }
+};