Remove prefers-reduced-motion emulation (#27)

Unfortunately, the `transition-duration` in
Ie1c6c1ba7263c232d874263fdae7427a5ec489f6 is causing elements to behave in an
unpredictable manner. Removing the `prefers-reduced-motion` is now more
stable/predictable than using it.

Also, wait until next frame in `fastForwardAnimations`. Note there is still some
flakiness with the visibility of the mobile sidebar that needs to be sorted out
but this should help with the other random stuff.

src/engine-scripts/puppet/fastForwardAnimations.js

@@ -9,7 +9,7 @@
  * @param {import("puppeteer").Page} page
  */
 async function fastForwardAnimations( page ) {
-	return page.evaluate( () => {
+	return page.evaluate( async () => {
 		// Adapted from https://github.com/microsoft/playwright/blob/0a401b2d86a39df85e57ad30bcec9ef81618abd0/packages/playwright-core/src/server/screenshotter.ts#L174
 		document.getAnimations().forEach( ( animation ) => {
 			if ( animation.playbackRate === 0 || !animation.effect ) {
@@ -22,6 +22,15 @@ async function fastForwardAnimations( page ) {
 				animation.cancel();
 			}
 		} );
+
+		// Wait until the next frame before resolving.
+		return new Promise( ( resolve ) => {
+			requestAnimationFrame( () => {
+				requestAnimationFrame( () => {
+					resolve();
+				} );
+			} );
+		} );
 	} );
 }
 

src/engine-scripts/puppet/jsReady.js

@@ -5,9 +5,6 @@
  * @param {import("puppeteer").Page} page
  */
 module.exports = async ( page ) => {
-	await page.emulateMediaFeatures( [
-		{ name: 'prefers-reduced-motion', value: 'reduce' }
-	] );
 	await page.evaluate( async () => {
 		// eslint-disable-next-line no-undef
 		const skin = mw.config.get( 'skin' );

src/engine-scripts/puppet/menuState.js

@@ -33,7 +33,7 @@ const menuState = async ( page, buttonSelector, isClosed ) => {
 	}, buttonSelector, isClosed );
 
 	// Vector-2022 menus currently have transition animations when opened.
-	fastForwardAnimations( page );
+	await fastForwardAnimations( page );
 };
 
 module.exports = menuState;