chore: enable object-curly-spacing in ESLint

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
          * Enforced rules
          */
         // syntax preferences
+        "object-curly-spacing": ["error", "always"],
         "quotes": [2, "single", {
             "avoidEscape": true,
             "allowTemplateLiterals": true

packages/create-playwright/tests/integration.spec.ts

@@ -67,9 +67,9 @@ const test = base.extend<TestFixtures>({
   },
 });
 
-for (const packageManager of ['npm', 'yarn'] as ('npm'|'yarn')[]) {
+for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
   test.describe(`Package manager: ${packageManager}`, () => {
-    test.use({packageManager});
+    test.use({ packageManager });
 
     test('should generate a project in the current directory', async ({ run }) => {
       const { exitCode, dir, stdout } = await run([], { installGitHubActions: true, testDir: 'e2e', language: 'TypeScript' });

src/cli/cli.ts

@@ -167,7 +167,7 @@ const browsers = [
   { alias: 'wk', name: 'WebKit', type: 'webkit' },
 ];
 
-for (const {alias, name, type} of browsers) {
+for (const { alias, name, type } of browsers) {
   commandWithOpenOptions(`${alias} [url]`, `open page in ${name}`, [])
       .action(function(url, command) {
         open({ ...command, browser: type }, url, command.target).catch(logErrorAndExit);

src/client/android.ts

@@ -360,7 +360,7 @@ function toSelectorChannel(selector: api.AndroidSelector): channels.AndroidSelec
     focusable,
     focused,
     hasChild: hasChild ? { selector: toSelectorChannel(hasChild.selector) } : undefined,
-    hasDescendant: hasDescendant ? { selector: toSelectorChannel(hasDescendant.selector), maxDepth: hasDescendant.maxDepth} : undefined,
+    hasDescendant: hasDescendant ? { selector: toSelectorChannel(hasDescendant.selector), maxDepth: hasDescendant.maxDepth } : undefined,
     longClickable,
     scrollable,
     selected,

src/client/browserContext.ts

@@ -71,16 +71,16 @@ export class BrowserContext extends ChannelOwner<channels.BrowserContextChannel,
     this.tracing = new Tracing(this);
     this._request = FetchRequest.from(initializer.fetchRequest);
 
-    this._channel.on('bindingCall', ({binding}) => this._onBinding(BindingCall.from(binding)));
+    this._channel.on('bindingCall', ({ binding }) => this._onBinding(BindingCall.from(binding)));
     this._channel.on('close', () => this._onClose());
-    this._channel.on('page', ({page}) => this._onPage(Page.from(page)));
+    this._channel.on('page', ({ page }) => this._onPage(Page.from(page)));
     this._channel.on('route', ({ route, request }) => this._onRoute(network.Route.from(route), network.Request.from(request)));
     this._channel.on('backgroundPage', ({ page }) => {
       const backgroundPage = Page.from(page);
       this._backgroundPages.add(backgroundPage);
       this.emit(Events.BrowserContext.BackgroundPage, backgroundPage);
     });
-    this._channel.on('serviceWorker', ({worker}) => {
+    this._channel.on('serviceWorker', ({ worker }) => {
       const serviceWorker = Worker.from(worker);
       serviceWorker._context = this;
       this._serviceWorkers.add(serviceWorker);

src/client/browserType.ts

@@ -210,7 +210,7 @@ export class BrowserType extends ChannelOwner<channels.BrowserTypeChannel, chann
       throw new Error('Connecting over CDP is only supported in Chromium.');
     const logger = params.logger;
     return this._wrapApiCall(async (channel: channels.BrowserTypeChannel) => {
-      const paramsHeaders = Object.assign({'User-Agent': getUserAgent()}, params.headers);
+      const paramsHeaders = Object.assign({ 'User-Agent': getUserAgent() }, params.headers);
       const headers = paramsHeaders ? headersObjectToArray(paramsHeaders) : undefined;
       const result = await channel.connectOverCDP({
         endpointURL,

src/client/input.ts

@@ -108,7 +108,7 @@ export class Touchscreen implements api.Touchscreen {
 
   async tap(x: number, y: number) {
     await this._page._wrapApiCall(async channel => {
-      await channel.touchscreenTap({x, y});
+      await channel.touchscreenTap({ x, y });
     });
   }
 }

src/client/jsHandle.ts

@@ -30,7 +30,7 @@ export class JSHandle<T = any> extends ChannelOwner<channels.JSHandleChannel, ch
   constructor(parent: ChannelOwner, type: string, guid: string, initializer: channels.JSHandleInitializer) {
     super(parent, type, guid, initializer);
     this._preview = this._initializer.preview;
-    this._channel.on('previewUpdated', ({preview}) => this._preview = preview);
+    this._channel.on('previewUpdated', ({ preview }) => this._preview = preview);
   }
 
   async evaluate<R, Arg>(pageFunction: structs.PageFunctionOn<T, Arg, R>, arg?: Arg): Promise<R> {

src/client/page.ts

@@ -491,7 +491,7 @@ export class Page extends ChannelOwner<channels.PageChannel, channels.PageInitia
     });
   }
 
-  async close(options: { runBeforeUnload?: boolean } = {runBeforeUnload: undefined}) {
+  async close(options: { runBeforeUnload?: boolean } = { runBeforeUnload: undefined }) {
     try {
       await this._wrapApiCall(async (channel: channels.PageChannel) => {
         if (this._ownedContext)

src/dispatchers/browserContextDispatcher.ts

@@ -65,7 +65,7 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
         this._dispatchEvent('backgroundPage', { page: new PageDispatcher(this._scope, page) });
       context.on(CRBrowserContext.CREvents.BackgroundPage, page => this._dispatchEvent('backgroundPage', { page: new PageDispatcher(this._scope, page) }));
       for (const serviceWorker of (context as CRBrowserContext).serviceWorkers())
-        this._dispatchEvent('serviceWorker', { worker: new WorkerDispatcher(this._scope, serviceWorker)});
+        this._dispatchEvent('serviceWorker', { worker: new WorkerDispatcher(this._scope, serviceWorker) });
       context.on(CRBrowserContext.CREvents.ServiceWorker, serviceWorker => this._dispatchEvent('serviceWorker', { worker: new WorkerDispatcher(this._scope, serviceWorker) }));
     }
     context.on(BrowserContext.Events.Request, (request: Request) =>  {
@@ -84,7 +84,7 @@ export class BrowserContextDispatcher extends Dispatcher<BrowserContext, channel
       responseEndTiming: request._responseEndTiming,
       page: PageDispatcher.fromNullable(this._scope, request.frame()._page.initializedOrUndefined())
     }));
-    context.on(BrowserContext.Events.RequestFinished, ({ request, response}: { request: Request, response: Response | null }) => this._dispatchEvent('requestFinished', {
+    context.on(BrowserContext.Events.RequestFinished, ({ request, response }: { request: Request, response: Response | null }) => this._dispatchEvent('requestFinished', {
       request: RequestDispatcher.from(scope, request),
       response: ResponseDispatcher.fromNullable(scope, response),
       responseEndTiming: request._responseEndTiming,

src/dispatchers/browserTypeDispatcher.ts

@@ -56,7 +56,7 @@ export class BrowserTypeDispatcher extends Dispatcher<BrowserType, channels.Brow
     const waitForNextTask = params.slowMo
       ? (cb: () => any) => setTimeout(cb, params.slowMo)
       : makeWaitForNextTask();
-    const paramsHeaders = Object.assign({'User-Agent': getUserAgent()}, params.headers || {});
+    const paramsHeaders = Object.assign({ 'User-Agent': getUserAgent() }, params.headers || {});
     const ws = new WebSocket(params.wsEndpoint, [], {
       perMessageDeflate: false,
       maxPayload: 256 * 1024 * 1024, // 256Mb,

src/server/accessibility.ts

@@ -40,7 +40,7 @@ export class Accessibility {
       interestingOnly = true,
       root = null,
     } = options;
-    const {tree, needle} = await this._getAXTree(root || undefined);
+    const { tree, needle } = await this._getAXTree(root || undefined);
     if (!interestingOnly) {
       if (root)
         return needle && serializeTree(needle)[0];

src/server/browserContext.ts

@@ -76,7 +76,7 @@ export abstract class BrowserContext extends SdkObject {
     this._closePromise = new Promise(fulfill => this._closePromiseFulfill = fulfill);
 
     if (this._options.recordHar)
-      this._harRecorder = new HarRecorder(this, {...this._options.recordHar, path: path.join(this._browser.options.artifactsDir, `${createGuid()}.har`)});
+      this._harRecorder = new HarRecorder(this, { ...this._options.recordHar, path: path.join(this._browser.options.artifactsDir, `${createGuid()}.har`) });
 
     this.tracing = new Tracing(this);
     this.fetchRequest = new BrowserContextFetchRequest(this);

src/server/chromium/chromium.ts

@@ -54,7 +54,7 @@ export class Chromium extends BrowserType {
     controller.setLogName('browser');
     return controller.run(async progress => {
       return await this._connectOverCDPInternal(progress, endpointURL, options);
-    }, TimeoutSettings.timeout({timeout}));
+    }, TimeoutSettings.timeout({ timeout }));
   }
 
   async _connectOverCDPInternal(progress: Progress, endpointURL: string, options: { slowMo?: number, headers?: types.HeadersArray }, onClose?: () => Promise<void>) {

src/server/chromium/crAccessibility.ts

@@ -22,7 +22,7 @@ import * as accessibility from '../accessibility';
 import * as types from '../types';
 
 export async function getAccessibilityTree(client: CRSession, needle?: dom.ElementHandle): Promise<{tree: accessibility.AXNode, needle: accessibility.AXNode | null}> {
-  const {nodes} = await client.send('Accessibility.getFullAXTree');
+  const { nodes } = await client.send('Accessibility.getFullAXTree');
   const tree = CRAXNode.createTree(client, nodes);
   return {
     tree,
@@ -97,7 +97,7 @@ class CRAXNode implements accessibility.AXNode {
 
   async _findElement(element: dom.ElementHandle): Promise<CRAXNode | null> {
     const objectId = element._objectId;
-    const {node: {backendNodeId}} = await this._client.send('DOM.describeNode', { objectId });
+    const { node: { backendNodeId } } = await this._client.send('DOM.describeNode', { objectId });
     const needle = this.find(node => node._payload.backendDOMNodeId === backendNodeId);
     return needle || null;
   }

src/server/chromium/crBrowser.ts

@@ -121,7 +121,7 @@ export class CRBrowser extends Browser {
     await Promise.all([...this._crPages.values()].map(page => page.pageOrError()));
   }
 
-  _onAttachedToTarget({targetInfo, sessionId, waitingForDebugger}: Protocol.Target.attachedToTargetPayload) {
+  _onAttachedToTarget({ targetInfo, sessionId, waitingForDebugger }: Protocol.Target.attachedToTargetPayload) {
     if (targetInfo.type === 'browser')
       return;
     const session = this._connection.session(sessionId)!;

src/server/chromium/crConnection.ts

@@ -172,7 +172,7 @@ export class CRSession extends EventEmitter {
       throw new ProtocolError(true, `Target closed`);
     const id = this._connection._rawSend(this._sessionId, method, params);
     return new Promise((resolve, reject) => {
-      this._callbacks.set(id, {resolve, reject, error: new ProtocolError(false), method});
+      this._callbacks.set(id, { resolve, reject, error: new ProtocolError(false), method });
     });
   }
 

src/server/chromium/crCoverage.ts

@@ -85,7 +85,7 @@ class JSCoverage {
       this._client.send('Profiler.enable'),
       this._client.send('Profiler.startPreciseCoverage', { callCount: true, detailed: true }),
       this._client.send('Debugger.enable'),
-      this._client.send('Debugger.setSkipAllPauses', {skip: true})
+      this._client.send('Debugger.setSkipAllPauses', { skip: true })
     ]);
   }
 
@@ -106,7 +106,7 @@ class JSCoverage {
     if (!event.url && !this._reportAnonymousScripts)
       return;
     // This might fail if the page has already navigated away.
-    const response = await this._client._sendMayFail('Debugger.getScriptSource', {scriptId: event.scriptId});
+    const response = await this._client._sendMayFail('Debugger.getScriptSource', { scriptId: event.scriptId });
     if (response)
       this._scriptSources.set(event.scriptId, response.scriptSource);
   }
@@ -130,7 +130,7 @@ class JSCoverage {
         continue;
       const source = this._scriptSources.get(entry.scriptId);
       if (source)
-        coverage.push({...entry, source});
+        coverage.push({ ...entry, source });
       else
         coverage.push(entry);
     }
@@ -157,7 +157,7 @@ class CSSCoverage {
 
   async start(options: types.CSSCoverageOptions = {}) {
     assert(!this._enabled, 'CSSCoverage is already enabled');
-    const {resetOnNavigation = true} = options;
+    const { resetOnNavigation = true } = options;
     this._resetOnNavigation = resetOnNavigation;
     this._enabled = true;
     this._stylesheetURLs.clear();
@@ -186,7 +186,7 @@ class CSSCoverage {
     if (!header.sourceURL)
       return;
     // This might fail if the page has already navigated away.
-    const response = await this._client._sendMayFail('CSS.getStyleSheetText', {styleSheetId: header.styleSheetId});
+    const response = await this._client._sendMayFail('CSS.getStyleSheetText', { styleSheetId: header.styleSheetId });
     if (response) {
       this._stylesheetURLs.set(header.styleSheetId, header.sourceURL);
       this._stylesheetSources.set(header.styleSheetId, response.text);
@@ -266,7 +266,7 @@ function convertToDisjointRanges(nestedRanges: {
       if (lastResult && lastResult.end === lastOffset)
         lastResult.end = point.offset;
       else
-        results.push({start: lastOffset, end: point.offset});
+        results.push({ start: lastOffset, end: point.offset });
     }
     lastOffset = point.offset;
     if (point.type === 0)

src/server/chromium/crDragDrop.ts

@@ -28,7 +28,7 @@ declare global {
 export class DragManager {
   private _crPage: CRPage;
   private _dragState: Protocol.Input.DragData | null = null;
-  private _lastPosition = {x: 0, y: 0};
+  private _lastPosition = { x: 0, y: 0 };
   constructor(page: CRPage) {
     this._crPage = page;
   }
@@ -50,7 +50,7 @@ export class DragManager {
   }
 
   async interceptDragCausedByMove(x: number, y: number, button: types.MouseButton | 'none', buttons: Set<types.MouseButton>, modifiers: Set<types.KeyboardModifier>, moveCallback: () => Promise<void>): Promise<void> {
-    this._lastPosition = {x, y};
+    this._lastPosition = { x, y };
     if (this._dragState) {
       await this._crPage._mainFrameSession._client.send('Input.dispatchDragEvent', {
         type: 'dragOver',
@@ -75,23 +75,23 @@ export class DragManager {
         const dragListener = (event: Event) => dragEvent = event;
         const mouseListener = () => {
           didStartDrag = new Promise<boolean>(callback => {
-            window.addEventListener('dragstart', dragListener, {once: true, capture: true});
+            window.addEventListener('dragstart', dragListener, { once: true, capture: true });
             setTimeout(() => callback(dragEvent ? !dragEvent.defaultPrevented : false), 0);
           });
         };
-        window.addEventListener('mousemove', mouseListener, {once: true, capture: true});
+        window.addEventListener('mousemove', mouseListener, { once: true, capture: true });
         window.__cleanupDrag = async () => {
           const val = await didStartDrag;
-          window.removeEventListener('mousemove', mouseListener, {capture: true});
-          window.removeEventListener('dragstart', dragListener, {capture: true});
+          window.removeEventListener('mousemove', mouseListener, { capture: true });
+          window.removeEventListener('dragstart', dragListener, { capture: true });
           return val;
         };
       }).toString(), true, 'utility').catch(() => {});
     }));
 
     client.on('Input.dragIntercepted', onDragIntercepted!);
     try {
-      await client.send('Input.setInterceptDrags', {enabled: true});
+      await client.send('Input.setInterceptDrags', { enabled: true });
     } catch {
       // If Input.setInterceptDrags is not supported, just do a regular move.
       // This can be removed once we stop supporting old Electron.
@@ -105,7 +105,7 @@ export class DragManager {
     }))).some(x => x);
     this._dragState = expectingDrag ? (await dragInterceptedPromise).data : null;
     client.off('Input.dragIntercepted', onDragIntercepted!);
-    await client.send('Input.setInterceptDrags', {enabled: false});
+    await client.send('Input.setInterceptDrags', { enabled: false });
 
 
     if (this._dragState) {

src/server/chromium/crExecutionContext.ts

@@ -106,9 +106,9 @@ export class CRExecutionContext implements js.ExecutionContextDelegate {
 
 function rewriteError(error: Error): Protocol.Runtime.evaluateReturnValue {
   if (error.message.includes('Object reference chain is too long'))
-    return {result: {type: 'undefined'}};
+    return { result: { type: 'undefined' } };
   if (error.message.includes('Object couldn\'t be returned by value'))
-    return {result: {type: 'undefined'}};
+    return { result: { type: 'undefined' } };
 
   if (error instanceof TypeError && error.message.startsWith('Converting circular structure to JSON'))
     rewriteErrorMessage(error, error.message + ' Are you passing a nested JSHandle?');

src/server/chromium/crNetworkManager.ts

@@ -105,7 +105,7 @@ export class CRNetworkManager {
         this._client.send('Network.setCacheDisabled', { cacheDisabled: true }),
         this._client.send('Fetch.enable', {
           handleAuthRequests: true,
-          patterns: [{urlPattern: '*', requestStage: 'Request'}, {urlPattern: '*', requestStage: 'Response'}],
+          patterns: [{ urlPattern: '*', requestStage: 'Request' }, { urlPattern: '*', requestStage: 'Response' }],
         }),
       ]);
     } else {
@@ -146,7 +146,7 @@ export class CRNetworkManager {
       response = 'ProvideCredentials';
       this._attemptedAuthentications.add(event.requestId);
     }
-    const {username, password} = this._credentials || {username: undefined, password: undefined};
+    const { username, password } = this._credentials || { username: undefined, password: undefined };
     this._client._sendMayFail('Fetch.continueWithAuth', {
       requestId: event.requestId,
       authChallengeResponse: { response, username, password },

src/server/chromium/crPage.ts

@@ -460,7 +460,7 @@ class FrameSession {
     this._addBrowserListeners();
     const promises: Promise<any>[] = [
       this._client.send('Page.enable'),
-      this._client.send('Page.getFrameTree').then(({frameTree}) => {
+      this._client.send('Page.getFrameTree').then(({ frameTree }) => {
         if (this._isMainFrame()) {
           this._handleFrameTree(frameTree);
           this._addRendererListeners();
@@ -815,7 +815,7 @@ class FrameSession {
   }
 
   _onLogEntryAdded(event: Protocol.Log.entryAddedPayload) {
-    const {level, text, args, source, url, lineNumber} = event.entry;
+    const { level, text, args, source, url, lineNumber } = event.entry;
     if (args)
       args.map(arg => releaseObject(this._client, arg.objectId!));
     if (source !== 'worker') {
@@ -853,7 +853,7 @@ class FrameSession {
   }
 
   _onScreencastFrame(payload: Protocol.Page.screencastFramePayload) {
-    this._client.send('Page.screencastFrameAck', {sessionId: payload.sessionId}).catch(() => {});
+    this._client.send('Page.screencastFrameAck', { sessionId: payload.sessionId }).catch(() => {});
     const buffer = Buffer.from(payload.data, 'base64');
     this._page.emit(Page.Events.ScreencastFrame, {
       buffer,

src/server/chromium/crPdf.ts

@@ -21,17 +21,17 @@ import { CRSession } from './crConnection';
 import { readProtocolStream } from './crProtocolHelper';
 
 const PagePaperFormats: { [key: string]: { width: number, height: number }} = {
-  letter: {width: 8.5, height: 11},
-  legal: {width: 8.5, height: 14},
-  tabloid: {width: 11, height: 17},
-  ledger: {width: 17, height: 11},
-  a0: {width: 33.1, height: 46.8 },
-  a1: {width: 23.4, height: 33.1 },
-  a2: {width: 16.54, height: 23.4 },
-  a3: {width: 11.7, height: 16.54 },
-  a4: {width: 8.27, height: 11.7 },
-  a5: {width: 5.83, height: 8.27 },
-  a6: {width: 4.13, height: 5.83 },
+  letter: { width: 8.5, height: 11 },
+  legal: { width: 8.5, height: 14 },
+  tabloid: { width: 11, height: 17 },
+  ledger: { width: 17, height: 11 },
+  a0: { width: 33.1, height: 46.8 },
+  a1: { width: 23.4, height: 33.1 },
+  a2: { width: 16.54, height: 23.4 },
+  a3: { width: 11.7, height: 16.54 },
+  a4: { width: 8.27, height: 11.7 },
+  a5: { width: 5.83, height: 8.27 },
+  a6: { width: 4.13, height: 5.83 },
 };
 
 const unitToPixels: { [key: string]: number } = {