DevTools: introduce "Track CSS Usage" experiment

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

 /*
  * Copyright (C) 2012 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 63 matching lines @@
     /** @type {!Array.<!WebInspector.TimelineModeView>} */
     this._currentViews = [];
 
     this._captureNetworkSetting = WebInspector.settings.createSetting('timelineCaptureNetwork', false);
     this._captureJSProfileSetting = WebInspector.settings.createSetting('timelineEnableJSSampling', true);
     this._captureMemorySetting = WebInspector.settings.createSetting('timelineCaptureMemory', false);
     this._captureLayersAndPicturesSetting =
         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();
 
     var timelinePane = new WebInspector.VBox();
     timelinePane.show(this.element);
     var topPaneElement = timelinePane.element.createChild('div', 'hbox');
     topPaneElement.id = 'timeline-overview-panel';
 
     // Create top overview component.
     this._overviewPane = new WebInspector.TimelineOverviewPane('timeline');
@@ skipping 263 matching lines @@
           WebInspector.UIString('Memory'), this._captureMemorySetting,
           WebInspector.UIString('Capture memory information on every timeline event.')));
       this._panelToolbar.appendToolbarItem(this._createSettingCheckbox(
           WebInspector.UIString('Paint'), this._captureLayersAndPicturesSetting,
           WebInspector.UIString(
               'Capture graphics layer positions and rasterization draw calls. (Has large performance overhead)')));
     } else {
       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);
 
     this._panelToolbar.appendSeparator();
     var garbageCollectButton =
         new WebInspector.ToolbarButton(WebInspector.UIString('Collect garbage'), 'garbage-collect-toolbar-item');
     garbageCollectButton.addEventListener('click', this._garbageCollectButtonClicked, this);
     this._panelToolbar.appendToolbarItem(garbageCollectButton);
 
@@ skipping 190 matching lines @@
    * @param {boolean} userInitiated
    */
   _startRecording(userInitiated) {
     console.assert(!this._statusPane, 'Status pane is already opened.');
     var mainTarget = WebInspector.targetManager.mainTarget();
     if (!mainTarget)
       return;
     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(
         true, this._captureJSProfileSetting.get(), this._captureMemorySetting.get(),
         this._captureLayersAndPicturesSetting.get(),
         this._captureFilmStripSetting && this._captureFilmStripSetting.get());
 
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStarted();
 
@@ skipping 35 matching lines @@
       this._stopRecording();
   }
 
   _garbageCollectButtonClicked() {
     var targets = WebInspector.targetManager.targets();
     for (var i = 0; i < targets.length; ++i)
       targets[i].heapProfilerAgent().collectGarbage();
   }
 
   _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();
     this._showRecordingHelpMessage();
 
     this.requestWindowTimes(0, Infinity);
     delete this._selection;
     this._frameModel.reset();
     this._filmStripModel.reset(this._tracingModel);
     this._overviewPane.reset();
@@ skipping 113 matching lines @@
       this._statusPane.updateStatus(WebInspector.UIString('Processing timeline\u2026'));
     this._model.setEvents(this._tracingModel, loadedFromFile);
     this._frameModel.reset();
     this._frameModel.addTraceEvents(
         WebInspector.targetManager.mainTarget(), this._model.inspectedTargetEvents(), this._model.sessionId() || '');
     this._filmStripModel.reset(this._tracingModel);
     var groups = WebInspector.TimelineModel.AsyncEventGroup;
     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;
     this._overviewPane.reset();
     this._overviewPane.setBounds(this._model.minimumRecordTime(), this._model.maximumRecordTime());
     this._setAutoWindowTimes();
     this._refreshViews();
     for (var i = 0; i < this._overviewControls.length; ++i)
       this._overviewControls[i].timelineStopped();
     this._setMarkers();
@@ skipping 1221 matching lines @@
   /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
     if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code) {
       event.preventDefault();
       this._apply();
     }
   }
 };