Add files using upload-large-folder tool

2b2ba56 verified about 1 month ago

6.14 kB

// The one Chrome DevTools Protocol client for the desktop perf harness.
//
// Before this, every measure-*/profile-* script shipped its own copy-pasted
// `CDP` class (four subtly different implementations), its own `/json` vs
// `/json/list` target discovery, and its own Profiler ranking. Scenarios now
// import from here so there is a single place to fix a protocol bug.

const DEFAULT_PORT = 9222

// Stable DOM hooks the renderer exposes. Centralised so a component refactor
// updates one constant instead of a dozen scattered querySelector strings.
export const SELECTORS = {
  composer: '[data-slot="composer-rich-input"]',
  threadViewport: '[data-slot="aui_thread-viewport"]',
  threadContent: '[data-slot="aui_thread-content"]',
  assistantMessage: '[data-slot="aui_assistant-message-root"]',
  turnPair: '[data-slot="aui_turn-pair"]',
  profileRail: '[data-slot="profile-rail"]',
  rowButton: '[data-slot="row-button"]'
}

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

/**
 * Poll the CDP HTTP endpoint until a page target is available.
 * @param {object} [opts]
 * @param {number} [opts.port] remote-debugging-port (default 9222).
 * @param {string} [opts.match] substring the target URL must contain (e.g. a dev-server port).
 * @param {number} [opts.timeoutMs] how long to wait for a target.
 */
export async function discoverTarget({ port = DEFAULT_PORT, match, timeoutMs = 30000 } = {}) {
  const deadline = Date.now() + timeoutMs

  for (;;) {
    try {
      const list = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json()
      const pages = list.filter(t => t.type === 'page' && typeof t.webSocketDebuggerUrl === 'string')
      const target = match
        ? pages.find(t => String(t.url).includes(match))
        : pages.find(t => String(t.url).startsWith('http')) ?? pages[0]

      if (target) {
        return target
      }
    } catch {
      // debug port not up yet — keep polling until the deadline.
    }

    if (Date.now() >= deadline) {
      throw new Error(`no CDP page target on :${port}${match ? ` matching "${match}"` : ''} within ${timeoutMs}ms`)
    }

    await sleep(250)
  }
}

export class CDP {
  constructor(ws) {
    this.ws = ws
    this.id = 0
    this.pending = new Map()
    this.listeners = new Map()
  }

  static async open(url) {
    const ws = new WebSocket(url)

    await new Promise((resolve, reject) => {
      ws.addEventListener('open', resolve, { once: true })
      ws.addEventListener('error', reject, { once: true })
    })

    const cdp = new CDP(ws)

    ws.addEventListener('message', ev => {
      const m = JSON.parse(typeof ev.data === 'string' ? ev.data : ev.data.toString('utf8'))

      if (m.id != null && cdp.pending.has(m.id)) {
        const { resolve, reject } = cdp.pending.get(m.id)
        cdp.pending.delete(m.id)

        if (m.error) {
          reject(new Error(m.error.message))
        } else {
          resolve(m.result)
        }
      } else if (m.method) {
        for (const handler of cdp.listeners.get(m.method) ?? []) {
          handler(m.params)
        }
      }
    })

    ws.addEventListener('close', () => {
      for (const { reject } of cdp.pending.values()) {
        reject(new Error('CDP socket closed'))
      }

      cdp.pending.clear()
    })

    return cdp
  }

  /** Connect straight to a discovered target. */
  static async connect(opts) {
    const target = await discoverTarget(opts)

    return CDP.open(target.webSocketDebuggerUrl)
  }

  send(method, params = {}) {
    const id = ++this.id

    return new Promise((resolve, reject) => {
      this.pending.set(id, { resolve, reject })
      this.ws.send(JSON.stringify({ id, method, params }))
    })
  }

  on(method, handler) {
    if (!this.listeners.has(method)) {
      this.listeners.set(method, [])
    }

    this.listeners.get(method).push(handler)
  }

  /** Evaluate an expression in the page and return its value (awaits promises). */
  async eval(expression) {
    const r = await this.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true })

    if (r.exceptionDetails) {
      throw new Error(r.exceptionDetails.exception?.description || r.exceptionDetails.text || 'eval failed')
    }

    return r.result.value
  }

  close() {
    this.ws.close()
  }
}

