chrome-devtools-frontend 1.0.1700561 → 1.0.1702515

package/front_end/models/issues_manager/MarkdownIssueDescription.ts

@@ -13,12 +13,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 +40,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 +57,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> {
@@ -82,15 +86,16 @@ 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 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,
   };
 }
 
@@ -148,5 +153,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/javascript_metadata/NativeFunctions.ts

@@ -1367,6 +1367,11 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     signatures: [["message","?options"],["message","transfer"],["message","targetOrigin","?transfer"]],
     receivers: ["Window"]
   },
+  {
+    name: "postMessage",
+    signatures: [["message","targetOrigin"],["message","?options"]],
+    receivers: ["HTMLPersistentWidgetElement","PersistentWidgetOpener"]
+  },
   {
     name: "deleteRule",
     signatures: [["index"]],
@@ -2050,7 +2055,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "write",
-    signatures: [["...text"],["text"],["text1","...text"]],
+    signatures: [["...text"]],
     receivers: ["Document"]
   },
   {
@@ -2489,7 +2494,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "writeln",
-    signatures: [["...text"],["text"],["text1","...text"]]
+    signatures: [["...text"]]
   },
   {
     name: "elementFromPoint",

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/models/source_map_scopes/NamesResolver.ts

@@ -15,7 +15,7 @@ interface CachedScopeMap {
 }
 
 const scopeToCachedIdentifiersMap = new WeakMap<Formatter.FormatterWorkerPool.ScopeTreeNode, CachedScopeMap>();
-const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string|null>>();
+const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Array<Map<string, string|null>>>();
 
 export async function getTextFor(contentProvider: TextUtils.ContentProvider.ContentProvider):
     Promise<TextUtils.Text.Text|null> {
@@ -401,56 +401,61 @@ export const resolveScopeChain =
           return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
+function reverseScopeMapping(variableMapping: Map<string, string>): Map<string, string|null> {
+  const result = new Map<string, string|null>();
+  for (const [compiledName, originalName] of variableMapping) {
+    if (originalName && !result.has(originalName)) {
+      result.set(originalName, compiledName);
+    }
+  }
+  return result;
+}
+
 /**
- * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
- * shadowed) we set it to `null`.
+ * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
  */
 export const allVariablesInCallFrame = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-    Promise<Map<string, string|null>> => {
+    Promise<Array<Map<string, string|null>>> => {
       if (!callFrame.debuggerModel.target()
                .targetManager()
                .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
                .get()) {
-        return new Map<string, string|null>();
+        return [];
       }
-      const cachedMap = cachedMapByCallFrame.get(callFrame);
-      if (cachedMap) {
-        return cachedMap;
+      const cached = cachedMapByCallFrame.get(callFrame);
+      if (cached) {
+        return cached;
+      }
+
+      if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+        const sourceMap = callFrame.script.sourceMap() ??
+            await callFrame.debuggerModel.sourceMapManager().sourceMapForClientPromise(callFrame.script);
+        const mappedVariables =
+            sourceMap?.resolveMappedVariablesAtPosition(callFrame.location(), callFrame.returnValue() !== null);
+        if (mappedVariables) {
+          cachedMapByCallFrame.set(callFrame, mappedVariables);
+          return mappedVariables;
+        }
       }
 
       const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
       const nameMappings =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
-      const reverseMapping = new Map<string, string|null>();
-      const compiledNames = new Set<string>();
-      for (const {variableMapping} of nameMappings) {
-        for (const [compiledName, originalName] of variableMapping) {
-          if (!originalName) {
-            continue;
-          }
-          if (!reverseMapping.has(originalName)) {
-            // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-            const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-            reverseMapping.set(originalName, compiledNameOrNull);
-          }
-          compiledNames.add(compiledName);
-        }
-      }
+      const reverseMapping = nameMappings.map(({variableMapping}) => reverseScopeMapping(variableMapping));
       cachedMapByCallFrame.set(callFrame, reverseMapping);
       return reverseMapping;
     };
 
 /**
- * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
- * shadowed) we set it to `null`.
+ * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
  */
 export const allVariablesAtPosition =
     async(location: SDK.DebuggerModel.Location,
           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-        Promise<Map<string, string|null>> => {
-          const reverseMapping = new Map<string, string|null>();
+        Promise<Array<Map<string, string|null>>> => {
+          const reverseMapping: Array<Map<string, string|null>> = [];
           const script = location.script();
           if (!script) {
             return reverseMapping;
@@ -462,6 +467,15 @@ export const allVariablesAtPosition =
             return reverseMapping;
           }
 
+          if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+            const sourceMap =
+                script.sourceMap() ?? await script.debuggerModel.sourceMapManager().sourceMapForClientPromise(script);
+            const mappedVariables = sourceMap?.resolveMappedVariablesAtPosition(location);
+            if (mappedVariables) {
+              return mappedVariables;
+            }
+          }
+
           const scopeTreeAndText = await computeScopeTree(script);
           if (!scopeTreeAndText) {
             return reverseMapping;
@@ -470,21 +484,10 @@ export const allVariablesAtPosition =
           const {scopeTree, text} = scopeTreeAndText;
           const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
           const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
-          const compiledNames = new Set<string>();
 
           while (scopeChain.length > 0) {
             const {variableMapping} = await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
-            for (const [compiledName, originalName] of variableMapping) {
-              if (!originalName) {
-                continue;
-              }
-              if (!reverseMapping.has(originalName)) {
-                // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-                const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-                reverseMapping.set(originalName, compiledNameOrNull);
-              }
-              compiledNames.add(compiledName);
-            }
+            reverseMapping.push(reverseScopeMapping(variableMapping));
             scopeChain.pop();
           }
           return reverseMapping;

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -4,6 +4,7 @@
 
 import type * 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 type * as Protocol from '../../generated/protocol.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -35,6 +36,10 @@ const UIStrings = {
    * @description Tooltip for the clear announcements button in the announcements tool.
    */
   clearAnnouncements: 'Clear announcements',
+  /**
+   * @description Tooltip for the export to CSV button in the announcements tool.
+   */
+  exportCsv: 'Export to CSV',
   /**
    * @description Label/title for the dropdown filter to select which announcement types to record.
    */
@@ -108,6 +113,8 @@ export interface ViewInput {
   isRecording: boolean;
   onToggleRecording: () => void;
   onClear: () => void;
+  onExportCsv: () => void;
+  canExport: boolean;
   recordTypeFilter: RecordTypeFilter;
   onRecordTypeFilterChange: (type: RecordTypeFilter) => void;
   textFilter: string;
@@ -144,6 +151,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             .variant=${Buttons.Button.Variant.TOOLBAR}
             .jslogContext=${'accessibility.clear-announcements'}>
           </devtools-button>
+          <devtools-button
+            title=${i18nString(UIStrings.exportCsv)}
+            .iconName=${'download'}
+            .disabled=${!input.canExport}
+            @click=${input.onExportCsv}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.export-csv'}>
+          </devtools-button>
           <div class="toolbar-divider" role="separator"></div>
           <select
             title=${i18nString(UIStrings.filterByType)}
@@ -729,6 +744,32 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
   };
 }
 
+export function escapeCsvValue(val: string): string {
+  const escaped = val.replace(/"/g, '""');
+  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r') || escaped.includes('"')) {
+    return `"${escaped}"`;
+  }
+  return escaped;
+}
+
+export function buildCsvContent(announcements: readonly A11yAnnouncement[]): string {
+  const csvRows: string[] = [];
+  csvRows.push(['Time', 'API', 'Politeness', 'Message'].join(','));
+
+  for (const item of announcements) {
+    const timeString = new Date(item.time).toISOString();
+    const row = [
+      escapeCsvValue(timeString),
+      escapeCsvValue(item.api),
+      escapeCsvValue(item.politeness),
+      escapeCsvValue(item.message),
+    ];
+    csvRows.push(row.join(','));
+  }
+
+  return csvRows.join('\r\n');
+}
+
 export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane implements SDK.TargetManager.Observer {
   #announcements: A11yAnnouncement[] = [];
   #filteredAnnouncements: readonly A11yAnnouncement[]|null = null;
@@ -984,6 +1025,29 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
     this.requestUpdate();
   }
 
+  #exportCsv(): void {
+    const csvContent = this.#buildCsvContent();
+    const blob = new Blob(['\ufeff', csvContent], {type: 'text/csv;charset=utf-8'});
+    const url = URL.createObjectURL(blob);
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    const link = document.createElement('a');
+    link.setAttribute('href', url);
+    link.setAttribute('download', `aria-live-announcements-${Platform.DateUtilities.toISO8601Compact(new Date())}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  #buildCsvContent(): string {
+    return buildCsvContent(this.filteredAnnouncements);
+  }
+
+  exportCsvForTest(): string {
+    return this.#buildCsvContent();
+  }
+
   override performUpdate(): void {
     const blockedTargets: BlockedTargetInfo[] = [];
     for (const [target, reason] of this.#blockedTargets) {
@@ -991,6 +1055,7 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       blockedTargets.push({targetName, reason});
     }
 
+    const filteredAnnouncements = this.filteredAnnouncements;
     const input: ViewInput = {
       isRecording: this.#isRecording,
       onToggleRecording: () => {
@@ -1003,6 +1068,10 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       onClear: () => {
         this.clearAnnouncements();
       },
+      onExportCsv: () => {
+        this.#exportCsv();
+      },
+      canExport: filteredAnnouncements.length > 0,
       recordTypeFilter: this.#recordTypeFilter,
       onRecordTypeFilterChange: (type: RecordTypeFilter) => {
         this.setRecordTypeFilter(type);
@@ -1012,7 +1081,7 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
         this.setTextFilter(text);
       },
       blockedTargets,
-      announcements: this.filteredAnnouncements,
+      announcements: filteredAnnouncements,
     };
     this.#view(input, undefined, this.contentElement);
   }

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

@@ -1636,7 +1636,7 @@ async function makeDomTreeWidget(widgetData: AiAssistanceModel.AiAgent.DomTreeAi
   // clang-format off
   const renderedWidget = html`
     ${networkRequest ? renderNetworkRequestPreview(networkRequest) : Lit.nothing}
-    <devtools-widget class="dom-tree-widget" ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+    <devtools-widget class="dom-tree-widget" ${widget(Elements.DOMTreeWidget.DOMTreeWidget, {
       maxTreeDepth: 2,
       enableContextMenu: false,
       showComments: false,

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