scale browser correctly

Author: christian-bromann

packages/app/src/components/browser/snapshot.ts

@@ -35,7 +35,9 @@ export class DevtoolsBrowser extends Element {
       width: 100%;
       height: 100%;
       display: flex;
-      padding: 2rem;
+      margin: 2rem;
+      align-items: center;
+      justify-content: center;
     }
 
     .frame-dot {
@@ -58,6 +60,7 @@ export class DevtoolsBrowser extends Element {
 
   async connectedCallback() {
     super.connectedCallback()
+    window.addEventListener('resize', this.#setIframeSize.bind(this))
     window.addEventListener('window-drag', this.#setIframeSize.bind(this))
     window.addEventListener('app-mutation-highlight', this.#highlightMutation.bind(this))
     await this.updateComplete
@@ -70,16 +73,36 @@ export class DevtoolsBrowser extends Element {
       return
     }
 
+    this.section.style.width = 'auto'
+    this.section.style.height = 'auto'
+
     this.iframe.removeAttribute('style')
-    const frameSize = this.section.getBoundingClientRect()
+    const viewportWidth = this.data.metadata.viewport.width
+    const viewportHeight = this.data.metadata.viewport.height
+    const frameSize = this.getBoundingClientRect()
     const headerSize = this.header.getBoundingClientRect()
-    this.iframe.style.width = `${frameSize.width}px`
-    this.iframe.style.height = `${frameSize.height - headerSize.height}px`
+
+    let scale = frameSize.width / viewportWidth
+    if (scale > 0.85) {
+      /**
+       * Make sure we stop scaling at 85% of the viewport width to ensure
+       * we keep the aspect ratio. We substract 0.05 to have a bit of a
+       * padding
+       */
+      scale = (frameSize.height / viewportHeight) - 0.05
+    }
+
+    this.section.style.width = `${viewportWidth * scale}px`
+    this.section.style.height = `${Math.min(frameSize.height, viewportHeight * scale)}px`
+    this.iframe.style.width = `${viewportWidth}px`
+    // this.iframe.style.height = `${(Math.min(frameSize.height, viewportHeight * scale) - headerSize.height)}px`
+    this.iframe.style.height = `${viewportHeight - (headerSize.height / scale)}px`
+    this.iframe.style.transform = `scale(${scale})`
   }
 
-  async #renderNewDocument (doc: Document) {
+  async #renderNewDocument (doc: SimplifiedVNode) {
     const root = transform(doc)
-    const baseTag = h('base', { href: 'https://selenium.dev' })
+    const baseTag = h('base', { href: this.data.metadata.url })
     const head: VNode<{}> | undefined = (root.props.children as VNode[])
       .filter(Boolean)
       .find((node) => node!.type === 'head')
@@ -102,24 +125,32 @@ export class DevtoolsBrowser extends Element {
     if (!docEl) {
       return
     }
+
+    /**
+     * remove script tags from application as we are only interested in the static
+     * representation of the page
+     */
+    [...this.#vdom.querySelectorAll('script')].forEach((el) => el.remove())
+
     docEl.ownerDocument.replaceChild(this.#vdom, docEl)
   }
 
-  async #handleMutation (mutation: MutationRecord) {
+  async #handleMutation (mutation: TraceMutation) {
     if (!this.iframe) {
       await this.updateComplete
     }
 
     const hasRenderedFrame = this.iframe?.contentDocument?.documentElement
       .querySelectorAll('*').length === 2 // only body and head are in an empty iframe
-    if (hasRenderedFrame) {
-      return this.#renderNewDocument(mutation.addedNodes[0] as Document)
+    const doc = mutation.addedNodes[0]
+    if (hasRenderedFrame && typeof doc !== 'string') {
+      return this.#renderNewDocument(doc)
     }
 
     // TODO: handle mutations
   }
 
-  #highlightMutation (ev: CustomEvent<MutationRecord>) {
+  #highlightMutation (ev: CustomEvent<TraceMutation>) {
     const mutation = ev.detail
     const docEl = this.iframe?.contentDocument
     if (!docEl) {
@@ -153,7 +184,7 @@ export class DevtoolsBrowser extends Element {
             ${this.data.metadata.url}
           </div>
         </header>
-        <iframe></iframe>
+        <iframe class="origin-top-left"></iframe>
       </section>
     `
   }

packages/app/src/components/header.ts

@@ -39,6 +39,7 @@ export class DevtoolsHeader extends Element {
       <icon-custom-logo class="p-2 dark:p-2 h-full"></icon-custom-logo>
       <h1 class="font-bold text-white">WebdriverIO Devtools</h1>
       <nav class="ml-auto mr-2">
+        <button>Docs</button>
         <button class="p-2" @click="${this.#switchMode}">
           <icon-mdi-moon-waning-crescent class="${this.#darkMode ? 'hidden' : 'show'}"></icon-mdi-moon-waning-crescent>
           <icon-mdi-white-balance-sunny class="${this.#darkMode ? 'show' : 'hidden'}"></icon-mdi-white-balance-sunny>

packages/app/src/components/workbench/actions.ts

@@ -2,6 +2,7 @@ import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
+import type { CommandLog } from '@devtools/hook/types'
 
 import { context, type TraceLog } from '../../context.js'
 
@@ -15,8 +16,8 @@ const ICON_CLASS = 'w-[20px] h-[20px] m-1 mr-2 shrink-0'
 const SOURCE_COMPONENT = 'wdio-devtools-actions'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsActions extends Element {
-  #mutations: MutationRecord[] = []
-  #activeMutation?: number
+  #entries: (TraceMutation | CommandLog)[] = []
+  #activeEntry?: number
   #highlightedMutation?: number
 
   static styles = [...Element.styles, css`
@@ -32,28 +33,35 @@ export class DevtoolsActions extends Element {
 
   connectedCallback(): void {
     super.connectedCallback()
-    this.#mutations = this.data.mutations
+    this.#entries = [...this.data.mutations, ...this.data.commands]
+      .sort((a, b) => a.timestamp - b.timestamp)
   }
 
   render() {
-    if (!this.#mutations.length) {
+    if (!this.#entries.length) {
       return html`<section class="flex items-center justify-center text-sm w-full h-full">No events logged!</section>`
     }
 
-    return this.#mutations.map((mutation, i) => {
+    return this.#entries.map((entry, i) => {
+      if ('command' in entry) {
+        return html`
+          <button>${entry.command}</button>
+        `
+      }
+
       return html`
         <button
           @mousemove="${() => this.#showMutationTarget(i)}"
           @click="${() => this.#selectMutation(i)}"
-          class="flex items-center justify-center text-sm w-full px-4 hover:bg-toolbarHoverBackground ${this.#activeMutation === i ? 'bg-toolbarHoverBackground' : ''}"
+          class="flex items-center justify-center text-sm w-full px-4 hover:bg-toolbarHoverBackground ${this.#activeEntry === i ? 'bg-toolbarHoverBackground' : ''}"
         >
-          ${this.#getMutationLabel(mutation)}
+          ${this.#getMutationLabel(entry)}
         </button>
       `
     })
   }
 
-  #getMutationLabel(mutation: MutationRecord) {
+  #getMutationLabel(mutation: TraceMutation) {
     if (mutation.type === 'attributes') {
       return this.#getAttributeMutationLabel(mutation)
     } else if (mutation.type === 'childList') {
@@ -62,14 +70,14 @@ export class DevtoolsActions extends Element {
     return 'Unknown mutation'
   }
 
-  #getAttributeMutationLabel(mutation: MutationRecord) {
+  #getAttributeMutationLabel(mutation: TraceMutation) {
     return html`
       <icon-mdi-pencil class="${ICON_CLASS}"></icon-mdi-pencil>
       <span class="flex-grow">${mutation.target} attribute "<code>${mutation.attributeName}</code>" changed</span>
     `
   }
 
-  #getChildListMutationLabel(mutation: MutationRecord) {
+  #getChildListMutationLabel(mutation: TraceMutation) {
     if (mutation.addedNodes.length === 1 && (mutation.addedNodes[0] as any).type === 'html') {
       return html`
         <icon-mdi-document class="${ICON_CLASS}"></icon-mdi-document>
@@ -83,9 +91,9 @@ export class DevtoolsActions extends Element {
   }
 
   #selectMutation(i: number) {
-    this.#activeMutation = i
+    this.#activeEntry = i
     const event = new CustomEvent('app-mutation-select', {
-      detail: this.#mutations[this.#activeMutation]
+      detail: this.#entries[this.#activeEntry]
     })
     window.dispatchEvent(event)
     this.requestUpdate()
@@ -97,7 +105,7 @@ export class DevtoolsActions extends Element {
     }
     this.#highlightedMutation = i
     const event = new CustomEvent('app-mutation-highlight', {
-      detail: this.#mutations[i]
+      detail: this.#entries[i]
     })
     window.dispatchEvent(event)
   }

packages/app/src/components/workbench/list.ts

@@ -51,7 +51,14 @@ export class DevtoolsList extends Element {
         ${this.#renderSectionHeader(this.label)}
         <dl class="flex flex-wrap transition-all ${this.isCollapsed ? 'mt-0' : 'mt-2'}">
           ${entries.map(([key, val], i) => {
-            const className = `transition-[max-height] border-b-panelBorder overflow-y-hidden ${i === (entries.length - 1) && !this.isCollapsed ? 'border-b-[1px]' : ''} ${this.isCollapsed ? 'max-h-0' : 'max-h-[100px]'} basis-2/4`
+            let className = 'basis-2/4 transition-all border-b-panelBorder overflow-y-hidden'
+            if (i === (entries.length - 1)) {
+              className += this.isCollapsed ? ' pb-0' : ' pb-2'
+              if (!this.isCollapsed) {
+                className += ' border-b-[1px]'
+              }
+            }
+            className += this.isCollapsed ? ' max-h-0' : ' max-h-[500px]'
             return html`
               <dt class="${className} font-bold px-2">${key}</dt>
               <dd class="${className}">${this.#renderMetadataProp(val)}</dd>

packages/app/src/vite-env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
 interface GlobalEventHandlersEventMap {
-  'app-mutation-highlight': CustomEvent<MutationRecord>
+  'app-mutation-highlight': CustomEvent<TraceMutation>
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   'app-test-filter': CustomEvent<import('./components/sidebar/filter').DevtoolsSidebarFilter>
   'app-logs': CustomEvent<string>

packages/hook/src/index.ts

@@ -76,6 +76,8 @@ async function injectScript (browser: WebdriverIO.Browser) {
 }
 
 async function captureTrace (browser: WebdriverIO.Browser, command: (keyof WebDriverCommands), args: any, result?: any, error?: Error) {
+  const timestamp = Date.now()
+
   /**
    * only capture trace if script was injected and command is a page transition command
    */
@@ -93,7 +95,7 @@ async function captureTrace (browser: WebdriverIO.Browser, command: (keyof WebDr
     commandsLog = []
   }
 
-  commandsLog.push({ command, args, result, error })
+  commandsLog.push({ command, args, result, error, timestamp })
   const outputDir = browser.options.outputDir || process.cwd()
   const { capabilities, ...options } = browser.options as Options.WebdriverIO
   const traceLog: TraceLog = {

packages/hook/src/types.ts

@@ -6,6 +6,7 @@ export interface CommandLog {
   args: any[]
   result: any
   error?: Error
+  timestamp: number
 }
 
 export enum TraceType {
@@ -14,14 +15,15 @@ export enum TraceType {
 }
 
 export interface TraceLog {
-  mutations: MutationRecord[]
+  mutations: TraceMutation[]
   logs: string[]
   metadata: {
     type: TraceType
     id: string
     url: string
     options: Omit<Options.WebdriverIO, 'capabilities'>
     capabilities: Capabilities.RemoteCapability
+    viewport: VisualViewport
   }
   commands: CommandLog[]
 }

packages/script/src/index.ts

@@ -4,7 +4,8 @@ window.wdioCaptureErrors = []
 window.wdioDOMChanges = []
 window.wdioMetadata = {
   url: window.location.href,
-  id: `wdio-trace-${Math.random().toString().slice(2)}`
+  id: `wdio-trace-${Math.random().toString().slice(2)}`,
+  viewport: window.visualViewport!
 }
 
 try {
@@ -15,15 +16,18 @@ try {
   assignRef(document.documentElement)
   log('applied wdio ref ids')
 
+  const timestamp = Date.now()
   window.wdioDOMChanges.push({
     type: 'childList',
+    timestamp,
     addedNodes: [parseDocument(document.documentElement)],
     removedNodes: []
   })
   log('added initial page structure')
 
   const config = { attributes: true, childList: true, subtree: true }
   const observer = new MutationObserver((ml) => {
+    const timestamp = Date.now()
     const mutationList = ml.filter((m) => m.attributeName !== 'data-wdio-ref')
 
     log(`observed ${mutationList.length} mutations`)
@@ -40,7 +44,10 @@ try {
         const nextSibling = ns ? getRef(ns) : null
 
         log(`added mutation: ${type}`)
-        return { type, attributeName, attributeNamespace, oldValue, addedNodes, target, removedNodes, previousSibling, nextSibling }
+        return {
+          type, attributeName, attributeNamespace, oldValue, addedNodes, target,
+          removedNodes, previousSibling, nextSibling, timestamp
+        } as TraceMutation
       }))
     } catch (err: any) {
       window.wdioCaptureErrors.push(err.stack)

packages/script/src/utils.ts

@@ -1,19 +1,18 @@
 import { parse, parseFragment as parseFragmentImport, type DefaultTreeAdapterMap } from 'parse5'
 import { h } from 'htm/preact'
-import type { VNode } from 'preact'
 
-type vFragment = DefaultTreeAdapterMap['documentFragment']
-type vComment = DefaultTreeAdapterMap['commentNode']
-type vElement = DefaultTreeAdapterMap['element']
-type vText = DefaultTreeAdapterMap['textNode']
-type vChildNode = DefaultTreeAdapterMap['childNode']
+export type vFragment = DefaultTreeAdapterMap['documentFragment']
+export type vComment = DefaultTreeAdapterMap['commentNode']
+export type vElement = DefaultTreeAdapterMap['element']
+export type vText = DefaultTreeAdapterMap['textNode']
+export type vChildNode = DefaultTreeAdapterMap['childNode']
 
-function createVNode (elem: VNode<any>) {
+function createVNode (elem: any) {
   const { type, props } = elem
-  return { type, props }
+  return { type, props } as SimplifiedVNode
 }
 
-export function parseNode (fragment: vFragment | vComment | vText | vChildNode): any {
+export function parseNode (fragment: vFragment | vComment | vText | vChildNode): SimplifiedVNode | string {
   const props: Record<string, any> = {}
 
   if (fragment.nodeName === '#comment') {

packages/script/tests/preload.test.ts

@@ -1,23 +1,16 @@
 import { test, expect } from 'vitest'
 import { h, render } from 'preact'
-import type { VNode } from 'preact'
+import type { VNode as PreactVNode } from 'preact'
 
-interface SanitizedVNode {
-  type: string
-  props: Record<string, any> & {
-    children?: SanitizedVNode | SanitizedVNode[]
-  }
-}
-
-function transform (node: SanitizedVNode): VNode<{}> {
+function transform (node: SimplifiedVNode | string): PreactVNode<{}> | string {
   if (typeof node !== 'object') {
-    return node as VNode<{}>
+    return node
   }
 
   const { children, ...props } = node.props
   const childrenRequired = children || []
   const c = Array.isArray(childrenRequired) ? childrenRequired : [childrenRequired]
-  return h(node.type as string, props, ...c.map(transform)) as VNode<{}>
+  return h(node.type as string, props, ...c.map(transform)) as PreactVNode<{}>
 }
 
 test('should be able serialize DOM', async () => {
@@ -49,6 +42,6 @@ test('should be able to properly serialize changes', async () => {
   expect(window.wdioDOMChanges.length).toBe(2)
   const [, vChange] = window.wdioDOMChanges
   const stage = document.createDocumentFragment()
-  render(transform(vChange.addedNodes[0].props.children), stage)
+  render(transform((vChange.addedNodes[0] as SimplifiedVNode).props.children as SimplifiedVNode), stage)
   expect((stage.childNodes[0] as HTMLElement).outerHTML).toMatchSnapshot()
 })