webdriverio · vishnuv688 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026 · Jun 12, 2026
diff --git a/examples/nightwatch/nightwatch.conf.cjs b/examples/nightwatch/nightwatch.conf.cjs
@@ -32,7 +32,7 @@ module.exports = {
             '--headless',
             '--no-sandbox',
             '--disable-dev-shm-usage',
-            '--window-size=1600,1200'
+            '--window-size=1600,900'
           ]
         },
         'goog:loggingPrefs': { performance: 'ALL' }

diff --git a/examples/wdio/wdio.conf.ts b/examples/wdio/wdio.conf.ts
@@ -69,7 +69,7 @@ export const config: Options.Testrunner = {
           '--headless',
           '--disable-gpu',
           '--remote-allow-origins=*',
-          '--window-size=1600,1200'
+          '--window-size=1600,900'
         ]
       }
       // }, {

diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
@@ -6,7 +6,11 @@ import { TraceType, type TraceLog } from '@wdio/devtools-shared'
 import { Element } from '@core/element'
 import { DataManagerController } from './controller/DataManager.js'
 import { DragController, Direction } from './utils/DragController.js'
-import { SIDEBAR_MIN_WIDTH, DARK_MODE_KEY } from './controller/constants.js'
+import {
+  SIDEBAR_MIN_WIDTH,
+  SIDEBAR_DEFAULT_WIDTH,
+  DARK_MODE_KEY
+} from './controller/constants.js'
 import { POPOUT_QUERY } from './components/workbench/compare/constants.js'
 
 // Bootstrap the dark-mode class on <body> as early as possible so popout
@@ -65,7 +69,7 @@ export class WebdriverIODevtoolsApplication extends Element {
   #drag = new DragController(this, {
     localStorageKey: 'sidebarWidth',
     minPosition: SIDEBAR_MIN_WIDTH,
-    initialPosition: window.innerWidth * 0.2,
+    initialPosition: SIDEBAR_DEFAULT_WIDTH,
     getContainerEl: () => this.#getWindow(),
     direction: Direction.horizontal
   })

diff --git a/packages/app/src/components/browser/browser-chrome.ts b/packages/app/src/components/browser/browser-chrome.ts
@@ -0,0 +1,36 @@
+import type { nothing } from 'lit'
+import { html, type TemplateResult } from 'lit'
+
+import '~icons/mdi/world.js'
+import '~icons/mdi/lock.js'
+
+/** The browser-frame chrome: traffic-light dots, address bar (with a lock for
+ *  https), and a slot for the Snapshot/Screencast view toggle. Extracted from
+ *  the snapshot component so that file stays focused on capture/replay. */
+export function renderBrowserChrome(
+  displayUrl: string | undefined,
+  viewToggle: TemplateResult | typeof nothing
+): TemplateResult {
+  return html`
+    <header
+      class="flex items-center mx-2 bg-sideBarBackground rounded-t-[14px]"
+    >
+      <div class="frame-dot bg-notificationsErrorIconForeground"></div>
+      <div class="frame-dot bg-notificationsWarningIconForeground"></div>
+      <div class="frame-dot bg-portsIconRunningProcessForeground"></div>
+      <div
+        class="flex items-center mx-4 my-2 pr-2 bg-input-background text-inputForeground border border-editorSuggestWidgetBorder rounded leading-7 flex-1 min-w-0 overflow-hidden"
+      >
+        ${displayUrl?.startsWith('https')
+          ? html`<icon-mdi-lock
+              class="w-[16px] h-[16px] m-1 mr-2 flex-shrink-0 text-chartsGreen"
+            ></icon-mdi-lock>`
+          : html`<icon-mdi-world
+              class="w-[20px] h-[20px] m-1 mr-2 flex-shrink-0"
+            ></icon-mdi-world>`}
+        <span class="truncate">${displayUrl}</span>
+      </div>
+      ${viewToggle}
+    </header>
+  `
+}