chrome-devtools-frontend 1.0.1597624 → 1.0.1598808

package/docs/ui_engineering.md

@@ -44,7 +44,7 @@ To embed another presenter (`UI.Widget`) in the lit-html template, use `widget(<
 
 This will instantiate a `Widget` class with the web component as its `element` and, optionally, will set the properties provided in the second parameter. The widget won’t be re-instantiated on the subsequent template renders, but the properties would be updated. For this to work, the widget needs to accept `HTMLElement` as a sole constructor parameter and properties need to be public members or setters.
 
-For backwards compatibility, the first argument to `widgetConfig` can also be a factory function: `widget(element => new MyWidget(foo, bar, element))`. Similar to the class constructor version, `element` is the actual `<devtools-widget>` so the following two invocations of `widgetConfig` are equivalent: `widget(MyWidget)` and `widget(element => new MyWidget(element))`.
+For backwards compatibility, the first argument to `widget` can also be a factory function: `widget(element => new MyWidget(foo, bar, element))`. Similar to the class constructor version, `element` is the actual `<devtools-widget>` so the following two invocations of `widget` are equivalent: `widget(MyWidget)` and `widget(element => new MyWidget(element))`.
 
 ## Styling
 To prevent style conflicts in widgets without relying on shadow DOM, we use the CSS [`@scope`](https://developer.mozilla.org/en-US/docs/Web/CSS/@scope) at-rule for style encapsulation. This ensures that styles defined for a widget do not leak out and affect other components.
@@ -93,9 +93,9 @@ In this example, the `.title` style will apply within the parent widget but will
 ## Examples
 
 ```html
-<devtools-widget .widgetConfig=${widgetConfig(ElementsPanel)}>
+<devtools-widget ${widget(ElementsPanel)}>
   <devtools-split-view>
-    <devtools-widget slot="main" .widgetConfig=${widgetConfig(ElementsTree)}></devtools-widget>
+    <devtools-widget slot="main" ${widget(ElementsTree)}></devtools-widget>
     <devtools-tab-pane slot="sidebar">
       ${widget(StylesPane, {element: input.element})}
       ${widget(ComputedPane, {element: input.element})}
@@ -1169,12 +1169,12 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     <div>
       <devtools-split-view direction=${this.vertical ? 'column' : 'row'} sidebar-position="first"
           sidebar-initial-size="200">
