chrome-devtools-frontend 1.0.1698733 → 1.0.1700561

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -54,6 +54,7 @@ export interface ViewInput {
   data: CookieData[];
   selectedKey?: string;
   editable?: boolean;
+  deletable?: boolean;
   renderInline?: boolean;
   portBindingEnabled?: boolean;
   schemeBindingEnabled?: boolean;
@@ -233,6 +234,7 @@ export class CookiesTable extends UI.Widget.VBox {
                id="cookies-table"
                striped
                ?inline=${input.renderInline}
+               ?deletable=${input.deletable}
                @create=${(e: CustomEvent<CookieData>) => input.onCreate(e.detail)}
                @refresh=${input.onRefresh}
                @deselect=${() => input.onSelect(undefined)}
@@ -448,6 +450,7 @@ export class CookiesTable extends UI.Widget.VBox {
       data: this.data,
       selectedKey: this.selectedKey,
       editable: this.#editable,
+      deletable: Boolean(this.#deleteCallback),
       renderInline: this.renderInline,
       schemeBindingEnabled: this.schemeBindingEnabled,
       portBindingEnabled: this.portBindingEnabled,

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -48,6 +48,8 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * visible rows are layed out and sorting is provided out of the box.
  *
  * @property filters Set of text filters to be applied to the data grid.
+ * @attribute deletable If true, rows can be deleted through the context menu or the Delete
+ *            key, which dispatches a `delete` event on the corresponding <tr> element.
  * @attribute inline If true, the data grid will render inline instead of taking a full container height.
  * @attribute resize Column resize method, one of 'nearest' (default), 'first' or 'last'.
  * @attribute striped If true, the data grid will have striped rows.
@@ -58,7 +60,7 @@ type DataGridElementNode = SortableNode|DynamicHeightNode;
 const elementToNode = new WeakMap<Element, DataGridElementNode>();
 
 export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes: string[] = ['striped', 'name', 'inline', 'resize', 'highlight'];
+  static readonly observedAttributes: string[] = ['striped', 'name', 'inline', 'resize', 'highlight', 'deletable'];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   #dataGrid!: DataGridImpl<any>;
@@ -220,6 +222,9 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
           this.#revealHighlightedNode(Number(newValue));
         });
         break;
+      case 'deletable':
+        this.#dataGrid.deleteCallback = this.deletable ? this.#deleteCallback.bind(this) : undefined;
+        break;
     }
   }
 
@@ -231,6 +236,14 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     return hasBooleanAttribute(this, 'striped');
   }
 
+  set deletable(deletable: boolean) {
+    this.toggleAttribute('deletable', deletable);
+  }
+
+  get deletable(): boolean {
+    return hasBooleanAttribute(this, 'deletable');
+  }
+
   set inline(striped: boolean) {
     this.toggleAttribute('inline', striped);
   }
@@ -584,9 +597,6 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     if (args[0] === 'refresh') {
       this.#dataGrid.refreshCallback = this.#refreshCallback.bind(this);
     }
-    if (args[0] === 'delete') {
-      this.#dataGrid.deleteCallback = this.#deleteCallback.bind(this);
-    }
   }
 
   #refreshCallback(): void {

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

@@ -388,6 +388,10 @@ export class ObjectTreeExpansionTracker {
   }
 }
 
