chrome-devtools-frontend 1.0.1597448 → 1.0.1597624

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

@@ -13,7 +13,8 @@ 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} from '../../../models/ai_assistance/agents/AiAgent.js';
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, 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';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -101,6 +102,10 @@ const UIStringsNotTranslate = {
    * @description The error message when the LLM gets stuck in a loop (max steps reached).
    */
   maxStepsError: 'Seems like I am stuck with the investigation. It would be better if you start over.',
+  /**
+   * @description The error message when the LLM selects context from a different origin.
+   */
+  crossOriginError: 'I have selected the new context but you will have to start a new chat.',
   /**
    * @description Displayed when the user stop the response
    */
@@ -205,7 +210,12 @@ export interface StepPart {
   step: Step;
 }
 
-export type ModelMessagePart = AnswerPart|StepPart;
+export interface WidgetPart {
+  type: 'widget';
+  widgets: AiWidget[];
+}
+
+export type ModelMessagePart = AnswerPart|StepPart|WidgetPart;
 
 export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
@@ -327,6 +337,9 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           if (part.type === 'answer') {
             return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
           }
+          if (part.type === 'widget') {
+            return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
+          }
           if (!aiAssistanceV2 && part.type === 'step') {
             return renderStep({
               step: part.step,
@@ -602,7 +615,6 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
-  const shouldRenderWidgets = Boolean(step.widgets?.length && Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled);
   const stepClasses = Lit.Directives.classMap({
     step: true,
     empty: !step.thought && !step.code && !step.contextDetails && !step.requestApproval,
@@ -626,11 +638,8 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
       </summary>
       ${renderStepDetails({step, markdownRenderer, isLast})}
     </details>
-    ${shouldRenderWidgets ? html`
-      <div class="step-widgets-wrapper">
-        ${Lit.Directives.until(renderStepWidgets(step))}
-      </div>` : Lit.nothing
-     }`;
+    ${Lit.Directives.until(renderWidgets(step.widgets, {wrapperClass: 'step-widgets-wrapper'}))}
+    `;
   // clang-format on
 }
 
@@ -639,25 +648,31 @@ interface WidgetMakerResponse {
   revealable: unknown;
 }
 
-const computedStyleNodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
+
+async function resolveNode(backendNodeId: Protocol.DOM.BackendNodeId): Promise<SDK.DOMModel.DOMNode|null> {
+  const cachedNode = nodeCache.get(backendNodeId);
+  if (cachedNode) {
+    return cachedNode;
+  }
+
+  const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+  if (!target) {
+    return null;
+  }
+
+  const node = new SDK.DOMModel.DeferredDOMNode(target, backendNodeId);
+  const resolved = await node.resolvePromise();
+  if (resolved) {
+    nodeCache.set(backendNodeId, resolved);
+  }
+  return resolved;
+}
 
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
-  let domNodeForId = computedStyleNodeCache.get(widgetData.data.backendNodeId);
+  const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
   if (!domNodeForId) {
-    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!target) {
-      return null;
-    }
-    const node = new SDK.DOMModel.DeferredDOMNode(
-        target,
-        widgetData.data.backendNodeId,
-    );
-    const resolved = await node.resolvePromise();
-    if (!resolved) {
-      return null;
-    }
-    domNodeForId = resolved;
-    computedStyleNodeCache.set(widgetData.data.backendNodeId, resolved);
+    return null;
   }
   const styles = new ComputedStyle.ComputedStyleModel.ComputedStyle(domNodeForId, widgetData.data.computedStyles);
 
@@ -690,6 +705,27 @@ async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<Wid
   };
 }
 
+async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): Promise<WidgetMakerResponse|null> {
+  const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
+  if (!domNodeForId) {
+    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>`;
+  // clang-format on
+
+  return {renderedWidget: widget, revealable: domNodeForId};
+}
+
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
   if (response === null) {
     return Lit.nothing;
@@ -721,38 +757,43 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 }
 
 /**
- * Renders AI-defined UI widgets within a step.
- * When a ModelChatMessage contains a WidgetPart, the ChatMessage component
- * iterates through the `step.widgets` array. For each widget, it determines
- * the appropriate rendering logic based on the `widgetData.name`.
+ * Renders AI-defined UI widgets.
+ * When a ModelChatMessage contains a WidgetPart, or a Step has widgets,
+ * the ChatMessage component iterates through the \`widgets\` array.
+ * For each widget, it determines the appropriate rendering logic based on
+ * the \`widgetData.name\`.
  *
- * Currently, only 'COMPUTED_STYLES' and 'CORE_VITALS' widgets are supported. For these, the
- * `makeComputedStyleWidget` and `makeCoreVitalsWidget` functions are called to construct the necessary
- * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
- * and `TimelineComponents.CWVMetrics.CWVMetrics`
- * components. The widget is then rendered using the `<devtools-widget>`
- * custom element, which dynamically instantiates and displays the specified
- * UI.Widget subclass with the provided configuration.
+ * Currently, 'COMPUTED_STYLES', 'CORE_VITALS' and 'STYLE_PROPERTIES' widgets are supported.
+ * For these, the corresponding \`make...Widget\` functions are called to construct the necessary
+ * data and configuration for the UI components. The widget is then rendered using the
+ * \`<devtools-widget>\` custom element, which dynamically instantiates and displays the
+ * specified UI.Widget subclass with the provided configuration.
  *
  * This allows for a flexible and extensible system where new widget types
  * can be added to the AI responses and rendered in DevTools by adding
- * corresponding `make...Widget` functions and handling them here.
+ * corresponding \`make...Widget\` functions and handling them here.
  */
-async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
-  if (!step.widgets || step.widgets.length === 0) {
+async function renderWidgets(
+    widgets: AiWidget[]|undefined, options: {wrapperClass?: string} = {}): Promise<Lit.LitTemplate> {
+  if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled || !widgets || widgets.length === 0) {
     return Lit.nothing;
   }
-  const ui = await Promise.all(step.widgets.map(async widgetData => {
+  const ui = await Promise.all(widgets.map(async widgetData => {
+    let response: WidgetMakerResponse|null = null;
     if (widgetData.name === 'COMPUTED_STYLES') {
-      const response = await makeComputedStyleWidget(widgetData);
-      return renderWidgetResponse(response);
-    }
-    if (widgetData.name === 'CORE_VITALS') {
-      const response = await makeCoreVitalsWidget(widgetData);
-      return renderWidgetResponse(response);
+      response = await makeComputedStyleWidget(widgetData);
+    } else if (widgetData.name === 'CORE_VITALS') {
+      response = await makeCoreVitalsWidget(widgetData);
+    } else if (widgetData.name === 'STYLE_PROPERTIES') {
+      response = await makeStylePropertiesWidget(widgetData);
     }
-    return Lit.nothing;
+    return renderWidgetResponse(response);
   }));
+
+  if (options.wrapperClass) {
+    return html`<div class=${options.wrapperClass}>${ui}</div>`;
+  }
+
   return html`${ui}`;
 }
 
@@ -807,6 +848,9 @@ function renderError(message: ModelChatMessage): Lit.LitTemplate {
       case AiAssistanceModel.AiAgent.ErrorType.MAX_STEPS:
         errorMessage = UIStringsNotTranslate.maxStepsError;
         break;
+      case AiAssistanceModel.AiAgent.ErrorType.CROSS_ORIGIN:
+        errorMessage = UIStringsNotTranslate.crossOriginError;
+        break;
       case AiAssistanceModel.AiAgent.ErrorType.ABORT:
         return html`<p class="aborted" jslog=${VisualLogging.section('aborted')}>${
             lockedString(UIStringsNotTranslate.stoppedResponse)}</p>`;

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

@@ -33,16 +33,21 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
     }}>${Platform.StringUtilities.trimEndWithMaxLength(label, 100)}</devtools-link>`;
   }
 
-  #renderLink(href: string): Lit.LitTemplate|null {
+  #renderLink(
+      href: string,
+      fallbackText: string,
+      ): Lit.LitTemplate|null {
     if (href.startsWith('#req-')) {
-      const request =
-          Logs.NetworkLog.NetworkLog.instance().requests().find(req => req.requestId() === href.substring(5));
+      const request = Logs.NetworkLog.NetworkLog.instance().requests().find(
+          req => req.requestId() === href.substring(5),
+      );
 
       if (request) {
         return this.#revealableLink(request, request.url());
       }
-
-    } else if (href.startsWith('#file-')) {
+      return html`${fallbackText}`;
+    }
+    if (href.startsWith('#file-')) {
       const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
           file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
               Number(href.substring(6)));
@@ -50,13 +55,14 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
       if (file) {
         return this.#revealableLink(file, file.name());
       }
+      return html`${fallbackText}`;
     }
     return null;
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
     if (token.type === 'link') {
-      const link = this.#renderLink(token.href);
+      const link = this.#renderLink(token.href, token.text);
       if (link) {
         return link;
       }
@@ -73,9 +79,12 @@ export class MarkdownRendererWithCodeBlock extends MarkdownView.MarkdownView.Mar
     if (token.type === 'codespan') {
       // LLM likes outputting the link inside a codespan block.
       // Remove the codespan and render the link directly
-      const matches = token.text.match(/^\[.*\]\((.+)\)$/);
-      if (matches?.[1]) {
-        const link = this.#renderLink(matches[1]);
+      const matches = token.text.match(/^\[(.*)\]\((.+)\)$/);
+      if (matches?.[2]) {
+        const link = this.#renderLink(
+            matches[2],
+            matches[1],
+        );
         if (link) {
           return link;
         }

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

@@ -354,6 +354,17 @@
     width: fit-content;
   }
 
+  .styling-preview-widget {
+    width: 100%;
+    min-height: 100px;
+  }
+
+  .main-widgets-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-5);
+  }
+
   .step-widgets-wrapper {
     width: fit-content;
     display: flex;

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 {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -1095,12 +1095,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <style>${appManifestViewStyles}</style>
     <style>${UI.inspectorCommonStyles}</style>
-    ${isEmpty ? html`
-    <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+    ${isEmpty ? widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.noManifestDetected),
       text: i18nString(UIStrings.manifestDescription),
       link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString
-    })}></devtools-widget>` : html`
+    }) : html`
     <devtools-report .data=${{reportTitle: i18nString(UIStrings.appManifest), reportUrl: url}}>
       ${renderErrors(warnings, errors, imageErrors, output)}
       ${installabilityErrors?.length ? renderInstallability(installabilityErrors) : nothing}

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -19,7 +19,7 @@ import {
   type SessionAndEvents
 } from './DeviceBoundSessionsModel.js';
 import deviceBoundSessionsViewStyles from './deviceBoundSessionsView.css.js';
-const {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -727,28 +727,24 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         if (!failedRequest) {
           return nothing;
         }
+        // clang-format off
         return html`${failedRequest.requestUrl && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>
-      `}
-      ${failedRequest.netError && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.netError}</devtools-report-value>
-      `}
-      ${
-            failedRequest.responseError !== undefined ? html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.responseError}</devtools-report-value>
-      ` :
-                                                        nothing}
-      ${failedRequest.responseErrorBody && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
-        <devtools-report-value>
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
-          jsonObject: tryParseJson(failedRequest.responseErrorBody),
-        })}></devtools-widget>
-        </devtools-report-value>
-      `}`;
+          <devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>`}
+        ${failedRequest.netError && html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.netError}</devtools-report-value>`}
+        ${failedRequest.responseError !== undefined ? html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.responseError}</devtools-report-value>` : nothing}
+        ${failedRequest.responseErrorBody && html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
+          <devtools-report-value>
+            ${widget(SourceFrame.JSONView.SearchableJsonView, {
+              jsonObject: tryParseJson(failedRequest.responseErrorBody),
+            })}
+          </devtools-report-value>`}`;
+        // clang-format on
       };
 
   const creationEventDetails =

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 {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -297,11 +297,10 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${input.permissionsPolicies ? html`
-          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
+      ${input.permissionsPolicies ?
+          widget(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
              policies: input.permissionsPolicies,
-             showDetails: false})}>
-          </devtools-widget>` : nothing}
+             showDetails: false}) : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);
@@ -434,10 +433,7 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
         <devtools-report-key>${i18nString(UIStrings.ownerElement)}</devtools-report-key>
         <devtools-report-value class="without-min-width">
           <div class="inline-items">
-            <devtools-widget .widgetConfig=${widgetConfig(PanelCommon.DOMLinkifier.DOMNodeLink, {
-              node: linkTargetDOMNode
-            })}>
-            </devtools-widget>
+            ${widget(PanelCommon.DOMLinkifier.DOMNodeLink, {node: linkTargetDOMNode})}
           </div>
         </devtools-report-value>
       `;
