chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

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 = {
   /**
@@ -40,7 +41,10 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/components/StackTra
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface StackTraceData {
-  frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  creationStackTraceData: {
+    creationStackTrace: Protocol.Runtime.StackTrace|null,
+    creationStackTraceTarget: SDK.Target.Target|null,
+  };
   buildStackTraceRows: (
       stackTrace: Protocol.Runtime.StackTrace,
       target: SDK.Target.Target|null,
@@ -51,92 +55,97 @@ 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 frame = data.frame;
-    const {creationStackTrace, creationStackTraceTarget} = frame.getCreationStackTraceData();
+    const {creationStackTrace, creationStackTraceTarget} = data.creationStackTraceData;
     if (creationStackTrace) {
       this.#stackTraceRows = data.buildStackTraceRows(
           creationStackTrace, creationStackTraceTarget, this.#linkifier, true,
@@ -158,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) {
@@ -174,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`
@@ -192,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
     }
@@ -204,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/application/components/components.ts

@@ -5,9 +5,8 @@
 import * as BackForwardCacheView from './BackForwardCacheView.js';
 import * as BounceTrackingMitigationsView from './BounceTrackingMitigationsView.js';
 import * as EndpointsGrid from './EndpointsGrid.js';
-import * as FrameDetailsView from './FrameDetailsView.js';
 import * as InterestGroupAccessGrid from './InterestGroupAccessGrid.js';
-import * as OriginTrialTreeView from './OriginTrialTreeView.js';
+import * as PermissionsPolicySection from './PermissionsPolicySection.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
@@ -21,9 +20,8 @@ export {
   BackForwardCacheView,
   BounceTrackingMitigationsView,
   EndpointsGrid,
-  FrameDetailsView,
   InterestGroupAccessGrid,
-  OriginTrialTreeView,
+  PermissionsPolicySection,
   ProtocolHandlersView,
   ReportsGrid,
   ServiceWorkerRouterView,

package/front_end/panels/application/{components/frameDetailsReportView.css → frameDetailsReportView.css}

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: auto;
+}
+
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -111,4 +115,4 @@ button.text-link {
     color: linktext;
     text-decoration-color: linktext;
   }
-}
+}

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/BadgeNotification.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -290,7 +291,7 @@ export class BadgeNotification extends UI.Widget.Widget {
           label: i18nString(UIStrings.viewProfile),
           jslogContext: 'view-profile',
           onClick: () => {
-            UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
+            UIHelpers.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
         }
       ],

package/front_end/panels/common/DOMLinkifier.ts

@@ -24,7 +24,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/common/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface Options extends Common.Linkifier.Options {
+export interface Options {
+  tooltip?: string;
+  preventKeyboardFocus?: boolean;
+  textContent?: string;
+  // Dynamic links include hyperlinks and anchorlinks -- links that navigate the content.
+  isDynamicLink?: boolean;
   hiddenClassList?: string[];
   disabled?: boolean;
 }
@@ -236,7 +241,7 @@ export class DeferredDOMNodeLink extends UI.Widget.Widget {
 
 let linkifierInstance: Linkifier;
 
-export class Linkifier implements Common.Linkifier.Linkifier {
+export class Linkifier {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): Linkifier {

package/front_end/panels/common/GdpSignUpDialog.ts

@@ -12,6 +12,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * as Switch from '../../ui/components/switch/switch.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -168,7 +169,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           .title=${i18nString(UIStrings.learnMoreAccessibleText)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'learn-more'}
-          @click=${() => UI.UIUtils.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
+          @click=${() => UIHelpers.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
         <div class="right-buttons">
           <devtools-button
             .variant=${Buttons.Button.Variant.TONAL}

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/ElementStatePaneWidget.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -108,7 +109,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
-            @click=${() => UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
+            @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
            .data=${{
               variant: Buttons.Button.Variant.ICON,
               iconName: 'help',

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -839,7 +839,7 @@ export class StylePropertiesSection {
 
       this.#ancestorRuleListElement.prepend(atRuleElement);
       this.#ancestorClosingBracesElement.prepend(this.indentElement(this.createClosingBrace(), 0));
-      this.nestingLevel++;
+      this.nestingLevel = 1;
     }
   }
 

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

@@ -7,7 +7,6 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type * as PanelsCommon from '../common/common.js';
 
 import type * as Elements from './elements.js';
 
@@ -178,14 +177,6 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (elementsModul
   return getClassCallBack(loadedElementsModule);
 }
 
-let loadedPanelsCommonModule: (typeof PanelsCommon|undefined);
-async function loadPanelsCommonModule(): Promise<typeof PanelsCommon> {
-  if (!loadedPanelsCommonModule) {
-    loadedPanelsCommonModule = await import('../common/common.js');
-  }
-  return loadedPanelsCommonModule;
-}
-
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'elements',
@@ -463,6 +454,7 @@ UI.ActionRegistration.registerActionExtension({
       platform: UI.ActionRegistration.Platforms.MAC,
     },
   ],
+  configurableBindings: false,
 });
 
 UI.ActionRegistration.registerActionExtension({
@@ -698,16 +690,3 @@ UI.UIUtils.registerRenderer({
     return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
   },
 });
-
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return [
-      SDK.DOMModel.DOMNode,
-      SDK.DOMModel.DeferredDOMNode,
-    ];
-  },
-  async loadLinkifier() {
-    const PanelsCommon = await loadPanelsCommonModule();
-    return PanelsCommon.DOMLinkifier.Linkifier.instance();
-  },
-});