chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

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/legacy/components/source_frame/XMLView.ts

@@ -129,7 +129,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         }
       }
     }
-    return input.search.highlight(highlights, selected);
+    return UI.TreeOutline.TreeSearch.highlight(highlights, selected);
   }
 
   function layOutNode(node: XMLTreeViewNode, populateSubtrees = false): Lit.LitTemplate {
@@ -138,13 +138,15 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
     // clang-format off
     return html`
-    <li
-      ${highlight(node, /* closeTag=*/ false)}
-      role="treeitem"
-      ?selected=${input.jumpToNextSearchResult?.node === node}
-      @expand=${onExpand}>
-        ${htmlView(node)}${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
-    </li>`;
+      <li ${highlight(node, /* closeTag=*/ false)} role="treeitem"
+          ?selected=${input.jumpToNextSearchResult?.node === node}
+          @expand=${onExpand}>
+        ${htmlView(node)}
+        ${node.children().length ? html`
+          <ul role="group" ?hidden=${!node.expanded}>
+            ${populateSubtrees || input.search ? subtree(node) : Lit.nothing}
+          </ul>` : Lit.nothing}
+      </li>`;
     // clang-format on
   }
 
@@ -154,15 +156,14 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       return Lit.nothing;
     }
     // clang-format off
-    return html`<ul role="group" ?hidden=${!treeNode.expanded}>
+    return html`
       ${children.map(child => layOutNode(child, treeNode.expanded))}
       ${treeNode.node instanceof Element
           ? html`<li
                   ${highlight(treeNode, /* closeTag=*/ true)}
                   role="treeitem"><span part='shadow-xml-view-close-tag'>${'</' + treeNode.node.tagName + '>'}</span
                  ></li>`
-          : Lit.nothing}
-        </ul>`;
+          : Lit.nothing}`;
     // clang-format on
   }
 

package/front_end/ui/lit/i18n-template.ts

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// This files is import lit directly
+/* eslint-disable rulesdir/lit-template-result-or-nothing */
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as I18n from '../../third_party/i18n/i18n.js';
 import * as Lit from '../../third_party/lit/lit.js';
@@ -14,10 +17,10 @@ const {html} = Lit.StaticHtml;
  */
 export function i18nTemplate(
     registeredStrings: I18n.LocalizedStringSet.RegisteredFileStrings, stringId: string,
-    placeholders: Record<string, Lit.TemplateResult|string>): Lit.TemplateResult {
+    placeholders: Record<string, Lit.TemplateResult|string>): Lit.TemplateResult|typeof Lit.nothing {
   const formatter = registeredStrings.getLocalizedStringSetFor(i18n.DevToolsLocale.DevToolsLocale.instance().locale)
                         .getMessageFormatterFor(stringId);
-  let result = html``;
+  let result: Lit.TemplateResult|typeof Lit.nothing = Lit.nothing;
   for (const icuElement of formatter.getAst()) {
     if (icuElement.type === /* argumentElement */ 1) {
       const placeholderValue = placeholders[icuElement.value];

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -348,9 +348,11 @@ export const knownContextValues = new Set([
   'ai-code-completion-citations.citation-link',
   'ai-code-completion-disclaimer',
   'ai-code-completion-enabled',
+  'ai-code-completion-spinner-tooltip',
   'ai-code-completion-teaser-dismissed',
   'ai-code-completion-teaser.dismiss',
   'ai-code-completion-teaser.fre',
+  'ai-explorer',
   'ai_assistance',
   'align-content',
   'align-content-center',
@@ -540,6 +542,7 @@ export const knownContextValues = new Set([
   'background-services',
   'background-size',
   'background-sync',
+  'badge-notification',
   'badge-notification.dismiss',
   'badproperty',
   'bars',
@@ -713,6 +716,7 @@ export const knownContextValues = new Set([
   'chrome-android-mobile-high-end',
   'chrome-android-tablet',
   'chrome-chrome-os',
+  'chrome-devtools-user',
   'chrome-extension://fmkadmapgofadopljbjfkapdkoienihi⚛️Components',
   'chrome-extension://fmkadmapgofadopljbjfkapdkoienihi⚛️Profiler',
   'chrome-extension://ienfalfjdbdpebioblfackkekamfmbnhAngular',
@@ -780,6 +784,7 @@ export const knownContextValues = new Set([
   'code-snippets-explainer.console-insights',
   'code-snippets-explainer.freestyler',
   'code-snippets-explainer.patch-widget',
+  'code-whisperer',
   'collapse',
   'collapse-children',
   'collapsed-files',
@@ -884,6 +889,7 @@ export const knownContextValues = new Set([
   'content',
   'content-encoding',
   'content-length',
+  'content-policy',
   'content-type',
   'content-visibility',
   'context',
@@ -1028,6 +1034,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',
@@ -1277,6 +1284,7 @@ export const knownContextValues = new Set([
   'dom-attr-modified',
   'dom-character-data-modified',
   'dom-content-loaded',
+  'dom-detective',
   'dom-focus-in',
   'dom-focus-out',
   'dom-mutation',
@@ -1692,12 +1700,9 @@ 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',
+  'gdp.ai-conversation-count',
   'gen-ai-settings-panel',
   'general',
   'generative-ai-terms-of-service',
@@ -1985,6 +1990,7 @@ export const knownContextValues = new Set([
   'justify-self',
   'ka',
   'keep-alive',
+  'keep-me-updated',
   'key',
   'keybinds',
   'keyboard',
@@ -2403,6 +2409,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 +2698,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 +2896,7 @@ export const knownContextValues = new Set([
   'priority',
   'privacy',
   'privacy-notice',
+  'privacy-policy',
   'privacy-policy.console-insights',
   'private-state-tokens',
   'production-origin',
@@ -2911,6 +2920,7 @@ export const knownContextValues = new Set([
   'profiler.profile-type',
   'profiler.save-to-file',
   'profiles-sidebar',
+  'program-link',
   'progress',
   'prop',
   'prop1',
@@ -2963,6 +2973,7 @@ export const knownContextValues = new Set([
   'rec-2020',
   'recalc-style-count',
   'receive',
+  'receive-badges',
   'receive-gdp-badges',
   'recommendation',
   'reconnect',
@@ -2996,6 +3007,7 @@ export const knownContextValues = new Set([
   'release-notes',
   'reload-required',
   'rem',
+  'remind-me-later',
   'remote-address',
   'remote-address-space',
   'remote-debnugging-terminated',
@@ -3119,6 +3131,7 @@ export const knownContextValues = new Set([
   'rpId',
   'ru',
   'ruby-align',
+  'ruby-overhang',
   'ruby-position',
   'rule',
   'rule-color',
@@ -3436,6 +3449,7 @@ export const knownContextValues = new Set([
   'sidebar-position-right',
   'sidebar-test-replace-page-with-object',
   'sign-count',
+  'sign-up',
   'signCount',
   'simulate',
   'simulate-custom-quota',
@@ -3529,6 +3543,7 @@ export const knownContextValues = new Set([
   'speak',
   'speak-as',
   'speculative-loads',
+  'speedster',
   'spread',
   'sq',
   'sr',
@@ -3748,6 +3763,7 @@ export const knownContextValues = new Set([
   'timeline-trigger-name',
   'timeline-trigger-range-end',
   'timeline-trigger-range-start',
+  'timeline-trigger-source',
   'timeline-trigger-timeline',
   'timeline-user-has-opened-sidebar-once',
   'timeline-v8-runtime-call-stats',
@@ -4042,6 +4058,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.1519267"
 }