chore: Use devtools-protocol package

Rather than maintain our own protocol we can instead use the devtools-protocol package and pin it to the version of Chromium that Puppeteer is shipping with.

The only changes are naming changes between the bespoke protocol that Puppeteer created and the devtools-protocol one.

.eslintignore

@@ -6,8 +6,6 @@ node6/*
 node6-test/*
 experimental/
 lib/
-src/externs.d.ts
-src/protocol.d.ts
 /index.d.ts
 # We ignore this file because it uses ES imports which we don't yet use
 # in the Puppeteer src, so it trips up the ESLint-TypeScript parser.

.travis.yml

@@ -63,7 +63,6 @@ jobs:
       env:
         - CHROMIUM=true
       script:
-        - npm run compare-protocol-d-ts
         - npm run lint
         - npm run test-doclint
         - npm run ensure-new-docs-up-to-date

package.json

@@ -25,12 +25,10 @@
     "doc": "node utils/doclint/cli.js",
     "clean-lib": "rm -rf lib",
     "tsc": "npm run clean-lib && tsc --version && npm run tsc-cjs && npm run tsc-esm",
-    "tsc-cjs": "tsc -p . && cp src/protocol.d.ts lib/cjs",
-    "tsc-esm": "tsc --build tsconfig-esm.json && cp src/protocol.d.ts lib/esm",
+    "tsc-cjs": "tsc -p .",
+    "tsc-esm": "tsc --build tsconfig-esm.json",
     "typecheck": "tsc -p . --noEmit",
     "apply-next-version": "node utils/apply_next_version.js",
-    "update-protocol-d-ts": "node utils/protocol-types-generator update",
-    "compare-protocol-d-ts": "node utils/protocol-types-generator compare",
     "test-install": "scripts/test-install.sh",
     "generate-docs": "npm run tsc && api-extractor run --local --verbose && api-documenter markdown -i temp -o new-docs",
     "ensure-new-docs-up-to-date": "npm run generate-docs && exit `git status --porcelain | head -255 | wc -l`",
@@ -47,6 +45,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "debug": "^4.1.0",
+    "devtools-protocol": "0.0.758979",
     "extract-zip": "^2.0.0",
     "https-proxy-agent": "^4.0.0",
     "mime": "^2.0.3",

src/common/Accessibility.ts

@@ -16,7 +16,7 @@
 
 import { CDPSession } from './Connection';
 import { ElementHandle } from './JSHandle';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 
 /**
  * Represents a Node and the properties of it that are relevant to Accessibility.

src/common/Browser.ts

@@ -19,7 +19,7 @@ import { helper } from './helper';
 import { Target } from './Target';
 import { EventEmitter } from './EventEmitter';
 import { Events } from './Events';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import { Connection } from './Connection';
 import { Page } from './Page';
 import { ChildProcess } from 'child_process';
@@ -273,7 +273,7 @@ export class Browser extends EventEmitter {
   }
 
   private async _targetCreated(
-    event: Protocol.Target.targetCreatedPayload
+    event: Protocol.Target.TargetCreatedEvent
   ): Promise<void> {
     const targetInfo = event.targetInfo;
     const { browserContextId } = targetInfo;
@@ -315,7 +315,7 @@ export class Browser extends EventEmitter {
   }
 
   private _targetInfoChanged(
-    event: Protocol.Target.targetInfoChangedPayload
+    event: Protocol.Target.TargetInfoChangedEvent
   ): void {
     const target = this._targets.get(event.targetInfo.targetId);
     assert(target, 'target should exist before targetInfoChanged');
@@ -501,7 +501,7 @@ export class Browser extends EventEmitter {
     return !this._connection._closed;
   }
 
-  private _getVersion(): Promise<Protocol.Browser.getVersionReturnValue> {
+  private _getVersion(): Promise<Protocol.Browser.GetVersionResponse> {
     return this._connection.send('Browser.getVersion');
   }
 }

src/common/Connection.ts

@@ -19,7 +19,8 @@ import { debug } from './Debug';
 const debugProtocolSend = debug('puppeteer:protocol:SEND ►');
 const debugProtocolReceive = debug('puppeteer:protocol:RECV ◀');
 
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
+import { ProtocolMapping } from 'devtools-protocol/types/protocol-mapping';
 import { ConnectionTransport } from './ConnectionTransport';
 import { EventEmitter } from './EventEmitter';
 
@@ -66,10 +67,10 @@ export class Connection extends EventEmitter {
     return this._url;
   }
 
-  send<T extends keyof Protocol.CommandParameters>(
+  send<T extends keyof ProtocolMapping.Commands>(
     method: T,
-    params?: Protocol.CommandParameters[T]
-  ): Promise<Protocol.CommandReturnValues[T]> {
+    params?: ProtocolMapping.Commands[T]['paramsType'][0]
+  ): Promise<ProtocolMapping.Commands[T]['returnType']> {
     const id = this._rawSend({ method, params });
     return new Promise((resolve, reject) => {
       this._callbacks.set(id, { resolve, reject, error: new Error(), method });
@@ -212,10 +213,10 @@ export class CDPSession extends EventEmitter {
     this._sessionId = sessionId;
   }
 
-  send<T extends keyof Protocol.CommandParameters>(
+  send<T extends keyof ProtocolMapping.Commands>(
     method: T,
-    params?: Protocol.CommandParameters[T]
-  ): Promise<Protocol.CommandReturnValues[T]> {
+    params?: ProtocolMapping.Commands[T]['paramsType'][0]
+  ): Promise<ProtocolMapping.Commands[T]['returnType']> {
     if (!this._connection)
       return Promise.reject(
         new Error(

src/common/Coverage.ts

@@ -16,7 +16,7 @@
 
 import { assert } from './assert';
 import { helper, debugError, PuppeteerEventListener } from './helper';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import { CDPSession } from './Connection';
 
 import { EVALUATION_SCRIPT_URL } from './ExecutionContext';
@@ -223,7 +223,7 @@ class JSCoverage {
   }
 
   async _onScriptParsed(
-    event: Protocol.Debugger.scriptParsedPayload
+    event: Protocol.Debugger.ScriptParsedEvent
   ): Promise<void> {
     // Ignore puppeteer-injected scripts
     if (event.url === EVALUATION_SCRIPT_URL) return;
@@ -246,10 +246,10 @@ class JSCoverage {
     this._enabled = false;
 
     const result = await Promise.all<
-      Protocol.Profiler.takePreciseCoverageReturnValue,
-      Protocol.Profiler.stopPreciseCoverageReturnValue,
-      Protocol.Profiler.disableReturnValue,
-      Protocol.Debugger.disableReturnValue
+      Protocol.Profiler.TakePreciseCoverageResponse,
+      void,
+      void,
+      void
     >([
       this._client.send('Profiler.takePreciseCoverage'),
       this._client.send('Profiler.stopPreciseCoverage'),
@@ -322,9 +322,7 @@ class CSSCoverage {
     this._stylesheetSources.clear();
   }
 
-  async _onStyleSheet(
-    event: Protocol.CSS.styleSheetAddedPayload
-  ): Promise<void> {
+  async _onStyleSheet(event: Protocol.CSS.StyleSheetAddedEvent): Promise<void> {
     const header = event.header;
     // Ignore anonymous scripts
     if (!header.sourceURL) return;

src/common/Dialog.ts

@@ -16,7 +16,7 @@
 
 import { assert } from './assert';
 import { CDPSession } from './Connection';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 
 /**
  * Dialog instances are dispatched by the {@link Page} via the `dialog` event.

src/common/EmulationManager.ts

@@ -15,7 +15,7 @@
  */
 import { CDPSession } from './Connection';
 import { Viewport } from './PuppeteerViewport';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 
 export class EmulationManager {
   _client: CDPSession;

src/common/ExecutionContext.ts

@@ -20,7 +20,7 @@ import { createJSHandle, JSHandle, ElementHandle } from './JSHandle';
 import { CDPSession } from './Connection';
 import { DOMWorld } from './DOMWorld';
 import { Frame } from './FrameManager';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import { EvaluateHandleFn, SerializableOrJSHandle } from './EvalTypes';
 
 export const EVALUATION_SCRIPT_URL = '__puppeteer_evaluation_script__';
@@ -301,7 +301,7 @@ export class ExecutionContext {
       return { value: arg };
     }
 
-    function rewriteError(error: Error): Protocol.Runtime.evaluateReturnValue {
+    function rewriteError(error: Error): Protocol.Runtime.EvaluateResponse {
       if (error.message.includes('Object reference chain is too long'))
         return { result: { type: 'undefined' } };
       if (error.message.includes("Object couldn't be returned by value"))

src/common/FileChooser.ts

@@ -15,7 +15,7 @@
  */
 
 import { ElementHandle } from './JSHandle';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import { assert } from './assert';
 
 /**
@@ -45,7 +45,7 @@ export class FileChooser {
    */
   constructor(
     element: ElementHandle,
-    event: Protocol.Page.fileChooserOpenedPayload
+    event: Protocol.Page.FileChooserOpenedEvent
   ) {
     this._element = element;
     this._multiple = event.mode !== 'selectSingle';

src/common/FrameManager.ts

@@ -28,7 +28,7 @@ import { JSHandle, ElementHandle } from './JSHandle';
 import { MouseButton } from './Input';
 import { Page } from './Page';
 import { HTTPResponse } from './HTTPResponse';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import {
   SerializableOrJSHandle,
   EvaluateHandleFn,
@@ -91,10 +91,7 @@ export class FrameManager extends EventEmitter {
   }
 
   async initialize(): Promise<void> {
-    const result = await Promise.all<
-      Protocol.Page.enableReturnValue,
-      Protocol.Page.getFrameTreeReturnValue
-    >([
+    const result = await Promise.all<{}, Protocol.Page.GetFrameTreeResponse>([
       this._client.send('Page.enable'),
       this._client.send('Page.getFrameTree'),
     ]);
@@ -104,7 +101,7 @@ export class FrameManager extends EventEmitter {
     await Promise.all([
       this._client.send('Page.setLifecycleEventsEnabled', { enabled: true }),
       this._client
-        .send('Runtime.enable', {})
+        .send('Runtime.enable')
         .then(() => this._ensureIsolatedWorld(UTILITY_WORLD_NAME)),
       this._networkManager.initialize(),
     ]);
@@ -193,7 +190,7 @@ export class FrameManager extends EventEmitter {
     return watcher.navigationResponse();
   }
 
-  _onLifecycleEvent(event: Protocol.Page.lifecycleEventPayload): void {
+  _onLifecycleEvent(event: Protocol.Page.LifecycleEventEvent): void {
     const frame = this._frames.get(event.frameId);
     if (!frame) return;
     frame._onLifecycleEvent(event.loaderId, event.name);

src/common/HTTPRequest.ts

@@ -18,7 +18,7 @@ import { Frame } from './FrameManager';
 import { HTTPResponse } from './HTTPResponse';
 import { assert } from './assert';
 import { helper, debugError } from './helper';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 
 /**
  * @public
@@ -123,7 +123,7 @@ export class HTTPRequest {
     frame: Frame,
     interceptionId: string,
     allowInterception: boolean,
-    event: Protocol.Network.requestWillBeSentPayload,
+    event: Protocol.Network.RequestWillBeSentEvent,
     redirectChain: HTTPRequest[]
   ) {
     this._client = client;

src/common/HTTPResponse.ts

@@ -17,7 +17,7 @@ import { CDPSession } from './Connection';
 import { Frame } from './FrameManager';
 import { HTTPRequest } from './HTTPRequest';
 import { SecurityDetails } from './SecurityDetails';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 
 /**
  * @public

src/common/JSHandle.ts

@@ -22,7 +22,7 @@ import { CDPSession } from './Connection';
 import { KeyInput } from './USKeyboardLayout';
 import { FrameManager, Frame } from './FrameManager';
 import { getQueryHandlerAndSelector } from './QueryHandler';
-import Protocol from '../protocol';
+import { Protocol } from 'devtools-protocol';
 import {
   EvaluateFn,
   SerializableOrJSHandle,
@@ -445,11 +445,12 @@ export class ElementHandle<
     };
   }
 
-  private _getBoxModel(): Promise<void | Protocol.DOM.getBoxModelReturnValue> {
+  private _getBoxModel(): Promise<void | Protocol.DOM.GetBoxModelResponse> {
+    const params: Protocol.DOM.GetBoxModelRequest = {
+      objectId: this._remoteObject.objectId,
+    };
     return this._client
-      .send('DOM.getBoxModel', {
-        objectId: this._remoteObject.objectId,
-      })
+      .send('DOM.getBoxModel', params)
       .catch((error) => debugError(error));
   }