@@ -454,9 +450,8 @@ function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTr
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
-              Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
-          </devtools-widget>
+          ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
+                   {stackTrace, options: {expandable: true}})}
         </devtools-report-value>
       `;
     // clang-format on
@@ -524,9 +519,8 @@ function maybeRenderCreatorAdScriptAncestry(
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`<div>
-      <devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
-        target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}>
-      </devtools-widget>
+      ${widget(Components.Linkifier.ScriptLocationLink,
+              {target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}
     </div>`;
     // clang-format on
   });

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -16,7 +16,7 @@ import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
 const {classMap} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -131,8 +131,7 @@ interface TokenField {
 function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): TemplateResult {
   return html`
     <li role="treeitem">
-      <devtools-widget .widgetConfig=${widgetConfig(OriginTrialTokenRows, {data: token})}>
-      </devtools-widget>
+      ${widget(OriginTrialTokenRows, {data: token})}
     </li>`;
 }
 

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 {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -66,34 +66,30 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
         ${input.hasReports ? html`
           <devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
             <div slot="main">
-              <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+              ${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
                 reports: input.reports, onReportSelected: input.onReportSelected,
-              })}></devtools-widget>
+              })}
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
-              ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
-                  jsonObject: input.focusedReport.body,
-                })}></devtools-widget>
-              ` : html`
-                <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
-                  header: i18nString(UIStrings.noReportSelected),
-                  text: i18nString(UIStrings.clickToDisplayBody),
-                })}></devtools-widget>
-              `}
+              ${input.focusedReport
+                  ? widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.focusedReport.body})
+                  : widget(UI.EmptyWidget.EmptyWidget, {
+                      header: i18nString(UIStrings.noReportSelected),
+                      text: i18nString(UIStrings.clickToDisplayBody),
+                    })}
             </div>
           </devtools-split-view>
         ` : html`
           <div slot="main">
-            <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+            ${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
                 reports: input.reports, onReportSelected: input.onReportSelected,
-              })}></devtools-widget>
+              })}
           </div>
         `}
         <div slot="sidebar">
