chrome-devtools-frontend 1.0.1701636 → 1.0.1703574

package/front_end/models/comment_manager/CommentThread.ts

@@ -58,13 +58,7 @@ export interface Comment {
   timestamp: number;
 }
 
-export interface ChangeRecord {
-  id: string;
-  description: string;
-  timestamp: number;
-}
-
-export type CommentThreadStatus = 'DRAFT'|'ACTIVE'|'RESOLVED';
+export type CommentThreadStatus = 'DRAFT'|'ACTIVE'|'SENT_TO_AGENT'|'RESOLVED';
 
 export const enum Events {
   CHANGED = 'Changed',
@@ -77,7 +71,8 @@ export interface EventTypes {
 export interface CommentThreadOptions {
   anchor: CommentAnchorSignature;
   comments?: Comment[];
-  changes?: ChangeRecord[];
+  /** True for comments generated from the change tracker. */
+  isGeneratedComment?: boolean;
 }
 
 export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -89,33 +84,41 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
 
   readonly id: string = crypto.randomUUID();
   readonly anchor: CommentAnchorSignature;
+  /** True for comments generated from the change tracker. */
+  readonly isGeneratedComment: boolean;
   #savedIndex?: number;
   comments: Comment[];
   status: CommentThreadStatus = 'DRAFT';
   transmitted: boolean = false;
-  changes?: ChangeRecord[];
 
   constructor(options: CommentThreadOptions) {
     super();
     this.anchor = options.anchor;
     this.comments = options.comments ?? [];
-    this.changes = options.changes;
+    this.isGeneratedComment = Boolean(options.isGeneratedComment);
   }
 
   get index(): number {
     return this.#savedIndex ?? CommentThread.#nextIndex;
   }
 
-  save(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
-    let changed = false;
+  /**
+   * Returns whether it was changed.
+   */
+  #saveText(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): boolean {
     if (text && text.trim().length > 0) {
       this.comments.push({
         author,
         text: text.trim(),
         timestamp: Date.now(),
       });
-      changed = true;
+      return true;
     }
+    return false;
+  }
+
+  save(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
+    let changed = this.#saveText(text, author);
     if (this.status === 'DRAFT') {
       if (this.#savedIndex === undefined) {
         this.#savedIndex = CommentThread.#nextIndex++;
@@ -128,6 +131,20 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     }
   }
 
+  sendToAgent(text?: string, author: 'DEVELOPER'|'AGENT' = 'DEVELOPER'): void {
+    let changed = this.#saveText(text, author);
+    if (this.status === 'DRAFT' || this.status === 'ACTIVE') {
+      if (this.#savedIndex === undefined) {
+        this.#savedIndex = CommentThread.#nextIndex++;
+      }
+      this.status = 'SENT_TO_AGENT';
+      changed = true;
+    }
+    if (changed) {
+      this.dispatchEventToListeners(Events.CHANGED);
+    }
+  }
+
   resolve(replyText?: string): void {
     if (replyText && replyText.trim().length > 0) {
       this.comments.push({

package/front_end/models/issues_manager/CookieDeprecationMetadataIssue.ts

@@ -33,20 +33,19 @@ export class CookieDeprecationMetadataIssue extends Issue<Protocol.Audits.Cookie
   }
 
   getDescription(): MarkdownIssueDescription {
-    const fileName =
+    let fileName =
         this.details().operation === 'SetCookie' ? 'cookieWarnMetadataGrantSet.md' : 'cookieWarnMetadataGrantRead.md';
 
-    let optOutText = '';
+    const substitutions = new Map<string, string>();
     if (this.details().isOptOutTopLevel) {
-      optOutText = '\n\n (Top level site opt-out: ' + this.details().optOutPercentage +
-          '% - [learn more](gracePeriodStagedControlExplainer))';
+      fileName = this.details().operation === 'SetCookie' ? 'cookieWarnMetadataGrantSetOptOut.md' :
+                                                            'cookieWarnMetadataGrantReadOptOut.md';
+      substitutions.set('PLACEHOLDER_optOutPercentage', String(this.details().optOutPercentage));
     }
 
     return {
       file: fileName,
-      substitutions: new Map([
-        ['PLACEHOLDER_topleveloptout', optOutText],
-      ]),
+      substitutions,
       links: [
         {
           link: 'https://goo.gle/changes-to-chrome-browsing',

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -71,8 +71,8 @@ export class DeprecationIssue extends Issue<Protocol.Audits.DeprecationIssueDeta
     }
     return resolveLazyDescription({
       file: 'deprecation.md',
+      title: i18nLazyString(UIStrings.title),
       substitutions: new Map([
-        ['PLACEHOLDER_title', i18nLazyString(UIStrings.title)],
         ['PLACEHOLDER_message', messageFunction],
       ]),
       links,

package/front_end/models/issues_manager/MarkdownIssueDescription.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Platform from '../../core/platform/platform.js';
+import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Marked from '../../third_party/marked/marked.js';
 
 /**
@@ -13,12 +14,14 @@ import * as Marked from '../../third_party/marked/marked.js';
  */
 export interface MarkdownIssueDescription {
   file: string;
+  title?: string;
   substitutions?: Map<string, string>;
   links: Array<{link: string, linkTitle: string}>;
 }
 
 export interface LazyMarkdownIssueDescription {
   file: string;
+  title?: () => string;
   substitutions?: Map<string, () => string>;
   links: Array<{link: string, linkTitle: () => string}>;
 }
@@ -38,8 +41,9 @@ export function resolveLazyDescription(lazyDescription: LazyMarkdownIssueDescrip
     substitutionMap.set(key, value());
   });
 
-  const description = {
+  const description: MarkdownIssueDescription = {
     file: lazyDescription.file,
+    title: lazyDescription.title?.(),
     links: lazyDescription.links.map(linksMap),
     substitutions: substitutionMap,
   };
@@ -54,6 +58,7 @@ export interface IssueDescription {
   title: string;
   markdown: Marked.Marked.Token[];
   links: Array<{link: string, linkTitle: string}>;
+  substitutions?: Map<string, string>;
 }
 
 export async function getFileContent(url: URL): Promise<string> {
@@ -71,9 +76,8 @@ export async function getMarkdownFileContent(filename: string): Promise<string>
 
 export async function createIssueDescriptionFromMarkdown(description: MarkdownIssueDescription):
     Promise<IssueDescription> {
-  const rawMarkdown = await getMarkdownFileContent(description.file);
-  const rawMarkdownWithPlaceholdersReplaced = substitutePlaceholders(rawMarkdown, description.substitutions);
-  return createIssueDescriptionFromRawMarkdown(rawMarkdownWithPlaceholdersReplaced, description);
+  const markdown = await getMarkdownFileContent(description.file);
+  return createIssueDescriptionFromRawMarkdown(markdown, description);
 }
 
 /**
@@ -81,62 +85,20 @@ export async function createIssueDescriptionFromMarkdown(description: MarkdownIs
  */
 export function createIssueDescriptionFromRawMarkdown(
     markdown: string, description: MarkdownIssueDescription): IssueDescription {
-  const markdownAst = Marked.Marked.lexer(markdown);
-  const title = findTitleFromMarkdownAst(markdownAst);
-  if (!title) {
+  const markdownAst = TextUtils.Markdown.tokenizeWithPlaceholders(markdown, description.substitutions);
+  const markdownTitle = findTitleFromMarkdownAst(markdownAst);
+  if (!markdownTitle) {
     throw new Error('Markdown issue descriptions must start with a heading');
   }
 
   return {
-    title,
+    title: description.title ?? markdownTitle,
     markdown: markdownAst.slice(1),
     links: description.links,
+    substitutions: description.substitutions,
   };
 }
 
-const validPlaceholderMatchPattern = /\{(PLACEHOLDER_[a-zA-Z][a-zA-Z0-9]*)\}/g;
-const validPlaceholderNamePattern = /PLACEHOLDER_[a-zA-Z][a-zA-Z0-9]*/;
-
-/**
- * Replaces placeholders in markdown text with a string provided by the
- * `substitutions` map. To keep mental overhead to a minimum, the same
- * syntax is used as for l10n placeholders. Please note that the
- * placeholders require a mandatory 'PLACEHOLDER_' prefix.
- *
- * Example:
- *   const str = "This is markdown with `code` and two placeholders, namely {PLACEHOLDER_PH1} and {PLACEHOLDER_PH2}".
- *   const result = substitutePlaceholders(str, new Map([['PLACEHOLDER_PH1', 'foo'], ['PLACEHOLDER_PH2', 'bar']]));
- *
- * Exported only for unit testing.
- */
-export function substitutePlaceholders(markdown: string, substitutions?: Map<string, string>): string {
-  const unusedPlaceholders = new Set(substitutions ? substitutions.keys() : []);
-  validatePlaceholders(unusedPlaceholders);
-
-  const result = markdown.replace(validPlaceholderMatchPattern, (_, placeholder) => {
-    const replacement = substitutions ? substitutions.get(placeholder) : undefined;
-    if (replacement === undefined) {
-      throw new Error(`No replacement provided for placeholder '${placeholder}'.`);
-    }
-    unusedPlaceholders.delete(placeholder);
-    return replacement;
-  });
-
-  if (unusedPlaceholders.size > 0) {
-    throw new Error(`Unused replacements provided: ${[...unusedPlaceholders]}`);
-  }
-
-  return result;
-}
-
-/** Ensure that all provided placeholders match the naming pattern. **/
-function validatePlaceholders(placeholders: Set<string>): void {
-  const invalidPlaceholders = [...placeholders].filter(placeholder => !validPlaceholderNamePattern.test(placeholder));
-  if (invalidPlaceholders.length > 0) {
-    throw new Error(`Invalid placeholders provided in the substitutions map: ${invalidPlaceholders}`);
-  }
-}
-
 export function findTitleFromMarkdownAst(markdownAst: Marked.Marked.Token[]): string|null {
   if (markdownAst.length === 0 || markdownAst[0].type !== 'heading' || markdownAst[0].depth !== 1) {
     return null;
@@ -148,5 +110,9 @@ export async function getIssueTitleFromMarkdownDescription(description: Markdown
     Promise<string|null> {
   const rawMarkdown = await getMarkdownFileContent(description.file);
   const markdownAst = Marked.Marked.lexer(rawMarkdown);
-  return findTitleFromMarkdownAst(markdownAst);
+  const markdownTitle = findTitleFromMarkdownAst(markdownAst);
+  if (!markdownTitle) {
+    return null;
+  }
+  return description.title ?? markdownTitle;
 }

package/front_end/models/issues_manager/SRIMessageSignatureIssue.ts

@@ -77,10 +77,8 @@ export class SRIMessageSignatureIssue extends Issue<Protocol.Audits.SRIMessageSi
       description.substitutions?.set('PLACEHOLDER_signatureBase', () => details.signatureBase);
     }
     if (details.error === Protocol.Audits.SRIMessageSignatureError.ValidationFailedIntegrityMismatch) {
-      description.substitutions?.set('PLACEHOLDER_integrityAssertions', () => {
-        const prefix = '\n* ';
-        return prefix + this.details().integrityAssertions.join(prefix);
-      });
+      description.substitutions?.set('PLACEHOLDER_integrityAssertions',
+                                     () => this.details().integrityAssertions.join('\n'));
     }
     return resolveLazyDescription(description);
   }

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

@@ -1,4 +1,3 @@
 # Third-party websites are allowed to read cookies on this page
 
 One or more websites are allowed to bypass user settings to read third-party cookies on this page. Web developers should take steps to remove these reads without disrupting user experience. To forcefully block these third-party cookies, update [user settings](manageCookiesHelpPage).
-{PLACEHOLDER_topleveloptout}

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

@@ -0,0 +1,5 @@
+# Third-party websites are allowed to read cookies on this page
+
+One or more websites are allowed to bypass user settings to read third-party cookies on this page. Web developers should take steps to remove these reads without disrupting user experience. To forcefully block these third-party cookies, update [user settings](manageCookiesHelpPage).
+
+(Top level site opt-out: {PLACEHOLDER_optOutPercentage}% - [learn more](gracePeriodStagedControlExplainer))

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

@@ -1,4 +1,3 @@
 # Third-party websites are allowed to set cookies on this page
 
 One or more websites are allowed to bypass user settings to set third-party cookies on this page. Web developers should take steps to remove these sets without disrupting user experience. To forcefully block these third-party cookies, update [user settings](manageCookiesHelpPage).
-{PLACEHOLDER_topleveloptout}

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

@@ -0,0 +1,5 @@
+# Third-party websites are allowed to set cookies on this page
+
+One or more websites are allowed to bypass user settings to set third-party cookies on this page. Web developers should take steps to remove these sets without disrupting user experience. To forcefully block these third-party cookies, update [user settings](manageCookiesHelpPage).
+
+(Top level site opt-out: {PLACEHOLDER_optOutPercentage}% - [learn more](gracePeriodStagedControlExplainer))

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/AutomaticFileSystemWorkspaceBinding.ts

@@ -64,7 +64,7 @@ export class FileSystem implements Workspace.Workspace.Project {
   }
 
   displayName(): string {
-    const {root} = this.automaticFileSystem;
+    const root = this.automaticFileSystem.root.replace(Host.Platform.isWin() ? /[/\\]+$/ : /\/+$/, '');
     let slash = root.lastIndexOf('/');
     if (slash === -1 && Host.Platform.isWin()) {
       slash = root.lastIndexOf('\\');

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);
   }