Revert "DevTool dependencies update (#111)" (#113)

This reverts commit 9b6323f.

Author: vishnuv688

example/features/step-definitions/steps.ts

@@ -1,5 +1,5 @@
-import { Given, When, Then, After } from '@wdio/cucumber-framework'
-import { browser, expect } from '@wdio/globals'
+import { Given, When, Then } from '@wdio/cucumber-framework'
+import { expect } from '@wdio/globals'
 
 import LoginPage from '../pageobjects/login.page.js'
 import SecurePage from '../pageobjects/secure.page.js'
@@ -8,10 +8,6 @@ const pages = {
     login: LoginPage
 } as const
 
-After(async () => {
-    await browser.reloadSession()
-})
-
 Given(/^I am on the (\w+) page$/, async (page: keyof typeof pages) => {
     await pages[page].open()
 })
@@ -21,9 +17,8 @@ When(/^I login with (\w+) and (.+)$/, async (username, password) => {
 })
 
 Then(/^I should see a flash message saying (.*)$/, async (message) => {
-    const el = await SecurePage.flashAlert
-    await expect(el).toBeExisting()
-    await expect(el).toHaveText(expect.stringContaining(message))
+    await expect(SecurePage.flashAlert).toBeExisting()
+    await expect(SecurePage.flashAlert).toHaveTextContaining(message)
     await browser.pause(15000)
 })
 

example/package.json

@@ -2,18 +2,16 @@
   "name": "examples",
   "type": "module",
   "devDependencies": {
-    "@wdio/cli": "9.18.0",
-    "@wdio/cucumber-framework": "9.18.0",
-    "@wdio/devtools-service": "workspace:*",
-    "@wdio/globals": "9.17.0",
-    "@wdio/local-runner": "9.18.0",
-    "@wdio/spec-reporter": "9.18.0",
-    "@wdio/types": "9.16.2",
-    "expect-webdriverio": "^5.4.0",
+    "@wdio/cli": "8.39.0",
+    "@wdio/cucumber-framework": "^8.39.0",
+    "@wdio/devtools-service": "workspace:^",
+    "@wdio/globals": "^8.39.0",
+    "@wdio/local-runner": "^8.39.0",
+    "@wdio/spec-reporter": "^8.39.0",
+    "@wdio/types": "^8.39.0",
+    "expect-webdriverio": "^4.15.1",
     "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "tsx": "^4.20.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.4.5"
   },
   "scripts": {
     "wdio": "wdio run ./wdio.conf.ts"

package.json

@@ -10,28 +10,27 @@
     "watch": "pnpm build --watch"
   },
   "devDependencies": {
-    "@types/node": "^24.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.40.0",
-    "@typescript-eslint/parser": "^8.40.0",
-    "@typescript-eslint/utils": "^8.40.0",
-    "@vitest/browser": "^3.2.4",
-    "autoprefixer": "^10.4.21",
-    "eslint": "^9.33.0",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-unicorn": "^59.0.1",
+    "@types/node": "^20.14.5",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "@typescript-eslint/utils": "^6.9.0",
+    "@vitest/browser": "^0.34.6",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.52.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-unicorn": "^48.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.5.6",
-    "postcss-lit": "^1.2.0",
-    "tailwindcss": "^4.1.12",
+    "postcss": "^8.4.38",
+    "postcss-lit": "^1.1.1",
+    "tailwindcss": "^3.4.4",
     "ts-node": "^10.9.2",
-    "tsx": "^4.20.4",
-    "typescript": "^5.9.2",
-    "unplugin-icons": "^22.2.0",
-    "vite": "^7.1.3",
-    "vitest": "^3.2.4",
-    "webdriverio": "^9.19.1"
+    "typescript": "^5.0.2",
+    "unplugin-icons": "^0.19.0",
+    "vite": "^4.4.5",
+    "vitest": "^0.34.6",
+    "webdriverio": "^8.39.0"
   },
   "dependencies": {
-    "@wdio/cli": "9.18.0"
+    "@wdio/cli": "8.39.0"
   }
 }

packages/app/package.json

