chrome-devtools-frontend 1.0.1597448 → 1.0.1597624

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 {

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -16,7 +16,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {DeveloperResourcesListView} from './DeveloperResourcesListView.js';
 import developerResourcesViewStyles from './developerResourcesView.css.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
@@ -98,14 +98,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </devtools-toolbar>
       </div>
       <div class="developer-resource-view-results">
-        <devtools-widget
-          .widgetConfig=${widgetConfig(DeveloperResourcesListView, {
+        ${widget(DeveloperResourcesListView, {
             items: input.items,
             selectedItem: input.selectedItem,
             onSelect: input.onSelect,
             filters: input.filters
-          })}>
-        </devtools-widget>
+        })}
       </div>
       <div class="developer-resource-view-toolbar-summary">
         <div class="developer-resource-view-message">

package/front_end/panels/elements/EventListenersWidget.ts

@@ -77,6 +77,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/EventListenersWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 let eventListenersWidgetInstance: EventListenersWidget;
 
 interface ViewInput {
@@ -123,11 +124,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           ${i18nString(UIStrings.frameworkListeners)}
         </devtools-checkbox>
       </devtools-toolbar>
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(EventListeners.EventListenersView.EventListenersView, {
+      ${widget(EventListeners.EventListenersView.EventListenersView, {
         changeCallback: input.onEventListenersViewChange,
         objects: input.eventListenerObjects,
         filter: input.filter,
-      })}></devtools-widget>
+      })}
     </div>`, target);
   // clang-format on
 };

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -63,6 +63,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
   #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
   #view: View;
+  #filter: RegExp|null = null;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -84,6 +85,8 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
 
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
+    await this.#updateSections();
     this.requestUpdate();
   }
 
@@ -127,17 +130,15 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       this.sectionByElement.set(section.element, section);
     }
     this.#sections = newSections;
+    this.#updateFilter();
     this.swatchPopoverHelper().reposition();
   }
 
   override async performUpdate(): Promise<void> {
     this.hideAllPopovers();
-    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
-
-    await this.#updateSections();
 
     const viewInput: ViewInput = {
-      sections: this.#sections,
+      sections: this.#sections.filter(section => !section.isHidden()),
     };
     this.#view(viewInput, undefined, this.contentElement);
     this.#onUpdateFinished();
@@ -147,6 +148,12 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
     this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED);
   }
 
+  #updateFilter(): void {
+    for (const section of this.#sections) {
+      section.updateFilter();
+    }
+  }
+
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
     return this.#swatchPopoverHelper;
   }
@@ -157,6 +164,11 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       return;
     }
     this.#computedStyleModelInternal.node = node;
+  }
+
+  set filter(regex: RegExp|null) {
+    this.#filter = regex;
+    this.#updateFilter();
     this.requestUpdate();
   }
 
@@ -195,7 +207,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   }
 
   filterRegex(): RegExp|null {
-    return null;
+    return this.#filter;
   }
 
   setEditingStyle(editing: boolean): void {
@@ -207,7 +219,10 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   }
 
   forceUpdate(): void {
-    this.requestUpdate();
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
+    void this.#updateSections().then(() => {
+      this.requestUpdate();
+    });
   }
 
   hideAllPopovers(): void {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1024,6 +1024,46 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
   }
 }
 
+// clang-format off
+export class ContrastColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ContrastColorMatch) {
+  // clang-format on
+  readonly #treeElement: StylePropertyTreeElement|null;
+  readonly #stylesContainer: StylesContainer;
+  constructor(stylesContainer: StylesContainer, treeElement: StylePropertyTreeElement|null) {
+    super();
+    this.#treeElement = treeElement;
+    this.#stylesContainer = stylesContainer;
+  }
+
+  override render(match: SDK.CSSPropertyParserMatchers.ContrastColorMatch, context: RenderingContext): Node[] {
+    const content = document.createElement('span');
+    content.appendChild(document.createTextNode('contrast-color('));
+    const param = content.appendChild(document.createElement('span'));
+    content.appendChild(document.createTextNode(')'));
+    Renderer.renderInto(match.color, context, param);
+
+    if (context.matchedResult.hasUnresolvedSubstitutions(match.node)) {
+      return [content];
+    }
+
+    const colorText = context.matchedResult.getComputedText(match.node);
+    const fakeSpan = document.body.appendChild(document.createElement('span'));
+    fakeSpan.style.color = colorText;
+    const resolvedColorText = window.getComputedStyle(fakeSpan).color;
+    fakeSpan.remove();
+
+    const color = Common.Color.parse(resolvedColorText);
+    if (!color) {
+      return [content];
+    }
+
+    const colorSwatch = new ColorRenderer(this.#stylesContainer, this.#treeElement).renderColorSwatch(color, content);
+    context.addControl('color', colorSwatch);
+
+    return [colorSwatch, content];
+  }
+}
+
 // clang-format off
 export class AngleRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.AngleMatch) {
   // clang-format on
@@ -1490,7 +1530,8 @@ export class ShadowRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.S
           properties.push({value, source, propertyType: ShadowPropertyType.INSET, expansionContext});
         } else if (
             match instanceof SDK.CSSPropertyParserMatchers.ColorMatch ||
-            match instanceof SDK.CSSPropertyParserMatchers.ColorMixMatch) {
+            match instanceof SDK.CSSPropertyParserMatchers.ColorMixMatch ||
+            match instanceof SDK.CSSPropertyParserMatchers.ContrastColorMatch) {
           if (properties.find(({propertyType}) => propertyType === ShadowPropertyType.COLOR)) {
             return null;
           }
@@ -1950,6 +1991,7 @@ export function getPropertyRenderers(
     new VariableRenderer(stylesContainer, treeElement, matchedStyles, computedStyles, computedStyleExtraFields),
     new ColorRenderer(stylesContainer, treeElement),
     new ColorMixRenderer(stylesContainer, matchedStyles, computedStyles, computedStyleExtraFields, treeElement),
+    new ContrastColorRenderer(stylesContainer, treeElement),
     new URLRenderer(style.parentRule, stylesContainer.node()),
     new AngleRenderer(treeElement),
     new LinkableNameRenderer(matchedStyles, stylesContainer),
@@ -2024,9 +2066,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.listItemElement.textContent = '';
     }
 
-    this.property.addEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, () => {
-      this.updateTitle();
-    });
+    this.property.addEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, this.updateTitle, this);
+  }
+
+  override onunbind(): void {
+    this.property.removeEventListener(SDK.CSSProperty.Events.LOCAL_VALUE_UPDATED, this.updateTitle, this);
+    super.onunbind();
   }
 
   async gridNames(): Promise<Set<string>> {

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -27,6 +27,7 @@ import {
 import {Events as TransformControllerEvents, TransformController} from './TransformController.js';
 
 const {html, render, Directives: {ref}} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -108,11 +109,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${layers3DViewStyles}
     </style>
     ${input.panelToolbar}
-    ${input.error === 'missing-root' ? html`<div><devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+    ${input.error === 'missing-root' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.noLayerInformation),
       text: i18nString(UIStrings.layerExplanation)
-    })}></devtools-widget></div>` : Lit.nothing}
-    ${input.error === 'webgl-disabled' ? html`<div><devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+    })}</div>` : Lit.nothing}
+    ${input.error === 'webgl-disabled' ? html`<div>${widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.cantDisplayLayers),
       text: i18nString(UIStrings.webglSupportIsDisabledInYour),
       extraElements: [
@@ -123,7 +124,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           }
         )
       ],
-    })}></devtools-widget></div>` : Lit.nothing}
+    })}</div>` : Lit.nothing}
     <canvas
       tabindex="0"
       jslog=${VisualLogging.canvas('layers').track({

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/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)}>

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 {widgetConfig, 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 .widgetConfig=${widgetConfig(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/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, widgetConfig, widgetRef} = UI.Widget;
 const UIStrings = {
   /**
    * @description Text for one or a group of functions
@@ -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/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 {widgetConfig, widget, widgetRef} = UI.Widget;
 
 export interface SearchViewInput {
   query: string;
@@ -251,8 +251,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               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>