chrome-devtools-frontend 1.0.1701636 → 1.0.1702515

package/front_end/models/issues_manager/descriptions/deprecation.md

@@ -1,3 +1,3 @@
-# {PLACEHOLDER_title}
+# Deprecated feature used
 
 {PLACEHOLDER_message}

package/front_end/models/issues_manager/descriptions/sriValidationFailedIntegrityMismatch.md

@@ -7,4 +7,6 @@ assertions made by the request’s initiator. Verification failed.
 
 The following are the keys specified by the request’s initiator:
 
+```
 {PLACEHOLDER_integrityAssertions}
+```

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -270,6 +270,8 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
           encodeURI(pathPart).replace(/[\/\*]/g, match => '%' + match[0].charCodeAt(0).toString(16).toUpperCase());
       if (encodedName === '..') {
         encodedName = '%2E%2E';
+      } else if (encodedName === '.') {
+        encodedName = '%2E';
       }
       if (Host.Platform.isWin()) {
         // Windows does not allow ':' and '?' in filenames
@@ -335,7 +337,10 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
       if (!encodedFilePath) {
         return null;
       }
-      const encodedPath = Common.ParsedURL.ParsedURL.substring(encodedFilePath, 0, encodedFilePath.lastIndexOf('/'));
+      const encodedPath = Common.ParsedURL.ParsedURL.substr(encodedFilePath, 0, encodedFilePath.lastIndexOf('/'));
+      if (!encodedPath) {
+        return null;
+      }
       uiSourceCode = await this.#project.createFile(encodedPath, HEADERS_FILENAME, '');
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.HeaderOverrideFileCreated);
     }
@@ -525,6 +530,10 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     const encodedFileName = Common.ParsedURL.ParsedURL.substring(encodedPath, lastIndexOfSlash + 1);
     const rawFileName = Common.ParsedURL.ParsedURL.encodedPathToRawPathString(encodedFileName);
     encodedPath = Common.ParsedURL.ParsedURL.substr(encodedPath, 0, lastIndexOfSlash);
+    if (!encodedPath || rawFileName === HEADERS_FILENAME) {
+      this.#savingForOverrides.delete(uiSourceCode);
+      return;
+    }
     if (this.#project) {
       await this.#project.createFile(encodedPath, rawFileName, content ?? '', isEncoded);
     }
@@ -564,7 +573,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     const relativePathParts = FileSystemWorkspaceBinding.relativePath(uiSourceCode);
     // Decode twice to handle paths generated on Windows OS.
     const host = this.decodeLocalPathToUrlPath(this.decodeLocalPathToUrlPath(relativePathParts[0] || '')).toLowerCase();
-    return ['chrome:', 'data:', 'blob:', 'javascript:', 'about:', 'mailto:', 'vbscript:'].includes(host) ||
+    return ['chrome:', 'data:', 'blob:', 'javascript:', 'about:', 'mailto:', 'vbscript:', '.', '..'].includes(host) ||
         forbiddenUrls.includes(host);
   }
 
@@ -578,6 +587,9 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (!url) {
       return false;
     }
+    if ((url.scheme === 'http' || url.scheme === 'https') && (!url.host || url.host === '.' || url.host === '..')) {
+      return true;
+    }
     return !['http', 'https', 'file'].includes(url.scheme) || forbiddenUrls.includes(url.host);
   }
 

package/front_end/panels/common/CommentThreadWidget.ts

@@ -7,6 +7,7 @@ import '../../ui/components/tooltips/tooltips.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as CommentManager from '../../models/comment_manager/comment_manager.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Input from '../../ui/components/input/input.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -41,6 +42,10 @@ const UIStrings = {
    * @description aria-label for the comment text area.
    */
   commentInputAriaLabel: 'Comment input',
+  /**
+   * @description Tooltip and aria-label for the close button in the comment thread header.
+   */
+  close: 'Close',
 } as const;
 
 const UIStringsNotTranslate = {
@@ -70,6 +75,7 @@ export interface ViewInput {
   textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
   onAddComment: (text: string) => void;
   onCommentTextChange: (event: Event) => void;
+  onClose?: () => void;
 }
 
 export type ViewOutput = undefined;
@@ -87,16 +93,27 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             widget(DOMNodeLink, {node: input.title.node}) :
             html`<span class="selected-item-text">${input.title.text}</span>`}
         </span>
