Minor UI changes for initial release

Author: vishnuv688

packages/app/src/app.ts

@@ -11,7 +11,7 @@ import './components/sidebar.js'
 import './components/workbench.js'
 import './components/onboarding/start.js'
 
-const SIDEBAR_MIN_WIDTH = 200
+const SIDEBAR_MIN_WIDTH = 250
 
 @customElement('wdio-devtools')
 export class WebdriverIODevtoolsApplication extends Element {

packages/app/src/components/workbench.ts

@@ -100,14 +100,14 @@ export class DevtoolsWorkbench extends Element {
       return `flex:0 0 ${paneHeight}px; height:${paneHeight}px; max-height:70vh; min-height:0;`
     })()
 
-    const sidebarStyle = !this.#workbenchSidebarCollapsed
-      ? (() => {
+   const sidebarStyle = this.#workbenchSidebarCollapsed
+      ? 'width:0; flex:0 0 0; overflow:hidden;'
+      : (() => {
           const pos = this.#dragHorizontal.getPosition()
           const m = pos.match(/flex-basis:\s*([\d.]+)px/)
           const w = m ? m[1] : MIN_METATAB_WIDTH
           return `${pos}; flex:0 0 auto; min-width:${w}px; max-width:${w}px;`
         })()
-      : ''
 
     return html`
       <section data-horizontal-resizer-window class="flex relative w-full ${heightWorkbench} min-h-0 overflow-hidden" style="${styleWorkbench}">
@@ -129,7 +129,7 @@ export class DevtoolsWorkbench extends Element {
             html`
               <button
                 @click="${() => this.#toggle('workbenchSidebar')}"
-                class="absolute top-0 left-0 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-br-md hover:bg-toolbarHoverBackground border-r-[1px] border-r-panelBorder border-b-[1px] border-b-panelBorder">
+                class="absolute top-2 left-2 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-md shadow hover:bg-toolbarHoverBackground border border-panelBorder">
                 <icon-mdi-arrow-collapse-right></icon-mdi-arrow-collapse-right>
               </button>
             `
@@ -141,8 +141,8 @@ export class DevtoolsWorkbench extends Element {
           <wdio-devtools-browser></wdio-devtools-browser>
         </section>
       </section>
-      ${!this.#toolbarCollapsed ? this.#dragVertical.getSlider('z-20') : nothing}
-      <wdio-devtools-tabs cacheId="activeWorkbenchTab" class="border-t-[1px] border-t-panelBorder ${this.#toolbarCollapsed ? 'hidden' : ''} flex-1 min-h-0">
+      ${!this.#toolbarCollapsed ? this.#dragVertical.getSlider('z-[999] -mt-[5px] pointer-events-auto') : nothing}
+      <wdio-devtools-tabs cacheId="activeWorkbenchTab" class="relative z-10 border-t-[1px] border-t-panelBorder ${this.#toolbarCollapsed ? 'hidden' : ''} flex-1 min-h-0">
         <wdio-devtools-tab label="Source">
           <wdio-devtools-source></wdio-devtools-source>
         </wdio-devtools-tab>
@@ -165,7 +165,8 @@ export class DevtoolsWorkbench extends Element {
         html`
           <button
             @click="${() => this.#toggle('toolbar')}"
-            class="absolute right-0 bottom-0 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-tl-md hover:bg-toolbarHoverBackground border-t-[1px] border-t-panelBorder border-l-[1px] border-l-panelBorder">
+            class="fixed z-[9999] right-2 bottom-2 bg-sideBarBackground flex h-10 w-10 items-center justify-center cursor-pointer rounded-md shadow
+                   hover:bg-toolbarHoverBackground border border-panelBorder">
             <icon-mdi-arrow-collapse-up></icon-mdi-arrow-collapse-up>
           </button>
         `

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

@@ -76,14 +76,12 @@ export class DevtoolsSource extends Element {
       <wdio-devtools-list
         label="Parameters"
         class="text-xs"
-        .list="${this.command.args.reduce((prev, val, i) => {
-          if (this.#commandDefinition) {
-            prev[this.#commandDefinition.parameters[i].name] = val
-          } else {
-            prev[i] = val
-          }
-          return prev
-        }, {})}"></wdio-devtools-list>
+        .list="${(this.command.args || []).reduce((acc, val, i) => {
+          const def = this.#commandDefinition
+          const paramName = def?.parameters?.[i]?.name ?? i
+          acc[paramName] = val
+          return acc
+        }, {} as Record<string, unknown>)}"></wdio-devtools-list>
       <wdio-devtools-list
         label="Result"
         class="text-xs"

packages/app/src/utils/DragController.ts

@@ -128,6 +128,12 @@ export class DragController implements ReactiveController {
   }
 
   #init() {
+    // stop previous tracker if element was re-created
+    if (this.#pointerTracker) {
+      this.#pointerTracker.stop()
+      this.#pointerTracker = null
+    }
+
     const onDrag = this.#onDrag
     const onDragStart = this.#onDragStart
     const onDragEnd = this.#onDragEnd
@@ -156,6 +162,10 @@ export class DragController implements ReactiveController {
     this.#adjustPosition()
   }
 
+  hostUpdated() {
+    this.#maybeReinit()
+  }
+
   hostDisconnected(): void {
     if (this.#pointerTracker) {
       this.#pointerTracker.stop()
@@ -224,6 +234,16 @@ export class DragController implements ReactiveController {
     el.removeAttribute('data-state')
   }
 
+  async #maybeReinit() {
+    const draggableEl = await this.#getDraggableEl()
+    if (!draggableEl) return
+    // if slider was removed (collapsed) and re-added, re-init pointer tracker
+    if (this.#draggableEl !== draggableEl) {
+      this.#draggableEl = draggableEl as HTMLElement
+      this.#init()
+    }
+  }
+
   getSlider(className = '') {
     const anchor = this.#options.direction === Direction.horizontal
       ? 'left'
@@ -251,11 +271,13 @@ export class DragController implements ReactiveController {
       return
     }
 
-    const slidingElem = (draggableEl.parentElement || this.#host.shadowRoot)?.querySelector(`*[style="${this.getPosition()}"]`)
+    // allow matching when additional inline styles are present
+    const slidingElem = (draggableEl.parentElement || this.#host.shadowRoot)
+      ?.querySelector(`*[style*="flex-basis: ${this.#getPosition()}px"]`)
     if (!slidingElem) {
       return
     }
-    const rect = slidingElem.getBoundingClientRect()
+    const rect = (slidingElem as HTMLElement).getBoundingClientRect()
     const direction = this.#options.direction === Direction.horizontal
       ? 'width'
       : 'height'

packages/service/src/constants.ts

@@ -10,7 +10,7 @@ export const DEFAULT_LAUNCH_CAPS: WebdriverIO.Capabilities = {
     // production:
     // args: ['--window-size=1200,800']
     // development:
-    args: ['--window-size=1600,1200', '--auto-open-devtools-for-tabs']
+    args: ['--window-size=1600,1200']
   }
 }