DevTools: introduce "Track CSS Usage" experiment

third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
index a0f40b06ee1e006f99fb00392c97750976cda153..1aab1df31a8b3cdc7a85c9ec1b563a7ecc19ce4f 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelinePanel.js
@@ -81,6 +81,10 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
         WebInspector.settings.createSetting('timelineCaptureLayersAndPictures', false);
     this._captureFilmStripSetting = WebInspector.settings.createSetting('timelineCaptureFilmStrip', false);
 
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording')) {
+      this._markUnusedCSS = WebInspector.settings.createSetting('timelineMarkUnusedCSS', false);
+    }
+
     this._panelToolbar = new WebInspector.Toolbar('', this.element);
     this._createToolbarItems();
 
@@ -364,6 +368,12 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
       this._panelToolbar.appendToolbarItem(screenshotCheckbox);
     }
 
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording')) {
+      this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
+          WebInspector.UIString('Audits'), this._markUnusedCSS,

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

Audits is too generic. Maybe "CSS coverage"?

+          WebInspector.UIString('Mark unused CSS in souces.')));
+    }
+
     this._captureNetworkSetting.addChangeListener(this._onNetworkChanged, this);
     this._captureMemorySetting.addChangeListener(this._onModeChanged, this);
     this._captureFilmStripSetting.addChangeListener(this._onModeChanged, this);
@@ -574,6 +584,9 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
     this._setState(WebInspector.TimelinePanel.State.StartPending);
     this._showRecordingStarted();
 
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get())

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

ditto for ths._markUnusedCSS being undefined. Just create the setting
unconditionally.

+      WebInspector.CSSModel.fromTarget(mainTarget).startRuleUsageTracking();
+
     this._autoRecordGeneration = userInitiated ? null : Symbol('Generation');
     this._controller = new WebInspector.TimelineController(mainTarget, this, this._tracingModel);
     this._controller.startRecording(
@@ -629,6 +642,9 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
   }
 
   _clear() {
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get())

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

ditto

+      WebInspector.CoverageProfile.instance().reset();
+
     WebInspector.LineLevelProfile.instance().reset();
     this._tracingModel.reset();
     this._model.reset();
@@ -762,6 +778,31 @@ WebInspector.TimelinePanel = class extends WebInspector.Panel {
     var asyncEventsByGroup = this._model.mainThreadAsyncEvents();
     this._irModel.populate(asyncEventsByGroup.get(groups.input), asyncEventsByGroup.get(groups.animation));
     this._model.cpuProfiles().forEach(profile => WebInspector.LineLevelProfile.instance().appendCPUProfile(profile));
+
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording') && this._markUnusedCSS.get()) {

[caseq, 2016/11/08 01:54:11]

Let's extract this into a separate function at least -- and it should be called
when we finish live recording rather than upon loadingComplete. Consider
TimelineController?

+      var mainTarget = WebInspector.targetManager.mainTarget();
+      if (!mainTarget)
+        return;
+      var cssModel = WebInspector.CSSModel.fromTarget(mainTarget);
+
+      function ruleListReceived(ruleUsageList) {

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

Annotate

+        if (!ruleUsageList)

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

why can it be null?

+          return;
+
+        for (var rule of ruleUsageList) {
+          if (rule.wasUsed)
+            continue;
+
+          var styleSheetHeader = cssModel.styleSheetHeaderForId(rule.styleSheetId);
+          var url = styleSheetHeader.sourceURL;
+
+          WebInspector.CoverageProfile.instance().appendUnusedRule(url, rule.range.startLine);
+        }
+      }
+
+      cssModel.ruleListPromise().then(ruleListReceived);
+    }
+
     if (this._statusPane)
       this._statusPane.hide();
     delete this._statusPane;