DevTools: extract a list view out of CSSTrackerView

third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js

Index: third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js b/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js
index 354ed14157a3bd2316f65531dada472244e3c6b3..8d18bb19d2e21c1c204a8b218b84e354108113d3 100644
--- a/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js
+++ b/third_party/WebKit/Source/devtools/front_end/css_tracker/CSSTrackerView.js
@@ -22,8 +22,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
 
     this._cssResultsElement = this.contentElement.createChild('div', 'css-results');
     this._progressElement = this._cssResultsElement.createChild('div', 'progress-view');
-    this._treeOutline = new UI.TreeOutlineInShadow();
-    this._treeOutline.registerRequiredCSS('css_tracker/unusedRulesTree.css');
+    this._listView = new CSSTracker.CSSTrackerListView();
 
     this._statusToolbarElement = this.contentElement.createChild('div', 'css-toolbar-summary');
     this._statusMessageElement = this._statusToolbarElement.createChild('div', 'css-message');
@@ -35,11 +34,11 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
     Workspace.workspace.uiSourceCodes().forEach(
         uiSourceCode => uiSourceCode.removeDecorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type));
 
+    this._listView.detach();
     this._cssResultsElement.removeChildren();
     this._progressElement.textContent = '';
     this._cssResultsElement.appendChild(this._progressElement);
 
-    this._treeOutline.removeChildren();
     this._statusMessageElement.textContent = '';
   }
 
@@ -116,7 +115,9 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
     function updateViews(styleSheetUsages) {
       this._updateStats(styleSheetUsages);
       this._updateGutter(styleSheetUsages);
-      this._updateTree(styleSheetUsages);
+      this._cssResultsElement.removeChildren();
+      this._listView.update(styleSheetUsages);
+      this._listView.show(this._cssResultsElement);
     }
   }
 
@@ -191,41 +192,6 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
       }
     }
   }
-
-  /**
-   * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages
-   */
-  _updateTree(styleSheetUsages) {
-    this._cssResultsElement.removeChildren();
-    this._cssResultsElement.appendChild(this._treeOutline.element);
-
-    for (var sheet of styleSheetUsages) {
-      var unusedRuleCount = sheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1, 0);
-      if (sheet.styleSheetHeader) {
-        var url = sheet.styleSheetHeader.sourceURL;
-        if (!url)
-          continue;
-
-        var styleSheetTreeElement = new CSSTracker.CSSTrackerView.StyleSheetTreeElement(url, sheet.rules);
-        this._treeOutline.appendChild(styleSheetTreeElement);
-        continue;
-      }
-      if (!unusedRuleCount)
-        continue;
-      var removedStyleSheetStats = unusedRuleCount === 1 ?
-          Common.UIString('1 unused rule in a removed style sheet.') :
-          Common.UIString('%d unused rules in removed style sheets.', unusedRuleCount);
-
-      var treeElement = new UI.TreeElement(Common.UIString('Unknown style sheets'), true);
-      treeElement.toggleOnClick = true;
-      treeElement.selectable = false;
-
-      var stats = new UI.TreeElement(removedStyleSheetStats, false);
-      stats.selectable = false;
-      treeElement.appendChild(stats);
-      this._treeOutline.appendChild(treeElement);
-    }
-  }
 };
 
 /** @typedef {{range: !Protocol.CSS.SourceRange,
@@ -237,127 +203,6 @@ CSSTracker.RuleUsage;
 /** @typedef {{styleSheetHeader: ?SDK.CSSStyleSheetHeader, rules: !Array<!CSSTracker.RuleUsage>}} */
 CSSTracker.StyleSheetUsage;
 
