chrome-devtools-frontend 1.0.1602348 → 1.0.1603822

package/front_end/ui/legacy/Treeoutline.ts

@@ -1779,20 +1779,21 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     return this.#treeOutline;
   }
 
-  #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper): {treeElement: TreeElement, expanded: boolean}|null {
+  #getParentTreeElement(element: HTMLLIElement|TreeElementWrapper):
+      {treeElement: TreeElement, expanded: boolean, classes: DOMTokenList}|null {
     const subtreeRoot = element.parentElement;
     if (!(subtreeRoot instanceof HTMLUListElement)) {
       return null;
     }
     if (subtreeRoot.role === 'tree') {
-      return {treeElement: this.#treeOutline.rootElement(), expanded: false};
+      return {treeElement: this.#treeOutline.rootElement(), expanded: false, classes: subtreeRoot.classList};
     }
     if (subtreeRoot.role !== 'group' || !subtreeRoot.parentElement) {
       return null;
     }
     const treeElement = TreeViewTreeElement.get(subtreeRoot.parentElement);
     const expanded = treeElement ? treeElement.expanded : hasBooleanAttribute(subtreeRoot.parentElement, 'open');
-    return treeElement ? {expanded, treeElement} : null;
+    return treeElement ? {expanded, treeElement, classes: subtreeRoot.classList} : null;
   }
 
   protected override updateNode(node: Node, attributeName: string|null): void {
@@ -1825,6 +1826,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       if (!parent) {
         continue;
       }
+      if (parent.treeElement.childCount() === 0) {
+        parent.treeElement.childrenListElement.classList.add(...parent.classes.values());
+      }
       while (nextSibling && nextSibling.nodeType !== Node.ELEMENT_NODE) {
         nextSibling = nextSibling.nextSibling;
       }

package/front_end/ui/legacy/UIUtils.ts

@@ -1691,19 +1691,21 @@ export function createSVGChild<K extends keyof SVGElementTagNameMap>(
   return child;
 }
 
-export const enclosingNodeOrSelfWithNodeNameInArray = (initialNode: Node, nameArray: string[]): Node|null => {
-  let node: (Node|null)|Node = initialNode;
-  for (; node && node !== initialNode.ownerDocument; node = node.parentNodeOrShadowHost()) {
-    for (let i = 0; i < nameArray.length; ++i) {
-      if (node.nodeName.toLowerCase() === nameArray[i].toLowerCase()) {
-        return node;
+export const enclosingNodeOrSelfWithNodeNameInArray =
+    <T extends keyof HTMLElementTagNameMap>(initialNode: Node, nameArray: T[]): HTMLElementTagNameMap[T]|null => {
+      let node: (Node|null)|Node = initialNode;
+      for (; node && node !== initialNode.ownerDocument; node = node.parentNodeOrShadowHost()) {
+        for (let i = 0; i < nameArray.length; ++i) {
+          if (node.nodeName.toLowerCase() === nameArray[i].toLowerCase()) {
+            return node as HTMLElementTagNameMap[T];
+          }
+        }
       }
-    }
-  }
-  return null;
-};
+      return null;
+    };
 
-export const enclosingNodeOrSelfWithNodeName = function(node: Node, nodeName: string): Node|null {
+export const enclosingNodeOrSelfWithNodeName = function<T extends keyof HTMLElementTagNameMap>(
+    node: Node, nodeName: T): HTMLElementTagNameMap[T]|null {
   return enclosingNodeOrSelfWithNodeNameInArray(node, [nodeName]);
 };
 

package/front_end/ui/legacy/Widget.ts

@@ -129,6 +129,10 @@ function runNextUpdate(): void {
         const controller = new AbortController();
         widget.addUpdateController(controller);
         await widget.performUpdate(controller.signal);
+      } catch (e) {
+        if (e.name !== 'AbortError') {
+          throw e;
+        }
       } finally {
         resolve();
       }
@@ -1055,6 +1059,7 @@ export class Widget {
   }
 
   addUpdateController(controller: AbortController): void {
+    this.#updateController?.abort();
     this.#updateController = controller;
   }
 

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

@@ -2552,7 +2552,7 @@ export interface Parameters {
   refreshCallback?: (() => void);
 }
 export interface ColumnDescriptor {
-  id: Lowercase<string>;
+  id: string;
   title?: Common.UIString.LocalizedString;
   titleDOMFragment?: DocumentFragment|null;
   sortable: boolean;

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

@@ -550,11 +550,11 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     }
     const cell = this.createTD(columnId);
     cell.setAttribute('part', `${columnId}-column`);
-    if (this.isCreationNode) {
-      return cell;
-    }
     const configCells = [...this.#configElement.children].filter(c => c.tagName === 'TD') as HTMLTableCellElement[];
     const configCell = configCells[index];
+    if (this.isCreationNode && !configCell) {
+      return cell;
+    }
     if (!configCell) {
       throw new Error(`Column ${columnId} not found in the data grid`);
     }

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

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 /* eslint-disable @typescript-eslint/naming-convention */
-
+import type * as Common from '../../../../core/common/common.js';
 import * as Platform from '../../../../core/platform/platform.js';
 
 import {type ColumnDescriptor, type DataGridData, Events, type Parameters} from './DataGrid.js';
@@ -61,7 +61,7 @@ export class SortableDataGrid<T> extends ViewportDataGrid<SortableDataGridNode<T
     const columns: ColumnDescriptor[] = [];
     for (let i = 0; i < columnNames.length; ++i) {
       const id = String(i);
-      columns.push(({id, title: columnNames[i], sortable: true} as ColumnDescriptor));
+      columns.push(({id, title: columnNames[i] as Common.UIString.LocalizedString, sortable: true}));
     }
 
     const nodes = [];

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

@@ -50,6 +50,7 @@ import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
 import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPreviewFormatter.js';
 
+export {objectPropertiesSectionStyles, objectValueStyles};
 const {widget} = UI.Widget;
 const {ref, repeat, ifDefined, classMap} = Directives;
 const UIStrings = {
@@ -1369,10 +1370,18 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  static populateWithProperties(
-      treeNode: UI.TreeOutline.TreeElement, {properties, internalProperties, accessors}: NodeChildren,
-      skipProto: boolean, skipGettersAndSetters: boolean, linkifier?: Components.Linkifier.Linkifier,
-      emptyPlaceholder?: string|null): void {
+  static *
+      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.
+    // If we have array ranges, the object is not empty.
+    if (arrayRanges && arrayRanges.length > 0) {
+      empty = false;
+    }
     properties?.sort(ObjectPropertiesSection.compareProperties);
 
     const entriesProperty = internalProperties?.find(({property}) => property.name === '[[Entries]]');
@@ -1380,12 +1389,12 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       const treeElement = new ObjectPropertyTreeElement(entriesProperty, linkifier);
       treeElement.setExpandable(true);
       treeElement.expand();
-      treeNode.appendChild(treeElement);
+      empty = false;
+      yield treeElement;
     }
 
     for (const property of properties ?? []) {
-      if (treeNode instanceof ObjectPropertyTreeElement &&
-          !ObjectPropertiesSection.isDisplayableProperty(property.property, treeNode.property?.property)) {
+      if (isNotDisplayablePropertyCallback?.(property.property)) {
         continue;
       }
 
@@ -1398,12 +1407,13 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
             element.expand();
           }
         }
-        treeNode.appendChild(element);
+        empty = false;
+        yield element;
       }
     }
 
     for (const accessor of accessors ?? []) {
-      treeNode.appendChild(new ObjectPropertyTreeElement(accessor, linkifier));
+      yield new ObjectPropertyTreeElement(accessor, linkifier);
     }
 
     for (const property of internalProperties ?? []) {
@@ -1414,10 +1424,28 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
       if (property.property.name === '[[Prototype]]' && skipProto) {
         continue;
       }
-      treeNode.appendChild(treeElement);
+      empty = false;
+      yield treeElement;
     }
 
-    ObjectPropertyTreeElement.appendEmptyPlaceholderIfNeeded(treeNode, emptyPlaceholder);
+    if (empty) {
+      const title = document.createElement('div');
+      title.classList.add('gray-info-message');
+      title.textContent = emptyPlaceholder || i18nString(UIStrings.noProperties);
+      const infoElement = new UI.TreeOutline.TreeElement(title);
+      yield infoElement;
+    }
+  }
+
+  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 &&
+                 !ObjectPropertiesSection.isDisplayableProperty(property, treeNode.property?.property))) {
+      treeNode.appendChild(childNode);
+    }
   }
 
   revertHighlightChanges(): void {
@@ -1450,18 +1478,6 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     await this.property.setValue(expression);
   }
 
-  private static appendEmptyPlaceholderIfNeeded(treeNode: UI.TreeOutline.TreeElement, emptyPlaceholder?: string|null):
-      void {
-    if (treeNode.childCount()) {
-      return;
-    }
-    const title = document.createElement('div');
-    title.classList.add('gray-info-message');
-    title.textContent = emptyPlaceholder || i18nString(UIStrings.noProperties);
-    const infoElement = new UI.TreeOutline.TreeElement(title);
-    treeNode.appendChild(infoElement);
-  }
-
   private showAllPropertiesElementSelected(element: UI.TreeOutline.TreeElement): boolean {
     this.removeChild(element);
     this.children().forEach(x => {

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

@@ -2,15 +2,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as i18n from '../../../../core/i18n/i18n.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
+import * as Snackbars from '../../../components/snackbars/snackbars.js';
 import type * as UI from '../../legacy.js';
 
+const UIStrings = {
+  /**
+   * @description Notification message shown to the user when garbage collection has completed.
+   */
+  garbageCollectionCompleted: 'Garbage collection completed',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/perf_ui/GCActionDelegate.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export class GCActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, _actionId: string): boolean {
-    for (const heapProfilerModel of SDK.TargetManager.TargetManager.instance().models(
-             SDK.HeapProfilerModel.HeapProfilerModel)) {
-      void heapProfilerModel.collectGarbage();
-    }
+    const promises = SDK.TargetManager.TargetManager.instance()
+                         .models(SDK.HeapProfilerModel.HeapProfilerModel)
+                         .map(heapProfilerModel => heapProfilerModel.collectGarbage());
+
+    void Promise.all(promises).then(() => {
+      Snackbars.Snackbar.Snackbar.show({message: i18nString(UIStrings.garbageCollectionCompleted)});
+    });
+
     return true;
   }
 }

package/front_end/ui/legacy/treeoutline.css

@@ -9,6 +9,10 @@
   padding: 2px 0 0;
 }
 
+:host(devtools-tree) {
+  display: inline-block;
+}
+
 .tree-outline-disclosure:not(.tree-outline-disclosure-hide-overflow) {
   min-width: 100%;
   display: inline-block;

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1909,6 +1909,8 @@ export const knownContextValues = new Set([
   'history',
   'historyRedo',
   'historyUndo',
+  'hmac-secret',
+  'hmac-secret-mc',
   'hostname',
   'hover',
   'hr',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1602348"
+  "version": "1.0.1603822"
 }