+const ARRAY_LOAD_THRESHOLD = 100;
+const ARRAY_BUCKET_THRESHOLD = 100;
+const ARRAY_SPARSE_ITERATION_THRESHOLD = 250000;
+
 export abstract class ObjectTreeNodeBase extends Common.ObjectWrapper.ObjectWrapper<ObjectTreeNodeBase.EventTypes> {
   #children?: NodeChildren;
   protected readonly options: ObjectTreeOptions;
@@ -715,7 +719,7 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
   }
 
   override async populateChildrenIfNeededImpl(): Promise<NodeChildren> {
-    if (this.#range.count > ArrayGroupingTreeElement.bucketThreshold) {
+    if (this.#range.count > ARRAY_BUCKET_THRESHOLD) {
       const ranges = await arrayRangeGroups(this.object, this.#range.fromIndex, this.#range.toIndex);
       const arrayRanges = ranges?.ranges.map(
           ([fromIndex, toIndex, count]) => new ArrayGroupTreeNode(this.object, {fromIndex, toIndex, count}, this, {
@@ -729,7 +733,7 @@ class ArrayGroupTreeNode extends ObjectTreeNodeBase {
     const result = await this.#object.callFunction(buildArrayFragment, [
       {value: this.#range.fromIndex},
       {value: this.#range.toIndex},
-      {value: ArrayGroupingTreeElement.sparseIterationThreshold},
+      {value: ARRAY_SPARSE_ITERATION_THRESHOLD},
     ]);
     if (!result.object || result.wasThrown) {
       return {};
@@ -766,7 +770,7 @@ export class ObjectTreeNode extends ObjectTreeNodeBase {
       readonly property: SDK.RemoteObject.RemoteObjectProperty,
       parent: ObjectTreeNodeBase|undefined,
       options: ObjectTreeOptions,
-      readonly nonSyntheticParent?: SDK.RemoteObject.RemoteObject,
+      readonly nonSyntheticParent?: SDK.RemoteObject.RemoteObject|undefined,
   ) {
     super(parent, options);
   }
@@ -1228,21 +1232,20 @@ export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
     populateObjectTreeContextMenu(
         contextMenu,
         root,
-        root.expandRecursively.bind(root, EXPANDABLE_MAX_DEPTH),
-        root.collapseRecursively.bind(root),
-        () => {
-          root.sortPropertiesAlphabetically = !root.sortPropertiesAlphabetically;
-        },
-        () => {
-          root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
+        {
+          expandRecursively: root.expandRecursively.bind(root, EXPANDABLE_MAX_DEPTH),
+          collapseChildren: root.collapseRecursively.bind(root),
+          sortPropertiesAlphabetically: root => {
+            root.sortPropertiesAlphabetically = !root.sortPropertiesAlphabetically;
+          },
+          onShowAllToggled: root => {
+            root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
+          },
         },
     );
   };
 }
 
-/** @constant */
-const ARRAY_LOAD_THRESHOLD = 100;
-
 const maxRenderableStringLength = 10000;
 
 export const enum ObjectPropertiesMode {
@@ -1250,18 +1253,24 @@ export const enum ObjectPropertiesMode {
   OWN_AND_INTERNAL_AND_INHERITED = 1,  // Own, internal, and inherited properties
 }
 
-export function populateObjectTreeContextMenu(
-    contextMenu: UI.ContextMenu.ContextMenu,
-    object: ObjectTree,
-    expandRecursively: () => void,
-    collapseChildren: () => void,
-    sortPropertiesAlphabetically: () => void,
-    onShowAllToggled: () => void,
-    ): void {
-  contextMenu.appendApplicableItems(object.object);
-
-  if (object.object instanceof SDK.RemoteObject.LocalJSONObject) {
-    const {value} = object.object;
+export function populateObjectTreeContextMenu(contextMenu: UI.ContextMenu.ContextMenu,
+                                              objectOrProperty: ObjectTree|ObjectTreeNode, handlers: {
+                                                expandRecursively: (node: ObjectTreeNodeBase) => void,
+                                                collapseChildren: (node: ObjectTreeNodeBase) => void,
+                                                sortPropertiesAlphabetically: (node: ObjectTreeNodeBase) => void,
+                                                onShowAllToggled: (node: ObjectTreeNodeBase) => void,
+                                              }): void {
+  contextMenu.appendApplicableItems(objectOrProperty);
+  if (objectOrProperty instanceof ObjectTreeNode && objectOrProperty.property.symbol) {
+    contextMenu.appendApplicableItems(objectOrProperty.property.symbol);
+  }
+  if (objectOrProperty.object) {
+    contextMenu.appendApplicableItems(objectOrProperty.object);
+  }
+
+  const object = objectOrProperty instanceof ObjectTree ? objectOrProperty.object : objectOrProperty.parent?.object;
+  if (objectOrProperty.object && object instanceof SDK.RemoteObject.LocalJSONObject) {
+    const {value} = objectOrProperty.object;
     const propertyValue = typeof value === 'object' ?
         Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(value, null, 2)) :
         value;
@@ -1273,23 +1282,39 @@ export function populateObjectTreeContextMenu(
                                               {jslogContext: 'copy-value'});
   }
 
-  contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively), expandRecursively,
-                                       {jslogContext: 'expand-recursively'});
-  contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren), collapseChildren,
-                                       {jslogContext: 'collapse-children'});
-  if (!object.isWasm) {
+  if (objectOrProperty instanceof ObjectTreeNode && !objectOrProperty.property.synthetic && objectOrProperty.path) {
+    const copyPathHandler = Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance, objectOrProperty.path);
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyPropertyPath), copyPathHandler,
+                                              {jslogContext: 'copy-property-path'});
+  }
+
+  if (objectOrProperty instanceof ObjectTree || object instanceof SDK.RemoteObject.LocalJSONObject) {
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.expandRecursively),
+                                         () => handlers.expandRecursively(objectOrProperty),
+                                         {jslogContext: 'expand-recursively'});
+    contextMenu.viewSection().appendItem(i18nString(UIStrings.collapseChildren),
+                                         () => handlers.collapseChildren(objectOrProperty),
+                                         {jslogContext: 'collapse-children'});
+  }
+
+  let root: ObjectTreeNodeBase = objectOrProperty;
+  while (root.parent) {
+    root = root.parent;
+  }
+  if (!root.isWasm) {
     contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically),
-                                                 sortPropertiesAlphabetically, {
-                                                   checked: object.sortPropertiesAlphabetically,
+                                                 () => handlers.sortPropertiesAlphabetically(root), {
+                                                   checked: objectOrProperty.sortPropertiesAlphabetically,
                                                    jslogContext: 'sort-properties-alphabetically',
                                                  });
   }
   contextMenu.viewSection().appendCheckboxItem(
-      i18nString(UIStrings.showAll), onShowAllToggled,
-      {checked: object.includeNullOrUndefinedValues, jslogContext: 'show-all'});
+      i18nString(UIStrings.showAll), () => handlers.onShowAllToggled(root),
+      {checked: objectOrProperty.includeNullOrUndefinedValues, jslogContext: 'show-all'});
 }
 
