DevTools: introduce "Track CSS Usage" experiment

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

Index: third_party/WebKit/Source/devtools/front_end/components_lazy/LineMarkingProfile.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components_lazy/LineLevelProfile.js b/third_party/WebKit/Source/devtools/front_end/components_lazy/LineMarkingProfile.js
similarity index 53%
copy from third_party/WebKit/Source/devtools/front_end/components_lazy/LineLevelProfile.js
copy to third_party/WebKit/Source/devtools/front_end/components_lazy/LineMarkingProfile.js
index 971bedbfb661420417d0cb3699f4d59062cc3cc8..9ce2a6b3eb129d9c4f3c177776669685882d4131 100644
--- a/third_party/WebKit/Source/devtools/front_end/components_lazy/LineLevelProfile.js
+++ b/third_party/WebKit/Source/devtools/front_end/components_lazy/LineMarkingProfile.js
@@ -4,52 +4,43 @@
 /**
  * @unrestricted
  */
-WebInspector.LineLevelProfile = class {
+WebInspector.LineMarkingProfile = class {

[caseq, 2016/11/04 21:10:02]

CoverageProfile?

   constructor() {
     this._locationPool = new WebInspector.LiveLocationPool();
     this.reset();
   }
 
   /**
-   * @return {!WebInspector.LineLevelProfile}
+   * @return {!WebInspector.LineMarkingProfile}
    */
   static instance() {
-    if (!WebInspector.LineLevelProfile._instance)
-      WebInspector.LineLevelProfile._instance = new WebInspector.LineLevelProfile();
-    return WebInspector.LineLevelProfile._instance;
+    if (!WebInspector.LineMarkingProfile._instance)
+      WebInspector.LineMarkingProfile._instance = new WebInspector.LineMarkingProfile();
+
+    return WebInspector.LineMarkingProfile._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);
     }
+
+    fileInfo.add(line);
+
     this._scheduleUpdate();
   }
 
   reset() {
-    /** @type {!Map<string, !Map<number, number>>} */
+    /** @type {!Map<string, !Set<number>>} */
     this._files = new Map();
     this._scheduleUpdate();
   }
@@ -57,6 +48,7 @@ WebInspector.LineLevelProfile = class {
   _scheduleUpdate() {
     if (this._updateTimer)
       return;
+
     this._updateTimer = setTimeout(() => {
       this._updateTimer = null;
       this._doUpdate();
@@ -64,28 +56,30 @@ WebInspector.LineLevelProfile = class {
   }
 
   _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.LineMarkingProfile.LineDecorator.type));
+
     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]) {
-        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.LineMarkingProfile.Presentation(rawLocation, this._locationPool);
         else if (uiSourceCode)
-          uiSourceCode.addLineDecoration(line, WebInspector.LineLevelProfile.LineDecorator.type, time);
+          uiSourceCode.addLineDecoration(line, WebInspector.LineMarkingProfile.LineDecorator.type, 0);
       }
     }
   }
@@ -95,14 +89,12 @@ WebInspector.LineLevelProfile = class {
 /**
  * @unrestricted
  */
-WebInspector.LineLevelProfile.Presentation = class {
+WebInspector.LineMarkingProfile.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);
   }
 
@@ -112,11 +104,12 @@ WebInspector.LineLevelProfile.Presentation = class {
   updateLocation(liveLocation) {
     if (this._uiLocation)
       this._uiLocation.uiSourceCode.removeLineDecoration(
-          this._uiLocation.lineNumber, WebInspector.LineLevelProfile.LineDecorator.type);
+          this._uiLocation.lineNumber, WebInspector.LineMarkingProfile.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.LineMarkingProfile.LineDecorator.type, 0);
   }
 };
 
@@ -124,29 +117,28 @@ WebInspector.LineLevelProfile.Presentation = class {
  * @implements {WebInspector.UISourceCodeFrame.LineDecorator}
  * @unrestricted
  */
-WebInspector.LineLevelProfile.LineDecorator = class {
+WebInspector.LineMarkingProfile.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 = 'CodeMirror-gutter-cssTracking';
+
+    var decorations = uiSourceCode.lineDecorations(WebInspector.LineMarkingProfile.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');
+      element.style.backgroundColor = 'red';
       textEditor.setGutterDecoration(decoration.line(), gutterType, element);
     }
   }
 };
 
-WebInspector.LineLevelProfile.LineDecorator.type = 'performance';
+WebInspector.LineMarkingProfile.LineDecorator.type = 'cssTracking';