make rerender of page happen

Author: christian-bromann

packages/app/src/app.ts

@@ -75,7 +75,7 @@ export class WebdriverIODevtoolsApplication extends Element {
       <section class="flex h-[calc(100%-40px)] w-full relative">
         ${
           // only render sidebar if trace file is captured using testrunner
-          this.data?.metadata.type === 'standalone'
+          this.data?.metadata.type !== 'standalone'
             ? html`<wdio-devtools-sidebar style="${this.#drag.getPosition()}"></wdio-devtools-sidebar>`
             : nothing
         }

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

@@ -17,8 +17,17 @@ function transform (node: any): VNode<{}> {
   }
 
   const { children, ...props } = node.props
+  /**
+   * ToDo(Christian): fix way we collect data on added nodes in script
+   */
+  if (!node.type && children.type) {
+    return transform(children)
+  }
+
   const childrenRequired = children || []
-  const c = Array.isArray(childrenRequired) ? childrenRequired : [childrenRequired]
+  const c = Array.isArray(childrenRequired)
+    ? childrenRequired
+    : [childrenRequired]
   return h(node.type as string, props, ...c.map(transform)) as VNode<{}>
 }
 
@@ -63,9 +72,14 @@ export class DevtoolsBrowser extends Element {
     window.addEventListener('resize', this.#setIframeSize.bind(this))
     window.addEventListener('window-drag', this.#setIframeSize.bind(this))
     window.addEventListener('app-mutation-highlight', this.#highlightMutation.bind(this))
+    window.addEventListener('app-mutation-select', (ev) => this.#renderBrowserState(ev.detail))
     await this.updateComplete
     this.#setIframeSize()
-    this.#handleMutation(this.data.mutations[0])
+
+    /**
+     * Render initial document
+     */
+    this.#renderBrowserState(0)
   }
 
   #setIframeSize () {
@@ -117,7 +131,6 @@ export class DevtoolsBrowser extends Element {
       docChildren.unshift(head)
     }
     render(root, this.#vdom)
-    this.#renderVdom()
   }
 
   #renderVdom () {
@@ -131,7 +144,6 @@ export class DevtoolsBrowser extends Element {
      * representation of the page
      */
     [...this.#vdom.querySelectorAll('script')].forEach((el) => el.remove())
-
     docEl.ownerDocument.replaceChild(this.#vdom, docEl)
   }
 
@@ -140,27 +152,87 @@ export class DevtoolsBrowser extends Element {
       await this.updateComplete
     }
 
-    const hasRenderedFrame = this.iframe?.contentDocument?.documentElement
-      .querySelectorAll('*').length === 2 // only body and head are in an empty iframe
-    const doc = mutation.addedNodes[0]
-    if (hasRenderedFrame && typeof doc !== 'string') {
-      return this.#renderNewDocument(doc)
+    if (mutation.type === 'attributes') {
+      return this.#handleAttributeMutation(mutation)
+    }
+    if (mutation.type === 'childList') {
+      return this.#handleChildListMutation(mutation)
+    }
+    if (mutation.type === 'characterData') {
+      return this.#handleCharacterDataMutation(mutation)
+    }
+  }
+
+  #handleCharacterDataMutation (mutation: TraceMutation) {
+    const el = this.#queryElement(mutation.target!)
+    if (!el) {
+      return
+    }
+
+    el.textContent = mutation.newTextContent || ''
+  }
+
+  #handleAttributeMutation (mutation: TraceMutation) {
+    if (!mutation.attributeName || !mutation.attributeValue) {
+      return
+    }
+
+    const el = this.#queryElement(mutation.target!)
+    if (!el) {
+      return
     }
 
-    // TODO: handle mutations
+    el.setAttribute(mutation.attributeName, mutation.attributeValue || '')
+  }
+
+  #handleChildListMutation (mutation: TraceMutation) {
+    if (mutation.addedNodes.length === 1 && !mutation.target) {
+      this.#renderNewDocument(mutation.addedNodes[0] as SimplifiedVNode)
+      return this.#renderVdom()
+    }
+
+    const el = this.#queryElement(mutation.target!)
+    if (!el) {
+      return
+    }
+
+    mutation.addedNodes.forEach((node) => {
+      if (typeof node === 'string') {
+        el.appendChild(document.createTextNode(node))
+      } else {
+        const root = transform(node)
+        render(root, el)
+      }
+    })
+
+    mutation.removedNodes.forEach((ref) => {
+      const child = this.#queryElement(ref, el)
+      if (child) {
+        child.remove()
+      }
+    })
+  }
+
+  #queryElement (ref: string, el?: HTMLElement) {
+    const rootElement = el || this.iframe?.contentDocument
+    if (!rootElement) {
+      return
+    }
+    return rootElement.querySelector(`*[data-wdio-ref="${ref}"]`) as HTMLElement
   }
 
   #highlightMutation (ev: CustomEvent<TraceMutation>) {
     const mutation = ev.detail
     const docEl = this.iframe?.contentDocument
-    if (!docEl) {
+    if (!docEl || !mutation.target) {
       return
     }
-    const el = docEl.querySelector(`*[data-wdio-ref="${mutation.target}"]`) as HTMLElement
+    const el = this.#queryElement(mutation.target)
     if (!el) {
       return
     }
 
+    el.scrollIntoView({ block: 'center', inline: 'center' })
     const rect = el.getBoundingClientRect()
     const scrollY = this.iframe?.contentWindow?.scrollY || 0
     const scrollX = this.iframe?.contentWindow?.scrollX || 0
@@ -172,6 +244,24 @@ export class DevtoolsBrowser extends Element {
     docEl.body.appendChild(highlight)
   }
 
+  async #renderBrowserState (mutationIndex: number) {
+    this.#vdom = document.createDocumentFragment()
+    for (let i = 0; i <= mutationIndex; i++) {
+      await this.#handleMutation(this.data.mutations[i])
+    }
+
+    /**
+     * scroll changed element into view
+     */
+    const mutation = this.data.mutations[mutationIndex]
+    if (mutation.target) {
+      const el = this.#queryElement(mutation.target)
+      if (el) {
+        el.scrollIntoView({ block: 'center', inline: 'center' })
+      }
+    }
+  }
+
   render() {
     return html`
       <section class="w-full bg-sideBarBackground rounded-t-md shadow-md">

packages/app/src/components/workbench.ts

@@ -41,15 +41,15 @@ export class DevtoolsWorkbench extends Element {
   #dragVertical = new DragController(this, {
     localStorageKey: 'toolbarHeight',
     minPosition: MIN_WORKBENCH_HEIGHT,
-    initialPosition: window.innerHeight * .7, // initial height of sidebase is 20% of window
+    initialPosition: window.innerHeight * .7, // initial height of browser window is 70% of window
     getContainerEl: () => this.getShadowRootAsync() as any as Element,
     direction: Direction.vertical
   })
 
   #dragHorizontal = new DragController(this, {
     localStorageKey: 'workbenchSidebarWidth',
     minPosition: MIN_METATAB_WIDTH,
-    initialPosition: MIN_METATAB_WIDTH, // initial height of sidebase is 20% of window
+    initialPosition: MIN_METATAB_WIDTH,
     getContainerEl: () => this.#getHorizontalWindow(),
     direction: Direction.horizontal
   })
@@ -94,7 +94,7 @@ export class DevtoolsWorkbench extends Element {
             <wdio-devtools-tab label="Actions">
               <wdio-devtools-actions></wdio-devtools-actions>
             </wdio-devtools-tab>
-            <wdio-devtools-tab label="Metadata" active>
+            <wdio-devtools-tab label="Metadata">
               <wdio-devtools-metadata></wdio-devtools-metadata>
             </wdio-devtools-tab>
             <nav class="ml-auto" slot="actions">

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

@@ -1,5 +1,5 @@
 import { Element } from '@core/element'
-import { html, css } from 'lit'
+import { html, css, nothing } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import type { CommandLog } from '@devtools/hook/types'
@@ -10,13 +10,17 @@ import '~icons/mdi/pencil.js'
 import '~icons/mdi/family-tree.js'
 import '~icons/mdi/alert.js'
 import '~icons/mdi/document.js'
+import '~icons/mdi/arrow-right.js'
 
-const ICON_CLASS = 'w-[20px] h-[20px] m-1 mr-2 shrink-0'
+type ActionEntry = TraceMutation | CommandLog
 
+const ONE_MINUTE = 1000 * 60
+const ICON_CLASS = 'w-[20px] h-[20px] m-1 mr-2 shrink-0 block'
 const SOURCE_COMPONENT = 'wdio-devtools-actions'
+
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsActions extends Element {
-  #entries: (TraceMutation | CommandLog)[] = []
+  #entries: ActionEntry[] = []
   #activeEntry?: number
   #highlightedMutation?: number
 
@@ -28,6 +32,10 @@ export class DevtoolsActions extends Element {
     }
   `]
 
+  get mutationEntries () {
+    return this.#entries.filter((entry) => !('command' in entry)) as TraceMutation[]
+  }
+
   @consume({ context })
   data: TraceLog = {} as TraceLog
 
@@ -45,22 +53,42 @@ export class DevtoolsActions extends Element {
     return this.#entries.map((entry, i) => {
       if ('command' in entry) {
         return html`
-          <button @click="${() => this.#highlightLine(entry.callSource)}">${entry.command}</button>
+          <button class="flex px-2 items-center" @click="${() => this.#highlightLine(entry.callSource)}">
+            <icon-mdi-arrow-right class="${ICON_CLASS}"></icon-mdi-arrow-right>
+            ${this.#renderTime(entry)}
+            <code class="text-sm flex-wrap text-left break-all">${entry.command}(${entry.args.map((arg) => JSON.stringify(arg, null, 2)).join(', ')})</code>
+          </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.#activeEntry === i ? 'bg-toolbarHoverBackground' : ''}"
+          @click="${() => this.#selectMutation(this.mutationEntries.indexOf(entry), i)}"
+          class="flex items-center justify-center text-sm w-full px-2 hover:bg-toolbarHoverBackground ${this.#activeEntry === i ? 'bg-toolbarHoverBackground' : ''}"
         >
           ${this.#getMutationLabel(entry)}
         </button>
       `
     })
   }
 
+  #renderTime (entry: ActionEntry) {
+    const diff = entry.timestamp - this.data.mutations[0].timestamp
+    let diffLabel = `${diff}ms`
+    if (diff > 1000) {
+      diffLabel = `${(diff / 1000).toFixed(2)}s`
+    }
+    if (diff > ONE_MINUTE) {
+      const minutes = Math.floor(diff / 1000 / 60)
+      diffLabel = `${minutes}m ${Math.floor((diff - minutes * ONE_MINUTE) / 1000)}s`
+    }
+
+    return html`
+      <span class="text-xs text-gray-500 shrink-0 pr-2 text-debugTokenExpressionName">${diffLabel}</span>
+    `
+  }
+
   #getMutationLabel(mutation: TraceMutation) {
     if (mutation.type === 'attributes') {
       return this.#getAttributeMutationLabel(mutation)
@@ -73,35 +101,53 @@ export class DevtoolsActions extends Element {
   #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>
+      ${this.#renderTime(mutation)}
+      <span class="flex-grow text-left">element attribute "<code>${mutation.attributeName}</code>" changed</span>
     `
   }
 
   #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>
-        <span class="flex-grow">Document loaded</span>
+        ${this.#renderTime(mutation)}
+        <span class="flex-grow text-left">Document loaded</span>
       `
     }
     return html`
       <icon-mdi-family-tree class="${ICON_CLASS}"></icon-mdi-family-tree>
-      <span class="flex-grow">${mutation.target} child list changed</span>
+      ${this.#renderTime(mutation)}
+      <span class="flex-grow text-left">
+        ${this.#renderNodeAmount(mutation.addedNodes, 'added')}
+        ${mutation.addedNodes.length && mutation.removedNodes.length
+          ? ' and '
+          : nothing}
+        ${this.#renderNodeAmount(mutation.removedNodes, 'removed')}
+      </span>
     `
   }
 
+  #renderNodeAmount (nodes: (string | SimplifiedVNode)[], operationType: 'added' | 'removed') {
+    if (!nodes.length) {
+      return nothing
+    }
+    let nodeLabel = 'node'
+    if (nodes.length > 1) {
+      nodeLabel = 'nodes'
+    }
+    return html`${nodes.length} ${nodeLabel} ${operationType}`
+  }
+
   #highlightLine(callSource: string) {
     const event = new CustomEvent('app-source-highlight', {
       detail: callSource
     })
     window.dispatchEvent(event)
   }
 