-export interface ObjectTreeViewInput {
+interface ObjectTreeViewInput {
   renderAsSubtree: boolean;
   objectTree?: ObjectTree;
   linkifier?: Components.Linkifier.Linkifier;
@@ -1298,8 +1323,8 @@ export interface ObjectTreeViewInput {
   skipGettersAndSetters: boolean;
   onExpand: (expanded: boolean) => void;
 }
-export type ObjectTreeView = (input: ObjectTreeViewInput, output: object, target: HTMLElement) => void;
-export const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
+type ObjectTreeView = (input: ObjectTreeViewInput, output: object, target: HTMLElement) => void;
+const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target) => {
   const objectTree = input.objectTree;
   if (!objectTree) {
     render(nothing, target);
@@ -1332,6 +1357,19 @@ export const OBJECT_TREE_DEFAULT_VIEW: ObjectTreeView = (input, output, target)
   });
 };
 
+async function populateChildrenIfNeeded(node: ObjectTreeNodeBase): Promise<void> {
+  const children = await node.populateChildrenIfNeeded();
+  if (!children.arrayRanges) {
+    return;
+  }
+  if (children.arrayRanges.length === 1) {
+    await populateChildrenIfNeeded(children.arrayRanges[0]);
+  } else {
+    await Promise.all(
+        children.arrayRanges.filter(child => child.singular).map(child => populateChildrenIfNeeded(child)));
+  }
+}
+
 export class ObjectTreeWidget extends UI.Widget.Widget {
   #objectTree: ObjectTree|undefined = undefined;
   #linkifier: Components.Linkifier.Linkifier|undefined = undefined;
@@ -1424,7 +1462,7 @@ export class ObjectTreeWidget extends UI.Widget.Widget {
 
   override async performUpdate(): Promise<void> {
     if (this.#objectTree?.expanded) {
-      await ObjectPropertyTreeElement.populateChildrenIfNeeded(this.#objectTree);
+      await populateChildrenIfNeeded(this.#objectTree);
     }
     this.#view(this, {}, this.contentElement);
   }
@@ -1454,7 +1492,7 @@ export function renderObjectTree(
       widgetRef(ObjectTreeWidget, () => {})}></ul>`;
 }
 
-export interface ObjectPropertiesSectionViewInput {
+interface ObjectPropertiesSectionViewInput {
   objectTree: ObjectTree;
   title?: Element|TemplateResult;
   linkifier?: Components.Linkifier.Linkifier;
@@ -1464,11 +1502,10 @@ export interface ObjectPropertiesSectionViewInput {
   onExpand: (expanded: boolean) => void;
 }
 
-export type ObjectPropertiesSectionView =
-    (input: ObjectPropertiesSectionViewInput, output: object, target: HTMLElement) => void;
+type ObjectPropertiesSectionView = (input: ObjectPropertiesSectionViewInput, output: object, target: HTMLElement) =>
+    void;
 
 export const OBJECT_PROPERTIES_SECTION_DEFAULT_VIEW: ObjectPropertiesSectionView = (input, _output, target) => {
-
   const onRootItemContextMenuHandler = (event: Event): void => {
     event.consume(true);
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
@@ -1674,9 +1711,9 @@ export interface ObjectPropertyViewInput {
   node: ObjectTreeNode;
   search?: UI.TreeOutline.TreeSearch<ObjectTreeNodeBase>;
 }
-export type ObjectPropertyViewOutput = undefined;
-export type ObjectPropertyView =
-    (input: ObjectPropertyViewInput, output: ObjectPropertyViewOutput, target: HTMLElement) => void;
+type ObjectPropertyViewOutput = undefined;
+type ObjectPropertyView = (input: ObjectPropertyViewInput, output: ObjectPropertyViewOutput, target: HTMLElement) =>
+    void;
 export const OBJECT_PROPERTY_DEFAULT_VIEW: ObjectPropertyView = (input, _output, target) => {
   const {property} = input.node;
   const isInternalEntries = property.synthetic && input.node.name === '[[Entries]]';
@@ -1897,7 +1934,7 @@ export class ObjectPropertyWidget extends UI.Widget.Widget {
   }
 }
 
-export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
+class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   property: ObjectTreeNode;
   override toggleOnClick: boolean;
   private linkifier: Components.Linkifier.Linkifier|undefined;
@@ -1935,16 +1972,11 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       linkifier?: Components.Linkifier.Linkifier,
       emptyPlaceholder?: string|null,
       ): Promise<void> {
-    await ObjectPropertyTreeElement.populateChildrenIfNeeded(value);
+    await populateChildrenIfNeeded(value);
     ObjectPropertyTreeElement.populateImpl(treeElement, value, skipProto, skipGettersAndSetters, linkifier,
                                            emptyPlaceholder);
   }
 
-  static async populateChildrenIfNeeded(value: ObjectTreeNodeBase): Promise<void> {
-    const children = await value.populateChildrenIfNeeded();
-    await ArrayGroupingTreeElement.populateChildrenIfNeeded(children);
-  }
-
   static populateImpl(
       treeElement: UI.TreeOutline.TreeElement,
       value: ObjectTreeNodeBase,
@@ -1984,10 +2016,11 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   static *
-      createPropertyNodes(
-          {properties, internalProperties, accessors, arrayRanges}: NodeChildren, skipProto: boolean,
-          skipGettersAndSetters: boolean, linkifier?: Components.Linkifier.Linkifier, emptyPlaceholder?: string|null,
-          isNotDisplayablePropertyCallback?: (property: SDK.RemoteObject.RemoteObjectProperty) => boolean):
+      createPropertyNodes({properties, internalProperties, accessors, arrayRanges}: NodeChildren, skipProto: boolean,
+                          skipGettersAndSetters: boolean, linkifier?: Components.Linkifier.Linkifier,
+                          emptyPlaceholder?: string|null,
+                          isNotDisplayablePropertyCallback?:
+                              (property: SDK.RemoteObject.RemoteObjectProperty) => boolean):
           Generator<UI.TreeOutline.TreeElement> {
     let empty = true;
     // Arrays with large numbers of elements are paginated into arrayRanges.
@@ -2051,9 +2084,9 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  static populateWithProperties(
-      treeNode: UI.TreeOutline.TreeElement, children: NodeChildren, skipProto: boolean, skipGettersAndSetters: boolean,
-      linkifier?: Components.Linkifier.Linkifier, emptyPlaceholder?: string|null): void {
+  static populateWithProperties(treeNode: UI.TreeOutline.TreeElement, children: NodeChildren, skipProto: boolean,
+                                skipGettersAndSetters: boolean, linkifier?: Components.Linkifier.Linkifier,
+                                emptyPlaceholder?: string|null): void {
     for (const childNode of this.createPropertyNodes(
              children, skipProto, skipGettersAndSetters, linkifier, emptyPlaceholder,
              property => treeNode instanceof ObjectPropertyTreeElement &&
@@ -2158,91 +2191,47 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  getContextMenu(event: Event): UI.ContextMenu.ContextMenu {
+  private contextMenuFired(event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    contextMenu.appendApplicableItems(this.property);
-    if (this.property.property.symbol) {
-      contextMenu.appendApplicableItems(this.property.property.symbol);
-    }
-    if (this.property.object) {
-      contextMenu.appendApplicableItems(this.property.object);
-      if (this.property.parent?.object instanceof SDK.RemoteObject.LocalJSONObject) {
-        const {object: {value}} = this.property;
-        const propertyValue = typeof value === 'object' ?
-            Platform.StringUtilities.escapeUnicodeAsText(JSON.stringify(value, null, 2)) :
-            value;
-        const copyValueHandler = (): void => {
-          Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));
-        };
-        contextMenu.clipboardSection().appendItem(
-            i18nString(UIStrings.copyValue), copyValueHandler, {jslogContext: 'copy-value'});
-      }
-    }
-    if (!this.property.property.synthetic && this.property.path) {
-      const copyPathHandler = Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText.bind(
-          Host.InspectorFrontendHost.InspectorFrontendHostInstance, this.property.path);
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyPropertyPath), copyPathHandler, {jslogContext: 'copy-property-path'});
-    }
-    if (this.property.parent?.object instanceof SDK.RemoteObject.LocalJSONObject) {
-      contextMenu.viewSection().appendItem(
-          i18nString(UIStrings.expandRecursively), this.expandRecursively.bind(this, EXPANDABLE_MAX_DEPTH),
-          {jslogContext: 'expand-recursively'});
-      contextMenu.viewSection().appendItem(
-          i18nString(UIStrings.collapseChildren), this.collapseChildren.bind(this),
-          {jslogContext: 'collapse-children'});
-    }
-    let root: ObjectTreeNodeBase = this.property;
-    while (root.parent) {
-      root = root.parent;
-    }
-    if (!root.isWasm) {
-      contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.sortPropertiesAlphabetically), () => {
-        root.sortPropertiesAlphabetically = !root.sortPropertiesAlphabetically;
-      }, {
-        checked: root.sortPropertiesAlphabetically,
-        jslogContext: 'sort-properties-alphabetically',
-      });
-    }
-    contextMenu.viewSection().appendCheckboxItem(i18nString(UIStrings.showAll), () => {
-      root.includeNullOrUndefinedValues = !root.includeNullOrUndefinedValues;
-    }, {checked: root.includeNullOrUndefinedValues, jslogContext: 'show-all'});
-    return contextMenu;
-  }
+    populateObjectTreeContextMenu(contextMenu, this.property, {
+      expandRecursively: () => this.expandRecursively(EXPANDABLE_MAX_DEPTH),
+      collapseChildren: () => this.collapseChildren(),
+      sortPropertiesAlphabetically: node => {
+        node.sortPropertiesAlphabetically = !node.sortPropertiesAlphabetically;
+      },
+      onShowAllToggled: node => {
+        node.includeNullOrUndefinedValues = !node.includeNullOrUndefinedValues;
+      },
+    });
 
-  private contextMenuFired(event: Event): void {
-    const contextMenu = this.getContextMenu(event);
     void contextMenu.show();
   }
 
   private updateExpandable(): void {
     if (this.property.object) {
-      this.setExpandable(
-          !this.property.object.customPreview() && this.property.object.hasChildren &&
-          !this.property.property.wasThrown);
+      this.setExpandable(!this.property.object.customPreview() && this.property.object.hasChildren &&
+                         !this.property.property.wasThrown);
     } else {
       this.setExpandable(false);
     }
   }
 }
 
-async function arrayRangeGroups(object: SDK.RemoteObject.RemoteObject, fromIndex: number, toIndex: number):
-    Promise<{ranges: number[][]}|null|undefined> {
+async function arrayRangeGroups(object: SDK.RemoteObject.RemoteObject, fromIndex: number,
+                                toIndex: number): Promise<{ranges: number[][]}|null|undefined> {
   return await object.callFunctionJSON(packArrayRanges, [
     {value: fromIndex},
     {value: toIndex},
-    {value: ArrayGroupingTreeElement.bucketThreshold},
-    {value: ArrayGroupingTreeElement.sparseIterationThreshold},
+    {value: ARRAY_BUCKET_THRESHOLD},
+    {value: ARRAY_SPARSE_ITERATION_THRESHOLD},
   ]);
 
   /**
    * This function is called on the RemoteObject.
    * Note: must declare params as optional.
    */
-  function packArrayRanges(
-      this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number,
-      sparseIterationThreshold?: number): {
+  function packArrayRanges(this: Object, fromIndex?: number, toIndex?: number, bucketThreshold?: number,
+                           sparseIterationThreshold?: number): {
     ranges: number[][],
   }|undefined {
     if (fromIndex === undefined || toIndex === undefined || sparseIterationThreshold === undefined ||
@@ -2361,7 +2350,7 @@ function buildArrayFragment(
   return result;
 }
 
-export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
+class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   override toggleOnClick: boolean;
   private readonly linkifier: Components.Linkifier.Linkifier|undefined;
   readonly #child: ArrayGroupTreeNode;
@@ -2414,18 +2403,6 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
                                                       isNotDisplayablePropertyCallback);
   }
 
-  static async populateChildrenIfNeeded(children: NodeChildren): Promise<void> {
-    if (!children.arrayRanges) {
-      return;
-    }
-    if (children.arrayRanges.length === 1) {
-      await ObjectPropertyTreeElement.populateChildrenIfNeeded(children.arrayRanges[0]);
-    } else {
-      await Promise.all(children.arrayRanges.filter(child => child.singular)
-                            .map(child => ObjectPropertyTreeElement.populateChildrenIfNeeded(child)));
-    }
-  }
-
   override onexpand(): void {
     this.#child.expanded = true;
   }
@@ -2442,13 +2419,9 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
   override onattach(): void {
     this.listItemElement.classList.add('object-properties-section-name');
   }
-
-  // These should be module constants but they are modified by layout tests.
-  static bucketThreshold = 100;
-  static sparseIterationThreshold = 250000;
 }
 
-export interface ExpandableTextViewInput {
+interface ExpandableTextViewInput {
   copyText: () => void;
   expandText: () => void;
   expanded: boolean;
@@ -2456,35 +2429,15 @@ export interface ExpandableTextViewInput {
   byteCount: number;
   text: string;
 }
-export type ExpandableTextView = (input: ExpandableTextViewInput, output: object, target: HTMLElement) => void;
-export const EXPANDABLE_TEXT_DEFAULT_VIEW: ExpandableTextView = (input, output, target) => {
+type ExpandableTextView = (input: ExpandableTextViewInput, output: object, target: HTMLElement) => void;
+const EXPANDABLE_TEXT_DEFAULT_VIEW: ExpandableTextView = (input, output, target) => {
   const totalBytesText = i18n.ByteUtilities.bytesToString(input.byteCount);
   const canExpand = input.text.length < ExpandableTextPropertyValue.MAX_DISPLAYABLE_TEXT_LENGTH;
-  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 (canExpand && !input.expanded) {
-      contextMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.showMoreS, {PH1: totalBytesText}), input.expandText, {jslogContext: 'show-more'});
-    }
-    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), input.copyText, {jslogContext: 'copy'});
-    void contextMenu.show();
-    e.consume(true);
-  };
-
   const croppedText = input.text.slice(0, input.maxLength);
 
   render(
       // clang-format off
-        html`<span title=${croppedText + '…'} @contextmenu=${onContextMenu}>
+        html`<span title=${croppedText + '…'}>
                ${input.expanded ? input.text : croppedText}
                <button
                  ?hidden=${input.expanded}
@@ -2502,7 +2455,7 @@ export const EXPANDABLE_TEXT_DEFAULT_VIEW: ExpandableTextView = (input, output,
                  ></button>
               </span>`,
       // clang-format on
-      target);
+      target, {container: {classes: ['expandable-text-property-value']}});
 };
 
 export class ExpandableTextPropertyValue extends UI.Widget.Widget {
@@ -2530,15 +2483,31 @@ export class ExpandableTextPropertyValue extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  #copyText = (): void => {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#text);
+  };
+
+  #expandText = (): void => {
+    if (!this.#expanded) {
+      this.#expanded = true;
+      this.requestUpdate();
+    }
+  };
+
+  appendApplicableItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const totalBytesText = i18n.ByteUtilities.bytesToString(this.#byteCount);
+    const canExpand = this.#text.length < ExpandableTextPropertyValue.MAX_DISPLAYABLE_TEXT_LENGTH;
+    if (canExpand && !this.#expanded) {
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.showMoreS, {PH1: totalBytesText}),
+                                                this.#expandText, {jslogContext: 'show-more'});
+    }
+    contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), this.#copyText, {jslogContext: 'copy'});
+  }
+
   override performUpdate(): void {
     const input: ExpandableTextViewInput = {
-      copyText: () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.#text),
-      expandText: () => {
-        if (!this.#expanded) {
-          this.#expanded = true;
-          this.requestUpdate();
-        }
-      },
+      copyText: this.#copyText,
+      expandText: this.#expandText,
       expanded: this.#expanded,
       byteCount: this.#byteCount,
       maxLength: this.#maxLength,
@@ -2547,3 +2516,20 @@ export class ExpandableTextPropertyValue extends UI.Widget.Widget {
     this.#view(input, {}, this.contentElement);
   }
 }
+
+UI.ContextMenu.registerProvider({
+  contextTypes() {
+    return [ObjectTreeNodeBase];
+  },
+  async loadProvider() {
+    return {
+      appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu): void {
+        const widgetElement = (event.target as Element | null)?.closest('.expandable-text-property-value');
+        const widget = widgetElement && UI.Widget.Widget.get(widgetElement);
+        if (widget instanceof ExpandableTextPropertyValue) {
+          widget.appendApplicableItems(contextMenu);
+        }
+      },
+    };
+  },
+});

