chrome-devtools-frontend 1.0.1652307 → 1.0.1654411

package/front_end/panels/timeline/components/MetricCard.ts

@@ -123,9 +123,9 @@ const UIStrings = {
    */
   recDynamicContentCLS: 'Dynamic content can influence what layout shifts happen.',
   /**
-   * @description Column header for table cell values representing the phase/component/stage/section of a larger duration.
+   * @description Column header for table cell values representing the subpart/component/stage/section of a larger duration.
    */
-  phase: 'Phase',
+  subpart: 'Subpart',
   /**
    * @description Tooltip text for a link that goes to documentation explaining the Largest Contentful Paint (LCP) metric. "LCP" is an acronym and should not be translated.
    */
@@ -145,7 +145,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/MetricCard.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export type PhaseTable = Array<[string, Trace.Types.Timing.Milli, Trace.Types.Timing.Milli?]>;
+export type SubpartTable = Array<[string, Trace.Types.Timing.Milli, Trace.Types.Timing.Milli?]>;
 
 export interface MetricCardData {
   metric: 'LCP'|'CLS'|'INP';
@@ -153,7 +153,7 @@ export interface MetricCardData {
   fieldValue?: number|string;
   histogram?: CrUXManager.MetricResponse['histogram'];
   tooltipContainer?: HTMLElement;
-  phases?: PhaseTable;
+  subparts?: SubpartTable;
   warnings?: string[];
 }
 
@@ -566,30 +566,30 @@ export class MetricCard extends HTMLElement {
     // clang-format on
   }
 
-  #renderPhaseTable(phases: PhaseTable): Lit.LitTemplate {
-    const hasFieldData = phases.every(phase => phase[2] !== undefined);
+  #renderSubpartTable(subparts: SubpartTable): Lit.LitTemplate {
+    const hasFieldData = subparts.every(subpart => subpart[2] !== undefined);
 
     // clang-format off
     return html`
       <hr class="divider">
-      <div class="phase-table" role="table">
-        <div class="phase-table-row phase-table-header-row" role="row">
-          <div role="columnheader" style="grid-column: 1">${i18nString(UIStrings.phase)}</div>
-          <div role="columnheader" class="phase-table-value" style="grid-column: 2">${i18nString(UIStrings.localValue)}</div>
+      <div class="subpart-table" role="table">
+        <div class="subpart-table-row subpart-table-header-row" role="row">
+          <div role="columnheader" style="grid-column: 1">${i18nString(UIStrings.subpart)}</div>
+          <div role="columnheader" class="subpart-table-value" style="grid-column: 2">${i18nString(UIStrings.localValue)}</div>
           ${hasFieldData ? html`
             <div
               role="columnheader"
-              class="phase-table-value"
+              class="subpart-table-value"
               style="grid-column: 3"
               title=${i18nString(UIStrings.field75thPercentile)}>${i18nString(UIStrings.fieldP75)}</div>
           ` : nothing}
         </div>
-        ${phases.map(phase => html`
-          <div class="phase-table-row" role="row">
-            <div role="cell">${phase[0]}</div>
-            <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[1])}</div>
-            ${phase[2] !== undefined ? html`
-              <div role="cell" class="phase-table-value">${i18n.TimeUtilities.preciseMillisToString(phase[2])}</div>
+        ${subparts.map(subpart => html`
+          <div class="subpart-table-row" role="row">
+            <div role="cell">${subpart[0]}</div>
+            <div role="cell" class="subpart-table-value">${i18n.TimeUtilities.preciseMillisToString(subpart[1])}</div>
+            ${subpart[2] !== undefined ? html`
+              <div role="cell" class="subpart-table-value">${i18n.TimeUtilities.preciseMillisToString(subpart[2])}</div>
             ` : nothing}
           </div>
         `)}
@@ -659,7 +659,7 @@ export class MetricCard extends HTMLElement {
                   ${this.#renderDetailedCompareString()}
                   <hr class="divider">
                   ${this.#renderFieldHistogram()}
-                  ${localValue && this.#data.phases ? this.#renderPhaseTable(this.#data.phases) : nothing}
+                  ${localValue && this.#data.subparts ? this.#renderSubpartTable(this.#data.subparts) : nothing}
                 </div>
               </div>
             </div>

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -175,7 +175,7 @@
 }
 
 .interaction {
-  --phase-table-margin: 120px;
+  --subpart-table-margin: 120px;
   --details-indicator-width: 18px;
 
   summary {
@@ -200,7 +200,7 @@
 
 .interaction-type {
   font-weight: var(--ref-typeface-weight-medium);
-  width: calc(var(--phase-table-margin) - var(--details-indicator-width));
+  width: calc(var(--subpart-table-margin) - var(--details-indicator-width));
   flex-shrink: 0;
 }
 
@@ -344,18 +344,18 @@ devtools-link {
   }
 }
 
-.phase-table {
+.subpart-table {
   border-top: 1px solid var(--sys-color-divider);
   padding: 7px 4px;
-  margin-left: var(--phase-table-margin);
+  margin-left: var(--subpart-table-margin);
 }
 
-.phase-table-row {
+.subpart-table-row {
   display: flex;
   justify-content: space-between;
 }
 
-.phase-table-header-row {
+.subpart-table-header-row {
   font-weight: var(--ref-typeface-weight-medium);
   margin-bottom: 4px;
 }

package/front_end/panels/timeline/components/metricCard.css

@@ -196,20 +196,20 @@ details.environment-recs[open] > summary::before {
   }
 }
 
-.phase-table {
+.subpart-table {
   display: grid;
   column-gap: var(--sys-size-3);
   white-space: nowrap;
 }
 
-.phase-table-row {
+.subpart-table-row {
   display: contents;
 }
 
-.phase-table-value {
+.subpart-table-value {
   text-align: right;
 }
 
-.phase-table-header-row {
+.subpart-table-header-row {
   font-weight: var(--ref-typeface-weight-medium);
 }

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -45,15 +45,15 @@ let releaseNote: ReleaseNote = {
   markdownLinks: [
     {
       key: 'devtools-for-agents',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-149/#devtools-for-agents',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#devtools-for-agents',
     },
     {
       key: 'ai-assistance',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-149/#ai-assistance',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#ai-assistance',
     },
     {
       key: 'css-container-function',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-149/#css-container-function',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-150/#css-container-function',
     }
   ],
   videoLinks: [

package/front_end/panels/whats_new/resources/WNDT.md

@@ -9,7 +9,7 @@ The agent walkthrough in the updated AI assistance panel now renders rich widget
 for performance network tracks, timeline event summaries, network requests,
 syntax-highlighted source code, and inspected file lists.
 
-### [`@container` and `@function`](css-container-function)
+### [@container and @function](css-container-function)
 
 You can now directly edit `@container` and `@function`
 rules within the Styles tab, allowing for seamless experimentation.

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 6582413b9079ea54aca3360b183c9206bc30ce81
+Revision: 059c884787b1bc15faa5afe5250f7d3a7e0ef64a
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/legacy/InspectorDrawerView.ts

@@ -244,6 +244,7 @@ export class InspectorDrawerView {
     const wasDrawerVisible = this.isVisibleForEvents();
     this.tabbedPane.setAutoSelectFirstItemOnShow(!hasTargetDrawer);
     this.#splitWidget.showBoth();
+    this.#updatePresentation(this.isMinimized());
     this.#dispatchPaneVisibilityChangedIfNeeded(wasDrawerVisible);
   }
 
@@ -251,8 +252,8 @@ export class InspectorDrawerView {
     const wasDrawerVisible = this.isVisibleForEvents();
     const wasMinimized = this.isMinimized();
     this.#splitWidget.hideSidebar(!wasMinimized);
+    this.#updatePresentation(false);
     if (wasMinimized) {
-      this.#updatePresentation(false);
       this.#splitWidget.setSidebarMinimized(false);
       this.#splitWidget.setResizable(true);
     }
@@ -341,11 +342,12 @@ export class InspectorDrawerView {
   }
 
   #updatePresentation(minimized: boolean): void {
+    const requireVerticalMinimumWidth =
+        this.#splitWidget.isVertical() && this.#splitWidget.sidebarIsShowing() && !minimized;
+    this.#setInspectorMinimumSize(requireVerticalMinimumWidth ? this.#minimumSizes.inspectorWidthWhenVertical :
+                                                                this.#minimumSizes.inspectorWidthWhenHorizontal,
+                                  this.#minimumSizes.inspectorHeight);
     const drawerIsVertical = this.#splitWidget.isVertical();
-    this.#setInspectorMinimumSize(
-        drawerIsVertical ? this.#minimumSizes.inspectorWidthWhenVertical :
-                           this.#minimumSizes.inspectorWidthWhenHorizontal,
-        this.#minimumSizes.inspectorHeight);
     this.updatePresentation({
       isVertical: drawerIsVertical,
       isMinimized: minimized,

package/front_end/ui/legacy/ListWidget.ts

@@ -64,6 +64,7 @@ export class ListWidget<T> extends VBox {
   private editElement: HTMLElement|null;
   private emptyPlaceholder: Element|null;
   private isTable: boolean;
+  private headerElement: Element|null = null;
   constructor(delegate: Delegate<T>, delegatesFocus = true, isTable = false) {
     super({useShadowDom: true, delegatesFocus});
     this.registerRequiredCSS(listWidgetStyles);
@@ -100,10 +101,21 @@ export class ListWidget<T> extends VBox {
     this.elements = [];
     this.lastSeparator = false;
     this.list.removeChildren();
+    if (this.headerElement) {
+      this.list.appendChild(this.headerElement);
+    }
     this.updatePlaceholder();
     this.stopEditing();
   }
 
+  setHeader(header: Element): void {
+    if (this.headerElement) {
+      this.headerElement.remove();
+    }
+    this.headerElement = header;
+    this.list.insertBefore(header, this.list.firstChild);
+  }
+
   updateItem(index: number, newItem: T, editable: boolean, focusable = true, controlLabels: {
     edit?: string,
     delete?: string,

package/front_end/ui/legacy/SplitWidget.ts

@@ -54,6 +54,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   #showMode: ShowMode = ShowMode.BOTH;
   #savedShowMode: ShowMode;
   #autoAdjustOrientation = false;
+  readonly #zoomManager = ZoomManager.instance();
 
   constructor(
       isVertical: boolean,
@@ -401,7 +402,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   }
 
   setSidebarSize(size: number): void {
-    const sizeDIP = ZoomManager.instance().cssToDIP(size);
+    const sizeDIP = this.#zoomManager.cssToDIP(size);
     this.#savedSidebarSizeDIP = sizeDIP;
     this.#saveSetting();
     this.#setSidebarSizeDIP(sizeDIP, false, true);
@@ -409,12 +410,12 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   sidebarSize(): number {
     const sizeDIP = Math.max(0, this.#sidebarSizeDIP);
-    return ZoomManager.instance().dipToCSS(sizeDIP);
+    return this.#zoomManager.dipToCSS(sizeDIP);
   }
 
   totalSize(): number {
     const sizeDIP = Math.max(0, this.#totalSizeDIP());
-    return ZoomManager.instance().dipToCSS(sizeDIP);
+    return this.#zoomManager.dipToCSS(sizeDIP);
   }
 
   /**
@@ -426,7 +427,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       this.#totalSizeCSS = this.#isVertical ? width : height;
       this.#totalSizeOtherDimensionCSS = this.#isVertical ? height : width;
     }
-    return ZoomManager.instance().cssToDIP(this.#totalSizeCSS);
+    return this.#zoomManager.cssToDIP(this.#totalSizeCSS);
   }
 
   #updateShowMode(showMode: ShowMode): void {
@@ -457,7 +458,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.#removeAllLayoutProperties();
 
     // this.#totalSizeDIP is available below since we successfully applied constraints.
-    const sizeCSS = ZoomManager.instance().dipToCSS(sizeDIP);
+    const sizeCSS = this.#zoomManager.dipToCSS(sizeDIP);
     const sidebarSizeValue = sizeCSS + 'px';
     const mainSizeValue = (this.#totalSizeCSS - sizeCSS) + 'px';
     // With `box-sizing: border-box` on the sidebar (set in splitWidget.css),
@@ -519,8 +520,8 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
       animatedMarginPropertyName = this.#secondIsSidebar ? 'margin-bottom' : 'margin-top';
     }
 
-    const marginFrom = reverse ? '0' : '-' + ZoomManager.instance().dipToCSS(this.#sidebarSizeDIP) + 'px';
-    const marginTo = reverse ? '-' + ZoomManager.instance().dipToCSS(this.#sidebarSizeDIP) + 'px' : '0';
+    const marginFrom = reverse ? '0' : '-' + this.#zoomManager.dipToCSS(this.#sidebarSizeDIP) + 'px';
+    const marginTo = reverse ? '-' + this.#zoomManager.dipToCSS(this.#sidebarSizeDIP) + 'px' : '0';
 
     // This order of things is important.
     // 1. Resize main element early and force layout.
@@ -587,7 +588,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   #applyConstraints(sidebarSize: number, userAction?: boolean): number {
     const totalSize = this.#totalSizeDIP();
-    const zoomFactor = this.#constraintsInDip ? 1 : ZoomManager.instance().zoomFactor();
+    const zoomFactor = this.#constraintsInDip ? 1 : this.#zoomManager.zoomFactor();
 
     let constraints: Geometry.Constraints =
         this.#sidebarWidget ? this.#sidebarWidget.constraints() : new Geometry.Constraints();
@@ -653,12 +654,12 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
   override wasShown(): void {
     super.wasShown();
     this.#forceUpdateLayout();
-    ZoomManager.instance().addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
+    this.#zoomManager.addEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
   }
 
   override willHide(): void {
     super.willHide();
-    ZoomManager.instance().removeEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
+    this.#zoomManager.removeEventListener(ZoomManagerEvents.ZOOM_CHANGED, this.onZoomChanged, this);
   }
 
   override onResize(): void {
@@ -711,7 +712,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
 
   #onResizeUpdate(event: Common.EventTarget.EventTargetEvent<ResizeUpdatePositionEvent>): void {
     const offset = event.data.currentPosition - event.data.startPosition;
-    const offsetDIP = ZoomManager.instance().cssToDIP(offset);
+    const offsetDIP = this.#zoomManager.cssToDIP(offset);
     const newSizeDIP =
         this.#secondIsSidebar ? this.#resizeStartSizeDIP - offsetDIP : this.#resizeStartSizeDIP + offsetDIP;
     const constrainedSizeDIP = this.#applyConstraints(newSizeDIP, true);

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

@@ -291,7 +291,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
 
   #findNextExistingNode(element: Element): DataGridElementNode|null {
     for (let e = element.nextElementSibling; e; e = e.nextElementSibling) {
-      const nextNode = DataGridElementNode.get(e);
+      const nextNode = getNode(e);
       if (nextNode) {
         return nextNode;
       }
@@ -302,7 +302,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   override addNodes(nodes: NodeList): void {
     for (const element of this.#getDataRows(nodes)) {
       const parentRow = element.parentElement?.closest('td')?.closest('tr');
-      const parentDataGridNode = parentRow ? DataGridElementNode.get(parentRow) : undefined;
+      const parentDataGridNode = parentRow ? getNode(parentRow) : undefined;
       const parentNode = parentDataGridNode || this.#dataGrid.rootNode();
       const nextNode = this.#findNextExistingNode(element);
       const index = nextNode ? parentNode.children.indexOf(nextNode) : parentNode.children.length;
@@ -333,9 +333,9 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
 
   override removeNodes(nodes: NodeList): void {
     for (const element of this.#getDataRows(nodes)) {
-      const node = DataGridElementNode.get(element);
+      const node = getNode(element);
       if (node) {
-        DataGridElementNode.remove(node);
+        removeNode(node);
       }
     }
   }
@@ -345,7 +345,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
       node = node.parentNode;
     }
     const dataRow = node instanceof HTMLElement ? node.closest('tr') : null;
-    const dataGridNode = dataRow ? DataGridElementNode.get(dataRow) : null;
+    const dataGridNode = dataRow ? getNode(dataRow) : null;
     if (dataGridNode && dataRow) {
       if (attributeName === 'selected') {
         if (hasBooleanAttribute(dataRow, 'selected')) {
@@ -372,7 +372,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
 
   #updateCreationNode(): void {
     if (this.#usedCreationNode) {
-      DataGridElementNode.remove(this.#usedCreationNode);
+      removeNode(this.#usedCreationNode);
       this.#usedCreationNode = null;
       this.#dataGrid.creationNode = undefined;
     }
@@ -380,7 +380,7 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
     if (!placeholder) {
       this.#dataGrid.creationNode?.remove();
       this.#dataGrid.creationNode = undefined;
-    } else if (!DataGridElementNode.get(placeholder)) {
+    } else if (!getNode(placeholder)) {
       this.#dataGrid.creationNode?.remove();
       const node = new DataGridElementNode(placeholder, this);
       this.#dataGrid.creationNode = node;
@@ -447,24 +447,21 @@ export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate
   }
 }
 
+const elementToNode = new WeakMap<Element, DataGridElementNode>();
+
 class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
-  static #elementToNode = new WeakMap<Element, DataGridElementNode>();
   #configElement: Element;
   #dataGridElement: DataGridElement;
   #addedClasses = new Set<string>();
   constructor(configElement: Element, dataGridElement: DataGridElement) {
     super();
     this.#configElement = configElement;
-    DataGridElementNode.#elementToNode.set(configElement, this);
+    elementToNode.set(configElement, this);
     this.#dataGridElement = dataGridElement;
     this.#updateData();
     this.isCreationNode = hasBooleanAttribute(this.#configElement, 'placeholder');
   }
 
-  static get(configElement: Element|undefined): DataGridElementNode|undefined {
-    return configElement && DataGridElementNode.#elementToNode.get(configElement);
-  }
-
   get configElement(): Element {
     return this.#configElement;
   }
@@ -576,11 +573,6 @@ class DataGridElementNode extends SortableDataGridNode<DataGridElementNode> {
     return cell;
   }
 
-  static remove(node: DataGridElementNode): void {
-    DataGridElementNode.#elementToNode.delete(node.#configElement);
-    node.remove();
-  }
-
   override deselect(): void {
     super.deselect();
     if (this.isCreationNode) {
@@ -633,7 +625,7 @@ class IfExpandedDirective extends Lit.Directive.Directive {
     if (!(element instanceof HTMLElement)) {
       return false;
     }
-    const node = DataGridElementNode.get(element.closest('tr') ?? undefined);
+    const node = getNode(element.closest('tr') ?? undefined);
     if (!node) {
       return false;
     }
@@ -641,3 +633,15 @@ class IfExpandedDirective extends Lit.Directive.Directive {
   }
 }
 export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
+
+function getNode(element: Element|undefined): DataGridElementNode|undefined {
+  return element ? elementToNode.get(element) : undefined;
+}
+
+function removeNode(node: DataGridElementNode): void {
+  const configElement = node.configElement;
+  if (configElement) {
+    elementToNode.delete(configElement);
+  }
+  node.remove();
+}

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

@@ -81,7 +81,14 @@ export class CustomPreviewSection {
       return document.createTextNode(String(jsonML));
     }
 
-    return jsonML[0] === 'object' ? this.layoutObjectTag(jsonML) : this.renderElement(jsonML);
+    if (jsonML[0] !== 'object') {
+      return this.renderElement(jsonML);
+    }
+    if (jsonML.length !== 2) {
+      Common.Console.Console.instance().error('Broken formatter: object reference must contain exactly two elements');
+      return document.createElement('span');
+    }
+    return this.layoutObjectTag(jsonML);
   }
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)