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

Disable animations for UI regression runs #5

Merged
merged 5 commits into from
Apr 21, 2022
Merged

Disable animations for UI regression runs #5

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
55ca797
Disable animations for UI regression runs
jdlrobson Apr 19, 2022
911b623
Update src/engine-scripts/puppet/jsReady.js
jdlrobson Apr 20, 2022
2f80b61
Use setInterval to evaluate
jdlrobson Apr 20, 2022
ed405db
Wrap rAF in page.evaluate callback
Apr 21, 2022
3378f7b
Revise rAF statement
Apr 21, 2022
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
31 changes: 31 additions & 0 deletions src/engine-scripts/puppet/jsReady.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
module.exports = async (page) => {
await page.emulateMediaFeatures([
{ name: 'prefers-reduced-motion', value: 'reduce' },
]);
await page.evaluate( () => {
window.dispatchEvent( new Event( 'resize' ) );
const skin = mw.config.get( 'skin' );
let moduleName;
switch( skin ) {
case 'vector-2022':
moduleName = 'skins.vector.js';
break;
case 'vector':
moduleName = 'skins.vector.legacy.js';
break;
default:
return true;
}
return mw.loader.getState( moduleName ) === 'ready';
Copy link
Contributor

@nicholasray nicholasray Apr 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be a promise? e.g.

return mw.loader.using( moduleName )

As it stands, it doesn't look like its waiting for the module to finish loading. It looks like it's only checking its current state?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No using would have side effects.

I think I'm getting confused by the evaluate method. I think a setInterval that resolves when this is true is perhaps what I need?

My understanding is evaluate has to resolve to true to avoid timeouts.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latest looks fine to me. I'm curious where you heard that it needs to resolve to true though? The puppeteer docs have examples that don't strictly return true e.g. https://pptr.dev/#?product=Puppeteer&version=v13.6.0&show=api-pageevaluatepagefunction-args

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I was working on the scroll in the other patch, the scroll was synchronois and I was getting time outs if I didn't return something and didn't use an asynchronous function inside evaluate. I have found the documentation a little frustrating as it hasn't matched up with what I've been seeing

});

// wait for animation frame or two.
// Wait until the next frame before resolving.
await new Promise( resolve => {
requestAnimationFrame( () => {
requestAnimationFrame( () => {
resolve();
} );
} );
} );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is currently throwing an error because it needs to go in a page.evaluate, but I'm also wondering if it's needed at this point? Can it be removed or have you had issues without it?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even with the removal of animations we still use requestAnimationFrame for the resize to get it off the critical path so I think this is needed to be 100% sure. Moving it into the evaluate is obviously needed, that's my bad.

I'm wrapping up for the day so feel free to amend while I am out. If not I'll pick this up Monday.

};
3 changes: 3 additions & 0 deletions src/engine-scripts/puppet/onReady.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,8 @@ module.exports = async (page, scenario, vp) => {
await require('./sidebarState')(page, hashtags);
await require('./userMenuState')(page, hashtags);
}

// Make sure the main skin JavaScript module has loaded.
await require('./jsReady')(page);
// add more ready handlers here...
};