/** Assert the renderer has the dev-only `__PERF_DRIVE__` harness attached. */
export async function requireDriver(cdp) {
  const ok = await cdp.eval('!!(window.__PERF_DRIVE__ && window.__PERF_DRIVE__.stream)')

  if (!ok) {
    throw new Error(
      '__PERF_DRIVE__ not on window. The perf harness needs a DEV renderer ' +
        '(perf-probe.tsx is excluded from production builds). Launch with `npm run perf:serve`.'
    )
  }
}

/** Type real key events into the composer, one char at a time, at `cps` chars/sec. */
export async function typeIntoComposer(cdp, text, { cps = 15 } = {}) {
  await cdp.eval(`(() => {
    const el = document.querySelector(${JSON.stringify(SELECTORS.composer)})
    if (!el) return false
    el.focus()
    const range = document.createRange()
    range.selectNodeContents(el)
    range.collapse(false)
    const sel = window.getSelection()
    sel.removeAllRanges()
    sel.addRange(range)
    return true
  })()`)

  const intervalMs = Math.max(1, Math.round(1000 / cps))

  for (const ch of text) {
    await cdp.send('Input.dispatchKeyEvent', { type: 'char', text: ch, unmodifiedText: ch })
    await sleep(intervalMs)
  }
}

/**
 * Run `body()` while a V8 CPU profile is recording. Returns
 * `{ result, profile }`; the caller decides whether to write the .cpuprofile.
 */
export async function withCpuProfile(cdp, body, { samplingIntervalUs = 100 } = {}) {
  await cdp.send('Profiler.enable')
  await cdp.send('Profiler.setSamplingInterval', { interval: samplingIntervalUs })
  await cdp.send('Profiler.start')

  let result
  let stopped

  try {
    result = await body()
  } finally {
    // Always stop so a scenario error can't leave the profiler running.
    stopped = await cdp.send('Profiler.stop')
  }

  return { result, profile: stopped.profile }
}

