chrome-devtools-frontend 1.0.1697998 → 1.0.1698733

package/front_end/models/issues_manager/WebInstallIssue.ts

@@ -0,0 +1,63 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export class WebInstallIssue extends Issue<Protocol.Audits.WebInstallIssueDetails> {
+  constructor(issueDetails: Protocol.Audits.WebInstallIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    super(`${Protocol.Audits.InspectorIssueCode.WebInstallIssue}::${issueDetails.reason}`, issueDetails, issuesModel);
+  }
+
+  override requests(): Protocol.Audits.AffectedRequest[] {
+    const {manifestUrl, reason} = this.details();
+    if (reason === Protocol.Audits.WebInstallIssueReason.NoManifest || !manifestUrl) {
+      return [];
+    }
+    return [{url: manifestUrl}];
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.OTHER;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    switch (this.details().reason) {
+      case Protocol.Audits.WebInstallIssueReason.ManifestParsingOrNetworkError:
+        return {file: 'webInstallManifestParsingOrNetworkError.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.StartUrlInvalid:
+        return {file: 'webInstallStartUrlInvalid.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.ManifestMissingNameOrShortName:
+        return {file: 'webInstallManifestMissingNameOrShortName.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.ManifestMissingId:
+        return {file: 'webInstallManifestMissingId.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.NoManifest:
+        return {file: 'webInstallNoManifest.md', links: []};
+      default:
+        console.warn('Unknown WebInstallIssueReason:', this.details().reason);
+        return null;
+    }
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.PAGE_ERROR;
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.details());
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel|null,
+                            inspectorIssue: Protocol.Audits.InspectorIssue): WebInstallIssue[] {
+    const details = inspectorIssue.details.webInstallIssueDetails;
+    if (!details) {
+      console.warn('Web install issue without details received.');
+      return [];
+    }
+    return [new WebInstallIssue(details, issuesModel)];
+  }
+}

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

@@ -0,0 +1,3 @@
+# Manifest does not contain an `id` field
+
+Add an `id` to the manifest. Alternatively, for installs using an explicit manifest URL, provide the computed manifest ID as `manifestId` alongside the manifest URL.

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

@@ -0,0 +1,3 @@
+# Manifest does not contain a 'name' or 'short_name' field
+
+Add a `name` or `short_name` field to the manifest.

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

@@ -0,0 +1,3 @@
+# Manifest could not be fetched, is empty, or could not be parsed
+
+Check that the web app manifest can be fetched and that it contains valid, non-empty JSON.

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

@@ -0,0 +1,3 @@
+# No manifest detected
+
+Provide a web app manifest for this page.

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

@@ -0,0 +1,3 @@
+# Manifest 'start_url' is not valid
+
+Provide a valid `start_url` in the manifest.

package/front_end/models/issues_manager/issues_manager.ts

@@ -36,6 +36,7 @@ import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
 import * as SRIMessageSignatureIssue from './SRIMessageSignatureIssue.js';
 import * as StylesheetLoadingIssue from './StylesheetLoadingIssue.js';
 import * as UnencodedDigestIssue from './UnencodedDigestIssue.js';
+import * as WebInstallIssue from './WebInstallIssue.js';
 
 export {
   ClientHintIssue,
@@ -72,4 +73,5 @@ export {
   SRIMessageSignatureIssue,
   StylesheetLoadingIssue,
   UnencodedDigestIssue,
+  WebInstallIssue,
 };

package/front_end/models/workspace/UISourceCode.ts

@@ -7,6 +7,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
 
 import {IgnoreListManager} from './IgnoreListManager.js';
@@ -29,6 +30,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     TextUtils.ContentProvider.ContentProvider {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #parentURL: Platform.DevToolsPath.UrlString;
+  #securityOrigin?: SDK.SecurityOrigin.SecurityOrigin;
   #project: Project;
   #url: Platform.DevToolsPath.UrlString;
   #name: string;
@@ -110,6 +112,23 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#origin;
   }
 
+  /**
+   * Returns the security origin for this source code.
+   * Prefers the project security origin if available. If the project does not
+   * define a security origin, derives it from the source code's URL and caches
+   * the result until the source code is renamed.
+   */
+  securityOrigin(): SDK.SecurityOrigin.SecurityOrigin {
+    const projectOrigin = this.#project.securityOrigin?.();
+    if (projectOrigin) {
+      return projectOrigin;
+    }
+    if (!this.#securityOrigin) {
+      this.#securityOrigin = SDK.SecurityOrigin.SecurityOrigin.create(this.#url);
+    }
+    return this.#securityOrigin;
+  }
+
   fullDisplayName(): string {
     return this.#project.fullDisplayName(this);
   }
@@ -150,6 +169,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #updateName(
       name: Platform.DevToolsPath.RawPathString, url: Platform.DevToolsPath.UrlString,
       contentType?: Common.ResourceType.ResourceType): void {
+    this.#securityOrigin = undefined;
     const oldURL = this.#url;
     this.#name = name;
     if (url) {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -282,12 +282,10 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
   }
 }
 
-function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
-    AIv2MarkdownRenderer {
-  const options: AIv2MarkdownRendererOptions = {};
-  if (conversation) {
-    options.getEstablishedOrigin = () => conversation.origin;
-  }
+function createV2MarkdownRenderer(conversation: AiAssistanceModel.AiConversation.AiConversation): AIv2MarkdownRenderer {
+  const options: AIv2MarkdownRendererOptions = {
+    getOriginLock: () => conversation.getOriginLock(),
+  };
   const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
   const domModel = primaryTarget?.model(SDK.DOMModel.DOMModel);
   const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);

package/front_end/panels/ai_assistance/components/AIv2MarkdownRenderer.ts

@@ -21,13 +21,10 @@ export interface AIv2MarkdownRendererOptions {
   mainFrameId?: string;
   mainDocumentURL?: Platform.DevToolsPath.UrlString;
   /**
-   * Retrieves the established origin locked for the active conversation.
+   * Retrieves the origin lock for the active conversation.
    * Required to authorize #file-<id> links and prevent cross-origin file leakage.
-   *
-   * TODO(crbug.com/559522248): Defer renderer instantiation until a conversation
-   * starts so this origin can be passed as a mandatory, non-getter property.
    */
-  getEstablishedOrigin?: () => SDK.SecurityOrigin.SecurityOrigin | undefined;
+  getOriginLock: () => AiAssistanceModel.Tool.OriginLockState;
   lookupTraceEvent?: (key: string) => Trace.Types.Events.Event | null;
 }
 
@@ -45,7 +42,7 @@ type ParsedLink = {
  * the only markdown renderer used by AI assistance.
  */
 export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsightRenderer {
-  constructor(private readonly options: AIv2MarkdownRendererOptions = {}) {
+  constructor(private readonly options: AIv2MarkdownRendererOptions) {
     super();
   }
 
@@ -119,10 +116,7 @@ export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsi
     }
     if (href.startsWith('#file-')) {
       const fileId = Number(href.substring(6));
-      const origin = this.options.getEstablishedOrigin?.();
-      const file = (origin && Number.isInteger(fileId) && fileId > 0) ?
-          AiAssistanceModel.ListSources.ListSourcesTool.getSourceById(fileId, origin) :
-          undefined;
+      const file = AiAssistanceModel.ListSources.ListSourcesTool.getSourceById(fileId, this.options.getOriginLock());
 
       if (file) {
         return this.#revealableLink(file, file.name());

package/front_end/{ui/comments → panels/common}/CommentThreadWidget.ts

@@ -2,14 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../components/tooltips/tooltips.js';
+import '../../ui/components/tooltips/tooltips.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as CommentManager from '../../models/comment_manager/comment_manager.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';
 import * as Lit from '../../ui/lit/lit.js';
-import * as Input from '../components/input/input.js';
-import * as MarkdownView from '../components/markdown_view/markdown_view.js';
 
 import commentThreadWidgetStyles from './commentThreadWidget.css.js';
 
@@ -52,7 +52,7 @@ const UIStringsNotTranslate = {
       'Comment strings, DOM hierarchy snippets, tracked CSS and DOM changes, Visual Element (VE) paths and signatures, and tracked presenter changes are sent to the connected third-party agent to assist with debugging and code updates.',
 } as const;
 
-const str_ = i18n.i18n.registerUIStrings('ui/comments/CommentThreadWidget.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/CommentThreadWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 

package/front_end/{ui/comments → panels/common}/CommentsOverlayWidget.ts

@@ -5,18 +5,10 @@
 import type * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.js';
+import * as Comments from '../../ui/comments/comments.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {
-  CommentOverlayManager,
-  Events as CommentOverlayManagerEvents,
-  type HighlightRectData,
-  type HoverHighlightData,
-  type PendingHighlightRectData,
-  type PendingPinPositionData,
-  type PinPositionData,
-} from './CommentOverlayManager.js';
 import commentsOverlayStyles from './commentsOverlay.css.js';
 import {CommentThreadWidget} from './CommentThreadWidget.js';
 
@@ -27,18 +19,14 @@ const {
   Directives: {repeat, styleMap},
 } = Lit;
 
-export type ViewHighlightRectData = HighlightRectData|PendingHighlightRectData;
-
 export interface ViewInput {
-  pins: PinPositionData[];
-  pendingPin: PendingPinPositionData|null;
-  highlights: ViewHighlightRectData[];
-  hoverHighlight: HoverHighlightData|null;
+  pins: Comments.CommentOverlayManager.PinPositionData[];
+  highlights: Comments.CommentOverlayManager.HighlightRectData[];
+  hoverHighlight: Comments.CommentOverlayManager.HoverHighlightData|null;
   commentMode: boolean;
   onPinClick: (threadId: string) => void;
   activeThread: CommentManager.CommentManager.CommentThread|null;
-  activePin: PinPositionData|PendingPinPositionData|null;
-  activeTargetKey: unknown;
+  activePin: Comments.CommentOverlayManager.PinPositionData|null;
   onAddComment: (text: string) => void;
 }
 
@@ -72,7 +60,6 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
       ${input.highlights.map(h => h.visible ? html`
         <div
           class="comment-anchor-highlight"
-          data-comment-id=${('id' in h && h.id) || nothing}
           style=${styleMap({
             top: `${h.top}px`,
             left: `${h.left}px`,
@@ -81,20 +68,9 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           })}>
         </div>
       ` : nothing)}
-      ${input.pendingPin && input.pendingPin.visible ? html`
-        <div
-          class="comment-pin"
-          style=${styleMap({
-            top: `${input.pendingPin.top}px`,
-            left: `${input.pendingPin.left}px`,
-          })}>
-          <div class="comment-cursor">${input.pendingPin.index}</div>
-        </div>
-      ` : nothing}
       ${input.pins.map(p => p.visible ? html`
         <div
           class="comment-pin"
-          data-comment-id=${p.id}
           style=${styleMap({
             top: `${p.top}px`,
             left: `${p.left}px`,
@@ -103,9 +79,9 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           <div class="comment-cursor">${p.index}</div>
         </div>
       ` : nothing)}
-      ${input.activePin ? repeat(
-        [{pin: input.activePin, key: input.activeTargetKey}],
-        item => item.key,
+      ${input.activePin && input.activeThread ? repeat(
+        [{pin: input.activePin, thread: input.activeThread}],
+        item => item.thread.id,
         item => html`
           <div
             class="comment-popup-widget"
@@ -120,7 +96,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
               )}px`,
             })}>
             ${UI.Widget.widget(CommentThreadWidget, {
-              comments: input.activeThread ? [...input.activeThread.comments] : [],
+              comments: [...item.thread.comments],
               onAddComment: input.onAddComment,
             })}
           </div>
@@ -137,7 +113,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
 
   readonly #view: View;
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
-  #commentOverlayManager: CommentOverlayManager;
+  #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
   #activeThreadId: string|null = null;
 
   constructor(
@@ -148,12 +124,12 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     super(element, {useShadowDom: false});
     this.#view = view;
     this.#commentManager = commentManager;
-    this.#commentOverlayManager = new CommentOverlayManager(
+    this.#commentOverlayManager = new Comments.CommentOverlayManager.CommentOverlayManager(
         this.#commentManager,
     );
   }
 
-  setOverlayManagerForTest(overlayManager: CommentOverlayManager): void {
+  setOverlayManagerForTest(overlayManager: Comments.CommentOverlayManager.CommentOverlayManager): void {
     this.#commentOverlayManager = overlayManager;
   }
 
@@ -161,12 +137,12 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     super.wasShown();
     this.#commentOverlayManager.start();
     this.#commentOverlayManager.addEventListener(
-        CommentOverlayManagerEvents.POSITIONS_UPDATED,
+        Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
         this.#onStateChanged,
         this,
     );
     this.#commentOverlayManager.addEventListener(
-        CommentOverlayManagerEvents.HOVER_HIGHLIGHT_CHANGED,
+        Comments.CommentOverlayManager.Events.HOVER_HIGHLIGHT_CHANGED,
         this.#onStateChanged,
         this,
     );
@@ -188,12 +164,12 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   override willHide(): void {
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
-        CommentOverlayManagerEvents.POSITIONS_UPDATED,
+        Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
         this.#onStateChanged,
         this,
     );
     this.#commentOverlayManager.removeEventListener(
-        CommentOverlayManagerEvents.HOVER_HIGHLIGHT_CHANGED,
+        Comments.CommentOverlayManager.Events.HOVER_HIGHLIGHT_CHANGED,
         this.#onStateChanged,
         this,
     );
@@ -217,6 +193,9 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.COMMENT_MODE_CHANGED]>,
       ): void {
     const isModeActive = event.data;
+    if (!isModeActive) {
+      this.#activeThreadId = null;
+    }
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction(
         'comments.toggle-comment-mode',
     );
@@ -225,17 +204,24 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   }
 
   #onStateChanged(): void {
-    if (this.#commentOverlayManager.getPendingDraft()) {
+    const draftThread = this.#commentManager.getCommentThreads().find(t => t.status === 'DRAFT');
+    if (draftThread) {
+      this.#activeThreadId = draftThread.id;
+    } else if (this.#activeThreadId && !this.#commentManager.getCommentThread(this.#activeThreadId)) {
       this.#activeThreadId = null;
     }
     this.requestUpdate();
   }
 
   #handlePinClick = (threadId: string): void => {
-    this.#commentOverlayManager.clearPendingAnchor();
+    const thread = this.#commentManager.getCommentThread(threadId);
     if (this.#activeThreadId === threadId) {
+      if (thread?.status === 'DRAFT') {
+        this.#commentOverlayManager.clearDraftThreads();
+      }
       this.#activeThreadId = null;
     } else {
+      this.#commentOverlayManager.clearDraftThreads();
       this.#activeThreadId = threadId;
     }
     this.requestUpdate();
@@ -243,41 +229,25 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
 
   override performUpdate(): void {
     const pins = this.#commentOverlayManager.getPinPositions();
-    const draft = this.#commentOverlayManager.getPendingDraft();
-    const pendingPin = draft?.pin ?? null;
-    const highlights: ViewHighlightRectData[] = [
-      ...this.#commentOverlayManager.getHighlightRects(),
-    ];
-
-    if (draft?.highlight) {
-      highlights.push(draft.highlight);
-    }
+    const highlights = this.#commentOverlayManager.getHighlightRects();
 
-    let activePin: PinPositionData|PendingPinPositionData|null = null;
+    let activePin: Comments.CommentOverlayManager.PinPositionData|null = null;
     let activeThread: CommentManager.CommentManager.CommentThread|null = null;
-    if (pendingPin) {
-      activePin = pendingPin;
-    } else if (this.#activeThreadId) {
+    if (this.#activeThreadId) {
       activePin = pins.find(p => p.id === this.#activeThreadId) ?? null;
       activeThread = this.#commentManager.getCommentThread(this.#activeThreadId) ?? null;
     }
 
     const viewInput: ViewInput = {
       pins,
-      pendingPin,
       highlights,
       hoverHighlight: this.#commentOverlayManager.getHoverHighlight(),
       commentMode: this.#commentManager.isCommentMode(),
       onPinClick: this.#handlePinClick,
       activeThread,
       activePin,
-      activeTargetKey: draft ?? activeThread,
       onAddComment: (text: string) => {
-        const pendingDraft = this.#commentOverlayManager.getPendingDraft();
-
-        if (pendingDraft) {
-          this.#commentOverlayManager.createComment(pendingDraft.element, text, {pendingDraft});
-        }
+        activeThread?.save(text);
       },
     };
     this.#view(viewInput, undefined, this.contentElement);
@@ -313,4 +283,11 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     }
     return false;
   }
+
+  static resetForTest(): void {
+    if (widgetInstance) {
+      widgetInstance.detach();
+      widgetInstance = null;
+    }
+  }
 }

package/front_end/{ui/comments → panels/common}/CommentsStatusBarPill.ts

@@ -4,9 +4,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as CommentManager from '../../models/comment_manager/comment_manager.js';
-import * as UI from '../legacy/legacy.js';
-import * as Lit from '../lit/lit.js';
-import * as VisualLogging from '../visual_logging/visual_logging.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 const UIStrings = {
   /**
@@ -15,7 +15,7 @@ const UIStrings = {
    */
   commentsCount: 'Comments ({PH1})',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('ui/comments/CommentsStatusBarPill.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/CommentsStatusBarPill.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {html, render} = Lit;
@@ -86,7 +86,7 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
 
   override performUpdate(): void {
     const viewInput: ViewInput = {
-      threads: this.#commentManager.getCommentThreads(),
+      threads: this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT'),
       onPillClick: this.#handlePillClick,
     };
     this.#view(viewInput, undefined, this.contentElement);

package/front_end/panels/common/ExtensionServer.ts

@@ -1287,7 +1287,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (scriptFiles.length > 0) {
       for (const script of scriptFiles) {
         const resourceFile = debuggerBindingsInstance.scriptFile(resource.uiSourceCode, script.debuggerModel);
-        resourceFile?.addSourceMapURL(message.sourceMapURL as Platform.DevToolsPath.UrlString);
+        resourceFile?.addSourceMapURL(message.sourceMapURL as Platform.DevToolsPath.UrlString,
+                                      SDK.SourceMap.SourceMapProvenance.EXTENSION);
       }
     }
 

package/front_end/{ui/comments → panels/common}/commentsOverlay.css

@@ -10,7 +10,8 @@
     position: fixed;
     inset: 0;
     pointer-events: none;
-    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000) but below floating glass panes (which start at z-index 3000). */
+    /* Needs to be above regular panel widgets (e.g. flame chart at z-index 2000)
+       but below floating glass panes (which start at z-index 3000). */
     z-index: 2500;
     overflow: hidden;
     width: 100vw;

package/front_end/{ui/comments/comments-meta.ts → panels/common/common-meta.ts}

@@ -6,7 +6,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as Comments from './comments.js';
+import type * as Common from './common.js';
 
 const UIStrings = {
   /**
@@ -22,16 +22,16 @@ const UIStrings = {
    */
   comments: 'Comments',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('ui/comments/comments-meta.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/common-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
 
-let loadedCommentsModule: (typeof Comments|undefined);
+let loadedCommonModule: (typeof Common|undefined);
 
-async function loadCommentsModule(): Promise<typeof Comments> {
-  if (!loadedCommentsModule) {
-    loadedCommentsModule = await import('./comments.js');
+async function loadCommonModule(): Promise<typeof Common> {
+  if (!loadedCommonModule) {
+    loadedCommonModule = await import('./common.js');
   }
-  return loadedCommentsModule;
+  return loadedCommonModule;
 }
 
 function isCommentsEnabled(config?: Root.Runtime.HostConfig): boolean {
@@ -46,8 +46,8 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showComments),
   title: i18nLazyString(UIStrings.comments),
   async loadView(universe) {
-    const Comments = await loadCommentsModule();
-    return new Comments.CommentsStatusBarPill.CommentsStatusBarPill(undefined, [universe.commentManager]);
+    const Common = await loadCommonModule();
+    return new Common.CommentsStatusBarPill.CommentsStatusBarPill(undefined, [universe.commentManager]);
   },
 });
 
@@ -59,8 +59,8 @@ UI.ActionRegistration.registerActionExtension({
   toggleable: true,
   condition: isCommentsEnabled,
   async loadActionDelegate() {
-    const Comments = await loadCommentsModule();
-    return new Comments.CommentsOverlayWidget.ActionDelegate();
+    const Common = await loadCommonModule();
+    return new Common.CommentsOverlayWidget.ActionDelegate();
   },
 });
 

package/front_end/panels/common/common.ts

@@ -13,3 +13,6 @@ export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
 export * as DOMLinkifier from './DOMLinkifier.js';
 export * as ExtensionIframe from './ExtensionView.js';
+export * as CommentThreadWidget from './CommentThreadWidget.js';
+export * as CommentsOverlayWidget from './CommentsOverlayWidget.js';
+export * as CommentsStatusBarPill from './CommentsStatusBarPill.js';

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -20,7 +20,7 @@ const {Directives: {ref}, html, render} = Lit;
 
 export class AdoptedStyleSheetSetTreeElement extends UI.TreeOutline.TreeElement {
   constructor(readonly adoptedStyleSheets: SDK.DOMModel.AdoptedStyleSheet[]) {
-    super('');
+    super('', undefined, 'adopted-style-sheets');
     const documentElement = this.listItemElement.createChild('span');
     UI.UIUtils.createTextChild(documentElement, '#adopted-style-sheets');
     for (const adoptedStyleSheet of adoptedStyleSheets) {
@@ -33,7 +33,7 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 
   constructor(readonly adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet) {
-    super('');
+    super('', undefined, 'adopted-style-sheet');
     const header = adoptedStyleSheet.cssModel.styleSheetHeaderForId(adoptedStyleSheet.id);
     if (header) {
       AdoptedStyleSheetTreeElement.createContents(header, this);
@@ -79,7 +79,7 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
   private readonly widgetWrapper: HTMLElement;
 
   constructor(styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
-    super('');
+    super('', undefined, 'adopted-style-sheet-contents');
     this.widgetWrapper = document.createElement('div');
     this.widgetWrapper.style.display = 'contents';
     this.title = this.widgetWrapper;

package/front_end/panels/elements/ElementsPanel.ts

@@ -228,6 +228,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
+  getDOMTreeWidgetForTesting(): DOMTreeWidget {
+    return this.#domTreeWidget;
+  }
+
   constructor(
       targetManager?: SDK.TargetManager.TargetManager,
       settings?: Common.Settings.Settings,
@@ -1300,7 +1304,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   toggleHideElement(node: SDK.DOMModel.DOMNode): void {
-    this.#domTreeWidget.toggleHideElement(node);
+    void this.#domTreeWidget.toggleHideElement(node);
   }
 
   toggleEditAsHTML(node: SDK.DOMModel.DOMNode): void {