DevTools: introduce "Track CSS Usage" experiment

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

Index: third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js
diff --git a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js
index f075760e19d973c338122f44eb4ce567ed5c3ce4..27ea99ad9e1f4e66c9ca162904c2d977d9b920bc 100644
--- a/third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js
+++ b/third_party/WebKit/Source/devtools/front_end/timeline/TimelineController.js
@@ -18,6 +18,9 @@ WebInspector.TimelineController = class {
     this._tracingModel = tracingModel;
     this._targets = [];
     WebInspector.targetManager.observeTargets(this);
+
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording'))
+      this._markUnusedCSS = WebInspector.settings.createSetting('timelineMarkUnusedCSS', false);
   }
 
   /**
@@ -74,7 +77,12 @@ WebInspector.TimelineController = class {
     tracingStoppedPromises.push(new Promise(resolve => this._tracingCompleteCallback = resolve));
     tracingStoppedPromises.push(this._stopProfilingOnAllTargets());
     this._target.tracingManager.stop();
-    tracingStoppedPromises.push(WebInspector.targetManager.resumeAllTargets());
+
+    if (!Runtime.experiments.isEnabled('timelineRuleUsageRecording') || !this._markUnusedCSS.get())
+      tracingStoppedPromises.push(WebInspector.targetManager.resumeAllTargets());
+    else
+      this._addUnusedRulesToCoverage();
+
     Promise.all(tracingStoppedPromises).then(() => this._allSourcesFinished());
 
     this._delegate.loadingStarted();
@@ -103,6 +111,28 @@ WebInspector.TimelineController = class {
     // but it's too late. Backend connection is closed.
   }
 
+  _addUnusedRulesToCoverage() {
+    var mainTarget = WebInspector.targetManager.mainTarget();
+    if (!mainTarget)
+      return;
+    var cssModel = WebInspector.CSSModel.fromTarget(mainTarget);
+
+    function ruleListReceived(ruleUsageList) {
+
+      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);
+      }
+    }
+
+    cssModel.ruleListPromise().then(ruleListReceived);
+  }
+
   /**
    * @param {!WebInspector.Target} target
    * @return {!Promise}
@@ -160,7 +190,10 @@ WebInspector.TimelineController = class {
    * @param {function(?string)=} callback
    */
   _startRecordingWithCategories(categories, enableJSSampling, callback) {
-    WebInspector.targetManager.suspendAllTargets();
+
+    if (!Runtime.experiments.isEnabled('timelineRuleUsageRecording') || !this._markUnusedCSS.get())
+      WebInspector.targetManager.suspendAllTargets();
+
     var profilingStartedPromise = enableJSSampling && !Runtime.experiments.isEnabled('timelineTracingJSProfile') ?
         this._startProfilingOnAllTargets() :
         Promise.resolve();