-          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
+          ${widget(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
             endpoints: input.endpoints,
-          })}></devtools-widget>
+          })}
         </div>
       </devtools-split-view>
     `, target);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -147,7 +147,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const enum ScreenStatusType {
   RUNNING = 'Running',
@@ -387,7 +387,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
   const maxLengthForDisplayedURLs = 50;
   const rows = [html`<div>${i18nString(UIStrings.filesPerIssue, {n: details.length})}</div>`];
   rows.push(...details.map(detail => html`
-          <devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
+          ${widget(Components.Linkifier.ScriptLocationLink, {
                              sourceURL: detail.url as Platform.DevToolsPath.UrlString,
                              lineNumber: detail.lineNumber,
                              options: {
@@ -396,7 +396,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
                                inlineFrameIndex: 0,
                                maxLength: maxLengthForDisplayedURLs,
                              }
-                           })}></devtools-widget>`));
+                           })}`));
   return html`
       <div class="details-list">
         <devtools-expandable-list .data=${

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -134,7 +134,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export interface UsedPreloadingViewData {
   pageURL: Platform.DevToolsPath.UrlString;
@@ -270,8 +270,7 @@ function renderMismatchedSections(data: MismatchedData): LitTemplate {
       ${i18nString(UIStrings.preloadedURLs)}
     </devtools-report-section-header>
     <devtools-report-section jslog=${VisualLogging.section('preloaded-urls')}>
-      <devtools-widget .widgetConfig=${widgetConfig(MismatchedPreloadingGrid, {data})}>
-      </devtools-widget>
+      ${widget(MismatchedPreloadingGrid, {data})}
     </devtools-report-section>`;
   // clang-format on
 }

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -107,6 +107,7 @@ const DOM_BREAKPOINT_DOCUMENTATION_URL =
     'https://developer.chrome.com/docs/devtools/javascript/breakpoints#dom' as Platform.DevToolsPath.UrlString;
 
 const {html, render, Directives} = Lit;