-        <devtools-widget slot="sidebar" .widgetConfig=${widgetConfig(SidebarPanel,
+        <devtools-widget slot="sidebar" ${widget(SidebarPanel,
             {minimumSize: {width: 100, height: 25}})}></devtools-widget>
         <devtools-split-view direction="column" sidebar-position="second" slot="main"
             direction="row" sidebar-position="$this.dockedLeft ? 'second' : 'first'}">
-          <devtools-widget slot="main" .widgetConfig=${widgetConfig(UI.Widget.EmptyWidget)}></devtools-widget>
-          <devtools-widget slot="sidebar" .widgetConfig=${widgetConfig(DetailsView)}></devtools-widget>
+          <devtools-widget slot="main" ${widget(UI.Widget.EmptyWidget)}></devtools-widget>
+          <devtools-widget slot="sidebar" ${widget(DetailsView)}></devtools-widget>
         </devtools-split-view>
       </devtools-split-view>
     </div>`,

package/front_end/core/host/AidaClient.ts

@@ -137,6 +137,8 @@ export enum ClientFeature {
   CHROME_CONTEXT_SELECTION_AGENT = 25,
   // Chrome Accessibility Agent
   CHROME_ACCESSIBILITY_AGENT = 26,
+  // Chrome AI Assistance Conversation Summary Agent.
+  CHROME_CONVERSATION_SUMMARY_AGENT = 27,
 
   // Removed features (for reference).
   // Chrome AI Assistance Performance Insights Agent.

package/front_end/models/ai_assistance/AiConversation.ts

@@ -265,21 +265,23 @@ export class AiConversation {
       id: this.id,
       history: this.history
                    .map(item => {
-                     if (item.type === ResponseType.CONTEXT_CHANGE) {
-                       return null;
+                     switch (item.type) {
+                       case ResponseType.CONTEXT_CHANGE: {
+                         return null;
+                       }
+                       case ResponseType.USER_QUERY: {
+                         return {...item, imageInput: undefined};
+                       }
+                       case ResponseType.SIDE_EFFECT: {
+                         return {...item, confirm: undefined};
+                       }
+                       case ResponseType.CONTEXT:
+                       case ResponseType.ACTION: {
+                         return {...item, widgets: undefined};
+                       }
+                       default:
+                         return item;
                      }
-
-                     if (item.type === ResponseType.USER_QUERY) {
-                       return {...item, imageInput: undefined};
-                     }
-                     // Remove the `confirm()`-function because `structuredClone()` throws on functions
-                     if (item.type === ResponseType.SIDE_EFFECT) {
-                       return {...item, confirm: undefined};
-                     }
-                     if (item.type === ResponseType.CONTEXT && item.widgets) {
-                       return {...item, widgets: undefined};
-                     }
-                     return item;
                    })
                    .filter(history => !!history),
       type: this.#type,

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

@@ -249,8 +249,15 @@ export interface StylePropertiesAiWidget {
   };
 }
 
+export interface DomTreeAiWidget {
+  name: 'DOM_TREE';
+  data: {
+    root: SDK.DOMModel.DOMNodeSnapshot,
+  };
+}
+
 // This type will grow as we add more widgets.
-export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget;
+export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,
@@ -689,10 +696,12 @@ export abstract class AiAgent<T> {
 
             return;
           }
+
           query = {
             functionResponse: {
               name: functionCall.name,
-              response: result,
+              // Widgets are not sent back to the LLM
+              response: {...result, widgets: undefined},
             },
           };
           request = this.buildRequest(query, Host.AidaClient.Role.ROLE_UNSPECIFIED);
@@ -720,7 +729,8 @@ export abstract class AiAgent<T> {
           options?: FunctionHandlerOptions&{explanation?: string},
           ): AsyncGenerator<FunctionCallResponseData, {
         result: unknown,
-      }|{context: ConversationContext<unknown>, description: string}> {
+        widgets?: AiWidget[],
+      }|{context: ConversationContext<unknown>, description: string, widgets?: AiWidget[]}> {
     const call = this.#functionDeclarations.get(name);
     if (!call) {
       throw new Error(`Function ${name} is not found.`);
@@ -837,7 +847,7 @@ export abstract class AiAgent<T> {
       return result;
     }
 
-    return result as {result: unknown};
+    return result as {result: unknown, widgets?: AiWidget[]};
   }
 
   async *

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

@@ -0,0 +1,109 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as Root from '../../../core/root/root.js';
+
+import {AiAgent, type ContextResponse, ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
+
+const preamble =
+    `You are an expert technical assistant specializing in summarizing debugging conversations from Chrome DevTools.
+You will receive a markdown-formatted transcript of a conversation between a user and a DevTools AI assistant.
+Your goal is to produce a succinct, structured summary that a local AI agent in the user's IDE can use to apply code fixes.
+
+Focus on extracting:
+1. **Core Issue:** The primary problem or question the user was investigating.
+2. **Diagnostic Findings:** Key technical details discovered (e.g., specific functions, bottlenecks, error messages, URLs, or CSS properties).
+3. **Proposed Solution:** The specific changes or optimizations recommended by the DevTools assistant.
+4. **Actionable Steps:** A clear, step-by-step list of instructions for the IDE agent to implement the fix.
+
+Maintain a professional, technical, and extremely concise tone. Avoid conversational filler or introductory/concluding remarks.
+The output must be structured markdown.`;
+
+export class ConversationSummaryContext extends ConversationContext<string> {
+  #conversation: string;
+  constructor(conversation: string) {
+    super();
+    this.#conversation = conversation;
+  }
+
+  getOrigin(): string {
+    return 'devtools://ai-assistance';
+  }
+
+  getItem(): string {
+    return this.#conversation;
+  }
+
+  override getTitle(): string {
+    return 'Conversation';
+  }
+}
+
+/**
+ * An agent that takes a full conversation between a user and an agent in markdown
+ * format and produces a succinct summary of the conversation.
+ *
+ * This summary is designed to be read by a local agent in the user's IDE and it
+ * will be used to help apply fixes to the user's local codebase based on the
+ * debugging information the devtools agent found.
+ *
+ * This agent is not intended to be used directly by users in the AI Assistance
+ * panel when chatting with DevTools AI.
+ */
+export class ConversationSummaryAgent extends AiAgent<string> {
+  override preamble = preamble;
+
+  get clientFeature(): Host.AidaClient.ClientFeature {
+    return Host.AidaClient.ClientFeature.CHROME_CONVERSATION_SUMMARY_AGENT;
+  }
+
+  get userTier(): string|undefined {
+    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
+    return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
+  }
+
+  get options(): RequestOptions {
+    // TODO(b/491772868): tidy up userTier & feature flags in the backend.
+    const temperature = Root.Runtime.hostConfig.devToolsFreestyler?.temperature;
+    const modelId = Root.Runtime.hostConfig.devToolsFreestyler?.modelId;
+
+    return {
+      temperature,
+      modelId,
+    };
+  }
+
+  async * handleContextDetails(context: ConversationContext<string>|null): AsyncGenerator<ContextResponse, void, void> {
+    if (!context) {
+      return;
+    }
+
+    yield {
+      type: ResponseType.CONTEXT,
+      title: 'Summarizing conversation',
+      details: [
+        {
+          title: 'Conversation transcript',
+          text: context.getItem(),
+        },
+      ],
+    };
+  }
+
+  override async enhanceQuery(query: string, context: ConversationContext<string>|null): Promise<string> {
+    const conversation = context ? context.getItem() : query;
+    return `Summarize the following conversation:\n\n${conversation}`;
+  }
+
+  async summarizeConversation(conversation: string): Promise<string> {
+    const context = new ConversationSummaryContext(conversation);
+    const response = await Array.fromAsync(this.run('', {selected: context}));
+    const lastResponse = response.at(-1);
+    if (lastResponse && lastResponse.type === ResponseType.ANSWER && lastResponse.complete === true) {
+      return lastResponse.text.trim();
+    }
+    throw new Error('Failed to summarize conversation');
+  }
+}

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

@@ -8,6 +8,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
@@ -700,6 +701,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
+    const processedNodeIds = new Set<Protocol.DOM.BackendNodeId>();
 
     this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
@@ -749,9 +751,36 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
+        const widgets: AiWidget[] = [];
+        if (params.insightName === 'LCPDiscovery' || params.insightName === 'LCPBreakdown') {
+          const lcpMetric = Trace.Insights.Common.getLCP(insightSet);
+          const lcpEvent = lcpMetric?.event;
+          if (lcpEvent && Trace.Types.Events.isAnyLargestContentfulPaintCandidate(lcpEvent)) {
+            const nodeId = lcpEvent.args.data?.nodeId;
+            // We want to show only one DOM tree widget per walkthrough per node.
+            // We do want to show the widget for the same node again, if it's within a new walkthrough.
+            if (nodeId && !processedNodeIds.has(nodeId)) {
+              const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+              const domModel = target?.model(SDK.DOMModel.DOMModel);
+              if (domModel) {
+                const nodeMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([nodeId]));
+                const node = nodeMap?.get(nodeId);
+                if (node) {
+                  const snapshot = await node.takeSnapshot();
+                  widgets.push({
+                    name: 'DOM_TREE',
+                    data: {root: snapshot},
+                  });
+                  processedNodeIds.add(nodeId);
+                }
+              }
+            }
+          }
+        }
+
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
-        return {result: {details}};
+        return {result: {details}, widgets};
       },
     });
 

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -7,6 +7,7 @@ import * as AccessibilityAgent from './agents/AccessibilityAgent.js';
 import * as AiAgent from './agents/AiAgent.js';
 import * as BreakpointDebuggerAgent from './agents/BreakpointDebuggerAgent.js';
 import * as ContextSelectionAgent from './agents/ContextSelectionAgent.js';
+import * as ConversationSummaryAgent from './agents/ConversationSummaryAgent.js';
 import * as FileAgent from './agents/FileAgent.js';
 import * as NetworkAgent from './agents/NetworkAgent.js';
 import * as PatchAgent from './agents/PatchAgent.js';
@@ -47,6 +48,7 @@ export {
   ChangeManager,
   ContextSelectionAgent,
   ConversationHandler,
+  ConversationSummaryAgent,
   Debug,
   EvaluateAction,
   ExtensionScope,

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -50,6 +50,7 @@ import {
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 const {html} = Lit;
+const {widget} = UI.Widget;
 
 const AI_ASSISTANCE_SEND_FEEDBACK = 'https://crbug.com/364805393' as Platform.DevToolsPath.UrlString;
 const AI_ASSISTANCE_HELP =
@@ -465,16 +466,12 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
         ></devtools-ai-chat-view>`;
       }
       case ViewState.EXPLORE_VIEW:
-        return html`<devtools-widget
-          class="fill-panel"
-          .widgetConfig=${UI.Widget.widgetConfig(ExploreWidget)}
-        ></devtools-widget>`;
+        return html`<devtools-widget class="fill-panel" ${widget(ExploreWidget)}>
+                    </devtools-widget>`;
 
       case ViewState.DISABLED_VIEW:
-        return html`<devtools-widget
-          class="fill-panel"
-          .widgetConfig=${UI.Widget.widgetConfig(DisabledWidget, input.props)}
-        ></devtools-widget>`;
+        return html`<devtools-widget class="fill-panel" ${widget(DisabledWidget, input.props)}>
+                    </devtools-widget>`;
     }
   }
 
