Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

core(stylesheets): disable transient stylesheet detection #16121

Merged
merged 2 commits into from
Jul 23, 2024
Merged

core(stylesheets): disable transient stylesheet detection #16121

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d10ea2d
core(stylesheets): disable transient stylesheet detection
adamraine Jul 17, 2024
832c100
Merge branch 'main' into no-transient-stylesheets
adamraine Jul 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 8 additions & 39 deletions core/gather/gatherers/stylesheets.js
View file
Open in desktop
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
View file
Open in desktop
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
Loading