@checkly/playwright-core 1.47.12 → 1.48.10-alpha

package/lib/vite/traceViewer/assets/{wsPort-MnTGOuCA.js → workbench-Bjkiwcr1.js}

@@ -1,3 +1,9 @@
+function __vite__mapDeps(indexes) {
+  if (!__vite__mapDeps.viteFileDeps) {
+    __vite__mapDeps.viteFileDeps = ["./codeMirrorModule-5yiV-3wl.js","../codeMirrorModule.Cy8X9Wtw.css"]
+  }
+  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
+}
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -348,14 +354,14 @@ const React = /* @__PURE__ */ getDefaultExportFromCjs(reactExports);
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f = reactExports, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$1 = { key: true, ref: true, __self: true, __source: true };
+var f = reactExports, k = Symbol.for("react.element"), l = Symbol.for("react.fragment"), m$1 = Object.prototype.hasOwnProperty, n = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, p$1 = { key: true, ref: true, __self: true, __source: true };
 function q(c, a, g) {
   var b, d = {}, e = null, h = null;
   void 0 !== g && (e = "" + g);
   void 0 !== a.key && (e = "" + a.key);
   void 0 !== a.ref && (h = a.ref);
   for (b in a)
-    m.call(a, b) && !p$1.hasOwnProperty(b) && (d[b] = a[b]);
+    m$1.call(a, b) && !p$1.hasOwnProperty(b) && (d[b] = a[b]);
   if (c && c.defaultProps)
     for (b in a = c.defaultProps, a)
       void 0 === d[b] && (d[b] = a[b]);
@@ -402,7 +408,7 @@ function useMeasure() {
   return [measure, ref];
 }
 function msToString(ms) {
-  if (!isFinite(ms))
+  if (ms < 0 || !isFinite(ms))
     return "-";
   if (ms === 0)
     return "0";
@@ -458,24 +464,37 @@ function copy(text) {
   document.execCommand("copy");
   textArea.remove();
 }
-function useSetting(name, defaultValue) {
-  const value = name ? settings.getObject(name, defaultValue) : defaultValue;
-  const [state, setState] = React.useState(value);
-  const setStateWrapper = (value2) => {
+function useSetting(name, defaultValue, title) {
+  if (name)
+    defaultValue = settings.getObject(name, defaultValue);
+  const [value, setValue] = React.useState(defaultValue);
+  const setValueWrapper = React.useCallback((value2) => {
     if (name)
       settings.setObject(name, value2);
-    setState(value2);
-  };
-  return [state, setStateWrapper];
+    else
+      setValue(value2);
+  }, [name, setValue]);
+  React.useEffect(() => {
+    if (name) {
+      const onStoreChange = () => setValue(settings.getObject(name, defaultValue));
+      settings.onChangeEmitter.addEventListener(name, onStoreChange);
+      return () => settings.onChangeEmitter.removeEventListener(name, onStoreChange);
+    }
+  }, [defaultValue, name]);
+  return [value, setValueWrapper];
 }
 class Settings {
+  constructor() {
+    this.onChangeEmitter = new EventTarget();
+  }
   getString(name, defaultValue) {
     return localStorage[name] || defaultValue;
   }
   setString(name, value) {
+    var _a;
     localStorage[name] = value;
-    if (window.saveSettings)
-      window.saveSettings();
+    this.onChangeEmitter.dispatchEvent(new Event(name));
+    (_a = window.saveSettings) == null ? void 0 : _a.call(window);
   }
   getObject(name, defaultValue) {
     if (!localStorage[name])
@@ -487,12 +506,18 @@ class Settings {
     }
   }
   setObject(name, value) {
+    var _a;
     localStorage[name] = JSON.stringify(value);
-    if (window.saveSettings)
-      window.saveSettings();
+    this.onChangeEmitter.dispatchEvent(new Event(name));
+    (_a = window.saveSettings) == null ? void 0 : _a.call(window);
   }
 }
 const settings = new Settings();
+function clsx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const kControlCodesRe = "\\u0000-\\u0020\\u007f-\\u009f";
+const kWebLinkRe = new RegExp("(?:[a-zA-Z][a-zA-Z0-9+.-]{2,}:\\/\\/|www\\.)[^\\s" + kControlCodesRe + '"]{2,}[^\\s' + kControlCodesRe + `"')}\\],:;.!?]`, "ug");
 function applyTheme() {
   if (document.playwrightThemeInitialized)
     return;
@@ -511,12 +536,8 @@ function applyTheme() {
 }
 const listeners = /* @__PURE__ */ new Set();
 function toggleTheme() {
-  const oldTheme = settings.getString("theme", "light-mode");
-  let newTheme;
-  if (oldTheme === "dark-mode")
-    newTheme = "light-mode";
-  else
-    newTheme = "dark-mode";
+  const oldTheme = currentTheme();
+  const newTheme = oldTheme === "dark-mode" ? "light-mode" : "dark-mode";
   if (oldTheme)
     document.body.classList.remove(oldTheme);
   document.body.classList.add(newTheme);
@@ -533,6 +554,15 @@ function removeThemeListener(listener) {
 function currentTheme() {
   return document.body.classList.contains("dark-mode") ? "dark-mode" : "light-mode";
 }
+function useDarkModeSetting() {
+  const [theme, setTheme] = React.useState(currentTheme() === "dark-mode");
+  return [theme, (value) => {
+    const current = currentTheme() === "dark-mode";
+    if (current !== value)
+      toggleTheme();
+    setTheme(value);
+  }];
+}
 var reactDom = { exports: {} };
 var reactDom_production_min = {};
 var scheduler = { exports: {} };
@@ -7750,6 +7780,12 @@ function checkDCE() {
   reactDom.exports = reactDom_production_min;
 }
 var reactDomExports = reactDom.exports;
+var createRoot;
+var m = reactDomExports;
+{
+  createRoot = m.createRoot;
+  m.hydrateRoot;
+}
 const ToolbarButton = ({
   children,
   title = "",
@@ -7758,9 +7794,11 @@ const ToolbarButton = ({
   toggled = false,
   onClick = () => {
   },
-  style
+  style,
+  testId,
+  className
 }) => {
-  let className = `toolbar-button ${icon}`;
+  className = (className || "") + ` toolbar-button ${icon}`;
   if (toggled)
     className += " toggled";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -7773,6 +7811,7 @@ const ToolbarButton = ({
       title,
       disabled: !!disabled,
       style,
+      "data-testid": testId,
       children: [
         icon && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `codicon codicon-${icon}`, style: children ? { marginRight: 5 } : {} }),
         children
@@ -7811,24 +7850,24 @@ class MultiTraceModel {
     __publicField(this, "sources");
     __publicField(this, "resources");
     contexts.forEach((contextEntry) => indexModel(contextEntry));
-    const primaryContext = contexts.find((context2) => context2.isPrimary);
-    this.browserName = (primaryContext == null ? void 0 : primaryContext.browserName) || "";
-    this.sdkLanguage = primaryContext == null ? void 0 : primaryContext.sdkLanguage;
-    this.channel = primaryContext == null ? void 0 : primaryContext.channel;
-    this.testIdAttributeName = primaryContext == null ? void 0 : primaryContext.testIdAttributeName;
-    this.platform = (primaryContext == null ? void 0 : primaryContext.platform) || "";
-    this.title = (primaryContext == null ? void 0 : primaryContext.title) || "";
-    this.options = (primaryContext == null ? void 0 : primaryContext.options) || {};
+    const libraryContext = contexts.find((context2) => context2.origin === "library");
+    this.browserName = (libraryContext == null ? void 0 : libraryContext.browserName) || "";
+    this.sdkLanguage = libraryContext == null ? void 0 : libraryContext.sdkLanguage;
+    this.channel = libraryContext == null ? void 0 : libraryContext.channel;
+    this.testIdAttributeName = libraryContext == null ? void 0 : libraryContext.testIdAttributeName;
+    this.platform = (libraryContext == null ? void 0 : libraryContext.platform) || "";
+    this.title = (libraryContext == null ? void 0 : libraryContext.title) || "";
+    this.options = (libraryContext == null ? void 0 : libraryContext.options) || {};
+    this.actions = mergeActionsAndUpdateTiming(contexts);
+    this.pages = [].concat(...contexts.map((c) => c.pages));
     this.wallTime = contexts.map((c) => c.wallTime).reduce((prev, cur) => Math.min(prev || Number.MAX_VALUE, cur), Number.MAX_VALUE);
     this.startTime = contexts.map((c) => c.startTime).reduce((prev, cur) => Math.min(prev, cur), Number.MAX_VALUE);
     this.endTime = contexts.map((c) => c.endTime).reduce((prev, cur) => Math.max(prev, cur), Number.MIN_VALUE);
-    this.pages = [].concat(...contexts.map((c) => c.pages));
-    this.actions = mergeActions(contexts);
     this.events = [].concat(...contexts.map((c) => c.events));
     this.stdio = [].concat(...contexts.map((c) => c.stdio));
     this.errors = [].concat(...contexts.map((c) => c.errors));
     this.hasSource = contexts.some((c) => c.hasSource);
-    this.hasStepData = contexts.some((context2) => !context2.isPrimary);
+    this.hasStepData = contexts.some((context2) => context2.origin === "testRunner");
     this.resources = [...contexts.map((c) => c.resources)].flat();
     this.events.sort((a1, a2) => a1.time - a2.time);
     this.resources.sort((a1, a2) => a1._monotonicTime - a2._monotonicTime);
@@ -7881,31 +7920,74 @@ function indexModel(context2) {
   }
   for (const event of context2.events)
     event[contextSymbol] = context2;
+  for (const resource of context2.resources)
+    resource[contextSymbol] = context2;
 }
-function mergeActions(contexts) {
+function mergeActionsAndUpdateTiming(contexts) {
+  const traceFileToContexts = /* @__PURE__ */ new Map();
+  for (const context2 of contexts) {
+    const traceFile = context2.traceUrl;
+    let list = traceFileToContexts.get(traceFile);
+    if (!list) {
+      list = [];
+      traceFileToContexts.set(traceFile, list);
+    }
+    list.push(context2);
+  }
+  const result = [];
+  let traceFileId = 0;
+  for (const [, contexts2] of traceFileToContexts) {
+    if (traceFileToContexts.size > 1)
+      makeCallIdsUniqueAcrossTraceFiles(contexts2, ++traceFileId);
+    const actions = mergeActionsAndUpdateTimingSameTrace(contexts2);
+    result.push(...actions);
+  }
+  result.sort((a1, a2) => {
+    if (a2.parentId === a1.callId)
+      return -1;
+    if (a1.parentId === a2.callId)
+      return 1;
+    return a1.startTime - a2.startTime;
+  });
+  for (let i = 1; i < result.length; ++i)
+    result[i][prevInListSymbol] = result[i - 1];
+  return result;
+}
+function makeCallIdsUniqueAcrossTraceFiles(contexts, traceFileId) {
+  for (const context2 of contexts) {
+    for (const action of context2.actions) {
+      if (action.callId)
+        action.callId = `${traceFileId}:${action.callId}`;
+      if (action.parentId)
+        action.parentId = `${traceFileId}:${action.parentId}`;
+    }
+  }
+}
+function mergeActionsAndUpdateTimingSameTrace(contexts) {
   const map = /* @__PURE__ */ new Map();
-  let offset = 0;
-  const primaryContexts = contexts.filter((context2) => context2.isPrimary);
-  const nonPrimaryContexts = contexts.filter((context2) => !context2.isPrimary);
-  for (const context2 of primaryContexts) {
-    for (const action of context2.actions)
-      map.set(`${action.apiName}@${action.wallTime}`, { ...action, context: context2 });
-    if (!offset && context2.actions.length)
-      offset = context2.actions[0].startTime - context2.actions[0].wallTime;
+  const libraryContexts = contexts.filter((context2) => context2.origin === "library");
+  const testRunnerContexts = contexts.filter((context2) => context2.origin === "testRunner");
+  if (!testRunnerContexts.length || !libraryContexts.length) {
+    return contexts.map((context2) => {
+      return context2.actions.map((action) => ({ ...action, context: context2 }));
+    }).flat();
+  }
+  const matchByStepId = libraryContexts.some((c) => c.actions.some((a) => !!a.stepId));
+  for (const context2 of libraryContexts) {
+    for (const action of context2.actions) {
+      const key = matchByStepId ? action.stepId : `${action.apiName}@${action.wallTime}`;
+      map.set(key, { ...action, context: context2 });
+    }
   }
+  const delta = monotonicTimeDeltaBetweenLibraryAndRunner(testRunnerContexts, map, matchByStepId);
+  if (delta)
+    adjustMonotonicTime(libraryContexts, delta);
   const nonPrimaryIdToPrimaryId = /* @__PURE__ */ new Map();
-  for (const context2 of nonPrimaryContexts) {
+  for (const context2 of testRunnerContexts) {
     for (const action of context2.actions) {
-      if (offset) {
-        const duration = action.endTime - action.startTime;
-        if (action.startTime)
-          action.startTime = action.wallTime + offset;
-        if (action.endTime)
-          action.endTime = action.startTime + duration;
-      }
-      const key = `${action.apiName}@${action.wallTime}`;
+      const key = matchByStepId ? action.callId : `${action.apiName}@${action.wallTime}`;
       const existing = map.get(key);
-      if (existing && existing.apiName === action.apiName) {
+      if (existing) {
         nonPrimaryIdToPrimaryId.set(action.callId, existing.callId);
         if (action.error)
           existing.error = action.error;
@@ -7913,6 +7995,8 @@ function mergeActions(contexts) {
           existing.attachments = action.attachments;
         if (action.parentId)
           existing.parentId = nonPrimaryIdToPrimaryId.get(action.parentId) ?? action.parentId;
+        existing.startTime = action.startTime;
+        existing.endTime = action.endTime;
         continue;
       }
       if (action.parentId)
@@ -7920,17 +8004,44 @@ function mergeActions(contexts) {
       map.set(key, { ...action, context: context2 });
     }
   }
-  const result = [...map.values()];
-  result.sort((a1, a2) => {
-    if (a2.parentId === a1.callId)
-      return -1;
-    if (a1.parentId === a2.callId)
-      return 1;
-    return a1.wallTime - a2.wallTime || a1.startTime - a2.startTime;
-  });
-  for (let i = 1; i < result.length; ++i)
-    result[i][prevInListSymbol] = result[i - 1];
-  return result;
+  return [...map.values()];
+}
+function adjustMonotonicTime(contexts, monotonicTimeDelta) {
+  for (const context2 of contexts) {
+    context2.startTime += monotonicTimeDelta;
+    context2.endTime += monotonicTimeDelta;
+    for (const action of context2.actions) {
+      if (action.startTime)
+        action.startTime += monotonicTimeDelta;
+      if (action.endTime)
+        action.endTime += monotonicTimeDelta;
+    }
+    for (const event of context2.events)
+      event.time += monotonicTimeDelta;
+    for (const event of context2.stdio)
+      event.timestamp += monotonicTimeDelta;
+    for (const page of context2.pages) {
+      for (const frame of page.screencastFrames)
+        frame.timestamp += monotonicTimeDelta;
+    }
+    for (const resource of context2.resources) {
+      if (resource._monotonicTime)
+        resource._monotonicTime += monotonicTimeDelta;
+    }
+  }
+}
+function monotonicTimeDeltaBetweenLibraryAndRunner(nonPrimaryContexts, libraryActions, matchByStepId) {
+  for (const context2 of nonPrimaryContexts) {
+    for (const action of context2.actions) {
+      if (!action.startTime)
+        continue;
+      const key = matchByStepId ? action.stepId : `${action.apiName}@${action.wallTime}`;
+      const libraryAction = libraryActions.get(key);
+      if (libraryAction)
+        return action.startTime - libraryAction.startTime;
+    }
+  }
+  return 0;
 }
 function buildActionTree(actions) {
   const itemMap = /* @__PURE__ */ new Map();
@@ -8012,6 +8123,30 @@ function collectSources(actions, errorDescriptors) {
   }
   return result;
 }
+const kRouteMethods = /* @__PURE__ */ new Set([
+  "page.route",
+  "page.routefromhar",
+  "page.unroute",
+  "page.unrouteall",
+  "browsercontext.route",
+  "browsercontext.routefromhar",
+  "browsercontext.unroute",
+  "browsercontext.unrouteall"
+]);
+{
+  for (const method of [...kRouteMethods])
+    kRouteMethods.add(method + "async");
+  for (const method of [
+    "page.route_from_har",
+    "page.unroute_all",
+    "context.route_from_har",
+    "context.unroute_all"
+  ])
+    kRouteMethods.add(method);
+}
+function isRouteAction(action) {
+  return action.class === "Route" || kRouteMethods.has(action.apiName.toLowerCase());
+}
 const kMinSize = 50;
 const SplitView = ({
   sidebarSize,
@@ -8020,10 +8155,12 @@ const SplitView = ({
   orientation = "vertical",
   minSidebarSize = kMinSize,
   settingName,
-  children
+  sidebar,
+  main
 }) => {
-  const [hSize, setHSize] = useSetting(settingName ? settingName + "." + orientation + ":size" : void 0, Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio);
-  const [vSize, setVSize] = useSetting(settingName ? settingName + "." + orientation + ":size" : void 0, Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio);
+  const defaultSize = Math.max(minSidebarSize, sidebarSize) * window.devicePixelRatio;
+  const [hSize, setHSize] = useSetting(settingName ? settingName + "." + orientation + ":size" : void 0, defaultSize);
+  const [vSize, setVSize] = useSetting(settingName ? settingName + "." + orientation + ":size" : void 0, defaultSize);
   const [resizing, setResizing] = reactExports.useState(null);
   const [measure, ref] = useMeasure();
   let size;
@@ -8036,7 +8173,6 @@ const SplitView = ({
     if (measure && measure.width < size)
       size = measure.width - 10;
   }
-  const childrenArray = reactExports.Children.toArray(children);
   document.body.style.userSelect = resizing ? "none" : "inherit";
   let resizerStyle = {};
   if (orientation === "vertical") {
@@ -8050,9 +8186,9 @@ const SplitView = ({
     else
       resizerStyle = { right: resizing ? 0 : size - 4, left: resizing ? 0 : void 0, width: resizing ? "initial" : 8 };
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "split-view " + orientation + (sidebarIsFirst ? " sidebar-first" : ""), ref, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "split-view-main", children: childrenArray[0] }),
-    !sidebarHidden && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flexBasis: size }, className: "split-view-sidebar", children: childrenArray[1] }),
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("split-view", orientation, sidebarIsFirst && "sidebar-first"), ref, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "split-view-main", children: main }),
+    !sidebarHidden && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flexBasis: size }, className: "split-view-sidebar", children: sidebar }),
     !sidebarHidden && /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
@@ -8118,8 +8254,17 @@ function cssEscapeOne(s, i) {
     return s.charAt(i);
   return "\\" + s.charAt(i);
 }
+let normalizedWhitespaceCache;
+function cacheNormalizedWhitespaces() {
+  normalizedWhitespaceCache = /* @__PURE__ */ new Map();
+}
 function normalizeWhiteSpace(text) {
-  return text.replace(/\u200b/g, "").trim().replace(/\s+/g, " ");
+  let result = normalizedWhitespaceCache == null ? void 0 : normalizedWhitespaceCache.get(text);
+  if (result === void 0) {
+    result = text.replace(/\u200b/g, "").trim().replace(/\s+/g, " ");
+    normalizedWhitespaceCache == null ? void 0 : normalizedWhitespaceCache.set(text, result);
+  }
+  return result;
 }
 function normalizeEscapedRegexQuotes(source) {
   return source.replace(/(^|[^\\])(\\\\)*\\(['"`])/g, "$1$2$3");
@@ -8153,6 +8298,13 @@ function trimStringWithEllipsis(input, cap) {
 function escapeRegExp(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
+const escaped = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
+function escapeHTMLAttribute(s) {
+  return s.replace(/[&<>"']/ug, (char) => escaped[char]);
+}
+function escapeHTML$1(s) {
+  return s.replace(/[&<]/ug, (char) => escaped[char]);
+}
 const between = function(num, first, last) {
   return num >= first && num <= last;
 };
@@ -10185,7 +10337,7 @@ function ListView({
   onIconClicked,
   noItemsMessage,
   dataTestId,
-  noHighlightOnHover
+  notSelectable
 }) {
   const itemListRef = reactExports.useRef(null);
   const [highlightedItem, setHighlightedItem] = reactExports.useState();
@@ -10206,12 +10358,11 @@ function ListView({
     if (itemListRef.current)
       itemListRef.current.scrollTop = scrollPositions.get(name) || 0;
   }, [name]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "list-view vbox", role: items.length > 0 ? "list" : void 0, "data-testid": dataTestId || name + "-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx(`list-view vbox`, name + "-list-view"), role: items.length > 0 ? "list" : void 0, "data-testid": dataTestId || name + "-list", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "list-view-content",
+      className: clsx("list-view-content", notSelectable && "not-selectable"),
       tabIndex: 0,
-      onDoubleClick: () => selectedItem && (onAccepted == null ? void 0 : onAccepted(selectedItem, items.indexOf(selectedItem))),
       onKeyDown: (event) => {
         var _a;
         if (selectedItem && event.key === "Enter") {
@@ -10248,23 +10399,27 @@ function ListView({
         scrollIntoViewIfNeeded(element || void 0);
         onHighlighted == null ? void 0 : onHighlighted(void 0);
         onSelected == null ? void 0 : onSelected(items[newIndex], newIndex);
+        setHighlightedItem(void 0);
       },
       ref: itemListRef,
       children: [
         noItemsMessage && items.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "list-view-empty", children: noItemsMessage }),
         items.map((item, index) => {
-          const selectedSuffix = selectedItem === item ? " selected" : "";
-          const highlightedSuffix = !noHighlightOnHover && highlightedItem === item ? " highlighted" : "";
-          const errorSuffix = (isError == null ? void 0 : isError(item, index)) ? " error" : "";
-          const warningSuffix = (isWarning == null ? void 0 : isWarning(item, index)) ? " warning" : "";
-          const infoSuffix = (isInfo == null ? void 0 : isInfo(item, index)) ? " info" : "";
           const indentation = (indent == null ? void 0 : indent(item, index)) || 0;
           const rendered = render(item, index);
           return /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
+              onDoubleClick: () => onAccepted == null ? void 0 : onAccepted(item, index),
               role: "listitem",
-              className: "list-view-entry" + selectedSuffix + highlightedSuffix + errorSuffix + warningSuffix + infoSuffix,
+              className: clsx(
+                "list-view-entry",
+                selectedItem === item && "selected",
+                !notSelectable && highlightedItem === item && "highlighted",
+                (isError == null ? void 0 : isError(item, index)) && "error",
+                (isWarning == null ? void 0 : isWarning(item, index)) && "warning",
+                (isInfo == null ? void 0 : isInfo(item, index)) && "info"
+              ),
               onClick: () => onSelected == null ? void 0 : onSelected(item, index),
               onMouseEnter: () => setHighlightedItem(item),
               onMouseLeave: () => setHighlightedItem(void 0),
@@ -10487,7 +10642,8 @@ const renderAction = (action, options) => {
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "action-title", title: action.apiName, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: action.apiName }),
       locator && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-selector", title: locator, children: locator }),
-      action.method === "goto" && action.params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: action.params.url, children: action.params.url })
+      action.method === "goto" && action.params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: action.params.url, children: action.params.url }),
+      action.class === "APIRequestContext" && action.params.url && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-url", title: action.params.url, children: excludeOrigin(action.params.url) })
     ] }),
     (showDuration || showBadges) && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
     showDuration && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "action-duration", children: time || /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-loading" }) }),
@@ -10503,19 +10659,27 @@ const renderAction = (action, options) => {
     ] })
   ] });
 };
-const CopyToClipboard = ({ value }) => {
-  const [iconClassName, setIconClassName] = reactExports.useState("codicon-clippy");
+function excludeOrigin(url) {
+  try {
+    const urlObject = new URL(url);
+    return urlObject.pathname + urlObject.search;
+  } catch (error) {
+    return url;
+  }
+}
+const CopyToClipboard = ({ value, description }) => {
+  const [icon, setIcon] = reactExports.useState("copy");
   const handleCopy = reactExports.useCallback(() => {
     navigator.clipboard.writeText(value).then(() => {
-      setIconClassName("codicon-check");
+      setIcon("check");
       setTimeout(() => {
-        setIconClassName("codicon-clippy");
+        setIcon("copy");
       }, 3e3);
     }, () => {
-      setIconClassName("codicon-close");
+      setIcon("close");
     });
   }, [value]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `copy-icon codicon ${iconClassName}`, onClick: handleCopy });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: description ? description : "Copy", icon, onClick: handleCopy });
 };
 const PlaceholderPanel = ({ text }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "fill", style: {
@@ -10533,7 +10697,8 @@ const CallTab = ({ action, sdkLanguage }) => {
   const params = { ...action.params };
   delete params.info;
   const paramKeys = Object.keys(params);
-  const wallTime = action.wallTime ? new Date(action.wallTime).toLocaleString() : null;
+  const timeMillis = action.startTime + (action.context.wallTime - action.context.startTime);
+  const wallTime = new Date(timeMillis).toLocaleString();
   const duration = action.endTime ? msToString(action.endTime - action.startTime) : "Timed Out";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-tab", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-line", children: action.apiName }),
@@ -10563,7 +10728,7 @@ function renderProperty(property, key) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
     property.name,
     ":",
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `call-value ${property.type}`, title: property.text, children: text }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("call-value", property.type), title: property.text, children: text }),
     ["string", "number", "object", "locator"].includes(property.type) && /* @__PURE__ */ jsxRuntimeExports.jsx(CopyToClipboard, { value: property.text })
   ] }, key);
 }
@@ -10631,7 +10796,7 @@ const LogTab = ({ action, isLive }) => {
     if (!action || !action.log.length)
       return [];
     const log = action.log;
-    const wallTimeOffset = action.wallTime - action.startTime;
+    const wallTimeOffset = action.context.wallTime - action.context.startTime;
     const entries2 = [];
     for (let i = 0; i < log.length; ++i) {
       let time = "";
@@ -10664,7 +10829,7 @@ const LogTab = ({ action, isLive }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "log-list-duration", children: entry.time }),
         entry.message
       ] }),
-      noHighlightOnHover: true
+      notSelectable: true
     }
   );
 };
