chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/front_end/ui/legacy/Treeoutline.ts

@@ -55,6 +55,7 @@ import {
   deepElementFromPoint,
   enclosingNodeOrSelfWithNodeNameInArray,
   HTMLElementWithLightDOMTemplate,
+  InterceptBindingDirective,
   isEditing,
 } from './UIUtils.js';
 
@@ -1549,6 +1550,7 @@ class ActiveHighlights {
 class TreeViewTreeElement extends TreeElement {
   #activeHighlights = new ActiveHighlights();
   #clonedAttributes = new Set<string>();
+  #clonedClasses = new Set<string>();
 
   static #elementToTreeElement = new WeakMap<Node, TreeViewTreeElement>();
   readonly configElement: HTMLLIElement;
@@ -1569,7 +1571,9 @@ class TreeViewTreeElement extends TreeElement {
   refresh(): void {
     this.titleElement.textContent = '';
     this.#clonedAttributes.forEach(attr => this.listItemElement.attributes.removeNamedItem(attr));
+    this.#clonedClasses.forEach(className => this.listItemElement.classList.remove(className));
     this.#clonedAttributes.clear();
+    this.#clonedClasses.clear();
     for (let i = 0; i < this.configElement.attributes.length; ++i) {
       const attribute = this.configElement.attributes.item(i);
       if (attribute && attribute.name !== 'role' && SDK.DOMModel.ARIA_ATTRIBUTES.has(attribute.name)) {
@@ -1577,6 +1581,11 @@ class TreeViewTreeElement extends TreeElement {
         this.#clonedAttributes.add(attribute.name);
       }
     }
+    for (const className of this.configElement.classList) {
+      this.listItemElement.classList.add(className);
+      this.#clonedClasses.add(className);
+    }
+    InterceptBindingDirective.attachEventListeners(this.configElement, this.listItemElement);
 
     for (const child of this.configElement.childNodes) {
       if (child instanceof HTMLUListElement && child.role === 'group') {
@@ -1753,7 +1762,7 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
     }
   }
 
-  protected override addNodes(nodes: NodeList|Node[]): void {
+  protected override addNodes(nodes: NodeList|Node[], nextSibling?: Node|null): void {
     for (const node of getTreeNodes(nodes)) {
       if (TreeViewTreeElement.get(node)) {
         continue;  // Not sure this can happen
@@ -1762,8 +1771,13 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       if (!parent) {
         continue;
       }
+      while (nextSibling && nextSibling.nodeType !== Node.ELEMENT_NODE) {
+        nextSibling = nextSibling.nextSibling;
+      }
+      const nextElement = nextSibling ? TreeViewTreeElement.get(nextSibling) : null;
+      const index = nextElement ? parent.treeElement.indexOfChild(nextElement) : parent.treeElement.children().length;
       const treeElement = new TreeViewTreeElement(this.#treeOutline, node);
-      parent.treeElement.appendChild(treeElement, /* FIXME comparator */);
+      parent.treeElement.insertChild(treeElement, index);
       if (hasBooleanAttribute(node, 'selected')) {
         treeElement.revealAndSelect(true);
       }

package/front_end/ui/legacy/UIUtils.ts

@@ -2216,6 +2216,19 @@ export class InterceptBindingDirective extends Lit.Directive.Directive {
   }
 }
 
+export const cloneCustomElement = <T extends HTMLElement>(element: T, deep?: boolean): T => {
+  const clone = document.createElement(element.localName) as T;
+  for (const attribute of element.attributes) {
+    clone.setAttribute(attribute.name, attribute.value);
+  }
+  if (deep) {
+    for (const child of element.childNodes) {
+      clone.appendChild(child.cloneNode(deep));
+    }
+  }
+  return clone;
+};
+
 export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   readonly #mutationObserver = new MutationObserver(this.#onChange.bind(this));
   #contentTemplate: HTMLTemplateElement|null = null;
@@ -2286,7 +2299,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     this.onChange(mutationList);
     for (const mutation of mutationList) {
       this.removeNodes(mutation.removedNodes);
-      this.addNodes(mutation.addedNodes);
+      this.addNodes(mutation.addedNodes, mutation.nextSibling);
       this.updateNode(mutation.target, mutation.attributeName);
     }
   }
@@ -2297,7 +2310,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
   protected updateNode(_node: Node, _attributeName: string|null): void {
   }
 
-  protected addNodes(_nodes: NodeList|Node[]): void {
+  protected addNodes(_nodes: NodeList|Node[], _nextSibling?: Node|null): void {
   }
 
   protected removeNodes(_nodes: NodeList): void {

package/front_end/ui/legacy/XElement.ts

@@ -65,53 +65,10 @@ class XBox extends XElement {
   }
 }
 
-class XVBox extends XBox {
-  constructor() {
-    super('column');
-  }
-}
-
 class XHBox extends XBox {
   constructor() {
     super('row');
   }
 }
 
-class XCBox extends XElement {
-  constructor() {
-    super();
-    this.style.setProperty('display', 'flex');
-    this.style.setProperty('flex-direction', 'column');
-    this.style.setProperty('justify-content', 'center');
-    this.style.setProperty('align-items', 'center');
-  }
-}
-
-class XDiv extends XElement {
-  constructor() {
-    super();
-    this.style.setProperty('display', 'block');
-  }
-}
-
-class XSpan extends XElement {
-  constructor() {
-    super();
-    this.style.setProperty('display', 'inline');
-  }
-}
-
-class XText extends XElement {
-  constructor() {
-    super();
-    this.style.setProperty('display', 'inline');
-    this.style.setProperty('white-space', 'pre');
-  }
-}
-
-customElements.define('x-vbox', XVBox);
 customElements.define('x-hbox', XHBox);
-customElements.define('x-cbox', XCBox);
-customElements.define('x-div', XDiv);
-customElements.define('x-span', XSpan);
-customElements.define('x-text', XText);

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

@@ -148,6 +148,12 @@ export const enum HoverType {
   ERROR = 'ERROR',
 }
 
+export const enum GroupCollapsibleState {
+  ALWAYS = 0,
+  NEVER = 1,
+  IF_MULTI_ROW = 2
+}
+
 export interface FlameChartDelegate {
   windowChanged(_startTime: number, _endTime: number, _animate: boolean): void;
   updateRangeSelection(_startTime: number, _endTime: number): void;
@@ -3793,10 +3799,21 @@ export class FlameChart extends Common.ObjectWrapper.eventMixin<EventTypes, type
 
     const groups = this.rawTimelineData.groups || [];
     const style = groups[index].style;
-    if (!style.shareHeaderLine || !style.collapsible) {
-      return Boolean(style.collapsible);
+    if (style.collapsible === GroupCollapsibleState.NEVER) {
+      return false;
+    }
+    if (!style.shareHeaderLine) {
+      return style.collapsible === GroupCollapsibleState.ALWAYS;
     }
     const isLastGroup = index + 1 >= groups.length;
+    if (style.collapsible === GroupCollapsibleState.IF_MULTI_ROW) {
+      const nextRowStartLevel = isLastGroup ? this.dataProvider.maxStackDepth() : groups[index + 1].startLevel;
+      const rowsInCurrentGroup = nextRowStartLevel - groups[index].startLevel;
+      // If everything fits in one line, there's no need to offer the expand capability.
+      if (rowsInCurrentGroup < 2) {
+        return false;
+      }
+    }
     if (!isLastGroup && groups[index + 1].style.nestingLevel > style.nestingLevel) {
       return true;
     }
@@ -4421,8 +4438,7 @@ export interface Group {
 export interface GroupStyle {
   height: number;
   padding: number;
-  /* Can it be collapsed? True by default! */
-  collapsible: boolean;
+  collapsible: GroupCollapsibleState;
   /** The color of the group title text. */
   color: string;
   /**

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -540,6 +540,7 @@ export const knownContextValues = new Set([
   'background-services',
   'background-size',
   'background-sync',
+  'badge-notification',
   'badge-notification.dismiss',
   'badproperty',
   'bars',
@@ -884,6 +885,7 @@ export const knownContextValues = new Set([
   'content',
   'content-encoding',
   'content-length',
+  'content-policy',
   'content-type',
   'content-visibility',
   'context',
@@ -1028,6 +1030,7 @@ export const knownContextValues = new Set([
   'cpu-throttling-selector',
   'cpu-throttling-selector-calibrate',
   'create-new-snippet',
+  'create-profile',
   'create-recording',
   'create-recording-view',
   'creator-ad-script-ancestry',
@@ -1692,12 +1695,8 @@ export const knownContextValues = new Set([
   'gap-rule-overlap',
   'gap-rule-paint-order',
   'garamond',
-  'gdp.content-policy',
-  'gdp.privacy-policy',
-  'gdp.sign-up',
-  'gdp.sign-up-dialog-open',
-  'gdp.signup.keep-me-updated',
-  'gdp.terms-of-service',
+  'gdp-profile',
+  'gdp-sign-up-dialog',
   'gen-ai-settings-panel',
   'general',
   'generative-ai-terms-of-service',
@@ -1985,6 +1984,7 @@ export const knownContextValues = new Set([
   'justify-self',
   'ka',
   'keep-alive',
+  'keep-me-updated',
   'key',
   'keybinds',
   'keyboard',
@@ -2403,6 +2403,7 @@ export const knownContextValues = new Set([
   'main.zoom-reset',
   'make-a-copy',
   'manage-header-columns',
+  'manage-settings',
   'manager-custom-headers',
   'manifest',
   'manifest.copy-id',
@@ -2691,6 +2692,7 @@ export const knownContextValues = new Set([
   'open-memory-inspector',
   'open-network-panel',
   'open-performance-panel',
+  'open-sign-up-dialog',
   'open-sources-panel',
   'open-using',
   'opened-windows',
@@ -2888,6 +2890,7 @@ export const knownContextValues = new Set([
   'priority',
   'privacy',
   'privacy-notice',
+  'privacy-policy',
   'privacy-policy.console-insights',
   'private-state-tokens',
   'production-origin',
@@ -2911,6 +2914,12 @@ export const knownContextValues = new Set([
   'profiler.profile-type',
   'profiler.save-to-file',
   'profiles-sidebar',
+  'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fai-explorer',
+  'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fchrome-devtools-user',
+  'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fcode-whisperer',
+  'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fdom-detective',
+  'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fspeedster',
+  'program-link',
   'progress',
   'prop',
   'prop1',
@@ -2963,6 +2972,7 @@ export const knownContextValues = new Set([
   'rec-2020',
   'recalc-style-count',
   'receive',
+  'receive-badges',
   'receive-gdp-badges',
   'recommendation',
   'reconnect',
@@ -2996,6 +3006,7 @@ export const knownContextValues = new Set([
   'release-notes',
   'reload-required',
   'rem',
+  'remind-me-later',
   'remote-address',
   'remote-address-space',
   'remote-debnugging-terminated',
@@ -3436,6 +3447,7 @@ export const knownContextValues = new Set([
   'sidebar-position-right',
   'sidebar-test-replace-page-with-object',
   'sign-count',
+  'sign-up',
   'signCount',
   'simulate',
   'simulate-custom-quota',
@@ -4042,6 +4054,7 @@ export const knownContextValues = new Set([
   'view-computed-value',
   'view-details',
   'view-parsed',
+  'view-profile',
   'view-source',
   'view-timeline',
   'view-timeline-axis',

package/front_end/ui/visual_logging/README.md

@@ -60,20 +60,22 @@ element. There’s a number of fluent builder functions exported
 the attribute value. These are all bound versions of
 `LoggingConfig.makeConfigStringBuilder` and are used in the legacy UI as:
 
-```js
+```ts
 this.element.setAttribute('jslog', `${VisualLogging.panel(context)}`);
 ```
 
 or
 
-```js
-button.element.setAttribute('jslog', `${VisualLogging.dropDown('rendering-emulations')
-    .track({click: true})}`);
+```ts
+button.element.setAttribute(
+  'jslog',
+  `${VisualLogging.dropDown('rendering-emulations').track({ click: true })}`,
+);
 ```
 
 In LitHTML, the usage is:
 
-```js
+```ts
 Lit.html`<td jslog=${VisualLogging.tableCell(/* context */ col.id)
         .track({click: true})}>
 ```
@@ -121,27 +123,37 @@ First argument is a provider name that is later used as an argument in the
 `jslog` builder `context()` method. Second is a function that takes an Element or Event
 and returns a number. For a disclosure triangle, this is as follows:
 
-```js
+```ts
 function disclosureTriangleLoggingContextProvider(
-    e: VisualLogging.Loggable|Event): Promise<number|undefined> {
+  e: VisualLogging.Loggable | Event,
+): Promise<number | undefined> {
   if (e instanceof Element) {
     return Promise.resolve(e.classList.contains('parent') ? 1 : 0);
   }
   if (e instanceof MouseEvent && e.currentTarget instanceof Node) {
-    const treeElement = TreeElement.getTreeElementBylistItemNode(e.currentTarget);
+    const treeElement = TreeElement.getTreeElementBylistItemNode(
+      e.currentTarget,
+    );
     if (treeElement) {
-      return Promise.resolve(treeElement.isEventWithinDisclosureTriangle(e) ? 1 : 0);
+      return Promise.resolve(
+        treeElement.isEventWithinDisclosureTriangle(e) ? 1 : 0,
+      );
     }
   }
   return Promise.resolve(undefined);
 }
 
-
-VisualLogging.registerContextProvider('disclosureTriangle',
-    disclosureTriangleLoggingContextProvider);
-
-listItemNode.setAttribute('jslog', `${VisualLogging.treeItem()
-    .track({click: true}).context('disclosureTriangle')}`);
+VisualLogging.registerContextProvider(
+  'disclosureTriangle',
+  disclosureTriangleLoggingContextProvider,
+);
+
+listItemNode.setAttribute(
+  'jslog',
+  `${VisualLogging.treeItem()
+    .track({ click: true })
+    .context('disclosureTriangle')}`,
+);
 ```
 
 Similarly parent provides are used to specify parent visual elements in
@@ -150,18 +162,18 @@ to identify the parent. However, sometimes, markup doesn’t reflect the logical
 structure, for example, when a legacy tree outline has children in an `<ol>` element, which is a
 sibling of `<li>` that specifies the parent. In this case, you can do the following:
 
-```js
-function loggingParentProvider(e: Element): Element|undefined {
+```ts
+function loggingParentProvider(e: Element): Element | undefined {
   const treeElement = TreeElement.getTreeElementBylistItemNode(e);
   return treeElement?.parent?.listItemElement;
 }
 
-VisualLogging.registerParentProvider('parentTreeItem',
-        loggingParentProvider);
+VisualLogging.registerParentProvider('parentTreeItem', loggingParentProvider);
 
 this.listItemNode.setAttribute(
-       'jslog',
-       `${VisualLogging.treeItem().track({click: true}).parent('parentTreeItem')}`);
+  'jslog',
+  `${VisualLogging.treeItem().track({ click: true }).parent('parentTreeItem')}`,
+);
 ```
 
 ### Logging beyond DOM
@@ -182,11 +194,15 @@ Then call `registerLoggable` with the corresponding JavaScript
 object, config string in the same format as the `jslog` attribute would have,
 and an optional parent JavaScript object. For a native menu item, this is:
 
-
-```js
-VisualLogging.registerLoggable(descriptor, `${VisualLogging.action()
-    .track({click: true}).context(descriptor.jslogContext)}`,
-    parent || descriptors, size);
+```ts
+VisualLogging.registerLoggable(
+  descriptor,
+  `${VisualLogging.action()
+    .track({ click: true })
+    .context(descriptor.jslogContext)}`,
+  parent || descriptors,
+  size,
+);
 ```
 
 This only registers the element and doesn’t log anything yet. To log
@@ -198,7 +214,7 @@ Similarly to log click, call `VisualLogging.logClick`.
 You may find it useful to see which UI elements are annotated and how the tree
 structure look like. To do that, run
 
-```js
+```ts
 setVeDebuggingEnabled(true);
 ```
 

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1516909"
+  "version": "1.0.1518653"
 }