export { sleep }

	// The one Chrome DevTools Protocol client for the desktop perf harness.
	//
	// Before this, every measure-/profile- script shipped its own copy-pasted
	// `CDP` class (four subtly different implementations), its own `/json` vs
	// `/json/list` target discovery, and its own Profiler ranking. Scenarios now
	// import from here so there is a single place to fix a protocol bug.

	const DEFAULT_PORT = 9222

	// Stable DOM hooks the renderer exposes. Centralised so a component refactor
	// updates one constant instead of a dozen scattered querySelector strings.
	export const SELECTORS = {
	composer: '[data-slot="composer-rich-input"]',
	threadViewport: '[data-slot="aui_thread-viewport"]',
	threadContent: '[data-slot="aui_thread-content"]',
	assistantMessage: '[data-slot="aui_assistant-message-root"]',
	turnPair: '[data-slot="aui_turn-pair"]',
	profileRail: '[data-slot="profile-rail"]',
	rowButton: '[data-slot="row-button"]'
	}

	const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))

	/**
	* Poll the CDP HTTP endpoint until a page target is available.
	* @param {object} [opts]
	* @param {number} [opts.port] remote-debugging-port (default 9222).
	* @param {string} [opts.match] substring the target URL must contain (e.g. a dev-server port).
	* @param {number} [opts.timeoutMs] how long to wait for a target.
	*/
	export async function discoverTarget({ port = DEFAULT_PORT, match, timeoutMs = 30000 } = {}) {
	const deadline = Date.now() + timeoutMs

	for (;;) {
	try {
	const list = await (await fetch(`http://127.0.0.1:${port}/json/list`)).json()
	const pages = list.filter(t => t.type === 'page' && typeof t.webSocketDebuggerUrl === 'string')
	const target = match
	? pages.find(t => String(t.url).includes(match))
	: pages.find(t => String(t.url).startsWith('http')) ?? pages[0]

	if (target) {
	return target
	}
	} catch {
	// debug port not up yet — keep polling until the deadline.
	}

	if (Date.now() >= deadline) {
	throw new Error(`no CDP page target on :${port}${match ? ` matching "${match}"` : ''} within ${timeoutMs}ms`)
	}

	await sleep(250)
	}
	}

	export class CDP {
	constructor(ws) {
	this.ws = ws
	this.id = 0
	this.pending = new Map()
	this.listeners = new Map()
	}

	static async open(url) {
	const ws = new WebSocket(url)

	await new Promise((resolve, reject) => {
	ws.addEventListener('open', resolve, { once: true })
	ws.addEventListener('error', reject, { once: true })
	})

	const cdp = new CDP(ws)

	ws.addEventListener('message', ev => {
	const m = JSON.parse(typeof ev.data === 'string' ? ev.data : ev.data.toString('utf8'))

	if (m.id != null && cdp.pending.has(m.id)) {
	const { resolve, reject } = cdp.pending.get(m.id)
	cdp.pending.delete(m.id)

	if (m.error) {
	reject(new Error(m.error.message))
	} else {
	resolve(m.result)
	}
	} else if (m.method) {
	for (const handler of cdp.listeners.get(m.method) ?? []) {
	handler(m.params)
	}
	}
	})

	ws.addEventListener('close', () => {
	for (const { reject } of cdp.pending.values()) {
	reject(new Error('CDP socket closed'))
	}

	cdp.pending.clear()
	})

	return cdp
	}

	/** Connect straight to a discovered target. */
	static async connect(opts) {
	const target = await discoverTarget(opts)

	return CDP.open(target.webSocketDebuggerUrl)
	}

	send(method, params = {}) {
	const id = ++this.id

	return new Promise((resolve, reject) => {
	this.pending.set(id, { resolve, reject })
	this.ws.send(JSON.stringify({ id, method, params }))
	})
	}

	on(method, handler) {
	if (!this.listeners.has(method)) {
	this.listeners.set(method, [])
	}

	this.listeners.get(method).push(handler)
	}

	/** Evaluate an expression in the page and return its value (awaits promises). */
	async eval(expression) {
	const r = await this.send('Runtime.evaluate', { expression, returnByValue: true, awaitPromise: true })

	if (r.exceptionDetails) {
	throw new Error(r.exceptionDetails.exception?.description \|\| r.exceptionDetails.text \|\| 'eval failed')
	}

	return r.result.value
	}

	close() {
	this.ws.close()
	}
	}

	/** Assert the renderer has the dev-only `__PERF_DRIVE__` harness attached. */
	export async function requireDriver(cdp) {
	const ok = await cdp.eval('!!(window.__PERF_DRIVE__ && window.__PERF_DRIVE__.stream)')

	if (!ok) {
	throw new Error(
	'__PERF_DRIVE__ not on window. The perf harness needs a DEV renderer ' +
	'(perf-probe.tsx is excluded from production builds). Launch with `npm run perf:serve`.'
	)
	}
	}

	/** Type real key events into the composer, one char at a time, at `cps` chars/sec. */
	export async function typeIntoComposer(cdp, text, { cps = 15 } = {}) {
	await cdp.eval(`(() => {
	const el = document.querySelector(${JSON.stringify(SELECTORS.composer)})
	if (!el) return false
	el.focus()
	const range = document.createRange()
	range.selectNodeContents(el)
	range.collapse(false)
	const sel = window.getSelection()
	sel.removeAllRanges()
	sel.addRange(range)
	return true
	})()`)

	const intervalMs = Math.max(1, Math.round(1000 / cps))

	for (const ch of text) {
	await cdp.send('Input.dispatchKeyEvent', { type: 'char', text: ch, unmodifiedText: ch })
	await sleep(intervalMs)
	}
	}

	/**
	* Run `body()` while a V8 CPU profile is recording. Returns
	* `{ result, profile }`; the caller decides whether to write the .cpuprofile.
	*/
	export async function withCpuProfile(cdp, body, { samplingIntervalUs = 100 } = {}) {
	await cdp.send('Profiler.enable')
	await cdp.send('Profiler.setSamplingInterval', { interval: samplingIntervalUs })
	await cdp.send('Profiler.start')

	let result
	let stopped

	try {
	result = await body()
	} finally {
	// Always stop so a scenario error can't leave the profiler running.
	stopped = await cdp.send('Profiler.stop')
	}

	return { result, profile: stopped.profile }
	}

	export { sleep }