DevTools: Changes View

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

Index: third_party/WebKit/Source/devtools/front_end/changes/UISourceCodeList.js
diff --git a/third_party/WebKit/Source/devtools/front_end/changes/UISourceCodeList.js b/third_party/WebKit/Source/devtools/front_end/changes/UISourceCodeList.js
new file mode 100644
index 0000000000000000000000000000000000000000..c8646e761506e5ca48faed8a379b717377713359
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/changes/UISourceCodeList.js
@@ -0,0 +1,121 @@
+// 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.UISourceCodeList = class extends UI.Widget {

[lushnikov, 2017/03/28 03:32:10]

ChangesSidebar!

[einbinder, 2017/03/28 23:51:04]

Done.

+  /**
+   * @param {!WorkspaceDiff.WorkspaceDiff} workspaceDiff
+   */
+  constructor(workspaceDiff) {
+    super();
+    this._treeoutline = new UI.TreeOutlineInShadow();
+    this._treeoutline.registerRequiredCSS('changes/uiSourceCodeList.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.UISourceCodeList.UISourceCodeTreeElement>} */
+    this._treeElements = new Map();
+    this._workspaceDiff = workspaceDiff;
+    this._workspaceDiff.modifiedUISourceCodes().forEach(this._addUISourceCode.bind(this));
+    this._workspaceDiff.on(WorkspaceDiff.ModifiedStatusChangedEvent, this._uiSourceCodeMofiedStatusChanged, this);
+  }
+
+  /**
+   * @return {?Workspace.UISourceCode}
+   */
+  selectedUISourceCode() {
+    return this._treeoutline.selectedTreeElement ? this._treeoutline.selectedTreeElement.uiSourceCode : null;
+  }
+
+  _selectionChanged() {
+    this.emit(new Changes.UISourceCodeList.SelectedUISourceCodeChanged());
+  }
+
+  _uiSourceCodeMofiedStatusChanged(event) {
+    if (event.status)
+      this._addUISourceCode(event.uiSourceCode);
+    else
+      this._removeUISourceCode(event.uiSourceCode);
+  }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  _removeUISourceCode(uiSourceCode) {
+    var treeElement = this._treeElements.get(uiSourceCode);
+    this._treeElements.delete(uiSourceCode);
+    if (this._treeoutline.selectedTreeElement === treeElement) {
+      var nextElementToSelect = treeElement.previousSibling || treeElement.nextSibling;
+      if (nextElementToSelect) {
+        nextElementToSelect.select(true);
+      } else {
+        treeElement.deselect();
+        this._selectionChanged();
+      }
+    }
+    this._treeoutline.removeChild(treeElement);
+    treeElement.dispose();
+  }
+
+  /**
+   * @param {!Workspace.UISourceCode} uiSourceCode
+   */
+  _addUISourceCode(uiSourceCode) {
+    var treeElement = new Changes.UISourceCodeList.UISourceCodeTreeElement(uiSourceCode);
+    this._treeElements.set(uiSourceCode, treeElement);
+    this._treeoutline.appendChild(treeElement);
+    if (!this._treeoutline.selectedTreeElement)
+      treeElement.select(true);
+  }
+};
+
+/**
+ * @implements {Common.Emittable}
+ */
+Changes.UISourceCodeList.SelectedUISourceCodeChanged = class {
+  constructor() {
+  }
+};
+
+Changes.UISourceCodeList.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);
+  }
+};