@@ -510,7 +507,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
           </div>
           <div slot="sidebar" class="sidebar-view">
             ${shouldShowWalkthrough ? html`
-              <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(WalkthroughView, {
+              <devtools-widget ${widget(WalkthroughView, {
                 message: input.props.walkthrough.activeMessage,
                 isLoading: input.props.isLoading && walkthroughIsForLastMessage,
                 markdownRenderer: input.props.markdownRenderer,

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -280,7 +280,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
 
     // clang-format off
     return html`<devtools-widget class="copy-to-prompt"
-      .widgetConfig=${UI.Widget.widgetConfig(PanelCommon.CopyChangesToPrompt, {
+      ${widget(PanelCommon.CopyChangesToPrompt, {
         workspaceDiff: input.workspaceDiff,
         patchAgentCSSChange: changedCode,
       })}></devtools-widget>`;

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

@@ -13,7 +13,7 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import type {
-  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, StylePropertiesAiWidget} from
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, StylePropertiesAiWidget} from
   '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
@@ -676,33 +676,29 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   }
   const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
-  const widgetConfig = UI.Widget.widgetConfig(Elements.ComputedStyleWidget.ComputedStyleWidget, {
-    nodeStyle: styles,
-    matchedStyles: widgetData.data.matchedCascade,
-    // This disables showing the nested traces and detailed information in the widget.
-    propertyTraces: null,
-    allowUserControl: false,
-    filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
-  });
-
   // clang-format off
-  const widget = html`<devtools-widget class="computed-styles-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+      class="computed-styles-widget" ${widget(Elements.ComputedStyleWidget.ComputedStyleWidget, {
+        nodeStyle: styles,
+        matchedStyles: widgetData.data.matchedCascade,
+        // This disables showing the nested traces and detailed information in the widget.
+        propertyTraces: null,
+        allowUserControl: false,
+        filterText: new RegExp(widgetData.data.properties.join('|'), 'i')
+      })}></devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
+  return {renderedWidget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
 }
 
 async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
-  const widgetConfig = UI.Widget.widgetConfig(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data});
-
   // clang-format off
