DevTools: extract a list view out of CSSTrackerView

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

-// Copyright (c) 2016 The Chromium Authors. All rights reserved.
+// Copyright (c) 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.
 
-CSSTracker.CSSTrackerView = class extends UI.VBox {
+CSSTracker.CSSTrackerListView = class extends UI.VBox {
   constructor() {
     super(true);
-
-    this.registerRequiredCSS('css_tracker/cssTrackerView.css');
-
-    var toolbarContainer = this.contentElement.createChild('div', 'css-tracker-toolbar-container');
-    var topToolbar = new UI.Toolbar('css-tracker-toolbar', toolbarContainer);
-
-    this._recordButton =
-        new UI.ToolbarToggle(Common.UIString('Start recording'), 'largeicon-resume', 'largeicon-pause');
-    this._recordButton.addEventListener(UI.ToolbarButton.Events.Click, () => this._toggleRecording(!this._isRecording));
-    topToolbar.appendToolbarItem(this._recordButton);
-
-    var clearButton = new UI.ToolbarButton(Common.UIString('Clear all'), 'largeicon-clear');
-    clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._reset.bind(this));
-    topToolbar.appendToolbarItem(clearButton);
-
-    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._statusToolbarElement = this.contentElement.createChild('div', 'css-toolbar-summary');
-    this._statusMessageElement = this._statusToolbarElement.createChild('div', 'css-message');
-
-    this._isRecording = false;
-  }
-
-  _reset() {
-    Workspace.workspace.uiSourceCodes().forEach(
-        uiSourceCode => uiSourceCode.removeDecorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type));
-
-    this._cssResultsElement.removeChildren();
-    this._progressElement.textContent = '';
-    this._cssResultsElement.appendChild(this._progressElement);
-
-    this._treeOutline.removeChildren();
-    this._statusMessageElement.textContent = '';
-  }
-
-  /**
-   * @param {boolean} enable
-   */
-  _toggleRecording(enable) {
-    if (enable === this._isRecording)
-      return;
-
-    this._isRecording = enable;
-    this._recordButton.setToggled(this._isRecording);
-
-    if (this._isRecording)
-      this._startRecording();
-    else
-      this._stopRecording();
-  }
-
-  _startRecording() {
-    this._reset();
-    var mainTarget = SDK.targetManager.mainTarget();
-    if (!mainTarget)
-      return;
-    this._recordButton.setTitle(Common.UIString('Stop recording'));
-    SDK.CSSModel.fromTarget(mainTarget).startRuleUsageTracking();
-
-    this._progressElement.textContent = Common.UIString('Recording...');
-  }
-
-  _stopRecording() {
-    var mainTarget = SDK.targetManager.mainTarget();
-    if (!mainTarget)
-      return;
-
-    this._recordButton.setTitle(Common.UIString('Start recording'));
-    this._progressElement.textContent = Common.UIString('Fetching results...');
-
-    var cssModel = SDK.CSSModel.fromTarget(mainTarget);
-    if (!cssModel)
-      return;
-
-    cssModel.ruleListPromise()
-        .then(processRuleList.bind(this))
-        .then(updateViews.bind(this));
-
-    /**
-     * @param {!Array<!SDK.CSSModel.RuleUsage>} ruleUsageList
-     * @this {!CSSTracker.CSSTrackerView}
-     * @return {!Promise<!Array<!CSSTracker.StyleSheetUsage>>}
-     */
-    function processRuleList(ruleUsageList) {
-      /** @type {!Map<?SDK.CSSStyleSheetHeader, !CSSTracker.StyleSheetUsage>} */
-      var rulesByStyleSheet = new Map();
-      for (var rule of ruleUsageList) {
-        var styleSheetHeader = cssModel.styleSheetHeaderForId(rule.styleSheetId);
-        var entry = rulesByStyleSheet.get(styleSheetHeader);
-        if (!entry) {
-          entry = {styleSheetHeader: styleSheetHeader, rules: []};
-          rulesByStyleSheet.set(styleSheetHeader, entry);
-        }
-        entry.rules.push(rule);
-      }
-      var styleSheetUsages = Array.from(rulesByStyleSheet.values());
-      return Promise.all(styleSheetUsages.map(entry => this._populateSourceInfo(entry))).then(() => styleSheetUsages);
-    }
-
-    /**
-     * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages
-     * @this {!CSSTracker.CSSTrackerView}
-     */
-    function updateViews(styleSheetUsages) {
-      this._updateStats(styleSheetUsages);
-      this._updateGutter(styleSheetUsages);
-      this._updateTree(styleSheetUsages);
-    }
-  }
-
-  /**
-   * @param {!CSSTracker.StyleSheetUsage} styleSheetUsage
-   */
-  _populateSourceInfo(styleSheetUsage) {
-    if (!styleSheetUsage.styleSheetHeader)
-      return Promise.resolve();
-    var ruleIndex = new Map(styleSheetUsage.rules.map(
-        rule => [`${rule.range.startLine}.${rule.range.startColumn}`, rule]));
-
-    return new Promise(fulfill => {
-      styleSheetUsage.styleSheetHeader.requestContent()
-          .then(content => Common.formatterWorkerPool.parseCSS(content || '', onRules));
-
-      /**
-       * @param {boolean} isLastChunk
-       * @param {!Array<!Common.FormatterWorkerPool.CSSStyleRule>} rules
-       */
-      function onRules(isLastChunk, rules) {
-        for (var rule of rules) {
-          if (!rule.styleRange)
-            continue;
-          var entry = ruleIndex.get(`${rule.styleRange.startLine}.${rule.styleRange.startColumn}`);
-          if (entry)
-            entry.selector = rule.selectorText;
-        }
-        if (isLastChunk)
-          fulfill();
-      }
-    });
-  }
-
-  /**
-   * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsage
-   */
-  _updateStats(styleSheetUsage) {
-    var total = 0;
-    var unused = 0;
-    for (var styleSheet of styleSheetUsage) {
-      total += styleSheet.length;
-      unused += styleSheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1);
-    }
-    var percentUnused = Math.round(100 * unused / total);
-    if (unused === 1) {
-      this._statusMessageElement.textContent =
-          Common.UIString('%d CSS rule is not used. (%d%%)', unused, percentUnused);
-    } else {
-      this._statusMessageElement.textContent =
-          Common.UIString('%d CSS rules are not used. (%d%%)', unused, percentUnused);
-    }
+    this.contentElement.appendChild(this._treeOutline.element);
   }
 
   /**
    * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages
    */