+const {widget} = UI.Widget;
 
 export interface Breakpoint {
   breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint;
@@ -169,11 +170,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </ul>` : html
           `<div class="placeholder">
             <div class="gray-info-message">${i18nString(UIStrings.noBreakpoints)}</div>
-            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+            ${widget(UI.EmptyWidget.EmptyWidget, {
               header: i18nString(UIStrings.noBreakpoints),
               text: i18nString(UIStrings.domBreakpointsDescription),
               link: DOM_BREAKPOINT_DOCUMENTATION_URL,
-            })}></devtools-widget>
+            })}
           </div>`}
       </div>
     `,

package/front_end/panels/changes/ChangesView.ts

@@ -34,6 +34,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
+const {widget} = UI.Widget;
+
 interface ViewInput {
   selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
   onSelect(sourceCode: Workspace.UISourceCode.UISourceCode|null): void;
@@ -63,10 +65,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                             })}>
           </devtools-widget>
           <div class=diff-container role=tabpanel ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length === 0}>
-            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CombinedDiffView.CombinedDiffView, {
-                                              selectedFileUrl: input.selectedSourceCode?.url(),
-                                              workspaceDiff: input.workspaceDiff
-                                            })}></devtools-widget>
+            ${widget(CombinedDiffView.CombinedDiffView, {
+                selectedFileUrl: input.selectedSourceCode?.url(),
+                workspaceDiff: input.workspaceDiff
+            })}
           </div>
           ${hasCopyToPrompt ? html`
             <devtools-widget class="copy-to-prompt"

package/front_end/panels/console/ConsolePinPane.ts

@@ -20,6 +20,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import consolePinPaneStyles from './consolePinPane.css.js';
 
 const {createRef, ref} = Directives;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -71,12 +72,11 @@ export const DEFAULT_PANE_VIEW = (input: PaneViewInput, _output: object, target:
   render(html`
     <style>${consolePinPaneStyles}</style>
     <div class='console-pins monospace' jslog=${VisualLogging.pane('console-pins')} @contextmenu=${input.onContextMenu}>
-    ${input.pins.map(pin => html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ConsolePinPresenter, {
+    ${input.pins.map(pin => widget(ConsolePinPresenter, {
           pin,
           focusOut: input.focusOut,
           onRemove: () => input.onRemove(pin),
-        })}></devtools-widget>`
+      })
     )}
     </div>`, target);
   // clang-format on

package/front_end/panels/coverage/CoverageListView.ts

@@ -340,7 +340,7 @@ function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
       </td>
       ${info.sources.length > 0 ? html`
         <td><table>
-          ${ifExpanded(() => html`${repeat(info.sources, source => source.url, source => renderItem(source, input))}`)}
+          ${ifExpanded(html`${repeat(info.sources, source => source.url, source => renderItem(source, input))}`)}
         </table></td>` : nothing}
     </tr>`;
   // clang-format on