chrome-devtools-frontend 1.0.1700561 → 1.0.1702515

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -729,9 +729,6 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   }
 
   setEditingStyle(editing: boolean): void {
-    if (editing) {
-      this.isSuppressingResets = false;
-    }
     if (this.isEditingStyle === editing) {
       return;
     }
@@ -816,12 +813,13 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   #scheduleResetUpdateIfNotEditing(): void {
     this.scheduleResetUpdateIfNotEditingCalledForTest();
 
-    if (this.isSuppressingResets) {
+    // Don't schedule if editing; the edit completion will handle the update.
+    if (this.userOperation || this.isEditingStyle) {
       return;
     }
 
-    // Don't schedule if editing; the edit completion will handle the update.
-    if (this.userOperation || this.isEditingStyle) {
+    if (this.isSuppressingResets) {
+      this.isSuppressingResets = false;
       return;
     }
 
@@ -1128,27 +1126,39 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
     }
   }
 
-  private getStyleId(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): string {
+  private getStyleId(section: StylePropertiesSection): string {
+    const style = section.styleInternal;
+    const node = section.matchedStyles.isInherited(style) ? section.matchedStyles.nodeForStyle(style) :
+                                                            section.matchedStyles.node();
+    const nodeId = node?.id ?? '';
     if (style.range) {
-      return `${style.styleSheetId || ''}:${style.range.toString()}`;
+      return `${nodeId}:${style.styleSheetId || ''}:${style.range.toString()}`;
     }
     if (style.type === SDK.CSSStyleDeclaration.Type.Inline || style.type === SDK.CSSStyleDeclaration.Type.Attributes) {
-      return style.type;
+      return `${nodeId}:${style.type}`;
     }
     if (style.type === SDK.CSSStyleDeclaration.Type.Animation) {
-      return `${style.type}:${style.animationName() || ''}:${style.cssText}`;
+      return `${nodeId}:${style.type}:${style.animationName() || ''}:${style.cssText}`;
     }
     const parentRule = style.parentRule;
     if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      return `${style.type}:${parentRule.selectorText()}`;
+      const ruleTypes = parentRule.ruleTypes.join(',');
+      const nesting = parentRule.nestingSelectors?.join(',') ?? '';
+      const media = parentRule.media.map(m => m.text).join(',');
+      const containers = parentRule.containerQueries.map(c => c.text).join(',');
+      const supports = parentRule.supports.map(s => s.text).join(',');
+      const scopes = parentRule.scopes.map(s => s.text).join(',');
+      const layers = parentRule.layers.map(l => l.text).join(',');
+      return `${nodeId}:${style.type}:${parentRule.selectorText()}:${ruleTypes}:${nesting}:${media}:${containers}:${
+          supports}:${scopes}:${layers}`;
     }
     if (parentRule instanceof SDK.CSSRule.CSSKeyframeRule) {
-      return `${style.type}:${parentRule.parentRuleName()}:${parentRule.key().text}`;
+      return `${nodeId}:${style.type}:${parentRule.parentRuleName()}:${parentRule.key().text}`;
     }
     if (parentRule instanceof SDK.CSSRule.CSSPropertyRule) {
-      return `${style.type}:${parentRule.propertyName().text}`;
+      return `${nodeId}:${style.type}:${parentRule.propertyName().text}`;
     }
-    return `${style.type}:${style.cssText}`;
+    return `${nodeId}:${style.type}:${style.cssText}`;
   }
 
   rebuildSectionsForMatchedStyleRulesForTest(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
@@ -1172,7 +1182,7 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
 
     this.idleCallbackManager = new IdleCallbackManager();
 
-    const blocks = [new SectionBlock(null)];
+    const blocks = [new SectionBlock(null, undefined, undefined, 'main')];
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
 
@@ -1185,7 +1195,7 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       if (parentRule instanceof SDK.CSSRule.CSSStyleRule) {
         const layers = parentRule.layers;
         if ((layers.length || lastLayers) && lastLayers !== layers) {
-          const block = SectionBlock.createLayerBlock(parentRule);
+          const block = SectionBlock.createLayerBlock(parentRule, lastLayerParent?.id);
           blocks.push(block);
           lastLayerParent?.childBlocks.push(block);
           sawLayers = true;
@@ -1411,37 +1421,36 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       return blocks;
     }
 
-    return this.mergeInactiveStyles(blocks);
-  }
-
-  private computeBlockIds(blocks: SectionBlock[]): Map<SectionBlock, string> {
-    let nullBlockCounter = 0;
-    const blockIds = new Map<SectionBlock, string>();
-    for (const block of blocks) {
-      blockIds.set(block, block.titleElement()?.textContent || `MAIN_BLOCK_NULL_${nullBlockCounter++}`);
-    }
-    return blockIds;
+    return this.mergeInactiveStyles(blocks, matchedStyles, computedStyles, parentsComputedStyles,
+                                    computedStyleExtraFields);
   }
 
-  private mergeInactiveStyles(blocks: SectionBlock[]): SectionBlock[] {
-    const blockIds = this.computeBlockIds(blocks);
-    for (const [id, block] of this.#allKnownBlocks) {
-      if (!blockIds.has(block)) {
-        blockIds.set(block, id);
-      }
-    }
-    const getBlockId = (block: SectionBlock): string => blockIds.get(block) || 'UNKNOWN_BLOCK';
+  private mergeInactiveStyles(
+      blocks: SectionBlock[],
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      computedStyles: Map<string, string>|null,
+      parentsComputedStyles: Map<string, string>|null,
+      computedStyleExtraFields: Protocol.CSS.ComputedStyleExtraFields|null,
+      ): SectionBlock[] {
+    const getBlockId = (block: SectionBlock): string => block.id;
 
     for (const block of blocks) {
       const bid = getBlockId(block);
       const knownBlock = this.#allKnownBlocks.get(bid);
       if (knownBlock) {
-        block.sections = mergeOrderedItems(
+        knownBlock.sections = mergeOrderedItems(
             knownBlock.sections,
             block.sections,
-            section => this.getStyleId(section.styleInternal),
-            section => section.setInactive(true),
+            section => this.getStyleId(section),
+            (section, active, newSection) => {
+              if (active && newSection) {
+                section.rebuildWithPayload(matchedStyles, newSection.style(), computedStyles, parentsComputedStyles,
+                                           computedStyleExtraFields);
+              }
+              section.setInactive(!active);
+            },
         );
+        block.sections = knownBlock.sections;
       }
     }
 
@@ -1450,7 +1459,11 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
         oldBlocks,
         blocks,
         getBlockId,
-        block => block.sections.forEach(section => section.setInactive(true)),
+        (block, active) => {
+          if (!active) {
+            block.sections.forEach(section => section.setInactive(true));
+          }
+        },
     );
 
     this.#allKnownBlocks.clear();
@@ -1458,6 +1471,19 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       this.#allKnownBlocks.set(getBlockId(block), block);
     }
 
+    // Restore child relationships using the new tree structure,
+    // but pointing to the final instances.
+    for (const newBlock of blocks) {
+      const finalBlock = this.#allKnownBlocks.get(getBlockId(newBlock));
+      if (finalBlock) {
+        const newChildBlocks =
+            newBlock.childBlocks.map(child => this.#allKnownBlocks.get(getBlockId(child))).filter(b => b !== undefined);
+        finalBlock.childBlocks = finalBlock === newBlock ?
+            newChildBlocks :
+            mergeOrderedItems(finalBlock.childBlocks, newChildBlocks, getBlockId, () => {});
+      }
+    }
+
     return finalBlocks;
   }
 
@@ -1873,7 +1899,7 @@ export class SectionBlock {
   childBlocks: SectionBlock[] = [];
   #expanded = false;
   #icon: Icon|undefined;
-  constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
+  constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean, readonly id = 'main') {
     this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
@@ -1907,7 +1933,7 @@ export class SectionBlock {
     const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
     const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
     separatorElement.textContent = i18nString(UIStrings.pseudoSElement, {PH1: pseudoTypeString});
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `pseudo:${pseudoType}:${pseudoArgument ?? ''}`);
   }
 
   static async createInheritedPseudoTypeBlock(pseudoType: Protocol.DOM.PseudoType, pseudoArgument: string|null,
@@ -1920,12 +1946,13 @@ export class SectionBlock {
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {preventKeyboardFocus: true});
     render(link, separatorElement);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false,
+                            `inherited-pseudo:${pseudoType}:${pseudoArgument ?? ''}:${node.id}`);
   }
 
   static createRegisteredPropertiesBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'registered-properties');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(REGISTERED_PROPERTY_SECTION_NAME));
     return block;
