Repository: GoogleChrome/lighthouse
Pull request #12527 (2021-05-20 16:11:24)

core(fr): convert tags-blocking-first-paint gatherer
Ref #11313



Patch:
diff --git a/lighthouse-core/fraggle-rock/config/default-config.js b/lighthouse-core/fraggle-rock/config/default-config.js
index 97acd6034..87c52160d 100644
--- a/lighthouse-core/fraggle-rock/config/default-config.js
+++ b/lighthouse-core/fraggle-rock/config/default-config.js
@@ -38,6 +38,7 @@ const artifacts = {
   RobotsTxt: '',
   SourceMaps: '',
   Stacks: '',
+  TagsBlockingFirstPaint: '',
   TapTargets: '',
   TraceElements: '',
   ViewportDimensions: '',
@@ -84,6 +85,7 @@ const defaultConfig = {
     {id: artifacts.RobotsTxt, gatherer: 'seo/robots-txt'},
     {id: artifacts.SourceMaps, gatherer: 'source-maps'},
     {id: artifacts.Stacks, gatherer: 'stacks'},
+    {id: artifacts.TagsBlockingFirstPaint, gatherer: 'dobetterweb/tags-blocking-first-paint'},
     {id: artifacts.TapTargets, gatherer: 'seo/tap-targets'},
     {id: artifacts.TraceElements, gatherer: 'trace-elements'},
     {id: artifacts.ViewportDimensions, gatherer: 'viewport-dimensions'},
@@ -132,6 +134,7 @@ const defaultConfig = {
         artifacts.RobotsTxt,
         artifacts.SourceMaps,
         artifacts.Stacks,
+        artifacts.TagsBlockingFirstPaint,
         artifacts.TapTargets,
         artifacts.TraceElements,
         artifacts.ViewportDimensions,
diff --git a/lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js b/lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js
index 288fa7c57..4f7baac99 100644
--- a/lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js
+++ b/lighthouse-core/gather/gatherers/dobetterweb/tags-blocking-first-paint.js
@@ -18,14 +18,15 @@
 
 'use strict';
 
-const Gatherer = require('../gatherer.js');
+const NetworkRecords = require('../../../computed/network-records.js');
+const DevtoolsLog = require('../devtools-log.js');
+const FRGatherer = require('../../../fraggle-rock/gather/base-gatherer.js');
 
 /* global document, window, performance, HTMLLinkElement, SVGScriptElement */
 
 /** @typedef {{href: string, media: string, msSinceHTMLEnd: number, matches: boolean}} MediaChange */
 /** @typedef {{tagName: 'LINK', url: string, href: string, rel: string, media: string, disabled: boolean, mediaChanges: Array<MediaChange>}} LinkTag */
 /** @typedef {{tagName: 'SCRIPT', url: string, src: string}} ScriptTag */
-/** @typedef {import('../../driver.js')} Driver */
 
 /* c8 ignore start */
 function installMediaListener() {
@@ -113,7 +114,13 @@ async function collectTagsThatBlockFirstPaint() {
 }
 /* c8 ignore stop */
 
-class TagsBlockingFirstPaint extends Gatherer {
+class TagsBlockingFirstPaint extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta<'DevtoolsLog'>} */
+  meta = {
+    supportedModes: ['navigation'],
+    dependencies: {DevtoolsLog: DevtoolsLog.symbol},
+  }
+
   /**
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
    * @return {Map<string, LH.Artifacts.NetworkRequest>}
@@ -143,7 +150,7 @@ class TagsBlockingFirstPaint extends Gatherer {
   }
 
   /**
-   * @param {Driver} driver
+   * @param {LH.Gatherer.FRTransitionalDriver} driver
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
    * @return {Promise<Array<LH.Artifacts.TagBlockingFirstPaint>>}
    */
@@ -200,14 +207,24 @@ class TagsBlockingFirstPaint extends Gatherer {
   }
 
   /**
-   * @param {LH.Gatherer.PassContext} passContext
+   * @param {LH.Gatherer.FRTransitionalContext} context
    */
-  async beforePass(passContext) {
-    const {executionContext} = passContext.driver;
+  async startSensitiveInstrumentation(context) {
+    const {executionContext} = context.driver;
     // Don't return return value of `evaluateOnNewDocument`.
     await executionContext.evaluateOnNewDocument(installMediaListener, {args: []});
   }
 
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext<'DevtoolsLog'>} context
+   * @return {Promise<LH.Artifacts['TagsBlockingFirstPaint']>}
+   */
+  async getArtifact(context) {
+    const devtoolsLog = context.dependencies.DevtoolsLog;
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    return TagsBlockingFirstPaint.findBlockingTags(context.driver, networkRecords);
+  }
+
   /**
    * @param {LH.Gatherer.PassContext} passContext
    * @param {LH.Gatherer.LoadData} loadData
diff --git a/types/artifacts.d.ts b/types/artifacts.d.ts
index df157bd4c..7baf0255c 100644
--- a/types/artifacts.d.ts
+++ b/types/artifacts.d.ts
@@ -28,7 +28,6 @@ declare global {
       | 'MixedContent'
       | 'ScriptElements'
       | 'ServiceWorker'
-      | 'TagsBlockingFirstPaint'
       | keyof FRBaseArtifacts
     >;
 


Test patch:
diff --git a/lighthouse-core/test/gather/gatherers/dobetterweb/tags-blocking-first-paint-test.js b/lighthouse-core/test/gather/gatherers/dobetterweb/tags-blocking-first-paint-test.js
index 30119abb4..bc1a3ffea 100644
--- a/lighthouse-core/test/gather/gatherers/dobetterweb/tags-blocking-first-paint-test.js
+++ b/lighthouse-core/test/gather/gatherers/dobetterweb/tags-blocking-first-paint-test.js
@@ -9,7 +9,8 @@
 
 const TagsBlockingFirstPaint =
     require('../../../../gather/gatherers/dobetterweb/tags-blocking-first-paint.js');
-const assert = require('assert').strict;
+const {createMockContext} = require('../../../fraggle-rock/gather/mock-driver.js');
+
 let tagsBlockingFirstPaint;
 const traceData = {
   networkRecords: [
@@ -150,13 +151,11 @@ describe('First paint blocking tags', () => {
       src: 'http://google.com/js/app.js',
     };
 
-    const artifact = await tagsBlockingFirstPaint.afterPass({
-      driver: {executionContext: {
-        evaluate() {
-          return Promise.resolve([linkDetails, linkDetails, scriptDetails]);
-        },
-      }},
-    }, traceData);
+    const mockContext = createMockContext();
+    mockContext.driver._executionContext.evaluate
+      .mockResolvedValue([linkDetails, linkDetails, scriptDetails]);
+
+    const artifact = await tagsBlockingFirstPaint.afterPass(mockContext, traceData);
 
     const expected = [
       {
@@ -172,6 +171,6 @@ describe('First paint blocking tags', () => {
         endTime: 22,
       },
     ];
-    assert.deepEqual(artifact, expected);
+    expect(artifact).toEqual(expected);
   });
 });