chrome-devtools-frontend 1.0.1699061 → 1.0.1701636

package/front_end/panels/application/IndexedDBModel.ts

@@ -428,6 +428,9 @@ export class IndexedDBModel extends SDK.SDKModel.SDKModel<EventTypes> implements
 
   storageBucketDeleted(_event: Protocol.Storage.StorageBucketDeletedEvent): void {
   }
+
+  privateVerificationTokensUpdated(): void {
+  }
 }
 
 SDK.SDKModel.SDKModel.register(IndexedDBModel, {capabilities: SDK.Target.Capability.STORAGE, autostart: false});

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -20,53 +20,48 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Label for the 'origin' field in a parsed Origin Trial Token.
+   * @description Label for the origin field in an origin trial token.
    */
   origin: 'Origin',
   /**
-   * @description Label for `trialName` field in a parsed Origin Trial Token.
-   * This field is only shown when token has unknown trial name as the token
-   * will be put into 'UNKNOWN' group.
+   * @description Label for the trial name field in an origin trial token.
    */
-  trialName: 'Trial Name',
+  trialName: 'Trial name',
   /**
-   * @description Label for `expiryTime` field in a parsed Origin Trial Token.
+   * @description Label for the expiry time field in an origin trial token.
    */
-  expiryTime: 'Expiry Time',
+  expiryTime: 'Expiry time',
   /**
-   * @description Label for `usageRestriction` field in a parsed Origin Trial Token.
+   * @description Label for the usage restriction field in an origin trial token.
    */
-  usageRestriction: 'Usage Restriction',
+  usageRestriction: 'Usage restriction',
   /**
-   * @description Label for `isThirdParty` field in a parsed Origin Trial Token.
+   * @description Label for the third party field in an origin trial token.
    */
-  isThirdParty: 'Third Party',
+  isThirdParty: 'Third party',
   /**
-   * @description Label for a field containing info about an Origin Trial Token's `matchSubDomains` field.
-   *An Origin Trial Token contains an origin URL. The `matchSubDomains` field describes whether the token
-   *only applies to the origin URL or to all subdomains of the origin URL as well.
-   *The field contains either 'true' or 'false'.
+   * @description Label for the subdomain matching field in an origin trial token.
    */
-  matchSubDomains: 'Subdomain Matching',
+  matchSubDomains: 'Subdomain matching',
   /**
-   * @description Label for the raw(= encoded / not human-readable) Origin Trial Token.
+   * @description Label for the raw token text in an origin trial token.
    */
-  rawTokenText: 'Raw Token',
+  rawTokenText: 'Raw token',
   /**
-   * @description Label for `status` field in an Origin Trial Token.
+   * @description Label for the token status field in an origin trial token.
    */
-  status: 'Token Status',
+  status: 'Token status',
   /**
-   * @description Label for tokenWithStatus node.
+   * @description Label for a token node in the origin trials tree view.
    */
   token: 'Token',
   /**
-   * @description Label for a badge showing the number of Origin Trial Tokens. This number is always greater than 1.
+   * @description Label for a badge showing the number of origin trial tokens.
    * @example {2} PH1
    */
   tokens: '{PH1} tokens',
   /**
-   * @description Label shown when there are no Origin Trial Tokens in the Frame view of the Application panel.
+   * @description Label shown when there are no origin trial tokens in the frame details view of the Application panel.
    */
   noTrialTokens: 'No trial tokens',
 } as const;

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -14,13 +14,13 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 const UIStrings = {
   /**
-   * @description Label for an item in the Application Panel Sidebar of the Application panel
+   * @description Label for an item in the sidebar of the Application panel.
    */
   reportingApi: 'Reporting API',
   /**
-   * @description Label for the Crash Report Context child item in the Reporting API section.
+   * @description Label for the crash report context item in the sidebar of the Application panel.
    */
-  crashReportContext: 'Crash Report Context',
+  crashReportContext: 'Crash report context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiTreeElement.ts', UIStrings);
 export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/ReportingApiView.ts

