chrome-devtools-frontend 1.0.1539972 → 1.0.1541169

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

@@ -190,15 +190,22 @@ export const DEFAULT_VIEW: (input: ViewInput, output: object, target: HTMLElemen
       // clang-format on
     };
 
+function findInsightSet(insightSets: Trace.Insights.Types.TraceInsightSets|null, navigationId: string|undefined):
+    Trace.Insights.Types.InsightSet|undefined {
+  return insightSets?.values().find(
+      insightSet =>
+          navigationId ? navigationId === insightSet.navigation?.args.data?.navigationId : !insightSet.navigation);
+}
+
 function renderLayoutShiftDetails(
-    layoutShift: Trace.Types.Events.SyntheticLayoutShift, traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
+    layoutShift: Trace.Types.Events.SyntheticLayoutShift, insightSets: Trace.Insights.Types.TraceInsightSets|null,
     parsedTrace: Trace.TraceModel.ParsedTrace, isFreshRecording: boolean,
     onEventClick: (e: Trace.Types.Events.Event) => void): Lit.LitTemplate {
-  if (!traceInsightsSets) {
+  if (!insightSets) {
     return Lit.nothing;
   }
-  const insightsId = layoutShift.args.data?.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
-  const clsInsight = traceInsightsSets.get(insightsId)?.model.CLSCulprits;
+
+  const clsInsight = findInsightSet(insightSets, layoutShift.args.data?.navigationId)?.model.CLSCulprits;
   if (!clsInsight || clsInsight instanceof Error) {
     return Lit.nothing;
   }
@@ -242,14 +249,13 @@ function renderLayoutShiftDetails(
 }
 
 function renderLayoutShiftClusterDetails(
-    cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
-    traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null, parsedTrace: Trace.TraceModel.ParsedTrace,
-    onEventClick: (e: Trace.Types.Events.Event) => void): Lit.LitTemplate {
-  if (!traceInsightsSets) {
+    cluster: Trace.Types.Events.SyntheticLayoutShiftCluster, insightSets: Trace.Insights.Types.TraceInsightSets|null,
+    parsedTrace: Trace.TraceModel.ParsedTrace, onEventClick: (e: Trace.Types.Events.Event) => void): Lit.LitTemplate {
+  if (!insightSets) {
     return Lit.nothing;
   }
-  const insightsId = cluster.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
-  const clsInsight = traceInsightsSets.get(insightsId)?.model.CLSCulprits;
+
+  const clsInsight = findInsightSet(insightSets, cluster.navigationId)?.model.CLSCulprits;
   if (!clsInsight || clsInsight instanceof Error) {
     return Lit.nothing;
   }

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

@@ -437,6 +437,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
 
       const agentFocus = AIAssistance.AIContext.AgentFocus.fromInsight(this.#data.parsedTrace, model);
       // clang-format off
+      /* eslint-disable lit/binding-positions,lit/no-invalid-html */
       return html`<div>
         <${componentClass.litTagName}
           .selected=${this.#data.activeInsight?.model === model}
@@ -452,6 +453,7 @@ export class SidebarSingleInsightSet extends HTMLElement {
           .fieldMetrics=${fieldMetrics}>
         </${componentClass.litTagName}>
       </div>`;
+      /* eslint-enable lit/binding-positions,lit/no-invalid-html */
       // clang-format on
     };
 

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: def2721bfd5abbc4b522b2bca7fd80ec3d55b81a
+Revision: 33096dd334d53eb095e196b5663cc1921f646cae
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -239,6 +239,7 @@ export class MarkdownLitRenderer {
       case 'code':
         return this.renderCodeBlock(token);
       case 'space':
+        // eslint-disable-next-line lit/prefer-nothing
         return html``;
       case 'link':
         return html`<devtools-markdown-link

package/front_end/ui/components/snackbars/Snackbars.docs.ts

@@ -0,0 +1,46 @@
+// 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 {Snackbar} from './snackbars.js';
+
+export async function render(container: HTMLElement) {
+  const onActionClick = (): void => {
+    // eslint-disable-next-line no-console
+    console.log('Action button clicked!');
+  };
+
+  const showButton1 = document.createElement('button');
+  showButton1.textContent = 'Show Long Action Snackbar';
+  showButton1.addEventListener('click', () => {
+    Snackbar.Snackbar.show(
+        {
+          message: 'This is a snackbar demonstrating a long action and closable state.',
+          closable: true,
+          actionProperties: {
+            label: 'This is a long action button',
+            title: 'Click here to perform the designated action',
+            onClick: onActionClick,
+          },
+        },
+        container);
+  });
+  container.appendChild(showButton1);
+
+  const showButton2 = document.createElement('button');
+  showButton2.textContent = 'Show Action Snackbar';
+  showButton2.addEventListener('click', () => {
+    Snackbar.Snackbar.show(
+        {
+          message: 'This is a snackbar demonstrating an action and closable state.',
+          closable: true,
+          actionProperties: {
+            label: 'Action',
+            title: 'Click here to perform the designated action',
+            onClick: onActionClick,
+          },
+        },
+        container);
+  });
+  container.appendChild(showButton2);
+}

package/front_end/ui/{components/docs/context_menu/basic.ts → legacy/ContextMenu.docs.ts}

@@ -2,23 +2,44 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as UI from '../../../legacy/legacy.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
+import * as Lit from '../lit/lit.js';
+
+import {ContextMenu} from './legacy.js';
 
 const {html} = Lit;
 
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
+export async function render(container: HTMLElement) {
+  const style = document.createElement('style');
+  style.textContent = `
+      #container > div {
+        width: var(--sys-size-34);
+        padding: var(--sys-size-11);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sys-size-5);
+        background-color: var(--sys-color-neutral-container);
+        border-radius: var(--sys-shape-corner-medium);
+        text-align: center;
+
+        p {
+          vertical-align: middle;
+        }
+      }
+    `;
+  container.appendChild(style);
+
+  const menuButtonSection = document.createElement('div');
+  const menuButtonHeader = document.createElement('header');
+  menuButtonHeader.textContent = 'DevTools menu button (lit-html)';
+  container.appendChild(menuButtonHeader);
+  container.appendChild(menuButtonSection);
 
-{
-  const menuButtonSection = document.querySelector('#menu-button') as HTMLElement;
   Lit.render(
       html`
     <devtools-menu-button
       icon-name="bin"
-      .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
+      .populateMenuCall=${(menu: ContextMenu.ContextMenu) => {
         menu.defaultSection().appendItem('Item', () => {
           alert('Item clicked');
         }, {jslogContext: 'item'});
@@ -27,15 +48,19 @@ await FrontendHelpers.initializeGlobalVars();
     ></devtools-menu-button>
 `,
       menuButtonSection);
-}
 
-{
+  const simpleItemsSection = document.createElement('div');
+  simpleItemsSection.innerHTML = '<p>Right-click here</p>';
+  const simpleItemsHeader = document.createElement('header');
+  simpleItemsHeader.textContent = 'Various simple menu items (imperative API)';
+  container.appendChild(simpleItemsHeader);
+  container.appendChild(simpleItemsSection);
+
   let checked = true;
-  const simpleItemMenuSection = document.querySelector('#simple-items');
-  simpleItemMenuSection?.addEventListener('contextmenu', onSimpleMenu.bind(this));
+  simpleItemsSection.addEventListener('contextmenu', onSimpleMenu);
 
   function onSimpleMenu(event: Event) {
-    const simpleMenu = new UI.ContextMenu.ContextMenu(event);
+    const simpleMenu = new ContextMenu.ContextMenu(event);
 
     // Regular item
     simpleMenu.defaultSection().appendItem('Regular item', () => {
@@ -63,14 +88,18 @@ await FrontendHelpers.initializeGlobalVars();
 
     void simpleMenu.show();
   }
-}
 
-{
-  const customSectionMenuSection = document.querySelector('#custom-section');
-  customSectionMenuSection?.addEventListener('contextmenu', onCustomSectionMenu.bind(this));
+  const customSection = document.createElement('div');
+  customSection.innerHTML = '<p>Right-click here</p>';
+  const customSectionHeader = document.createElement('header');
+  customSectionHeader.textContent = 'Custom sections (imperative API)';
+  container.appendChild(customSectionHeader);
+  container.appendChild(customSection);
+
+  customSection.addEventListener('contextmenu', onCustomSectionMenu);
 
   function onCustomSectionMenu(event: Event) {
-    const customSectionMenu = new UI.ContextMenu.ContextMenu(event);
+    const customSectionMenu = new ContextMenu.ContextMenu(event);
 
     // First custom section
     const customSection = customSectionMenu.section('Custom section');
@@ -83,14 +112,18 @@ await FrontendHelpers.initializeGlobalVars();
 
     void customSectionMenu.show();
   }
-}
 
-{
-  const subMenuSection = document.querySelector('#sub-menu');
-  subMenuSection?.addEventListener('contextmenu', onCustomSectionMenu.bind(this));
+  const subMenuSection = document.createElement('div');
+  subMenuSection.innerHTML = '<p>Right-click here</p>';
+  const subMenuHeader = document.createElement('header');
+  subMenuHeader.textContent = 'Sub menu (imperative API)';
+  container.appendChild(subMenuHeader);
+  container.appendChild(subMenuSection);
 
-  function onCustomSectionMenu(event: Event) {
-    const subMenuMenu = new UI.ContextMenu.ContextMenu(event);
+  subMenuSection.addEventListener('contextmenu', onSubMenu);
+
+  function onSubMenu(event: Event) {
+    const subMenuMenu = new ContextMenu.ContextMenu(event);
 
     const subMenu =
         subMenuMenu.defaultSection().appendSubMenuItem('Item to open sub menu', /* disabled */ false, 'my-sub-menu');

package/front_end/ui/legacy/UIUtils.ts

@@ -1820,7 +1820,8 @@ export const isScrolledToBottom = (element: Element): boolean => {
   return Math.abs(element.scrollTop + element.clientHeight - element.scrollHeight) <= 2;
 };
 
-export function createSVGChild(element: Element, childType: string, className?: string): Element {
+export function createSVGChild<K extends keyof SVGElementTagNameMap>(
+    element: Element, childType: K, className?: string): SVGElementTagNameMap[K] {
   const child = element.ownerDocument.createElementNS('http://www.w3.org/2000/svg', childType);
   if (className) {
     child.setAttribute('class', className);

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -147,7 +147,7 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     return category;
   }
 
-  private createPresetModifyIcon(parentElement: Element, className: string, drawPath: string): Element {
+  private createPresetModifyIcon(parentElement: Element, className: string, drawPath: string): SVGElement {
     const icon = UI.UIUtils.createSVGChild(parentElement, 'svg', 'bezier-preset-modify ' + className);
     icon.setAttribute('width', '20');
     icon.setAttribute('height', '20');

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -39,6 +39,7 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
 import * as TextEditor from '../../../components/text_editor/text_editor.js';
+import {Directives, html, render} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 import type * as Components from '../utils/utils.js';
@@ -49,6 +50,7 @@ import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
 import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 
+const {ifDefined} = Directives;
 const UIStrings = {
   /**
    * @description Text in Object Properties Section
@@ -397,7 +399,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(titleElement, {cssFile: objectValueStyles});
     const propertyValue =
         ObjectPropertiesSection.createPropertyValue(object, /* wasThrown */ false, /* showPreview */ true);
-    shadowRoot.appendChild(propertyValue.element);
+    shadowRoot.appendChild(propertyValue);
     const objectPropertiesSection = new ObjectPropertiesSection(object, titleElement, linkifier);
     objectPropertiesSection.editable = false;
     if (skipProto) {
@@ -477,7 +479,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   static valueElementForFunctionDescription(description?: string, includePreview?: boolean, defaultName?: string):
-      Element {
+      HTMLElement {
     const valueElement = document.createElement('span');
     valueElement.classList.add('object-value-function');
     description = description || '';
@@ -560,12 +562,11 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValueWithCustomSupport(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
-      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty?: boolean,
-      variableName?: string): ObjectPropertyValue {
+      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty?: boolean, variableName?: string): HTMLElement {
     if (value.customPreview()) {
       const result = (new CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
-      return new ObjectPropertyValue(result);
+      return result;
     }
     return ObjectPropertiesSection.createPropertyValue(
         value, wasThrown, showPreview, linkifier, isSyntheticProperty, variableName);
@@ -600,9 +601,8 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValue(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean,
-      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false,
-      variableName?: string): ObjectPropertyValue {
-    let propertyValue;
+      linkifier?: Components.Linkifier.Linkifier, isSyntheticProperty = false, variableName?: string): HTMLElement {
+    let propertyValue: HTMLElement;
     const type = value.type;
     const subtype = value.subtype;
     const description = value.description || '';
@@ -611,31 +611,31 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const rawLocation = value.debuggerModel().createRawLocationByScriptId(
           value.value.scriptId, value.value.lineNumber, value.value.columnNumber);
       if (rawLocation && linkifier) {
-        return new ObjectPropertyValue(linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString));
+        return linkifier.linkifyRawLocation(rawLocation, Platform.DevToolsPath.EmptyUrlString);
       }
-      propertyValue = new ObjectPropertyValue(createUnknownInternalLocationElement());
+      propertyValue = createUnknownInternalLocationElement();
     } else if (type === 'string' && typeof description === 'string') {
       propertyValue = createStringElement();
     } else if (type === 'object' && subtype === 'trustedtype') {
       propertyValue = createTrustedTypeElement();
     } else if (type === 'function') {
-      propertyValue = new ObjectPropertyValue(ObjectPropertiesSection.valueElementForFunctionDescription(description));
+      propertyValue = ObjectPropertiesSection.valueElementForFunctionDescription(description);
     } else if (type === 'object' && subtype === 'node' && description) {
-      propertyValue = new ObjectPropertyValue(createNodeElement());
+      propertyValue = createNodeElement();
     } else {
       const valueElement = document.createElement('span');
       valueElement.classList.add('object-value-' + (subtype || type));
       if (value.preview && showPreview) {
         const previewFormatter = new RemoteObjectPreviewFormatter();
         previewFormatter.appendObjectPreview(valueElement, value.preview, false /* isEntry */);
-        propertyValue = new ObjectPropertyValue(valueElement);
-        UI.Tooltip.Tooltip.install(propertyValue.element as HTMLElement, description || '');
+        propertyValue = valueElement;
+        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description || '');
       } else if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, description, EXPANDABLE_MAX_LENGTH);
+        propertyValue = new ExpandableTextPropertyValue(valueElement, description, EXPANDABLE_MAX_LENGTH).element;
       } else {
-        propertyValue = new ObjectPropertyValue(valueElement);
-        propertyValue.element.textContent = description;
-        UI.Tooltip.Tooltip.install(propertyValue.element as HTMLElement, description);
+        propertyValue = valueElement;
+        propertyValue.textContent = description;
+        UI.Tooltip.Tooltip.install(propertyValue as HTMLElement, description);
       }
       if (!isSyntheticProperty) {
         this.appendMemoryIcon(valueElement, value, variableName);
@@ -646,54 +646,53 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const wrapperElement = document.createElement('span');
       wrapperElement.classList.add('error');
       wrapperElement.classList.add('value');
-      wrapperElement.appendChild(
-          uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue.element}));
-      propertyValue.element = wrapperElement;
+      wrapperElement.appendChild(uiI18n.getFormatLocalizedString(str_, UIStrings.exceptionS, {PH1: propertyValue}));
+      propertyValue = wrapperElement;
     }
-    propertyValue.element.classList.add('value');
+    propertyValue.classList.add('value');
     return propertyValue;
 
-    function createUnknownInternalLocationElement(): Element {
+    function createUnknownInternalLocationElement(): HTMLElement {
       const valueElement = document.createElement('span');
       valueElement.textContent = '<' + i18nString(UIStrings.unknown) + '>';
       UI.Tooltip.Tooltip.install(valueElement, description || '');
       return valueElement;
     }
 
-    function createStringElement(): ObjectPropertyValue {
+    function createStringElement(): HTMLElement {
       const valueElement = document.createElement('span');
       valueElement.classList.add('object-value-string');
       const text = JSON.stringify(description);
-      let propertyValue;
+      let propertyValue: HTMLElement;
       if (description.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH);
+        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
       } else {
         UI.UIUtils.createTextChild(valueElement, text);
-        propertyValue = new ObjectPropertyValue(valueElement);
+        propertyValue = valueElement;
         UI.Tooltip.Tooltip.install(valueElement, description);
       }
       return propertyValue;
     }
 
-    function createTrustedTypeElement(): ObjectPropertyValue {
+    function createTrustedTypeElement(): HTMLElement {
       const valueElement = document.createElement('span');
       valueElement.classList.add('object-value-trustedtype');
       const text = `${className} "${description}"`;
       let propertyValue;
       if (text.length > maxRenderableStringLength) {
-        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH);
+        propertyValue = new ExpandableTextPropertyValue(valueElement, text, EXPANDABLE_MAX_LENGTH).element;
       } else {
         const contentString = createStringElement();
         UI.UIUtils.createTextChild(valueElement, `${className} `);
-        valueElement.appendChild(contentString.element);
-        propertyValue = new ObjectPropertyValue(valueElement);
+        valueElement.appendChild(contentString);
+        propertyValue = valueElement;
         UI.Tooltip.Tooltip.install(valueElement, text);
       }
 
       return propertyValue;
     }
 
-    function createNodeElement(): Element {
+    function createNodeElement(): HTMLElement {
       const valueElement = document.createElement('span');
       valueElement.classList.add('object-value-node');
       createSpansForNodeTitle(valueElement, (description));
@@ -896,7 +895,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   readOnly!: boolean;
   private prompt!: ObjectPropertyPrompt|undefined;
   private editableDiv!: HTMLElement;
-  propertyValue?: ObjectPropertyValue;
+  propertyValue?: HTMLElement;
   expandedValueElement?: Element|null;
   constructor(property: ObjectTreeNode, linkifier?: Components.Linkifier.Linkifier) {
     // Pass an empty title, the title gets made later in onattach.
@@ -1202,7 +1201,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
           this.property.object, this.property.property.wasThrown, showPreview, this.linkifier,
           this.property.property.synthetic, this.path() /* variableName */);
-      this.valueElement = (this.propertyValue.element as HTMLElement);
+      this.valueElement = this.propertyValue;
     } else if (this.property.property.getter) {
       this.valueElement = document.createElement('span');
       const element = this.valueElement.createChild('span');
@@ -1285,7 +1284,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private contextMenuFired(event: Event): void {
+  getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.appendApplicableItems(this);
     if (this.property.property.symbol) {
@@ -1318,9 +1317,11 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
           i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this),
           {jslogContext: 'collapse-children'});
     }
-    if (this.propertyValue) {
-      this.propertyValue.appendApplicableItems(event, contextMenu, {});
-    }
+    return contextMenu;
+  }
+
+  private contextMenuFired(event: Event): void {
+    const contextMenu = this.getContextMenu(event);
     void contextMenu.show();
   }
 
@@ -1773,74 +1774,86 @@ export class Renderer implements UI.UIUtils.Renderer {
   }
 }
 
-export class ObjectPropertyValue implements UI.ContextMenu.Provider<Object> {
-  element: Element;
-  constructor(element: Element) {
-    this.element = element;
-  }
-
-  appendApplicableItems(_event: Event, _contextMenu: UI.ContextMenu.ContextMenu, _object: Object): void {
-  }
-}
-
-export class ExpandableTextPropertyValue extends ObjectPropertyValue {
+export class ExpandableTextPropertyValue {
   private readonly text: string;
   private readonly maxLength: number;
-  private expandElement: Element|null;
   private readonly maxDisplayableTextLength: number;
-  private readonly expandElementText: Common.UIString.LocalizedString|undefined;
-  private readonly copyButtonText: Common.UIString.LocalizedString;
-  constructor(element: Element, text: string, maxLength: number) {
-    // abbreviated text and expandable text controls are added as children to element
-    super(element);
-    const container = element.createChild('span');
+  readonly #byteCount: number;
+  #expanded = false;
+  #element: HTMLElement;
+
+  constructor(element: HTMLElement, text: string, maxLength: number) {
+    this.#element = element;
     this.text = text;
     this.maxLength = maxLength;
-    container.textContent = text.slice(0, maxLength);
-    UI.Tooltip.Tooltip.install(container as HTMLElement, `${text.slice(0, maxLength)}…`);
-
-    this.expandElement = container.createChild('button');
     this.maxDisplayableTextLength = 10000000;
+    this.#byteCount = Platform.StringUtilities.countWtf8Bytes(text);
+    this.#render();
+  }
 
-    const byteCount = Platform.StringUtilities.countWtf8Bytes(text);
-    const totalBytesText = i18n.ByteUtilities.bytesToString(byteCount);
-    if (this.text.length < this.maxDisplayableTextLength) {
-      this.expandElementText = i18nString(UIStrings.showMoreS, {PH1: totalBytesText});
-      this.expandElement.setAttribute('data-text', this.expandElementText);
-      this.expandElement.setAttribute('jslog', `${VisualLogging.action('expand').track({click: true})}`);
-      this.expandElement.classList.add('expandable-inline-button');
-      this.expandElement.addEventListener('click', this.expandText.bind(this));
-    } else {
-      this.expandElement.setAttribute('data-text', i18nString(UIStrings.longTextWasTruncatedS, {PH1: totalBytesText}));
-      this.expandElement.classList.add('undisplayable-text');
-    }
-
-    this.copyButtonText = i18nString(UIStrings.copy);
-    const copyButton = container.createChild('button', 'expandable-inline-button');
-    copyButton.setAttribute('data-text', this.copyButtonText);
-    copyButton.setAttribute('jslog', `${VisualLogging.action('copy').track({click: true})}`);
-    copyButton.addEventListener('click', this.copyText.bind(this));
+  get element(): HTMLElement {
+    return this.#element;
   }
 
-  override appendApplicableItems(_event: Event, contextMenu: UI.ContextMenu.ContextMenu, _object: Object): void {
-    if (this.text.length < this.maxDisplayableTextLength && this.expandElement) {
+  #render(): void {
+    const totalBytesText = i18n.ByteUtilities.bytesToString(this.#byteCount);
+    const onContextMenu = (e: Event): void => {
+      const {target} = e;
+      if (!(target instanceof Element)) {
+        return;
+      }
+      const listItem = target.closest('li');
+      const element = listItem && UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(listItem);
+      if (!(element instanceof ObjectPropertyTreeElement)) {
+        return;
+      }
+      const contextMenu = element.getContextMenu(e);
+      if (this.text.length < this.maxDisplayableTextLength && !this.#expanded) {
+        contextMenu.clipboardSection().appendItem(
+            i18nString(UIStrings.showMoreS, {PH1: totalBytesText}), this.expandText.bind(this),
+            {jslogContext: 'show-more'});
+      }
       contextMenu.clipboardSection().appendItem(
-          this.expandElementText || '', this.expandText.bind(this), {jslogContext: 'show-more'});
-    }
-    contextMenu.clipboardSection().appendItem(this.copyButtonText, this.copyText.bind(this), {jslogContext: 'copy'});
+          i18nString(UIStrings.copy), this.copyText.bind(this), {jslogContext: 'copy'});
+      void contextMenu.show();
+      e.consume(true);
+    };
+
+    const croppedText = this.text.slice(0, this.maxLength);
+
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+        // clang-format off
+        html`<span title=${croppedText + '…'} @contextmenu=${onContextMenu}>
+               ${this.#expanded ? this.text : croppedText}
+               <button
+                 ?hidden=${this.#expanded}
+                 @click=${this.#canExpand ? this.expandText.bind(this) : undefined}
+                 jslog=${ifDefined(this.#canExpand ? VisualLogging.action('expand').track({click: true}) : undefined)}
+                 class=${this.#canExpand ? 'expandable-inline-button' : 'undisplayable-text'}
+                 data-text=${this.#canExpand ? i18nString(UIStrings.showMoreS, {PH1: totalBytesText}) :
+                                           i18nString(UIStrings.longTextWasTruncatedS, {PH1: totalBytesText})}
+                 ></button>
+               <button
+                 class=expandable-inline-button
+                 @click=${this.copyText.bind(this)}
+                 data-text=${i18nString(UIStrings.copy)}
+                 jslog=${VisualLogging.action('copy').track({click: true})}
+                 ></button>
+             </span>`,
+        // clang-format on
+        this.#element);
+  }
+
+  get #canExpand(): boolean {
+    return this.text.length < this.maxDisplayableTextLength;
   }
 
   private expandText(): void {
-    if (!this.expandElement) {
-      return;
-    }
-
-    if (this.expandElement.parentElement) {
-      this.expandElement.parentElement.insertBefore(
-          document.createTextNode(this.text.slice(this.maxLength)), this.expandElement);
+    if (!this.#expanded) {
+      this.#expanded = true;
+      this.#render();
     }
-    this.expandElement.remove();
-    this.expandElement = null;
   }
 
   private copyText(): void {

package/front_end/ui/legacy/components/perf_ui/TimelineOverviewPane.ts

@@ -337,7 +337,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
   #initializeDimHighlightSVG(): void {
     // Set up the desaturation mask
     const defs = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'defs');
-    const mask = UI.UIUtils.createSVGChild(defs, 'mask') as SVGMaskElement;
+    const mask = UI.UIUtils.createSVGChild(defs, 'mask');
     mask.id = 'dim-highlight-cutouts';
     /* Within the mask...
         - black fill = punch, fully transparently, through to the next thing. these are the cutouts to the color.
@@ -357,7 +357,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
     // `mask` element.
     // The `mixBlendMode` is set to 'saturation', so this rectangle will completely desaturate the area it covers
     // within the mask.
-    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background') as SVGRectElement;
+    const desaturateRect = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'rect', 'background');
     desaturateRect.setAttribute('width', '100%');
     desaturateRect.setAttribute('height', '100%');
     desaturateRect.setAttribute('fill', ThemeSupport.ThemeSupport.instance().getComputedValue('--color-background'));
@@ -374,7 +374,7 @@ export class TimelineOverviewPane extends Common.ObjectWrapper.eventMixin<EventT
 
     // This polygon is for the bracket beyond the not desaturated area.
     const bracketColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--sys-color-state-on-header-hover');
-    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon') as SVGRectElement;
+    const bracket = UI.UIUtils.createSVGChild(this.#dimHighlightSVG, 'polygon');
     bracket.setAttribute('fill', bracketColor);
 
     ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {