chrome-devtools-frontend 1.0.1597624 → 1.0.1598808

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/changes/ChangesView.ts

@@ -58,11 +58,11 @@ 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}>
             ${widget(CombinedDiffView.CombinedDiffView, {
@@ -72,18 +72,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </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/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/elements/ElementsTreeOutline.ts

@@ -137,6 +137,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     target.appendChild(output.elementsTreeOutline.element);
   }
 
+  output.elementsTreeOutline.maxTreeDepth = input.maxTreeDepth;
+  output.elementsTreeOutline.enableContextMenu = input.enableContextMenu ?? true;
+  output.elementsTreeOutline.showComments = input.showComments ?? true;
+  output.elementsTreeOutline.showAIButton = input.showAIButton ?? true;
+  output.elementsTreeOutline.disableEdits = input.disableEdits ?? false;
+  output.elementsTreeOutline.expandRoot = input.expandRoot ?? false;
+
   if (input.visibleWidth !== undefined) {
     output.elementsTreeOutline.setVisibleWidth(input.visibleWidth);
   }
@@ -223,6 +230,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
   #showComments = true;
   #showAIButton = true;
   #disableEdits = false;
+  #expandRoot = false;
   #visible = false;
   #visibleWidth?: number;
   #wrap = false;
@@ -291,6 +299,15 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.performUpdate();
   }
 
+  get expandRoot(): boolean {
+    return this.#expandRoot;
+  }
+
+  set expandRoot(expandRoot: boolean) {
+    this.#expandRoot = expandRoot;
+    this.performUpdate();
+  }
+
   #currentHighlightedNode: SDK.DOMModel.DOMNode|null = null;
 
   #view: View;
@@ -347,11 +364,19 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#viewOutput?.elementsTreeOutline?.highlightNodeAttribute(node, attribute);
   }
 
-  setWordWrap(wrap: boolean): void {
+  get wrap(): boolean {
+    return this.#wrap;
+  }
+
+  set wrap(wrap: boolean) {
     this.#wrap = wrap;
     this.performUpdate();
   }
 
+  setWordWrap(wrap: boolean): void {
+    this.wrap = wrap;
+  }
+
   selectedDOMNode(): SDK.DOMModel.DOMNode|null {
     return this.#viewOutput.elementsTreeOutline?.selectedDOMNode() ?? null;
   }
@@ -387,6 +412,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           showComments: this.#showComments,
           showAIButton: this.#showAIButton,
           disableEdits: this.#disableEdits,
+          expandRoot: this.#expandRoot,
           visibleWidth: this.#visibleWidth,
           visible: this.#visible,
           wrap: this.#wrap,
@@ -565,12 +591,12 @@ export class ElementsTreeOutline extends
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   #popupHelper?: UI.PopoverHelper.PopoverHelper;
   #nodeElementToIssues = new Map<Element, IssuesManager.Issue.Issue[]>();
-  readonly maxTreeDepth?: number;
-  readonly enableContextMenu: boolean;
-  readonly showComments: boolean;
-  readonly showAIButton: boolean;
-  readonly disableEdits: boolean;
-  readonly expandRoot: boolean;
+  maxTreeDepth?: number;
+  enableContextMenu: boolean;
+  showComments: boolean;
+  showAIButton: boolean;
+  disableEdits: boolean;
+  expandRoot: boolean;
 
   constructor(
       omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean, maxTreeDepth?: number,
@@ -1388,7 +1414,7 @@ export class ElementsTreeOutline extends
   }
 
   async showContextMenu(treeElement: ElementsTreeElement, event: Event): Promise<void> {
-    if (UI.UIUtils.isEditing()) {
+    if (UI.UIUtils.isEditing() || !this.enableContextMenu) {
       return;
     }
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -47,6 +47,7 @@ import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import {createIcon, type Icon} from '../../ui/kit/kit.js';
 import type * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -115,6 +116,14 @@ const UIStrings = {
    * @example {(0,0,1)} PH1
    */
   specificity: 'Specificity: {PH1}',
+  /**
+   * @description Accessibility label for the button that expands a collapsed CSS rule in the Styles pane.
+   */
+  expandCollapsedRule: 'Expand collapsed rule',
+  /**
+   * @description Accessibility label for the button that collapses an expanded CSS rule in the Styles pane.
+   */
+  collapseExpandedRule: 'Collapse expanded rule',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylePropertiesSection.ts', UIStrings);
@@ -151,6 +160,8 @@ export class StylePropertiesSection {
   protected readonly selectorRefElement: HTMLElement;
   private hoverableSelectorsMode: boolean;
   #isHidden: boolean;
+  #isCollapsed: boolean;
+  #collapseIcon: Icon|null = null;
   protected customPopulateCallback: () => void;
 
   nestingLevel = 0;
@@ -228,6 +239,25 @@ export class StylePropertiesSection {
     const selectorContainer = document.createElement('div');
     selectorContainer.createChild('span', 'styles-clipboard-only').textContent = indent.repeat(this.nestingLevel);
     selectorContainer.classList.add('selector-container');
+
+    // Collapse/expand toggle icon for rules that can be manually toggled.
+    this.#collapseIcon = createIcon('triangle-right', 'section-collapse-icon');
+    UI.ARIAUtils.markAsButton(this.#collapseIcon);
+    UI.ARIAUtils.setControls(this.#collapseIcon, this.propertiesTreeOutline.element);
+    this.#collapseIcon.tabIndex = 0;
+    this.#collapseIcon.addEventListener('click', (event: Event) => {
+      event.consume(true);
+      this.#toggleCollapsed();
+    });
+    this.#collapseIcon.addEventListener('keydown', (event: KeyboardEvent) => {
+      if (!Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+        return;
+      }
+      event.consume(true);
+      this.#toggleCollapsed();
+    });
+    selectorContainer.appendChild(this.#collapseIcon);
+
     this.selectorElement = document.createElement('span');
     UI.ARIAUtils.setLabel(this.selectorElement, i18nString(UIStrings.cssSelector));
     this.selectorElement.classList.add('selector');
@@ -324,8 +354,10 @@ export class StylePropertiesSection {
     }
     this.hoverableSelectorsMode = false;
     this.#isHidden = false;
+    this.#isCollapsed = false;
     this.markSelectorMatches();
     this.onpopulate();
+    this.#updateCollapsedState();
 
     this.stylesContainer.computedStyleModel().addEventListener(
         ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
@@ -620,9 +652,18 @@ export class StylePropertiesSection {
         keyboardEvent.metaKey) {
       return;
     }
+
+    // Only handle section-level edit shortcuts when the event originated from
+    // the section itself. Child editors dispatch key events that bubble up to
+    // the section, and we must not treat those as section shortcuts.
+    const isSectionLevelShortcut = keyboardEvent.target === this.element;
+
     switch (keyboardEvent.key) {
       case 'Enter':
       case ' ':
+        if (!isSectionLevelShortcut) {
+          return;
+        }
         this.startEditingAtFirstPosition();
         keyboardEvent.consume(true);
         break;
@@ -634,7 +675,7 @@ export class StylePropertiesSection {
         break;
       default:
         // Filter out non-printable key strokes.
-        if (keyboardEvent.key.length === 1) {
+        if (isSectionLevelShortcut && keyboardEvent.key.length === 1) {
           this.addNewBlankProperty(0).startEditingName();
         }
         break;
@@ -1333,6 +1374,82 @@ export class StylePropertiesSection {
     return this.#isHidden;
   }
 
+  /**
+   * Checks whether the section should be collapsed because it does not
+   * contribute any active styles. A section is collapsed when:
+   * - It has no leading properties (empty rule), OR
+   * - All its leading properties have PropertyState.OVERLOADED
+   *
+   * Sections containing only user-disabled properties are NOT collapsed,
+   * since the user intentionally toggled them off and they should remain visible.
+   */
+  #shouldCollapse(): boolean {
+    const style = this.styleInternal;
+    const properties = style.leadingProperties();
+
+    // Never collapse the element's own inline style section.
+    if (style.type === SDK.CSSStyleDeclaration.Type.Inline) {
+      return false;
+    }
+
+    // Empty rule (e.g. from CSS nesting): collapse.
+    if (properties.length === 0) {
+      return true;
+    }
+
+    // If any property is user-disabled (toggled off via checkbox), do not
+    // collapse. The user deliberately disabled them.
+    const hasDisabledProperty = properties.some(p => p.disabled);
+    if (hasDisabledProperty) {
+      return false;
+    }
+
+    // If every property is OVERLOADED, collapse.
+    const allOverloaded =
+        properties.every(p => this.matchedStyles.propertyState(p) === SDK.CSSMatchedStyles.PropertyState.OVERLOADED);
+    return allOverloaded;
+  }
+
+  #updateCollapsedState(): void {
+    const shouldCollapse = this.#shouldCollapse();
+    // Mark as collapsible so the toggle icon is always shown for
+    // sections that can be collapsed, even after manual expansion.
+    this.element.classList.toggle('collapsible', shouldCollapse);
+    this.#setCollapsed(shouldCollapse);
+  }
+
+  #setCollapsed(collapsed: boolean): void {
+    this.#isCollapsed = collapsed;
+    this.element.classList.toggle('collapsed', collapsed);
+    this.propertiesTreeOutline.element.classList.toggle('hidden', collapsed);
+    if (this.#collapseIcon) {
+      this.#collapseIcon.name = collapsed ? 'triangle-right' : 'triangle-down';
+      UI.ARIAUtils.setExpanded(this.#collapseIcon, !collapsed);
+      UI.ARIAUtils.setLabel(
+          this.#collapseIcon,
+          collapsed ? i18nString(UIStrings.expandCollapsedRule) : i18nString(UIStrings.collapseExpandedRule));
+    }
+  }
+
+  #toggleCollapsed(): void {
+    this.#setCollapsed(!this.#isCollapsed);
+  }
+
+  /**
+   * Expand a collapsed section, e.g. when navigating to a property
+   * via a var() link.
+   */
+  expand(): void {
+    if (!this.#isCollapsed) {
+      return;
+    }
+    this.#setCollapsed(false);
+  }
+
+  isCollapsed(): boolean {
+    return this.#isCollapsed;
+  }
+
   markSelectorMatches(): void {
     const rule = this.styleInternal.parentRule;
     if (!rule || !(rule instanceof SDK.CSSRule.CSSStyleRule)) {
@@ -1395,6 +1512,10 @@ export class StylePropertiesSection {
 
   addNewBlankProperty(index: number|undefined = this.propertiesTreeOutline.rootElement().childCount()):
       StylePropertyTreeElement {
+    if (this.#isCollapsed) {
+      this.expand();
+    }
+
     const property = this.styleInternal.newBlankProperty(index);
     const item = new StylePropertyTreeElement({
       stylesContainer: this.stylesContainer,
@@ -1416,6 +1537,13 @@ export class StylePropertiesSection {
   }
 
   private handleEmptySpaceClick(event: Event): void {
+    // If collapsed, clicking anywhere on the section should expand it.
+    if (this.#isCollapsed) {
+      this.#toggleCollapsed();
+      event.consume(true);
+      return;
+    }
+
     // `this.willCauseCancelEditing` is a hacky way to understand whether we should
     // create a new property or not on empty space click.
     // For empty space clicks, the order of events are:

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -24,6 +24,7 @@ export class StylePropertyHighlighter {
     if (!section) {
       return;
     }
+    section.expand();
     section.showAllItems();
     const populatePromises: Array<Promise<void>> = [];
     for (let treeElement = section.propertiesTreeOutline.firstChild(); treeElement;
@@ -57,6 +58,7 @@ export class StylePropertyHighlighter {
       return;
     }
     block.expand(true);
+    section.expand();
     section.showAllItems();
     PanelUtils.highlightElement(section.element);
   }
@@ -78,6 +80,7 @@ export class StylePropertyHighlighter {
         continue;
       }
       block?.expand(true);
+      section.expand();
       section.showAllItems();
       const treeElement = this.findTreeElementFromSection(
           treeElement => treeElement.property.name === propertyName && !treeElement.overloaded(), section);

package/front_end/panels/elements/stylesSidebarPane.css

@@ -94,6 +94,40 @@
     --override-styles-section-text-hover-text-decoration: underline;
     --override-styles-section-text-hover-cursor: default;
   }
+
+  & .section-collapse-icon {
+    width: 12px;
+    height: 12px;
+    margin-right: 2px;
+    margin-left: -2px;
+    vertical-align: middle;
+    cursor: pointer;
+    display: none;
+  }
+
+  &.collapsible .section-collapse-icon {
+    display: inline-block;
+  }
+
+  &.collapsed {
+    opacity: 60%;
+
+    & .style-properties {
+      display: none;
+    }
+
+    & .styles-section-subtitle {
+      display: none;
+    }
+
+    & .sidebar-pane-closing-brace {
+      display: none;
+    }
+
+    & .sidebar-pane-open-brace::after {
+      content: "}";
+    }
+  }
 }
 
 .sidebar-pane-closing-brace {

package/front_end/panels/issues/AffectedSelectivePermissionsInterventionView.ts

@@ -42,6 +42,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/issues/AffectedSelectivePermissionsInterventionView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {widget} = UI.Widget;
 
 export class AffectedSelectivePermissionsInterventionView extends AffectedResourcesView {
   readonly #linkifier = new Components.Linkifier.Linkifier();
@@ -103,13 +104,10 @@ export class AffectedSelectivePermissionsInterventionView extends AffectedResour
     const debuggerWorkspaceBinding = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance();
     const stackTraceTranslated =
         await debuggerWorkspaceBinding.createStackTraceFromProtocolRuntime(stackTrace, issuesModel.target());
-    return html`
-      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(Components.JSPresentationUtils.StackTracePreviewContent, {
+    return html`${widget(Components.JSPresentationUtils.StackTracePreviewContent, {
       stackTrace: stackTraceTranslated,
       options: {expandable: true},
-    })}>
-      </devtools-widget>
-    `;
+    })}`;
   }
 
   update(): void {

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -20,6 +20,7 @@ import {
 } from './LayerViewHost.js';
 
 const {html, nothing} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -157,7 +158,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   if (!layer) {
     // clang-format off
     Lit.render(html`<div class="layer-details-container">
-      <devtools-widget class="learn-more" .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+      <devtools-widget class="learn-more" ${widget(UI.EmptyWidget.EmptyWidget, {
         header: i18nString(UIStrings.noLayerSelected),
         text: i18nString(UIStrings.selectALayerToSeeItsDetails)})}>
       </devtools-widget>

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

@@ -113,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>
@@ -131,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/RequestResponseView.ts

@@ -43,7 +43,7 @@ export interface ViewOutput {
   revealPosition: (position: SourceFrame.SourceFrame.RevealPosition) => Promise<void>;
 }
 
-const {widgetConfig, widgetRef, widget} = UI.Widget;
+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 => {
@@ -62,7 +62,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target:
     // clang-format on
   } else if (input.renderAsText) {
     // clang-format off
-    widgetTemplate = 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