chrome-devtools-frontend 1.0.1697595 → 1.0.1698733

package/front_end/panels/browser_debugger/ObjectEventListenersSidebarPane.ts

@@ -20,8 +20,6 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
     this.contentElement.setAttribute('jslog', `${VisualLogging.section('sources.global-listeners')}`);
 
     this.eventListenersView = new EventListeners.EventListenersView.EventListenersView();
-    this.eventListenersView.changeCallback = this.requestUpdate.bind(this);
-    this.eventListenersView.enableDefaultTreeFocus = true;
     this.eventListenersView.show(this.element);
     this.setDefaultFocusedChild(this.eventListenersView);
     this.requestUpdate();
@@ -57,7 +55,8 @@ export class ObjectEventListenersSidebarPane extends UI.Widget.VBox implements U
         windowObjects.push(result.object);
       }
     }
-    await this.eventListenersView.addObjects(windowObjects);
+    this.eventListenersView.objects = windowObjects;
+    await this.eventListenersView.updateComplete;
   }
 
   override wasShown(): void {

package/front_end/panels/common/CommentThreadWidget.ts

@@ -0,0 +1,221 @@
+// 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 '../../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 commentThreadWidgetStyles from './commentThreadWidget.css.js';
+
+const {html, render, Directives: {createRef, ref}} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Link text in the info tooltip for learning more about comments sent to the agent.
+   */
+  learnMore: 'Learn more',
+  /**
+   * @description Text next to the checkmark in the comment thread header indicating that comments have been sent to
+   * the agent.
+   */
+  sent: 'Sent',
+  /**
+   * @description Alt text for the checkmark icon in the comment thread header indicating that comments have been sent
+   * to the agent.
+   */
+  sentCheckmark: 'Sent checkmark',
+  /**
+   * @description Label for the agent response section in the comment thread.
+   */
+  response: 'Response:',
+  /**
+   * @description Label for the aria-label of the add comment button.
+   */
+  addCommentButton: 'Add comment',
+  /**
+   * @description aria-label for the comment text area.
+   */
+  commentInputAriaLabel: 'Comment input',
+} as const;
+
+const UIStringsNotTranslate = {
+  /**
+   * @description Disclaimer text in the comment thread info tooltip.
+   */
+  inputDisclaimer:
+      '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('panels/common/CommentThreadWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
+
+export interface ViewInput {
+  title: string;
+  comments: CommentManager.CommentManager.Comment[];
+  commentText: string;
+  textAreaRef: Lit.Directives.Ref<HTMLTextAreaElement>;
+  onLearnMoreClick: () => void;
+  onAddComment: (text: string) => void;
+  onCommentTextChange: (event: Event) => void;
+}
+
+export type ViewOutput = undefined;
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+  const hasComment = input.comments.length > 0;
+
+  // clang-format off
+  render(html`
+    <style>${Input.textInputStyles}${commentThreadWidgetStyles}</style>
+    <div class="comment-thread-widget ${hasComment ? 'submitted' : ''}">
+      <div class="header">
+        <span class="selected-item">
+          <span class="selected-item-text">${input.title}</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>
+
+      ${hasComment ? html`
+        ${input.comments.map(comment => comment.author === 'DEVELOPER' ? html`
+          <div class="comment-text">
+            ${comment.text}
+          </div>
+        ` : html`
+          <div class="agent-response">
+            <div class="elbow"></div>
+            <div class="response-content">
+              <div class="response-header">${i18nString(UIStrings.response)}</div>
+              ${MarkdownView.MarkdownView.renderTextAsMarkdown(
+                comment.text,
+                new MarkdownView.MarkdownView.MarkdownInsightRenderer(),
+              )}
+            </div>
+          </div>
+        `)}
+      ` : Lit.nothing}
+
+      ${!hasComment ? html`
+        <textarea
+          ${ref(input.textAreaRef)}
+          class="devtools-text-input input"
+          rows="1"
+          aria-label=${i18nString(UIStrings.commentInputAriaLabel)}
+          .value=${input.commentText}
+          @input=${input.onCommentTextChange}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) {
+              event.preventDefault();
+              input.onAddComment(input.commentText);
+            }
+          }}
+        ></textarea>
+        <div class="footer">
+          <devtools-icon
+            class="info-icon"
+            name="info"
+            aria-label="Info"
+            aria-details="comment-thread-info-tooltip"
+            tabindex="0"
+          ></devtools-icon>
+          <devtools-tooltip
+            id="comment-thread-info-tooltip"
+            variant="rich"
+          >
+            <div class="info-tooltip-container">
+              ${lockedString(UIStringsNotTranslate.inputDisclaimer)}
+              <button
+                class="tooltip-link"
+                role="link"
+                @click=${input.onLearnMoreClick}
+              >${i18nString(UIStrings.learnMore)}</button>
+            </div>
+          </devtools-tooltip>
+          <devtools-button
+            aria-label=${i18nString(UIStrings.addCommentButton)}
+            .disabled=${!input.commentText.trim()}
+            @click=${() => input.onAddComment(input.commentText)}>
+            ${i18nString(UIStrings.addCommentButton)}
+          </devtools-button>
+        </div>
+      ` : Lit.nothing}
+    </div>
+  `, target);
+  // clang-format on
+};
+
+type View = typeof DEFAULT_VIEW;
+
+export class CommentThreadWidget extends UI.Widget.Widget {
+  title = 'Comment Thread';
+  #comments: CommentManager.CommentManager.Comment[] = [];
+  #commentText = '';
+  #textAreaRef = createRef<HTMLTextAreaElement>();
+  #view: View;
+  onAddComment?: (text: string) => void;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+    void this.updateComplete.then(() => {
+      this.#textAreaRef.value?.focus({preventScroll: true});
+    });
+  }
+
+  set comments(comments: CommentManager.CommentManager.Comment[]) {
+    this.#comments = comments;
+    this.requestUpdate();
+  }
+
+  #handleLearnMoreClick = (): void => {
+    // TODO: wire up the learn more click
+  };
+
+  #handleAddComment = (text: string): void => {
+    const commentText = text.trim();
+    if (commentText && this.onAddComment) {
+      this.onAddComment(commentText);
+      this.#commentText = '';
+      this.requestUpdate();
+    }
+  };
+
+  #handleCommentTextChange = (event: Event): void => {
+    const input = event.target as HTMLTextAreaElement;
+    this.#commentText = input.value;
+    this.requestUpdate();
+  };
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      title: this.title,
+      comments: this.#comments,
+      commentText: this.#commentText,
+      textAreaRef: this.#textAreaRef,
+      onLearnMoreClick: this.#handleLearnMoreClick,
+      onAddComment: this.#handleAddComment,
+      onCommentTextChange: this.#handleCommentTextChange,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+}

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

