chrome-devtools-frontend 1.0.1597448 → 1.0.1598808

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} = 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))}>
@@ -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/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 {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;
@@ -727,28 +725,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} = 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);
@@ -328,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
@@ -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} = 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);
@@ -101,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,

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/PreloadingView.ts

@@ -28,6 +28,7 @@ import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
 const {createRef, ref} = Directives;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -266,7 +267,7 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           <div slot="main" ${ref(this.ruleSetGridContainerRef)}>
           </div>
           <div slot="sidebar" jslog=${VisualLogging.section('rule-set-details')}>
-            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView, {
+            <devtools-widget ${widget(PreloadingComponents.RuleSetDetailsView.RuleSetDetailsView, {
               ruleSet: this.getRuleSet(),
               shouldPrettyPrint: this.shouldPrettyPrint,
             })} ${ref(this.ruleSetDetailsRef)}></devtools-widget>
@@ -448,6 +449,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
       new PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportView();
   private readonly ruleSetSelector: PreloadingRuleSetSelector;
   private readonly textFilterUI: UI.Toolbar.ToolbarFilter;
+  private hsplit?: UI.SplitWidget.SplitWidget;
   private clearButton: UI.Toolbar.ToolbarButton;
 
   constructor(model: SDK.PreloadingModel.PreloadingModel) {
@@ -541,7 +543,12 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
             >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
-        <devtools-split-view sidebar-position="second">
+        <devtools-split-view sidebar-position="second" ${
+            UI.Widget.widgetRef(
+                UI.SplitWidget.SplitWidget,
+                w => {
+                  this.hsplit = w;
+                })}>
           <div slot="main" class="overflow-auto" style="height: 100%">
             ${preloadingGridContainer}
           </div>
@@ -632,7 +639,15 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     this.preloadingGrid.rows = filteredRows;
     this.preloadingGrid.pageURL = pageURL();
     // Only show empty state when there are truly no speculations (not when filter has no matches)
-    this.contentElement.classList.toggle('empty', rows.length === 0);
+    const wasEmpty = this.contentElement.classList.contains('empty');
+    const isEmpty = rows.length === 0;
+    this.contentElement.classList.toggle('empty', isEmpty);
+
+    // When this view starts empty, the split view gets laid out while hidden and collapses
+    // its sidebar to 0. Re-layout once it becomes visible.
+    if (wasEmpty && !isEmpty) {
+      this.hsplit?.doLayout();
+    }
 
     this.updatePreloadingDetails();
   }

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;
@@ -56,32 +58,28 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         <div class=vbox slot="main">
           <devtools-widget
             ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length > 0}
-            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
-                              header: i18nString(UIStrings.noChanges),
-                              text: i18nString(UIStrings.changesViewDescription),
-                              link: CHANGES_VIEW_URL,
-                            })}>
+            ${widget(UI.EmptyWidget.EmptyWidget, {
+                header: i18nString(UIStrings.noChanges),
+                text: i18nString(UIStrings.changesViewDescription),
+                link: CHANGES_VIEW_URL,
+            })}>
           </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"
