chrome-devtools-frontend 1.0.1586699 → 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/entrypoint_template.html

@@ -14,7 +14,11 @@
     }
   }
 </style>
-<meta http-equiv="Content-Security-Policy" content="object-src 'none'; script-src 'self' https://chrome-devtools-frontend.appspot.com">
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
+  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data:; frame-src * data:; connect-src data:
+  https://chromeuxreport.googleapis.com 'self' devtools:;">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
 <link href="./application_tokens.css" rel="stylesheet">

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/generated/InspectorBackendCommands.ts

@@ -857,7 +857,7 @@ inspectorBackend.registerCommand("Network.disable", [], [], "Disables network tr
 inspectorBackend.registerCommand("Network.emulateNetworkConditions", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}, {"name": "packetLoss", "type": "number", "optional": true, "description": "WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.", "typeRef": null}, {"name": "packetQueueLength", "type": "number", "optional": true, "description": "WebRTC packet queue length (packet). 0 removes any queue length limitations.", "typeRef": null}, {"name": "packetReordering", "type": "boolean", "optional": true, "description": "WebRTC packetReordering feature.", "typeRef": null}], [], "Activates emulation of network conditions. This command is deprecated in favor of the emulateNetworkConditionsByRule and overrideNetworkState commands, which can be used together to the same effect.");
 inspectorBackend.registerCommand("Network.emulateNetworkConditionsByRule", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "matchedNetworkConditions", "type": "array", "optional": false, "description": "Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are also applied for throttling of p2p connections.", "typeRef": "Network.NetworkConditions"}], ["ruleIds"], "Activates emulation of network conditions for individual requests using URL match patterns. Unlike the deprecated Network.emulateNetworkConditions this method does not affect `navigator` state. Use Network.overrideNetworkState to explicitly modify `navigator` behavior.");
 inspectorBackend.registerCommand("Network.overrideNetworkState", [{"name": "offline", "type": "boolean", "optional": false, "description": "True to emulate internet disconnection.", "typeRef": null}, {"name": "latency", "type": "number", "optional": false, "description": "Minimum latency from request sent to response headers received (ms).", "typeRef": null}, {"name": "downloadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.", "typeRef": null}, {"name": "uploadThroughput", "type": "number", "optional": false, "description": "Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.", "typeRef": null}, {"name": "connectionType", "type": "string", "optional": true, "description": "Connection type if known.", "typeRef": "Network.ConnectionType"}], [], "Override the state of navigator.onLine and navigator.connection.");
-inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
+inspectorBackend.registerCommand("Network.enable", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc). This is the maximum number of bytes that will be collected by this DevTools session.", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxPostDataSize", "type": "number", "optional": true, "description": "Longest post body size (in bytes) that would be included in requestWillBeSent notification", "typeRef": null}, {"name": "reportDirectSocketTraffic", "type": "boolean", "optional": true, "description": "Whether DirectSocket chunk send/receive events should be reported.", "typeRef": null}, {"name": "enableDurableMessages", "type": "boolean", "optional": true, "description": "Enable storing response bodies outside of renderer, so that these survive a cross-process navigation. Requires maxTotalBufferSize to be set. Currently defaults to false. This field is being deprecated in favor of the dedicated configureDurableMessages command, due to the possibility of deadlocks when awaiting Network.enable before issuing Runtime.runIfWaitingForDebugger.", "typeRef": null}], [], "Enables network tracking, network events will now be delivered to the client.");
 inspectorBackend.registerCommand("Network.configureDurableMessages", [{"name": "maxTotalBufferSize", "type": "number", "optional": true, "description": "Buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}, {"name": "maxResourceBufferSize", "type": "number", "optional": true, "description": "Per-resource buffer size in bytes to use when preserving network payloads (XHRs, etc).", "typeRef": null}], [], "Configures storing response bodies outside of renderer, so that these survive a cross-process navigation. If maxTotalBufferSize is not set, durable messages are disabled.");
 inspectorBackend.registerCommand("Network.getAllCookies", [], ["cookies"], "Returns all browser cookies. Depending on the backend support, will return detailed cookie information in the `cookies` field. Deprecated. Use Storage.getCookies instead.");
 inspectorBackend.registerCommand("Network.getCertificate", [{"name": "origin", "type": "string", "optional": false, "description": "Origin to get certificate for.", "typeRef": null}], ["tableNames"], "Returns the DER-encoded certificate.");

package/front_end/generated/protocol.ts

@@ -11896,6 +11896,8 @@ export namespace Network {
   export interface EnableRequest {
     /**
      * Buffer size in bytes to use when preserving network payloads (XHRs, etc).
+     * This is the maximum number of bytes that will be collected by this
+     * DevTools session.
      */
     maxTotalBufferSize?: integer;
     /**

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,11 +11,9 @@ 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';
-import * as NetworkComponents from '../network/components/components.js';
 import * as Network from '../network/network.js';
 
 import * as ApplicationComponents from './components/components.js';
@@ -542,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 NetworkComponents.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(