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..7a25c383008f5b33673cb2ca07f7df70c4c70fbd 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,
+          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'))

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

Also check the setting here.

+      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'))
+      WebInspector.LineMarkingProfile.instance().reset();
+
     WebInspector.LineLevelProfile.instance().reset();
     this._tracingModel.reset();
     this._model.reset();
@@ -762,6 +778,28 @@ 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')) {
+      var cssModel = WebInspector.CSSModel.fromTarget(WebInspector.targetManager.mainTarget());
+
+      function ruleListReceived(ruleUsageList) {
+        if (!ruleUsageList)
+          return;
+
+        for (var i = 0; i < ruleUsageList.length; ++i) {

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

for (var rule of ruleUsageList)

+          if (!ruleUsageList[i].wasUsed) {

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

if (!rule.wasUsed)
  continue;

+
+            var styleSheetHeader = cssModel.styleSheetHeaderForId(ruleUsageList[i].styleSheetId);
+            var url = styleSheetHeader.sourceURL;
+
+            WebInspector.LineMarkingProfile.instance().appendUnusedRule(url, ruleUsageList[i].range.startLine);
+          }
+        }
+      }
+
+      cssModel.ruleListPromise().then(ruleListReceived);
+    }
+
     if (this._statusPane)
       this._statusPane.hide();
     delete this._statusPane;