@@ -17,29 +17,21 @@ const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
-   * @description Placeholder text that shows if no report or endpoint was detected.
-   *             A report contains information on issues or events that were encountered by a web browser.
-   *             An endpoint is a URL where the report is sent to.
-   *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
+   * @description Header text in an empty state view when no report or endpoint has been detected in the reporting API view of the Application panel.
    */
   noReportOrEndpoint: 'No report or endpoint',
   /**
-   * @description Placeholder text that shows if no report or endpoint was detected.
-   *             A report contains information on issues or events that were encountered by a web browser.
-   *             An endpoint is a URL where the report is sent to.
-   *             (https://developer.chrome.com/docs/capabilities/web-apis/reporting-api)
+   * @description Explanatory text in an empty state view describing the reporting API view of the Application panel.
    */
-  reportingApiDescription: 'On this page you will be able to inspect `Reporting API` reports and endpoints',
+  reportingApiDescription: 'Inspect `Reporting API` reports and endpoints',
   /**
-   * @description Placeholder text that shows if no report was selected for viewing
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   * @description Header text in an empty state view when no report is selected in the reporting API view of the Application panel.
    */
   noReportSelected: 'No report selected',
   /**
-   * @description Placeholder text instructing the user how to display a Reporting API
-   *report body (https://developers.google.com/web/updates/2018/09/reportingapi#sending).
+   * @description Explanatory text instructing the user how to display a report body in the reporting API view of the Application panel.
    */
-  clickToDisplayBody: 'Click on any report to display its body',
+  clickToDisplayBody: 'Click any report to display its body',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/ReportingApiView.ts', UIStrings);
 export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);

package/front_end/panels/application/application-meta.ts

@@ -12,31 +12,31 @@ import * as PreloadingHelper from './preloading/helper/helper.js';
 
 const UIStrings = {
   /**
-   * @description Text in Application Panel Sidebar of the Application panel
+   * @description Title of the Application panel.
    */
   application: 'Application',
   /**
-   * @description Command for showing the 'Application' tool
+   * @description Command in the command menu for showing the Application panel.
    */
   showApplication: 'Show Application',
   /**
-   * @description A tag of Application Panel that can be searched in the command menu
+   * @description Search tag for the Application panel in the command menu.
    */
   pwa: 'pwa',
   /**
-   * @description Text of button in Clear Storage View of the Application panel
+   * @description Title of an action in the Application panel to clear site data.
    */
   clearSiteData: 'Clear site data',
   /**
-   * @description Title of an action that clears all site data including 3rd party cookies
+   * @description Title of an action in the Application panel to clear all site data including third-party cookies.
    */
   clearSiteDataIncludingThirdparty: 'Clear site data (including third-party cookies)',
   /**
-   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the background services category that can be invoked through the command menu.
    */
   startRecordingEvents: 'Start recording events',
   /**
-   * @description Title of an action under the Background Services category that can be invoked through the Command Menu
+   * @description Title of an action under the background services category that can be invoked through the command menu.
    */
   stopRecordingEvents: 'Stop recording events',
 } as const;

package/front_end/panels/common/CommentThreadWidget.ts