-  #selectMutation(i: number) {
-    this.#activeEntry = i
-    const event = new CustomEvent('app-mutation-select', {
-      detail: this.#entries[this.#activeEntry]
-    })
+  #selectMutation(detail: number, listIndex: number) {
+    this.#activeEntry = listIndex
+    const event = new CustomEvent('app-mutation-select', { detail })
     window.dispatchEvent(event)
     this.requestUpdate()
   }

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

@@ -2,6 +2,7 @@
 
 interface GlobalEventHandlersEventMap {
   'app-mutation-highlight': CustomEvent<TraceMutation>
+  'app-mutation-select': CustomEvent<number>
   'app-source-highlight': CustomEvent<string>
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   'app-test-filter': CustomEvent<import('./components/sidebar/filter').DevtoolsSidebarFilter>

packages/script/src/index.ts

@@ -46,10 +46,20 @@ try {
         const previousSibling = ps ? getRef(ps) : null
         const nextSibling = ns ? getRef(ns) : null
 
+        let attributeValue: string | undefined
+        if (type === 'attributes') {
+          attributeValue = (t as Element).getAttribute(attributeName!) || ''
+        }
+        let newTextContent: string | undefined
+        if (type === 'characterData') {
+          newTextContent = (t as Element).textContent || ''
+        }
+
         log(`added mutation: ${type}`)
         return {
           type, attributeName, attributeNamespace, oldValue, addedNodes, target,
-          removedNodes, previousSibling, nextSibling, timestamp
+          removedNodes, previousSibling, nextSibling, timestamp, attributeValue,
+          newTextContent
         } as TraceMutation
       }))
     } catch (err: any) {

packages/script/types.d.ts

@@ -32,6 +32,8 @@ declare global {
     type: MutationRecordType
     attributeName?: string
     attributeNamespace?: string
+    attributeValue?: string
+    newTextContent?: string
     oldValue?: string
     addedNodes: (string | SimplifiedVNode)[]
     target?: string