Skip to content

Commit

Permalink
core(stylesheets): disable transient stylesheet detection (#16121)
Browse files Browse the repository at this point in the history
  • Loading branch information
adamraine authored Jul 23, 2024
1 parent 83fbc11 commit cd21fa3
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 40 deletions.
47 changes: 8 additions & 39 deletions core/gather/gatherers/stylesheets.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,63 +60,32 @@ class Stylesheets extends BaseGatherer {

/**
* @param {LH.Gatherer.Context} context
* @return {Promise<LH.Artifacts['Stylesheets']>}
*/
async startInstrumentation(context) {
async getArtifact(context) {
const executionContext = context.driver.executionContext;
const session = context.driver.defaultSession;
this._session = session;

// Calling `CSS.enable` will emit events for stylesheets currently on the page.
// We want to ignore these events in navigation mode because they are not relevant to the
// navigation that is about to happen. Adding the event listener *after* calling `CSS.enable`
// ensures that the events for pre-existing stylesheets are ignored.
const isNavigation = context.gatherMode === 'navigation';
if (!isNavigation) {
session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
}
session.on('CSS.styleSheetAdded', this._onStylesheetAdded);

await session.sendCommand('DOM.enable');
await session.sendCommand('CSS.enable');

if (isNavigation) {
session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
}
}

// Force style to recompute.
// Doesn't appear to be necessary in newer versions of Chrome.
await executionContext.evaluateAsync('getComputedStyle(document.body)');

/**
* @param {LH.Gatherer.Context} context
*/
async stopInstrumentation(context) {
const session = context.driver.defaultSession;
session.off('CSS.styleSheetAdded', this._onStylesheetAdded);

// Ensure we finish fetching all stylesheet contents before disabling the CSS domain
await Promise.all(this._sheetPromises.values());
const sheets = await Promise.all(this._sheetPromises.values());

await session.sendCommand('CSS.disable');
await session.sendCommand('DOM.disable');
}

/**
* @param {LH.Gatherer.Context} context
* @return {Promise<LH.Artifacts['Stylesheets']>}
*/
async getArtifact(context) {
const executionContext = context.driver.executionContext;

if (context.gatherMode === 'snapshot') {
await this.startInstrumentation(context);

// Force style to recompute.
// Doesn't appear to be necessary in newer versions of Chrome.
await executionContext.evaluateAsync('getComputedStyle(document.body)');

await this.stopInstrumentation(context);
}

/** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
const dedupedStylesheets = new Map();
const sheets = await Promise.all(this._sheetPromises.values());

for (const sheet of sheets) {
// Erroneous sheets will be reported via sentry and the log.
Expand Down
3 changes: 2 additions & 1 deletion core/test/gather/gatherers/stylesheets-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@ describe('Stylesheets gatherer', () => {
.mockEvent('CSS.styleSheetAdded', {header: {styleSheetId: '2'}});
context.driver.defaultSession.sendCommand
.mockResponse('DOM.enable')
.mockResponse('CSS.enable')
// @ts-expect-error - Force events to emit.
.mockResponse('CSS.enable', flushAllTimersAndMicrotasks)
.mockResponse('CSS.getStyleSheetText', () => {
throw new Error('Sheet not found');
})
Expand Down

0 comments on commit cd21fa3

Please sign in to comment.