@@ -11,30 +11,22 @@
     "test": "eslint ."
   },
   "dependencies": {
-    "@codemirror/lang-javascript": "^6.2.4",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.1",
-    "@iconify-json/mdi": "^1.2.3",
-    "@lit/context": "^1.1.6",
-    "@wdio/protocols": "9.16.2",
-    "codemirror": "^6.0.2",
-    "lit": "^3.3.1",
-    "placeholder-loading": "^0.7.0",
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@codemirror/view": "^6.22.0",
+    "@iconify-json/mdi": "^1.1.54",
+    "@lit/context": "^1.0.1",
+    "@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.27.1"
+    "preact": "^10.18.1"
   },
   "author": "Christian Bromann <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.12",
-    "@wdio/devtools-service": "workspace:*",
-    "@wdio/reporter": "9.18.0",
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "rollup": "^4.47.0",
-    "stylelint": "^16.24.0",
-    "stylelint-config-recommended": "^17.0.0",
-    "stylelint-config-tailwindcss": "^1.0.0",
-    "tailwindcss": "~3.4.17"
+    "@wdio/devtools-service": "workspace:^",
+    "@wdio/reporter": "^8.23.0"
   }
 }

packages/app/postcss.config.cjs

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 module.exports = {
   plugins: {
     tailwindcss: {},

packages/app/src/app.ts

@@ -38,12 +38,9 @@ export class WebdriverIODevtoolsApplication extends Element {
   @query('section')
   window?: HTMLElement
 
-  @query('section[data-resizer-window]')
-  resizerWindow?: HTMLElement
-
   async #getWindow() {
     await this.updateComplete
-    return this.resizerWindow as Element
+    return this.window as Element
   }
 
   connectedCallback(): void {
@@ -69,15 +66,16 @@ export class WebdriverIODevtoolsApplication extends Element {
     }
 
     return html`
-      <section data-resizer-window class="flex h-[calc(100%-40px)] w-full relative">
+      <section class="flex h-[calc(100%-40px)] w-full relative">
         ${
           // only render sidebar if trace file is captured using testrunner
           this.dataManager.traceType === TraceType.Testrunner
-            ? html`<wdio-devtools-sidebar style="${this.#drag?.getPosition()}"></wdio-devtools-sidebar>`
+            ? html`<wdio-devtools-sidebar style="${this.#drag.getPosition()}"></wdio-devtools-sidebar>`
             : nothing
         }
-        ${this.#drag.getSlider('z-10 h-full')}
+
         <wdio-devtools-workbench class="basis-auto"></wdio-devtools-workbench>
+        ${this.#drag.getSlider()}
       </section>
     `
   }

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

@@ -4,7 +4,6 @@ import { consume } from '@lit/context'
 
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
-import type { SimplifiedVNode } from '../../../../script/types'
 
 import { mutationContext, type TraceMutation, metadataContext, type Metadata } from '../../controller/DataManager.js'
 
@@ -50,20 +49,11 @@ export class DevtoolsBrowser extends Element {
       width: 100%;
       height: 100%;
       display: flex;
-      padding: 2rem;
+      margin: 2rem;
       align-items: center;
       justify-content: center;
     }
 
-    section {
-      box-sizing: border-box;
-      width: calc(100% - 0px); /* host padding already applied */
-      height: calc(100% - 0px);
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-    }
-
     .frame-dot {
       border-radius: 50%;
       height: 12px;
@@ -97,6 +87,9 @@ export class DevtoolsBrowser extends Element {
       return
     }
 
+    this.section.style.width = 'auto'
+    this.section.style.height = 'auto'
+
     this.iframe.removeAttribute('style')
     const viewportWidth = metadata.viewport.width
     const viewportHeight = metadata.viewport.height
@@ -308,7 +301,7 @@ export class DevtoolsBrowser extends Element {
     }
 
     return html`
-      <section class="w-full h-full bg-sideBarBackground rounded-t-md shadow-md">
+      <section class="w-full bg-sideBarBackground rounded-t-md shadow-md">
         <header class="flex block mx-2">
           <div class="frame-dot bg-notificationsErrorIconForeground"></div>
           <div class="frame-dot bg-notificationsWarningIconForeground"></div>
@@ -319,7 +312,7 @@ export class DevtoolsBrowser extends Element {
           </div>
         </header>
         ${this.mutations && this.mutations.length
-          ? html`<iframe class="origin-top-left h-full w-full"></iframe>`
+          ? html`<iframe class="origin-top-left"></iframe>`
           : html`<wdio-devtools-placeholder style="height: 100%"></wdio-devtools-placeholder>`
         }
       </section>

packages/app/src/components/sidebar/explorer.ts

@@ -3,7 +3,7 @@ import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 import type { TestStats, SuiteStats } from '@wdio/reporter'
-import { repeat } from 'lit/directives/repeat.js'
+
 import { TestState } from './test-suite.js'
 import { suiteContext } from '../../controller/DataManager.js'
 
@@ -20,7 +20,6 @@ import type { DevtoolsSidebarFilter } from './filter.js'
 const EXPLORER = 'wdio-devtools-sidebar-explorer'
 
 interface TestEntry {
-  uid: string
   state?: string
   label: string
   children: TestEntry[]
@@ -33,21 +32,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   static styles = [...Element.styles, css`
     :host {
       width: 100%;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-    }
-
-    header {
-      flex: 0 0 auto;
-    }
-
-    wdio-test-suite {
-      flex: 1 1 auto;
-      overflow-y: auto;
-      overflow-x: hidden;
-      min-height: 0;
-      scrollbar-width: none;
+      display: block;
     }
   `]
 
@@ -68,16 +53,10 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     return html`
       <wdio-test-entry state="${entry.state as any}">
         <label slot="label">${entry.label}</label>
-        ${entry.children && entry.children.length
-          ? html`
-              <wdio-test-suite slot="children">
-                ${repeat(
-                  entry.children,
-                  child => child.uid,
-                  child => this.#renderEntry(child)
-                )}
-              </wdio-test-suite>
-            `
+        ${entry.children && entry.children.length ?
+          html`
+            <wdio-test-suite slot="children">${entry.children.map(this.#renderEntry.bind(this))}</wdio-test-suite>
+          `
           : nothing
         }
       </wdio-test-entry>
@@ -109,7 +88,6 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if ('tests' in entry) {
       const entries = [...entry.tests, ...entry.suites]
       return {
-        uid: entry.uid,
         label: entry.title,
         state: entry.tests.some((t) => !t.end)
           ? TestState.RUNNING
@@ -122,7 +100,6 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       }
     }
     return {
-      uid: entry.uid,
       label: entry.title,
       state: !entry.end
         ? TestState.RUNNING
@@ -137,18 +114,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     if (!this.suites) {
       return
     }
-
-    // ✅ Only root suites (no parent = true top-level suite)
-    const rootSuites = this.suites
-      .flatMap(s => Object.values(s))
-      .filter(suite => !suite.parent)
-
-    // Deduplicate by uid (in case some frameworks still push duplicates)
-    const uniqueSuites = Array.from(
-      new Map(rootSuites.map(suite => [suite.uid, suite])).values()
-    )
-
-    const suites = uniqueSuites
+    const suites = Object.values(this.suites[0])
       .map(this.#getTestEntry.bind(this))
       .filter(this.#filterEntry.bind(this))
 
@@ -166,11 +132,7 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
       </header>
       <wdio-test-suite>
         ${suites.length
-          ? repeat(
-              suites,
-              suite => suite.uid,
-              suite => this.#renderEntry(suite)
-            )
+          ? suites.map(this.#renderEntry.bind(this))
           : html`<p class="text-disabledForeground text-sm px-4 py-2">No tests found</p>`
         }
       </wdio-test-suite>

packages/app/src/components/tabs.ts

@@ -15,7 +15,6 @@ export class DevtoolsTabs extends Element {
     :host {
       width: 100%;
       flex-grow: 1;
-      min-height: 0;
       display: flex;
       flex-direction: column;
       color: var(--vscode-foreground);
@@ -131,9 +130,7 @@ export class DevtoolsTab extends Element {
     :host {
       display: none;
       flex-grow: 1;
-      min-height: 0;
-      overflow-y: auto;
-      scrollbar-width: none;
+      overflow-y: scroll;
     }
 
     :host([active]) {