chrome-devtools-frontend 1.0.1597448 → 1.0.1598808

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -41,7 +41,7 @@ const UIStrings = {
 const str_ =
     i18n.i18n.registerUIStrings('panels/linear_memory_inspector/components/LinearMemoryInspector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 /**
  * If the LinearMemoryInspector only receives a portion
@@ -162,13 +162,12 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @addressinputchanged=${input.onAddressChange}
         @pagenavigation=${input.onNavigatePage}
         @historynavigation=${input.onNavigateHistory}></devtools-linear-memory-inspector-navigator>
-      <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryHighlightChipList, {
+      ${widget(LinearMemoryHighlightChipList, {
         highlightInfos: highlightedMemoryAreas,
         focusedMemoryHighlight,
         jumpToAddress: (address: number) => input.onJumpToAddress(address),
         deleteHighlight: input.onDeleteMemoryHighlight,
-      })}>
-      </devtools-widget>
+      })}
       <devtools-linear-memory-inspector-viewer
         .data=${
       {
@@ -186,7 +185,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
     ${
       input.hideValueInspector ? nothing : html`
     <div class="value-interpreter">
-      <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryValueInterpreter, {
+      ${widget(LinearMemoryValueInterpreter, {
             buffer: input.memory
                        .slice(
                            input.address - input.memoryOffset,
@@ -201,7 +200,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
             onJumpToAddressClicked: input.onJumpToAddress,
             onValueTypeToggled: input.onValueTypeToggled,
             onEndiannessChanged: input.onEndiannessChanged,
-      })}></devtools-widget>
+      })}
     </div>`}
     `,
          target);

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -32,7 +32,7 @@ const str_ =
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export interface ViewInput {
   endianness: Endianness;
@@ -89,14 +89,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
       </div>
       <span class="divider"></span>
       <div>
-        ${input.showSettings ?
-      html`
-            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
-              valueTypes: input.valueTypes, onToggle: input.onValueTypeToggled
-            })}>
-            </devtools-widget>` :
-      html`
-            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
+        ${input.showSettings
+          ? widget(ValueInterpreterSettings, {
+              valueTypes: input.valueTypes, onToggle: input.onValueTypeToggled})
+          : widget(ValueInterpreterDisplay, {
               buffer: input.buffer,
               valueTypes: input.valueTypes,
               endianness: input.endianness,
@@ -104,8 +100,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
               memoryLength: input.memoryLength,
               onValueTypeModeChange: input.onValueTypeModeChange,
               onJumpToAddressClicked: input.onJumpToAddressClicked,
-            })}>
-            </devtools-widget>`}
+            })}
       </div>
     </div>
   `,

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -24,7 +24,7 @@ import * as PanelUtils from '../utils/utils.js';
 import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
 const {ref, live} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -175,7 +175,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${i18nString(UIStrings.addRule)}
       </devtools-button>
     </div>
-    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>
+    <devtools-widget ${widget(UI.Widget.VBox)}>
       ${input.list.element}
     </devtools-widget>
     `,
@@ -271,7 +271,7 @@ function renderItem(
     <devtools-widget
        class=conditions-selector
        title=${i18nString(UIStrings.requestConditionsLabel)}
-       .widgetConfig=${UI.Widget.widgetConfig(
+       ${widget(
          MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
            variant:
              MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
@@ -282,7 +282,7 @@ function renderItem(
          })}></devtools-widget>
     <devtools-widget
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;
+      ${widget(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;
   // clang-format on
 }
 

package/front_end/panels/network/RequestCookiesView.ts

@@ -14,6 +14,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestCookiesViewStyles from './requestCookiesView.css.js';
 const {render, html} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -93,10 +94,8 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
     <style>${requestCookiesViewStyles}</style>
     <style>${UI.inspectorCommonStyles}</style>
     <div class="request-cookies-view">
-      ${input.gotCookies ? Lit.nothing : html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
-          header: i18nString(UIStrings.thisRequestHasNoCookies)})}></devtools-widget>
-      `}
+      ${input.gotCookies ? Lit.nothing : widget(UI.EmptyWidget.EmptyWidget, {
+          header: i18nString(UIStrings.thisRequestHasNoCookies)})}
 
       <div class=${input.requestCookies.cookies.length || input.hasBlockedCookies ? '' : 'hidden'}>
         <span class="request-cookies-title" title=${i18nString(UIStrings.cookiesThatWereSentToTheServerIn)}>