@@ -5,29 +5,41 @@
 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 PinPositionData,
-} from './CommentOverlayManager.js';
 import commentsOverlayStyles from './commentsOverlay.css.js';
+import {CommentThreadWidget} from './CommentThreadWidget.js';
 
-const {html, render, nothing, Directives: {styleMap}} = Lit;
+const {
+  html,
+  render,
+  nothing,
+  Directives: {repeat, styleMap},
+} = Lit;
 
 export interface ViewInput {
-  pins: PinPositionData[];
-  highlights: HighlightRectData[];
-  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: Comments.CommentOverlayManager.PinPositionData|null;
+  onAddComment: (text: string) => void;
 }
 
-export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+export type View = (
+    input: ViewInput,
+    output: undefined,
+    target: HTMLElement,
+    ) => void;
+
+const POPUP_MARGIN = 8;
+const PIN_HEIGHT = 30;
+const POPUP_WIDTH = 288;
+const POPUP_HEIGHT = 220;
 
 const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   // clang-format off
@@ -48,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=${h.id}
           style=${styleMap({
             top: `${h.top}px`,
             left: `${h.left}px`,
@@ -60,7 +71,6 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
       ${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`,
@@ -69,28 +79,57 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           <div class="comment-cursor">${p.index}</div>
         </div>
       ` : nothing)}
+      ${input.activePin && input.activeThread ? repeat(
+        [{pin: input.activePin, thread: input.activeThread}],
+        item => item.thread.id,
+        item => html`
+          <div
+            class="comment-popup-widget"
+            style=${styleMap({
+              top: `${Math.min(
+                Math.max(POPUP_MARGIN, item.pin.top + PIN_HEIGHT),
+                Math.max(POPUP_MARGIN, target.clientHeight - POPUP_HEIGHT),
+              )}px`,
+              left: `${Math.min(
+                Math.max(POPUP_MARGIN, item.pin.left),
+                Math.max(POPUP_MARGIN, target.clientWidth - POPUP_WIDTH - POPUP_MARGIN),
+              )}px`,
+            })}>
+            ${UI.Widget.widget(CommentThreadWidget, {
+              comments: [...item.thread.comments],
+              onAddComment: input.onAddComment,
+            })}
+          </div>
+        `,
+      ) : nothing}
     </div>
   `, target);
   // clang-format on
 };
 
 export class CommentsOverlayWidget extends UI.Widget.Widget {
+  static override readonly INJECT: readonly[typeof CommentManager.CommentManager.CommentManager] =
+      [CommentManager.CommentManager.CommentManager] as const;
+
   readonly #view: View;
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
-  #commentOverlayManager: CommentOverlayManager;
+  #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
+  #activeThreadId: string|null = null;
 
   constructor(
       element: HTMLElement|undefined,
-      commentManager: CommentManager.CommentManager.CommentManager,
+      [commentManager]: UI.Widget.WidgetDependencies<typeof CommentsOverlayWidget>,
       view: View = DEFAULT_VIEW,
   ) {
     super(element, {useShadowDom: false});
     this.#view = view;
     this.#commentManager = commentManager;
-    this.#commentOverlayManager = new CommentOverlayManager(this.#commentManager);
+    this.#commentOverlayManager = new Comments.CommentOverlayManager.CommentOverlayManager(
+        this.#commentManager,
+    );
   }
 
-  setOverlayManagerForTest(overlayManager: CommentOverlayManager): void {
+  setOverlayManagerForTest(overlayManager: Comments.CommentOverlayManager.CommentOverlayManager): void {
     this.#commentOverlayManager = overlayManager;
   }
 
@@ -98,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,
     );
@@ -125,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,
     );
@@ -154,24 +193,62 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.COMMENT_MODE_CHANGED]>,
       ): void {
     const isModeActive = event.data;
-    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('comments.toggle-comment-mode');
+    if (!isModeActive) {
+      this.#activeThreadId = null;
+    }
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(
+        'comments.toggle-comment-mode',
+    );
     action?.setToggled(isModeActive);
     this.requestUpdate();
   }
 
   #onStateChanged(): void {
+    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 => {};
+  #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.#commentOverlayManager.clearDraftThreads();
+      this.#activeThreadId = threadId;
+    }
+    this.requestUpdate();
+  };
 
   override performUpdate(): void {
+    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 viewInput: ViewInput = {
-      pins: this.#commentOverlayManager.getPinPositions(),
-      highlights: this.#commentOverlayManager.getHighlightRects(),
+      pins,
+      highlights,
       hoverHighlight: this.#commentOverlayManager.getHoverHighlight(),
       commentMode: this.#commentManager.isCommentMode(),
       onPinClick: this.#handlePinClick,
+      activeThread,
+      activePin,
+      onAddComment: (text: string) => {
+        activeThread?.save(text);
+      },
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
@@ -192,13 +269,25 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     if (actionId === 'comments.toggle-comment-mode') {
       if (!widgetInstance) {
-        widgetInstance = new CommentsOverlayWidget(undefined, this.#commentManager);
+        widgetInstance = new CommentsOverlayWidget(
+            undefined,
+            [this.#commentManager],
+        );
         widgetInstance.markAsRoot();
         widgetInstance.show(document.body);
       }
-      this.#commentManager.setCommentMode(!this.#commentManager.isCommentMode());
+      this.#commentManager.setCommentMode(
+          !this.#commentManager.isCommentMode(),
+      );
       return true;
     }
     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);
       }
     }