chrome-devtools-frontend 1.0.1545096 → 1.0.1547147

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -161,6 +161,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   featurePromotionId: 'ai-assistance',
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
@@ -176,6 +177,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -191,6 +193,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -206,6 +209,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -221,6 +225,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -236,6 +241,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -251,6 +257,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();
@@ -265,6 +272,7 @@ UI.ActionRegistration.registerActionExtension({
   },
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: titleForAiAssistanceActions,
+  configurableBindings: false,
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -698,7 +698,7 @@ function renderStep({step, isLoading, markdownRenderer, isLast}: {
 }): Lit.LitTemplate {
   const stepClasses = Lit.Directives.classMap({
     step: true,
-    empty: !step.thought && !step.code && !step.contextDetails,
+    empty: !step.thought && !step.code && !step.contextDetails && !step.sideEffect,
     paused: Boolean(step.sideEffect),
     canceled: Boolean(step.canceled),
   });
@@ -884,7 +884,7 @@ function renderChatMessage({
 }
 
 function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitTemplate {
-  if (inlineData.data === AiAssistanceModel.AiHistoryStorage.NOT_FOUND_IMAGE_DATA) {
+  if (inlineData.data === AiAssistanceModel.AiConversation.NOT_FOUND_IMAGE_DATA) {
     // clang-format off
     return html`<div class="unavailable-image" title=${UIStringsNotTranslate.imageUnavailable}>
       <devtools-icon name='file-image'></devtools-icon>

package/front_end/panels/animation/AnimationTimeline.ts

@@ -508,14 +508,6 @@ export class AnimationTimeline extends UI.Widget.VBox implements
   }
 
   private setPlaybackRate(playbackRate: number): void {
-    if (playbackRate !== this.#playbackRate) {
-      Host.userMetrics.animationPlaybackRateChanged(
-          playbackRate === 0.1      ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_10 :
-              playbackRate === 0.25 ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_25 :
-              playbackRate === 1    ? Host.UserMetrics.AnimationsPlaybackRate.PERCENT_100 :
-                                      Host.UserMetrics.AnimationsPlaybackRate.OTHER);
-    }
-
     this.#playbackRate = playbackRate;
     for (const animationModel of SDK.TargetManager.TargetManager.instance().models(
              SDK.AnimationModel.AnimationModel, {scoped: true})) {

package/front_end/panels/application/FrameDetailsView.ts

@@ -453,14 +453,14 @@ function maybeRenderCreationStacktrace(
       return html`
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
-        <devtools-report-value
-        jslog=${VisualLogging.section('frame-creation-stack-trace')}
-        >
-          <devtools-resources-stack-trace .data=${{
-            creationStackTraceData,
-            buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace,
-          } as ApplicationComponents.StackTrace.StackTraceData}>
-          </devtools-resources-stack-trace>
+        <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
+          <devtools-widget .widgetConfig=${widgetConfig(
+            ApplicationComponents.StackTrace.StackTrace, { data: {
+              creationStackTraceData,
+              buildStackTraceRows: Components.JSPresentationUtils.buildStackTraceRowsForLegacyRuntimeStackTrace }
+            }
+          )}>
+          </devtools-widget>
         </devtools-report-value>
       `;
     // clang-format on

package/front_end/panels/application/components/StackTrace.ts

@@ -9,13 +9,14 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import * as UI from '../../../ui/legacy/legacy.js';
+import {html, nothing, render, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import stackTraceLinkButtonStyles from './stackTraceLinkButton.css.js';
 import stackTraceRowStyles from './stackTraceRow.css.js';
 
-const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -54,89 +55,95 @@ export interface StackTraceData {
       ) => Array<Components.JSPresentationUtils.StackTraceRegularRow|Components.JSPresentationUtils.StackTraceAsyncRow>;
 }
 
-interface StackTraceRowData {
-  stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow;
+interface StackTraceRowViewInput {
+  stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null;
 }
 
-export class StackTraceRow extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null = null;
-
-  set data(data: StackTraceRowData) {
-    this.#stackTraceRowItem = data.stackTraceRowItem;
-    this.#render();
+type StackTraceRowView = (input: StackTraceRowViewInput, output: undefined, target: HTMLElement) => void;
+const ROW_DEFAULT_VIEW: StackTraceRowView = (input, output, target) => {
+  if (!input.stackTraceRowItem) {
+    return;
+  }
+  // clang-format off
+  render(html`
+    <style>${stackTraceRowStyles}</style>
+    <div class="stack-trace-row">
+      <div class="stack-trace-function-name text-ellipsis" title=${input.stackTraceRowItem.functionName}>
+        ${input.stackTraceRowItem.functionName}
+      </div>
+      <div class="stack-trace-source-location">
+        ${input.stackTraceRowItem.link ? html`
+          <div class="text-ellipsis">\xA0@\xA0${input.stackTraceRowItem.link}</div>` :
+          nothing}
+        </div>
+      </div>`, target);
+  // clang-format on
+};
+
+export class StackTraceRow extends UI.Widget.Widget {
+  constructor(element?: HTMLElement, view = ROW_DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #render(): void {
-    if (!this.#stackTraceRowItem) {
-      return;
-    }
-    Lit.render(
-        html`
-      <style>${stackTraceRowStyles}</style>
-      <div class="stack-trace-row">
-              <div class="stack-trace-function-name text-ellipsis" title=${this.#stackTraceRowItem.functionName}>
-                ${this.#stackTraceRowItem.functionName}
-              </div>
-              <div class="stack-trace-source-location">
-                ${
-            this.#stackTraceRowItem.link ?
-                html`<div class="text-ellipsis">\xA0@\xA0${this.#stackTraceRowItem.link}</div>` :
-                Lit.nothing}
-              </div>
-            </div>
-    `,
-        this.#shadow, {host: this});
+  stackTraceRowItem: Components.JSPresentationUtils.StackTraceRegularRow|null = null;
+  #view: StackTraceRowView;
+
+  override performUpdate(): void {
+    this.#view(this, undefined, this.contentElement);
   }
 }
 
-interface StackTraceLinkButtonData {
+interface StackTraceLinkViewInput {
   onShowAllClick: () => void;
-  hiddenCallFramesCount: number;
+  hiddenCallFramesCount: number|null;
   expandedView: boolean;
 }
 
-export class StackTraceLinkButton extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #onShowAllClick: () => void = () => {};
-  #hiddenCallFramesCount: number|null = null;
-  #expandedView = false;
-
-  set data(data: StackTraceLinkButtonData) {
-    this.#onShowAllClick = data.onShowAllClick;
-    this.#hiddenCallFramesCount = data.hiddenCallFramesCount;
-    this.#expandedView = data.expandedView;
-    this.#render();
+type StackTraceLinkView = (input: StackTraceLinkViewInput, output: undefined, target: HTMLElement) => void;
+const LINK_DEFAULT_VIEW: StackTraceLinkView = (input, output, target) => {
+  if (!input.hiddenCallFramesCount) {
+    return;
+  }
+  const linkText = input.expandedView ? i18nString(UIStrings.showLess) :
+                                        i18nString(UIStrings.showSMoreFrames, {n: input.hiddenCallFramesCount});
+  // clang-format off
+  render(html`
+    <style>${stackTraceLinkButtonStyles}</style>
+    <div class="stack-trace-row">
+      <button class="link" @click=${() => input.onShowAllClick()}>
+        ${linkText}
+      </button>
+    </div>`, target);
+  // clang-format on
+};
+
+export class StackTraceLinkButton extends UI.Widget.Widget {
+  onShowAllClick: () => void = () => {};
+  hiddenCallFramesCount: number|null = null;
+  expandedView = false;
+  #view: StackTraceLinkView;
+
+  constructor(element?: HTMLElement, view = LINK_DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #render(): void {
-    if (!this.#hiddenCallFramesCount) {
-      return;
-    }
-    const linkText = this.#expandedView ? i18nString(UIStrings.showLess) :
-                                          i18nString(UIStrings.showSMoreFrames, {n: this.#hiddenCallFramesCount});
-    Lit.render(
-        html`
-      <style>${stackTraceLinkButtonStyles}</style>
-      <div class="stack-trace-row">
-          <button class="link" @click=${() => this.#onShowAllClick()}>
-            ${linkText}
-          </button>
-        </div>
-    `,
-        this.#shadow, {host: this});
+  override performUpdate(): void {
+    this.#view(this, undefined, this.contentElement);
   }
 }
 
-export class StackTrace extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class StackTrace extends UI.Widget.Widget {
   readonly #linkifier = new Components.Linkifier.Linkifier();
   #stackTraceRows:
       Array<Components.JSPresentationUtils.StackTraceRegularRow|Components.JSPresentationUtils.StackTraceAsyncRow> = [];
   #showHidden = false;
 
+  constructor(element?: HTMLElement) {
+    super(element, {useShadowDom: true});
+  }
+
   set data(data: StackTraceData) {
     const {creationStackTrace, creationStackTraceTarget} = data.creationStackTraceData;
     if (creationStackTrace) {
@@ -160,7 +167,7 @@ export class StackTrace extends HTMLElement {
     this.#render();
   }
 
-  createRowTemplates(): Lit.TemplateResult[] {
+  createRowTemplates(): TemplateResult[] {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
     for (const item of this.#stackTraceRows) {
@@ -176,9 +183,9 @@ export class StackTrace extends HTMLElement {
       if (this.#showHidden || !ignoreListHide) {
         if ('functionName' in item) {
           expandableRows.push(html`
-          <devtools-stack-trace-row data-stack-trace-row .data=${{
-            stackTraceRowItem: item,
-          }}></devtools-stack-trace-row>`);
+          <devtools-widget data-stack-trace-row .widgetConfig=${widgetConfig(StackTraceRow, {
+            stackTraceRowItem: item
+          })}></devtools-widget>`);
         }
         if ('asyncDescription' in item) {
           expandableRows.push(html`
@@ -194,7 +201,11 @@ export class StackTrace extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       expandableRows.push(html`
-      <devtools-stack-trace-link-button data-stack-trace-row .data=${{onShowAllClick: this.#onToggleShowAllClick.bind(this), hiddenCallFramesCount, expandedView: this.#showHidden}}></devtools-stack-trace-link-button>
+        <devtools-widget data-stack-trace-row .widgetConfig=${widgetConfig(StackTraceLinkButton, {
+          onShowAllClick: this.#onToggleShowAllClick.bind(this),
+          hiddenCallFramesCount,
+          expandedView: this.#showHidden})}>
+        </devtools-widget>
       `);
       // clang-format on
     }
@@ -206,34 +217,22 @@ export class StackTrace extends HTMLElement {
     if (!this.#stackTraceRows.length) {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
-      Lit.render(
+      render(
         html`
           <span>${i18nString(UIStrings.cannotRenderStackTrace)}</span>
         `,
-        this.#shadow, {host: this});
+        this.contentElement, {host: this});
       return;
     }
 
     const expandableRows = this.createRowTemplates();
-    Lit.render(
+    render(
       html`
         <devtools-expandable-list .data=${{rows: expandableRows, title: i18nString(UIStrings.creationStackTrace)}}
                                   jslog=${VisualLogging.tree()}>
         </devtools-expandable-list>
       `,
-      this.#shadow, {host: this});
+      this.contentElement, {host: this});
     // clang-format on
   }
 }
-
-customElements.define('devtools-stack-trace-row', StackTraceRow);
-customElements.define('devtools-stack-trace-link-button', StackTraceLinkButton);
-customElements.define('devtools-resources-stack-trace', StackTrace);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-stack-trace-row': StackTraceRow;
-    'devtools-stack-trace-link-button': StackTraceLinkButton;
-    'devtools-resources-stack-trace': StackTrace;
-  }
-}

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -0,0 +1,80 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../core/host/host.js';
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Text for teaser to generate code.
+   */
+  ctrlItoGenerateCode: 'ctrl-i to generate code',
+  /**
+   * @description Text for teaser to generate code in Mac.
+   */
+  cmdItoGenerateCode: 'cmd-i to generate code',
+  /**
+   * Text for teaser when generating suggestion.
+   */
+  generating: 'Generating... (esc to cancel)',
+} as const;
+
+const lockedString = i18n.i18n.lockedString;
+
+export interface ViewInput {
+  loading: boolean;
+}
+
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
+                                                 lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+  const teaserLabel = input.loading ? lockedString(UIStringsNotTranslate.generating) : toGenerateCode;
+  // clang-format off
+  render(
+        html`
+          <div class="ai-code-generation-teaser">
+            &nbsp;${teaserLabel}
+          </div>
+        `, target
+      );
+  // clang-format on
+};
+
+export class AiCodeGenerationTeaser extends UI.Widget.Widget {
+  readonly #view: View;
+
+  #loading = false;
+
+  constructor(view?: View) {
+    super();
+    this.markAsExternallyManaged();
+    this.#view = view ?? DEFAULT_VIEW;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const output = {};
+    this.#view(
+        {
+          loading: this.#loading,
+        },
+        output, this.contentElement);
+  }
+
+  get loading(): boolean {
+    return this.#loading;
+  }
+
+  set loading(loading: boolean) {
+    if (loading === this.#loading) {
+      return;
+    }
+    this.#loading = loading;
+    this.requestUpdate();
+  }
+}

package/front_end/panels/common/common.ts

@@ -69,7 +69,7 @@ export class TypeToAllowDialog {
           UI.UIUtils.createTextButton(i18nString(UIStrings.cancel), () => resolve(false), {jslogContext: 'cancel'});
 
       const allowButton = UI.UIUtils.createTextButton(i18nString(UIStrings.allow), () => {
-        resolve(input.value === options.typePhrase);
+        resolve(input.value === options.typePhrase || input.value === `'${options.typePhrase}'`);
       }, {jslogContext: 'confirm', variant: Buttons.Button.Variant.PRIMARY});
       allowButton.disabled = true;
 
@@ -95,6 +95,7 @@ export class TypeToAllowDialog {
 }
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
+export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';

package/front_end/panels/console/ConsolePrompt.ts

@@ -448,7 +448,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private async handleEnter(forceEvaluate?: boolean): Promise<void> {
-    if (this.#selfXssWarningShown && this.text() === i18nString(UIStrings.allowPasting)) {
+    if (this.#selfXssWarningShown &&
+        (this.text() === i18nString(UIStrings.allowPasting) ||
+         this.text() === `'${i18nString(UIStrings.allowPasting)}'`)) {
       Common.Console.Console.instance().log(this.text());
       this.editor.dispatch({
         changes: {from: 0, to: this.editor.state.doc.length},

package/front_end/panels/console/ConsoleViewport.ts

@@ -215,8 +215,7 @@ export class ConsoleViewport {
   private updateFocusedItem(focusLastChild?: boolean): void {
     const selectedElement = this.renderedElementAt(this.virtualSelectedIndex);
     const changed = this.lastSelectedElement !== selectedElement;
-    const containerHasFocus =
-        this.#contentElement === Platform.DOMUtilities.deepActiveElement(this.element.ownerDocument);
+    const containerHasFocus = this.#contentElement === UI.DOMUtilities.deepActiveElement(this.element.ownerDocument);
     if (this.lastSelectedElement && changed) {
       this.lastSelectedElement.classList.remove('console-selected');
     }

package/front_end/panels/elements/ElementIssueUtils.ts

@@ -124,11 +124,11 @@ function getTooltipFromGenericIssue(errorType: Protocol.Audits.GenericIssueError
       return i18nString(UIStrings.formAutocompleteAttributeEmptyError);
     case Protocol.Audits.GenericIssueErrorType.FormEmptyIdAndNameAttributesForInputError:
       return i18nString(UIStrings.formEmptyIdAndNameAttributesForInputError);
-    case Protocol.Audits.GenericIssueErrorType.FormAriaLabelledByToNonExistingId:
+    case Protocol.Audits.GenericIssueErrorType.FormAriaLabelledByToNonExistingIdError:
       return i18nString(UIStrings.formAriaLabelledByToNonExistingId);
     case Protocol.Audits.GenericIssueErrorType.FormInputAssignedAutocompleteValueToIdOrNameAttributeError:
       return i18nString(UIStrings.formInputAssignedAutocompleteValueToIdOrNameAttributeError);
-    case Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInput:
+    case Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInputError:
       return i18nString(UIStrings.formLabelHasNeitherForNorNestedInput);
     case Protocol.Audits.GenericIssueErrorType.FormLabelForMatchesNonExistingIdError:
       return i18nString(UIStrings.formLabelForMatchesNonExistingIdError);

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1610,9 +1610,8 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
     valueElement.tabIndex = -1;
     valueElement.textContent = match.text;
 
-    if (!context.tracing) {
-      void this.#attachPopover(valueElement, match, context);
-    }
+    const tooltip = this.#getTooltip(valueElement, match, context);
+
     const evaluation = context.tracing?.applyEvaluation([], () => {
       return {
         placeholder: [valueElement],
@@ -1620,7 +1619,11 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
       };
     });
 
-    return evaluation ?? [valueElement];
+    if (evaluation) {
+      return evaluation;
+    }
+
+    return tooltip ? [valueElement, tooltip] : [valueElement];
   }
 
   async #applyEvaluation(
@@ -1635,25 +1638,26 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
     return false;
   }
 
-  async #attachPopover(
-      valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
-    const pixelValue = await resolveValues(this.#stylesPane, this.#propertyName, match, context, match.text);
-    if (!pixelValue) {
-      return;
-    }
-
+  #getTooltip(valueElement: HTMLElement, match: SDK.CSSPropertyParser.Match, context: RenderingContext):
+      Tooltips.Tooltip.Tooltip|undefined {
     const tooltipId = this.#treeElement?.getTooltipId('length');
-    if (tooltipId) {
-      valueElement.setAttribute('aria-details', tooltipId);
-      const tooltip = new Tooltips.Tooltip.Tooltip(
-          {anchor: valueElement, variant: 'rich', id: tooltipId, jslogContext: 'length-popover'});
-      tooltip.appendChild(document.createTextNode(pixelValue[0]));
-      valueElement.insertAdjacentElement('afterend', tooltip);
+    if (!tooltipId) {
+      return undefined;
     }
-    this.popOverAttachedForTest();
+    valueElement.setAttribute('aria-details', tooltipId);
+    const tooltip = new Tooltips.Tooltip.Tooltip(
+        {anchor: valueElement, variant: 'rich', id: tooltipId, jslogContext: 'length-popover'});
+    tooltip.addEventListener('beforetoggle', () => this.getTooltipValue(tooltip, match, context), {once: true});
+    return tooltip;
   }
 
-  popOverAttachedForTest(): void {
+  async getTooltipValue(
+      tooltip: Tooltips.Tooltip.Tooltip, match: SDK.CSSPropertyParser.Match, context: RenderingContext): Promise<void> {
+    const pixelValue = await resolveValues(this.#stylesPane, this.#propertyName, match, context, match.text);
+    if (!pixelValue) {
+      return;
+    }
+    tooltip.appendChild(document.createTextNode(pixelValue[0]));
   }
 }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -370,7 +370,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   }
 
   private sectionsContainerKeyDown(event: Event): void {
-    const activeElement = Platform.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);
+    const activeElement = UI.DOMUtilities.deepActiveElement(this.sectionsContainer.contentElement.ownerDocument);
     if (!activeElement) {
       return;
     }

package/front_end/panels/elements/cssValueTraceView.css

@@ -85,6 +85,6 @@
   }
 }
 
-::highlight(css-value-tracing) {
+:host::highlight(css-value-tracing) {
   background-color: var(--sys-color-tonal-container);
 }

package/front_end/panels/elements/elements-meta.ts

@@ -454,6 +454,7 @@ UI.ActionRegistration.registerActionExtension({
       platform: UI.ActionRegistration.Platforms.MAC,
     },
   ],
+  configurableBindings: false,
 });
 
 UI.ActionRegistration.registerActionExtension({