fix(click): don't timeout when innerWidth is modified (#2669)

We were evaluating `innerWidth` in the main context, where it could be modified.

src/chromium/crPage.ts

@@ -255,11 +255,6 @@ export class CRPage implements PageDelegate {
     return this._sessionForHandle(handle)._getContentQuads(handle);
   }
 
-  async layoutViewport(): Promise<{ width: number, height: number }> {
-    const layoutMetrics = await this._mainFrameSession._client.send('Page.getLayoutMetrics');
-    return { width: layoutMetrics.layoutViewport.clientWidth, height: layoutMetrics.layoutViewport.clientHeight };
-  }
-
   async setInputFiles(handle: dom.ElementHandle<HTMLInputElement>, files: types.FilePayload[]): Promise<void> {
     await handle._evaluateInUtility(([injected, node, files]) =>
       injected.setInputFiles(node, files), dom.toFileTransferPayload(files));

src/dom.ts

@@ -241,7 +241,7 @@ export class ElementHandle<T extends Node = Node> extends js.JSHandle<T> {
 
     const [quads, metrics] = await Promise.all([
       this._page._delegate.getContentQuads(this),
-      this._page._delegate.layoutViewport(),
+      this._page.mainFrame()._utilityContext().then(utility => utility.evaluateInternal(() => ({width: innerWidth, height: innerHeight}))),
     ] as const);
     if (!quads || !quads.length)
       return 'notvisible';

src/firefox/ffPage.ts

@@ -438,10 +438,6 @@ export class FFPage implements PageDelegate {
     return result.quads.map(quad => [ quad.p1, quad.p2, quad.p3, quad.p4 ]);
   }
 
-  async layoutViewport(): Promise<{ width: number, height: number }> {
-    return this._page.evaluate(() => ({ width: innerWidth, height: innerHeight }));
-  }
-
   async setInputFiles(handle: dom.ElementHandle<HTMLInputElement>, files: types.FilePayload[]): Promise<void> {
     await handle._evaluateInUtility(([injected, node, files]) =>
       injected.setInputFiles(node, files), dom.toFileTransferPayload(files));

src/page.ts

@@ -64,7 +64,6 @@ export interface PageDelegate {
   getContentFrame(handle: dom.ElementHandle): Promise<frames.Frame | null>;  // Only called for frame owner elements.
   getOwnerFrame(handle: dom.ElementHandle): Promise<string | null>; // Returns frameId.
   getContentQuads(handle: dom.ElementHandle): Promise<types.Quad[] | null>;
-  layoutViewport(): Promise<{ width: number, height: number }>;
   setInputFiles(handle: dom.ElementHandle<HTMLInputElement>, files: types.FilePayload[]): Promise<void>;
   getBoundingBox(handle: dom.ElementHandle): Promise<types.Rect | null>;
   getFrameElement(frame: frames.Frame): Promise<dom.ElementHandle>;

src/webkit/wkPage.ts

@@ -781,10 +781,6 @@ export class WKPage implements PageDelegate {
     ]);
   }
 
-  async layoutViewport(): Promise<{ width: number, height: number }> {
-    return this._page.evaluate(() => ({ width: innerWidth, height: innerHeight }));
-  }
-
   async setInputFiles(handle: dom.ElementHandle<HTMLInputElement>, files: types.FilePayload[]): Promise<void> {
     const objectId = handle._objectId;
     await this._session.send('DOM.setInputFiles', { objectId, files: dom.toFileTransferPayload(files) });

test/click.spec.js

@@ -768,6 +768,12 @@ describe('Page.click', function() {
     expect(await page.evaluate(() => window.button1)).toBe(true);
     expect(await page.evaluate(() => window.button2)).toBe(undefined);
   });
+  it('should click the button when window.innerWidth is corrupted', async({page, server}) => {
+    await page.goto(server.PREFIX + '/input/button.html');
+    await page.evaluate(() => window.innerWidth = 0);
+    await page.click('button');
+    expect(await page.evaluate(() => result)).toBe('Clicked');
+  });
 });
 
 describe('Page.check', function() {