github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: move all emulation state to a state wrapper (#10930)

Browse Source
This commit is contained in:
Alex Rudenko 2023-09-18 19:38:39 +02:00 committed by GitHub
parent c49320ee87
commit fd72101f7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 106 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

269
packages/puppeteer-core/src/cdp/EmulationManager.ts
View File

@ -78,6 +78,7 @@ interface JavascriptEnabledState {
interface ClientProvider { interface ClientProvider {
clients(): CDPSession[]; clients(): CDPSession[];
registerState(state: EmulatedState<any>): void;
} }
class EmulatedState<T extends {active: boolean}> { class EmulatedState<T extends {active: boolean}> {
@ -93,6 +94,7 @@ class EmulatedState<T extends {active: boolean}> {
this.#state = initialState; this.#state = initialState;
this.#clientProvider = clientProvider; this.#clientProvider = clientProvider;
this.#updater = updater; this.#updater = updater;
this.#clientProvider.registerState(this);
} }
async setState(state: T): Promise<void> { async setState(state: T): Promise<void> {
@ -100,6 +102,10 @@ class EmulatedState<T extends {active: boolean}> {
await this.sync(); await this.sync();
} }
get state(): T {
return this.#state;
}
async sync(): Promise<void> { async sync(): Promise<void> {
await Promise.all( await Promise.all(
this.#clientProvider.clients().map(client => { this.#clientProvider.clients().map(client => {
@ -118,6 +124,8 @@ export class EmulationManager {
#emulatingMobile = false; #emulatingMobile = false;
#hasTouch = false; #hasTouch = false;
#states: Array<EmulatedState<any>> = [];
#viewportState = new EmulatedState<ViewportState>( #viewportState = new EmulatedState<ViewportState>(
{ {
active: false, active: false,
@ -125,34 +133,70 @@ export class EmulationManager {
this, this,
this.#applyViewport this.#applyViewport
); );
#idleOverridesState: IdleOverridesState = { #idleOverridesState = new EmulatedState<IdleOverridesState>(
active: false, {
}; active: false,
#timezoneState: TimezoneState = { },
active: false, this,
}; this.#emulateIdleState
#visionDeficiencyState: VisionDeficiencyState = { );
active: false, #timezoneState = new EmulatedState<TimezoneState>(
}; {
#cpuThrottlingState: CpuThrottlingState = { active: false,
active: false, },
}; this,
#mediaFeaturesState: MediaFeaturesState = { this.#emulateTimezone
active: false, );
}; #visionDeficiencyState = new EmulatedState<VisionDeficiencyState>(
#mediaTypeState: MediaTypeState = { {
active: false, active: false,
}; },
#geoLocationState: GeoLocationState = { this,
active: false, this.#emulateVisionDeficiency
}; );
#defaultBackgroundColorState: DefaultBackgroundColorState = { #cpuThrottlingState = new EmulatedState<CpuThrottlingState>(
active: false, {
}; active: false,
#javascriptEnabledState: JavascriptEnabledState = { },
javaScriptEnabled: true, this,
active: false, this.#emulateCpuThrottling
}; );
#mediaFeaturesState = new EmulatedState<MediaFeaturesState>(
{
active: false,
},
this,
this.#emulateMediaFeatures
);
#mediaTypeState = new EmulatedState<MediaTypeState>(
{
active: false,
},
this,
this.#emulateMediaType
);
#geoLocationState = new EmulatedState<GeoLocationState>(
{
active: false,
},
this,
this.#setGeolocation
);
#defaultBackgroundColorState = new EmulatedState<DefaultBackgroundColorState>(
{
active: false,
},
this,
this.#setDefaultBackgroundColor
);
#javascriptEnabledState = new EmulatedState<JavascriptEnabledState>(
{
javaScriptEnabled: true,
active: false,
},
this,
this.#setJavaScriptEnabled
);
#secondaryClients = new Set<CDPSession>(); #secondaryClients = new Set<CDPSession>();
@ -165,6 +209,14 @@ export class EmulationManager {
this.#secondaryClients.delete(client); this.#secondaryClients.delete(client);
} }
registerState(state: EmulatedState<any>): void {
this.#states.push(state);
}
clients(): CDPSession[] {
return [this.#client, ...Array.from(this.#secondaryClients)];
}
async registerSpeculativeSession(client: CDPSession): Promise<void> { async registerSpeculativeSession(client: CDPSession): Promise<void> {
this.#secondaryClients.add(client); this.#secondaryClients.add(client);
client.once(CDPSessionEvent.Disconnected, () => { client.once(CDPSessionEvent.Disconnected, () => {
@ -172,24 +224,15 @@ export class EmulationManager {
}); });
// We don't await here because we want to register all state changes before // We don't await here because we want to register all state changes before
// the target is unpaused. // the target is unpaused.
void this.#viewportState.sync().catch(debugError); void Promise.all(
void this.#syncIdleState().catch(debugError); this.#states.map(s => {
void this.#syncTimezoneState().catch(debugError); return s.sync().catch(debugError);
void this.#syncVisionDeficiencyState().catch(debugError); })
void this.#syncCpuThrottlingState().catch(debugError); );
void this.#syncMediaFeaturesState().catch(debugError);
void this.#syncMediaTypeState().catch(debugError);
void this.#syncGeoLocationState().catch(debugError);
void this.#syncDefaultBackgroundColorState().catch(debugError);
void this.#syncJavaScriptEnabledState().catch(debugError);
} }
get javascriptEnabled(): boolean { get javascriptEnabled(): boolean {
return this.#javascriptEnabledState.javaScriptEnabled; return this.#javascriptEnabledState.state.javaScriptEnabled;
}
clients(): CDPSession[] {
return [this.#client, ...Array.from(this.#secondaryClients)];
} }
async emulateViewport(viewport: Viewport): Promise<boolean> { async emulateViewport(viewport: Viewport): Promise<boolean> {
@ -245,20 +288,10 @@ export class EmulationManager {
isUserActive: boolean; isUserActive: boolean;
isScreenUnlocked: boolean; isScreenUnlocked: boolean;
}): Promise<void> { }): Promise<void> {
this.#idleOverridesState = { await this.#idleOverridesState.setState({
active: true, active: true,
overrides, overrides,
}; });
await this.#syncIdleState();
}
async #syncIdleState() {
await Promise.all([
this.#emulateIdleState(this.#client, this.#idleOverridesState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateIdleState(client, this.#idleOverridesState);
}),
]);
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -299,21 +332,11 @@ export class EmulationManager {
} }
} }
async #syncTimezoneState() {
await Promise.all([
this.#emulateTimezone(this.#client, this.#timezoneState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateTimezone(client, this.#timezoneState);
}),
]);
}
async emulateTimezone(timezoneId?: string): Promise<void> { async emulateTimezone(timezoneId?: string): Promise<void> {
this.#timezoneState = { await this.#timezoneState.setState({
timezoneId, timezoneId,
active: true, active: true,
}; });
await this.#syncTimezoneState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -329,18 +352,6 @@ export class EmulationManager {
}); });
} }
async #syncVisionDeficiencyState() {
await Promise.all([
this.#emulateVisionDeficiency(this.#client, this.#visionDeficiencyState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateVisionDeficiency(
client,
this.#visionDeficiencyState
);
}),
]);
}
async emulateVisionDeficiency( async emulateVisionDeficiency(
type?: Protocol.Emulation.SetEmulatedVisionDeficiencyRequest['type'] type?: Protocol.Emulation.SetEmulatedVisionDeficiencyRequest['type']
): Promise<void> { ): Promise<void> {
@ -358,11 +369,10 @@ export class EmulationManager {
!type || visionDeficiencies.has(type), !type || visionDeficiencies.has(type),
`Unsupported vision deficiency: ${type}` `Unsupported vision deficiency: ${type}`
); );
this.#visionDeficiencyState = { await this.#visionDeficiencyState.setState({
active: true, active: true,
visionDeficiency: type, visionDeficiency: type,
}; });
await this.#syncVisionDeficiencyState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -378,25 +388,15 @@ export class EmulationManager {
}); });
} }
async #syncCpuThrottlingState() {
await Promise.all([
this.#emulateCpuThrottling(this.#client, this.#cpuThrottlingState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateCpuThrottling(client, this.#cpuThrottlingState);
}),
]);
}
async emulateCPUThrottling(factor: number | null): Promise<void> { async emulateCPUThrottling(factor: number | null): Promise<void> {
assert( assert(
factor === null || factor >= 1, factor === null || factor >= 1,
'Throttling rate should be greater or equal to 1' 'Throttling rate should be greater or equal to 1'
); );
this.#cpuThrottlingState = { await this.#cpuThrottlingState.setState({
active: true, active: true,
factor: factor ?? undefined, factor: factor ?? undefined,
}; });
await this.#syncCpuThrottlingState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -412,15 +412,6 @@ export class EmulationManager {
}); });
} }
async #syncMediaFeaturesState() {
await Promise.all([
this.#emulateMediaFeatures(this.#client, this.#mediaFeaturesState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateMediaFeatures(client, this.#mediaFeaturesState);
}),
]);
}
async emulateMediaFeatures(features?: MediaFeature[]): Promise<void> { async emulateMediaFeatures(features?: MediaFeature[]): Promise<void> {
if (Array.isArray(features)) { if (Array.isArray(features)) {
for (const mediaFeature of features) { for (const mediaFeature of features) {
@ -433,11 +424,10 @@ export class EmulationManager {
); );
} }
} }
this.#mediaFeaturesState = { await this.#mediaFeaturesState.setState({
active: true, active: true,
mediaFeatures: features, mediaFeatures: features,
}; });
await this.#syncMediaFeaturesState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -453,15 +443,6 @@ export class EmulationManager {
}); });
} }
async #syncMediaTypeState() {
await Promise.all([
this.#emulateMediaType(this.#client, this.#mediaTypeState),
...Array.from(this.#secondaryClients).map(client => {
return this.#emulateMediaType(client, this.#mediaTypeState);
}),
]);
}
async emulateMediaType(type?: string): Promise<void> { async emulateMediaType(type?: string): Promise<void> {
assert( assert(
type === 'screen' || type === 'screen' ||
@ -469,11 +450,10 @@ export class EmulationManager {
(type ?? undefined) === undefined, (type ?? undefined) === undefined,
'Unsupported media type: ' + type 'Unsupported media type: ' + type
); );
this.#mediaTypeState = { await this.#mediaTypeState.setState({
type, type,
active: true, active: true,
}; });
await this.#syncMediaTypeState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -496,15 +476,6 @@ export class EmulationManager {
); );
} }
async #syncGeoLocationState() {
await Promise.all([
this.#setGeolocation(this.#client, this.#geoLocationState),
...Array.from(this.#secondaryClients).map(client => {
return this.#setGeolocation(client, this.#geoLocationState);
}),
]);
}
async setGeolocation(options: GeolocationOptions): Promise<void> { async setGeolocation(options: GeolocationOptions): Promise<void> {
const {longitude, latitude, accuracy = 0} = options; const {longitude, latitude, accuracy = 0} = options;
if (longitude < -180 || longitude > 180) { if (longitude < -180 || longitude > 180) {
@ -522,15 +493,14 @@ export class EmulationManager {
`Invalid accuracy "${accuracy}": precondition 0 <= ACCURACY failed.` `Invalid accuracy "${accuracy}": precondition 0 <= ACCURACY failed.`
); );
} }
this.#geoLocationState = { await this.#geoLocationState.setState({
active: true, active: true,
geoLocation: { geoLocation: {
longitude, longitude,
latitude, latitude,
accuracy, accuracy,
}, },
}; });
await this.#syncGeoLocationState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -546,41 +516,24 @@ export class EmulationManager {
}); });
} }
async #syncDefaultBackgroundColorState() {
await Promise.all([
this.#setDefaultBackgroundColor(
this.#client,
this.#defaultBackgroundColorState
),
...Array.from(this.#secondaryClients).map(client => {
return this.#setDefaultBackgroundColor(
client,
this.#defaultBackgroundColorState
);
}),
]);
}
/** /**
* Resets default white background * Resets default white background
*/ */
async resetDefaultBackgroundColor(): Promise<void> { async resetDefaultBackgroundColor(): Promise<void> {
this.#defaultBackgroundColorState = { await this.#defaultBackgroundColorState.setState({
active: true, active: true,
color: undefined, color: undefined,
}; });
await this.#syncDefaultBackgroundColorState();
} }
/** /**
* Hides default white background * Hides default white background
*/ */
async setTransparentBackgroundColor(): Promise<void> { async setTransparentBackgroundColor(): Promise<void> {
this.#defaultBackgroundColorState = { await this.#defaultBackgroundColorState.setState({
active: true, active: true,
color: {r: 0, g: 0, b: 0, a: 0}, color: {r: 0, g: 0, b: 0, a: 0},
}; });
await this.#syncDefaultBackgroundColorState();
} }
@invokeAtMostOnceForArguments @invokeAtMostOnceForArguments
@ -596,20 +549,10 @@ export class EmulationManager {
}); });
} }
async #syncJavaScriptEnabledState() {
await Promise.all([
this.#setJavaScriptEnabled(this.#client, this.#javascriptEnabledState),
...Array.from(this.#secondaryClients).map(client => {
return this.#setJavaScriptEnabled(client, this.#javascriptEnabledState);
}),
]);
}
async setJavaScriptEnabled(enabled: boolean): Promise<void> { async setJavaScriptEnabled(enabled: boolean): Promise<void> {
this.#javascriptEnabledState = { await this.#javascriptEnabledState.setState({
active: true, active: true,
javaScriptEnabled: enabled, javaScriptEnabled: enabled,
}; });
await this.#syncJavaScriptEnabledState();
} }
} }