-  const widget = html`<devtools-widget class="core-vitals-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+      class="core-vitals-widget" ${widget(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data})}>
+  </devtools-widget>`;
   // clang-format on
 
-  return {
-    renderedWidget: widget,
-    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)
-  };
+  return {renderedWidget, revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)};
 }
 
 async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
@@ -711,19 +707,17 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
     return null;
   }
 
-  const widgetConfig = UI.Widget.widgetConfig(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
-    domNode: domNodeForId,
-    filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
-  });
-
   // clang-format off
-  const widget = html`<devtools-widget
-    class="styling-preview-widget"
-    .widgetConfig=${widgetConfig}
-  ></devtools-widget>`;
+  const renderedWidget = html`<devtools-widget
+      class="styling-preview-widget"
+      ${widget(Elements.StandaloneStylesContainer.StandaloneStylesContainer, {
+      domNode: domNodeForId,
+      filter: widgetData.data.selector ? new RegExp(widgetData.data.selector) : null,
+    })}>
+  </devtools-widget>`;
   // clang-format on
 
-  return {renderedWidget: widget, revealable: domNodeForId};
+  return {renderedWidget, revealable: domNodeForId};
 }
 
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
@@ -756,6 +750,34 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
   // clang-format on
 }
 
+async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMakerResponse|null> {
+  const root = widgetData.data.root;
+  if (!(root instanceof SDK.DOMModel.DOMNodeSnapshot)) {
+    return null;
+  }
+
+  const widgetConfig = UI.Widget.widgetConfig(Elements.ElementsTreeOutline.DOMTreeWidget, {
+    maxTreeDepth: 2,
+    enableContextMenu: false,
+    showComments: false,
+    showAIButton: false,
+    disableEdits: true,
+    expandRoot: true,
+    rootDOMNode: root,
+    visibleWidth: 400,
+    wrap: true,
+  });
+
+  // clang-format off
+  const widget = html`<devtools-widget class="dom-tree-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  // clang-format on
+
+  return {
+    renderedWidget: widget,
+    revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
+  };
+}
+
 /**
  * Renders AI-defined UI widgets.
  * When a ModelChatMessage contains a WidgetPart, or a Step has widgets,
@@ -786,6 +808,8 @@ async function renderWidgets(
       response = await makeCoreVitalsWidget(widgetData);
     } else if (widgetData.name === 'STYLE_PROPERTIES') {
       response = await makeStylePropertiesWidget(widgetData);
+    } else if (widgetData.name === 'DOM_TREE') {
+      response = await makeDomTreeWidget(widgetData);
     }
     return renderWidgetResponse(response);
   }));

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

@@ -169,7 +169,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
               </div>
             </div>
           `}
