DevTools: introduce "Track CSS Usage" experiment

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
+
+/** @typedef {!{range: !Protocol.CSS.SourceRange, styleSheetId: !Protocol.CSS.StyleSheetId, wasUsed: boolean}} */
+WebInspector.CSSModel.RuleUsage;
+
 /**
  * @implements {WebInspector.TargetManager.Observer}
  * @implements {WebInspector.TracingManagerClient}
  * @unrestricted
  */
 WebInspector.TimelineController = class {
   /**
    * @param {!WebInspector.Target} target
    * @param {!WebInspector.TimelineLifecycleDelegate} delegate
    * @param {!WebInspector.TracingModel} tracingModel
    */
   constructor(target, delegate, tracingModel) {
     this._delegate = delegate;
     this._target = target;
     this._tracingModel = tracingModel;
     this._targets = [];
     WebInspector.targetManager.observeTargets(this);
+
+    if (Runtime.experiments.isEnabled('timelineRuleUsageRecording'))
+      this._markUnusedCSS = WebInspector.settings.createSetting('timelineMarkUnusedCSS', false);
   }
 
   /**
    * @param {boolean} captureCauses
    * @param {boolean} enableJSSampling
    * @param {boolean} captureMemory
    * @param {boolean} capturePictures
    * @param {boolean} captureFilmStrip
    */
   startRecording(captureCauses, enableJSSampling, captureMemory, capturePictures, captureFilmStrip) {
@@ skipping 36 matching lines @@
 
     var categories = categoriesArray.join(',');
     this._startRecordingWithCategories(categories, enableJSSampling);
   }
 
   stopRecording() {
     var tracingStoppedPromises = [];
     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();
 
     for (var traceProvider of this._extensionTraceProviders)
       traceProvider.stop();
   }
 
   /**
    * @override
    * @param {!WebInspector.Target} target
    */
   targetAdded(target) {
     this._targets.push(target);
     if (this._profiling)
       this._startProfilingOnTarget(target);
   }
 
   /**
    * @override
    * @param {!WebInspector.Target} target
    */
   targetRemoved(target) {
     this._targets.remove(target, true);
     // FIXME: We'd like to stop profiling on the target and retrieve a profile
     // but it's too late. Backend connection is closed.
   }
 
+  _addUnusedRulesToCoverage() {
+    var mainTarget = WebInspector.targetManager.mainTarget();
+    if (!mainTarget)
+      return;
+    var cssModel = WebInspector.CSSModel.fromTarget(mainTarget);
+
+    /**
+     * @param {!Array<!WebInspector.CSSModel.RuleUsage>} ruleUsageList
+     */
+    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}
    */
   _startProfilingOnTarget(target) {
     return target.hasJSCapability() ? target.profilerAgent().start() : Promise.resolve();
   }
 
   /**
    * @return {!Promise}
@@ skipping 37 matching lines @@
     this._profiling = false;
     return Promise.all(targets.map(this._stopProfilingOnTarget, this));
   }
 
   /**
    * @param {string} categories
    * @param {boolean=} enableJSSampling
    * @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();
     var samplingFrequencyHz = WebInspector.moduleSetting('highResolutionCpuProfiling').get() ? 10000 : 1000;
     var options = 'sampling-frequency=' + samplingFrequencyHz;
     var target = this._target;
     var tracingManager = target.tracingManager;
     WebInspector.targetManager.suspendReload(target);
     profilingStartedPromise.then(tracingManager.start.bind(tracingManager, this, categories, options, onTraceStarted));
     /**
@@ skipping 91 matching lines @@
     this._delegate.recordingProgress(usage);
   }
 
   /**
    * @param {number} progress
    * @override
    */
   eventsRetrievalProgress(progress) {
     this._delegate.loadingProgress(progress);
   }
-};
+};