-CSSTracker.CSSTrackerView._rulesShownAtOnce = 20;
-
-CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement {
-  /**
-   * @param {string} url
-   * @param {!Array<!CSSTracker.RuleUsage>} ruleList
-   */
-  constructor(url, ruleList) {
-    super('', true);
-
-    this._uiSourceCode = Workspace.workspace.uiSourceCodeForURL(url);
-
-    /** @type {!Array<!CSSTracker.RuleUsage>} */
-    this._unusedRules = ruleList.filter(rule => !rule.wasUsed);
-
-    var lastLineNumber = 0;
-    for (var i = this._unusedRules.length - 1; i >= 0; --i) {
-      if (this._unusedRules[i].range) {
-        lastLineNumber = this._unusedRules[i].range.startLine;
-        break;
-      }
-    }
-    this._numberOfSpaces = lastLineNumber.toString().length + 1;
-
-    this._percentUnused = Math.round(100 * this._unusedRules.length / ruleList.length);
-
-    this.toggleOnClick = true;
-    this.selectable = false;
-
-    /** @type {?UI.TreeElement} */
-    this._showAllRulesTreeElement = null;
-
-    var title = createElementWithClass('div', 'rule-result');
-    var titleText;
-    if (this._uiSourceCode)
-      titleText = this._uiSourceCode.fullDisplayName();
-    else
-      titleText = Common.UIString('Style Sheet was removed');
-    title.createChild('span', 'rule-result-file-name').textContent = titleText;
-
-    var rulesCountSpan = title.createChild('span', 'rule-result-matches-count');
-
-    if (this._unusedRules.length === 1) {
-      rulesCountSpan.textContent =
-          Common.UIString('(%d unused rule : %d%%)', this._unusedRules.length, this._percentUnused);
-    } else {
-      rulesCountSpan.textContent =
-          Common.UIString('(%d unused rules : %d%%)', this._unusedRules.length, this._percentUnused);
-    }
-    this.title = title;
-  }
-
-  /**
-   * @override
-   */
-  onpopulate() {
-    var toIndex = Math.min(this._unusedRules.length, CSSTracker.CSSTrackerView._rulesShownAtOnce);
-    this._appendRules(0, toIndex);
-    if (toIndex < this._unusedRules.length)
-      this._appendShowAllRulesButton(toIndex);
-  }
-
-  /**
-   * @param {number} fromIndex
-   * @param {number} toIndex
-   */
-  _appendRules(fromIndex, toIndex) {
-    for (var i = fromIndex; i < toIndex; ++i) {
-      if (!this._uiSourceCode) {
-        var rule = this._unusedRules[i];
-        var contentSpan = createElementWithClass('span', 'rule-match-content');
-        contentSpan.textContent = rule.selector;
-        ruleElement.listItemElement.appendChild(contentSpan);
-        continue;
-      }
-
-      var rule = this._unusedRules[i];
-      var lineNumber = rule.range.startLine;
-      var columnNumber = rule.range.startColumn;
-
-      var anchor = Components.Linkifier.linkifyRevealable(this._uiSourceCode.uiLocation(lineNumber, columnNumber), '');
-
-      var lineNumberSpan = createElement('span');
-      lineNumberSpan.classList.add('rule-match-line-number');
-      lineNumberSpan.textContent = numberToStringWithSpacesPadding(lineNumber + 1, this._numberOfSpaces);
-      anchor.appendChild(lineNumberSpan);
-
-      var contentSpan = anchor.createChild('span', 'rule-match-content');
-      contentSpan.textContent = rule.selector;
-
-      var ruleElement = new UI.TreeElement();
-      ruleElement.selectable = true;
-      this.appendChild(ruleElement);
-      ruleElement.listItemElement.className = 'rule-match source-code';
-      ruleElement.listItemElement.appendChild(anchor);
-    }
-  }
-
-  /**
-   * @param {number} startMatchIndex
-   */
-  _appendShowAllRulesButton(startMatchIndex) {
-    var rulesLeftCount = this._unusedRules.length - startMatchIndex;
-    var button = UI.createTextButton('', this._showMoreRulesElementSelected.bind(this, startMatchIndex));
-    button.textContent = Common.UIString('Show all rules (%d more).', rulesLeftCount);
-    this._showAllRulesTreeElement = new UI.TreeElement(button);
-    this._showAllRulesTreeElement.selectable = false;
-    this.appendChild(this._showAllRulesTreeElement);
-  }
-
-  /**
-   * @param {number} startMatchIndex
-   */
-  _showMoreRulesElementSelected(startMatchIndex) {
-    if (!this._showAllRulesTreeElement)
-      return;
-    this.removeChild(this._showAllRulesTreeElement);
-    this._appendRules(startMatchIndex, this._unusedRules.length);
-  }
-};
-
 /**
  * @implements {SourceFrame.UISourceCodeFrame.LineDecorator}
  */