[cdp] bring puter changes to chobitsu subtree

Author: velzie

chobitsu/package.json

@@ -14,7 +14,7 @@
   "scripts": {
     "ci": "npm run lint && npm test && npm run build && npm run es5",
     "dev": "node script/build.js && concurrently \"tsc -w --inlineSourceMap\" \"webpack-dev-server --mode=development\"",
-    "build": "rm -rf dist && tsc && webpack --mode=production && node script/build.js",
+    "build": "rm -rf dist && webpack --mode=development && node script/build.js",
     "build:front_end": "cd devtools/devtools-frontend && gn gen out/Default --args=\"is_debug=false\" && autoninja -C out/Default",
     "lint": "eslint src/**/*.ts",
     "test": "karma start",

chobitsu/src/Chobitsu.ts

@@ -67,6 +67,7 @@ export default class Chobitsu {
     try {
       resultMsg.result = await this.callMethod(method, params)
     } catch (e) {
+      console.error(e);
       if (e instanceof ErrorWithCode) {
         resultMsg.error = {
           message: e.message,

chobitsu/src/domains/DOM.ts

@@ -18,6 +18,7 @@ import xpath from 'licia/xpath'
 import concat from 'licia/concat'
 import { setGlobal } from '../lib/evaluate'
 import { createId } from '../lib/util'
+import { getObj } from '../lib/objManager'
 import Protocol from 'devtools-protocol'
 import DOM = Protocol.DOM
 
@@ -93,6 +94,19 @@ function hookAttachShadow() {
 
 hookAttachShadow()
 
+
+export function describeNode(params: DOM.DescribeNodeRequest): DOM.DescribeNodeResponse {
+  let domnode = getObj(params.objectId!);
+
+  let node = nodeManager.wrap(domnode);
+  console.error(node);
+  console.error(getNode(node.nodeId));
+
+  return {
+    node,
+  }
+}
+
 export function getDocument() {
   return {
     root: nodeManager.wrap(document, {
@@ -258,6 +272,35 @@ export function requestChildNodes(params: DOM.RequestChildNodesRequest) {
   })
 }
 
+export function scrollIntoViewIfNeeded(
+  params: DOM.ScrollIntoViewIfNeededRequest
+){
+  let node = getObj(params.objectId!);
+  node.scrollIntoViewIfNeeded();
+}
+export function getContentQuads(
+  params: DOM.GetContentQuadsRequest
+): DOM.GetContentQuadsResponse {
+  const node = getObj(params.objectId!);
+  const rect = node.getBoundingClientRect()
+  const { x, y, width, height } = rect
+
+  const quads = [
+    x,
+    y,
+    x + width,
+    y,
+    x + width,
+    y + height,
+    x,
+    y + height,
+  ]
+
+  return {
+    quads: [quads],
+  }
+}
+
 export function requestNode(
   params: DOM.RequestNodeRequest
 ): DOM.RequestNodeResponse {
@@ -271,7 +314,7 @@ export function requestNode(
 export function resolveNode(
   params: DOM.ResolveNodeRequest
 ): DOM.ResolveNodeResponse {
-  const node = getNode(params.nodeId as number)
+  const node = getNode(params.nodeId || params.backendNodeId as number)
 
   return {
     object: objManager.wrap(node),

chobitsu/src/domains/Input.ts

@@ -65,6 +65,51 @@ export function dispatchMouseEvent(params: Input.DispatchMouseEventRequest) {
   }
 }
 
+export function dispatchKeyEvent(params: Input.DispatchKeyEventRequest) {
+  let { type, text, key, code, modifiers } = params
+  modifiers ??= 0
+
+  const event = new KeyboardEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    composed: true,
+    key,
+    code,
+    altKey: !!(modifiers & 1),
+    ctrlKey: !!(modifiers & 2),
+    metaKey: !!(modifiers & 4),
+    shiftKey: !!(modifiers & 8),
+  })
+
+  if (text) {
+    Object.defineProperty(event, 'data', {
+      get() {
+        return text
+      },
+    })
+  }
+  if (params.type == "keyDown") {
+    let active = document.activeElement as HTMLInputElement | HTMLTextAreaElement;
+    if (active && (active.tagName === 'INPUT' || active.tagName === 'TEXTAREA')) {
+      if (key === "Enter") {
+        if (active.form) {
+          active.form.requestSubmit();
+        }
+      }
+
+
+
+      // If the active element is an input or textarea, set the value
+      if (text) {
+        active.value += text;
+        active.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  }
+
+  document.dispatchEvent(event)
+}
+
 function triggerMouseEvent(type: string, el: Element, x: number, y: number) {
   el.dispatchEvent(
     new MouseEvent(type, {

chobitsu/src/domains/Page.ts

@@ -19,6 +19,58 @@ import * as resources from '../lib/resources'
 import Protocol from 'devtools-protocol'
 import Page = Protocol.Page
 
+
+declare var $chobitsuPageId: string;
+export function getFrameTree(): Page.GetFrameTreeResponse {
+  return {
+    frameTree: {
+      frame: {
+        id: $chobitsuPageId,
+        mimeType: 'text/html',
+        securityOrigin: getOrigin(),
+        url: getUrl(),
+        loaderId: $chobitsuPageId,
+        domainAndRegistry: getOrigin(),
+        secureContextType: 'Secure',
+        crossOriginIsolatedContextType: 'NotIsolated',
+        gatedAPIFeatures: [],
+      },
+      childFrames: [],
+    }
+  }
+}
+export function createIsolatedWorld(params: Page.CreateIsolatedWorldRequest): Page.CreateIsolatedWorldResponse {
+  console.log(params);
+
+  // fake context
+  connector.trigger('Runtime.executionContextCreated', {
+    context: {
+      id: 2,
+      origin: getOrigin(),
+      name: params.worldName,
+      auxData: {
+        isDefault: false,
+        type: 'isolated',
+        frameId: params.frameId,
+      },
+    },
+  })
+  return {
+    executionContextId: 1, // This should be a unique identifier for the execution context
+  }
+}
+
+export function setLifecycleEventsEnabled(params: Page.SetLifecycleEventsEnabledRequest) {
+  return {}
+}
+
+export function addScriptToEvaluateOnNewDocument(params: Page.AddScriptToEvaluateOnNewDocumentRequest): Page.AddScriptToEvaluateOnNewDocumentResponse{
+  console.log(params);
+  return {
+    identifier: '1', // This should be a unique identifier for the script
+  }
+}
+
 let proxy = ''
 
 export function setProxy(params: any) {

chobitsu/src/domains/Runtime.ts

@@ -41,20 +41,35 @@ export async function callFunctionOn(
     ctx = objManager.getObj(objectId)
   }
 
+  let object = await callFn(functionDeclaration, args, ctx);
+  let result = objManager.wrap(object, {
+    generatePreview: true,
+  });
+  if (params.returnByValue) {
+    result.value  = structuredClone(object);
+  }
+
   return {
-    result: objManager.wrap(await callFn(functionDeclaration, args, ctx)),
+    result,
   }
 }
 
 let isEnable = false
 
+
+declare var $chobitsuPageId: string;
 export function enable() {
   isEnable = true
   each(triggers, trigger => trigger())
   triggers = []
 
   trigger('Runtime.executionContextCreated', {
     context: executionContext,
+    auxData: {
+      isDefault: true,
+      type: 'default',
+      frameId: $chobitsuPageId,
+    },
   })
 }
 

chobitsu/src/lib/nodeManager.ts

@@ -38,6 +38,7 @@ export function wrap(node: any, { depth = 1 } = {}) {
     nodeType: node.nodeType,
     localName: node.localName || '',
     nodeValue: node.nodeValue || '',
+    attributes: [],
     nodeId,
     backendNodeId: nodeId,
   }

chobitsu/tsconfig.json

@@ -7,10 +7,10 @@
     "strictPropertyInitialization": false,
     "removeComments": true,
     "noUnusedLocals": true,
-    "target": "ES5",
+    "target": "ES2020",
     "declaration": true,
     "esModuleInterop": true,
-    "lib": ["DOM", "ES2015"]
+    "lib": ["DOM", "ES2020"]
   },
   "include": ["src/**/*"]
 }

chobitsu/webpack.config.js

@@ -7,6 +7,7 @@ const banner = pkg.name + ' v' + pkg.version + ' ' + pkg.homepage
 module.exports = {
   entry: './src/index.ts',
   devtool: 'source-map',
+  target: 'web',
   output: {
     filename: 'chobitsu.js',
     path: path.resolve(__dirname, 'dist'),
@@ -30,15 +31,6 @@ module.exports = {
         test: /\.ts$/,
         use: ['ts-loader'],
       },
-      {
-        test: /\.js$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env'],
-          },
-        },
-      },
       {
         test: /\.css$/,
         use: [