@@ -5,6 +5,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 Input from '../../ui/components/input/input.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
@@ -12,8 +13,10 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import commentThreadWidgetStyles from './commentThreadWidget.css.js';
+import {DOMNodeLink} from './DOMLinkifier.js';
 
 const {html, render, Directives: {createRef, ref}} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -33,7 +36,7 @@ const UIStrings = {
   /**
    * @description Label for the aria-label of the add comment button.
    */
-  addCommentButton: 'Add comment',
+  sendToAgent: 'Send to agent',
   /**
    * @description aria-label for the comment text area.
    */
@@ -52,8 +55,16 @@ const str_ = i18n.i18n.registerUIStrings('panels/common/CommentThreadWidget.ts',
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const lockedString = i18n.i18n.lockedString;
 
+/**
+ * Either the DOM node the thread is anchored to, or a plain text label for anchors that are not
+ * DOM nodes (e.g. network requests).
+ */
+export type Title = {
+  node: SDK.DOMModel.DOMNode,
+}|{text: string};
+
 export interface ViewInput {
-  title: string;
+  title: Title;
   comments: CommentManager.CommentManager.Comment[];
   commentText: string;
   textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
@@ -72,7 +83,9 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     <div class="comment-thread-widget ${hasComment ? 'submitted' : ''}">
       <div class="header">
         <span class="selected-item">
-          <span class="selected-item-text">${input.title}</span>
+          ${'node' in input.title ?
+            widget(DOMNodeLink, {node: input.title.node}) :
+            html`<span class="selected-item-text">${input.title.text}</span>`}
         </span>
         ${hasComment ? html`
           <div class="sent-status">
@@ -137,10 +150,10 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
             </div>
           </devtools-tooltip>
           <devtools-button
-            aria-label=${i18nString(UIStrings.addCommentButton)}
+            aria-label=${i18nString(UIStrings.sendToAgent)}
             .disabled=${!input.commentText.trim()}
             @click=${() => input.onAddComment(input.commentText)}>
-            ${i18nString(UIStrings.addCommentButton)}
+            ${i18nString(UIStrings.sendToAgent)}
           </devtools-button>
         </div>
       ` : Lit.nothing}
@@ -152,7 +165,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
 type View = typeof DEFAULT_VIEW;
 
 export class CommentThreadWidget extends UI.Widget.Widget {
-  title = 'Comment Thread';
+  title: Title = {text: ''};
   #comments: CommentManager.CommentManager.Comment[] = [];
   #commentText = '';
   #textAreaRef = createRef<HTMLTextAreaElement>();

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -4,13 +4,15 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.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 commentsOverlayStyles from './commentsOverlay.css.js';
-import {CommentThreadWidget} from './CommentThreadWidget.js';
+import {CommentThreadWidget, type Title} from './CommentThreadWidget.js';
 
 const {
   html,
@@ -27,6 +29,7 @@ export interface ViewInput {
   onPinClick: (threadId: string) => void;
   activeThread: CommentManager.CommentManager.CommentThread|null;
   activePin: Comments.CommentOverlayManager.PinPositionData|null;
+  title: Title;
   onAddComment: (text: string) => void;
 }
 
@@ -40,6 +43,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
@@ -96,6 +100,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
               )}px`,
             })}>
             ${UI.Widget.widget(CommentThreadWidget, {
+              title: input.title,
               comments: [...item.thread.comments],
               onAddComment: input.onAddComment,
             })}
@@ -115,6 +120,9 @@ 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;
 
   constructor(
       element: HTMLElement|undefined,
@@ -157,11 +165,17 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         this.#onCommentModeChanged,
         this,
     );
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onAgentAttachedChanged,
+        this,
+    );
 
     this.requestUpdate();
   }
 
   override willHide(): void {
+    this.#clearCloseTimeout();
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
@@ -184,10 +198,32 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
         this.#onCommentModeChanged,
         this,
     );
+    this.#commentManager.removeEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onAgentAttachedChanged,
+        this,
+    );
 
     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.requestUpdate();
+  }
+
   #onCommentModeChanged(
       event: Common.EventTarget.EventTargetEvent<
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.COMMENT_MODE_CHANGED]>,
@@ -213,6 +249,43 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  async #getOrComputeTitle(anchor: CommentManager.CommentManager.CommentAnchorSignature|null): Promise<Title> {
+    if (anchor === this.#cachedTitleAnchor) {
+      return this.#cachedTitle;
+    }
+    const title = anchor ? await this.#computeTitle(anchor) : {text: ''};
+    this.#cachedTitleAnchor = anchor;
+    this.#cachedTitle = title;
+    return title;
+  }
+
+  async #computeTitle(anchor: CommentManager.CommentManager.CommentAnchorSignature): Promise<Title> {
+    if (anchor.node) {
+      const target = SDK.TargetManager.TargetManager.instance().targetById(anchor.node.targetId);
+      if (target) {
+        const deferredNode = new SDK.DOMModel.DeferredDOMNode(
+            target,
+            anchor.node.backendNodeId as Protocol.DOM.BackendNodeId,
+        );
+        const node = await deferredNode.resolvePromise();
+        if (node) {
+          return {node};
+        }
+      }
+      return {text: ''};
+    }
+
+    if (anchor.networkRequestId) {
+      const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+      const request = target?.model(SDK.NetworkManager.NetworkManager)?.requestForId(anchor.networkRequestId);
+      if (request) {
+        return {text: request.name()};
+      }
+    }
+
+    return {text: anchor.textSignature || ''};
+  }
+
   #handlePinClick = (threadId: string): void => {
     const thread = this.#commentManager.getCommentThread(threadId);
     if (this.#activeThreadId === threadId) {
@@ -227,16 +300,34 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.requestUpdate();
   };
 
-  override performUpdate(): void {
+  override async performUpdate(signal?: AbortSignal): Promise<void> {
+    if (!this.#commentManager.isAgentAttached()) {
+      this.#view(
+          {
+            pins: [],
+            highlights: [],
+            hoverHighlight: null,
+            commentMode: false,
+            onPinClick: this.#handlePinClick,
+            activeThread: null,
+            activePin: null,
+            title: {text: ''},
+            onAddComment: () => {},
+          },
+          undefined,
+          this.contentElement,
+      );
+      return;
+    }
+
+    const activeThread =
+        this.#activeThreadId ? this.#commentManager.getCommentThread(this.#activeThreadId) ?? null : null;
+    const title = await this.#getOrComputeTitle(activeThread?.anchor ?? null);
+    signal?.throwIfAborted();
+
     const pins = this.#commentOverlayManager.getPinPositions();
     const highlights = this.#commentOverlayManager.getHighlightRects();
-
-    let activePin: Comments.CommentOverlayManager.PinPositionData|null = null;
-    let activeThread: CommentManager.CommentManager.CommentThread|null = null;
-    if (this.#activeThreadId) {
-      activePin = pins.find(p => p.id === this.#activeThreadId) ?? null;
-      activeThread = this.#commentManager.getCommentThread(this.#activeThreadId) ?? null;
-    }
+    const activePin = this.#activeThreadId ? pins.find(p => p.id === this.#activeThreadId) ?? null : null;
 
     const viewInput: ViewInput = {
       pins,
@@ -246,8 +337,20 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       onPinClick: this.#handlePinClick,
       activeThread,
       activePin,
+      title,
       onAddComment: (text: string) => {
-        activeThread?.save(text);
+        if (!activeThread) {
+          return;
+        }
+        activeThread.save(text);
+        const threadId = activeThread.id;
+        this.#closeTimeoutId = window.setTimeout(() => {
+          this.#closeTimeoutId = null;
+          if (this.#activeThreadId === threadId) {
+            this.#activeThreadId = null;
+            this.requestUpdate();
+          }
+        }, AUTO_CLOSE_DELAY_MS);
       },
     };
     this.#view(viewInput, undefined, this.contentElement);
@@ -268,6 +371,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,
@@ -291,3 +397,30 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     }
   }
 }
+
+export class ButtonProvider implements UI.Toolbar.Provider {
+  readonly #button: UI.Toolbar.ToolbarButton;
+  readonly #commentManager: CommentManager.CommentManager.CommentManager;
+
+  constructor(commentManager?: CommentManager.CommentManager.CommentManager) {
+    this.#commentManager = commentManager ??
+        Root.DevToolsContext.globalInstance().get(
+            CommentManager.CommentManager.CommentManager,
+        );
+    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);
+        },
+    );
+  }
+
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#button;
+  }
+}

package/front_end/panels/common/CommentsStatusBarPill.ts

@@ -72,6 +72,11 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
         this.#onThreadsChanged,
         this,
     );
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
     this.requestUpdate();
   }
 
@@ -81,12 +86,19 @@ export class CommentsStatusBarPill extends UI.Widget.Widget {
         this.#onThreadsChanged,
         this,
     );
+    this.#commentManager.removeEventListener(
+        CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
     super.willHide();
   }
 
   override performUpdate(): void {
     const viewInput: ViewInput = {
-      threads: this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT'),
+      threads: this.#commentManager.isAgentAttached() ?
+          this.#commentManager.getCommentThreads().filter(thread => thread.status !== 'DRAFT') :
+          [],
       onPillClick: this.#handlePillClick,
     };
     this.#view(viewInput, undefined, this.contentElement);