chrome-devtools-frontend 1.0.1587572 → 1.0.1587905

package/front_end/core/sdk/ScopeTreeCache.ts

@@ -25,6 +25,10 @@ const scopeTrees = new WeakMap<Script, Promise<{scopeTree: ScopeTreeNode, text:
  * and the text allows conversion from/to line/column numbers.
  */
 export function scopeTreeForScript(script: Script): Promise<{scopeTree: ScopeTreeNode, text: Text}|null> {
+  if (script.isWasm()) {
+    return Promise.resolve(null);
+  }
+
   let promise = scopeTrees.get(script);
   if (promise === undefined) {
     promise = script.requestContentData().then(content => {

package/front_end/generated/Deprecation.ts

@@ -94,6 +94,18 @@ export const UIStrings = {
    * @description Warning displayed to developers that instead of calling the `Intl.v8BreakIterator` constructor, which is not a standard JavaScript API, use ECMA402 standard API Intl.Segmenter shipped in end of 2020 instead.
    */
   IntlV8BreakIterator: "`Intl.v8BreakIterator` is deprecated. Please use `Intl.Segmenter` instead.",
+  /**
+   * @description Warning for using deprecated 'inputQuota' attribute.
+   */
+  LanguageModel_InputQuota: "LanguageModel.inputQuota is deprecated. Please use LanguageModel.contextWindow instead. This alias is only available in extensions.",
+  /**
+   * @description Warning for using deprecated 'inputUsage' attribute.
+   */
+  LanguageModel_InputUsage: "LanguageModel.inputUsage is deprecated. Please use LanguageModel.contextUsage instead. This alias is only available in extensions.",
+  /**
+   * @description Warning for using deprecated 'measureInputUsage' method.
+   */
+  LanguageModel_MeasureInputUsage: "LanguageModel.measureInputUsage() is deprecated. Please use LanguageModel.measureContextUsage() instead. This alias is only available in extensions.",
   /**
    * @description Warning message for web developers when they call the deprecated LanguageModel.params() method.
    */
@@ -313,6 +325,15 @@ export const DEPRECATIONS_METADATA: Partial<Record<string, DeprecationDescriptor
   "LanguageModelTopK": {
     "chromeStatusFeature": 5134603979063296
   },
+  "LanguageModel_InputQuota": {
+    "chromeStatusFeature": 5134603979063296
+  },
+  "LanguageModel_InputUsage": {
+    "chromeStatusFeature": 5134603979063296
+  },
+  "LanguageModel_MeasureInputUsage": {
+    "chromeStatusFeature": 5134603979063296
+  },
   "LocalCSSFileExtensionRejected": {
     "milestone": 64
   },

package/front_end/models/ai_assistance/AiConversation.ts

@@ -425,6 +425,10 @@ Time: ${micros(time)}`;
     yield* this.#runAgent(initialQuery, options);
   }
 
+  #getQueryAfterSelection(initialQuery: string, selection: string): string {
+    return `${selection}\nOriginal user query: ${initialQuery}`;
+  }
+
   async *
       #runAgent(
           initialQuery: string,
@@ -467,7 +471,7 @@ Time: ${micros(time)}`;
       // requery with the specialized agent.
       if (data.type === ResponseType.CONTEXT_CHANGE) {
         this.setContext(data.context);
-        yield* this.#runAgent(initialQuery, options);
+        yield* this.#runAgent(this.#getQueryAfterSelection(initialQuery, data.description), options);
         return;
       }
     }

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -88,6 +88,12 @@ export interface SideEffectResponse {
 }
 export interface ContextChangeResponse {
   type: ResponseType.CONTEXT_CHANGE;
+  /**
+   * Information to pass down what was selected
+   * Use to make the LLM understand the the user
+   * already selected something.
+   */
+  description: string;
   context: ConversationContext<unknown>;
 }
 
@@ -212,7 +218,8 @@ export type FunctionCallHandlerResult<Result> = {
 }|{
   result: Result,
 }|{
-  context: unknown,
+  context: ConversationContext<unknown>,
+  description: string,
 }|{
   error: string,
 };
@@ -484,7 +491,9 @@ export abstract class AiAgent<T> {
    *    called with one object with `foo` and `bar` keys.
    */
   protected declareFunction<Args extends Record<string, unknown>, ReturnType = unknown>(
-      name: string, declaration: FunctionDeclaration<Args, ReturnType>): void {
+      name: string,
+      declaration: FunctionDeclaration<Args, ReturnType>,
+      ): void {
     if (this.#functionDeclarations.has(name)) {
       throw new Error(`Duplicate function declaration ${name}`);
     }
@@ -609,6 +618,7 @@ export abstract class AiAgent<T> {
           if ('context' in result) {
             yield {
               type: ResponseType.CONTEXT_CHANGE,
+              description: result.description,
               context: result.context,
             };
 
@@ -643,7 +653,9 @@ export abstract class AiAgent<T> {
           name: string,
           args: Record<string, unknown>,
           options?: FunctionHandlerOptions&{explanation?: string},
-          ): AsyncGenerator<FunctionCallResponseData, {result: unknown}|{context: ConversationContext<unknown>}> {
+          ): AsyncGenerator<FunctionCallResponseData, {
+        result: unknown,
+      }|{context: ConversationContext<unknown>, description: string}> {
     const call = this.#functionDeclarations.get(name);
     if (!call) {
       throw new Error(`Function ${name} is not found.`);
@@ -755,7 +767,7 @@ export abstract class AiAgent<T> {
     }
 
     if ('context' in result) {
-      return result as {context: ConversationContext<unknown>};
+      return result;
     }
 
     return result as {result: unknown};

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -169,6 +169,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
           const calculator = this.#networkTimeCalculator ?? new NetworkTimeCalculator.NetworkTransferTimeCalculator();
           return {
             context: new RequestContext(request, calculator),
+            description: 'User selected a network request',
           };
         }
 
@@ -231,11 +232,14 @@ export class ContextSelectionAgent extends AiAgent<never> {
           if (file.fullDisplayName() === params.name) {
             return {
               context: new FileContext(file),
+              description: 'User selected a source file',
             };
           }
         }
 
-        return {error: 'Unable to find file.'};
+        return {
+          error: 'Unable to find file.',
+        };
       },
     });
 
@@ -264,6 +268,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
 
         return {
           context: PerformanceTraceContext.fromParsedTrace(result),
+          description: 'User recorded a performance trace',
         };
       }
     });
@@ -292,6 +297,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
         if (node) {
           return {
             context: new NodeContext(node),
+            description: 'User selected an element',
           };
         }
         return {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1426,8 +1426,6 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Cancel any previous in-flight conversation.
     this.#cancel();
     const signal = this.#runAbortController.signal;
-    const context = this.#getConversationContext(this.#conversation.type);
-    this.#conversation.setContext(context);
 
     // If a different context is provided, it must be from the same origin.
     if (this.#conversation.isBlockedByOrigin) {

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -202,7 +202,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           jslog=${VisualLogging.link('open-ai-settings').track({
             click: true,
           })}
-          @click=${() => {
+          @click=${(ev: Event) => {
+            ev.preventDefault();
             void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
           }}
         >${lockedString('Relevant data')}</button>&nbsp;${lockedString('is sent to Google')}
@@ -320,42 +321,46 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                           ></devtools-button>`
                         : Lit.nothing}
                       <div
-                        role=button
                         class=${Lit.Directives.classMap({
                           'resource-link': true,
                           'has-picker-behavior': input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
-                          disabled: input.isTextInputDisabled,
                         })}
-                        tabindex=${(input.conversationType === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING || input.isTextInputDisabled) ? '-1' : '0'}
-                        @click=${input.onContextClick}
-                        @keydown=${(ev: KeyboardEvent) => {
-                          if (ev.key === 'Enter' || ev.key === ' ') {
-                            void input.onContextClick();
-                          }
-                        }}
-                        aria-description=${i18nString(UIStrings.revealContextDescription)}
                       >
-                        ${input.selectedContext instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
-                          PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem()) :
-                          input.selectedContext instanceof  AiAssistanceModel.FileAgent.FileContext ?
-                          PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem()) :
-                          input.selectedContext instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
-                          html`<devtools-icon name="performance" title="Performance"></devtools-icon>` :
-                          Lit.nothing}
-                        <span class="title">
-                          ${input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
+                        ${
+                          input.selectedContext instanceof AiAssistanceModel.StylingAgent.NodeContext ?
                             html`
-                              <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
-                                node: input.selectedContext.getItem(),
-                                options: {
-                                  hiddenClassList: input.selectedContext.getItem().classNames().filter(
-                                    className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
-                                  disabled: input.isTextInputDisabled,
-                                },
-                              })}></devtools-widget>`
-                            :
-                            input.selectedContext.getTitle()}
-                        </span>
+                              <devtools-widget
+                                class="title"
+                                .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {
+                                  node: input.selectedContext.getItem(),
+                                  options: {
+                                    hiddenClassList: input.selectedContext.getItem().classNames().filter(
+                                      className => className.startsWith(AiAssistanceModel.Injected.AI_ASSISTANCE_CSS_CLASS_NAME)),
+                                    ariaDescription: i18nString(UIStrings.revealContextDescription),
+                                  },
+                                })}
+                              ></devtools-widget>` :
+                            html`
+                          ${input.selectedContext instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                            PanelUtils.PanelUtils.getIconForNetworkRequest(input.selectedContext.getItem()) :
+                            input.selectedContext instanceof AiAssistanceModel.FileAgent.FileContext ?
+                            PanelUtils.PanelUtils.getIconForSourceFile(input.selectedContext.getItem()) :
+                            input.selectedContext instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
+                            html`<devtools-icon name="performance" title="Performance"></devtools-icon>` :
+                            Lit.nothing}
+                            <span 
+                              role="button"
+                              class="title"
+                              tabindex="0"
+                              @click=${input.onContextClick}
+                              @keydown=${(ev: KeyboardEvent) => {
+                                if (ev.key === 'Enter' || ev.key === ' ') {
+                                  void input.onContextClick();
+                                }
+                              }}
+                              aria-description=${i18nString(UIStrings.revealContextDescription)}
+                            >${input.selectedContext.getTitle()}</span>`
+                        }
                         ${input.onContextRemoved ? html`
                                   <devtools-button
                                     title=${getContextRemoveLabel(input.selectedContext)}

package/front_end/panels/ai_assistance/components/chatInput.css

@@ -218,9 +218,9 @@
   gap: var(--sys-size-3);
   align-items: center;
 
-  .resource-link,
-  .resource-task {
+  .resource-link {
     display: flex;
+    background-color: var(--sys-color-cdt-base-container);
     align-items: center;
     cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-3);
@@ -250,6 +250,10 @@
 
     &.has-picker-behavior {
       overflow: visible;
+
+      .title {
+        overflow: visible;
+      }
     }
 
     &:focus-visible {
@@ -301,13 +305,6 @@
       }
     }
   }
-
-  .resource-link.disabled,
-  .resource-task.disabled {
-    color: var(--sys-color-state-disabled);
-    border-color: var(--sys-color-neutral-outline);
-    pointer-events: none;
-  }
 }
 
 .link {

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -11,7 +11,6 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -541,10 +540,9 @@ export class RequestView extends UI.Widget.VBox {
     this.resourceViewTabSetting =
         Common.Settings.Settings.instance().createSetting('cache-storage-view-tab', 'preview');
 
-    this.tabbedPane.appendTab(
-        'headers', i18nString(UIStrings.headers),
-        LegacyWrapper.LegacyWrapper.legacyWrapper(
-            UI.Widget.VBox, new Network.RequestHeadersView.RequestHeadersView(request)));
+    const requestHeadersView = new Network.RequestHeadersView.RequestHeadersView();
+    requestHeadersView.request = request;
+    this.tabbedPane.appendTab('headers', i18nString(UIStrings.headers), requestHeadersView);
     this.tabbedPane.appendTab(
         'preview', i18nString(UIStrings.preview), new Network.RequestPreviewView.RequestPreviewView(request));
     this.tabbedPane.show(this.element);

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -150,12 +150,20 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   const shouldExpandCategory = (breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[]): boolean =>
       Boolean(input.filterText) || (input.highlightedItem && breakpoints.includes(input.highlightedItem)) ||
       breakpoints.some(breakpoint => breakpoint.enabled());
-  const filter = (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): boolean => !input.filterText ||
-      Boolean(Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name).match(input.filterText)) ||
+  const filterRegex =
+      input.filterText ? new RegExp(Platform.StringUtilities.escapeForRegExp(input.filterText), 'i') : null;
+  const filter = (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint): boolean => !filterRegex ||
+      Boolean(Sources.CategorizedBreakpointL10n.getLocalizedBreakpointName(breakpoint.name).match(filterRegex)) ||
       breakpoint === input.highlightedItem;
   const filteredCategories =
       input.sortedCategoryNames.values()
-          .map(category => [category, input.categories.get(category)?.filter(filter)])
+          .map(category => {
+            const breakpoints = input.categories.get(category);
+            if (filterRegex && getLocalizedCategory(category).match(filterRegex)) {
+              return [category, breakpoints];
+            }
+            return [category, breakpoints?.filter(filter)];
+          })
           .filter(
               (filteredCategory): filteredCategory is
                   [SDK.CategorizedBreakpoint.Category, SDK.CategorizedBreakpoint.CategorizedBreakpoint[]] =>

package/front_end/panels/common/DOMLinkifier.ts

@@ -12,7 +12,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import domLinkifierStyles from './domLinkifier.css.js';
 
-const {classMap} = Directives;
+const {classMap, ifDefined} = Directives;
 
 const UIStrings = {
   /**
@@ -33,6 +33,7 @@ export interface Options {
   isDynamicLink?: boolean;
   hiddenClassList?: string[];
   disabled?: boolean;
+  ariaDescription?: string;
 }
 
 interface ViewInput {
@@ -43,6 +44,7 @@ interface ViewInput {
   id?: string;
   classes: string[];
   pseudo?: string;
+  ariaDescription?: string;
   onClick: () => void;
   onMouseOver: () => void;
   onMouseLeave: () => void;
@@ -59,6 +61,7 @@ const DEFAULT_VIEW: View = (input, _output, target: HTMLElement) => {
             'dynamic-link': Boolean(input.dynamic),
             disabled: Boolean(input.disabled)
           })}"
+          aria-description=${ifDefined(input.ariaDescription)}
           jslog=${VisualLogging.link('node').track({click: true, keydown: 'Enter'})}
           tabindex=${input.preventKeyboardFocus ? -1 : 0}
           @click=${input.onClick}
@@ -112,6 +115,7 @@ export class DOMNodeLink extends UI.Widget.Widget {
       textContent: undefined,
       isDynamicLink: false,
       disabled: false,
+      ariaDescription: undefined,
     };
     const viewInput: ViewInput = {
       dynamic: options.isDynamicLink,
@@ -129,6 +133,7 @@ export class DOMNodeLink extends UI.Widget.Widget {
       onMouseLeave: () => {
         SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
       },
+      ariaDescription: options.ariaDescription,
     };
     if (!this.#node) {
       this.#view(viewInput, {}, this.contentElement);

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -270,6 +270,7 @@ interface ComputedStyleWidgetInput {
   groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   onFilterChanged: (event: CustomEvent<string>) => void;
   filterText: string;
+  onRegexToggled: () => void;
 }
 
 type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
@@ -283,8 +284,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <devtools-toolbar-input
           type="filter"
           autofocus
+          ?regex=${true}
           value=${input.filterText}
           @change=${input.onFilterChanged}
+          @regextoggle=${input.onRegexToggled}
         ></devtools-toolbar-input>
         <devtools-checkbox
           title=${i18nString(UIStrings.showAll)}
@@ -317,6 +320,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
   readonly #view: View;
   #filterText = '';
+  #isRegex = false;
 
   constructor() {
     super({useShadowDom: true});
@@ -374,6 +378,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
           groupComputedStylesSetting: this.groupComputedStylesSetting,
           onFilterChanged: this.onFilterChanged.bind(this),
           filterText: this.#filterText,
+          onRegexToggled: this.onRegexToggled.bind(this),
         },
         null, this.contentElement);
   }
@@ -654,10 +659,28 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     return result;
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
+  private async onRegexToggled(): Promise<void> {
+    this.#isRegex = !this.#isRegex;
+    await this.filterComputedStyles(this.#buildFilterRegex(this.#filterText));
+  }
+
   private async onFilterChanged(event: CustomEvent<string>): Promise<void> {
     this.#filterText = event.detail;
-    await this.filterComputedStyles(
-        event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null);
+    await this.filterComputedStyles(this.#buildFilterRegex(event.detail));
 
     if (event.detail && this.#computedStylesTree.data && this.#computedStylesTree.data.tree) {
       UI.ARIAUtils.LiveAnnouncer.alert(i18nString(

package/front_end/panels/elements/PropertiesWidget.ts

@@ -73,6 +73,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 interface PropertiesWidgetInput {
   onFilterChanged: (e: CustomEvent<string>) => void;
+  onRegexToggled: () => void;
+  isRegex: boolean;
   treeOutlineElement: HTMLElement;
   displayNoMatchingPropertyMessage: boolean;
 }
@@ -85,7 +87,13 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     <div jslog=${VisualLogging.pane('element-properties').track({resize: true})}>
       <div class="hbox properties-widget-toolbar">
         <devtools-toolbar class="styles-pane-toolbar" role="presentation">
-          <devtools-toolbar-input type="filter" @change=${input.onFilterChanged} style="flex-grow:1; flex-shrink:1"></devtools-toolbar-input>
+          <devtools-toolbar-input
+            type="filter"
+            ?regex=${true}
+            @change=${input.onFilterChanged}
+            @regextoggle=${input.onRegexToggled}
+            style="flex-grow:1; flex-shrink:1"
+          ></devtools-toolbar-input>
           <devtools-checkbox title=${i18nString(UIStrings.showAllTooltip)} ${bindToSetting(getShowAllPropertiesSetting())}>
             ${i18nString(UIStrings.showAll)}
           </devtools-checkbox>
@@ -110,6 +118,8 @@ export class PropertiesWidget extends UI.Widget.VBox {
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   readonly #view: View;
   #displayNoMatchingPropertyMessage = false;
+  #isRegex = false;
+  #filterText = '';
 
   constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
@@ -140,11 +150,33 @@ export class PropertiesWidget extends UI.Widget.VBox {
     void this.performUpdate();
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
   private onFilterChanged(event: CustomEvent<string>): void {
-    this.filterRegex = event.detail ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.detail), 'i') : null;
+    this.#filterText = event.detail;
+    this.filterRegex = this.#buildFilterRegex(event.detail);
     this.filterAndScheduleUpdate();
   }
 
+  private onRegexToggled(): void {
+    this.#isRegex = !this.#isRegex;
+    this.filterRegex = this.#buildFilterRegex(this.#filterText);
+    this.internalFilterProperties();
+    this.#renderView();
+  }
+
   private filterAndScheduleUpdate(): void {
     const previousDisplay = this.#displayNoMatchingPropertyMessage;
     this.internalFilterProperties();
@@ -195,9 +227,15 @@ export class PropertiesWidget extends UI.Widget.VBox {
           treeElement, await root.populateChildrenIfNeeded(), true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
+    this.#renderView();
+  }
+
+  #renderView(): void {
     this.#view(
         {
           onFilterChanged: this.onFilterChanged.bind(this),
+          onRegexToggled: this.onRegexToggled.bind(this),
+          isRegex: this.#isRegex,
           treeOutlineElement: this.treeOutline.element,
           displayNoMatchingPropertyMessage: this.#displayNoMatchingPropertyMessage,
         },

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -184,6 +184,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private userOperation = false;
   isEditingStyle = false;
   #filterRegex: RegExp|null = null;
+  #isRegex = false;
+  #filterText = '';
   private isActivePropertyHighlighted = false;
   private initialUpdateCompleted = false;
   hasMatchedStyles = false;
@@ -486,9 +488,28 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
+  #buildFilterRegex(text: string): RegExp|null {
+    if (!text) {
+      return null;
+    }
+    if (this.#isRegex) {
+      try {
+        return new RegExp(text, 'i');
+      } catch {
+        // Invalid regex: fall through to plain-text matching.
+      }
+    }
+    return new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i');
+  }
+
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
-    const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
-    this.setFilter(regex);
+    this.#filterText = event.data;
+    this.setFilter(this.#buildFilterRegex(event.data));
+  }
+
+  private onRegexToggled(): void {
+    this.#isRegex = !this.#isRegex;
+    this.setFilter(this.#buildFilterRegex(this.#filterText));
   }
 
   setFilter(regex: RegExp|null): void {
@@ -1392,7 +1413,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const hbox = container.createChild('div', 'hbox styles-sidebar-pane-toolbar');
     const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
     toolbar.role = 'presentation';
-    const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
+    const filterInput = new UI.Toolbar.ToolbarFilter(
+        undefined, 1, 1, undefined, undefined, false, undefined, undefined, /* showRegexToggle=*/ true,
+        this.onRegexToggled.bind(this));
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
     void toolbar.appendItemsAtLocation('styles-sidebarpane-toolbar');

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1621,6 +1621,10 @@ export class NetworkRequestNode extends NetworkNode {
         this.select();
         void action.execute();
       }, {capture: true});
+      // We need this as else the images get open under it.
+      floatingButton.addEventListener('dblclick', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
       floatingButton.addEventListener('mousedown', ev => {
         ev.stopPropagation();
       }, {capture: true});