DevTools: rename CSSTracker to Coverage

Review-Url: https://codereview.chromium.org/2712703003 Cr-Commit-Position: refs/heads/master@{#452673}
binaryage · Feb 23, 2017 · 8141d3c · 8141d3c
1 parent 329821e
commit 8141d3c
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 74 deletions.
diff --git a/BUILD.gn b/BUILD.gn
@@ -136,11 +136,11 @@ all_devtools_files = [
   "front_end/console/module.json",
   "front_end/cookie_table/CookiesTable.js",
   "front_end/cookie_table/module.json",
-  "front_end/css_tracker/cssTrackerListView.css",
-  "front_end/css_tracker/CSSTrackerListView.js",
-  "front_end/css_tracker/cssTrackerView.css",
-  "front_end/css_tracker/CSSTrackerView.js",
-  "front_end/css_tracker/module.json",
+  "front_end/coverage/coverageListView.css",
+  "front_end/coverage/CoverageListView.js",
+  "front_end/coverage/coverageView.css",
+  "front_end/coverage/CoverageView.js",
+  "front_end/coverage/module.json",
   "front_end/data_grid/dataGrid.css",
   "front_end/data_grid/DataGrid.js",
   "front_end/data_grid/module.json",
@@ -827,7 +827,7 @@ generated_resources = [
   "$resources_out_dir/color_picker/color_picker_module.js",
   "$resources_out_dir/console/console_module.js",
   "$resources_out_dir/cookie_table/cookie_table_module.js",
-  "$resources_out_dir/css_tracker/css_tracker_module.js",
+  "$resources_out_dir/coverage/coverage_module.js",
   "$resources_out_dir/data_grid/data_grid_module.js",
   "$resources_out_dir/devices/devices_module.js",
   "$resources_out_dir/diff/diff_module.js",

diff --git a/front_end/Runtime.js b/front_end/Runtime.js
@@ -781,7 +781,6 @@ Runtime.Module = class {
       'ui': 'UI',
       'object_ui': 'ObjectUI',
       'perf_ui': 'PerfUI',
-      'css_tracker': 'CSSTracker'
     };
     var namespace = specialCases[this._name] || this._name.split('_').map(a => a.substring(0, 1).toUpperCase() + a.substring(1)).join('');
     self[namespace] = self[namespace] || {};

diff --git a/front_end/css_tracker/CSSTrackerListView.js → front_end/coverage/CoverageListView.js b/front_end/css_tracker/CSSTrackerListView.js → front_end/coverage/CoverageListView.js
@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-CSSTracker.CSSTrackerListView = class extends UI.VBox {
+Coverage.CoverageListView = class extends UI.VBox {
   constructor() {
     super(true);
-    this.registerRequiredCSS('css_tracker/cssTrackerListView.css');
+    this.registerRequiredCSS('coverage/coverageListView.css');
     var columns = [
       {id: 'url', title: Common.UIString('URL'), width: '300px', fixedWidth: false, sortable: true}, {
         id: 'size',
@@ -38,14 +38,14 @@ CSSTracker.CSSTrackerListView = class extends UI.VBox {
   }
 
   /**
-   * @param {!Array<!CSSTracker.CoverageInfo>} coverageInfo
+   * @param {!Array<!Coverage.CoverageInfo>} coverageInfo
    */
   update(coverageInfo) {
     var maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
     var rootNode = this._dataGrid.rootNode();
     rootNode.removeChildren();
     for (var entry of coverageInfo)
-      rootNode.appendChild(new CSSTracker.CSSTrackerListView.GridNode(entry, maxSize));
+      rootNode.appendChild(new Coverage.CoverageListView.GridNode(entry, maxSize));
     this._sortingChanged();
   }
 
@@ -75,7 +75,7 @@ CSSTracker.CSSTrackerListView = class extends UI.VBox {
   _revealSourceForNode(node) {
     if (!node)
       return;
-    var coverageInfo = /** @type {!CSSTracker.CSSTrackerListView.GridNode} */ (node)._coverageInfo;
+    var coverageInfo = /** @type {!Coverage.CoverageListView.GridNode} */ (node)._coverageInfo;
     var sourceCode = coverageInfo && Workspace.workspace.uiSourceCodeForURL(coverageInfo.url);
     if (!sourceCode)
       return;
@@ -110,8 +110,8 @@ CSSTracker.CSSTrackerListView = class extends UI.VBox {
      * @return {number}
      */
     function compareURL(a, b) {
-      var nodeA = /** @type {!CSSTracker.CSSTrackerListView.GridNode} */ (a);
-      var nodeB = /** @type {!CSSTracker.CSSTrackerListView.GridNode} */ (b);
+      var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
+      var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
 
       return nodeA._coverageInfo.url.localeCompare(nodeB._coverageInfo.url);
     }
@@ -123,17 +123,17 @@ CSSTracker.CSSTrackerListView = class extends UI.VBox {
      * @return {number}
      */
     function compareNumericField(fieldName, a, b) {
-      var nodeA = /** @type {!CSSTracker.CSSTrackerListView.GridNode} */ (a);
-      var nodeB = /** @type {!CSSTracker.CSSTrackerListView.GridNode} */ (b);
+      var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
+      var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
 
       return nodeA._coverageInfo[fieldName] - nodeB._coverageInfo[fieldName];
     }
   }
 };
 
-CSSTracker.CSSTrackerListView.GridNode = class extends DataGrid.SortableDataGridNode {
+Coverage.CoverageListView.GridNode = class extends DataGrid.SortableDataGridNode {
   /**
-   * @param {!CSSTracker.CoverageInfo} coverageInfo
+   * @param {!Coverage.CoverageInfo} coverageInfo
    * @param {number} maxSize
    */
   constructor(coverageInfo, maxSize) {

diff --git a/front_end/css_tracker/CSSTrackerView.js → front_end/coverage/CoverageView.js b/front_end/css_tracker/CSSTrackerView.js → front_end/coverage/CoverageView.js
@@ -3,23 +3,23 @@
 // found in the LICENSE file.
 
 /** @typedef {{range: !Protocol.CSS.SourceRange, wasUsed: boolean}} */
-CSSTracker.RangeUsage;
+Coverage.RangeUsage;
 
-/** @typedef {{styleSheetHeader: !SDK.CSSStyleSheetHeader, ranges: !Array<!CSSTracker.RangeUsage>}} */
-CSSTracker.StyleSheetUsage;
+/** @typedef {{styleSheetHeader: !SDK.CSSStyleSheetHeader, ranges: !Array<!Coverage.RangeUsage>}} */
+Coverage.StyleSheetUsage;
 
 /** @typedef {{url: string, totalSize: number, unusedSize: number, usedSize: number,
- *      ranges: !Array<!CSSTracker.RangeUsage>}} */
-CSSTracker.CoverageInfo;
+ *      ranges: !Array<!Coverage.RangeUsage>}} */
+Coverage.CoverageInfo;
 
-CSSTracker.CSSTrackerView = class extends UI.VBox {
+Coverage.CoverageView = class extends UI.VBox {
   constructor() {
     super(true);
 
-    this.registerRequiredCSS('css_tracker/cssTrackerView.css');
+    this.registerRequiredCSS('coverage/coverageView.css');
 
-    var toolbarContainer = this.contentElement.createChild('div', 'css-tracker-toolbar-container');
-    var topToolbar = new UI.Toolbar('css-tracker-toolbar', toolbarContainer);
+    var toolbarContainer = this.contentElement.createChild('div', 'coverage-toolbar-container');
+    var topToolbar = new UI.Toolbar('coverage-toolbar', toolbarContainer);
 
     this._recordButton =
         new UI.ToolbarToggle(Common.UIString('Start recording'), 'largeicon-resume', 'largeicon-pause');
@@ -30,24 +30,24 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
     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._listView = new CSSTracker.CSSTrackerListView();
+    this._coverageResultsElement = this.contentElement.createChild('div', 'coverage-results');
+    this._progressElement = this._coverageResultsElement.createChild('div', 'progress-view');
+    this._listView = new Coverage.CoverageListView();
 
-    this._statusToolbarElement = this.contentElement.createChild('div', 'css-toolbar-summary');
-    this._statusMessageElement = this._statusToolbarElement.createChild('div', 'css-message');
+    this._statusToolbarElement = this.contentElement.createChild('div', 'coverage-toolbar-summary');
+    this._statusMessageElement = this._statusToolbarElement.createChild('div', 'coverage-message');
 
     this._isRecording = false;
   }
 
   _reset() {
     Workspace.workspace.uiSourceCodes().forEach(
-        uiSourceCode => uiSourceCode.removeDecorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type));
+        uiSourceCode => uiSourceCode.removeDecorationsForType(Coverage.CoverageView.LineDecorator.type));
 
     this._listView.detach();
-    this._cssResultsElement.removeChildren();
+    this._coverageResultsElement.removeChildren();
     this._progressElement.textContent = '';
-    this._cssResultsElement.appendChild(this._progressElement);
+    this._coverageResultsElement.appendChild(this._progressElement);
 
     this._statusMessageElement.textContent = '';
   }
@@ -98,11 +98,11 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
 
     /**
      * @param {!Array<!SDK.CSSModel.RuleUsage>} ruleUsageList
-     * @this {!CSSTracker.CSSTrackerView}
-     * @return {!Promise<!Array<!CSSTracker.CoverageInfo>>}
+     * @this {!Coverage.CoverageView}
+     * @return {!Promise<!Array<!Coverage.CoverageInfo>>}
      */
     function processRuleList(ruleUsageList) {
-      /** @type {!Map<?SDK.CSSStyleSheetHeader, !Array<!CSSTracker.RangeUsage>>} */
+      /** @type {!Map<?SDK.CSSStyleSheetHeader, !Array<!Coverage.RangeUsage>>} */
       var rulesByStyleSheet = new Map();
       for (var rule of ruleUsageList) {
         var styleSheetHeader = cssModel.styleSheetHeaderForId(rule.styleSheetId);
@@ -118,21 +118,21 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
     }
 
     /**
-     * @param {!Array<!CSSTracker.CoverageInfo>} coverageInfo
-     * @this {!CSSTracker.CSSTrackerView}
+     * @param {!Array<!Coverage.CoverageInfo>} coverageInfo
+     * @this {!Coverage.CoverageView}
      */
     function updateViews(coverageInfo) {
       coverageInfo = coalesceByURL(coverageInfo);
       this._updateStats(coverageInfo);
       this._updateGutter(coverageInfo);
-      this._cssResultsElement.removeChildren();
+      this._coverageResultsElement.removeChildren();
       this._listView.update(coverageInfo);
-      this._listView.show(this._cssResultsElement);
+      this._listView.show(this._coverageResultsElement);
     }
 
     /**
-     * @param {!Array<!CSSTracker.CoverageInfo>} coverageInfo
-     * @return {!Array<!CSSTracker.CoverageInfo>}
+     * @param {!Array<!Coverage.CoverageInfo>} coverageInfo
+     * @return {!Array<!Coverage.CoverageInfo>}
      */
     function coalesceByURL(coverageInfo) {
       coverageInfo.sort((a, b) => (a.url || '').localeCompare(b.url));
@@ -155,8 +155,8 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
 
   /**
    * @param {!SDK.CSSStyleSheetHeader} styleSheetHeader
-   * @param {!Array<!CSSTracker.RangeUsage>} ranges
-   * @return {!Promise<!CSSTracker.CoverageInfo>}
+   * @param {!Array<!Coverage.RangeUsage>} ranges
+   * @return {!Promise<!Coverage.CoverageInfo>}
    */
   _convertToCoverageInfo(styleSheetHeader, ranges) {
     var coverageInfo = {
@@ -187,7 +187,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
   }
 
   /**
-   * @param {!Array<!CSSTracker.CoverageInfo>} coverageInfo
+   * @param {!Array<!Coverage.CoverageInfo>} coverageInfo
    */
   _updateStats(coverageInfo) {
     var total = 0;
@@ -203,7 +203,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
   }
 
   /**
-   * @param {!Array<!CSSTracker.CoverageInfo>} coverageInfo
+   * @param {!Array<!Coverage.CoverageInfo>} coverageInfo
    */
   _updateGutter(coverageInfo) {
     for (var info of coverageInfo) {
@@ -214,7 +214,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
         var gutterRange = Common.TextRange.fromObject(range.range);
         if (gutterRange.startColumn)
           gutterRange.startColumn--;
-        uiSourceCode.addDecoration(gutterRange, CSSTracker.CSSTrackerView.LineDecorator.type, range.wasUsed);
+        uiSourceCode.addDecoration(gutterRange, Coverage.CoverageView.LineDecorator.type, range.wasUsed);
       }
     }
   }
@@ -223,7 +223,7 @@ CSSTracker.CSSTrackerView = class extends UI.VBox {
 /**
  * @implements {SourceFrame.UISourceCodeFrame.LineDecorator}
  */
-CSSTracker.CSSTrackerView.LineDecorator = class {
+Coverage.CoverageView.LineDecorator = class {
   /**
    * @override
    * @param {!Workspace.UISourceCode} uiSourceCode
@@ -232,7 +232,7 @@ CSSTracker.CSSTrackerView.LineDecorator = class {
   decorate(uiSourceCode, textEditor) {
     var gutterType = 'CodeMirror-gutter-coverage';
 
-    var decorations = uiSourceCode.decorationsForType(CSSTracker.CSSTrackerView.LineDecorator.type);
+    var decorations = uiSourceCode.decorationsForType(Coverage.CoverageView.LineDecorator.type);
     textEditor.uninstallGutter(gutterType);
     if (!decorations || !decorations.size)
       return;
@@ -243,14 +243,14 @@ CSSTracker.CSSTrackerView.LineDecorator = class {
       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';
+          element.className = 'text-editor-coverage-used-marker';
         else
-          element.className = 'text-editor-css-rule-unused-marker';
+          element.className = 'text-editor-coverage-unused-marker';
 
         textEditor.setGutterDecoration(line, gutterType, element);
       }
     }
   }
 };
 
-CSSTracker.CSSTrackerView.LineDecorator.type = 'coverage';
+Coverage.CoverageView.LineDecorator.type = 'coverage';
diff --git a/front_end/coverage/coverageListView.css b/front_end/coverage/coverageListView.css
@@ -0,0 +1,20 @@
+.data-grid td .bar {
+  display: inline-block;
+  height: 8px;
+}
+
+.data-grid .selected td .bar {
+  border: 0.5px solid white;
+}
+
+.data-grid td .bar-slack-size {
+  background-color: rgb(150, 150, 200);
+}
+
+.data-grid td .bar-unused-size {
+  background-color: #E57373;
+}
+
+.data-grid td .bar-used-size {
+  background-color: #81C784;
+}
diff --git a/front_end/css_tracker/cssTrackerView.css → front_end/coverage/coverageView.css b/front_end/css_tracker/cssTrackerView.css → front_end/coverage/coverageView.css
@@ -8,17 +8,17 @@
     overflow: hidden;
 }
 
-.css-tracker-toolbar-container {
+.coverage-toolbar-container {
     display: flex;
     border-bottom: 1px solid #ccc;
     flex: 0 0;
 }
 
-.css-tracker-toolbar {
+.coverage-toolbar {
     display: inline-block;
 }
 
-.css-toolbar-summary {
+.coverage-toolbar-summary {
     background-color: #eee;
     border-top: 1px solid #ccc;
     padding-left: 5px;
@@ -27,15 +27,15 @@
     padding-right: 5px;
 }
 
-.css-toolbar-summary .css-message {
+.coverage-toolbar-summary .coverage-message {
     padding-top: 2px;
     padding-left: 1ex;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }
 
-.css-results {
+.coverage-results {
     overflow-y: auto;
     display: flex;
     flex: auto;
@@ -49,6 +49,6 @@
     font-size: 30px;
 }
 
-.css-results > div {
+.coverage-results > div {
     flex: auto;
 }
diff --git a/front_end/css_tracker/module.json → front_end/coverage/module.json b/front_end/css_tracker/module.json → front_end/coverage/module.json
@@ -3,16 +3,16 @@
         {
             "type": "view",
             "location": "drawer-view",
-            "id": "css_tracker",
-            "title": "CSS Tracker",
+            "id": "coverage",
+            "title": "Coverage",
             "persistence": "closeable",
             "order": 0,
-            "className": "CSSTracker.CSSTrackerView",
+            "className": "Coverage.CoverageView",
             "experiment": "cssTrackerPanel"
         },
         {
             "type": "@SourceFrame.UISourceCodeFrame.LineDecorator",
-            "className": "CSSTracker.CSSTrackerView.LineDecorator",
+            "className": "Coverage.CoverageView.LineDecorator",
             "decoratorType": "coverage"
         }
     ],
@@ -23,11 +23,11 @@
         "data_grid"
     ],
     "scripts": [
-        "CSSTrackerListView.js",
-        "CSSTrackerView.js"
+        "CoverageListView.js",
+        "CoverageView.js"
     ],
     "resources": [
-        "cssTrackerListView.css",
-        "cssTrackerView.css"
+        "coverageListView.css",
+        "coverageView.css"
     ]
 }