@@ -10886,21 +11051,23 @@ function useConsoleTabModel(model, selectedTime) {
   }, [entries, selectedTime]);
   return { entries: filteredEntries };
 }
-const ConsoleTab = ({ consoleModel, boundaries }) => {
+const ConsoleTab = ({ consoleModel, boundaries, onEntryHovered, onAccepted }) => {
   if (!consoleModel.entries.length)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No console entries" });
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "console-tab", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     ConsoleListView,
     {
       name: "console",
+      onAccepted,
+      onHighlighted: onEntryHovered,
       items: consoleModel.entries,
       isError: (entry) => entry.isError,
       isWarning: (entry) => entry.isWarning,
       render: (entry) => {
         const timestamp = msToString(entry.timestamp - boundaries.minimum);
         const timestampElement = /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "console-time", children: timestamp });
-        const errorSuffix = entry.isError ? " status-error" : entry.isWarning ? " status-warning" : " status-none";
-        const statusElement = entry.browserMessage || entry.browserError ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-browser" + errorSuffix, title: "Browser message" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-file" + errorSuffix, title: "Runner message" });
+        const errorSuffix = entry.isError ? "status-error" : entry.isWarning ? "status-warning" : "status-none";
+        const statusElement = entry.browserMessage || entry.browserError ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("codicon", "codicon-browser", errorSuffix), title: "Browser message" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("codicon", "codicon-file", errorSuffix), title: "Runner message" });
         let locationText;
         let messageBody;
         let messageInnerHTML;
@@ -11010,9 +11177,11 @@ function supportProperty(cssKey) {
 const Toolbar = ({
   noShadow,
   children,
-  noMinHeight
+  noMinHeight,
+  className,
+  onClick
 }) => {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "toolbar" + (noShadow ? " no-shadow" : "") + (noMinHeight ? " no-min-height" : ""), children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: clsx("toolbar", noShadow && "no-shadow", noMinHeight && "no-min-height", className), onClick, children });
 };
 const TabbedPane = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolbar, dataTestId, mode }) => {
   if (!mode)
@@ -11032,25 +11201,22 @@ const TabbedPane = ({ tabs, selectedTab, setSelectedTab, leftToolbar, rightToolb
             errorCount: tab.errorCount,
             selected: selectedTab === tab.id,
             onSelect: setSelectedTab
-          }
+          },
+          tab.id
         ))
       ] }),
       mode === "select" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: "auto", display: "flex", height: "100%", overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("select", { style: { width: "100%", background: "none", cursor: "pointer" }, onChange: (e) => {
         setSelectedTab(tabs[e.currentTarget.selectedIndex].id);
       }, children: tabs.map((tab) => {
         let suffix = "";
-        if (tab.count === 1)
-          suffix = " 🔵";
-        else if (tab.count)
-          suffix = ` 🔵✖️${tab.count}`;
-        if (tab.errorCount === 1)
-          suffix = ` 🔴`;
-        else if (tab.errorCount)
-          suffix = ` 🔴✖️${tab.errorCount}`;
+        if (tab.count)
+          suffix = ` (${tab.count})`;
+        if (tab.errorCount)
+          suffix = ` (${tab.errorCount})`;
         return /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: tab.id, selected: tab.id === selectedTab, children: [
           tab.title,
           suffix
-        ] });
+        ] }, tab.id);
       }) }) }),
       rightToolbar && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { flex: "none", display: "flex", alignItems: "center" }, children: [
         ...rightToolbar
@@ -11069,7 +11235,7 @@ const TabbedPaneTab = ({ id: id2, title, count, errorCount, selected, onSelect }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "tabbed-pane-tab " + (selected ? "selected" : ""),
+      className: clsx("tabbed-pane-tab", selected && "selected"),
       onClick: () => onSelect(id2),
       title,
       children: [
@@ -11090,6 +11256,8 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   let promise = Promise.resolve();
   if (deps && deps.length > 0) {
     const links = document.getElementsByTagName("link");
+    const cspNonceMeta = document.querySelector("meta[property=csp-nonce]");
+    const cspNonce = (cspNonceMeta == null ? void 0 : cspNonceMeta.nonce) || (cspNonceMeta == null ? void 0 : cspNonceMeta.getAttribute("nonce"));
     promise = Promise.all(deps.map((dep) => {
       dep = assetsURL(dep, importerUrl);
       if (dep in seen)
@@ -11115,6 +11283,9 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
         link.crossOrigin = "";
       }
       link.href = dep;
+      if (cspNonce) {
+        link.setAttribute("nonce", cspNonce);
+      }
       document.head.appendChild(link);
       if (isCss) {
         return new Promise((res, rej) => {
@@ -11136,6 +11307,8 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
 const CodeMirrorWrapper = ({
   text,
   language,
+  mimeType,
+  linkify,
   readOnly,
   highlight,
   revealLine,
@@ -11146,29 +11319,18 @@ const CodeMirrorWrapper = ({
   onChange
 }) => {
   const [measure, codemirrorElement] = useMeasure();
-  const [modulePromise] = reactExports.useState(__vitePreload(() => import("./codeMirrorModule-clyjx5sb.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url).then((m2) => m2.default));
+  const [modulePromise] = reactExports.useState(__vitePreload(() => import("./codeMirrorModule-5yiV-3wl.js"), true ? __vite__mapDeps([0,1]) : void 0, import.meta.url).then((m2) => m2.default));
   const codemirrorRef = reactExports.useRef(null);
   const [codemirror, setCodemirror] = reactExports.useState();
   reactExports.useEffect(() => {
     (async () => {
       var _a, _b;
       const CodeMirror = await modulePromise;
+      defineCustomMode(CodeMirror);
       const element = codemirrorElement.current;
       if (!element)
         return;
-      let mode = "";
-      if (language === "javascript")
-        mode = "javascript";
-      if (language === "python")
-        mode = "python";
-      if (language === "java")
-        mode = "text/x-java";
-      if (language === "csharp")
-        mode = "text/x-csharp";
-      if (language === "html")
-        mode = "htmlmixed";
-      if (language === "css")
-        mode = "css";
+      const mode = languageToMode(language) || mimeTypeToMode(mimeType) || (linkify ? "text/linkified" : "");
       if (codemirrorRef.current && mode === codemirrorRef.current.cm.getOption("mode") && !!readOnly === codemirrorRef.current.cm.getOption("readOnly") && lineNumbers === codemirrorRef.current.cm.getOption("lineNumbers") && wrapLines === codemirrorRef.current.cm.getOption("lineWrapping")) {
         return;
       }
@@ -11186,7 +11348,7 @@ const CodeMirrorWrapper = ({
       setCodemirror(cm);
       return cm;
     })();
-  }, [modulePromise, codemirror, codemirrorElement, language, lineNumbers, wrapLines, readOnly, isFocused]);
+  }, [modulePromise, codemirror, codemirrorElement, language, mimeType, linkify, lineNumbers, wrapLines, readOnly, isFocused]);
   reactExports.useEffect(() => {
     if (codemirrorRef.current)
       codemirrorRef.current.cm.setSize(measure.width, measure.height);
@@ -11242,15 +11404,74 @@ const CodeMirrorWrapper = ({
         codemirror.off("change", changeListener);
     };
   }, [codemirror, text, highlight, revealLine, focusOnChange, onChange]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cm-wrapper", ref: codemirrorElement });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "cm-wrapper", ref: codemirrorElement, onClick: onCodeMirrorClick });
 };
+function onCodeMirrorClick(event) {
+  var _a;
+  if (!(event.target instanceof HTMLElement))
+    return;
+  let url;
+  if (event.target.classList.contains("cm-linkified")) {
+    url = event.target.textContent;
+  } else if (event.target.classList.contains("cm-link") && ((_a = event.target.nextElementSibling) == null ? void 0 : _a.classList.contains("cm-url"))) {
+    url = event.target.nextElementSibling.textContent.slice(1, -1);
+  }
+  if (url) {
+    event.preventDefault();
+    event.stopPropagation();
+    window.open(url, "_blank");
+  }
+}
+let customModeDefined = false;
+function defineCustomMode(cm) {
+  if (customModeDefined)
+    return;
+  customModeDefined = true;
+  cm.defineSimpleMode("text/linkified", {
+    start: [
+      { regex: kWebLinkRe, token: "linkified" }
+    ]
+  });
+}
+function mimeTypeToMode(mimeType) {
+  if (!mimeType)
+    return;
+  if (mimeType.includes("javascript") || mimeType.includes("json"))
+    return "javascript";
+  if (mimeType.includes("python"))
+    return "python";
+  if (mimeType.includes("csharp"))
+    return "text/x-csharp";
+  if (mimeType.includes("java"))
+    return "text/x-java";
+  if (mimeType.includes("markdown"))
+    return "markdown";
+  if (mimeType.includes("html") || mimeType.includes("svg"))
+    return "htmlmixed";
+  if (mimeType.includes("css"))
+    return "css";
+}
+function languageToMode(language) {
+  if (!language)
+    return;
+  return {
+    javascript: "javascript",
+    jsonl: "javascript",
+    python: "python",
+    csharp: "text/x-csharp",
+    java: "text/x-java",
+    markdown: "markdown",
+    html: "htmlmixed",
+    css: "css"
+  }[language];
+}
 const NetworkResourceDetails = ({ resource, onClose }) => {
   const [selectedTab, setSelectedTab] = reactExports.useState("request");
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabbedPane,
     {
       dataTestId: "network-request-details",
-      leftToolbar: [/* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "close", title: "Close", onClick: onClose })],
+      leftToolbar: [/* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "close", title: "Close", onClick: onClose }, "close")],
       tabs: [
         {
           id: "request",
@@ -11278,26 +11499,36 @@ const RequestTab = ({ resource }) => {
   reactExports.useEffect(() => {
     const readResources = async () => {
       if (resource.request.postData) {
-        const requestContentTypeHeader = resource.request.headers.find((q2) => q2.name === "Content-Type");
+        const requestContentTypeHeader = resource.request.headers.find((q2) => q2.name.toLowerCase() === "content-type");
         const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : "";
-        const language = mimeTypeToHighlighter(requestContentType);
         if (resource.request.postData._sha1) {
           const response = await fetch(`sha1/${resource.request.postData._sha1}`);
-          setRequestBody({ text: formatBody(await response.text(), requestContentType), language });
+          setRequestBody({ text: formatBody(await response.text(), requestContentType), mimeType: requestContentType });
         } else {
-          setRequestBody({ text: formatBody(resource.request.postData.text, requestContentType), language });
+          setRequestBody({ text: formatBody(resource.request.postData.text, requestContentType), mimeType: requestContentType });
         }
+      } else {
+        setRequestBody(null);
       }
     };
     readResources();
   }, [resource]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "network-request-details-tab", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-header", children: "URL" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-url", children: resource.request.url }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-header", children: "General" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-url", children: `URL: ${resource.request.url}` }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-general", children: `Method: ${resource.request.method}` }),
+    resource.response.status !== -1 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "network-request-details-general", style: { display: "flex" }, children: [
+      "Status Code: ",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: statusClass(resource.response.status), style: { display: "inline-flex" }, children: `${resource.response.status} ${resource.response.statusText}` })
+    ] }),
+    resource.request.queryString.length ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-header", children: "Query String Parameters" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-headers", children: resource.request.queryString.map((param) => `${param.name}: ${param.value}`).join("\n") })
+    ] }) : null,
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-header", children: "Request Headers" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-headers", children: resource.request.headers.map((pair) => `${pair.name}: ${pair.value}`).join("\n") }),
     requestBody && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-request-details-header", children: "Request Body" }),
-    requestBody && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: requestBody.text, language: requestBody.language, readOnly: true, lineNumbers: true })
+    requestBody && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: requestBody.text, mimeType: requestBody.mimeType, readOnly: true, lineNumbers: true })
   ] });
 };
 const ResponseTab = ({ resource }) => {
@@ -11312,6 +11543,7 @@ const BodyTab = ({ resource }) => {
     const readResources = async () => {
       if (resource.response.content._sha1) {
         const useBase64 = resource.response.content.mimeType.includes("image");
+        const isFont = resource.response.content.mimeType.includes("font");
         const response = await fetch(`sha1/${resource.response.content._sha1}`);
         if (useBase64) {
           const blob = await response.blob();
@@ -11319,21 +11551,64 @@ const BodyTab = ({ resource }) => {
           const eventPromise = new Promise((f2) => reader.onload = f2);
           reader.readAsDataURL(blob);
           setResponseBody({ dataUrl: (await eventPromise).target.result });
+        } else if (isFont) {
+          const font = await response.arrayBuffer();
+          setResponseBody({ font });
         } else {
           const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
-          const language = mimeTypeToHighlighter(resource.response.content.mimeType);
-          setResponseBody({ text: formattedBody, language });
+          setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType });
         }
+      } else {
+        setResponseBody(null);
       }
     };
     readResources();
   }, [resource]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "network-request-details-tab", children: [
     !resource.response.content._sha1 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: "Response body is not available for this request." }),
+    responseBody && responseBody.font && /* @__PURE__ */ jsxRuntimeExports.jsx(FontPreview, { font: responseBody.font }),
     responseBody && responseBody.dataUrl && /* @__PURE__ */ jsxRuntimeExports.jsx("img", { draggable: "false", src: responseBody.dataUrl }),
-    responseBody && responseBody.text && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: responseBody.text, language: responseBody.language, readOnly: true, lineNumbers: true })
+    responseBody && responseBody.text && /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: responseBody.text, mimeType: responseBody.mimeType, readOnly: true, lineNumbers: true })
+  ] });
+};
+const FontPreview = ({ font }) => {
+  const [isError, setIsError] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    let fontFace;
+    try {
+      fontFace = new FontFace("font-preview", font);
+      if (fontFace.status === "loaded")
+        document.fonts.add(fontFace);
+      if (fontFace.status === "error")
+        setIsError(true);
+    } catch {
+      setIsError(true);
+    }
+    return () => {
+      document.fonts.delete(fontFace);
+    };
+  }, [font]);
+  if (isError)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-font-preview-error", children: "Could not load font preview" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "network-font-preview", children: [
+    "ABCDEFGHIJKLM",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "NOPQRSTUVWXYZ",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "abcdefghijklm",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "nopqrstuvwxyz",
+    /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+    "1234567890"
   ] });
 };
+function statusClass(statusCode) {
+  if (statusCode < 300 || statusCode === 304)
+    return "green-circle";
+  if (statusCode < 400)
+    return "yellow-circle";
+  return "red-circle";
+}
 function formatBody(body, contentType) {
   if (body === null)
     return "Loading...";
@@ -11351,14 +11626,6 @@ function formatBody(body, contentType) {
     return decodeURIComponent(bodyStr);
   return bodyStr;
 }
-function mimeTypeToHighlighter(mimeType) {
-  if (mimeType.includes("javascript") || mimeType.includes("json"))
-    return "javascript";
-  if (mimeType.includes("html"))
-    return "html";
-  if (mimeType.includes("css"))
-    return "css";
-}
 const GlassPane = ({ cursor, onPaneMouseMove, onPaneMouseUp, onPaneDoubleClick }) => {
   React.useEffect(() => {
     const glassPaneDiv = document.createElement("div");
@@ -11422,7 +11689,8 @@ const ResizeView = ({ orientation, offsets, setOffsets, resizerColor, resizerWid
         right: 0,
         bottom: 0,
         left: -(7 - resizerWidth) / 2,
-        zIndex: 1e3,
+        zIndex: 100,
+        // Above the content, but below the film strip hover.
         pointerEvents: "none"
       },
       ref,
@@ -11463,7 +11731,8 @@ const ResizeView = ({ orientation, offsets, setOffsets, resizerColor, resizerWid
                 ...fillStyle,
                 background: resizerColor
               } })
-            }
+            },
+            index
           );
         })
       ]
@@ -11471,12 +11740,24 @@ const ResizeView = ({ orientation, offsets, setOffsets, resizerColor, resizerWid
   );
 };
 function GridView(model) {
-  const initialOffsets = [];
-  for (let i = 0; i < model.columns.length - 1; ++i) {
-    const column = model.columns[i];
-    initialOffsets[i] = (initialOffsets[i - 1] || 0) + model.columnWidth(column);
+  const [offsets, setOffsets] = reactExports.useState([]);
+  reactExports.useEffect(() => {
+    const offsets2 = [];
+    for (let i = 0; i < model.columns.length - 1; ++i) {
+      const column = model.columns[i];
+      offsets2[i] = (offsets2[i - 1] || 0) + model.columnWidths.get(column);
+    }
+    setOffsets(offsets2);
+  }, [model.columns, model.columnWidths]);
+  function updateColumnWidths(offsets2) {
+    const widths = new Map(model.columnWidths.entries());
+    for (let i = 0; i < offsets2.length; ++i) {
+      const width = offsets2[i] - (offsets2[i - 1] || 0);
+      const column = model.columns[i];
+      widths.set(column, width);
+    }
+    model.setColumnWidths(widths);
   }
-  const [offsets, setOffsets] = reactExports.useState(initialOffsets);
   const toggleSorting = reactExports.useCallback((f2) => {
     var _a, _b;
     (_b = model.setSorting) == null ? void 0 : _b.call(model, { by: f2, negate: ((_a = model.sorting) == null ? void 0 : _a.by) === f2 ? !model.sorting.negate : false });
@@ -11487,7 +11768,7 @@ function GridView(model) {
       {
         orientation: "horizontal",
         offsets,
-        setOffsets,
+        setOffsets: updateColumnWidths,
         resizerColor: "var(--vscode-panel-border)",
         resizerWidth: 1,
         minColumnWidth: 25
@@ -11500,7 +11781,7 @@ function GridView(model) {
           {
             className: "grid-view-header-cell " + sortingHeader(column, model.sorting),
             style: {
-              width: offsets[i] - (offsets[i - 1] || 0)
+              width: i < model.columns.length - 1 ? model.columnWidths.get(column) : void 0
             },
             onClick: () => model.setSorting && toggleSorting(column),
             children: [
@@ -11508,7 +11789,8 @@ function GridView(model) {
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-triangle-up" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "codicon codicon-triangle-down" })
             ]
-          }
+          },
+          model.columnTitle(column)
         );
       }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -11525,9 +11807,12 @@ function GridView(model) {
                 {
                   className: `grid-view-cell grid-view-column-${String(column)}`,
                   title,
-                  style: { width: offsets[i] - (offsets[i - 1] || 0) },
+                  style: {
+                    width: i < model.columns.length - 1 ? model.columnWidths.get(column) : void 0
+                  },
                   children: body
-                }
+                },
+                model.columnTitle(column)
               );
             }) });
           },
@@ -11545,7 +11830,7 @@ function GridView(model) {
           onIconClicked: model.onIconClicked,
           noItemsMessage: model.noItemsMessage,
           dataTestId: model.dataTestId,
-          noHighlightOnHover: model.noHighlightOnHover
+          notSelectable: model.notSelectable
         }
       )
     ] })
@@ -11554,6 +11839,32 @@ function GridView(model) {
 function sortingHeader(column, sorting) {
   return column === (sorting == null ? void 0 : sorting.by) ? " filter-" + (sorting.negate ? "negative" : "positive") : "";
 }
+const resourceTypes = ["All", "Fetch", "HTML", "JS", "CSS", "Font", "Image"];
+const defaultFilterState = { searchValue: "", resourceType: "All" };
+const NetworkFilters = ({ filterState, onFilterStateChange }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "network-filters", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "search",
+        placeholder: "Filter network",
+        spellCheck: false,
+        value: filterState.searchValue,
+        onChange: (e) => onFilterStateChange({ ...filterState, searchValue: e.target.value })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "network-filters-resource-types", children: resourceTypes.map((resourceType) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        title: resourceType,
+        onClick: () => onFilterStateChange({ ...filterState, resourceType }),
+        className: `network-filters-resource-type ${filterState.resourceType === resourceType ? "selected" : ""}`,
+        children: resourceType
+      },
+      resourceType
+    )) })
+  ] });
+};
 const NetworkGridView = GridView;
 function useNetworkTabModel(model, selectedTime) {
   const resources = reactExports.useMemo(() => {
@@ -11565,17 +11876,26 @@ function useNetworkTabModel(model, selectedTime) {
     });
     return filtered;
   }, [model, selectedTime]);
-  return { resources };
+  const contextIdMap = reactExports.useMemo(() => new ContextIdMap(model), [model]);
+  return { resources, contextIdMap };
 }
 const NetworkTab = ({ boundaries, networkModel, onEntryHovered }) => {
   const [sorting, setSorting] = reactExports.useState(void 0);
   const [selectedEntry, setSelectedEntry] = reactExports.useState(void 0);
+  const [filterState, setFilterState] = reactExports.useState(defaultFilterState);
   const { renderedEntries } = reactExports.useMemo(() => {
-    const renderedEntries2 = networkModel.resources.map((entry) => renderEntry(entry, boundaries));
+    const renderedEntries2 = networkModel.resources.map((entry) => renderEntry(entry, boundaries, networkModel.contextIdMap)).filter(filterEntry(filterState));
     if (sorting)
       sort(renderedEntries2, sorting);
     return { renderedEntries: renderedEntries2 };
-  }, [networkModel.resources, sorting, boundaries]);
+  }, [networkModel.resources, networkModel.contextIdMap, filterState, sorting, boundaries]);
+  const [columnWidths, setColumnWidths] = reactExports.useState(() => {
+    return new Map(allColumns().map((column) => [column, columnWidth(column)]));
+  });
+  const onFilterStateChange = reactExports.useCallback((newFilterState) => {
+    setFilterState(newFilterState);
+    setSelectedEntry(void 0);
+  }, []);
   if (!networkModel.resources.length)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No network calls" });
   const grid = /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -11586,10 +11906,11 @@ const NetworkTab = ({ boundaries, networkModel, onEntryHovered }) => {
       selectedItem: selectedEntry,
       onSelected: (item) => setSelectedEntry(item),
       onHighlighted: (item) => onEntryHovered(item == null ? void 0 : item.resource),
-      columns: selectedEntry ? ["name"] : ["name", "method", "status", "contentType", "duration", "size", "start", "route"],
+      columns: visibleColumns(!!selectedEntry, renderedEntries),
       columnTitle,
-      columnWidth,
-      isError: (item) => item.status.code >= 400,
+      columnWidths,
+      setColumnWidths,
+      isError: (item) => item.status.code >= 400 || item.status.code === -1,
       isInfo: (item) => !!item.route,
       render: (item, column) => renderCell(item, column),
       sorting,
@@ -11597,14 +11918,24 @@ const NetworkTab = ({ boundaries, networkModel, onEntryHovered }) => {
     }
   );
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkFilters, { filterState, onFilterStateChange }),
     !selectedEntry && grid,