@@ -114,7 +113,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       </div>
 
       ${input.requestCookies.cookies.length > 0 ? html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+        <devtools-widget ${widget(CookieTable.CookiesTable.CookiesTable, {
           cookiesData: input.requestCookies,
           inline: true
         })} class="cookie-table cookies-panel-item"></devtools-widget>
@@ -132,7 +131,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       </div>
 
       ${input.responseCookies.cookies.length ? html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+        <devtools-widget ${widget(CookieTable.CookiesTable.CookiesTable, {
           cookiesData: input.responseCookies,
           inline: true })} class="cookie-table cookies-panel-item"></devtools-widget>
       ` : Lit.nothing}

package/front_end/panels/network/RequestHeadersView.ts

@@ -21,6 +21,7 @@ import * as NetworkComponents from './components/components.js';
 import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {render, html} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -210,8 +211,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           contents: (input.showRequestHeadersText && requestHeadersText) ?
             renderRawHeaders(requestHeadersText) :
             html`
-          <devtools-widget .widgetConfig=${
-            UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
+          <devtools-widget ${widget(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
               request: input.request,
               toReveal: input.toReveal,
             })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
@@ -392,8 +392,8 @@ function renderHeaderOverridesLink(input: ViewInput): Lit.LitTemplate {
 }
 
 function renderRawHeaders(text: string): Lit.TemplateResult {
-  return html`<div class="row raw-headers-row"><devtools-widget  class=raw-headers .widgetConfig=${
-      UI.Widget.widgetConfig(ShowMoreDetailsWidget, {text})}></devtools-widget></div>`;
+  return html`<div class="row raw-headers-row"><devtools-widget  class=raw-headers
+      ${widget(ShowMoreDetailsWidget, {text})}></devtools-widget></div>`;
 }
 
 function renderGeneralRow(

package/front_end/panels/network/RequestInitiatorView.ts

@@ -16,7 +16,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import requestInitiatorViewStyles from './requestInitiatorView.css.js';
 import requestInitiatorViewTreeStyles from './requestInitiatorViewTree.css.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -59,19 +59,21 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     if (!input.stackTrace) {
       return html`${nothing}`;
     }
+    // clang-format off
     return html`
       <li role="treeitem" class="request-initiator-view-section-title" aria-expanded="true" open>
         ${i18nString(UIStrings.requestCallStack)}
         <ul role="group">
           <li role="treeitem">
-            <devtools-widget .widgetConfig=${widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
-      options: {tabStops: true},
-      stackTrace: input.stackTrace,
-    })}></devtools-widget>
+            ${widget(Components.JSPresentationUtils.StackTracePreviewContent, {
+              options: {tabStops: true},
+              stackTrace: input.stackTrace,
+            })}
           </li>
         </ul>
       </li>
     `;
+    // clang-format on
   };
 
   const renderInitiatorNodes =

package/front_end/panels/network/RequestResponseView.ts

@@ -43,43 +43,38 @@ export interface ViewOutput {
   revealPosition: (position: SourceFrame.SourceFrame.RevealPosition) => Promise<void>;
 }
 
-const widgetConfig = UI.Widget.widgetConfig;
-const widgetRef = UI.Widget.widgetRef;
+const {widgetRef, widget} = UI.Widget;
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  let widget;
+  let widgetTemplate;
   if (TextUtils.StreamingContentData.isError(input.contentData)) {
     // clang-format off
-    widget = html`<devtools-widget
-                    .widgetConfig=${widgetConfig(element => new UI.EmptyWidget.EmptyWidget(
+    widgetTemplate = html`${widget(element => new UI.EmptyWidget.EmptyWidget(
                       i18nString(UIStrings.failedToLoadResponseData), (input.contentData as {error: string}).error,
-                      element))}></devtools-widget>`;
+                      element))}`;
     // clang-format on
   } else if (input.request.statusCode === 204 || input.request.failed) {
     // clang-format off
-    widget = html`<devtools-widget
-                     .widgetConfig=${widgetConfig(element => new UI.EmptyWidget.EmptyWidget(
+    widgetTemplate = html`${widget(element => new UI.EmptyWidget.EmptyWidget(
                         i18nString(UIStrings.noPreview), i18nString(UIStrings.thisRequestHasNoResponseData),
-                        element))}></devtools-widget>`;
+                        element))}`;
     // clang-format on
   } else if (input.renderAsText) {
     // clang-format off
-    widget = html`<devtools-widget
-                    .widgetConfig=${widgetConfig(element => new SourceFrame.ResourceSourceFrame.SearchableContainer(
+    widgetTemplate = html`<devtools-widget ${widget(element => new SourceFrame.ResourceSourceFrame.SearchableContainer(
                         input.request, input.mimeType, element))}
                     ${widgetRef(SourceFrame.ResourceSourceFrame.SearchableContainer, widget => {output.revealPosition = widget.revealPosition.bind(widget);})}></devtools-widget>`;
     // clang-format on
   } else {
     // clang-format off
-    widget = html`<devtools-widget
-                    .widgetConfig=${widgetConfig(element => new BinaryResourceView(
+    widgetTemplate = html`${widget(element => new BinaryResourceView(
                       input.contentData as TextUtils.StreamingContentData.StreamingContentData, input.request.url(),
-                      input.request.resourceType(), element))}></devtools-widget>`;
+                      input.request.resourceType(), element))}`;
     // clang-format on
   }
 
-  render(widget, target);
+  render(widgetTemplate, target);
 };
 
 export class RequestResponseView extends UI.Widget.VBox {

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -58,7 +58,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/performance_monitor/PerformanceMonitor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {classMap, ref} = Directives;
 
 interface PerformanceMonitorInput {
@@ -81,7 +81,7 @@ type PerformanceMonitorView = (input: PerformanceMonitorInput, output: Performan
 const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
   // clang-format off
   render(html`
-    <devtools-widget .widgetConfig=${widgetConfig(ControlPane, {
+    <devtools-widget ${widget(ControlPane, {
       onMetricChanged: input.onMetricChanged,
       chartsInfo: input.chartsInfo,
       metrics: input.metrics

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -22,7 +22,7 @@ import {Events as JSONEditorEvents, JSONEditor, type Parameter} from './JSONEdit
 import protocolMonitorStyles from './protocolMonitor.css.js';
 
 const {styleMap} = Directives;
-const {widgetConfig, widgetRef} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 const UIStrings = {
   /**
    * @description Text for one or a group of functions
@@ -303,7 +303,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       </tr>`)}
                   </table>
               </devtools-data-grid>
-              <devtools-widget .widgetConfig=${widgetConfig(InfoWidget, {
+              <devtools-widget ${widget(InfoWidget, {
                     request: input.selectedMessage?.params,
                     response: input.selectedMessage?.result || input.selectedMessage?.error,
                     type: !input.selectedMessage           ? undefined :
@@ -349,7 +349,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
             </devtools-toolbar>
           </div>
           <devtools-widget slot="sidebar"
-              .widgetConfig=${widgetConfig(JSONEditor, { metadataByCommand, typesByName, enumsByName})}
+              ${widget(JSONEditor, { metadataByCommand, typesByName, enumsByName})}
               ${widgetRef(JSONEditor, e => {output.editorWidget = e;})}>
           </devtools-widget>
         </devtools-split-view>`,
@@ -675,7 +675,7 @@ type InfoWidgetView = (input: InfoWidgetViewInput, output: undefined, target: HT
 
 const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
   // clang-format off
-  render(html`<devtools-widget .widgetConfig=${widgetConfig(UI.TabbedPane.TabbedPane, {
+  render(widget(UI.TabbedPane.TabbedPane, {
     tabs: [
       {
         id: 'request',
@@ -696,8 +696,7 @@ const INFO_WIDGET_VIEW: InfoWidgetView = (input, _output, target) => {
             SourceFrame.JSONView.JSONView.createViewSync(input.response || null),
         selected: input.selectedTab === 'response',
       }
-    ]})}>
-  </devtools-widget>`, target);
+    ]}), target);
   // clang-format on
 };
 

package/front_end/panels/recorder/components/RecordingView.ts

@@ -37,6 +37,7 @@ import {
 } from './StepView.js';
 
 const {html} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -525,15 +526,12 @@ function renderReplayOrAbortButton(input: ViewInput): Lit.LitTemplate {
   }
 
   // clang-format off
-    return html`<devtools-widget
-        .widgetConfig=${UI.Widget.widgetConfig(ReplaySection, {
-          settings: input.recorderSettings,
-          replayExtensions: input.replayExtensions,
-          onStartReplay: input.onTogglePlaying,
-          disabled: input.replayState.isPlaying,
-        })}
-        >
-      </devtools-widget>`;
+    return html`${widget(ReplaySection, {
+      settings: input.recorderSettings,
+      replayExtensions: input.replayExtensions,
+      onStartReplay: input.onTogglePlaying,
+      disabled: input.replayState.isPlaying,
+    })}`;
   // clang-format on
 }
 
@@ -571,32 +569,29 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
               </div>
               <div class="content">
                 <div class="steps">
-                  <devtools-widget
-                    .widgetConfig=${UI.Widget.widgetConfig(StepView, {
-                      section,
-                      state: input.getSectionState(section),
-                      isStartOfGroup: true,
-                      isEndOfGroup: section.steps.length === 0,
-                      isFirstSection: i === 0,
-                      isLastSection:
-                        i === input.sections.length - 1 &&
-                        section.steps.length === 0,
-                      isSelected:
-                        input.selectedStep === (section.causingStep || null),
-                      sectionIndex: i,
-                      isRecording: input.isRecording,
-                      isPlaying: input.replayState.isPlaying,
-                      error:
-                        input.getSectionState(section) === State.ERROR
-                          ? (input.currentError ?? undefined)
-                          : undefined,
-                      hasBreakpoint: false,
-                      removable: input.recording.steps.length > 1 && Boolean(section.causingStep),
-                      onStepClick: input.onStepClick,
-                      onStepHover: input.onStepHover,
-                    })}
-                  >
-                  </devtools-widget>
+                  ${widget(StepView, {
+                    section,
+                    state: input.getSectionState(section),
+                    isStartOfGroup: true,
+                    isEndOfGroup: section.steps.length === 0,
+                    isFirstSection: i === 0,
+                    isLastSection:
+                      i === input.sections.length - 1 &&
+                      section.steps.length === 0,
+                    isSelected:
+                      input.selectedStep === (section.causingStep || null),
+                    sectionIndex: i,
+                    isRecording: input.isRecording,
+                    isPlaying: input.replayState.isPlaying,
+                    error:
+                      input.getSectionState(section) === State.ERROR
+                        ? (input.currentError ?? undefined)
+                        : undefined,
+                    hasBreakpoint: false,
+                    removable: input.recording.steps.length > 1 && Boolean(section.causingStep),
+                    onStepClick: input.onStepClick,
+                    onStepHover: input.onStepHover,
+                  })}
                   ${section.steps.map(step => {
                     const stepIndex = input.recording.steps.indexOf(step);
                     return html`
@@ -653,7 +648,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-        // clang-format on
+    // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {

package/front_end/panels/recorder/components/StepEditor.ts

@@ -32,6 +32,7 @@ import {
 const {html, Decorators, Directives, LitElement} = Lit;
 const {customElement, property, state} = Decorators;
 const {live} = Directives;
+const {widget} = UI.Widget;
 
 type StepFor<Type> = Extract<Models.Schema.Step, {type: Type}>;
 type Attribute = Keys<Models.Schema.Step>;
@@ -778,13 +779,11 @@ export class StepEditor extends LitElement {
     return html`<div class="attribute" data-attribute="selectors" jslog=${VisualLogging.treeItem('selectors')}>
       <div class="row">
         <div>selectors<span class="separator">:</span></div>
-        <devtools-widget
-          .widgetConfig=${UI.Widget.widgetConfig(SelectorPicker, {
-            disabled: this.disabled,
-            onSelectorPicked: this.#handleSelectorPicked,
-            onAttributeRequested: this.#handleAttributeRequested,
-          })}
-        ></devtools-widget>
+        ${widget(SelectorPicker, {
+          disabled: this.disabled,
+          onSelectorPicked: this.#handleSelectorPicked,
+          onAttributeRequested: this.#handleAttributeRequested,
+        })}
         ${this.#renderDeleteButton('selectors')}
       </div>
       ${this.state.selectors.map((selector, index, selectors) => {

package/front_end/panels/recorder/components/StepView.ts

@@ -19,6 +19,7 @@ import stepViewStyles from './stepView.css.js';
 import {TimelineSection} from './TimelineSection.js';
 
 const {html} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -396,7 +397,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     html`
     <style>${stepViewStyles}</style>
     <div>
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(TimelineSection, {
+      <devtools-widget ${widget(TimelineSection, {
           isFirstSection: input.isFirstSection,
           isLastSection: input.isLastSection,
           isStartOfGroup: input.isStartOfGroup,

package/front_end/panels/search/SearchView.ts

@@ -107,7 +107,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/search/SearchView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {ref, live} = Directives;
-const {widgetConfig, widgetRef} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 
 export interface SearchViewInput {
   query: string;
@@ -246,13 +246,12 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       </div>
       <div class="search-results" @keydown=${onPanelKeyDown}>
         ${searchResults.length
-           ? html`<devtools-widget .widgetConfig=${widgetConfig(SearchResultsPane, {searchResults, searchConfig})}
+           ? html`<devtools-widget ${widget(SearchResultsPane, {searchResults, searchConfig})}
             ${widgetRef(SearchResultsPane, w => {
               output.showAllMatches = () => void w.showAllMatches();
               output.collapseAllResults = () => void w.collapseAllResults(); })}>
             </devtools-widget>`
-           : html`<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {header, text})}>
-                  </devtools-widget>`}
+           : widget(UI.EmptyWidget.EmptyWidget, {header, text})}
       </div>
       <div class="search-toolbar-summary" @keydown=${onPanelKeyDown}>
         <div class="search-message">${searchMessage}</div>

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -41,6 +41,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/WorkspaceSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export interface WorkspaceSettingsTabInput {
   excludePatternSetting: Common.Settings.RegExpSetting;
@@ -70,11 +71,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <devtools-card heading=${fileSystem.displayName}>
             <devtools-icon name="folder" slot="heading-prefix"></devtools-icon>
             <div class="mapping-view-container">
-              <devtools-widget .widgetConfig=${
-                  UI.Widget.widgetConfig(
-                      EditFileSystemView,
-                      {fileSystem: fileSystem.fileSystem})}>
-              </devtools-widget>
+              ${widget(EditFileSystemView, {fileSystem: fileSystem.fileSystem})}
             </div>
             <devtools-button
               slot="heading-suffix"

package/front_end/panels/timeline/TimelineDetailsView.ts

@@ -72,6 +72,8 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/TimelineDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
+
 export class TimelineDetailsPane extends
     Common.ObjectWrapper.eventMixin<TimelineTreeView.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox) {
   private readonly detailsLinkifier: Components.Linkifier.Linkifier;
@@ -612,8 +614,8 @@ const SUMMARY_DEFAULT_VIEW: View = (input, _output, target) => {
         <style>${detailsViewStyles}</style>
         ${Directives.until(renderSelectedEventDetails(input))}
         ${input.selectedRange ? generateRangeSummaryDetails(input) : nothing}
-        <devtools-widget data-related-insight-chips .widgetConfig=${
-          UI.Widget.widgetConfig(TimelineComponents.RelatedInsightChips.RelatedInsightChips, {
+        <devtools-widget data-related-insight-chips ${widget(
+          TimelineComponents.RelatedInsightChips.RelatedInsightChips, {
             activeEvent: input.selectedEvent,
             eventToInsightsMap: input.eventToRelatedInsightsMap,
           })}></devtools-widget>
@@ -685,8 +687,8 @@ async function renderSelectedEventDetails(
       Trace.Types.Events.isSyntheticLayoutShiftCluster(selectedEvent)) {
     // clang-format off
     return html`
-      <devtools-widget data-layout-shift-details .widgetConfig=${
-        UI.Widget.widgetConfig(TimelineComponents.LayoutShiftDetails.LayoutShiftDetails, {
+      <devtools-widget data-layout-shift-details ${widget(
+        TimelineComponents.LayoutShiftDetails.LayoutShiftDetails, {
           event: selectedEvent,
           parsedTrace: input.parsedTrace,
           isFreshRecording: traceRecordingIsFresh,
@@ -698,8 +700,8 @@ async function renderSelectedEventDetails(
   if (Trace.Types.Events.isSyntheticNetworkRequest(selectedEvent)) {
     // clang-format off
     return html`
-      <devtools-widget data-network-request-details .widgetConfig=${
-        UI.Widget.widgetConfig(TimelineComponents.NetworkRequestDetails.NetworkRequestDetails, {
+      <devtools-widget data-network-request-details ${widget(
+        TimelineComponents.NetworkRequestDetails.NetworkRequestDetails, {
           request: selectedEvent,
           entityMapper: input.entityMapper,
           target: input.target,

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -41,7 +41,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -485,8 +485,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
               <span class="related-info-link">
-               <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}>
-               </devtools-widget>
+               ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}
               </span>
             </div>
           `
@@ -650,7 +649,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-widget .widgetConfig=${widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
+        ${widget(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -1003,8 +1002,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                     : nothing}
                   </span>
                   <span class="interaction-node">
-                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}>
-                    </devtools-widget>
+                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}
                   </span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
@@ -1113,8 +1111,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <div class="layout-shift-nodes">
                 ${layoutShift.affectedNodeRefs.map(node => html`
                   <div class="layout-shift-node">
-                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}>
-                    </devtools-widget>
+                    ${widget(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}
                   </div>
                 `)}
               </div>

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -26,6 +26,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSingleInsightSet.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export interface SidebarSingleInsightSetData {
   insightSetKey: Trace.Types.Events.NavigationId|null;
@@ -62,13 +63,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
     if (!insightSetKey || !parsedTrace) {
       return Lit.nothing;
     }
-    const metricsWidgetConfig = UI.Widget.widgetConfig(CWVMetrics, {
-      data: {
-        insightSetKey,
-        parsedTrace,
-      }
-    });
-    return html`<devtools-widget .widgetConfig=${metricsWidgetConfig}></devtools-widget>`;
+    return html`${widget(CWVMetrics, {data: {insightSetKey, parsedTrace}})}`;
   }
 
   function renderInsights(): Lit.LitTemplate {