chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

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/lighthouse/LighthousePanel.ts

@@ -63,6 +63,11 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let lighthousePanelInstace: LighthousePanel;
 type Nullable<T> = T|null;
 
+export class ActiveLighthouseReport {
+  constructor(public report: LighthouseModel.ReporterTypes.ReportJSON) {
+  }
+}
+
 export class LighthousePanel extends UI.Panel.Panel {
   private readonly controller: LighthouseController;
   private readonly startView: StartView;
@@ -108,6 +113,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.renderStartView();
 
     this.controller.recomputePageAuditability();
+    UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, null);
   }
 
   static instance(opts?: {forceNew: boolean, protocolService: ProtocolService, controller: LighthouseController}):
@@ -154,9 +160,11 @@ export class LighthousePanel extends UI.Panel.Panel {
       this.renderStatusView();
       const {lhr, artifacts} = await this.controller.collectLighthouseResults();
       this.buildReportUI(lhr, artifacts);
+      UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, new ActiveLighthouseReport(lhr));
       return {report: lhr};
     } catch (err) {
       this.handleError(err);
+      UI.Context.Context.instance().setFlavor(ActiveLighthouseReport, null);
       return {report: null};
     }
   }

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>

package/front_end/panels/settings/SettingsScreen.ts

@@ -636,7 +636,7 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
               <span>${i18nString(UIStrings.greenDevUnstable)}</span>
              </div>
              <div class="settings-experiments-block">
-               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'copyToGemini', 'breakpointDebuggerAgent'])}
+               ${renderPrototypeCheckboxes(input.settings, ['aiAnnotations', 'copyToGemini', 'breakpointDebuggerAgent', 'emulationCapabilities'])}
              </div>
            </devtools-card>
          </div>
@@ -647,7 +647,8 @@ const GREENDEV_VIEW: View = (input, _output, target) => {
 const GREENDEV_PROTOTYPE_NAMES: Record<keyof GreenDev.GreenDevSettings, string> = {
   aiAnnotations: 'AI auto-annotations',
   copyToGemini: 'Copy changes to AI Prompt',
-  breakpointDebuggerAgent: 'Breakpoint Debugger Agent'
+  breakpointDebuggerAgent: 'Breakpoint Debugger Agent',
+  emulationCapabilities: 'Emulation Capabilities',
 };
 
 function renderPrototypeCheckboxes(

package/front_end/panels/settings/WorkspaceSettingsTab.ts

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

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

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

package/front_end/panels/timeline/components/insights/Cache.ts

@@ -17,7 +17,7 @@ import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.Cache;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class Cache extends BaseInsightComponent<CacheInsightModel> {
   override internalName = 'cache';
@@ -58,15 +58,13 @@ export class Cache extends BaseInsightComponent<CacheInsightModel> {
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget
-          .widgetConfig=${widgetConfig(Table, {
-            data: {
-              insight: this,
-              headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
-              rows,
-            },
-          })}>
-        </devtools-widget>
+        ${widget(Table, {
+          data: {
+            insight: this,
+            headers: [i18nString(UIStrings.requestColumn), i18nString(UIStrings.cacheTTL)],
+            rows,
+          },
+        })}
       </div>`;
     // clang-format on
   }