-        ${hasComment ? html`
-          <div class="sent-status">
-            <devtools-icon
-              class="check-icon"
-              name="checkmark"
-              aria-label=${i18nString(UIStrings.sentCheckmark)}>
-            </devtools-icon>
-            <span>${i18nString(UIStrings.sent)}</span>
-          </div>
-        ` : Lit.nothing}
+        <div class="header-actions">
+          ${hasComment ? html`
+            <div class="sent-status">
+              <devtools-icon
+                class="check-icon"
+                name="checkmark"
+                aria-label=${i18nString(UIStrings.sentCheckmark)}>
+              </devtools-icon>
+              <span>${i18nString(UIStrings.sent)}</span>
+            </div>
+          ` : Lit.nothing}
+          <devtools-button
+            class="close-button"
+            aria-label=${i18nString(UIStrings.close)}
+            .iconName=${'cross'}
+            .variant=${Buttons.Button.Variant.ICON}
+            .size=${Buttons.Button.Size.SMALL}
+            .title=${i18nString(UIStrings.close)}
+            @click=${input.onClose}
+          ></devtools-button>
+        </div>
       </div>
 
       ${hasComment ? html`
@@ -171,6 +188,7 @@ export class CommentThreadWidget extends UI.Widget.Widget {
   #textAreaRef = createRef<HTMLTextAreaElement>();
   #view: View;
   onAddComment?: (text: string) => void;
+  onClose?: () => void;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
@@ -213,6 +231,7 @@ export class CommentThreadWidget extends UI.Widget.Widget {
       textAreaRef: this.#textAreaRef,
       onAddComment: this.#handleAddComment,
       onCommentTextChange: this.#handleCommentTextChange,
+      onClose: this.onClose,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -31,6 +31,7 @@ export interface ViewInput {
   activePin: Comments.CommentOverlayManager.PinPositionData|null;
   title: Title;
   onAddComment: (text: string) => void;
+  onCloseCommentThread: () => void;
 }
 
 export type View = (
@@ -103,6 +104,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
               title: input.title,
               comments: [...item.thread.comments],
               onAddComment: input.onAddComment,
+              onClose: input.onCloseCommentThread,
             })}
           </div>
         `,
@@ -124,6 +126,18 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   #cachedTitle: Title = {text: ''};
   #cachedTitleAnchor: CommentManager.CommentManager.CommentAnchorSignature|null = null;
 
+  #setActiveThreadId(threadId: string|null): void {
+    if (this.#activeThreadId !== threadId) {
+      this.#clearCloseTimeout();
+      this.#activeThreadId = threadId;
+      if (threadId && this.isShowing()) {
+        document.documentElement.addEventListener('keydown', this.#onKeyDown);
+      } else {
+        document.documentElement.removeEventListener('keydown', this.#onKeyDown);
+      }
+    }
+  }
+
   constructor(
       element: HTMLElement|undefined,
       [commentManager]: UI.Widget.WidgetDependencies<typeof CommentsOverlayWidget>,
@@ -170,12 +184,16 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         this.#onAgentAttachedChanged,
         this,
     );
+    if (this.#activeThreadId) {
+      document.documentElement.addEventListener('keydown', this.#onKeyDown);
+    }
 
     this.requestUpdate();
   }
 
   override willHide(): void {
     this.#clearCloseTimeout();
+    document.documentElement.removeEventListener('keydown', this.#onKeyDown);
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
@@ -219,7 +237,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED]>,
       ): void {
     if (!event.data) {
-      this.#activeThreadId = null;
+      this.#setActiveThreadId(null);
     }
     this.requestUpdate();
   }
@@ -230,7 +248,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       ): void {
     const isModeActive = event.data;
     if (!isModeActive) {
-      this.#activeThreadId = null;
+      this.#setActiveThreadId(null);
     }
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(
         'comments.toggle-comment-mode',
@@ -242,9 +260,9 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   #onStateChanged(): void {
     const draftThread = this.#commentManager.getCommentThreads().find(t => t.status === 'DRAFT');
     if (draftThread) {
-      this.#activeThreadId = draftThread.id;
+      this.#setActiveThreadId(draftThread.id);
     } else if (this.#activeThreadId && !this.#commentManager.getCommentThread(this.#activeThreadId)) {
-      this.#activeThreadId = null;
+      this.#setActiveThreadId(null);
     }
     this.requestUpdate();
   }
@@ -272,7 +290,6 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
           return {node};
         }
       }
-      return {text: ''};
     }
 
     if (anchor.networkRequestId) {
@@ -287,19 +304,35 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   }
 
   #handlePinClick = (threadId: string): void => {
-    const thread = this.#commentManager.getCommentThread(threadId);
     if (this.#activeThreadId === threadId) {
-      if (thread?.status === 'DRAFT') {
-        this.#commentOverlayManager.clearDraftThreads();
-      }
-      this.#activeThreadId = null;
-    } else {
+      this.#handleCloseCommentThread();
+      return;
+    }
+
+    this.#commentOverlayManager.clearDraftThreads();
+    this.#setActiveThreadId(threadId);
+    this.requestUpdate();
+  };
+
+  #handleCloseCommentThread = (): void => {
+    if (!this.#activeThreadId) {
+      return;
+    }
+    const thread = this.#commentManager.getCommentThread(this.#activeThreadId);
+    if (thread?.status === 'DRAFT') {
       this.#commentOverlayManager.clearDraftThreads();
-      this.#activeThreadId = threadId;
     }
