implement placeholder content

Author: christian-bromann

packages/app/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "exports": "./src/index.ts",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite build --watch",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "eslint ."
@@ -19,6 +19,7 @@
     "@wdio/protocols": "^8.23.0",
     "codemirror": "^6.0.1",
     "lit": "^2.7.6",
+    "placeholder-loading": "^0.6.0",
     "pointer-tracker": "^2.5.3",
     "preact": "^10.18.1"
   },

packages/app/src/app.ts

@@ -4,7 +4,7 @@ import { customElement, query, property } from 'lit/decorators.js'
 import { type TraceLog } from '@wdio/devtools-service/types'
 
 import { Element } from '@core/element'
-import { context } from './context.js'
+import { context, cacheTraceData } from './context.js'
 import { DragController, Direction } from './utils/DragController.js'
 
 import './components/header.js'
@@ -13,21 +13,12 @@ import './components/workbench.js'
 import './components/onboarding/start.js'
 
 const SIDEBAR_MIN_WIDTH = 200
-const CACHE_ID = 'wdio-trace-cache'
-
-let cachedTraceFile: TraceLog | undefined
-  try {
-  const localStorageValue = localStorage.getItem(CACHE_ID)
-  cachedTraceFile = localStorageValue ? JSON.parse(localStorageValue) : undefined
-} catch (e: unknown) {
-  console.warn(`Failed to parse cached trace file: ${(e as Error).message}`)
-}
 
 @customElement('wdio-devtools')
 export class WebdriverIODevtoolsApplication extends Element {
   @provide({ context })
   @property({ type: Object })
-  data: TraceLog = cachedTraceFile!
+  data: Partial<TraceLog> = {}
 
   static styles = [...Element.styles, css`
     :host {
@@ -69,7 +60,7 @@ export class WebdriverIODevtoolsApplication extends Element {
 
   #loadTrace ({ detail }: { detail: TraceLog }) {
     this.data = detail
-    localStorage.setItem(CACHE_ID, JSON.stringify(detail))
+    cacheTraceData(detail)
     this.requestUpdate()
   }
 

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

@@ -8,6 +8,7 @@ import { customElement, query } from 'lit/decorators.js'
 import { context, type TraceLog } from '../../context.js'
 
 import '~icons/mdi/world.js'
+import '../placeholder.js'
 
 const MUTATION_SELECTOR = '__mutation-highlight__'
 
@@ -38,7 +39,7 @@ export class DevtoolsBrowser extends Element {
   #activeUrl = ''
 
   @consume({ context })
-  data: TraceLog = {} as TraceLog
+  data: Partial<TraceLog> = {}
 
   static styles = [...Element.styles, css`
     :host {
@@ -84,16 +85,17 @@ export class DevtoolsBrowser extends Element {
   }
 
   #setIframeSize () {
-    if (!this.section || !this.iframe || !this.header) {
+    const metadata = this.data.metadata
+    if (!this.section || !this.iframe || !this.header || !metadata) {
       return
     }
 
     this.section.style.width = 'auto'
     this.section.style.height = 'auto'
 
     this.iframe.removeAttribute('style')
-    const viewportWidth = this.data.metadata.viewport.width
-    const viewportHeight = this.data.metadata.viewport.height
+    const viewportWidth = metadata.viewport.width
+    const viewportHeight = metadata.viewport.height
     const frameSize = this.getBoundingClientRect()
     const headerSize = this.header.getBoundingClientRect()
 
@@ -115,9 +117,9 @@ export class DevtoolsBrowser extends Element {
     this.iframe.style.transform = `scale(${scale})`
   }
 
-  async #renderNewDocument (doc: SimplifiedVNode) {
+  async #renderNewDocument (doc: SimplifiedVNode, baseUrl: string) {
     const root = transform(doc)
-    const baseTag = h('base', { href: this.data.metadata.url })
+    const baseTag = h('base', { href: baseUrl })
     const head: VNode<{}> | undefined = (root.props.children as VNode[])
       .filter(Boolean)
       .find((node) => node!.type === 'head')
@@ -188,7 +190,8 @@ export class DevtoolsBrowser extends Element {
 
   #handleChildListMutation (mutation: TraceMutation) {
     if (mutation.addedNodes.length === 1 && !mutation.target) {
-      this.#renderNewDocument(mutation.addedNodes[0] as SimplifiedVNode)
+      const baseUrl = this.data.metadata?.url || 'unknown'
+      this.#renderNewDocument(mutation.addedNodes[0] as SimplifiedVNode, baseUrl)
       return this.#renderVdom()
     }
 
@@ -251,11 +254,16 @@ export class DevtoolsBrowser extends Element {
   }
 
   async #renderBrowserState (mutationEntry?: TraceMutation) {
+    const mutations = this.data.mutations
+    if (!mutations) {
+      return
+    }
+
     const mutationIndex = mutationEntry
-      ? this.data.mutations.indexOf(mutationEntry)
+      ? mutations.indexOf(mutationEntry)
       : 0
     this.#vdom = document.createDocumentFragment()
-    const rootIndex = this.data.mutations
+    const rootIndex = mutations
       .map((m, i) => [
         // is document loaded
         m.addedNodes.length === 1 && Boolean(m.url),
@@ -266,16 +274,16 @@ export class DevtoolsBrowser extends Element {
       .map(([, i]) => i)
       .pop() || 0
 
-    this.#activeUrl = this.data.mutations[rootIndex].url || this.data.metadata.url
+    this.#activeUrl = mutations[rootIndex].url || this.data.metadata?.url || 'unknown'
     for (let i = rootIndex; i <= mutationIndex; i++) {
-      await this.#handleMutation(this.data.mutations[i]).catch(
+      await this.#handleMutation(mutations[i]).catch(
         (err) => console.warn(`Failed to render mutation: ${err.message}`))
     }
 
     /**
      * scroll changed element into view
      */
-    const mutation = this.data.mutations[mutationIndex]
+    const mutation = mutations[mutationIndex]
     if (mutation.target) {
       const el = this.#queryElement(mutation.target)
       if (el) {
@@ -298,7 +306,10 @@ export class DevtoolsBrowser extends Element {
             ${this.#activeUrl}
           </div>
         </header>
-        <iframe class="origin-top-left"></iframe>
+        ${this.data.mutations
+          ? html`<iframe class="origin-top-left"></iframe>`
+          : html`<wdio-devtools-placeholder style="height: 500px"></wdio-devtools-placeholder>`
+        }
       </section>
     `
   }

packages/app/src/components/placeholder.ts

@@ -0,0 +1,49 @@
+import { Element } from '@core/element'
+import { html, unsafeCSS } from 'lit'
+import { customElement } from 'lit/decorators.js'
+
+import placeholderLoadingCSS from 'placeholder-loading/dist/css/placeholder-loading.css?inline'
+
+@customElement('wdio-devtools-placeholder')
+export class DevtoolsPlaceholder extends Element {
+  static styles = [unsafeCSS(placeholderLoadingCSS), unsafeCSS(`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .ph-item {
+      border: 0;
+      height: 100%;
+    }
+
+    .ph-item div {
+      opacity: .6;
+    }
+  `)]
+
+  render() {
+    return html`
+      <div class="ph-item">
+        <div class="ph-col-12">
+          <div class="ph-row">
+            <div class="ph-col-6 big"></div>
+            <div class="ph-col-4 empty big"></div>
+            <div class="ph-col-4"></div>
+            <div class="ph-col-8 empty"></div>
+            <div class="ph-col-6"></div>
+            <div class="ph-col-6 empty"></div>
+            <div class="ph-col-12"></div>
+          </div>
+        </div>
+      </div>
+    `
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wdio-devtools-placeholder': DevtoolsPlaceholder
+  }
+}

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

@@ -12,6 +12,7 @@ import '~icons/mdi/alert.js'
 import '~icons/mdi/document.js'
 import '~icons/mdi/arrow-right.js'
 
+import '../placeholder.js'
 import './actionItems/command.js'
 import './actionItems/mutation.js'
 
@@ -30,21 +31,22 @@ export class DevtoolsActions extends Element {
   `]
 
   @consume({ context })
-  data: TraceLog = {} as TraceLog
+  data: Partial<TraceLog> = {}
 
   connectedCallback(): void {
     super.connectedCallback()
-    this.#entries = [...this.data.mutations, ...this.data.commands]
+    this.#entries = [...this.data.mutations || [], ...this.data.commands || []]
       .sort((a, b) => a.timestamp - b.timestamp)
   }
 
   render() {
-    if (!this.#entries.length) {
-      return html`<section class="flex items-center justify-center text-sm w-full h-full">No events logged!</section>`
+    const mutations = this.data.mutations || []
+    if (!this.#entries.length || !mutations.length) {
+      return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
     return this.#entries.map((entry) => {
-      const elapsedTime = entry.timestamp - this.data.mutations[0].timestamp
+      const elapsedTime = entry.timestamp - mutations[0].timestamp
 
       if ('command' in entry) {
         return html`

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

@@ -1,3 +1,5 @@
+/// <reference types="../../../script" />
+
 import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
@@ -6,6 +8,7 @@ import { consume } from '@lit/context'
 import { context, type TraceLog } from '../../context.js'
 
 import '~icons/mdi/chevron-right.js'
+import '../placeholder.js'
 
 const BG: Record<ConsoleLogs['type'], string> = {
   'warn': 'editorOverviewRulerWarningForeground',
@@ -28,11 +31,11 @@ export class DevtoolsConsoleLogs extends Element {
   `]
 
   @consume({ context })
-  data: TraceLog = {} as TraceLog
+  data: Partial<TraceLog> = {}
 
   render() {
-    if (this.data.consoleLogs.length === 0) {
-      return html`<section class="flex items-center justify-center text-sm w-full h-full">No events logged!</section>`
+    if (!this.data.consoleLogs || this.data.consoleLogs.length === 0) {
+      return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
     return html`

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

@@ -6,13 +6,14 @@ import { consume } from '@lit/context'
 import { context, type TraceLog } from '../../context.js'
 
 import './list.js'
+import '../placeholder.js'
 import '~icons/mdi/chevron-right.js'
 
 const SOURCE_COMPONENT = 'wdio-devtools-metadata'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsMetadata extends Element {
   @consume({ context })
-  data: TraceLog = {} as TraceLog
+  data: Partial<TraceLog> = {}
 
   static styles = [...Element.styles, css`
     :host {
@@ -25,6 +26,10 @@ export class DevtoolsMetadata extends Element {
   `]
 
   render() {
+    if (!this.data.metadata) {
+      return html`<wdio-devtools-placeholder style="height: 500px"></wdio-devtools-placeholder>`
+    }
+
     const { url } = this.data.metadata
     return html`
       <wdio-devtools-list

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

@@ -10,6 +10,8 @@ import { oneDark } from '@codemirror/theme-one-dark'
 
 import { context, type TraceLog } from '../../context.js'
 
+import '../placeholder.js'
+
 const SOURCE_COMPONENT = 'wdio-devtools-source'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsSource extends Element {
@@ -30,15 +32,19 @@ export class DevtoolsSource extends Element {
   `]
 
   @consume({ context })
-  data: TraceLog = {} as TraceLog
+  data: Partial<TraceLog> = {}
 
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('app-source-highlight', this.#highlightCallSource.bind(this))
-    setTimeout(() => this.#renderEditor(Object.keys(this.data.sources)[0]))
+    setTimeout(() => this.#renderEditor(Object.keys(this.data.sources || {})[0]))
   }
 
   #renderEditor (filePath: string, highlightLine?: number) {
+    if (!this.data.sources) {
+      return
+    }
+
     const source = this.data.sources[filePath]
     if (!source) {
       return
@@ -75,7 +81,9 @@ export class DevtoolsSource extends Element {
   }
 
   render() {
-    return html`<section class="p-2">loading...</section>`
+    return html`
+      <wdio-devtools-placeholder></wdio-devtools-placeholder>
+    `
   }
 }