@@ -1933,7 +1960,7 @@ export class SectionBlock {
 
   static createFunctionBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'functions');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(FUNCTION_SECTION_NAME));
     return block;
@@ -1944,12 +1971,12 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('keyframes')}`);
     separatorElement.textContent = `@keyframes ${keyframesName}`;
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `keyframes:${keyframesName}`);
   }
 
   static createAtRuleBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
-    const block = new SectionBlock(separatorElement, true, expandedByDefault);
+    const block = new SectionBlock(separatorElement, true, expandedByDefault, 'at-rules');
     separatorElement.className = 'sidebar-separator';
     separatorElement.appendChild(document.createTextNode(i18nString(UIStrings.atRuleSection)));
     return block;
@@ -1960,7 +1987,7 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('position-try')}`);
     separatorElement.textContent = `@position-try ${positionTryName}`;
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `position-try:${positionTryName}`);
   }
 
   static async createInheritedNodeBlock(node: SDK.DOMModel.DOMNode): Promise<SectionBlock> {
@@ -1972,10 +1999,10 @@ export class SectionBlock {
       preventKeyboardFocus: true,
     });
     render(link, separatorElement);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `inherited-node:${node.id}`);
   }
 
-  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule): SectionBlock {
+  static createLayerBlock(rule: SDK.CSSRule.CSSStyleRule, parentBlockId = 'main'): SectionBlock {
     const separatorElement = document.createElement('div');
     separatorElement.className = 'sidebar-separator layer-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('layer')}`);
@@ -1985,7 +2012,7 @@ export class SectionBlock {
       const name = rule.origin === Protocol.CSS.StyleSheetOrigin.UserAgent ? '\xa0user\xa0agent\xa0stylesheet' :
                                                                              '\xa0implicit\xa0outer\xa0layer';
       UI.UIUtils.createTextChild(separatorElement.createChild('div'), name);
-      return new SectionBlock(separatorElement);
+      return new SectionBlock(separatorElement, false, false, `layer:${parentBlockId}:${name}`);
     }
     const layerLink = separatorElement.createChild('button');
     layerLink.className = 'link';
@@ -1993,7 +2020,7 @@ export class SectionBlock {
     const name = layers.map(layer => SDK.CSSModel.CSSModel.readableLayerName(layer.text)).join('.');
     layerLink.textContent = name;
     layerLink.onclick = () => LayersWidget.LayersWidget.instance().revealLayer(name);
-    return new SectionBlock(separatorElement);
+    return new SectionBlock(separatorElement, false, false, `layer:${parentBlockId}:${name}`);
   }
 
   updateFilter(): number {
@@ -2703,30 +2730,53 @@ export function mergeOrderedItems<T>(
     oldItems: T[],
     newItems: T[],
     getId: (item: T) => string,
-    markInactive: (item: T) => void,
+    toggleActive: (item: T, active: boolean, newItem?: T) => void,
     ): T[] {
   const newIds = new Set(newItems.map(getId));
+  const oldItemById = new Map(oldItems.map(item => [getId(item), item]));
+  const handledIds = new Set<string>();
   const merged: T[] = [];
   let newIdx = 0;
 
   for (const oldItem of oldItems) {
     const oldId = getId(oldItem);
+    if (handledIds.has(oldId)) {
+      continue;
+    }
     if (newIds.has(oldId)) {
       while (newIdx < newItems.length) {
         const newItem = newItems[newIdx++];
-        merged.push(newItem);
-        if (getId(newItem) === oldId) {
+        const newId = getId(newItem);
+        const existingItem = oldItemById.get(newId);
+        if (existingItem) {
+          toggleActive(existingItem, true, newItem);
+          merged.push(existingItem);
+          handledIds.add(newId);
+        } else {
+          merged.push(newItem);
+        }
+        if (newId === oldId) {
           break;
         }
       }
     } else {
-      markInactive(oldItem);
+      toggleActive(oldItem, false);
       merged.push(oldItem);
+      handledIds.add(oldId);
     }
   }
 
   while (newIdx < newItems.length) {
-    merged.push(newItems[newIdx++]);
+    const newItem = newItems[newIdx++];
+    const newId = getId(newItem);
+    const existingItem = oldItemById.get(newId);
+    if (existingItem && !handledIds.has(newId)) {
+      toggleActive(existingItem, true, newItem);
+      merged.push(existingItem);
+      handledIds.add(newId);
+    } else if (!handledIds.has(newId)) {
+      merged.push(newItem);
+    }
   }
 
   return merged;

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@ import type * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type {ElementsTreeOutline} from './ElementsTreeOutline.js';
+import type {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {

package/front_end/panels/elements/components/CSSQuery.ts

@@ -171,7 +171,7 @@ export class CSSQuery extends HTMLElement {
           <slot name="indent"></slot>
           ${this.#queryPrefix ? html`<span>${this.#queryPrefix + ' '}</span>` : Lit.nothing}
           ${this.#queryName ? html`<span>${this.#queryName + ' '}</span>` : Lit.nothing}
-          ${queryText} {
+          ${queryText}<slot></slot> <span class="sidebar-pane-open-brace">{</span>
         </div>`,
         this.#shadow, {host: this});
     // clang-format on

package/front_end/panels/elements/components/cssQuery.css

@@ -16,3 +16,7 @@
   text-decoration: var(--override-styles-section-text-hover-text-decoration);
   cursor: var(--override-styles-section-text-hover-cursor);
 }
+
+:host-context(.collapsed):host(:has(devtools-icon)) .sidebar-pane-open-brace::after {
+  content: "}";
+}

package/front_end/panels/elements/elements.ts

@@ -10,7 +10,7 @@ import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
 import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
-import './ElementsTreeOutline.js';
+import './DOMTreeWidget.js';
 import './ImagePreviewPopover.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
@@ -42,11 +42,11 @@ import * as CSSSpecificityBreakdown from './CSSSpecificityBreakdown.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
 import * as DOMPath from './DOMPath.js';
 import * as DOMTreeContextMenu from './DOMTreeContextMenu.js';
+import * as DOMTreeWidget from './DOMTreeWidget.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
 import * as ElementsTreeElement from './ElementsTreeElement.js';
-import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 import * as EventListenersWidget from './EventListenersWidget.js';
 import * as ImagePreviewPopover from './ImagePreviewPopover.js';
 import * as InspectElementModeController from './InspectElementModeController.js';
@@ -80,11 +80,11 @@ export {
   CSSValueTraceView,
   DOMPath,
   DOMTreeContextMenu,
+  DOMTreeWidget,
   ElementsPanel,
   ElementsSidebarPane,
   ElementStatePaneWidget,
   ElementsTreeElement,
-  ElementsTreeOutline,
   EventListenersWidget,
   ImagePreviewPopover,
   InspectElementModeController,

package/front_end/panels/elements/stylesSidebarPane.css

@@ -115,6 +115,7 @@
   & .section-collapse-icon {
     width: var(--sys-size-6);
     height: var(--sys-size-6);
+    margin-block: calc(-1 * var(--sys-size-3));
     margin-right: var(--sys-size-2);
     margin-left: calc(-1 * var(--sys-size-2));
     vertical-align: middle;
@@ -122,6 +123,11 @@
     display: none;
   }
 
+  & .styles-section-status {
+    margin-block: calc(-1 * var(--sys-size-4));
+    vertical-align: middle;
+  }
+
   &.collapsible .section-collapse-icon {
     display: inline-block;
   }

package/front_end/panels/profiler/HeapDetachedElementsDataGrid.ts

@@ -64,7 +64,7 @@ const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement|
           <tr jslog=${VisualLogging.tableRow('detached-element')}>
             <td>
               <devtools-widget
-                ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+                ${widget(Elements.DOMTreeWidget.DOMTreeWidget, {
                   omitRootDOMNode: false,
                   selectEnabled: true,
                   hideGutter: true,

package/front_end/panels/profiler/HeapProfileView.ts

@@ -1067,12 +1067,14 @@ export class SamplingHeapProfileType extends SamplingHeapProfileTypeBase {
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.samplingHeapProfilerTimeline), this.#recordTimelineSetting);
-    this.customContentInternal = checkboxSetting;
-    checkboxSetting.setAttribute(
-        'jslog', `${VisualLogging.toggle('record-sampling-heap-profiler-timeline').track({click: true})}`);
-    return checkboxSetting;
+    if (!this.customContentInternal) {
+      const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
+          i18nString(UIStrings.samplingHeapProfilerTimeline), this.#recordTimelineSetting);
+      this.customContentInternal = checkboxSetting;
+      checkboxSetting.setAttribute(
+          'jslog', `${VisualLogging.toggle('record-sampling-heap-profiler-timeline').track({click: true})}`);
+    }
+    return this.customContentInternal;
   }
 
   override setCustomContentEnabled(enable: boolean): void {

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -532,19 +532,26 @@ export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
     const scrollTop = this.scrollContainer.scrollTop;
     const scrollBottom = scrollTop + this.scrollContainer.offsetHeight;
     if (height >= scrollTop && height < scrollBottom) {
+      if (!node.dataGrid) {
+        this.updateVisibleNodes(false);
+      }
       return Promise.resolve(node);
     }
 
     const scrollGap = 40;
     this.scrollContainer.scrollTop = Math.max(0, height - scrollGap);
+    this.updateVisibleNodes(false);
     return new Promise(resolve => {
-      console.assert(!this.scrollToResolveCallback);
+      if (this.scrollToResolveCallback) {
+        this.scrollToResolveCallback();
+      }
       this.scrollToResolveCallback = resolve.bind(null, node);
       // Still resolve the promise if it does not scroll for some reason.
       this.scrollContainer.window().requestAnimationFrame(() => {
         if (!this.scrollToResolveCallback) {
           return;
         }
+        this.updateVisibleNodes(false);
         this.scrollToResolveCallback();
         this.scrollToResolveCallback = null;
       });

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -1640,10 +1640,12 @@ export class TrackingHeapSnapshotProfileType extends TrackingHeapSnapshotProfile
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
-    this.customContentInternal = (checkboxSetting);
-    return checkboxSetting;
+    if (!this.customContentInternal) {
+      const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
+          i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
+      this.customContentInternal = checkboxSetting;
+    }
+    return this.customContentInternal;
   }
 
   override setCustomContentEnabled(enable: boolean): void {