DevTools: introduce "Track CSS Usage" experiment

third_party/WebKit/Source/devtools/front_end/components_lazy/CoverageProfile.js

 // Copyright 2016 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.
 /**

[alph, 2016/11/08 17:10:25]

empty line plz

  * @unrestricted

[alph, 2016/11/08 17:10:25]

Can you plz remove this.

  */
-WebInspector.LineLevelProfile = class {
+WebInspector.CoverageProfile = class {
   constructor() {
     this._locationPool = new WebInspector.LiveLocationPool();
     this.reset();
   }
 
   /**
-   * @return {!WebInspector.LineLevelProfile}
+   * @return {!WebInspector.CoverageProfile}
    */
   static instance() {
-    if (!WebInspector.LineLevelProfile._instance)
-      WebInspector.LineLevelProfile._instance = new WebInspector.LineLevelProfile();
-    return WebInspector.LineLevelProfile._instance;
+    if (!WebInspector.CoverageProfile._instance)
+      WebInspector.CoverageProfile._instance = new WebInspector.CoverageProfile();
+
+    return WebInspector.CoverageProfile._instance;
   }
 
   /**
-   * @param {!WebInspector.CPUProfileDataModel} profile
+   * @param {string} url
+   * @param {number} line
    */
-  appendCPUProfile(profile) {
-    var nodesToGo = [profile.profileHead];
-    var sampleDuration = (profile.profileEndTime - profile.profileStartTime) / profile.totalHitCount;
-    while (nodesToGo.length) {
-      var nodes = nodesToGo.pop().children;
-      for (var i = 0; i < nodes.length; ++i) {
-        var node = nodes[i];
-        nodesToGo.push(node);
-        if (!node.url || !node.positionTicks)
-          continue;
-        var fileInfo = this._files.get(node.url);
-        if (!fileInfo) {
-          fileInfo = new Map();
-          this._files.set(node.url, fileInfo);
-        }
-        for (var j = 0; j < node.positionTicks.length; ++j) {
-          var lineInfo = node.positionTicks[j];
-          var line = lineInfo.line;
-          var time = lineInfo.ticks * sampleDuration;
-          fileInfo.set(line, (fileInfo.get(line) || 0) + time);
-        }
-      }
+  appendUnusedRule(url, line) {
+    if (!url)
+      return;
+
+    var fileInfo = this._files.get(url);
+    if (!fileInfo) {
+      fileInfo = new Set();
+      this._files.set(url, fileInfo);
     }
+

[alph, 2016/11/08 17:10:25]

nit: here and below no need for empty lines

+    fileInfo.add(line);
+
     this._scheduleUpdate();
   }
 
   reset() {
-    /** @type {!Map<string, !Map<number, number>>} */
+    /** @type {!Map<string, !Set<number>>} */
     this._files = new Map();
     this._scheduleUpdate();
   }
 
   _scheduleUpdate() {
     if (this._updateTimer)
       return;
+
     this._updateTimer = setTimeout(() => {
       this._updateTimer = null;
       this._doUpdate();
     }, 0);
   }
 
+  _uiSourceCodeChanged(event) {

[alph, 2016/11/08 17:10:24]

annotate

+    WebInspector.workspace.uiSourceCodes().forEach(
+        uiSourceCode => uiSourceCode.removeAllLineDecorations(WebInspector.CoverageProfile.LineDecorator.type));
+  }
+
   _doUpdate() {
-    // TODO(alph): use scriptId instead of urls for the target.
     this._locationPool.disposeAll();
     WebInspector.workspace.uiSourceCodes().forEach(
-        uiSourceCode => uiSourceCode.removeAllLineDecorations(WebInspector.LineLevelProfile.LineDecorator.type));
+        uiSourceCode => uiSourceCode.removeAllLineDecorations(WebInspector.CoverageProfile.LineDecorator.type));
+
+    WebInspector.workspace.uiSourceCodes().forEach(
+        uiSourceCode => uiSourceCode.addEventListener(
+                            WebInspector.UISourceCode.Events.WorkingCopyChanged, this._uiSourceCodeChanged, this));
+
     for (var fileInfo of this._files) {
       var url = /** @type {string} */ (fileInfo[0]);
       var uiSourceCode = WebInspector.workspace.uiSourceCodeForURL(url);
       if (!uiSourceCode)
         continue;
+
       var target =
           WebInspector.NetworkProject.targetForUISourceCode(uiSourceCode) || WebInspector.targetManager.mainTarget();
       var debuggerModel = target ? WebInspector.DebuggerModel.fromTarget(target) : null;
       if (!debuggerModel)
         continue;
+
       for (var lineInfo of fileInfo[1]) {

[alph, 2016/11/08 17:10:24]

... var line of ...

-        var line = lineInfo[0] - 1;
-        var time = lineInfo[1];
+        var line = lineInfo;
+
         var rawLocation = debuggerModel.createRawLocationByURL(url, line, 0);
         if (rawLocation)
-          new WebInspector.LineLevelProfile.Presentation(rawLocation, time, this._locationPool);
+          new WebInspector.CoverageProfile.Presentation(rawLocation, this._locationPool);
         else if (uiSourceCode)
-          uiSourceCode.addLineDecoration(line, WebInspector.LineLevelProfile.LineDecorator.type, time);
+          uiSourceCode.addLineDecoration(line, WebInspector.CoverageProfile.LineDecorator.type, 0);
       }
     }
   }
 };
 
 
 /**
  * @unrestricted

[alph, 2016/11/08 17:10:24]

drop it

  */
-WebInspector.LineLevelProfile.Presentation = class {
+WebInspector.CoverageProfile.Presentation = class {
   /**
    * @param {!WebInspector.DebuggerModel.Location} rawLocation
-   * @param {number} time
    * @param {!WebInspector.LiveLocationPool} locationPool
    */
-  constructor(rawLocation, time, locationPool) {
-    this._time = time;
+  constructor(rawLocation, locationPool) {
     WebInspector.debuggerWorkspaceBinding.createLiveLocation(rawLocation, this.updateLocation.bind(this), locationPool);
   }
 
   /**
    * @param {!WebInspector.LiveLocation} liveLocation
    */
   updateLocation(liveLocation) {
     if (this._uiLocation)
       this._uiLocation.uiSourceCode.removeLineDecoration(
-          this._uiLocation.lineNumber, WebInspector.LineLevelProfile.LineDecorator.type);
+          this._uiLocation.lineNumber, WebInspector.CoverageProfile.LineDecorator.type);
+
     this._uiLocation = liveLocation.uiLocation();
     if (this._uiLocation)
       this._uiLocation.uiSourceCode.addLineDecoration(
-          this._uiLocation.lineNumber, WebInspector.LineLevelProfile.LineDecorator.type, this._time);
+          this._uiLocation.lineNumber, WebInspector.CoverageProfile.LineDecorator.type, 0);
   }
 };
 
 /**
  * @implements {WebInspector.UISourceCodeFrame.LineDecorator}
  * @unrestricted

[alph, 2016/11/08 17:10:25]

drop the line

  */
-WebInspector.LineLevelProfile.LineDecorator = class {
+WebInspector.CoverageProfile.LineDecorator = class {
   /**
    * @override
    * @param {!WebInspector.UISourceCode} uiSourceCode
    * @param {!WebInspector.CodeMirrorTextEditor} textEditor
    */
   decorate(uiSourceCode, textEditor) {
-    var gutterType = 'CodeMirror-gutter-performance';
-    var decorations = uiSourceCode.lineDecorations(WebInspector.LineLevelProfile.LineDecorator.type);
+    var gutterType = 'gutter-cssTracking';
+
+    var decorations = uiSourceCode.lineDecorations(WebInspector.CoverageProfile.LineDecorator.type);
     textEditor.uninstallGutter(gutterType);
     if (!decorations)
       return;
+
     textEditor.installGutter(gutterType, false);
+
     for (var decoration of decorations.values()) {
-      var time = /** @type {number} */ (decoration.data());
-      var text = WebInspector.UIString('%.1f\xa0ms', time);
-      var intensity = Number.constrain(Math.log10(1 + 2 * time) / 5, 0.02, 1);
-      var element = createElementWithClass('div', 'text-editor-line-marker-performance');
-      element.textContent = text;
-      element.style.backgroundColor = `hsla(44, 100%, 50%, ${intensity.toFixed(3)})`;
+      var element = createElementWithClass('div', 'text-editor-line-marker-cssTracking');

[alph, 2016/11/08 17:10:25]

can we have a file type neutral name. We are going to reuse it for JS coverage.
E.g. s/cssTracking/coverage/

+      element.style.backgroundColor = 'red';

[alph, 2016/11/08 17:10:25]

As long as the color is static, you can encode it in css.

       textEditor.setGutterDecoration(decoration.line(), gutterType, element);
     }
   }
 };
 
-WebInspector.LineLevelProfile.LineDecorator.type = 'performance';
+WebInspector.CoverageProfile.LineDecorator.type = 'cssTracking';