-    selectedEntry && /* @__PURE__ */ jsxRuntimeExports.jsxs(SplitView, { sidebarSize: 200, sidebarIsFirst: true, orientation: "horizontal", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkResourceDetails, { resource: selectedEntry.resource, onClose: () => setSelectedEntry(void 0) }),
-      grid
-    ] })
+    selectedEntry && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SplitView,
+      {
+        sidebarSize: columnWidths.get("name"),
+        sidebarIsFirst: true,
+        orientation: "horizontal",
+        settingName: "networkResourceDetails",
+        main: /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkResourceDetails, { resource: selectedEntry.resource, onClose: () => setSelectedEntry(void 0) }),
+        sidebar: grid
+      }
+    )
   ] });
 };
 const columnTitle = (column) => {
+  if (column === "contextId")
+    return "Source";
   if (column === "name")
     return "Name";
   if (column === "method")
@@ -11632,9 +11963,32 @@ const columnWidth = (column) => {
     return 60;
   if (column === "contentType")
     return 200;
+  if (column === "contextId")
+    return 60;
   return 100;
 };
+function visibleColumns(entrySelected, renderedEntries) {
+  if (entrySelected) {
+    const columns2 = ["name"];
+    if (hasMultipleContexts(renderedEntries))
+      columns2.unshift("contextId");
+    return columns2;
+  }
+  let columns = allColumns();
+  if (!hasMultipleContexts(renderedEntries))
+    columns = columns.filter((name) => name !== "contextId");
+  return columns;
+}
+function allColumns() {
+  return ["contextId", "name", "method", "status", "contentType", "duration", "size", "start", "route"];
+}
 const renderCell = (entry, column) => {
+  if (column === "contextId") {
+    return {
+      body: entry.contextId,
+      title: entry.name.url
+    };
+  }
   if (column === "name") {
     return {
       body: entry.name.name,
@@ -11661,7 +12015,52 @@ const renderCell = (entry, column) => {
     return { body: entry.route };
   return { body: "" };
 };
-const renderEntry = (resource, boundaries) => {
+class ContextIdMap {
+  constructor(model) {
+    __publicField(this, "_pagerefToShortId", /* @__PURE__ */ new Map());
+    __publicField(this, "_contextToId", /* @__PURE__ */ new Map());
+    __publicField(this, "_lastPageId", 0);
+    __publicField(this, "_lastApiRequestContextId", 0);
+  }
+  contextId(resource) {
+    if (resource.pageref)
+      return this._pageId(resource.pageref);
+    else if (resource._apiRequest)
+      return this._apiRequestContextId(resource);
+    return "";
+  }
+  _pageId(pageref) {
+    let shortId = this._pagerefToShortId.get(pageref);
+    if (!shortId) {
+      ++this._lastPageId;
+      shortId = "page#" + this._lastPageId;
+      this._pagerefToShortId.set(pageref, shortId);
+    }
+    return shortId;
+  }
+  _apiRequestContextId(resource) {
+    const contextEntry = context(resource);
+    if (!contextEntry)
+      return "";
+    let contextId = this._contextToId.get(contextEntry);
+    if (!contextId) {
+      ++this._lastApiRequestContextId;
+      contextId = "api#" + this._lastApiRequestContextId;
+      this._contextToId.set(contextEntry, contextId);
+    }
+    return contextId;
+  }
+}
+function hasMultipleContexts(renderedEntries) {
+  const contextIds = /* @__PURE__ */ new Set();
+  for (const entry of renderedEntries) {
+    contextIds.add(entry.contextId);
+    if (contextIds.size > 1)
+      return true;
+  }
+  return false;
+}
+const renderEntry = (resource, boundaries, contextIdGenerator) => {
   const routeStatus = formatRouteStatus(resource);
   let resourceName;
   try {
@@ -11685,7 +12084,8 @@ const renderEntry = (resource, boundaries) => {
     size: resource.response._transferSize > 0 ? resource.response._transferSize : resource.response.bodySize,
     start: resource._monotonicTime - boundaries.minimum,
     route: routeStatus,
-    resource
+    resource,
+    contextId: contextIdGenerator.contextId(resource)
   };
 };
 function formatRouteStatus(request) {
@@ -11740,6 +12140,23 @@ function comparator(sortBy) {
       return a.route.localeCompare(b.route);
     };
   }
+  if (sortBy === "contextId")
+    return (a, b) => a.contextId.localeCompare(b.contextId);
+}
+const resourceTypePredicates = {
+  "All": () => true,
+  "Fetch": (contentType) => contentType === "application/json",
+  "HTML": (contentType) => contentType === "text/html",
+  "CSS": (contentType) => contentType === "text/css",
+  "JS": (contentType) => contentType.includes("javascript"),
+  "Font": (contentType) => contentType.includes("font"),
+  "Image": (contentType) => contentType.includes("image")
+};
+function filterEntry({ searchValue, resourceType }) {
+  return (entry) => {
+    const typePredicate = resourceTypePredicates[resourceType];
+    return typePredicate(entry.contentType) && entry.name.url.toLowerCase().includes(searchValue.toLowerCase());
+  };
 }
 const XPathEngine = {
   queryAll(root, selector) {
@@ -11807,7 +12224,7 @@ function isElementStyleVisibilityVisible(element, style) {
   if (!style)
     return true;
   if (Element.prototype.checkVisibility && browserNameForWorkarounds !== "webkit") {
-    if (!element.checkVisibility({ checkOpacity: false, checkVisibilityCSS: false }))
+    if (!element.checkVisibility())
       return false;
   } else {
     const detailsOrSummary = element.closest("details,summary");
@@ -11842,35 +12259,62 @@ function isVisibleTextNode(node) {
   const rect = range.getBoundingClientRect();
   return rect.width > 0 && rect.height > 0;
 }
+function elementSafeTagName(element) {
+  if (element instanceof HTMLFormElement)
+    return "FORM";
+  return element.tagName.toUpperCase();
+}
 function hasExplicitAccessibleName(e) {
   return e.hasAttribute("aria-label") || e.hasAttribute("aria-labelledby");
 }
 const kAncestorPreventingLandmark = "article:not([role]), aside:not([role]), main:not([role]), nav:not([role]), section:not([role]), [role=article], [role=complementary], [role=main], [role=navigation], [role=region]";
-const kGlobalAriaAttributes = [
-  "aria-atomic",
-  "aria-busy",
-  "aria-controls",
-  "aria-current",
-  "aria-describedby",
-  "aria-details",
-  "aria-disabled",
-  "aria-dropeffect",
-  "aria-errormessage",
-  "aria-flowto",
-  "aria-grabbed",
-  "aria-haspopup",
-  "aria-hidden",
-  "aria-invalid",
-  "aria-keyshortcuts",
-  "aria-label",
-  "aria-labelledby",
-  "aria-live",
-  "aria-owns",
-  "aria-relevant",
-  "aria-roledescription"
-];
-function hasGlobalAriaAttribute(e) {
-  return kGlobalAriaAttributes.some((a) => e.hasAttribute(a));
+const kGlobalAriaAttributes = /* @__PURE__ */ new Map([
+  ["aria-atomic", void 0],
+  ["aria-busy", void 0],
+  ["aria-controls", void 0],
+  ["aria-current", void 0],
+  ["aria-describedby", void 0],
+  ["aria-details", void 0],
+  // Global use deprecated in ARIA 1.2
+  // ['aria-disabled', undefined],
+  ["aria-dropeffect", void 0],
+  // Global use deprecated in ARIA 1.2
+  // ['aria-errormessage', undefined],
+  ["aria-flowto", void 0],
+  ["aria-grabbed", void 0],
+  // Global use deprecated in ARIA 1.2
+  // ['aria-haspopup', undefined],
+  ["aria-hidden", void 0],
+  // Global use deprecated in ARIA 1.2
+  // ['aria-invalid', undefined],
+  ["aria-keyshortcuts", void 0],
+  ["aria-label", /* @__PURE__ */ new Set(["caption", "code", "deletion", "emphasis", "generic", "insertion", "paragraph", "presentation", "strong", "subscript", "superscript"])],
+  ["aria-labelledby", /* @__PURE__ */ new Set(["caption", "code", "deletion", "emphasis", "generic", "insertion", "paragraph", "presentation", "strong", "subscript", "superscript"])],
+  ["aria-live", void 0],
+  ["aria-owns", void 0],
+  ["aria-relevant", void 0],
+  ["aria-roledescription", /* @__PURE__ */ new Set(["generic"])]
+]);
+function hasGlobalAriaAttribute(element, forRole) {
+  return [...kGlobalAriaAttributes].some(([attr, prohibited]) => {
+    return !(prohibited == null ? void 0 : prohibited.has(forRole || "")) && element.hasAttribute(attr);
+  });
+}
+function hasTabIndex(element) {
+  return !Number.isNaN(Number(String(element.getAttribute("tabindex"))));
+}
+function isFocusable(element) {
+  return !isNativelyDisabled(element) && (isNativelyFocusable(element) || hasTabIndex(element));
+}
+function isNativelyFocusable(element) {
+  const tagName = elementSafeTagName(element);
+  if (["BUTTON", "DETAILS", "SELECT", "TEXTAREA"].includes(tagName))
+    return true;
+  if (tagName === "A" || tagName === "AREA")
+    return element.hasAttribute("href");
+  if (tagName === "INPUT")
+    return !element.hidden;
+  return false;
 }
 const kImplicitRoleByTagName = {
   "A": (e) => {
@@ -11906,14 +12350,14 @@ const kImplicitRoleByTagName = {
   "HEADER": (e) => closestCrossShadow(e, kAncestorPreventingLandmark) ? null : "banner",
   "HR": () => "separator",
   "HTML": () => "document",
-  "IMG": (e) => e.getAttribute("alt") === "" && !hasGlobalAriaAttribute(e) && Number.isNaN(Number(String(e.getAttribute("tabindex")))) ? "presentation" : "img",
+  "IMG": (e) => e.getAttribute("alt") === "" && !e.getAttribute("title") && !hasGlobalAriaAttribute(e) && !hasTabIndex(e) ? "presentation" : "img",
   "INPUT": (e) => {
     const type = e.type.toLowerCase();
     if (type === "search")
       return e.hasAttribute("list") ? "combobox" : "searchbox";
     if (["email", "tel", "text", "url", ""].includes(type)) {
       const list = getIdRefs(e, e.getAttribute("list"))[0];
-      return list && list.tagName === "DATALIST" ? "combobox" : "textbox";
+      return list && elementSafeTagName(list) === "DATALIST" ? "combobox" : "textbox";
     }
     if (type === "hidden")
       return "";
@@ -11989,17 +12433,17 @@ const kPresentationInheritanceParents = {
 };
 function getImplicitAriaRole(element) {
   var _a;
-  const implicitRole = ((_a = kImplicitRoleByTagName[element.tagName.toUpperCase()]) == null ? void 0 : _a.call(kImplicitRoleByTagName, element)) || "";
+  const implicitRole = ((_a = kImplicitRoleByTagName[elementSafeTagName(element)]) == null ? void 0 : _a.call(kImplicitRoleByTagName, element)) || "";
   if (!implicitRole)
     return null;
   let ancestor = element;
   while (ancestor) {
     const parent = parentElementOrShadowHost(ancestor);
-    const parents = kPresentationInheritanceParents[ancestor.tagName];
-    if (!parents || !parent || !parents.includes(parent.tagName))
+    const parents = kPresentationInheritanceParents[elementSafeTagName(ancestor)];
+    if (!parents || !parent || !parents.includes(elementSafeTagName(parent)))
       break;
     const parentExplicitRole = getExplicitAriaRole(parent);
-    if ((parentExplicitRole === "none" || parentExplicitRole === "presentation") && !hasPresentationConflictResolution(parent))
+    if ((parentExplicitRole === "none" || parentExplicitRole === "presentation") && !hasPresentationConflictResolution(parent, parentExplicitRole))
       return parentExplicitRole;
     ancestor = parent;
   }
@@ -12107,22 +12551,28 @@ function getExplicitAriaRole(element) {
   const roles = (element.getAttribute("role") || "").split(" ").map((role) => role.trim());
   return roles.find((role) => validRoles.includes(role)) || null;
 }
-function hasPresentationConflictResolution(element) {
-  return !hasGlobalAriaAttribute(element);
+function hasPresentationConflictResolution(element, role) {
+  return hasGlobalAriaAttribute(element, role) || isFocusable(element);
 }
 function getAriaRole(element) {
   const explicitRole = getExplicitAriaRole(element);
   if (!explicitRole)
     return getImplicitAriaRole(element);
-  if ((explicitRole === "none" || explicitRole === "presentation") && hasPresentationConflictResolution(element))
-    return getImplicitAriaRole(element);
+  if (explicitRole === "none" || explicitRole === "presentation") {
+    const implicitRole = getImplicitAriaRole(element);
+    if (hasPresentationConflictResolution(element, implicitRole))
+      return implicitRole;
+  }
   return explicitRole;
 }
 function getAriaBoolean(attr) {
   return attr === null ? void 0 : attr.toLowerCase() === "true";
 }
+function isElementIgnoredForAria(element) {
+  return ["STYLE", "SCRIPT", "NOSCRIPT", "TEMPLATE"].includes(elementSafeTagName(element));
+}
 function isElementHiddenForAria(element) {
-  if (["STYLE", "SCRIPT", "NOSCRIPT", "TEMPLATE"].includes(element.tagName))
+  if (isElementIgnoredForAria(element))
     return true;
   const style = getElementComputedStyle(element);
   const isSlot = element.nodeName === "SLOT";
@@ -12178,8 +12628,11 @@ function getIdRefs(element, ref) {
     return [];
   }
 }
-function normalizeAccessbileName(s) {
-  return s.replace(/\r\n/g, "\n").replace(/\u00A0/g, " ").replace(/\s\s+/g, " ").trim();
+function trimFlatString(s) {
+  return s.trim();
+}
+function asFlatString(s) {
+  return s.split(" ").map((chunk) => chunk.replace(/\r\n/g, "\n").replace(/\s\s*/g, " ")).join(" ").trim();
 }
 function queryInAriaOwned(element, selector) {
   const result = [...element.querySelectorAll(selector)];
@@ -12201,7 +12654,7 @@ function getPseudoContent(element, pseudo) {
   return content;
 }
 function getPseudoContentImpl(pseudoStyle) {
-  if (!pseudoStyle)
+  if (!pseudoStyle || pseudoStyle.display === "none" || pseudoStyle.visibility === "hidden")
     return "";
   const content = pseudoStyle.content;
   if (content[0] === "'" && content[content.length - 1] === "'" || content[0] === '"' && content[content.length - 1] === '"') {
@@ -12231,12 +12684,13 @@ function getElementAccessibleName(element, includeHidden) {
     accessibleName = "";
     const elementProhibitsNaming = ["caption", "code", "definition", "deletion", "emphasis", "generic", "insertion", "mark", "paragraph", "presentation", "strong", "subscript", "suggestion", "superscript", "term", "time"].includes(getAriaRole(element) || "");
     if (!elementProhibitsNaming) {
-      accessibleName = normalizeAccessbileName(getElementAccessibleNameInternal(element, {
+      accessibleName = asFlatString(getTextAlternativeInternal(element, {
         includeHidden,
         visitedElements: /* @__PURE__ */ new Set(),
-        embeddedInLabelledBy: "none",
-        embeddedInLabel: "none",
-        embeddedInTextAlternativeElement: false,
+        embeddedInDescribedBy: void 0,
+        embeddedInLabelledBy: void 0,
+        embeddedInLabel: void 0,
+        embeddedInNativeTextAlternative: void 0,
         embeddedInTargetElement: "self"
       }));
     }
@@ -12244,46 +12698,75 @@ function getElementAccessibleName(element, includeHidden) {
   }
   return accessibleName;
 }
-function getElementAccessibleNameInternal(element, options) {
+function getElementAccessibleDescription(element, includeHidden) {
+  const cache = includeHidden ? cacheAccessibleDescriptionHidden : cacheAccessibleDescription;
+  let accessibleDescription = cache == null ? void 0 : cache.get(element);
+  if (accessibleDescription === void 0) {
+    accessibleDescription = "";
+    if (element.hasAttribute("aria-describedby")) {
+      const describedBy = getIdRefs(element, element.getAttribute("aria-describedby"));
+      accessibleDescription = asFlatString(describedBy.map((ref) => getTextAlternativeInternal(ref, {
+        includeHidden,
+        visitedElements: /* @__PURE__ */ new Set(),
+        embeddedInLabelledBy: void 0,
+        embeddedInLabel: void 0,
+        embeddedInNativeTextAlternative: void 0,
+        embeddedInTargetElement: "none",
+        embeddedInDescribedBy: { element: ref, hidden: isElementHiddenForAria(ref) }
+      })).join(" "));
+    } else if (element.hasAttribute("aria-description")) {
+      accessibleDescription = asFlatString(element.getAttribute("aria-description") || "");
+    } else {
+      accessibleDescription = asFlatString(element.getAttribute("title") || "");
+    }
+    cache == null ? void 0 : cache.set(element, accessibleDescription);
+  }
+  return accessibleDescription;
+}
+function getTextAlternativeInternal(element, options) {
+  var _a, _b, _c, _d;
   if (options.visitedElements.has(element))
     return "";
   const childOptions = {
     ...options,
-    embeddedInLabel: options.embeddedInLabel === "self" ? "descendant" : options.embeddedInLabel,
-    embeddedInLabelledBy: options.embeddedInLabelledBy === "self" ? "descendant" : options.embeddedInLabelledBy,
     embeddedInTargetElement: options.embeddedInTargetElement === "self" ? "descendant" : options.embeddedInTargetElement
   };
-  if (!options.includeHidden && options.embeddedInLabelledBy !== "self" && isElementHiddenForAria(element)) {
-    options.visitedElements.add(element);
-    return "";
+  if (!options.includeHidden) {
+    const isEmbeddedInHiddenReferenceTraversal = !!((_a = options.embeddedInLabelledBy) == null ? void 0 : _a.hidden) || !!((_b = options.embeddedInDescribedBy) == null ? void 0 : _b.hidden) || !!((_c = options.embeddedInNativeTextAlternative) == null ? void 0 : _c.hidden) || !!((_d = options.embeddedInLabel) == null ? void 0 : _d.hidden);
+    if (isElementIgnoredForAria(element) || !isEmbeddedInHiddenReferenceTraversal && isElementHiddenForAria(element)) {
+      options.visitedElements.add(element);
+      return "";
+    }
   }
   const labelledBy = getAriaLabelledByElements(element);
-  if (options.embeddedInLabelledBy === "none") {
-    const accessibleName = (labelledBy || []).map((ref) => getElementAccessibleNameInternal(ref, {
+  if (!options.embeddedInLabelledBy) {
+    const accessibleName = (labelledBy || []).map((ref) => getTextAlternativeInternal(ref, {
       ...options,
-      embeddedInLabelledBy: "self",
+      embeddedInLabelledBy: { element: ref, hidden: isElementHiddenForAria(ref) },
+      embeddedInDescribedBy: void 0,
       embeddedInTargetElement: "none",
-      embeddedInLabel: "none",
-      embeddedInTextAlternativeElement: false
+      embeddedInLabel: void 0,
+      embeddedInNativeTextAlternative: void 0
     })).join(" ");
     if (accessibleName)
       return accessibleName;
   }
   const role = getAriaRole(element) || "";
-  if (options.embeddedInLabel !== "none" || options.embeddedInLabelledBy !== "none") {
+  const tagName = elementSafeTagName(element);
+  if (!!options.embeddedInLabel || !!options.embeddedInLabelledBy || options.embeddedInTargetElement === "descendant") {
     const isOwnLabel = [...element.labels || []].includes(element);
     const isOwnLabelledBy = (labelledBy || []).includes(element);
     if (!isOwnLabel && !isOwnLabelledBy) {
       if (role === "textbox") {
         options.visitedElements.add(element);
-        if (element.tagName === "INPUT" || element.tagName === "TEXTAREA")
+        if (tagName === "INPUT" || tagName === "TEXTAREA")
           return element.value;
         return element.textContent || "";
       }
       if (["combobox", "listbox"].includes(role)) {
         options.visitedElements.add(element);
         let selectedOptions;
-        if (element.tagName === "SELECT") {
+        if (tagName === "SELECT") {
           selectedOptions = [...element.selectedOptions];
           if (!selectedOptions.length && element.options.length)
             selectedOptions.push(element.options[0]);
@@ -12291,7 +12774,10 @@ function getElementAccessibleNameInternal(element, options) {
           const listbox = role === "combobox" ? queryInAriaOwned(element, "*").find((e) => getAriaRole(e) === "listbox") : element;
           selectedOptions = listbox ? queryInAriaOwned(listbox, '[aria-selected="true"]').filter((e) => getAriaRole(e) === "option") : [];
         }
-        return selectedOptions.map((option) => getElementAccessibleNameInternal(option, childOptions)).join(" ");
+        if (!selectedOptions.length && tagName === "INPUT") {
+          return element.value;
+        }
+        return selectedOptions.map((option) => getTextAlternativeInternal(option, childOptions)).join(" ");
       }
       if (["progressbar", "scrollbar", "slider", "spinbutton", "meter"].includes(role)) {
         options.visitedElements.add(element);
@@ -12308,15 +12794,15 @@ function getElementAccessibleNameInternal(element, options) {
     }
   }
   const ariaLabel = element.getAttribute("aria-label") || "";
-  if (ariaLabel.trim()) {
+  if (trimFlatString(ariaLabel)) {
     options.visitedElements.add(element);
     return ariaLabel;
   }
   if (!["presentation", "none"].includes(role)) {
-    if (element.tagName === "INPUT" && ["button", "submit", "reset"].includes(element.type)) {
+    if (tagName === "INPUT" && ["button", "submit", "reset"].includes(element.type)) {
       options.visitedElements.add(element);
       const value = element.value || "";
-      if (value.trim())
+      if (trimFlatString(value))
         return value;
       if (element.type === "submit")
         return "Submit";
@@ -12325,85 +12811,85 @@ function getElementAccessibleNameInternal(element, options) {
       const title = element.getAttribute("title") || "";
       return title;
     }
-    if (element.tagName === "INPUT" && element.type === "image") {
+    if (tagName === "INPUT" && element.type === "image") {
       options.visitedElements.add(element);
       const labels = element.labels || [];
-      if (labels.length && options.embeddedInLabelledBy === "none")
+      if (labels.length && !options.embeddedInLabelledBy)
         return getAccessibleNameFromAssociatedLabels(labels, options);
       const alt = element.getAttribute("alt") || "";
-      if (alt.trim())
+      if (trimFlatString(alt))
         return alt;
       const title = element.getAttribute("title") || "";
-      if (title.trim())
+      if (trimFlatString(title))
         return title;
       return "Submit";
     }
-    if (!labelledBy && element.tagName === "BUTTON") {
+    if (!labelledBy && tagName === "BUTTON") {
       options.visitedElements.add(element);
       const labels = element.labels || [];
       if (labels.length)
         return getAccessibleNameFromAssociatedLabels(labels, options);
     }
-    if (!labelledBy && element.tagName === "OUTPUT") {
+    if (!labelledBy && tagName === "OUTPUT") {
       options.visitedElements.add(element);
       const labels = element.labels || [];
       if (labels.length)
         return getAccessibleNameFromAssociatedLabels(labels, options);
       return element.getAttribute("title") || "";
     }
-    if (!labelledBy && (element.tagName === "TEXTAREA" || element.tagName === "SELECT" || element.tagName === "INPUT")) {
+    if (!labelledBy && (tagName === "TEXTAREA" || tagName === "SELECT" || tagName === "INPUT")) {
       options.visitedElements.add(element);
       const labels = element.labels || [];
       if (labels.length)
         return getAccessibleNameFromAssociatedLabels(labels, options);
-      const usePlaceholder = element.tagName === "INPUT" && ["text", "password", "search", "tel", "email", "url"].includes(element.type) || element.tagName === "TEXTAREA";
+      const usePlaceholder = tagName === "INPUT" && ["text", "password", "search", "tel", "email", "url"].includes(element.type) || tagName === "TEXTAREA";
       const placeholder = element.getAttribute("placeholder") || "";
       const title = element.getAttribute("title") || "";
       if (!usePlaceholder || title)
         return title;
       return placeholder;
     }
-    if (!labelledBy && element.tagName === "FIELDSET") {
+    if (!labelledBy && tagName === "FIELDSET") {
       options.visitedElements.add(element);
       for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
-        if (child.tagName === "LEGEND") {
-          return getElementAccessibleNameInternal(child, {
+        if (elementSafeTagName(child) === "LEGEND") {
+          return getTextAlternativeInternal(child, {
             ...childOptions,
-            embeddedInTextAlternativeElement: true
+            embeddedInNativeTextAlternative: { element: child, hidden: isElementHiddenForAria(child) }
           });
         }
       }
       const title = element.getAttribute("title") || "";
       return title;
     }
-    if (!labelledBy && element.tagName === "FIGURE") {
+    if (!labelledBy && tagName === "FIGURE") {
       options.visitedElements.add(element);
       for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
-        if (child.tagName === "FIGCAPTION") {
-          return getElementAccessibleNameInternal(child, {
+        if (elementSafeTagName(child) === "FIGCAPTION") {
+          return getTextAlternativeInternal(child, {
             ...childOptions,
-            embeddedInTextAlternativeElement: true
+            embeddedInNativeTextAlternative: { element: child, hidden: isElementHiddenForAria(child) }
           });
         }
       }
       const title = element.getAttribute("title") || "";
       return title;
     }
-    if (element.tagName === "IMG") {
+    if (tagName === "IMG") {
       options.visitedElements.add(element);
       const alt = element.getAttribute("alt") || "";
-      if (alt.trim())
+      if (trimFlatString(alt))
         return alt;
       const title = element.getAttribute("title") || "";
       return title;
     }
-    if (element.tagName === "TABLE") {
+    if (tagName === "TABLE") {
       options.visitedElements.add(element);
       for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
-        if (child.tagName === "CAPTION") {
-          return getElementAccessibleNameInternal(child, {
+        if (elementSafeTagName(child) === "CAPTION") {
+          return getTextAlternativeInternal(child, {
             ...childOptions,
-            embeddedInTextAlternativeElement: true
+            embeddedInNativeTextAlternative: { element: child, hidden: isElementHiddenForAria(child) }
           });
         }
       }
@@ -12411,43 +12897,44 @@ function getElementAccessibleNameInternal(element, options) {
       if (summary)
         return summary;
     }
-    if (element.tagName === "AREA") {
+    if (tagName === "AREA") {
       options.visitedElements.add(element);
       const alt = element.getAttribute("alt") || "";
-      if (alt.trim())
+      if (trimFlatString(alt))
         return alt;
       const title = element.getAttribute("title") || "";
       return title;
     }
-    if (element.tagName.toUpperCase() === "SVG" || element.ownerSVGElement) {
+    if (tagName === "SVG" || element.ownerSVGElement) {
       options.visitedElements.add(element);
       for (let child = element.firstElementChild; child; child = child.nextElementSibling) {
-        if (child.tagName.toUpperCase() === "TITLE" && child.ownerSVGElement) {
-          return getElementAccessibleNameInternal(child, {
+        if (elementSafeTagName(child) === "TITLE" && child.ownerSVGElement) {
+          return getTextAlternativeInternal(child, {
             ...childOptions,
-            embeddedInLabelledBy: "self"
+            embeddedInLabelledBy: { element: child, hidden: isElementHiddenForAria(child) }
           });
         }
       }
     }
-    if (element.ownerSVGElement && element.tagName.toUpperCase() === "A") {
+    if (element.ownerSVGElement && tagName === "A") {
       const title = element.getAttribute("xlink:title") || "";
-      if (title.trim()) {
+      if (trimFlatString(title)) {
         options.visitedElements.add(element);
         return title;
       }
     }
   }
-  if (allowsNameFromContent(role, options.embeddedInTargetElement === "descendant") || options.embeddedInLabelledBy !== "none" || options.embeddedInLabel !== "none" || options.embeddedInTextAlternativeElement) {
+  const shouldNameFromContentForSummary = tagName === "SUMMARY" && !["presentation", "none"].includes(role);
+  if (allowsNameFromContent(role, options.embeddedInTargetElement === "descendant") || shouldNameFromContentForSummary || !!options.embeddedInLabelledBy || !!options.embeddedInDescribedBy || !!options.embeddedInLabel || !!options.embeddedInNativeTextAlternative) {
     options.visitedElements.add(element);
     const tokens = [];
     const visit = (node, skipSlotted) => {
-      var _a;
+      var _a2;
       if (skipSlotted && node.assignedSlot)
         return;
       if (node.nodeType === 1) {
-        const display = ((_a = getElementComputedStyle(node)) == null ? void 0 : _a.display) || "inline";
-        let token = getElementAccessibleNameInternal(node, childOptions);
+        const display = ((_a2 = getElementComputedStyle(node)) == null ? void 0 : _a2.display) || "inline";
+        let token = getTextAlternativeInternal(node, childOptions);
         if (display !== "inline" || node.nodeName === "BR")
           token = " " + token + " ";
         tokens.push(token);
@@ -12472,13 +12959,14 @@ function getElementAccessibleNameInternal(element, options) {
     }
     tokens.push(getPseudoContent(element, "::after"));
     const accessibleName = tokens.join("");
-    if (accessibleName.trim())
+    const maybeTrimmedAccessibleName = options.embeddedInTargetElement === "self" ? trimFlatString(accessibleName) : accessibleName;
+    if (maybeTrimmedAccessibleName)
       return accessibleName;
   }
-  if (!["presentation", "none"].includes(role) || element.tagName === "IFRAME") {
+  if (!["presentation", "none"].includes(role) || tagName === "IFRAME") {
     options.visitedElements.add(element);
     const title = element.getAttribute("title") || "";
-    if (title.trim())
+    if (trimFlatString(title))
       return title;
   }
   options.visitedElements.add(element);
@@ -12486,7 +12974,7 @@ function getElementAccessibleNameInternal(element, options) {
 }
 const kAriaSelectedRoles = ["gridcell", "option", "row", "tab", "rowheader", "columnheader", "treeitem"];
 function getAriaSelected(element) {
-  if (element.tagName === "OPTION")
+  if (elementSafeTagName(element) === "OPTION")
     return element.selected;
   if (kAriaSelectedRoles.includes(getAriaRole(element) || ""))
     return getAriaBoolean(element.getAttribute("aria-selected")) === true;
@@ -12498,9 +12986,10 @@ function getAriaChecked(element) {
   return result === "error" ? false : result;
 }
 function getChecked(element, allowMixed) {
-  if (allowMixed && element.tagName === "INPUT" && element.indeterminate)
+  const tagName = elementSafeTagName(element);
+  if (allowMixed && tagName === "INPUT" && element.indeterminate)
     return "mixed";
-  if (element.tagName === "INPUT" && ["checkbox", "radio"].includes(element.type))
+  if (tagName === "INPUT" && ["checkbox", "radio"].includes(element.type))
     return element.checked;
   if (kAriaCheckedRoles.includes(getAriaRole(element) || "")) {
     const checked = element.getAttribute("aria-checked");
@@ -12525,7 +13014,7 @@ function getAriaPressed(element) {
 }
 const kAriaExpandedRoles = ["application", "button", "checkbox", "combobox", "gridcell", "link", "listbox", "menuitem", "row", "rowheader", "tab", "treeitem", "columnheader", "menuitemcheckbox", "menuitemradio", "rowheader", "switch"];
 function getAriaExpanded(element) {
-  if (element.tagName === "DETAILS")
+  if (elementSafeTagName(element) === "DETAILS")
     return element.open;
   if (kAriaExpandedRoles.includes(getAriaRole(element) || "")) {
     const expanded = element.getAttribute("aria-expanded");
@@ -12539,7 +13028,7 @@ function getAriaExpanded(element) {
 }
 const kAriaLevelRoles = ["heading", "listitem", "row", "treeitem"];
 function getAriaLevel(element) {
-  const native = { "H1": 1, "H2": 2, "H3": 3, "H4": 4, "H5": 5, "H6": 6 }[element.tagName];
+  const native = { "H1": 1, "H2": 2, "H3": 3, "H4": 4, "H5": 5, "H6": 6 }[elementSafeTagName(element)];
   if (native)
     return native;
   if (kAriaLevelRoles.includes(getAriaRole(element) || "")) {
@@ -12552,15 +13041,16 @@ function getAriaLevel(element) {
 }
 const kAriaDisabledRoles = ["application", "button", "composite", "gridcell", "group", "input", "link", "menuitem", "scrollbar", "separator", "tab", "checkbox", "columnheader", "combobox", "grid", "listbox", "menu", "menubar", "menuitemcheckbox", "menuitemradio", "option", "radio", "radiogroup", "row", "rowheader", "searchbox", "select", "slider", "spinbutton", "switch", "tablist", "textbox", "toolbar", "tree", "treegrid", "treeitem"];
 function getAriaDisabled(element) {
+  return isNativelyDisabled(element) || hasExplicitAriaDisabled(element);
+}
+function isNativelyDisabled(element) {
   const isNativeFormControl = ["BUTTON", "INPUT", "SELECT", "TEXTAREA", "OPTION", "OPTGROUP"].includes(element.tagName);
-  if (isNativeFormControl && (element.hasAttribute("disabled") || belongsToDisabledFieldSet(element)))
-    return true;
-  return hasExplicitAriaDisabled(element);
+  return isNativeFormControl && (element.hasAttribute("disabled") || belongsToDisabledFieldSet(element));
 }
 function belongsToDisabledFieldSet(element) {
   if (!element)
     return false;
-  if (element.tagName === "FIELDSET" && element.hasAttribute("disabled"))
+  if (elementSafeTagName(element) === "FIELDSET" && element.hasAttribute("disabled"))
     return true;
   return belongsToDisabledFieldSet(element.parentElement);
 }
@@ -12577,16 +13067,19 @@ function hasExplicitAriaDisabled(element) {
   return hasExplicitAriaDisabled(parentElementOrShadowHost(element));
 }
 function getAccessibleNameFromAssociatedLabels(labels, options) {
-  return [...labels].map((label) => getElementAccessibleNameInternal(label, {
+  return [...labels].map((label) => getTextAlternativeInternal(label, {
     ...options,
-    embeddedInLabel: "self",
-    embeddedInTextAlternativeElement: false,
-    embeddedInLabelledBy: "none",
+    embeddedInLabel: { element: label, hidden: isElementHiddenForAria(label) },
+    embeddedInNativeTextAlternative: void 0,
+    embeddedInLabelledBy: void 0,
+    embeddedInDescribedBy: void 0,
     embeddedInTargetElement: "none"
   })).filter((accessibleName) => !!accessibleName).join(" ");
 }
 let cacheAccessibleName;
 let cacheAccessibleNameHidden;
+let cacheAccessibleDescription;
+let cacheAccessibleDescriptionHidden;
 let cacheIsHidden;
 let cachePseudoContentBefore;
 let cachePseudoContentAfter;
@@ -12595,6 +13088,8 @@ function beginAriaCaches() {
   ++cachesCounter;
   cacheAccessibleName ?? (cacheAccessibleName = /* @__PURE__ */ new Map());
   cacheAccessibleNameHidden ?? (cacheAccessibleNameHidden = /* @__PURE__ */ new Map());
+  cacheAccessibleDescription ?? (cacheAccessibleDescription = /* @__PURE__ */ new Map());
+  cacheAccessibleDescriptionHidden ?? (cacheAccessibleDescriptionHidden = /* @__PURE__ */ new Map());
   cacheIsHidden ?? (cacheIsHidden = /* @__PURE__ */ new Map());
   cachePseudoContentBefore ?? (cachePseudoContentBefore = /* @__PURE__ */ new Map());
   cachePseudoContentAfter ?? (cachePseudoContentAfter = /* @__PURE__ */ new Map());
@@ -12603,6 +13098,8 @@ function endAriaCaches() {
   if (!--cachesCounter) {
     cacheAccessibleName = void 0;
     cacheAccessibleNameHidden = void 0;
+    cacheAccessibleDescription = void 0;
+    cacheAccessibleDescriptionHidden = void 0;
     cacheIsHidden = void 0;
     cachePseudoContentBefore = void 0;
     cachePseudoContentAfter = void 0;
@@ -13775,7 +14272,11 @@ function generateSelector(injectedScript, targetElement, options) {
       }
       selectors = [joinTokens(targetTokens)];
     } else {
-      targetElement = closestCrossShadow(targetElement, "button,select,input,[role=button],[role=checkbox],[role=radio],a,[role=link]", options.root) || targetElement;
+      if (!targetElement.matches("input,textarea,select") && !targetElement.isContentEditable) {
+        const interactiveParent = closestCrossShadow(targetElement, "button,select,input,[role=button],[role=checkbox],[role=radio],a,[role=link]", options.root);
+        if (interactiveParent && isElementVisible(interactiveParent))
+          targetElement = interactiveParent;
+      }
       if (options.multiple) {
         const withText = generateSelectorFor(injectedScript, targetElement, options);
         const withoutText = generateSelectorFor(injectedScript, targetElement, { ...options, noText: true });
@@ -13955,8 +14456,10 @@ function buildTextCandidates(injectedScript, element, isTargetNode) {
     const cssToken = { engine: "css", selector: cssEscape(element.nodeName.toLowerCase()), score: kCSSTagNameScore };
     for (const alternative of alternatives)
       candidates.push([cssToken, { engine: "internal:has-text", selector: escapeForTextSelector(alternative.text, false), score: kTextScore - alternative.scoreBouns }]);
-    if (text.length <= 80)
-      candidates.push([cssToken, { engine: "internal:has-text", selector: "/^" + escapeRegExp(text) + "$/", score: kTextScoreRegex }]);
+    if (text.length <= 80) {
+      const re2 = new RegExp("^" + escapeRegExp(text) + "$");
+      candidates.push([cssToken, { engine: "internal:has-text", selector: escapeForTextSelector(re2, false), score: kTextScoreRegex }]);
+    }
   }
   const ariaRole = getAriaRole(element);
   if (ariaRole && !["none", "presentation"].includes(ariaRole)) {
@@ -14123,7 +14626,7 @@ function suitableTextAlternatives(text) {
     const match = text.match(/^([\d.,]+)[^.,\w]/);
     const leadingNumberLength = match ? match[1].length : 0;
     if (leadingNumberLength) {
-      const alt = text.substring(leadingNumberLength).trimStart();
+      const alt = trimWordBoundary(text.substring(leadingNumberLength).trimStart(), 80);
       result.push({ text: alt, scoreBouns: alt.length <= 30 ? 2 : 1 });
     }
   }
@@ -14131,7 +14634,7 @@ function suitableTextAlternatives(text) {
     const match = text.match(/[^.,\w]([\d.,]+)$/);
     const trailingNumberLength = match ? match[1].length : 0;
     if (trailingNumberLength) {
-      const alt = text.substring(0, text.length - trailingNumberLength).trimEnd();
+      const alt = trimWordBoundary(text.substring(0, text.length - trailingNumberLength).trimEnd(), 80);
       result.push({ text: alt, scoreBouns: alt.length <= 30 ? 2 : 1 });
     }
   }
@@ -14146,328 +14649,7 @@ function suitableTextAlternatives(text) {
     result.push({ text: text.substring(0, 80), scoreBouns: 0 });
   return result;
 }
-const highlightCSS = `/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  font-size: 13px;
-  font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;
-  color: #333;
-}
-
-x-pw-tooltip {
-  backdrop-filter: blur(5px);
-  background-color: white;
-  border-radius: 6px;
-  box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.3);
-  display: none;
-  font-size: 12.8px;
-  font-weight: normal;
-  left: 0;
-  line-height: 1.5;
-  max-width: 600px;
-  position: absolute;
-  top: 0;
-  padding: 0;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-x-pw-tooltip-line {
-  display: flex;
-  max-width: 600px;
-  padding: 6px;
-  user-select: none;
-  cursor: pointer;
-}
-
-x-pw-tooltip-line.selectable:hover {
-  background-color: hsl(0, 0%, 95%);
-  overflow: hidden;
-}
-
-x-pw-tooltip-footer {
-  display: flex;
-  max-width: 600px;
-  padding: 6px;
-  user-select: none;
-  color: #777;
-}
-
-x-pw-dialog {
-  background-color: white;
-  pointer-events: auto;
-  border-radius: 6px;
-  box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.3);
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  width: 400px;
-  height: 150px;
-  z-index: 10;
-  font-size: 13px;
-}
-
-x-pw-dialog-body {
-  display: flex;
-  flex-direction: column;
-  flex: auto;
-}
-
-x-pw-dialog-body label {
-  margin: 5px 8px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-x-pw-highlight {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 0;
-  height: 0;
-}
-
-x-pw-action-point {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background: red;
-  border-radius: 10px;
-  margin: -10px 0 0 -10px;
-  z-index: 2;
-}
-
-x-pw-separator {
-  height: 1px;
-  margin: 6px 9px;
-  background: rgb(148 148 148 / 90%);
-}
-
-x-pw-tool-gripper {
-  height: 28px;
-  width: 24px;
-  margin: 2px 0;
-  cursor: grab;
-}
-
-x-pw-tool-gripper:active {
-  cursor: grabbing;
-}
-
-x-pw-tool-gripper > x-div {
-  width: 100%;
-  height: 100%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  -webkit-mask-size: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 16px;
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' /></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' /></svg>");
-  background-color: #555555;
-}
-
-x-pw-tools-list > label {
-  display: flex;
-  align-items: center;
-  margin: 0 10px;
-  user-select: none;
-}
-
-x-pw-tools-list {
-  display: flex;
-  width: 100%;
-  border-bottom: 1px solid #dddddd;
-}
-
-x-pw-tool-item {
-  pointer-events: auto;
-  cursor: pointer;
-  height: 28px;
-  width: 28px;
-  border-radius: 3px;
-}
-
-x-pw-tool-item:not(.disabled):hover {
-  background-color: hsl(0, 0%, 86%);
-}
-
-x-pw-tool-item.active {
-  background-color: rgba(138, 202, 228, 0.5);
-}
-
-x-pw-tool-item.active:not(.disabled):hover {
-  background-color: #8acae4c4;
-}
-
-x-pw-tool-item > x-div {
-  width: 100%;
-  height: 100%;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-position: center;
-  -webkit-mask-size: 20px;
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: 16px;
-  background-color: #3a3a3a;
-}
-
-x-pw-tool-item.disabled > x-div {
-  background-color: rgba(97, 97, 97, 0.5);
-  cursor: default;
-}
-
-x-pw-tool-item.record.active {
-  background-color: transparent;
-}
-
-x-pw-tool-item.record.active:hover {
-  background-color: hsl(0, 0%, 86%);
-}
-
-x-pw-tool-item.record.active > x-div {
-  background-color: #a1260d;
-}
-
-x-pw-tool-item.accept > x-div {
-  background-color: #388a34;
-}
-
-x-pw-tool-item.record > x-div {
-  /* codicon: circle-large-filled */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M8 1a6.8 6.8 0 0 1 1.86.253 6.899 6.899 0 0 1 3.083 1.805 6.903 6.903 0 0 1 1.804 3.083C14.916 6.738 15 7.357 15 8s-.084 1.262-.253 1.86a6.9 6.9 0 0 1-.704 1.674 7.157 7.157 0 0 1-2.516 2.509 6.966 6.966 0 0 1-1.668.71A6.984 6.984 0 0 1 8 15a6.984 6.984 0 0 1-1.86-.246 7.098 7.098 0 0 1-1.674-.711 7.3 7.3 0 0 1-1.415-1.094 7.295 7.295 0 0 1-1.094-1.415 7.098 7.098 0 0 1-.71-1.675A6.985 6.985 0 0 1 1 8c0-.643.082-1.262.246-1.86a6.968 6.968 0 0 1 .711-1.667 7.156 7.156 0 0 1 2.509-2.516 6.895 6.895 0 0 1 1.675-.704A6.808 6.808 0 0 1 8 1z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M8 1a6.8 6.8 0 0 1 1.86.253 6.899 6.899 0 0 1 3.083 1.805 6.903 6.903 0 0 1 1.804 3.083C14.916 6.738 15 7.357 15 8s-.084 1.262-.253 1.86a6.9 6.9 0 0 1-.704 1.674 7.157 7.157 0 0 1-2.516 2.509 6.966 6.966 0 0 1-1.668.71A6.984 6.984 0 0 1 8 15a6.984 6.984 0 0 1-1.86-.246 7.098 7.098 0 0 1-1.674-.711 7.3 7.3 0 0 1-1.415-1.094 7.295 7.295 0 0 1-1.094-1.415 7.098 7.098 0 0 1-.71-1.675A6.985 6.985 0 0 1 1 8c0-.643.082-1.262.246-1.86a6.968 6.968 0 0 1 .711-1.667 7.156 7.156 0 0 1 2.509-2.516 6.895 6.895 0 0 1 1.675-.704A6.808 6.808 0 0 1 8 1z'/></svg>");
-}
-
-x-pw-tool-item.pick-locator > x-div {
-  /* codicon: inspect */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M1 3l1-1h12l1 1v6h-1V3H2v8h5v1H2l-1-1V3zm14.707 9.707L9 6v9.414l2.707-2.707h4zM10 13V8.414l3.293 3.293h-2L10 13z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M1 3l1-1h12l1 1v6h-1V3H2v8h5v1H2l-1-1V3zm14.707 9.707L9 6v9.414l2.707-2.707h4zM10 13V8.414l3.293 3.293h-2L10 13z'/></svg>");
-}
-
-x-pw-tool-item.text > x-div {
-  /* codicon: whole-word */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 11H1V13H15V11H16V14H15H1H0V11Z'/><path d='M6.84048 11H5.95963V10.1406H5.93814C5.555 10.7995 4.99104 11.1289 4.24625 11.1289C3.69839 11.1289 3.26871 10.9839 2.95718 10.6938C2.64924 10.4038 2.49527 10.0189 2.49527 9.53906C2.49527 8.51139 3.10041 7.91341 4.3107 7.74512L5.95963 7.51416C5.95963 6.57959 5.58186 6.1123 4.82632 6.1123C4.16389 6.1123 3.56591 6.33789 3.03238 6.78906V5.88672C3.57307 5.54297 4.19612 5.37109 4.90152 5.37109C6.19416 5.37109 6.84048 6.05501 6.84048 7.42285V11ZM5.95963 8.21777L4.63297 8.40039C4.22476 8.45768 3.91682 8.55973 3.70914 8.70654C3.50145 8.84977 3.39761 9.10579 3.39761 9.47461C3.39761 9.74316 3.4925 9.96338 3.68228 10.1353C3.87564 10.3035 4.13166 10.3877 4.45035 10.3877C4.8872 10.3877 5.24706 10.2355 5.52994 9.93115C5.8164 9.62321 5.95963 9.2347 5.95963 8.76562V8.21777Z'/><path d='M9.3475 10.2051H9.32601V11H8.44515V2.85742H9.32601V6.4668H9.3475C9.78076 5.73633 10.4146 5.37109 11.2489 5.37109C11.9543 5.37109 12.5057 5.61816 12.9032 6.1123C13.3042 6.60286 13.5047 7.26172 13.5047 8.08887C13.5047 9.00911 13.2809 9.74674 12.8333 10.3018C12.3857 10.8532 11.7734 11.1289 10.9964 11.1289C10.2695 11.1289 9.71989 10.821 9.3475 10.2051ZM9.32601 7.98682V8.75488C9.32601 9.20964 9.47282 9.59635 9.76644 9.91504C10.0636 10.2301 10.4396 10.3877 10.8944 10.3877C11.4279 10.3877 11.8451 10.1836 12.1458 9.77539C12.4502 9.36719 12.6024 8.79964 12.6024 8.07275C12.6024 7.46045 12.4609 6.98063 12.1781 6.6333C11.8952 6.28597 11.512 6.1123 11.0286 6.1123C10.5166 6.1123 10.1048 6.29134 9.7933 6.64941C9.48177 7.00391 9.32601 7.44971 9.32601 7.98682Z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 11H1V13H15V11H16V14H15H1H0V11Z'/><path d='M6.84048 11H5.95963V10.1406H5.93814C5.555 10.7995 4.99104 11.1289 4.24625 11.1289C3.69839 11.1289 3.26871 10.9839 2.95718 10.6938C2.64924 10.4038 2.49527 10.0189 2.49527 9.53906C2.49527 8.51139 3.10041 7.91341 4.3107 7.74512L5.95963 7.51416C5.95963 6.57959 5.58186 6.1123 4.82632 6.1123C4.16389 6.1123 3.56591 6.33789 3.03238 6.78906V5.88672C3.57307 5.54297 4.19612 5.37109 4.90152 5.37109C6.19416 5.37109 6.84048 6.05501 6.84048 7.42285V11ZM5.95963 8.21777L4.63297 8.40039C4.22476 8.45768 3.91682 8.55973 3.70914 8.70654C3.50145 8.84977 3.39761 9.10579 3.39761 9.47461C3.39761 9.74316 3.4925 9.96338 3.68228 10.1353C3.87564 10.3035 4.13166 10.3877 4.45035 10.3877C4.8872 10.3877 5.24706 10.2355 5.52994 9.93115C5.8164 9.62321 5.95963 9.2347 5.95963 8.76562V8.21777Z'/><path d='M9.3475 10.2051H9.32601V11H8.44515V2.85742H9.32601V6.4668H9.3475C9.78076 5.73633 10.4146 5.37109 11.2489 5.37109C11.9543 5.37109 12.5057 5.61816 12.9032 6.1123C13.3042 6.60286 13.5047 7.26172 13.5047 8.08887C13.5047 9.00911 13.2809 9.74674 12.8333 10.3018C12.3857 10.8532 11.7734 11.1289 10.9964 11.1289C10.2695 11.1289 9.71989 10.821 9.3475 10.2051ZM9.32601 7.98682V8.75488C9.32601 9.20964 9.47282 9.59635 9.76644 9.91504C10.0636 10.2301 10.4396 10.3877 10.8944 10.3877C11.4279 10.3877 11.8451 10.1836 12.1458 9.77539C12.4502 9.36719 12.6024 8.79964 12.6024 8.07275C12.6024 7.46045 12.4609 6.98063 12.1781 6.6333C11.8952 6.28597 11.512 6.1123 11.0286 6.1123C10.5166 6.1123 10.1048 6.29134 9.7933 6.64941C9.48177 7.00391 9.32601 7.44971 9.32601 7.98682Z'/></svg>");
-}
-
-x-pw-tool-item.visibility > x-div {
-  /* codicon: eye */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M7.99993 6.00316C9.47266 6.00316 10.6666 7.19708 10.6666 8.66981C10.6666 10.1426 9.47266 11.3365 7.99993 11.3365C6.52715 11.3365 5.33324 10.1426 5.33324 8.66981C5.33324 7.19708 6.52715 6.00316 7.99993 6.00316ZM7.99993 7.00315C7.07946 7.00315 6.33324 7.74935 6.33324 8.66981C6.33324 9.59028 7.07946 10.3365 7.99993 10.3365C8.9204 10.3365 9.6666 9.59028 9.6666 8.66981C9.6666 7.74935 8.9204 7.00315 7.99993 7.00315ZM7.99993 3.66675C11.0756 3.66675 13.7307 5.76675 14.4673 8.70968C14.5344 8.97755 14.3716 9.24908 14.1037 9.31615C13.8358 9.38315 13.5643 9.22041 13.4973 8.95248C12.8713 6.45205 10.6141 4.66675 7.99993 4.66675C5.38454 4.66675 3.12664 6.45359 2.50182 8.95555C2.43491 9.22341 2.16348 9.38635 1.89557 9.31948C1.62766 9.25255 1.46471 8.98115 1.53162 8.71321C2.26701 5.76856 4.9229 3.66675 7.99993 3.66675Z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M7.99993 6.00316C9.47266 6.00316 10.6666 7.19708 10.6666 8.66981C10.6666 10.1426 9.47266 11.3365 7.99993 11.3365C6.52715 11.3365 5.33324 10.1426 5.33324 8.66981C5.33324 7.19708 6.52715 6.00316 7.99993 6.00316ZM7.99993 7.00315C7.07946 7.00315 6.33324 7.74935 6.33324 8.66981C6.33324 9.59028 7.07946 10.3365 7.99993 10.3365C8.9204 10.3365 9.6666 9.59028 9.6666 8.66981C9.6666 7.74935 8.9204 7.00315 7.99993 7.00315ZM7.99993 3.66675C11.0756 3.66675 13.7307 5.76675 14.4673 8.70968C14.5344 8.97755 14.3716 9.24908 14.1037 9.31615C13.8358 9.38315 13.5643 9.22041 13.4973 8.95248C12.8713 6.45205 10.6141 4.66675 7.99993 4.66675C5.38454 4.66675 3.12664 6.45359 2.50182 8.95555C2.43491 9.22341 2.16348 9.38635 1.89557 9.31948C1.62766 9.25255 1.46471 8.98115 1.53162 8.71321C2.26701 5.76856 4.9229 3.66675 7.99993 3.66675Z'/></svg>");
-}
-
-x-pw-tool-item.value > x-div {
-  /* codicon: symbol-constant */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M4 6h8v1H4V6zm8 3H4v1h8V9z'/><path fill-rule='evenodd' clip-rule='evenodd' d='M1 4l1-1h12l1 1v8l-1 1H2l-1-1V4zm1 0v8h12V4H2z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path fill-rule='evenodd' clip-rule='evenodd' d='M4 6h8v1H4V6zm8 3H4v1h8V9z'/><path fill-rule='evenodd' clip-rule='evenodd' d='M1 4l1-1h12l1 1v8l-1 1H2l-1-1V4zm1 0v8h12V4H2z'/></svg>");
-}
-
-x-pw-tool-item.accept > x-div {
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>");
-}
-
-x-pw-tool-item.cancel > x-div {
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
-}
-
-x-pw-tool-item.succeeded > x-div {
-  /* codicon: pass */
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M6.27 10.87h.71l4.56-4.56-.71-.71-4.2 4.21-1.92-1.92L4 8.6l2.27 2.27z'/><path fill-rule='evenodd' clip-rule='evenodd' d='M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4-1.6.3-3.2.1-4.6-.7-1.4-.8-2.5-2-3.1-3.5C.9 9.2.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1zm.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1-1.1.8-1.9 1.9-2.3 3.3-.4 1.3-.4 2.7.2 4 .6 1.3 1.5 2.3 2.7 3 1.2.7 2.6.9 3.9.6z'/></svg>") !important;
-  mask-image: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='currentColor'><path d='M6.27 10.87h.71l4.56-4.56-.71-.71-4.2 4.21-1.92-1.92L4 8.6l2.27 2.27z'/><path fill-rule='evenodd' clip-rule='evenodd' d='M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4-1.6.3-3.2.1-4.6-.7-1.4-.8-2.5-2-3.1-3.5C.9 9.2.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1zm.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1-1.1.8-1.9 1.9-2.3 3.3-.4 1.3-.4 2.7.2 4 .6 1.3 1.5 2.3 2.7 3 1.2.7 2.6.9 3.9.6z'/></svg>") !important;
-  background-color: #388a34 !important;
-  -webkit-mask-size: 18px !important;
-  mask-size: 18px !important;
-}
-
-x-pw-overlay {
-  position: absolute;
-  top: 0;
-  max-width: min-content;
-  z-index: 2147483647;
-  background: transparent;
-  pointer-events: auto;
-}
-
-x-pw-overlay x-pw-tools-list {
-  background-color: #ffffffdd;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px;
-  border-radius: 3px;
-  border-bottom: none;
-}
-
-x-pw-overlay x-pw-tool-item {
-  margin: 2px;
-}
-
-textarea.text-editor {
-  font-family: system-ui,Ubuntu,Droid Sans,sans-serif;
-  flex: auto;
-  border: none;
-  margin: 6px 10px;
-  color: #333;
-  outline: 1px solid transparent!important;
-  resize: none;
-  padding: 0;
-  font-size: 13px;
-}
-
-textarea.text-editor.does-not-match {
-  outline: 1px solid red !important;
-}
-
-x-div {
-  display: block;
-}
-
-x-spacer {
-  flex: auto;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-*[hidden] {
-  display: none !important;
-}
-
-x-locator-editor {
-  flex: none;
-  width: 100%;
-  height: 60px;
-  padding: 4px;
-  border-bottom: 1px solid #dddddd;
-  outline: 1px solid transparent;
-}
-
-x-locator-editor.does-not-match {
-  outline: 1px solid red;
-}
-
-.CodeMirror {
-  width: 100% !important;
-  height: 100% !important;
-}
-`;
+const highlightCSS = '/**\n * Copyright (c) Microsoft Corporation.\n *\n * Licensed under the Apache License, Version 2.0 (the "License");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an "AS IS" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n:host {\n  font-size: 13px;\n  font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif;\n  color: #333;\n}\n\nsvg {\n  position: absolute;\n  height: 0;\n}\n\nx-pw-tooltip {\n  backdrop-filter: blur(5px);\n  background-color: white;\n  border-radius: 6px;\n  box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.3);\n  display: none;\n  font-size: 12.8px;\n  font-weight: normal;\n  left: 0;\n  line-height: 1.5;\n  max-width: 600px;\n  position: absolute;\n  top: 0;\n  padding: 0;\n  flex-direction: column;\n  overflow: hidden;\n}\n\nx-pw-tooltip-line {\n  display: flex;\n  max-width: 600px;\n  padding: 6px;\n  user-select: none;\n  cursor: pointer;\n}\n\nx-pw-tooltip-line.selectable:hover {\n  background-color: hsl(0, 0%, 95%);\n  overflow: hidden;\n}\n\nx-pw-tooltip-footer {\n  display: flex;\n  max-width: 600px;\n  padding: 6px;\n  user-select: none;\n  color: #777;\n}\n\nx-pw-dialog {\n  background-color: white;\n  pointer-events: auto;\n  border-radius: 6px;\n  box-shadow: 0 0.5rem 1.2rem rgba(0,0,0,.3);\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  width: 400px;\n  height: 150px;\n  z-index: 10;\n  font-size: 13px;\n}\n\nx-pw-dialog-body {\n  display: flex;\n  flex-direction: column;\n  flex: auto;\n}\n\nx-pw-dialog-body label {\n  margin: 5px 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\nx-pw-highlight {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 0;\n  height: 0;\n}\n\nx-pw-action-point {\n  position: absolute;\n  width: 20px;\n  height: 20px;\n  background: red;\n  border-radius: 10px;\n  margin: -10px 0 0 -10px;\n  z-index: 2;\n}\n\nx-pw-separator {\n  height: 1px;\n  margin: 6px 9px;\n  background: rgb(148 148 148 / 90%);\n}\n\nx-pw-tool-gripper {\n  height: 28px;\n  width: 24px;\n  margin: 2px 0;\n  cursor: grab;\n}\n\nx-pw-tool-gripper:active {\n  cursor: grabbing;\n}\n\nx-pw-tool-gripper > x-div {\n  width: 16px;\n  height: 16px;\n  margin: 6px 4px;\n  clip-path: url(#icon-gripper);\n  background-color: #555555;\n}\n\nx-pw-tools-list > label {\n  display: flex;\n  align-items: center;\n  margin: 0 10px;\n  user-select: none;\n}\n\nx-pw-tools-list {\n  display: flex;\n  width: 100%;\n  border-bottom: 1px solid #dddddd;\n}\n\nx-pw-tool-item {\n  pointer-events: auto;\n  cursor: pointer;\n  height: 28px;\n  width: 28px;\n  border-radius: 3px;\n}\n\nx-pw-tool-item:not(.disabled):hover {\n  background-color: hsl(0, 0%, 86%);\n}\n\nx-pw-tool-item.active {\n  background-color: rgba(138, 202, 228, 0.5);\n}\n\nx-pw-tool-item.active:not(.disabled):hover {\n  background-color: #8acae4c4;\n}\n\nx-pw-tool-item > x-div {\n  width: 16px;\n  height: 16px;\n  margin: 6px;\n  background-color: #3a3a3a;\n}\n\nx-pw-tool-item.disabled > x-div {\n  background-color: rgba(97, 97, 97, 0.5);\n  cursor: default;\n}\n\nx-pw-tool-item.record.active {\n  background-color: transparent;\n}\n\nx-pw-tool-item.record.active:hover {\n  background-color: hsl(0, 0%, 86%);\n}\n\nx-pw-tool-item.record.active > x-div {\n  background-color: #a1260d;\n}\n\nx-pw-tool-item.accept > x-div {\n  background-color: #388a34;\n}\n\nx-pw-tool-item.record > x-div {\n  /* codicon: circle-large-filled */\n  clip-path: url(#icon-circle-large-filled);\n}\n\nx-pw-tool-item.pick-locator > x-div {\n  /* codicon: inspect */\n  clip-path: url(#icon-inspect);\n}\n\nx-pw-tool-item.text > x-div {\n  /* codicon: whole-word */\n  clip-path: url(#icon-whole-word);\n}\n\nx-pw-tool-item.visibility > x-div {\n  /* codicon: eye */\n  clip-path: url(#icon-eye);\n}\n\nx-pw-tool-item.value > x-div {\n  /* codicon: symbol-constant */\n  clip-path: url(#icon-symbol-constant);\n}\n\nx-pw-tool-item.accept > x-div {\n  clip-path: url(#icon-check);\n}\n\nx-pw-tool-item.cancel > x-div {\n  clip-path: url(#icon-close);\n}\n\nx-pw-tool-item.succeeded > x-div {\n  /* codicon: pass */\n  clip-path: url(#icon-pass);\n  background-color: #388a34 !important;\n}\n\nx-pw-overlay {\n  position: absolute;\n  top: 0;\n  max-width: min-content;\n  z-index: 2147483647;\n  background: transparent;\n  pointer-events: auto;\n}\n\nx-pw-overlay x-pw-tools-list {\n  background-color: #ffffffdd;\n  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px;\n  border-radius: 3px;\n  border-bottom: none;\n}\n\nx-pw-overlay x-pw-tool-item {\n  margin: 2px;\n}\n\ntextarea.text-editor {\n  font-family: system-ui,Ubuntu,Droid Sans,sans-serif;\n  flex: auto;\n  border: none;\n  margin: 6px 10px;\n  color: #333;\n  outline: 1px solid transparent!important;\n  resize: none;\n  padding: 0;\n  font-size: 13px;\n}\n\ntextarea.text-editor.does-not-match {\n  outline: 1px solid red !important;\n}\n\nx-div {\n  display: block;\n}\n\nx-spacer {\n  flex: auto;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n*[hidden] {\n  display: none !important;\n}\n\nx-locator-editor {\n  flex: none;\n  width: 100%;\n  height: 60px;\n  padding: 4px;\n  border-bottom: 1px solid #dddddd;\n  outline: 1px solid transparent;\n}\n\nx-locator-editor.does-not-match {\n  outline: 1px solid red;\n}\n\n.CodeMirror {\n  width: 100% !important;\n  height: 100% !important;\n}\n';
 class Highlight {
   constructor(injectedScript) {
     this._highlightEntries = [];
@@ -14497,10 +14679,16 @@ class Highlight {
     this._actionPointElement = document2.createElement("x-pw-action-point");
     this._actionPointElement.setAttribute("hidden", "true");
     this._glassPaneShadow = this._glassPaneElement.attachShadow({ mode: this._isUnderTest ? "open" : "closed" });
+    if (typeof this._glassPaneShadow.adoptedStyleSheets.push === "function") {
+      const sheet = new this._injectedScript.window.CSSStyleSheet();
+      sheet.replaceSync(highlightCSS);
+      this._glassPaneShadow.adoptedStyleSheets.push(sheet);
+    } else {
+      const styleElement = this._injectedScript.document.createElement("style");
+      styleElement.textContent = highlightCSS;
+      this._glassPaneShadow.appendChild(styleElement);
+    }
     this._glassPaneShadow.appendChild(this._actionPointElement);
-    const styleElement = document2.createElement("style");
-    styleElement.textContent = highlightCSS;
-    this._glassPaneShadow.appendChild(styleElement);
   }
   install() {
     this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
@@ -14512,7 +14700,7 @@ class Highlight {
     if (this._rafRequest)
       cancelAnimationFrame(this._rafRequest);
     this.updateHighlight(this._injectedScript.querySelectorAll(selector, this._injectedScript.document.documentElement), { tooltipText: asLocator(this._language, stringifySelector(selector)) });
-    this._rafRequest = requestAnimationFrame(() => this.runHighlightOnRaf(selector));
+    this._rafRequest = this._injectedScript.builtinRequestAnimationFrame(() => this.runHighlightOnRaf(selector));
   }
   uninstall() {
     if (this._rafRequest)
@@ -14672,12 +14860,107 @@ class Highlight {
     this._glassPaneShadow.appendChild(element);
   }
 }
+const leafRoles = /* @__PURE__ */ new Set([
+  "button",
+  "checkbox",
+  "combobox",
+  "link",
+  "textbox"
+]);
+let lastDom;
+function generateSimpleDomNode(injectedScript, target) {
+  return generate(injectedScript, target).node;
+}
+function selectorForSimpleDomNodeId(injectedScript, id2) {
+  const element = lastDom == null ? void 0 : lastDom.elements.get(id2);
+  if (!element)
+    throw new Error(`Internal error: element with id "${id2}" not found`);
+  return injectedScript.generateSelectorSimple(element);
+}
+function generate(injectedScript, target) {
+  const normalizeWhitespace = (text) => text.replace(/[\s\n]+/g, (match) => match.includes("\n") ? "\n" : " ");
+  const tokens = [];
+  const elements = /* @__PURE__ */ new Map();
+  let lastId = 0;
+  let resultTarget;
+  const visit = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      tokens.push(node.nodeValue);
+      return;
+    }
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const element = node;
+      if (element.nodeName === "SCRIPT" || element.nodeName === "STYLE" || element.nodeName === "NOSCRIPT")
+        return;
+      if (injectedScript.utils.isElementVisible(element)) {
+        const role = injectedScript.utils.getAriaRole(element);
+        if (role && leafRoles.has(role)) {
+          let value;
+          if (element.nodeName === "INPUT" || element.nodeName === "TEXTAREA")
+            value = element.value;
+          const name = injectedScript.utils.getElementAccessibleName(element, false);
+          const structuralId = String(++lastId);
+          elements.set(structuralId, element);
+          tokens.push(renderTag(injectedScript, role, name, structuralId, { value }));
+          if (element === target) {
+            const tagNoValue = renderTag(injectedScript, role, name, structuralId);
+            resultTarget = { tag: tagNoValue, id: structuralId };
+          }
+          return;
+        }
+      }
+      for (let child = element.firstChild; child; child = child.nextSibling)
+        visit(child);
+    }
+  };
+  injectedScript.utils.beginAriaCaches();
+  try {
+    visit(injectedScript.document.body);
+  } finally {
+    injectedScript.utils.endAriaCaches();
+  }
+  const dom = {
+    markup: normalizeWhitespace(tokens.join(" ")),
+    elements
+  };
+  if (target && !resultTarget)
+    throw new Error("Target element is not in the simple DOM");
+  lastDom = dom;
+  return { dom, node: resultTarget ? { dom, ...resultTarget } : void 0 };
+}
+function renderTag(injectedScript, role, name, id2, params) {
+  const escapedTextContent = injectedScript.utils.escapeHTML(name);
+  const escapedValue = injectedScript.utils.escapeHTMLAttribute((params == null ? void 0 : params.value) || "");
+  switch (role) {
+    case "button":
+      return `<button id="${id2}">${escapedTextContent}</button>`;
+    case "link":
+      return `<a id="${id2}">${escapedTextContent}</a>`;
+    case "textbox":
+      return `<input id="${id2}" title="${escapedTextContent}" value="${escapedValue}"></input>`;
+  }
+  return `<div role=${role} id="${id2}">${escapedTextContent}</div>`;
+}
 class InjectedScript {
   // eslint-disable-next-line no-restricted-globals
   constructor(window2, isUnderTest, sdkLanguage, testIdAttributeNameForStrictErrorAndConsoleCodegen, stableRafCount, browserName, customEngines) {
     this.onGlobalListenersRemoved = /* @__PURE__ */ new Set();
     this._testIdAttributeNameForStrictErrorAndConsoleCodegen = "data-testid";
-    this.utils = { isInsideScope, elementText, asLocator, normalizeWhiteSpace };
+    this.utils = {
+      asLocator,
+      beginAriaCaches,
+      cacheNormalizedWhitespaces,
+      elementText,
+      endAriaCaches,
+      escapeHTML: escapeHTML$1,
+      escapeHTMLAttribute,
+      getAriaRole,
+      getElementAccessibleDescription,
+      getElementAccessibleName,
+      isElementVisible,
+      isInsideScope,
+      normalizeWhiteSpace
+    };
     this.window = window2;
     this.document = window2.document;
     this.isUnderTest = isUnderTest;
@@ -14726,6 +15009,18 @@ class InjectedScript {
     if (isUnderTest)
       this.window.__injectedScript = this;
   }
+  builtinSetTimeout(callback, timeout) {
+    var _a;
+    if ((_a = this.window.__pwClock) == null ? void 0 : _a.builtin)
+      return this.window.__pwClock.builtin.setTimeout(callback, timeout);
+    return setTimeout(callback, timeout);
+  }
+  builtinRequestAnimationFrame(callback) {
+    var _a;
+    if ((_a = this.window.__pwClock) == null ? void 0 : _a.builtin)
+      return this.window.__pwClock.builtin.requestAnimationFrame(callback);
+    return requestAnimationFrame(callback);
+  }
   eval(expression) {
     return this.window.eval(expression);
   }
@@ -14980,9 +15275,6 @@ class InjectedScript {
     })()`);
     return new constrFunction(this, params);
   }
-  isVisible(element) {
-    return isElementVisible(element);
-  }
   async viewportRatio(element) {
     return await new Promise((resolve) => {
       const observer = new IntersectionObserver((entries) => {
@@ -14990,7 +15282,7 @@ class InjectedScript {
         observer.disconnect();
       });
       observer.observe(element);
-      requestAnimationFrame(() => {
+      this.builtinRequestAnimationFrame(() => {
       });
     });
   }
@@ -15020,14 +15312,14 @@ class InjectedScript {
       return null;
     if (behavior === "none")
       return element;
-    if (!element.matches("input, textarea, select")) {
+    if (!element.matches("input, textarea, select") && !element.isContentEditable) {
       if (behavior === "button-link")
         element = element.closest("button, [role=button], a, [role=link]") || element;
       else
         element = element.closest("button, [role=button], [role=checkbox], [role=radio]") || element;
     }
     if (behavior === "follow-label") {
-      if (!element.matches("input, textarea, button, select, [role=button], [role=checkbox], [role=radio]") && !element.isContentEditable) {
+      if (!element.matches("a, input, textarea, button, select, [role=link], [role=button], [role=checkbox], [role=radio]") && !element.isContentEditable) {
         element = element.closest("label") || element;
       }
       if (element.nodeName === "LABEL")
@@ -15090,12 +15382,12 @@ class InjectedScript {
         if (success !== continuePolling)
           fulfill(success);
         else
-          requestAnimationFrame(raf);
+          this.builtinRequestAnimationFrame(raf);
       } catch (e) {
         reject(e);
       }
     };
-    requestAnimationFrame(raf);
+    this.builtinRequestAnimationFrame(raf);
     return result;
   }
   elementState(node, state) {
@@ -15106,9 +15398,9 @@ class InjectedScript {
       return "error:notconnected";
     }
     if (state === "visible")
-      return this.isVisible(element);
+      return isElementVisible(element);
     if (state === "hidden")
-      return !this.isVisible(element);
+      return !isElementVisible(element);
     const disabled = getAriaDisabled(element);
     if (state === "disabled")
       return disabled;
@@ -15476,7 +15768,7 @@ class InjectedScript {
         attrs.push(` ${name}="${value}"`);
     }
     attrs.sort((a, b) => a.length - b.length);
-    const attrText = trimStringWithEllipsis(attrs.join(""), 50);
+    const attrText = trimStringWithEllipsis(attrs.join(""), 500);
     if (autoClosingTags.has(element.nodeName))
       return oneLine(`<${element.nodeName.toLowerCase()}${attrText}/>`);
     const children = element.childNodes;
@@ -15592,7 +15884,7 @@ class InjectedScript {
         return { matches: false };
       if (options.isNot && options.expression === "to.be.in.viewport")
         return { matches: false };
-      return { matches: options.isNot, missingRecevied: true };
+      return { matches: options.isNot, missingReceived: true };
     }
     return await this.expectSingleElement(element, options);
   }
@@ -15685,6 +15977,20 @@ class InjectedScript {
         received = element.id;
       } else if (expression === "to.have.text") {
         received = options.useInnerText ? element.innerText : elementText(/* @__PURE__ */ new Map(), element).full;
+      } else if (expression === "to.have.accessible.name") {
+        received = getElementAccessibleName(
+          element,
+          false
+          /* includeHidden */
+        );
+      } else if (expression === "to.have.accessible.description") {
+        received = getElementAccessibleDescription(
+          element,
+          false
+          /* includeHidden */
+        );
+      } else if (expression === "to.have.role") {
+        received = getAriaRole(element) || "";
       } else if (expression === "to.have.title") {
         received = this.document.title;
       } else if (expression === "to.have.url") {
@@ -15730,11 +16036,14 @@ class InjectedScript {
     }
     throw this.createStacklessError("Unknown expect matcher: " + expression);
   }
-  getElementAccessibleName(element, includeHidden) {
-    return getElementAccessibleName(element, !!includeHidden);
+  generateSimpleDomNode(selector) {
+    const element = this.querySelector(this.parseSelector(selector), this.document.documentElement, true);
+    if (!element)
+      return;
+    return generateSimpleDomNode(this, element);
   }
-  getAriaRole(element) {
-    return getAriaRole(element);
+  selectorForSimpleDomNodeId(nodeId) {
+    return selectorForSimpleDomNodeId(this, nodeId);
   }
 }
 const autoClosingTags = /* @__PURE__ */ new Set(["AREA", "BASE", "BR", "COL", "COMMAND", "EMBED", "HR", "IMG", "INPUT", "KEYGEN", "LINK", "MENUITEM", "META", "PARAM", "SOURCE", "TRACK", "WBR"]);
@@ -15914,6 +16223,7 @@ function deepEquals(a, b) {
     return isNaN(a) && isNaN(b);
   return false;
 }
+const svgJson = { "tagName": "svg", "children": [{ "tagName": "defs", "children": [{ "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-gripper" }, "children": [{ "tagName": "path", "attrs": { "d": "M5 3h2v2H5zm0 4h2v2H5zm0 4h2v2H5zm4-8h2v2H9zm0 4h2v2H9zm0 4h2v2H9z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-circle-large-filled" }, "children": [{ "tagName": "path", "attrs": { "d": "M8 1a6.8 6.8 0 0 1 1.86.253 6.899 6.899 0 0 1 3.083 1.805 6.903 6.903 0 0 1 1.804 3.083C14.916 6.738 15 7.357 15 8s-.084 1.262-.253 1.86a6.9 6.9 0 0 1-.704 1.674 7.157 7.157 0 0 1-2.516 2.509 6.966 6.966 0 0 1-1.668.71A6.984 6.984 0 0 1 8 15a6.984 6.984 0 0 1-1.86-.246 7.098 7.098 0 0 1-1.674-.711 7.3 7.3 0 0 1-1.415-1.094 7.295 7.295 0 0 1-1.094-1.415 7.098 7.098 0 0 1-.71-1.675A6.985 6.985 0 0 1 1 8c0-.643.082-1.262.246-1.86a6.968 6.968 0 0 1 .711-1.667 7.156 7.156 0 0 1 2.509-2.516 6.895 6.895 0 0 1 1.675-.704A6.808 6.808 0 0 1 8 1z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-inspect" }, "children": [{ "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M1 3l1-1h12l1 1v6h-1V3H2v8h5v1H2l-1-1V3zm14.707 9.707L9 6v9.414l2.707-2.707h4zM10 13V8.414l3.293 3.293h-2L10 13z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-whole-word" }, "children": [{ "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M0 11H1V13H15V11H16V14H15H1H0V11Z" } }, { "tagName": "path", "attrs": { "d": "M6.84048 11H5.95963V10.1406H5.93814C5.555 10.7995 4.99104 11.1289 4.24625 11.1289C3.69839 11.1289 3.26871 10.9839 2.95718 10.6938C2.64924 10.4038 2.49527 10.0189 2.49527 9.53906C2.49527 8.51139 3.10041 7.91341 4.3107 7.74512L5.95963 7.51416C5.95963 6.57959 5.58186 6.1123 4.82632 6.1123C4.16389 6.1123 3.56591 6.33789 3.03238 6.78906V5.88672C3.57307 5.54297 4.19612 5.37109 4.90152 5.37109C6.19416 5.37109 6.84048 6.05501 6.84048 7.42285V11ZM5.95963 8.21777L4.63297 8.40039C4.22476 8.45768 3.91682 8.55973 3.70914 8.70654C3.50145 8.84977 3.39761 9.10579 3.39761 9.47461C3.39761 9.74316 3.4925 9.96338 3.68228 10.1353C3.87564 10.3035 4.13166 10.3877 4.45035 10.3877C4.8872 10.3877 5.24706 10.2355 5.52994 9.93115C5.8164 9.62321 5.95963 9.2347 5.95963 8.76562V8.21777Z" } }, { "tagName": "path", "attrs": { "d": "M9.3475 10.2051H9.32601V11H8.44515V2.85742H9.32601V6.4668H9.3475C9.78076 5.73633 10.4146 5.37109 11.2489 5.37109C11.9543 5.37109 12.5057 5.61816 12.9032 6.1123C13.3042 6.60286 13.5047 7.26172 13.5047 8.08887C13.5047 9.00911 13.2809 9.74674 12.8333 10.3018C12.3857 10.8532 11.7734 11.1289 10.9964 11.1289C10.2695 11.1289 9.71989 10.821 9.3475 10.2051ZM9.32601 7.98682V8.75488C9.32601 9.20964 9.47282 9.59635 9.76644 9.91504C10.0636 10.2301 10.4396 10.3877 10.8944 10.3877C11.4279 10.3877 11.8451 10.1836 12.1458 9.77539C12.4502 9.36719 12.6024 8.79964 12.6024 8.07275C12.6024 7.46045 12.4609 6.98063 12.1781 6.6333C11.8952 6.28597 11.512 6.1123 11.0286 6.1123C10.5166 6.1123 10.1048 6.29134 9.7933 6.64941C9.48177 7.00391 9.32601 7.44971 9.32601 7.98682Z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-eye" }, "children": [{ "tagName": "path", "attrs": { "d": "M7.99993 6.00316C9.47266 6.00316 10.6666 7.19708 10.6666 8.66981C10.6666 10.1426 9.47266 11.3365 7.99993 11.3365C6.52715 11.3365 5.33324 10.1426 5.33324 8.66981C5.33324 7.19708 6.52715 6.00316 7.99993 6.00316ZM7.99993 7.00315C7.07946 7.00315 6.33324 7.74935 6.33324 8.66981C6.33324 9.59028 7.07946 10.3365 7.99993 10.3365C8.9204 10.3365 9.6666 9.59028 9.6666 8.66981C9.6666 7.74935 8.9204 7.00315 7.99993 7.00315ZM7.99993 3.66675C11.0756 3.66675 13.7307 5.76675 14.4673 8.70968C14.5344 8.97755 14.3716 9.24908 14.1037 9.31615C13.8358 9.38315 13.5643 9.22041 13.4973 8.95248C12.8713 6.45205 10.6141 4.66675 7.99993 4.66675C5.38454 4.66675 3.12664 6.45359 2.50182 8.95555C2.43491 9.22341 2.16348 9.38635 1.89557 9.31948C1.62766 9.25255 1.46471 8.98115 1.53162 8.71321C2.26701 5.76856 4.9229 3.66675 7.99993 3.66675Z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-symbol-constant" }, "children": [{ "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M4 6h8v1H4V6zm8 3H4v1h8V9z" } }, { "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M1 4l1-1h12l1 1v8l-1 1H2l-1-1V4zm1 0v8h12V4H2z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-check" }, "children": [{ "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M14.431 3.323l-8.47 10-.79-.036-3.35-4.77.818-.574 2.978 4.24 8.051-9.506.764.646z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-close" }, "children": [{ "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z" } }] }, { "tagName": "clipPath", "attrs": { "width": "16", "height": "16", "viewBox": "0 0 16 16", "fill": "currentColor", "id": "icon-pass" }, "children": [{ "tagName": "path", "attrs": { "d": "M6.27 10.87h.71l4.56-4.56-.71-.71-4.2 4.21-1.92-1.92L4 8.6l2.27 2.27z" } }, { "tagName": "path", "attrs": { "fill-rule": "evenodd", "clip-rule": "evenodd", "d": "M8.6 1c1.6.1 3.1.9 4.2 2 1.3 1.4 2 3.1 2 5.1 0 1.6-.6 3.1-1.6 4.4-1 1.2-2.4 2.1-4 2.4-1.6.3-3.2.1-4.6-.7-1.4-.8-2.5-2-3.1-3.5C.9 9.2.8 7.5 1.3 6c.5-1.6 1.4-2.9 2.8-3.8C5.4 1.3 7 .9 8.6 1zm.5 12.9c1.3-.3 2.5-1 3.4-2.1.8-1.1 1.3-2.4 1.2-3.8 0-1.6-.6-3.2-1.7-4.3-1-1-2.2-1.6-3.6-1.7-1.3-.1-2.7.2-3.8 1-1.1.8-1.9 1.9-2.3 3.3-.4 1.3-.4 2.7.2 4 .6 1.3 1.5 2.3 2.7 3 1.2.7 2.6.9 3.9.6z" } }] }] }] };
 class NoneTool {
   cursor() {
     return "default";
@@ -16008,13 +16318,13 @@ class InspectTool {
       this._reset(true);
   }
   onKeyDown(event) {
-    var _a, _b, _c;
+    var _a;
     consumeEvent(event);
     if (event.key === "Escape") {
       if ((_a = this._hoveredModel) == null ? void 0 : _a.tooltipListItemSelected)
         this._reset(true);
       else if (this._assertVisibility)
-        (_c = (_b = this._recorder.delegate).setMode) == null ? void 0 : _c.call(_b, "recording");
+        this._recorder.setMode("recording");
     }
   }
   onKeyUp(event) {
@@ -16024,17 +16334,17 @@ class InspectTool {
     this._reset(false);
   }
   _commit(selector) {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a;
     if (this._assertVisibility) {
-      (_b = (_a = this._recorder.delegate).recordAction) == null ? void 0 : _b.call(_a, {
+      this._recorder.recordAction({
         name: "assertVisible",
         selector,
         signals: []
       });
-      (_d = (_c = this._recorder.delegate).setMode) == null ? void 0 : _d.call(_c, "recording");
-      (_e = this._recorder.overlay) == null ? void 0 : _e.flashToolSucceeded("assertingVisibility");
+      this._recorder.setMode("recording");
+      (_a = this._recorder.overlay) == null ? void 0 : _a.flashToolSucceeded("assertingVisibility");
     } else {
-      (_g = (_f = this._recorder.delegate).setSelector) == null ? void 0 : _g.call(_f, selector);
+      this._recorder.setSelector(selector);
     }
   }
   _reset(userGesture) {
@@ -16065,6 +16375,8 @@ class RecordActionTool {
   onClick(event) {
     if (isRangeInput(this._hoveredElement))
       return;
+    if (event.button === 2 && event.type === "auxclick")
+      return;
     if (this._shouldIgnoreMouseEvent(event))
       return;
     if (this._actionInProgress(event))
@@ -16090,6 +16402,23 @@ class RecordActionTool {
       clickCount: event.detail
     });
   }
+  onContextMenu(event) {
+    if (this._shouldIgnoreMouseEvent(event))
+      return;
+    if (this._actionInProgress(event))
+      return;
+    if (this._consumedDueToNoModel(event, this._hoveredModel))
+      return;
+    this._performAction({
+      name: "click",
+      selector: this._hoveredModel.selector,
+      position: positionForEvent(event),
+      signals: [],
+      button: "right",
+      modifiers: 0,
+      clickCount: 0
+    });
+  }
   onPointerDown(event) {
     if (this._shouldIgnoreMouseEvent(event))
       return;
@@ -16133,10 +16462,9 @@ class RecordActionTool {
     this._onFocus(true);
   }
   onInput(event) {
-    var _a, _b, _c, _d, _e, _f;
     const target = this._recorder.deepEventTarget(event);
     if (target.nodeName === "INPUT" && target.type.toLowerCase() === "file") {
-      (_b = (_a = this._recorder.delegate).recordAction) == null ? void 0 : _b.call(_a, {
+      this._recorder.recordAction({
         name: "setInputFiles",
         selector: this._activeModel.selector,
         signals: [],
@@ -16145,7 +16473,7 @@ class RecordActionTool {
       return;
     }
     if (isRangeInput(target)) {
-      (_d = (_c = this._recorder.delegate).recordAction) == null ? void 0 : _d.call(_c, {
+      this._recorder.recordAction({
         name: "fill",
         // must use hoveredModel instead of activeModel for it to work in webkit
         selector: this._hoveredModel.selector,
@@ -16160,7 +16488,7 @@ class RecordActionTool {
       }
       if (this._consumedDueWrongTarget(event))
         return;
-      (_f = (_e = this._recorder.delegate).recordAction) == null ? void 0 : _f.call(_e, {
+      this._recorder.recordAction({
         name: "fill",
         selector: this._activeModel.selector,
         signals: [],
@@ -16173,7 +16501,7 @@ class RecordActionTool {
         return;
       this._performAction({
         name: "select",
-        selector: this._hoveredModel.selector,
+        selector: this._activeModel.selector,
         options: [...selectElement.selectedOptions].map((option) => option.value),
         signals: []
       });
@@ -16258,24 +16586,23 @@ class RecordActionTool {
     consumeEvent(event);
     return true;
   }
-  async _performAction(action) {
-    var _a, _b;
+  _performAction(action) {
     this._hoveredElement = null;
     this._hoveredModel = null;
     this._activeModel = null;
     this._recorder.updateHighlight(null, false);
     this._performingAction = true;
-    await ((_b = (_a = this._recorder.delegate).performAction) == null ? void 0 : _b.call(_a, action).catch(() => {
-    }));
-    this._performingAction = false;
-    this._onFocus(false);
-    if (this._recorder.injectedScript.isUnderTest) {
-      console.error("Action performed for test: " + JSON.stringify({
-        // eslint-disable-line no-console
-        hovered: this._hoveredModel ? this._hoveredModel.selector : null,
-        active: this._activeModel ? this._activeModel.selector : null
-      }));
-    }
+    void this._recorder.performAction(action).then(() => {
+      this._performingAction = false;
+      this._onFocus(false);
+      if (this._recorder.injectedScript.isUnderTest) {
+        console.error("Action performed for test: " + JSON.stringify({
+          // eslint-disable-line no-console
+          hovered: this._hoveredModel ? this._hoveredModel.selector : null,
+          active: this._activeModel ? this._activeModel.selector : null
+        }));
+      }
+    });
   }
   _shouldGenerateKeyPressFor(event) {
     if (event.key === "Enter" && (this._recorder.deepEventTarget(event).nodeName === "TEXTAREA" || this._recorder.deepEventTarget(event).isContentEditable))
@@ -16318,26 +16645,16 @@ class TextAssertionTool {
   constructor(recorder, kind) {
     this._hoverHighlight = null;
     this._action = null;
-    this._dialogElement = null;
     this._textCache = /* @__PURE__ */ new Map();
     this._recorder = recorder;
     this._kind = kind;
-    this._acceptButton = this._recorder.document.createElement("x-pw-tool-item");
-    this._acceptButton.title = "Accept";
-    this._acceptButton.classList.add("accept");
-    this._acceptButton.appendChild(this._recorder.document.createElement("x-div"));
-    this._acceptButton.addEventListener("click", () => this._commit());
-    this._cancelButton = this._recorder.document.createElement("x-pw-tool-item");
-    this._cancelButton.title = "Close";
-    this._cancelButton.classList.add("cancel");
-    this._cancelButton.appendChild(this._recorder.document.createElement("x-div"));
-    this._cancelButton.addEventListener("click", () => this._closeDialog());
+    this._dialog = new Dialog(recorder);
   }
   cursor() {
     return "pointer";
   }
   cleanup() {
-    this._closeDialog();
+    this._dialog.close();
     this._hoverHighlight = null;
   }
   onClick(event) {
@@ -16345,7 +16662,7 @@ class TextAssertionTool {
     if (this._kind === "value") {
       this._commitAssertValue();
     } else {
-      if (!this._dialogElement)
+      if (!this._dialog.isShowing())
         this._showDialog();
     }
   }
@@ -16357,13 +16674,13 @@ class TextAssertionTool {
   onPointerUp(event) {
     var _a;
     const target = (_a = this._hoverHighlight) == null ? void 0 : _a.elements[0];
-    if (this._kind === "value" && target && target.nodeName === "INPUT" && target.disabled) {
+    if (this._kind === "value" && target && (target.nodeName === "INPUT" || target.nodeName === "SELECT") && target.disabled) {
       this._commitAssertValue();
     }
   }
   onMouseMove(event) {
     var _a;
-    if (this._dialogElement)
+    if (this._dialog.isShowing())
       return;
     const target = this._recorder.deepEventTarget(event);
     if (((_a = this._hoverHighlight) == null ? void 0 : _a.elements[0]) === target)
@@ -16377,9 +16694,8 @@ class TextAssertionTool {
     this._recorder.updateHighlight(this._hoverHighlight, true);
   }
   onKeyDown(event) {
-    var _a, _b;
     if (event.key === "Escape")
-      (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, "recording");
+      this._recorder.setMode("recording");
     consumeEvent(event);
   }
   onScroll(event) {
@@ -16437,12 +16753,11 @@ class TextAssertionTool {
     return "";
   }
   _commit() {
-    var _a, _b, _c, _d;
-    if (!this._action || !this._dialogElement)
+    if (!this._action || !this._dialog.isShowing())
       return;
-    this._closeDialog();
-    (_b = (_a = this._recorder.delegate).recordAction) == null ? void 0 : _b.call(_a, this._action);
-    (_d = (_c = this._recorder.delegate).setMode) == null ? void 0 : _d.call(_c, "recording");
+    this._dialog.close();
+    this._recorder.recordAction(this._action);
+    this._recorder.setMode("recording");
   }
   _showDialog() {
     var _a;
@@ -16451,28 +16766,6 @@ class TextAssertionTool {
     this._action = this._generateAction();
     if (!this._action || this._action.name !== "assertText")
       return;
-    this._dialogElement = this._recorder.document.createElement("x-pw-dialog");
-    this._keyboardListener = (event) => {
-      if (event.key === "Escape") {
-        this._closeDialog();
-        return;
-      }
-      if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
-        if (this._dialogElement)
-          this._commit();
-        return;
-      }
-    };
-    this._recorder.document.addEventListener("keydown", this._keyboardListener, true);
-    const toolbarElement = this._recorder.document.createElement("x-pw-tools-list");
-    const labelElement = this._recorder.document.createElement("label");
-    labelElement.textContent = "Assert that element contains text";
-    toolbarElement.appendChild(labelElement);
-    toolbarElement.appendChild(this._recorder.document.createElement("x-spacer"));
-    toolbarElement.appendChild(this._acceptButton);
-    toolbarElement.appendChild(this._cancelButton);
-    this._dialogElement.appendChild(toolbarElement);
-    const bodyElement = this._recorder.document.createElement("x-pw-dialog-body");
     const action = this._action;
     const textElement = this._recorder.document.createElement("textarea");
     textElement.setAttribute("spellcheck", "false");
@@ -16490,31 +16783,26 @@ class TextAssertionTool {
       textElement.classList.toggle("does-not-match", !matches);
     };
     textElement.addEventListener("input", updateAndValidate);
-    bodyElement.appendChild(textElement);
-    this._dialogElement.appendChild(bodyElement);
-    this._recorder.highlight.appendChild(this._dialogElement);
-    const position = this._recorder.highlight.tooltipPosition(this._recorder.highlight.firstBox(), this._dialogElement);
-    this._dialogElement.style.top = position.anchorTop + "px";
-    this._dialogElement.style.left = position.anchorLeft + "px";
+    const label = "Assert that element contains text";
+    const dialogElement = this._dialog.show({
+      label,
+      body: textElement,
+      onCommit: () => this._commit()
+    });
+    const position = this._recorder.highlight.tooltipPosition(this._recorder.highlight.firstBox(), dialogElement);
+    this._dialog.moveTo(position.anchorTop, position.anchorLeft);
     textElement.focus();
   }
-  _closeDialog() {
-    if (!this._dialogElement)
-      return;
-    this._dialogElement.remove();
-    this._recorder.document.removeEventListener("keydown", this._keyboardListener);
-    this._dialogElement = null;
-  }
   _commitAssertValue() {
-    var _a, _b, _c, _d, _e;
+    var _a;
     if (this._kind !== "value")
       return;
     const action = this._generateAction();
     if (!action)
       return;
-    (_b = (_a = this._recorder.delegate).recordAction) == null ? void 0 : _b.call(_a, action);
-    (_d = (_c = this._recorder.delegate).setMode) == null ? void 0 : _d.call(_c, "recording");
-    (_e = this._recorder.overlay) == null ? void 0 : _e.flashToolSucceeded("assertingValue");
+    this._recorder.recordAction(action);
+    this._recorder.setMode("recording");
+    (_a = this._recorder.overlay) == null ? void 0 : _a.flashToolSucceeded("assertingValue");
   }
 }
 class Overlay {
@@ -16523,37 +16811,38 @@ class Overlay {
     this._offsetX = 0;
     this._measure = { width: 0, height: 0 };
     this._recorder = recorder;
-    const document2 = this._recorder.injectedScript.document;
+    const document2 = this._recorder.document;
     this._overlayElement = document2.createElement("x-pw-overlay");
+    this._overlayElement.appendChild(createSvgElement(this._recorder.document, svgJson));
     const toolsListElement = document2.createElement("x-pw-tools-list");
     this._overlayElement.appendChild(toolsListElement);
     this._dragHandle = document2.createElement("x-pw-tool-gripper");
     this._dragHandle.appendChild(document2.createElement("x-div"));
     toolsListElement.appendChild(this._dragHandle);
-    this._recordToggle = this._recorder.injectedScript.document.createElement("x-pw-tool-item");
+    this._recordToggle = this._recorder.document.createElement("x-pw-tool-item");
     this._recordToggle.title = "Record";
     this._recordToggle.classList.add("record");
-    this._recordToggle.appendChild(this._recorder.injectedScript.document.createElement("x-div"));
+    this._recordToggle.appendChild(this._recorder.document.createElement("x-div"));
     toolsListElement.appendChild(this._recordToggle);
-    this._pickLocatorToggle = this._recorder.injectedScript.document.createElement("x-pw-tool-item");
+    this._pickLocatorToggle = this._recorder.document.createElement("x-pw-tool-item");
     this._pickLocatorToggle.title = "Pick locator";
     this._pickLocatorToggle.classList.add("pick-locator");
-    this._pickLocatorToggle.appendChild(this._recorder.injectedScript.document.createElement("x-div"));
+    this._pickLocatorToggle.appendChild(this._recorder.document.createElement("x-div"));
     toolsListElement.appendChild(this._pickLocatorToggle);
-    this._assertVisibilityToggle = this._recorder.injectedScript.document.createElement("x-pw-tool-item");
+    this._assertVisibilityToggle = this._recorder.document.createElement("x-pw-tool-item");
     this._assertVisibilityToggle.title = "Assert visibility";
     this._assertVisibilityToggle.classList.add("visibility");
-    this._assertVisibilityToggle.appendChild(this._recorder.injectedScript.document.createElement("x-div"));
+    this._assertVisibilityToggle.appendChild(this._recorder.document.createElement("x-div"));
     toolsListElement.appendChild(this._assertVisibilityToggle);
-    this._assertTextToggle = this._recorder.injectedScript.document.createElement("x-pw-tool-item");
+    this._assertTextToggle = this._recorder.document.createElement("x-pw-tool-item");
     this._assertTextToggle.title = "Assert text";
     this._assertTextToggle.classList.add("text");
-    this._assertTextToggle.appendChild(this._recorder.injectedScript.document.createElement("x-div"));
+    this._assertTextToggle.appendChild(this._recorder.document.createElement("x-div"));
     toolsListElement.appendChild(this._assertTextToggle);
-    this._assertValuesToggle = this._recorder.injectedScript.document.createElement("x-pw-tool-item");
+    this._assertValuesToggle = this._recorder.document.createElement("x-pw-tool-item");
     this._assertValuesToggle.title = "Assert value";
     this._assertValuesToggle.classList.add("value");
-    this._assertValuesToggle.appendChild(this._recorder.injectedScript.document.createElement("x-div"));
+    this._assertValuesToggle.appendChild(this._recorder.document.createElement("x-div"));
     toolsListElement.appendChild(this._assertValuesToggle);
     this._updateVisualPosition();
     this._refreshListeners();
@@ -16565,11 +16854,9 @@ class Overlay {
         this._dragState = { offsetX: this._offsetX, dragStart: { x: event.clientX, y: 0 } };
       }),
       addEventListener(this._recordToggle, "click", () => {
-        var _a, _b;
-        (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, this._recorder.state.mode === "none" || this._recorder.state.mode === "standby" || this._recorder.state.mode === "inspecting" ? "recording" : "standby");
+        this._recorder.setMode(this._recorder.state.mode === "none" || this._recorder.state.mode === "standby" || this._recorder.state.mode === "inspecting" ? "recording" : "standby");
       }),
       addEventListener(this._pickLocatorToggle, "click", () => {
-        var _a, _b;
         const newMode = {
           "inspecting": "standby",
           "none": "inspecting",
@@ -16580,22 +16867,19 @@ class Overlay {
           "assertingVisibility": "recording-inspecting",
           "assertingValue": "recording-inspecting"
         };
-        (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, newMode[this._recorder.state.mode]);
+        this._recorder.setMode(newMode[this._recorder.state.mode]);
       }),
       addEventListener(this._assertVisibilityToggle, "click", () => {
-        var _a, _b;
         if (!this._assertVisibilityToggle.classList.contains("disabled"))
-          (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, this._recorder.state.mode === "assertingVisibility" ? "recording" : "assertingVisibility");
+          this._recorder.setMode(this._recorder.state.mode === "assertingVisibility" ? "recording" : "assertingVisibility");
       }),
       addEventListener(this._assertTextToggle, "click", () => {
-        var _a, _b;
         if (!this._assertTextToggle.classList.contains("disabled"))
-          (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, this._recorder.state.mode === "assertingText" ? "recording" : "assertingText");
+          this._recorder.setMode(this._recorder.state.mode === "assertingText" ? "recording" : "assertingText");
       }),
       addEventListener(this._assertValuesToggle, "click", () => {
-        var _a, _b;
         if (!this._assertValuesToggle.classList.contains("disabled"))
-          (_b = (_a = this._recorder.delegate).setMode) == null ? void 0 : _b.call(_a, this._recorder.state.mode === "assertingValue" ? "recording" : "assertingValue");
+          this._recorder.setMode(this._recorder.state.mode === "assertingValue" ? "recording" : "assertingValue");
       })
     ];
   }
@@ -16628,7 +16912,7 @@ class Overlay {
   flashToolSucceeded(tool) {
     const element = tool === "assertingVisibility" ? this._assertVisibilityToggle : this._assertValuesToggle;
     element.classList.add("succeeded");
-    setTimeout(() => element.classList.remove("succeeded"), 2e3);
+    this._recorder.injectedScript.builtinSetTimeout(() => element.classList.remove("succeeded"), 2e3);
   }
   _hideOverlay() {
     this._overlayElement.setAttribute("hidden", "true");
@@ -16644,7 +16928,6 @@ class Overlay {
     this._overlayElement.style.left = (this._recorder.injectedScript.window.innerWidth - this._measure.width) / 2 + this._offsetX + "px";
   }
   onMouseMove(event) {
-    var _a, _b;
     if (!event.buttons) {
       this._dragState = void 0;
       return false;
@@ -16654,7 +16937,7 @@ class Overlay {
       const halfGapSize = (this._recorder.injectedScript.window.innerWidth - this._measure.width) / 2 - 10;
       this._offsetX = Math.max(-halfGapSize, Math.min(halfGapSize, this._offsetX));
       this._updateVisualPosition();
-      (_b = (_a = this._recorder.delegate).setOverlayState) == null ? void 0 : _b.call(_a, { offsetX: this._offsetX });
+      this._recorder.setOverlayState({ offsetX: this._offsetX });
       consumeEvent(event);
       return true;
     }
@@ -16680,8 +16963,13 @@ class Recorder {
   constructor(injectedScript) {
     this._listeners = [];
     this._actionSelectorModel = null;
-    this.state = { mode: "none", testIdAttributeName: "data-testid", language: "javascript", overlay: { offsetX: 0 } };
-    this.delegate = {};
+    this.state = {
+      mode: "none",
+      testIdAttributeName: "data-testid",
+      language: "javascript",
+      overlay: { offsetX: 0 }
+    };
+    this._delegate = {};
     this.document = injectedScript.document;
     this.injectedScript = injectedScript;
     this.highlight = injectedScript.createHighlight();
@@ -16700,12 +16988,13 @@ class Recorder {
       this.overlay = new Overlay(this);
       this.overlay.setUIState(this.state);
     }
-    this._styleElement = this.document.createElement("style");
-    this._styleElement.textContent = `
+    this._stylesheet = new injectedScript.window.CSSStyleSheet();
+    this._stylesheet.replaceSync(`
       body[data-pw-cursor=pointer] *, body[data-pw-cursor=pointer] *::after { cursor: pointer !important; }
       body[data-pw-cursor=text] *, body[data-pw-cursor=text] *::after { cursor: text !important; }
-    `;
+    `);
     this.installListeners();
+    injectedScript.utils.cacheNormalizedWhitespaces();
     if (injectedScript.isUnderTest)
       console.error("Recorder script ready for test");
   }
@@ -16732,7 +17021,7 @@ class Recorder {
     ];
     this.highlight.install();
     (_a = this.overlay) == null ? void 0 : _a.install();
-    this.injectedScript.document.head.appendChild(this._styleElement);
+    this.document.adoptedStyleSheets.push(this._stylesheet);
   }
   _switchCurrentTool() {
     var _a, _b, _c;
@@ -16746,7 +17035,7 @@ class Recorder {
   }
   setUIState(state, delegate) {
     var _a, _b, _c, _d;
-    this.delegate = delegate;
+    this._delegate = delegate;
     if (state.actionPoint && this.state.actionPoint && state.actionPoint.x === this.state.actionPoint.x && state.actionPoint.y === this.state.actionPoint.y)
       ;
     else if (!state.actionPoint && !this.state.actionPoint)
@@ -16903,7 +17192,7 @@ class Recorder {
       tooltipText = this.injectedScript.utils.asLocator(this.state.language, model.selector);
     this.highlight.updateHighlight((model == null ? void 0 : model.elements) || [], { ...model, tooltipText });
     if (userGesture)
-      (_b = (_a = this.delegate).highlightUpdated) == null ? void 0 : _b.call(_a);
+      (_b = (_a = this._delegate).highlightUpdated) == null ? void 0 : _b.call(_a);
   }
   _ignoreOverlayEvent(event) {
     return event.composedPath().some((e) => {
@@ -16919,6 +17208,93 @@ class Recorder {
     }
     return event.composedPath()[0];
   }
+  setMode(mode) {
+    var _a, _b;
+    void ((_b = (_a = this._delegate).setMode) == null ? void 0 : _b.call(_a, mode));
+  }
+  async performAction(action) {
+    var _a, _b;
+    await ((_b = (_a = this._delegate).performAction) == null ? void 0 : _b.call(_a, action).catch(() => {
+    }));
+  }
+  recordAction(action) {
+    var _a, _b;
+    void ((_b = (_a = this._delegate).recordAction) == null ? void 0 : _b.call(_a, action));
+  }
+  setOverlayState(state) {
+    var _a, _b;
+    void ((_b = (_a = this._delegate).setOverlayState) == null ? void 0 : _b.call(_a, state));
+  }
+  setSelector(selector) {
+    var _a, _b;
+    void ((_b = (_a = this._delegate).setSelector) == null ? void 0 : _b.call(_a, selector));
+  }
+}
+class Dialog {
+  constructor(recorder) {
+    this._dialogElement = null;
+    this._recorder = recorder;
+  }
+  isShowing() {
+    return !!this._dialogElement;
+  }
+  show(options) {
+    const acceptButton = this._recorder.document.createElement("x-pw-tool-item");
+    acceptButton.title = "Accept";
+    acceptButton.classList.add("accept");
+    acceptButton.appendChild(this._recorder.document.createElement("x-div"));
+    acceptButton.addEventListener("click", () => options.onCommit());
+    const cancelButton = this._recorder.document.createElement("x-pw-tool-item");
+    cancelButton.title = "Close";
+    cancelButton.classList.add("cancel");
+    cancelButton.appendChild(this._recorder.document.createElement("x-div"));
+    cancelButton.addEventListener("click", () => {
+      var _a;
+      this.close();
+      (_a = options.onCancel) == null ? void 0 : _a.call(options);
+    });
+    this._dialogElement = this._recorder.document.createElement("x-pw-dialog");
+    this._keyboardListener = (event) => {
+      var _a;
+      if (event.key === "Escape") {
+        this.close();
+        (_a = options.onCancel) == null ? void 0 : _a.call(options);
+        return;
+      }
+      if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+        if (this._dialogElement)
+          options.onCommit();
+        return;
+      }
+    };
+    this._recorder.document.addEventListener("keydown", this._keyboardListener, true);
+    const toolbarElement = this._recorder.document.createElement("x-pw-tools-list");
+    const labelElement = this._recorder.document.createElement("label");
+    labelElement.textContent = options.label;
+    toolbarElement.appendChild(labelElement);
+    toolbarElement.appendChild(this._recorder.document.createElement("x-spacer"));
+    toolbarElement.appendChild(acceptButton);
+    toolbarElement.appendChild(cancelButton);
+    this._dialogElement.appendChild(toolbarElement);
+    const bodyElement = this._recorder.document.createElement("x-pw-dialog-body");
+    bodyElement.appendChild(options.body);
+    this._dialogElement.appendChild(bodyElement);
+    this._recorder.highlight.appendChild(this._dialogElement);
+    return this._dialogElement;
+  }
+  moveTo(top, left) {
+    if (!this._dialogElement)
+      return;
+    this._dialogElement.style.top = top + "px";
+    this._dialogElement.style.left = left + "px";
+  }
+  close() {
+    if (!this._dialogElement)
+      return;
+    this._dialogElement.remove();
+    this._recorder.document.removeEventListener("keydown", this._keyboardListener);
+    this._dialogElement = null;
+  }
 }
 function deepActiveElement(document2) {
   let activeElement = document2.activeElement;
@@ -16992,6 +17368,18 @@ function querySelector(injectedScript, selector, ownerDocument) {
     };
   }
 }
+function createSvgElement(doc, { tagName, attrs, children }) {
+  const elem = doc.createElementNS("http://www.w3.org/2000/svg", tagName);
+  if (attrs) {
+    for (const [k2, v2] of Object.entries(attrs))
+      elem.setAttribute(k2, v2);
+  }
+  if (children) {
+    for (const c of children)
+      elem.appendChild(createSvgElement(doc, c));
+  }
+  return elem;
+}
 function getByAttributeTextSelector(attrName, text, options) {
   return `internal:attr=[${attrName}=${escapeForAttributeSelector(text, (options == null ? void 0 : options.exact) || false)}]`;
 }
@@ -17279,7 +17667,7 @@ const BrowserFrame = ({ url }) => {
     ] }) })
   ] });
 };
-const SnapshotTab = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
+const SnapshotTab = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
   const [measure, ref] = useMeasure();
   const [snapshotTab, setSnapshotTab] = reactExports.useState("action");
   const { snapshots } = reactExports.useMemo(() => {
@@ -17412,6 +17800,7 @@ const SnapshotTab = ({ action, sdkLanguage, testIdAttributeName, isInspecting, s
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Toolbar, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { className: "pick-locator", title: "Pick locator", icon: "target", toggled: isInspecting, onClick: () => setIsInspecting(!isInspecting) }),
           ["action", "before", "after"].map((tab) => {
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               TabbedPaneTab,
@@ -17420,12 +17809,15 @@ const SnapshotTab = ({ action, sdkLanguage, testIdAttributeName, isInspecting, s
                 title: renderTitle(tab),
                 selected: snapshotTab === tab,
                 onSelect: () => setSnapshotTab(tab)
-              }
+              },
+              tab
             );
           }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { flex: "auto" } }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "link-external", title: "Open snapshot in a new tab", disabled: !popoutUrl, onClick: () => {
-            const win = window.open(popoutUrl || "", "_blank");
+            if (!openPage)
+              openPage = window.open;
+            const win = openPage(popoutUrl || "", "_blank");
             win == null ? void 0 : win.addEventListener("DOMContentLoaded", () => {
               const injectedScript = new InjectedScript(win, false, sdkLanguage, testIdAttributeName, 1, "chromium", []);
               new ConsoleAPI(injectedScript);
@@ -17439,8 +17831,8 @@ const SnapshotTab = ({ action, sdkLanguage, testIdAttributeName, isInspecting, s
         }, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(BrowserFrame, { url: snapshotInfo.url }),
           /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "snapshot-switcher", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { ref: iframeRef0, name: "snapshot", title: "DOM Snapshot", className: loadingRef.current.visibleIframe === 0 ? "snapshot-visible" : "" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { ref: iframeRef1, name: "snapshot", title: "DOM Snapshot", className: loadingRef.current.visibleIframe === 1 ? "snapshot-visible" : "" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { ref: iframeRef0, name: "snapshot", title: "DOM Snapshot", className: clsx(loadingRef.current.visibleIframe === 0 && "snapshot-visible") }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("iframe", { ref: iframeRef1, name: "snapshot", title: "DOM Snapshot", className: clsx(loadingRef.current.visibleIframe === 1 && "snapshot-visible") })
           ] })
         ] }) })
       ]
@@ -17527,7 +17919,7 @@ const StackTraceView = ({ stack, setSelectedFrame, selectedFrame }) => {
     }
   );
 };
-const SourceTab = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation }) => {
+const SourceTab = ({ stack, sources, rootDir, fallbackLocation, stackFrameLocation, onOpenExternally }) => {
   const [lastStack, setLastStack] = reactExports.useState();
   const [selectedFrame, setSelectedFrame] = reactExports.useState(0);
   reactExports.useEffect(() => {
@@ -17536,7 +17928,7 @@ const SourceTab = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation
       setSelectedFrame(0);
     }
   }, [stack, lastStack, setLastStack, setSelectedFrame]);
-  const { source, highlight, targetLine, fileName } = useAsyncMemo(async () => {
+  const { source, highlight, targetLine, fileName, location } = useAsyncMemo(async () => {
     var _a, _b;
     const actionLocation = stack == null ? void 0 : stack[selectedFrame];
     const shouldUseFallback = !(actionLocation == null ? void 0 : actionLocation.file);
@@ -17548,6 +17940,7 @@ const SourceTab = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation
       source2 = { errors: ((_a = fallbackLocation == null ? void 0 : fallbackLocation.source) == null ? void 0 : _a.errors) || [], content: void 0 };
       sources.set(file, source2);
     }
+    const location2 = shouldUseFallback ? fallbackLocation : actionLocation;
     const targetLine2 = shouldUseFallback ? (fallbackLocation == null ? void 0 : fallbackLocation.line) || ((_b = source2.errors[0]) == null ? void 0 : _b.line) || 0 : actionLocation.line;
     const fileName2 = rootDir && file.startsWith(rootDir) ? file.substring(rootDir.length + 1) : file;
     const highlight2 = source2.errors.map((e) => ({ type: "error", line: e.line, message: e.message }));
@@ -17566,15 +17959,36 @@ const SourceTab = ({ stack, sources, hideStackFrames, rootDir, fallbackLocation
         source2.content = `<Unable to read "${file}">`;
       }
     }
-    return { source: source2, highlight: highlight2, targetLine: targetLine2, fileName: fileName2 };
+    return { source: source2, highlight: highlight2, targetLine: targetLine2, fileName: fileName2, location: location2 };
   }, [stack, selectedFrame, rootDir, fallbackLocation], { source: { errors: [], content: "Loading…" }, highlight: [] });
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SplitView, { sidebarSize: 200, orientation: "horizontal", sidebarHidden: hideStackFrames, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", "data-testid": "source-code", children: [
-      fileName && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "source-tab-file-name", children: fileName }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: source.content || "", language: "javascript", highlight, revealLine: targetLine, readOnly: true, lineNumbers: true })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(StackTraceView, { stack, selectedFrame, setSelectedFrame })
-  ] });
+  const openExternally = reactExports.useCallback(() => {
+    if (!location)
+      return;
+    if (onOpenExternally) {
+      onOpenExternally(location);
+    } else {
+      window.location.href = `vscode://file//${location.file}:${location.line}`;
+    }
+  }, [onOpenExternally, location]);
+  const showStackFrames = ((stack == null ? void 0 : stack.length) ?? 0) > 1;
+  const shortFileName = getFileName(fileName);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SplitView,
+    {
+      sidebarSize: 200,
+      orientation: stackFrameLocation === "bottom" ? "vertical" : "horizontal",
+      sidebarHidden: !showStackFrames,
+      main: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", "data-testid": "source-code", children: [
+        fileName && /* @__PURE__ */ jsxRuntimeExports.jsxs(Toolbar, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "source-tab-file-name", title: fileName, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: shortFileName }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CopyToClipboard, { description: "Copy filename", value: shortFileName }),
+          location && /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { icon: "link-external", title: "Open in VS Code", onClick: openExternally })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CodeMirrorWrapper, { text: source.content || "", language: "javascript", highlight, revealLine: targetLine, readOnly: true, lineNumbers: true })
+      ] }),
+      sidebar: /* @__PURE__ */ jsxRuntimeExports.jsx(StackTraceView, { stack, selectedFrame, setSelectedFrame })
+    }
+  );
 };
 async function calculateSha1(text) {
   const buffer = new TextEncoder().encode(text);
@@ -17587,6 +18001,12 @@ async function calculateSha1(text) {
   }
   return hexCodes.join("");
 }
+function getFileName(fullPath) {
+  if (!fullPath)
+    return "";
+  const pathSep = (fullPath == null ? void 0 : fullPath.includes("/")) ? "/" : "\\";
+  return (fullPath == null ? void 0 : fullPath.split(pathSep).pop()) ?? "";
+}
 const tileSize = { width: 200, height: 45 };
 const frameMargin = 2.5;
 const rowHeight = tileSize.height + frameMargin * 2;
@@ -17602,7 +18022,7 @@ const FilmStrip = ({ model, boundaries, previewPoint }) => {
   const screencastFrames = (_b = (_a = model == null ? void 0 : model.pages) == null ? void 0 : _a[pageIndex]) == null ? void 0 : _b.screencastFrames;
   let previewImage = void 0;
   let previewSize = void 0;
-  if (previewPoint !== void 0 && screencastFrames) {
+  if (previewPoint !== void 0 && screencastFrames && screencastFrames.length) {
     const previewTime = boundaries.minimum + (boundaries.maximum - boundaries.minimum) * previewPoint.x / measure.width;
     previewImage = screencastFrames[upperBound(screencastFrames, previewTime, timeComparator) - 1];
     const fitInto = {
@@ -17612,7 +18032,7 @@ const FilmStrip = ({ model, boundaries, previewPoint }) => {
     previewSize = previewImage ? inscribe({ width: previewImage.width, height: previewImage.height }, fitInto) : void 0;
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "film-strip", ref, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-lanes", ref: lanesRef, children: model == null ? void 0 : model.pages.map((page, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "film-strip-lanes", ref: lanesRef, children: model == null ? void 0 : model.pages.map((page, index) => page.screencastFrames.length ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       FilmStripLane,
       {
         boundaries,
@@ -17620,7 +18040,7 @@ const FilmStrip = ({ model, boundaries, previewPoint }) => {
         width: measure.width
       },
       index
-    )) }),
+    ) : null) }),
     (previewPoint == null ? void 0 : previewPoint.x) !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "film-strip-hover", style: {
       top: measure.bottom + 5,
       left: Math.min(previewPoint.x, measure.width - (previewSize ? previewSize.width : 0) - 10)
@@ -17682,7 +18102,7 @@ function inscribe(object, area) {
     height: object.height / scale | 0
   };
 }
-const Timeline = ({ model, boundaries, onSelected, highlightedAction, highlightedEntry, selectedTime, setSelectedTime, sdkLanguage }) => {
+const Timeline = ({ model, boundaries, consoleEntries, onSelected, highlightedAction, highlightedEntry, highlightedConsoleEntry, selectedTime, setSelectedTime, sdkLanguage }) => {
   const [measure, ref] = useMeasure();
   const [dragWindow, setDragWindow] = reactExports.useState();
   const [previewPoint, setPreviewPoint] = reactExports.useState();
@@ -17726,12 +18146,31 @@ const Timeline = ({ model, boundaries, onSelected, highlightedAction, highlighte
         error: false
       });
     }
+    for (const consoleMessage of consoleEntries || []) {
+      bars2.push({
+        consoleMessage,
+        leftTime: consoleMessage.timestamp,
+        rightTime: consoleMessage.timestamp,
+        leftPosition: timeToPosition(measure.width, boundaries, consoleMessage.timestamp),
+        rightPosition: timeToPosition(measure.width, boundaries, consoleMessage.timestamp),
+        active: false,
+        error: consoleMessage.isError
+      });
+    }
     return bars2;
-  }, [model, boundaries, measure]);
+  }, [model, consoleEntries, boundaries, measure]);
   reactExports.useMemo(() => {
-    for (const bar of bars)
-      bar.active = !!highlightedAction && bar.action === highlightedAction || !!highlightedEntry && bar.resource === highlightedEntry;
-  }, [bars, highlightedAction, highlightedEntry]);
+    for (const bar of bars) {
+      if (highlightedAction)
+        bar.active = bar.action === highlightedAction;
+      else if (highlightedEntry)
+        bar.active = bar.resource === highlightedEntry;
+      else if (highlightedConsoleEntry)
+        bar.active = bar.consoleMessage === highlightedConsoleEntry;
+      else
+        bar.active = false;
+    }
+  }, [bars, highlightedAction, highlightedEntry, highlightedConsoleEntry]);
   const onMouseDown = reactExports.useCallback((event) => {
     setPreviewPoint(void 0);
     if (!ref.current)
@@ -17846,10 +18285,17 @@ const Timeline = ({ model, boundaries, onSelected, highlightedAction, highlighte
             return /* @__PURE__ */ jsxRuntimeExports.jsx(
               "div",
               {
-                className: "timeline-bar" + (bar.action ? " action" : "") + (bar.resource ? " network" : "") + (bar.active ? " active" : "") + (bar.error ? " error" : ""),
+                className: clsx(
+                  "timeline-bar",
+                  bar.action && "action",
+                  bar.resource && "network",
+                  bar.consoleMessage && "console-message",
+                  bar.active && "active",
+                  bar.error && "error"
+                ),
                 style: {
                   left: bar.leftPosition,
-                  width: Math.max(1, bar.rightPosition - bar.leftPosition),
+                  width: Math.max(5, bar.rightPosition - bar.leftPosition),
                   top: barTop(bar),
                   bottom: 0
                 }
@@ -17911,7 +18357,7 @@ const MetadataView = ({ model }) => {
   var _a, _b;
   if (!model)
     return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "metadata-view vbox", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-testid": "metadata-view", className: "vbox", style: { flexShrink: 0 }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", style: { paddingTop: 2 }, children: "Time" }),
     !!model.wallTime && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
       "start time:",
@@ -17938,6 +18384,13 @@ const MetadataView = ({ model }) => {
       "user agent:",
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "call-value datetime", title: model.options.userAgent, children: model.options.userAgent })
     ] }),
+    model.options.baseURL && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", style: { paddingTop: 2 }, children: "Config" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
+        "baseURL:",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("a", { className: "call-value string", href: model.options.baseURL, title: model.options.baseURL, target: "_blank", rel: "noopener noreferrer", children: model.options.baseURL })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "call-section", children: "Viewport" }),
     model.options.viewport && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "call-line", children: [
       "width:",
@@ -17994,7 +18447,7 @@ const checkerboardStyle = {
               rgb(0 0 0 / 15%) 0px -6.1px 12px,
               rgb(0 0 0 / 25%) 0px 6px 12px`
 };
-const ImageDiffView = ({ diff }) => {
+const ImageDiffView = ({ diff, noTargetBlank }) => {
   const [mode, setMode] = reactExports.useState(diff.diff ? "diff" : "actual");
   const [showSxsDiff, setShowSxsDiff] = reactExports.useState(false);
   const [expectedImage, setExpectedImage] = reactExports.useState(null);
@@ -18046,10 +18499,10 @@ const ImageDiffView = ({ diff }) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx(ImageWithSize, { image: actualImage, title: "Actual", canvasWidth: sxsScale * imageWidth, canvasHeight: sxsScale * imageHeight, scale: sxsScale })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { alignSelf: "start", lineHeight: "18px" }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: diff.diff && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: diff.diff.attachment.path, children: diff.diff.attachment.name }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: diff.actual.attachment.path, children: diff.actual.attachment.name }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: diff.expected.attachment.path, children: diff.expected.attachment.name }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { alignSelf: "start", lineHeight: "18px", marginLeft: "15px" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: diff.diff && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: diff.diff.attachment.path, rel: "noreferrer", children: diff.diff.attachment.name }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: noTargetBlank ? "" : "_blank", href: diff.actual.attachment.path, rel: "noreferrer", children: diff.actual.attachment.name }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: noTargetBlank ? "" : "_blank", href: diff.expected.attachment.path, rel: "noreferrer", children: diff.expected.attachment.name }) })
     ] })
   ] }) });
 };
@@ -18116,6 +18569,87 @@ const ImageWithSize = ({ image, title, alt, canvasWidth, canvasHeight, scale, on
     ) })
   ] });
 };
+function isTextualMimeType(mimeType) {
+  return !!mimeType.match(/^(text\/.*?|application\/(json|(x-)?javascript|xml.*?|ecmascript|graphql|x-www-form-urlencoded)|image\/svg(\+xml)?|application\/.*?(\+json|\+xml))(;\s*charset=.*)?$/);
+}
+const Expandable = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: clsx("expandable", expanded && "expanded"), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "expandable-title", onClick: () => expandOnTitleClick && setExpanded(!expanded), children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: clsx("codicon", expanded ? "codicon-chevron-down" : "codicon-chevron-right"),
+          style: { cursor: "pointer", color: "var(--vscode-foreground)", marginLeft: "5px" },
+          onClick: () => !expandOnTitleClick && setExpanded(!expanded)
+        }
+      ),
+      title
+    ] }),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginLeft: 25 }, children })
+  ] });
+};
+function linkifyText(description) {
+  const result = [];
+  let currentIndex = 0;
+  let match;
+  while ((match = kWebLinkRe.exec(description)) !== null) {
+    const stringBeforeMatch = description.substring(currentIndex, match.index);
+    if (stringBeforeMatch)
+      result.push(stringBeforeMatch);
+    const value = match[0];
+    result.push(renderLink(value));
+    currentIndex = match.index + value.length;
+  }
+  const stringAfterMatches = description.substring(currentIndex);
+  if (stringAfterMatches)
+    result.push(stringAfterMatches);
+  return result;
+}
+function renderLink(text) {
+  let link = text;
+  if (link.startsWith("www."))
+    link = "https://" + link;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: link, target: "_blank", rel: "noopener noreferrer", children: text });
+}
+const ExpandableAttachment = ({ attachment }) => {
+  const [expanded, setExpanded] = reactExports.useState(false);
+  const [attachmentText, setAttachmentText] = reactExports.useState(null);
+  const [placeholder, setPlaceholder] = reactExports.useState(null);
+  const isTextAttachment = isTextualMimeType(attachment.contentType);
+  const hasContent = !!attachment.sha1 || !!attachment.path;
+  reactExports.useEffect(() => {
+    if (expanded && attachmentText === null && placeholder === null) {
+      setPlaceholder("Loading ...");
+      fetch(attachmentURL(attachment)).then((response) => response.text()).then((text) => {
+        setAttachmentText(text);
+        setPlaceholder(null);
+      }).catch((e) => {
+        setPlaceholder("Failed to load: " + e.message);
+      });
+    }
+  }, [expanded, attachmentText, placeholder, attachment]);
+  const title = /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { marginLeft: 5 }, children: [
+    linkifyText(attachment.name),
+    " ",
+    hasContent && /* @__PURE__ */ jsxRuntimeExports.jsx("a", { style: { marginLeft: 5 }, href: downloadURL(attachment), children: "download" })
+  ] });
+  if (!isTextAttachment || !hasContent)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginLeft: 20 }, children: title });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Expandable, { title, expanded, setExpanded, expandOnTitleClick: true, children: placeholder && /* @__PURE__ */ jsxRuntimeExports.jsx("i", { children: placeholder }) }),
+    expanded && attachmentText !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CodeMirrorWrapper,
+      {
+        text: attachmentText,
+        readOnly: true,
+        mimeType: attachment.contentType,
+        linkify: true,
+        lineNumbers: true,
+        wrapLines: false
+      }
+    )
+  ] });
+};
 const AttachmentsTab = ({ model }) => {
   const { diffMap, screenshots, attachments } = reactExports.useMemo(() => {
     const attachments2 = /* @__PURE__ */ new Set();
@@ -18136,8 +18670,8 @@ const AttachmentsTab = ({ model }) => {
         const entry = diffMap2.get(name) || { expected: void 0, actual: void 0, diff: void 0 };
         entry[type] = attachment;
         diffMap2.set(name, entry);
-      }
-      if (attachment.contentType.startsWith("image/")) {
+        attachments2.delete(attachment);
+      } else if (attachment.contentType.startsWith("image/")) {
         screenshots2.add(attachment);
         attachments2.delete(attachment);
       }
@@ -18150,11 +18684,11 @@ const AttachmentsTab = ({ model }) => {
     [...diffMap.values()].map(({ expected, actual, diff }) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         expected && actual && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Image diff" }),
-        expected && actual && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageDiffView, { diff: {
+        expected && actual && /* @__PURE__ */ jsxRuntimeExports.jsx(ImageDiffView, { noTargetBlank: true, diff: {
           name: "Image diff",
-          expected: { attachment: { ...expected, path: attachmentURL(expected) }, title: "Expected" },
-          actual: { attachment: { ...actual, path: attachmentURL(actual) } },
-          diff: diff ? { attachment: { ...diff, path: attachmentURL(diff) } } : void 0
+          expected: { attachment: { ...expected, path: downloadURL(expected) }, title: "Expected" },
+          actual: { attachment: { ...actual, path: downloadURL(actual) } },
+          diff: diff ? { attachment: { ...diff, path: downloadURL(diff) } } : void 0
         } })
       ] });
     }),
@@ -18163,20 +18697,46 @@ const AttachmentsTab = ({ model }) => {
       const url = attachmentURL(a);
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "attachment-item", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { draggable: "false", src: url }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: url, children: a.name }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { target: "_blank", href: url, rel: "noreferrer", children: a.name }) })
       ] }, `screenshot-${i}`);
     }),
     attachments.size ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachments-section", children: "Attachments" }) : void 0,
     [...attachments.values()].map((a, i) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachment-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: attachmentURL(a) + "&download", children: a.name }) }, `attachment-${i}`);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "attachment-item", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ExpandableAttachment, { attachment: a }) }, attachmentKey(a, i));
     })
   ] });
 };
-function attachmentURL(attachment) {
-  if (attachment.sha1)
-    return "sha1/" + attachment.sha1 + "?trace=" + encodeURIComponent(attachment.traceUrl);
-  return "file?path=" + encodeURIComponent(attachment.path);
-}
+function attachmentURL(attachment, queryParams = {}) {
+  const params = new URLSearchParams(queryParams);
+  if (attachment.sha1) {
+    params.set("trace", attachment.traceUrl);
+    return "sha1/" + attachment.sha1 + "?" + params.toString();
+  }
+  params.set("path", attachment.path);
+  return "file?" + params.toString();
+}
+function downloadURL(attachment) {
+  const params = { dn: attachment.name };
+  if (attachment.contentType)
+    params.dct = attachment.contentType;
+  return attachmentURL(attachment, params);
+}
+function attachmentKey(attachment, index) {
+  return index + "-" + (attachment.sha1 ? `sha1-` + attachment.sha1 : `path-` + attachment.path);
+}
+const AnnotationsTab = ({ annotations }) => {
+  if (!annotations.length)
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlaceholderPanel, { text: "No annotations" });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "annotations-tab", children: annotations.map((annotation, i) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "annotation-item", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { fontWeight: "bold" }, children: annotation.type }),
+      annotation.description && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+        ": ",
+        linkifyText(annotation.description)
+      ] })
+    ] }, `annotation-${i}`);
+  }) });
+};
 const InspectorTab = ({ sdkLanguage, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", style: { backgroundColor: "var(--vscode-sideBar-background)" }, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { margin: "10px 0px 10px 10px", color: "var(--vscode-editorCodeLens-foreground)", flex: "none" }, children: "Locator" }),
@@ -18215,18 +18775,32 @@ function testStatusText(status) {
     return "Skipped";
   return "Did not run";
 }
-const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status }) => {
+const SettingsView = ({ settings: settings2 }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "vbox settings-view", children: settings2.map(({ value, set, title }) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "setting", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("input", { type: "checkbox", checked: value, onClick: () => set(!value) }),
+      title
+    ] }) }, title);
+  }) });
+};
+const Workbench = ({ model, showSourcesFirst, rootDir, fallbackLocation, initialSelection, onSelectionChanged, isLive, status, annotations, inert, openPage, onOpenExternally, revealSource, showSettings }) => {
+  var _a;
   const [selectedAction, setSelectedActionImpl] = reactExports.useState(void 0);
   const [revealedStack, setRevealedStack] = reactExports.useState(void 0);
   const [highlightedAction, setHighlightedAction] = reactExports.useState();
   const [highlightedEntry, setHighlightedEntry] = reactExports.useState();
+  const [highlightedConsoleMessage, setHighlightedConsoleMessage] = reactExports.useState();
   const [selectedNavigatorTab, setSelectedNavigatorTab] = reactExports.useState("actions");
   const [selectedPropertiesTab, setSelectedPropertiesTab] = useSetting("propertiesTab", showSourcesFirst ? "source" : "call");
-  const [isInspecting, setIsInspecting] = reactExports.useState(false);
+  const [isInspecting, setIsInspectingState] = reactExports.useState(false);
   const [highlightedLocator, setHighlightedLocator] = reactExports.useState("");
   const activeAction = model ? highlightedAction || selectedAction : void 0;
   const [selectedTime, setSelectedTime] = reactExports.useState();
   const [sidebarLocation, setSidebarLocation] = useSetting("propertiesSidebarLocation", "bottom");
+  const [showRouteActions, setShowRouteActions] = useSetting("show-route-actions", true);
+  const filteredActions = reactExports.useMemo(() => {
+    return ((model == null ? void 0 : model.actions) || []).filter((action) => showRouteActions || !isRouteAction(action));
+  }, [model, showRouteActions]);
   const setSelectedAction = reactExports.useCallback((action) => {
     setSelectedActionImpl(action);
     setRevealedStack(action == null ? void 0 : action.stack);
@@ -18234,6 +18808,7 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
   const sources = reactExports.useMemo(() => (model == null ? void 0 : model.sources) || /* @__PURE__ */ new Map(), [model]);
   reactExports.useEffect(() => {
     setSelectedTime(void 0);
+    setRevealedStack(void 0);
   }, [model]);
   reactExports.useEffect(() => {
     if (selectedAction && (model == null ? void 0 : model.actions.includes(selectedAction)))
@@ -18256,17 +18831,27 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
   }, [model, selectedAction, setSelectedAction, initialSelection]);
   const onActionSelected = reactExports.useCallback((action) => {
     setSelectedAction(action);
+    setHighlightedAction(void 0);
     onSelectionChanged == null ? void 0 : onSelectionChanged(action);
-  }, [setSelectedAction, onSelectionChanged]);
+  }, [setSelectedAction, onSelectionChanged, setHighlightedAction]);
   const selectPropertiesTab = reactExports.useCallback((tab) => {
     setSelectedPropertiesTab(tab);
     if (tab !== "inspector")
-      setIsInspecting(false);
+      setIsInspectingState(false);
   }, [setSelectedPropertiesTab]);
+  const setIsInspecting = reactExports.useCallback((value) => {
+    if (!isInspecting && value)
+      selectPropertiesTab("inspector");
+    setIsInspectingState(value);
+  }, [setIsInspectingState, selectPropertiesTab, isInspecting]);
   const locatorPicked = reactExports.useCallback((locator) => {
     setHighlightedLocator(locator);
     selectPropertiesTab("inspector");
   }, [selectPropertiesTab]);
+  reactExports.useEffect(() => {
+    if (revealSource)
+      selectPropertiesTab("source");
+  }, [revealSource, selectPropertiesTab]);
   const consoleModel = useConsoleTabModel(model, selectedTime);
   const networkModel = useNetworkTabModel(model, selectedTime);
   const errorsModel = useErrorsTabModel(model);
@@ -18309,17 +18894,22 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
       selectPropertiesTab("source");
     } })
   };
+  let fallbackSourceErrorCount = void 0;
+  if (!selectedAction && fallbackLocation)
+    fallbackSourceErrorCount = (_a = fallbackLocation.source) == null ? void 0 : _a.errors.length;
   const sourceTab = {
     id: "source",
     title: "Source",
+    errorCount: fallbackSourceErrorCount,
     render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
       SourceTab,
       {
         stack: revealedStack,
         sources,
-        hideStackFrames,
         rootDir,
-        fallbackLocation
+        stackFrameLocation: sidebarLocation === "bottom" ? "right" : "bottom",
+        fallbackLocation,
+        onOpenExternally
       }
     )
   };
@@ -18327,7 +18917,16 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
     id: "console",
     title: "Console",
     count: consoleModel.entries.length,
-    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(ConsoleTab, { consoleModel, boundaries, selectedTime })
+    render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConsoleTab,
+      {
+        consoleModel,
+        boundaries,
+        selectedTime,
+        onAccepted: (m2) => setSelectedTime({ minimum: m2.timestamp, maximum: m2.timestamp }),
+        onEntryHovered: setHighlightedConsoleMessage
+      }
+    )
   };
   const networkTab = {
     id: "network",
@@ -18351,6 +18950,15 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
     sourceTab,
     attachmentsTab
   ];
+  if (annotations !== void 0) {
+    const annotationsTab = {
+      id: "annotations",
+      title: "Annotations",
+      count: annotations.length,
+      render: () => /* @__PURE__ */ jsxRuntimeExports.jsx(AnnotationsTab, { annotations })
+    };
+    tabs.push(annotationsTab);
+  }
   if (showSourcesFirst) {
     const sourceTabIndex = tabs.indexOf(sourceTab);
     tabs.splice(sourceTabIndex, 1);
@@ -18370,141 +18978,116 @@ const Workbench = ({ model, hideStackFrames, showSourcesFirst, rootDir, fallback
     time = model.endTime - model.startTime;
   else if (model && model.wallTime)
     time = Date.now() - model.wallTime;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox workbench", children: [
+  const actionsTab = {
+    id: "actions",
+    title: "Actions",
+    component: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", children: [
+      status && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "workbench-run-status", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: clsx("codicon", testStatusIcon(status)) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: testStatusText(status) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "workbench-run-duration", children: time ? msToString(time) : "" })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ActionList,
+        {
+          sdkLanguage,
+          actions: filteredActions,
+          selectedAction: model ? selectedAction : void 0,
+          selectedTime,
+          setSelectedTime,
+          onSelected: onActionSelected,
+          onHighlighted: setHighlightedAction,
+          revealConsole: () => selectPropertiesTab("console"),
+          isLive
+        }
+      )
+    ] })
+  };
+  const metadataTab = {
+    id: "metadata",
+    title: "Metadata",
+    component: /* @__PURE__ */ jsxRuntimeExports.jsx(MetadataView, { model })
+  };
+  const settingsTab = {
+    id: "settings",
+    title: "Settings",
+    component: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsView, { settings: [{ value: showRouteActions, set: setShowRouteActions, title: "Show route actions" }] })
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox workbench", ...inert ? { inert: "true" } : {}, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Timeline,
       {
         model,
+        consoleEntries: consoleModel.entries,
         boundaries,
         highlightedAction,
         highlightedEntry,
+        highlightedConsoleEntry: highlightedConsoleMessage,
         onSelected: onActionSelected,
         sdkLanguage,
         selectedTime,
         setSelectedTime
       }
     ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(SplitView, { sidebarSize: 250, orientation: sidebarLocation === "bottom" ? "vertical" : "horizontal", settingName: "propertiesSidebar", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(SplitView, { sidebarSize: 250, orientation: "horizontal", sidebarIsFirst: true, settingName: "actionListSidebar", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          SnapshotTab,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      SplitView,
+      {
+        sidebarSize: 250,
+        orientation: sidebarLocation === "bottom" ? "vertical" : "horizontal",
+        settingName: "propertiesSidebar",
+        main: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          SplitView,
           {
-            action: activeAction,
-            sdkLanguage,
-            testIdAttributeName: (model == null ? void 0 : model.testIdAttributeName) || "data-testid",
-            isInspecting,
-            setIsInspecting,
-            highlightedLocator,
-            setHighlightedLocator: locatorPicked
+            sidebarSize: 250,
+            orientation: "horizontal",
+            sidebarIsFirst: true,
+            settingName: "actionListSidebar",
+            main: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              SnapshotTab,
+              {
+                action: activeAction,
+                sdkLanguage,
+                testIdAttributeName: (model == null ? void 0 : model.testIdAttributeName) || "data-testid",
+                isInspecting,
+                setIsInspecting,
+                highlightedLocator,
+                setHighlightedLocator: locatorPicked,
+                openPage
+              }
+            ),
+            sidebar: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              TabbedPane,
+              {
+                tabs: showSettings ? [actionsTab, metadataTab, settingsTab] : [actionsTab, metadataTab],
+                selectedTab: selectedNavigatorTab,
+                setSelectedTab: setSelectedNavigatorTab
+              }
+            )
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
+        sidebar: /* @__PURE__ */ jsxRuntimeExports.jsx(
           TabbedPane,
           {
-            tabs: [
-              {
-                id: "actions",
-                title: "Actions",
-                component: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "vbox", children: [
-                  status && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "workbench-run-status", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `codicon ${testStatusIcon(status)}` }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: testStatusText(status) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "spacer" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "workbench-run-duration", children: time ? msToString(time) : "" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    ActionList,
-                    {
-                      sdkLanguage,
-                      actions: (model == null ? void 0 : model.actions) || [],
-                      selectedAction: model ? selectedAction : void 0,
-                      selectedTime,
-                      setSelectedTime,
-                      onSelected: onActionSelected,
-                      onHighlighted: setHighlightedAction,
-                      revealConsole: () => selectPropertiesTab("console"),
-                      isLive
-                    }
-                  )
-                ] })
-              },
-              {
-                id: "metadata",
-                title: "Metadata",
-                component: /* @__PURE__ */ jsxRuntimeExports.jsx(MetadataView, { model })
-              }
+            tabs,
+            selectedTab: selectedPropertiesTab,
+            setSelectedTab: selectPropertiesTab,
+            rightToolbar: [
+              sidebarLocation === "bottom" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to right", icon: "layout-sidebar-right-off", onClick: () => {
+                setSidebarLocation("right");
+              } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to bottom", icon: "layout-panel-off", onClick: () => {
+                setSidebarLocation("bottom");
+              } })
             ],
-            selectedTab: selectedNavigatorTab,
-            setSelectedTab: setSelectedNavigatorTab
+            mode: sidebarLocation === "bottom" ? "default" : "select"
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TabbedPane,
-        {
-          tabs,
-          selectedTab: selectedPropertiesTab,
-          setSelectedTab: selectPropertiesTab,
-          leftToolbar: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Pick locator", icon: "target", toggled: isInspecting, onClick: () => {
-              if (!isInspecting)
-                selectPropertiesTab("inspector");
-              setIsInspecting(!isInspecting);
-            } })
-          ],
-          rightToolbar: [
-            sidebarLocation === "bottom" ? /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to right", icon: "layout-sidebar-right-off", onClick: () => {
-              setSidebarLocation("right");
-            } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ToolbarButton, { title: "Dock to bottom", icon: "layout-panel-off", onClick: () => {
-              setSidebarLocation("bottom");
-            } })
-          ],
-          mode: sidebarLocation === "bottom" ? "default" : "select"
-        }
-      )
-    ] })
+      }
+    )
   ] });
 };
-let lastId = 0;
-let _ws;
-const callbacks = /* @__PURE__ */ new Map();
-async function connect(options) {
-  const guid = new URLSearchParams(window.location.search).get("ws");
-  const wsURL = new URL(`../${guid}`, window.location.toString());
-  wsURL.protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  const ws = new WebSocket(wsURL);
-  await new Promise((f2) => ws.addEventListener("open", f2));
-  ws.addEventListener("close", options.onClose);
-  ws.addEventListener("message", (event) => {
-    const message = JSON.parse(event.data);
-    const { id: id2, result, error, method, params } = message;
-    if (id2) {
-      const callback = callbacks.get(id2);
-      if (!callback)
-        return;
-      callbacks.delete(id2);
-      if (error)
-        callback.reject(new Error(error));
-      else
-        callback.resolve(result);
-    } else {
-      options.onEvent(method, params);
-    }
-  });
-  _ws = ws;
-  setInterval(() => sendMessage("ping").catch(() => {
-  }), 3e4);
-  return sendMessage;
-}
-const sendMessage = async (method, params) => {
-  const id2 = ++lastId;
-  const message = { id: id2, method, params };
-  _ws.send(JSON.stringify(message));
-  return new Promise((resolve, reject) => {
-    callbacks.set(id2, { resolve, reject });
-  });
-};
 export {
+  Expandable as E,
   MultiTraceModel as M,
   React as R,
   SplitView as S,
@@ -18512,29 +19095,25 @@ export {
   Workbench as W,
   __vitePreload as _,
   applyTheme as a,
-  reactDomExports as b,
-  connect as c,
-  currentTheme as d,
-  addThemeListener as e,
-  removeThemeListener as f,
-  useSetting as g,
-  Toolbar as h,
-  testStatusIcon as i,
+  currentTheme as b,
+  createRoot as c,
+  addThemeListener as d,
+  removeThemeListener as e,
+  clsx as f,
+  Toolbar as g,
+  testStatusIcon as h,
+  TreeView as i,
   jsxRuntimeExports as j,
   idForAction as k,
-  TreeView as l,
+  useSetting as l,
   msToString as m,
-  getDefaultExportFromCjs as n,
-  commonjsGlobal as o,
+  useDarkModeSetting as n,
+  SettingsView as o,
+  commonjsGlobal as p,
+  getDefaultExportFromCjs as q,
   reactExports as r,
   settings as s,
   toggleTheme as t,
   useMeasure as u
 };
-function __vite__mapDeps(indexes) {
-  if (!__vite__mapDeps.viteFileDeps) {
-    __vite__mapDeps.viteFileDeps = ["./codeMirrorModule-clyjx5sb.js","../codeMirrorModule.svF_VrcJ.css"]
-  }
-  return indexes.map((i) => __vite__mapDeps.viteFileDeps[i])
-}
-//# sourceMappingURL=wsPort-MnTGOuCA.js.map
+//# sourceMappingURL=workbench-Bjkiwcr1.js.map