chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -16,17 +16,22 @@ const {
   html,
   render,
   nothing,
-  Directives: {repeat, styleMap},
+  Directives: {classMap, repeat, styleMap},
 } = Lit;
 
 export interface ViewInput {
   pins: Comments.CommentOverlayManager.PinPositionData[];
-  highlights: Comments.CommentOverlayManager.HighlightRectData[];
+  /**
+   * Highlight of the currently open thread. Null when no thread is open, so
+   * only pins are rendered.
+   */
+  activeHighlight: Comments.CommentOverlayManager.HighlightRectData|null;
   hoverHighlight: Comments.CommentOverlayManager.HoverHighlightData|null;
   commentMode: boolean;
   onPinClick: (threadId: string) => void;
   activeThread: CommentManager.CommentManager.CommentThread|null;
   activePin: Comments.CommentOverlayManager.PinPositionData|null;
+  fallbackPosition?: {left: number, top: number}|null;
   title: Title;
   onAddComment: (text: string) => void;
   onDeleteQueuedComment: () => void;
@@ -46,8 +51,10 @@ const PIN_HEIGHT = 30;
 const POPUP_WIDTH = 288;
 const POPUP_HEIGHT = 220;
 const AUTO_CLOSE_DELAY_MS = 2000;
+const COMMENTS_VIEW_ID = 'comments';
 
 const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  const popupPosition = input.activePin ?? input.fallbackPosition;
   // clang-format off
   render(html`
     <style>${commentsOverlayStyles}</style>
@@ -62,51 +69,54 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           })}>
         </div>
       ` : nothing}
-      ${repeat(
-        input.highlights.filter(h => h.visible),
-        h => h.id,
-        h => html`
-          <div
-            class="comment-anchor-highlight"
-            style=${styleMap({
-              transform: `translate3d(${h.left}px, ${h.top}px, 0)`,
-              width: `${h.width}px`,
-              height: `${h.height}px`,
-            })}>
-          </div>
-        `,
-      )}
+      ${input.activeHighlight?.visible && input.activeThread ? html`
+        <div
+          class=${classMap({
+            'comment-anchor-highlight': true,
+            resolved: input.activeThread.status === 'RESOLVED',
+          })}
+          style=${styleMap({
+            transform: `translate3d(${input.activeHighlight.left}px, ${input.activeHighlight.top}px, 0)`,
+            width: `${input.activeHighlight.width}px`,
+            height: `${input.activeHighlight.height}px`,
+          })}>
+        </div>
+      ` : nothing}
       ${repeat(
         input.pins.filter(p => p.visible),
         p => p.id,
         p => html`
           <div
             class="comment-pin"
+            aria-hidden="true"
             style=${styleMap({
               transform: `translate3d(${p.left}px, ${p.top}px, 0)`,
             })}
             @click=${() => input.onPinClick(p.id)}>
-            <div class="comment-cursor">${p.index}</div>
+            <div class="comment-cursor"></div>
           </div>
         `,
       )}
-      ${input.activePin && input.activeThread ? repeat(
-        [{pin: input.activePin, thread: input.activeThread}],
+      ${popupPosition && input.activeThread ? repeat(
+        [{position: popupPosition, thread: input.activeThread}],
         item => item.thread.id,
         item => {
-          const popupTop = Math.min(
-            Math.max(POPUP_MARGIN, item.pin.top + PIN_HEIGHT),
-            Math.max(POPUP_MARGIN, target.clientHeight - POPUP_HEIGHT),
-          );
+          // Clamp horizontal position so the popup stays within the viewport with POPUP_MARGIN padding.
           const popupLeft = Math.min(
-            Math.max(POPUP_MARGIN, item.pin.left),
+            Math.max(POPUP_MARGIN, item.position.left),
             Math.max(POPUP_MARGIN, target.clientWidth - POPUP_WIDTH - POPUP_MARGIN),
           );
+          // When anchored to a pin (`activePin`), place the popup below the pin (`top + PIN_HEIGHT`).
+          // When unanchored (`fallbackPosition` from a drawer row), place the anchor point just above
+          // the row (`top - POPUP_MARGIN`) and shift the popup up by its own height via `translateY(-100%)`.
+          const topOffset = input.activePin ? item.position.top + PIN_HEIGHT : item.position.top - POPUP_MARGIN;
+          const maxTop = target.clientHeight - (input.activePin ? POPUP_HEIGHT : POPUP_MARGIN);
+          const popupTop = Math.min(Math.max(POPUP_MARGIN, topOffset), Math.max(POPUP_MARGIN, maxTop));
           return html`
             <div
               class="comment-popup-widget"
               style=${styleMap({
-                transform: `translate3d(${popupLeft}px, ${popupTop}px, 0)`,
+                transform: `translate3d(${popupLeft}px, ${popupTop}px, 0)${input.activePin ? '' : ' translateY(-100%)'}`,
               })}>
               ${UI.Widget.widget(CommentThreadWidget, {
                 title: input.title,
@@ -127,6 +137,13 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
   // clang-format on
 };
 
+function isEventInsidePopupOrPin(event: Event): boolean {
+  const composedTarget = event.composedPath()[0];
+  const target = composedTarget instanceof Element ? composedTarget : event.target;
+  return target instanceof Element &&
+      Boolean(Comments.CommentAnchorResolver.closestAcrossShadow(target, '.comment-popup-widget, .comment-pin'));
+}
+
 export class CommentsOverlayWidget extends UI.Widget.Widget {
   static override readonly INJECT: readonly[typeof CommentManager.CommentManager.CommentManager] =
       [CommentManager.CommentManager.CommentManager] as const;
@@ -135,18 +152,22 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
   #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
   #activeThreadId: string|null = null;
+  #fallbackPosition: {left: number, top: number}|null = null;
   #closeTimeoutId: number|null = null;
   #cachedTitle: Title = {text: ''};
   #cachedTitleAnchor: CommentManager.CommentManager.CommentAnchorSignature|null = null;
 
   #setActiveThreadId(threadId: string|null): void {
+    this.#fallbackPosition = null;
     if (this.#activeThreadId !== threadId) {
       this.#clearCloseTimeout();
       this.#activeThreadId = threadId;
       if (threadId && this.isShowing()) {
         document.documentElement.addEventListener('keydown', this.#onKeyDown);
+        document.documentElement.addEventListener('click', this.#onClickOutside, {capture: true});
       } else {
         document.documentElement.removeEventListener('keydown', this.#onKeyDown);
+        document.documentElement.removeEventListener('click', this.#onClickOutside, {capture: true});
       }
     }
   }
@@ -199,6 +220,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     );
     if (this.#activeThreadId) {
       document.documentElement.addEventListener('keydown', this.#onKeyDown);
+      document.documentElement.addEventListener('click', this.#onClickOutside, {capture: true});
     }
 
     this.requestUpdate();
@@ -207,6 +229,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   override willHide(): void {
     this.#clearCloseTimeout();
     document.documentElement.removeEventListener('keydown', this.#onKeyDown);
+    document.documentElement.removeEventListener('click', this.#onClickOutside, {capture: true});
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
@@ -364,11 +387,18 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     }
   };
 
+  #onClickOutside = (event: MouseEvent): void => {
+    if (!this.#activeThreadId || isEventInsidePopupOrPin(event)) {
+      return;
+    }
+    this.#handleCloseCommentThread();
+  };
+
   #renderDisconnectedView(): void {
     this.#view(
         {
           pins: [],
-          highlights: [],
+          activeHighlight: null,
           hoverHighlight: null,
           commentMode: false,
           onPinClick: this.#handlePinClick,
@@ -391,17 +421,19 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       title: Title,
       ): void {
     const pins = this.#commentOverlayManager.getPinPositions();
-    const highlights = this.#commentOverlayManager.getHighlightRects();
     const activePin = this.#activeThreadId ? pins.find(p => p.id === this.#activeThreadId) ?? null : null;
+    const activeHighlight =
+        this.#activeThreadId ? this.#commentOverlayManager.getHighlight(this.#activeThreadId) ?? null : null;
 
     const viewInput: ViewInput = {
       pins,
-      highlights,
+      activeHighlight,
       hoverHighlight: this.#commentOverlayManager.getHoverHighlight(),
       commentMode: this.#commentManager.isCommentMode(),
       onPinClick: this.#handlePinClick,
       activeThread,
       activePin,
+      fallbackPosition: this.#fallbackPosition,
       title,
       onAddComment: (text: string) => {
         if (!activeThread) {
@@ -470,10 +502,11 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     this.#renderWithTitle(activeThread, title);
   }
 
-  openThread(threadId: string): void {
+  openThread(threadId: string, fallbackPosition?: {left: number, top: number}): void {
     this.#clearCloseTimeout();
     this.#commentOverlayManager.clearDraftThreads();
     this.#setActiveThreadId(threadId);
+    this.#fallbackPosition = fallbackPosition ?? null;
     this.requestUpdate();
   }
 }
@@ -495,20 +528,21 @@ function getOrCreateOverlayWidget(
   return widgetInstance;
 }
 
-export class ThreadRevealer implements Common.Revealer.Revealer<CommentManager.CommentManager.CommentThread> {
-  async reveal(thread: CommentManager.CommentManager.CommentThread): Promise<void> {
+export class ThreadRevealer implements Common.Revealer.Revealer<CommentManager.CommentThread.RevealableThread> {
+  async reveal({thread, position}: CommentManager.CommentThread.RevealableThread): Promise<void> {
     const panelId = Comments.CommentAnchorResolver.extractPanelId(thread.anchor.vePath);
     if (panelId && UI.InspectorView.InspectorView.instance().hasPanel(panelId)) {
       await UI.InspectorView.InspectorView.instance().showPanel(panelId);
     }
 
     const element = Comments.CommentAnchorResolver.rematchCommentAnchor(thread);
+    thread.setOrphaned(!element);
     if (element) {
       element.scrollIntoView({block: 'center', inline: 'nearest', behavior: 'smooth'});
     }
 
     const overlay = getOrCreateOverlayWidget();
-    overlay.openThread(thread.id);
+    overlay.openThread(thread.id, position);
   }
 }
 
@@ -528,14 +562,39 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         return false;
       }
       getOrCreateOverlayWidget(this.#commentManager);
-      this.#commentManager.setCommentMode(
-          !this.#commentManager.isCommentMode(),
-      );
+      const enteringCommentMode = !this.#commentManager.isCommentMode();
+      this.#commentManager.setCommentMode(enteringCommentMode);
+      this.#revealCommentsView(enteringCommentMode);
       return true;
     }
     return false;
   }
 
+  /**
+   * When entering comment mode with the drawer open, add the Comments tab to
+   * the drawer without selecting it or moving focus away from the page being
+   * commented on. When leaving comment mode, always open the drawer on the
+   * Comments tab, as checking the responses is the likely next step.
+   */
+  #revealCommentsView(enteringCommentMode: boolean): void {
+    const viewManager = UI.ViewManager.ViewManager.instance();
+    if (!viewManager.hasView(COMMENTS_VIEW_ID)) {
+      return;
+    }
+    if (enteringCommentMode) {
+      if (!UI.InspectorView.InspectorView.maybeGetInspectorViewInstance()?.drawerVisible()) {
+        return;
+      }
+      void viewManager.resolveLocation(viewManager.locationNameForViewId(COMMENTS_VIEW_ID)).then(location => {
+        return location?.showView(viewManager.view(COMMENTS_VIEW_ID), /* insertBefore */ undefined,
+                                  /* userGesture */ false,
+                                  /* omitFocus */ true, /* shouldSelectTab */ false);
+      });
+      return;
+    }
+    void viewManager.showView(COMMENTS_VIEW_ID, /* userGesture */ true);
+  }
+
   static resetForTest(): void {
     if (widgetInstance) {
       widgetInstance.detach();

package/front_end/panels/common/commentThreadWidget.css

@@ -68,6 +68,23 @@
     min-width: 0;
   }
 
+  .thread-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-4);
+    width: 100%;
+    max-height: min(var(--sys-size-32), 50vh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  .thread-body:hover,
+  .thread-body:focus-within {
+    scrollbar-color: var(--sys-color-neutral-outline) transparent;
+  }
+
   .comment-text {
     width: 100%;
     font-family: var(--default-font-family);

package/front_end/panels/common/commentsOverlay.css

@@ -33,23 +33,14 @@
   }
 
   .comment-cursor {
-    display: flex;
     width: var(--sys-size-9);
     height: var(--sys-size-9);
     box-sizing: border-box;
     padding: 0;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
     flex-shrink: 0;
     box-shadow: var(--sys-elevation-level2);
     border-radius: 100px 100px 100px var(--sys-shape-corner-extra-small, 4px);
     background: var(--sys-color-primary);
-    color: var(--sys-color-on-primary);
-    font-family: var(--default-font-family);
-    font-size: var(--sys-typescale-body5-size);
-    font-weight: var(--ref-typeface-weight-bold, 600);
-    line-height: 1;
     transition: transform 0.1s ease;
     transform-origin: center center;
   }
@@ -59,12 +50,16 @@
     top: 0;
     left: 0;
     pointer-events: none;
-    border: var(--sys-size-2) dashed var(--sys-color-primary);
+    border: var(--sys-size-2) solid var(--sys-color-primary);
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 90%);
     box-sizing: border-box;
     will-change: transform;
   }
 
+  .comment-anchor-highlight.resolved {
+    border-style: dashed;
+  }
+
   .comment-hover-highlight {
     position: absolute;
     top: 0;

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

@@ -64,6 +64,16 @@ UI.ActionRegistration.registerActionExtension({
     const CommonModule = await loadCommonModule();
     return new CommonModule.CommentsOverlayWidget.ActionDelegate();
   },
+  bindings: [
+    {
+      shortcut: 'Ctrl+Shift+K',
+      platform: UI.ActionRegistration.Platforms.WINDOWS_LINUX,
+    },
+    {
+      shortcut: 'Meta+Shift+K',
+      platform: UI.ActionRegistration.Platforms.MAC,
+    },
+  ],
 });
 
 UI.Toolbar.registerToolbarItem({
@@ -78,7 +88,7 @@ UI.Toolbar.registerToolbarItem({
 
 Common.Revealer.registerRevealer({
   contextTypes() {
-    return [CommentManager.CommentManager.CommentThread];
+    return [CommentManager.CommentThread.RevealableThread];
   },
   async loadRevealer() {
     const CommonModule = await loadCommonModule();