package/front_end/ui/lit/lit.ts

@@ -4,7 +4,7 @@
 
 import type * as Lit from '../../third_party/lit/lit.js';
 
-export type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
+export type {DirectiveResult} from '../../third_party/lit/lit.js';
 export {
   AsyncDirective,
   Decorators,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -283,8 +283,11 @@ export const knownContextValues: Set<string> = new Set([
   'accept',
   'accept-execute-code',
   'access-control-allow-origin',
+  'accessibility-announcements.filter-by-type',
   'accessibility-default',
   'accessibility-tree',
+  'accessibility.clear-announcements',
+  'accessibility.toggle-recording',
   'accessibility.view',
   'accuracy',
   'achromatopsia',
@@ -1422,6 +1425,7 @@ export const knownContextValues: Set<string> = new Set([
   'device-pixel-ratio-enable',
   'device-posture',
   'device-scale-factor',
+  'device-scope',
   'device-type',
   'device-type-enable',
   'devicemotion',
@@ -2677,6 +2681,7 @@ export const knownContextValues: Set<string> = new Set([
   'linear-memory-row',
   'link',
   'link-in-explanation',
+  'link-parameters',
   'linux',
   'list-style',
   'list-style-image',
@@ -3132,6 +3137,7 @@ export const knownContextValues: Set<string> = new Set([
   'page-error',
   'page-margin-safety',
   'page-orientation',
+  'page-scope',
   'paint-order',
   'painting',
   'palatino',
@@ -3190,6 +3196,7 @@ export const knownContextValues: Set<string> = new Set([
   'persistence-network-overrides-enabled-true',
   'perspective',
   'perspective-origin',
+  'phone',
   'picture-in-picture',
   'pill',
   'ping',