-              .widgetConfig=${UI.Widget.widgetConfig(PanelsCommon.CopyChangesToPrompt, {
+              ${widget(PanelsCommon.CopyChangesToPrompt, {
                 workspaceDiff: input.workspaceDiff,
                 patchAgentCSSChange: null,
               })}
             ></devtools-widget>
           ` : Lit.nothing}
         </div>
-        <devtools-widget
-          slot="sidebar"
-          .widgetConfig=${UI.Widget.widgetConfig(ChangesSidebar, {
-                           workspaceDiff: input.workspaceDiff
-                         })}
+        <devtools-widget slot="sidebar" ${widget(ChangesSidebar, {workspaceDiff: input.workspaceDiff})}
           ${UI.Widget.widgetRef(ChangesSidebar, onSidebar)}>
         </devtools-widget>
       </devtools-split-view>`,

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

package/front_end/panels/coverage/CoverageView.ts

@@ -127,7 +127,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
 const {ref} = Directives;
 const {bindToAction, bindToSetting} = UI.UIUtils;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 let coverageViewInstance: CoverageView|undefined;
 
@@ -222,7 +222,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               i18nString(UIStrings.bfcacheNoCapture) : i18nString(UIStrings.activationNoCapture),
               input.needsReload)
         : input.coverageInfo ? html`
-          <devtools-widget autofocus class="results" .widgetConfig=${widgetConfig(CoverageListView, {
+          <devtools-widget autofocus class="results" ${widget(CoverageListView, {
               coverageInfo: input.coverageInfo,
               highlightRegExp: input.textFilter,
               selectedUrl: input.selectedUrl,
@@ -242,7 +242,7 @@ function renderLandingPage(supportsRecordOnReload: boolean): TemplateResult {
   if (supportsRecordOnReload) {
     // clang-format off
     return html`
-      <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,{
+      <devtools-widget ${widget(UI.EmptyWidget.EmptyWidget,{
           header: i18nString(UIStrings.noCoverageData),
           link: 'https://developer.chrome.com/docs/devtools/coverage' as Platform.DevToolsPath.UrlString,
           text: i18nString(UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: i18nString(UIStrings.reloadPage)}),
@@ -256,7 +256,7 @@ function renderLandingPage(supportsRecordOnReload: boolean): TemplateResult {
   }
   // clang-format off
   return html`
-    <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,{
+    <devtools-widget ${widget(UI.EmptyWidget.EmptyWidget,{
         header: i18nString(UIStrings.noCoverageData),
         link: 'https://developer.chrome.com/docs/devtools/coverage' as Platform.DevToolsPath.UrlString,
         text: i18nString(UIStrings.clickTheRecordButtonSToStart, {PH1: i18nString(UIStrings.startRecording)}),

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -25,7 +25,7 @@ import {CSSOverviewSidebarPanel} from './CSSOverviewSidebarPanel.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 const {styleMap, ref} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -281,7 +281,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
       <style>${cssOverviewCompletedViewStyles}</style>
       <devtools-split-view direction="column" sidebar-position="first" sidebar-initial-size="200">
-        <devtools-widget slot="sidebar" .widgetConfig=${widgetConfig(CSSOverviewSidebarPanel, {
+        <devtools-widget slot="sidebar" ${widget(CSSOverviewSidebarPanel, {
           minimumSize: new Geometry.Size(100, 25),
           items: [
             {name: i18nString(UIStrings.overviewSummary), id: 'summary'},
@@ -325,7 +325,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               ${renderMediaQueries(input.mediaQueries)}
             </div>
           </div>
-          <devtools-widget slot="sidebar" .widgetConfig=${widgetConfig(e => {
+          <devtools-widget slot="sidebar" ${widget(e => {
               const tabbedPane = new UI.TabbedPane.TabbedPane(e);
               output.closeAllTabs = () => { tabbedPane.closeTabs(tabbedPane.tabIds()); };
               output.addTab = (id: string, tabTitle: string, view: UI.Widget.Widget, jslogContext: string) => {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -6,7 +6,7 @@ import * as Host from '../../core/host/host.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {render} from '../../ui/lit/lit.js';
 
 import {type ContrastIssue, CSSOverviewCompletedView, type OverviewData} from './CSSOverviewCompletedView.js';
 import {CSSOverviewModel, type GlobalStyleStats} from './CSSOverviewModel.js';
@@ -14,7 +14,7 @@ import {CSSOverviewProcessingView} from './CSSOverviewProcessingView.js';
 import {CSSOverviewStartView} from './CSSOverviewStartView.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   state: 'start'|'processing'|'completed';
@@ -28,19 +28,15 @@ interface ViewInput {
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  // clang-format off
-  render(input.state === 'start' ?  html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewStartView, {onStartCapture: input.onStartCapture})}></devtools-widget>`
-    : input.state === 'processing' ?  html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewProcessingView, {onCancel: input.onCancel})}></devtools-widget>`
-    : html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewCompletedView, {
-      onReset: input.onReset,
-      overviewData: input.overviewData,
-      target: input.target,
-    })}></devtools-widget>`,
-    target);
-  // clang-format on
+  render(
+      input.state === 'start'          ? widget(CSSOverviewStartView, {onStartCapture: input.onStartCapture}) :
+          input.state === 'processing' ? widget(CSSOverviewProcessingView, {onCancel: input.onCancel}) :
+                                         widget(CSSOverviewCompletedView, {
+                                           onReset: input.onReset,
+                                           overviewData: input.overviewData,
+                                           target: input.target,
+                                         }),
+      target);
 };
 
 export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {