chrome-devtools-frontend 1.0.1515988 → 1.0.1518653

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',
@@ -1907,6 +1906,8 @@ export const knownContextValues = new Set([
   'interactions',
   'interactivity',
   'interest-delay',
+  'interest-delay-end',
+  'interest-delay-start',
   'interest-groups',
   'interest-hide-delay',
   'interest-show-delay',
@@ -1983,6 +1984,7 @@ export const knownContextValues = new Set([
   'justify-self',
   'ka',
   'keep-alive',
+  'keep-me-updated',
   'key',
   'keybinds',
   'keyboard',
@@ -2401,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',
@@ -2689,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',
@@ -2886,6 +2890,7 @@ export const knownContextValues = new Set([
   'priority',
   'privacy',
   'privacy-notice',
+  'privacy-policy',
   'privacy-policy.console-insights',
   'private-state-tokens',
   'production-origin',
@@ -2909,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',
@@ -2961,6 +2972,7 @@ export const knownContextValues = new Set([
   'rec-2020',
   'recalc-style-count',
   'receive',
+  'receive-badges',
   'receive-gdp-badges',
   'recommendation',
   'reconnect',
@@ -2994,6 +3006,7 @@ export const knownContextValues = new Set([
   'release-notes',
   'reload-required',
   'rem',
+  'remind-me-later',
   'remote-address',
   'remote-address-space',
   'remote-debnugging-terminated',
@@ -3434,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',
@@ -3547,6 +3561,9 @@ export const knownContextValues = new Set([
   'start-time',
   'start-url',
   'start-view',
+  'starter-badge-dismissed',
+  'starter-badge-last-snoozed-timestamp',
+  'starter-badge-snooze-count',
   'static-global-setting',
   'static-synced-setting',
   'status',
@@ -4037,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.1515988"
+  "version": "1.0.1518653"
 }