chrome-devtools-frontend 1.0.1700561 → 1.0.1702515

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 = (
@@ -43,6 +44,7 @@ const POPUP_MARGIN = 8;
 const PIN_HEIGHT = 30;
 const POPUP_WIDTH = 288;
 const POPUP_HEIGHT = 220;
+const AUTO_CLOSE_DELAY_MS = 2000;
 
 const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   // clang-format off
@@ -102,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>
         `,
@@ -119,9 +122,22 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
   #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
   #activeThreadId: string|null = null;
+  #closeTimeoutId: number|null = null;
   #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>,
@@ -168,11 +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,
@@ -204,12 +225,19 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     super.willHide();
   }
 
+  #clearCloseTimeout(): void {
+    if (this.#closeTimeoutId !== null) {
+      window.clearTimeout(this.#closeTimeoutId);
+      this.#closeTimeoutId = null;
+    }
+  }
+
   #onAgentAttachedChanged(
       event: Common.EventTarget.EventTargetEvent<
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED]>,
       ): void {
     if (!event.data) {
-      this.#activeThreadId = null;
+      this.#setActiveThreadId(null);
     }
     this.requestUpdate();
   }
@@ -220,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',
@@ -232,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();
   }
@@ -262,7 +290,6 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
           return {node};
         }
       }
-      return {text: ''};
     }
 
     if (anchor.networkRequestId) {
@@ -277,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(
@@ -303,6 +346,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
             activePin: null,
             title: {text: ''},
             onAddComment: () => {},
+            onCloseCommentThread: this.#handleCloseCommentThread,
           },
           undefined,
           this.contentElement,
@@ -329,8 +373,21 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       activePin,
       title,
       onAddComment: (text: string) => {
-        activeThread?.save(text);
+        if (!activeThread) {
+          return;
+        }
+        activeThread.sendToAgent(text);
+        const threadId = activeThread.id;
+        this.#clearCloseTimeout();
+        this.#closeTimeoutId = window.setTimeout(() => {
+          this.#closeTimeoutId = null;
+          if (this.#activeThreadId === threadId) {
+            this.#setActiveThreadId(null);
+            this.requestUpdate();
+          }
+        }, AUTO_CLOSE_DELAY_MS);
       },
+      onCloseCommentThread: this.#handleCloseCommentThread,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
@@ -350,6 +407,9 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     if (actionId === 'comments.toggle-comment-mode') {
+      if (!this.#commentManager.isAgentAttached()) {
+        return false;
+      }
       if (!widgetInstance) {
         widgetInstance = new CommentsOverlayWidget(
             undefined,
@@ -383,11 +443,14 @@ export class ButtonProvider implements UI.Toolbar.Provider {
         Root.DevToolsContext.globalInstance().get(
             CommentManager.CommentManager.CommentManager,
         );
-    this.#button = UI.Toolbar.Toolbar.createActionButton('comments.toggle-comment-mode');
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('comments.toggle-comment-mode');
+    action.setEnabled(this.#commentManager.isAgentAttached());
+    this.#button = UI.Toolbar.Toolbar.createActionButton(action);
     this.#button.setVisible(this.#commentManager.isAgentAttached());
     this.#commentManager.addEventListener(
         CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
         event => {
+          action.setEnabled(event.data);
           this.#button.setVisible(event.data);
         },
     );

package/front_end/panels/common/ExtensionServer.ts

@@ -34,6 +34,7 @@ const kForbiddenSchemes = [
   'chrome-error:',
   'chrome-search:',
   'devtools:',
+  'isolated-app:',
 ];
 
 declare global {
@@ -44,6 +45,18 @@ declare global {
 
 let extensionServerInstance: ExtensionServer|null;
 
+function parseCanonicalURL(url: Platform.DevToolsPath.UrlString): URL|null {
+  try {
+    let parsedURL = new URL(url);
+    while (parsedURL.protocol === 'blob:' || parsedURL.protocol === 'filesystem:') {
+      parsedURL = new URL(parsedURL.href.slice(parsedURL.protocol.length));
+    }
+    return parsedURL;
+  } catch {
+    return null;
+  }
+}
+
 export class HostsPolicy {
   static create(policy?: Host.InspectorFrontendHostAPI.ExtensionHostsPolicy): HostsPolicy|null {
     const runtimeAllowedHosts = [];
@@ -98,12 +111,11 @@ class RegisteredExtension {
       return false;
     }
 
-    let parsedURL;
-    try {
-      parsedURL = new URL(inspectedURL);
-    } catch {
+    const parsedURL = parseCanonicalURL(inspectedURL);
+    if (!parsedURL) {
       return false;
     }
+    inspectedURL = parsedURL.href as Platform.DevToolsPath.UrlString;
 
     if (parsedURL.protocol === 'chrome-extension:') {
       if (parsedURL.origin !== this.origin) {
@@ -1827,12 +1839,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   static canInspectURL(url: Platform.DevToolsPath.UrlString): boolean {
-    let parsedURL;
     // This is only to work around invalid URLs we're occasionally getting from some tests.
     // TODO(caseq): make sure tests supply valid URLs or we specifically handle invalid ones.
-    try {
-      parsedURL = new URL(url);
-    } catch {
+    const parsedURL = parseCanonicalURL(url);
+    if (!parsedURL) {
       return false;
     }
 

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/console/ConsolePrompt.ts

@@ -459,7 +459,7 @@ export class ConsolePrompt extends ConsolePromptBase {
         ?.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
   }
 
-  private async substituteNames(expression: string, mapping: Map<string, string|null>): Promise<string> {
+  private async substituteNames(expression: string, mapping: Array<Map<string, string|null>>): Promise<string> {
     try {
       return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
     } catch {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1030,7 +1030,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
         return;
       }
-      const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(
+      const treeOutline = new Elements.DOMTreeWidget.ElementsTreeOutline(
           /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true);
       treeOutline.rootDOMNode = node;
       treeOutline.deindentSingleNode();

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -359,7 +359,8 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
 
     let completions: string[] = await this.classNamesPromise;
     const classesMap = this.nodeClasses((selectedNode));
-    completions = completions.filter(value => !classesMap.get(value));
+    const existingClasses = new Set(expression.split(/[,\s]/).map(className => className.trim()).filter(Boolean));
+    completions = completions.filter(value => !classesMap.get(value) && !existingClasses.has(value));
 
     if (prefix[0] === '.') {
       completions = completions.map(value => '.' + value);

package/front_end/panels/elements/DOMTreeContextMenu.ts

@@ -9,9 +9,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
 import {canGetJSPath} from './DOMPath.js';
+import type {DOMTreeWidget} from './DOMTreeWidget.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement} from './ElementsTreeElement.js';
-import type {DOMTreeWidget} from './ElementsTreeOutline.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/{ElementsTreeOutline.ts → DOMTreeWidget.ts}

@@ -75,7 +75,7 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {ShortcutTreeElement} from './ShortcutTreeElement.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
-const {html, nothing, render, Directives: {classMap, repeat, styleMap}} = Lit;
+const {html, nothing, render, Directives: {classMap, ifDefined, repeat, styleMap}} = Lit;
 
 const UIStrings = {
   /**
@@ -101,7 +101,7 @@ const UIStrings = {
    */
   reveal: 'reveal',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMTreeWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, ElementsTreeOutline>();
 
@@ -919,6 +919,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
     // clang-format off
     return html`
       <li role="treeitem"
+          data-backend-node-id=${ifDefined(node.backendNodeId())}
+          data-target-id=${ifDefined(node.domModel().target().id())}
           selectable=${input.selectEnabled ? 'true' : 'false'}
           ?selected=${isSelected && !input.selectedClosingTag}
           class=${classes}
@@ -997,6 +999,8 @@ export const DECLARATIVE_VIEW: View = (input: ViewInput, _output: ViewOutput, ta
               ${node instanceof SDK.DOMModel.DOMDocument ? renderTopLayerContainer(node, depth + 1) : nothing}
               ${needsClosingTag ? html`
                 <li role="treeitem"
+                    data-backend-node-id=${ifDefined(node.backendNodeId())}
+                    data-target-id=${ifDefined(node.domModel().target().id())}
                     selectable=${input.selectEnabled ? 'true' : 'false'}
                     ?selected=${isSelected && Boolean(input.selectedClosingTag)}
                     class=${classMap({
@@ -1348,7 +1352,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       element?: HTMLElement,
       [changeTracker]:
           UI.Widget.WidgetDependencies<typeof DOMTreeWidget>|[ChangeTracker.ChangeTracker.ChangeTracker?] = [],
-      view: View = DEFAULT_VIEW,
+      view: View = DECLARATIVE_VIEW,
   ) {
     super(element, {
       useShadowDom: false,
@@ -1358,12 +1362,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     this.#changeTracker = changeTracker;
     this.#showHTMLCommentsSetting.addChangeListener(this.#onShowHTMLCommentsChange, this);
     if (Common.Settings.Settings.instance().moduleSetting('highlight-node-on-hover-in-overlay').get()) {
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED, this.#highlightNode, this,
-          {scoped: true});
-      SDK.TargetManager.TargetManager.instance().addModelListener(
-          SDK.OverlayModel.OverlayModel, SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
-          this.#clearHighlightedNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.HIGHLIGHT_NODE_REQUESTED,
+                                                                  this.#highlightNode, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(SDK.OverlayModel.OverlayModel,
+                                                                  SDK.OverlayModel.Events.INSPECT_MODE_WILL_BE_TOGGLED,
+                                                                  this.#clearHighlightedNode, this, {scoped: true});
     }
     this.#setupPopovers();
   }
@@ -2245,7 +2249,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -2269,6 +2273,12 @@ export class DOMTreeWidget extends UI.Widget.Widget {
         this.#wiredDOMModels.delete(domModel);
         this.#unwireDOMModel(domModel);
       }
+      if (this.#rootDOMNode?.domModel() === domModel) {
+        this.#rootDOMNode = null;
+        this.#selectedDOMNode = null;
+        this.#expandedNodes.clear();
+        this.#updateRecords.clear();
+      }
       this.performUpdate();
       return;
     }
@@ -3141,7 +3151,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           this.onDocumentUpdated(domModel);
         } else if (this.#view === DECLARATIVE_VIEW) {
           void domModel.requestDocument().then(document => {
-            if (document && this.isShowing()) {
+            if (document && this.isShowing() && this.#wiredDOMModels.has(domModel)) {
               this.rootDOMNode = document;
               this.onDocumentUpdated(domModel);
             }
@@ -3472,8 +3482,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
   }
 
   selectedNodeChanged(focus: boolean): void {
-    this.dispatchEventToListeners(
-        ElementsTreeOutline.Events.SelectedNodeChanged, {node: this.selectedDOMNodeInternal, focus});
+    this.dispatchEventToListeners(ElementsTreeOutline.Events.SelectedNodeChanged,
+                                  {node: this.selectedDOMNodeInternal, focus});
   }
 
   private fireElementsTreeUpdated(nodes: SDK.DOMModel.DOMNode[]): void {
@@ -3787,8 +3797,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.addEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                              this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
   }
 
@@ -3803,8 +3813,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentURLChanged, this.documentURLChanged, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(
-        SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated,
+                                 this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
@@ -4026,8 +4036,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     return false;
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
-      UI.TreeOutline.TreeElement {
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                   isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     if (node instanceof Array) {
       return new AdoptedStyleSheetSetTreeElement(node);
     }
@@ -4202,9 +4212,9 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
     this.#updateChildren(treeElement);
   }
 
-  insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
-      index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
+  insertChildElement(treeElement: ElementsTreeElement|TopLayerContainer,
+                     child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], index: number,
+                     isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
     return newElement;
@@ -4237,8 +4247,8 @@ export class ElementsTreeOutline extends ElementsTreeOutlineBase {
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements = new Map<
-        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
+                                         UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

package/front_end/panels/elements/ElementsPanel.ts

@@ -51,8 +51,8 @@ import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
+import {DOMTreeWidget, type ElementsTreeOutline} from './DOMTreeWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
-import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {LayoutPane} from './LayoutPane.js';
 import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -67,10 +67,10 @@ import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
 import {cssPath} from './DOMPath.js';
+import {type ElementsTreeOutline, MappedCharToEntity} from './DOMTreeWidget.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import * as ElementStatePaneWidget from './ElementStatePaneWidget.js';
-import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -40,8 +40,8 @@ import * as Lit from '../../ui/lit/lit.js';
 import * as VisualElements from '../../ui/visual_logging/visual_logging.js';
 
 import * as ElementsComponents from './components/components.js';
+import {ElementsTreeOutline} from './DOMTreeWidget.js';
 import {adornerRef, ElementsTreeElement, handleAdornerKeydown} from './ElementsTreeElement.js';
-import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
 const {html, render} = Lit;
 

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 {