+    this.#setActiveThreadId(null);
     this.requestUpdate();
   };
 
+  #onKeyDown = (event: KeyboardEvent): void => {
+    if (this.#activeThreadId && event.key === 'Escape' && !event.isComposing) {
+      event.consume(true);
+      this.#handleCloseCommentThread();
+    }
+  };
+
   override async performUpdate(signal?: AbortSignal): Promise<void> {
     if (!this.#commentManager.isAgentAttached()) {
       this.#view(
@@ -313,6 +346,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
             activePin: null,
             title: {text: ''},
             onAddComment: () => {},
+            onCloseCommentThread: this.#handleCloseCommentThread,
           },
           undefined,
           this.contentElement,
@@ -342,16 +376,18 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         if (!activeThread) {
           return;
         }
-        activeThread.save(text);
+        activeThread.sendToAgent(text);
         const threadId = activeThread.id;
+        this.#clearCloseTimeout();
         this.#closeTimeoutId = window.setTimeout(() => {
           this.#closeTimeoutId = null;
           if (this.#activeThreadId === threadId) {
-            this.#activeThreadId = null;
+            this.#setActiveThreadId(null);
             this.requestUpdate();
           }
         }, AUTO_CLOSE_DELAY_MS);
       },
+      onCloseCommentThread: this.#handleCloseCommentThread,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/common/commentThreadWidget.css

@@ -30,6 +30,17 @@
     gap: var(--sys-size-4);
   }
 
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-3);
+    flex-shrink: 0;
+  }
+
+  .close-button {
+    flex-shrink: 0;
+  }
+
   .sent-status {
     display: flex;
     align-items: center;

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -304,6 +304,7 @@ export class StylePropertiesSection {
       closeBrace.createChild('span').textContent = '}';
     } else {
       this.titleElement.classList.add('hidden');
+      this.updateAncestorRuleList();
     }
 
     if (rule) {
@@ -425,6 +426,7 @@ export class StylePropertiesSection {
     this.computedStyleExtraFields = computedStyleExtraFields;
     this.#lastInheritedNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
     this.update(true);
+    this.updateCollapsedState();
   }
 
   inheritedNode(): SDK.DOMModel.DOMNode|null {
@@ -1250,6 +1252,14 @@ export class StylePropertiesSection {
     this.#ancestorClosingBracesElement.removeChildren();
     this.maybeCreateAncestorRules(this.styleInternal);
     this.#styleRuleElement.style.paddingLeft = `${this.nestingLevel}ch`;
+    if (this.headerText().length === 0 && (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule)) {
+      const lastAncestor = this.#ancestorRuleListElement.lastElementChild;
+      if (lastAncestor && this.#collapseIcon && this.#statusElement) {
+        this.#collapseIcon.slot = 'indent';
+        lastAncestor.append(this.#collapseIcon, this.#statusElement);
+      }
+      this.#ancestorClosingBracesElement.firstElementChild?.classList.add('sidebar-pane-closing-brace');
+    }
   }
 
   isPropertyInherited(propertyName: string): boolean {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -2044,7 +2044,7 @@ export class AnchorFunctionRenderer extends AnchorFunctionRendererBase {
 
   override render(match: SDK.CSSPropertyParserMatchers.AnchorFunctionMatch, context: RenderingContext): Node[] {
     const content = document.createElement('span');
-    if (match.node.name !== 'CallExpression') {
+    if (match.node.name === 'VariableName') {
       // Link an anchor double-dashed ident to its matching anchor element.
       void AnchorFunctionRenderer.decorateAnchorForAnchorLink(this.#stylesContainer, content, {identifier: match.text});
     } else {

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1126,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,
@@ -1170,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;
 
@@ -1183,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;
@@ -1409,37 +1421,36 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
       return blocks;
     }
 
-    return this.mergeInactiveStyles(blocks);
+    return this.mergeInactiveStyles(blocks, matchedStyles, computedStyles, parentsComputedStyles,
+                                    computedStyleExtraFields);
   }
 
-  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;
-  }
-
-  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;
       }
     }
 
@@ -1448,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();
@@ -1456,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;
   }
 
@@ -1871,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;
@@ -1905,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,
@@ -1918,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;
@@ -1931,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;
@@ -1942,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;
@@ -1958,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> {
@@ -1970,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')}`);
@@ -1983,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';
@@ -1991,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 {
@@ -2701,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;