chrome-devtools-frontend 1.0.1539972 → 1.0.1541552

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
@@ -318,6 +320,7 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
 }
 
 export class ObjectTreeNode extends ObjectTreeNodeBase {
+  #path?: string;
   constructor(
       readonly property: SDK.RemoteObject.RemoteObjectProperty,
       propertiesMode: ObjectPropertiesMode = ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
@@ -334,6 +337,31 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
     return this.property.name;
   }
 
+  get path(): string {
+    if (!this.#path) {
+      if (this.property.synthetic) {
+        this.#path = this.name;
+        return this.name;
+      }
+
+      // https://tc39.es/ecma262/#prod-IdentifierName
+      const useDotNotation = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;
+      const isInteger = /^(?:0|[1-9]\d*)$/;
+
+      const parentPath =
+          (this.parent instanceof ObjectTreeNode && !this.parent.property.synthetic) ? this.parent.path : '';
+
+      if (this.property.private || useDotNotation.test(this.name)) {
+        this.#path = parentPath ? `${parentPath}.${this.name}` : this.name;
+      } else if (isInteger.test(this.name)) {
+        this.#path = `${parentPath}[${this.name}]`;
+      } else {
+        this.#path = `${parentPath}[${JSON.stringify(this.name)}]`;
+      }
+    }
+    return this.#path;
+  }
+
   override selfOrParentIfInternal(): ObjectTreeNodeBase {
     return this.name === '[[Prototype]]' ? (this.parent ?? this) : this;
   }
@@ -397,7 +425,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 +505,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 +588,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 +627,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 +637,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 +672,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));
@@ -831,6 +856,11 @@ export class RootElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
   }
 
+  override invalidateChildren(): void {
+    super.invalidateChildren();
+    this.object.removeChildren();
+  }
+
   override onexpand(): void {
     if (this.treeOutline) {
       this.treeOutline.element.classList.add('expanded');
@@ -896,7 +926,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.
@@ -1190,8 +1220,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.property.property.synthetic) {
       this.nameElement.classList.add('synthetic-property');
     }
-
-    this.updatePropertyPath();
+    this.nameElement.title = this.property.path;
 
     const isInternalEntries = this.property.property.synthetic && this.property.name === '[[Entries]]';
     if (isInternalEntries) {
@@ -1201,8 +1230,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       const showPreview = this.property.name !== '[[Prototype]]';
       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.property.property.synthetic, this.property.path /* variableName */);
+      this.valueElement = this.propertyValue;
     } else if (this.property.property.getter) {
       this.valueElement = document.createElement('span');
       const element = this.valueElement.createChild('span');
@@ -1255,37 +1284,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.appendChild(this.rowContainer);
   }
 
-  private updatePropertyPath(): void {
-    if (this.nameElement.title) {
-      return;
-    }
-
-    const name = this.property.name;
-
-    if (this.property.property.synthetic) {
-      UI.Tooltip.Tooltip.install(this.nameElement, name);
-      return;
-    }
-
-    // https://tc39.es/ecma262/#prod-IdentifierName
-    const useDotNotation = /^(?:[$_\p{ID_Start}])(?:[$_\u200C\u200D\p{ID_Continue}])*$/u;
-    const isInteger = /^(?:0|[1-9]\d*)$/;
-
-    const parentPath = (this.parent instanceof ObjectPropertyTreeElement && this.parent.nameElement &&
-                        !this.parent.property.property.synthetic) ?
-        this.parent.nameElement.title :
-        '';
-
-    if (this.property.property.private || useDotNotation.test(name)) {
-      UI.Tooltip.Tooltip.install(this.nameElement, parentPath ? `${parentPath}.${name}` : name);
-    } else if (isInteger.test(name)) {
-      UI.Tooltip.Tooltip.install(this.nameElement, `${parentPath}[${name}]`);
-    } else {
-      UI.Tooltip.Tooltip.install(this.nameElement, `${parentPath}[${JSON.stringify(name)}]`);
-    }
-  }
-
-  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();
   }
 
@@ -1448,6 +1449,11 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  override invalidateChildren(): void {
+    super.invalidateChildren();
+    this.property.removeChildren();
+  }
+
   private onInvokeGetterClick(result: SDK.RemoteObject.CallFunctionResult): void {
     if (!result.object) {
       return;
@@ -1641,6 +1647,11 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
     ObjectPropertyTreeElement.populateWithProperties(treeNode, children, false, false, linkifier);
   }
 
+  override invalidateChildren(): void {
+    super.invalidateChildren();
+    this.#child.removeChildren();
+  }
+
   override async onpopulate(): Promise<void> {
     this.removeChildren();
     this.#child.removeChildren();
@@ -1773,74 +1784,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, () => {

package/front_end/ui/legacy/components/perf_ui/pieChart.css

@@ -33,7 +33,7 @@
 }
 
 :focus {
-  outline-width: 0;
+  outline-style: none;
 }
 
 .pie-chart-total.selected {

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -320,7 +320,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 
   linkifyRawLocation(
       rawLocation: SDK.DebuggerModel.Location, fallbackUrl: Platform.DevToolsPath.UrlString,
-      className?: string): Element {
+      className?: string): HTMLElement {
     return this.linkifyScriptLocation(
         rawLocation.debuggerModel.target(), rawLocation.scriptId, fallbackUrl, rawLocation.lineNumber, {
           columnNumber: rawLocation.columnNumber,