chrome-devtools-frontend 1.0.1597448 → 1.0.1598808

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/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/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/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/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/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/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({