-          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
+          <devtools-widget class=${inputWidgetClasses} ${widget(ChatInput, {
             isLoading: input.isLoading,
             blockedByCrossOrigin: input.blockedByCrossOrigin,
             isTextInputDisabled: input.isTextInputDisabled,

package/front_end/panels/application/AppManifestView.ts

@@ -22,7 +22,7 @@ import * as ApplicationComponents from './components/components.js';
 
 const {styleMap, classMap, ref} = Directives;
 const {linkifyURL} = Components.Linkifier.Linkifier;
-const {widget, widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -719,7 +719,7 @@ function renderProtocolHandlers(data: ProtocolHandlersSectionData, output: ViewO
   // clang-format off
   return html`${renderSectionHeader(i18nString(UIStrings.protocolHandlers), output)}
     <div class="report-row">
-      <devtools-widget .widgetConfig=${widgetConfig(
+      <devtools-widget ${widget(
         ApplicationComponents.ProtocolHandlersView.ProtocolHandlersView,
         {protocolHandlers: data.protocolHandlers, manifestLink: data.manifestLink})}
         ${ref(setFocusOnSection(i18nString(UIStrings.protocolHandlers), output))}>

package/front_end/panels/application/CookieItemsView.ts

@@ -82,6 +82,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/CookieItemsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {Size} = Geometry;
+const {widget} = UI.Widget;
 
 interface CookiePreviewWidgetInput {
   cookie: SDK.Cookie.Cookie|null;
@@ -184,10 +185,8 @@ type View = (input: CookieItemsViewInput, output: CookieItemsViewOutput, target:
 export const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
   render(html`<style>${cookieItemsViewStyles}</style>
-    <devtools-widget class="storage-view"
-      .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
-      <devtools-widget
-        .widgetConfig=${UI.Widget.widgetConfig(StorageItemsToolbar, {
+    <devtools-widget class="storage-view" ${widget(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
+      <devtools-widget ${widget(StorageItemsToolbar, {
           onDeleteSelectedCallback: input.onDeleteSelectedItems,
           onDeleteAllCallback: input.onDeleteAllItems,
           onRefreshCallback: input.onRefreshItems,
@@ -196,10 +195,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         ${UI.Widget.widgetRef(StorageItemsToolbar, toolbar => { output.toolbar = toolbar; })}
       ></devtools-widget>
       <devtools-split-view sidebar-position="second" name="cookie-items-split-view-state">
-        <devtools-widget
-                  slot="main"
-                  .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
-          <devtools-widget slot="main" .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+        <devtools-widget slot="main" ${widget(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
+          <devtools-widget slot="main" ${widget(CookieTable.CookiesTable.CookiesTable, {
             cookieDomain: input.cookieDomain,
             cookiesData: input.cookiesData,
             saveCallback: input.onSaveCookie,
@@ -210,15 +207,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           })}
           ></devtools-widget>
         </devtools-widget>
-        <devtools-widget
-          slot="sidebar"
-          .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}
+        <devtools-widget slot="sidebar" ${widget(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}
           jslog=${VisualLogging.pane('preview').track({resize: true})}>
           ${input.selectedCookie ?
-            html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookiePreviewWidget, {
-              cookie: input.selectedCookie
-            })}></devtools-widget>` :
-            html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+            html`<devtools-widget ${widget(CookiePreviewWidget, {cookie: input.selectedCookie})}>
+                 </devtools-widget>` :
+            html`<devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
               header: i18nString(UIStrings.noCookieSelected),
               text: i18nString(UIStrings.selectACookieToPreviewItsValue)
             })}></devtools-widget>`}

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -19,7 +19,7 @@ import {
   type SessionAndEvents
 } from './DeviceBoundSessionsModel.js';
 import deviceBoundSessionsViewStyles from './deviceBoundSessionsView.css.js';
-const {widget, widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -583,10 +583,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
       <style>${UI.inspectorCommonStyles}</style>
       <style>${deviceBoundSessionsViewStyles}</style>
       ${toolbarHtml}
-      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
-          header: defaultTitle,
-          text: defaultDescription
-        })} jslog=${VisualLogging.pane('device-bound-sessions-empty')}></devtools-widget>
+      <devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {header: defaultTitle, text: defaultDescription})} jslog=${
+            VisualLogging.pane('device-bound-sessions-empty')}></devtools-widget>
     `,
         target);
     return;

package/front_end/panels/application/FrameDetailsView.ts

@@ -30,7 +30,7 @@ import * as ApplicationComponents from './components/components.js';
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
 import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 
-const {widget, widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -327,7 +327,7 @@ function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplat
         </devtools-link>
       </span>
     </devtools-report-section>
-    <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
+    <devtools-widget class="span-cols" ${widget(OriginTrialTreeView, {data})}>
     </devtools-widget>
     <devtools-report-divider></devtools-report-divider>`;
   // clang-format on

package/front_end/panels/application/ReportingApiView.ts

@@ -13,7 +13,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
 
-const {widget, widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -97,7 +97,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
   } else {
     // clang-format off
     render(html`
-      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+      <devtools-widget ${widget(UI.EmptyWidget.EmptyWidget, {
         header: i18nString(UIStrings.noReportOrEndpoint),
         text: i18nString(UIStrings.reportingApiDescription),
         link: REPORTING_API_EXPLANATION_URL,