-  _updateGutter(styleSheetUsages) {
-    for (var styleSheet of styleSheetUsages) {
-      if (!styleSheet.styleSheetHeader)
-        continue;
-      var url = styleSheet.styleSheetHeader.sourceURL;
-      var uiSourceCode = url && Workspace.workspace.uiSourceCodeForURL(url);
-      if (!uiSourceCode)
-        continue;
-      for (var rule of styleSheet.rules) {
-        var gutterRange = Common.TextRange.fromObject(rule.range);
-        if (gutterRange.startColumn)
-          gutterRange.startColumn--;
-        uiSourceCode.addDecoration(gutterRange, CSSTracker.CSSTrackerView.LineDecorator.type, rule.wasUsed);
-      }
-    }
-  }
-
-  /**
-   * @param {!Array<!CSSTracker.StyleSheetUsage>} styleSheetUsages
-   */
-  _updateTree(styleSheetUsages) {
-    this._cssResultsElement.removeChildren();
-    this._cssResultsElement.appendChild(this._treeOutline.element);
+  update(styleSheetUsages) {
+    this._treeOutline.removeChildren();
 
     for (var sheet of styleSheetUsages) {
       var unusedRuleCount = sheet.rules.reduce((count, rule) => rule.wasUsed ? count : count + 1, 0);
       if (!sheet.styleSheetHeader) {
         if (!unusedRuleCount)
           continue;
         if (unusedRuleCount === 1) {
           var removedStyleSheetStats = Common.UIString('1 unused rule in a removed style sheet.');
         } else {
           var removedStyleSheetStats =
               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);
         continue;
       }
       var url = sheet.styleSheetHeader.sourceURL;
       if (!url)
         continue;
 
       var styleSheetTreeElement =
-          new CSSTracker.CSSTrackerView.StyleSheetTreeElement(url, sheet.rules);
+          new CSSTracker.CSSTrackerListView.StyleSheetTreeElement(url, sheet.rules);
       this._treeOutline.appendChild(styleSheetTreeElement);
     }
   }
 };
 
-/** @typedef {{range: !Protocol.CSS.SourceRange,
- *              selector: (string|undefined),
- *              wasUsed: boolean}}
- */
-CSSTracker.RuleUsage;
+CSSTracker.CSSTrackerListView._rulesShownAtOnce = 20;
 
-/** @typedef {{styleSheetHeader: ?SDK.CSSStyleSheetHeader, rules: !Array<!CSSTracker.RuleUsage>}} */
-CSSTracker.StyleSheetUsage;
-
-CSSTracker.CSSTrackerView._rulesShownAtOnce = 20;
-
-CSSTracker.CSSTrackerView.StyleSheetTreeElement = class extends UI.TreeElement {
+CSSTracker.CSSTrackerListView.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>} */
@@ skipping 33 matching lines @@
       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);
+    var toIndex = Math.min(this._unusedRules.length, CSSTracker.CSSTrackerListView._rulesShownAtOnce);
     this._appendRules(0, toIndex);
     if (toIndex < this._unusedRules.length)
       this._appendShowAllRulesButton(toIndex);
   }
 
   /**
    * @param {number} fromIndex
    * @param {number} toIndex
    */
   _appendRules(fromIndex, toIndex) {
@@ skipping 44 matching lines @@
    * @param {number} startMatchIndex
    */
   _showMoreRulesElementSelected(startMatchIndex) {
     if (!this._showAllRulesTreeElement)
       return;
     this.removeChild(this._showAllRulesTreeElement);
     this._appendRules(startMatchIndex, this._unusedRules.length);
   }
 };
 
-/**
- * @implements {SourceFrame.UISourceCodeFrame.LineDecorator}
- */
-CSSTracker.CSSTrackerView.LineDecorator = class {
-  /**
-   * @override
-   * @param {!Workspace.UISourceCode} uiSourceCode
-   * @param {!TextEditor.CodeMirrorTextEditor} textEditor
-   */
-  decorate(uiSourceCode, textEditor) {
-    var gutterType = 'CodeMirror-gutter-coverage';
-
-    var decorations = uiSourceCode.decorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type);
-    textEditor.uninstallGutter(gutterType);
-    if (!decorations || !decorations.size)
-      return;
-
-    textEditor.installGutter(gutterType, false);
-
-    for (var decoration of decorations) {
-      for (var line = decoration.range().startLine; line <= decoration.range().endLine; ++line) {
-        var element = createElementWithClass('div');
-        if (decoration.data())
-          element.className = 'text-editor-css-rule-used-marker';
-        else
-          element.className = 'text-editor-css-rule-unused-marker';
-
-        textEditor.setGutterDecoration(line, gutterType, element);
-      }
-    }
-  }
-};
-
-CSSTracker.CSSTrackerView.LineDecorator.type = 'coverage';