chrome-devtools-frontend 1.0.1697595 → 1.0.1697998

package/front_end/ui/comments/CommentsOverlayWidget.ts

@@ -13,21 +13,45 @@ import {
   Events as CommentOverlayManagerEvents,
   type HighlightRectData,
   type HoverHighlightData,
+  type PendingHighlightRectData,
+  type PendingPinPositionData,
   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 type ViewHighlightRectData = HighlightRectData|PendingHighlightRectData;
 
 export interface ViewInput {
   pins: PinPositionData[];
-  highlights: HighlightRectData[];
+  pendingPin: PendingPinPositionData|null;
+  highlights: ViewHighlightRectData[];
   hoverHighlight: HoverHighlightData|null;
   commentMode: boolean;
   onPinClick: (threadId: string) => void;
+  activeThread: CommentManager.CommentManager.CommentThread|null;
+  activePin: PinPositionData|PendingPinPositionData|null;
+  activeTargetKey: unknown;
+  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 +72,7 @@ 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}
+          data-comment-id=${('id' in h && h.id) || nothing}
           style=${styleMap({
             top: `${h.top}px`,
             left: `${h.left}px`,
@@ -57,6 +81,16 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           })}>
         </div>
       ` : nothing)}
+      ${input.pendingPin && input.pendingPin.visible ? html`
+        <div
+          class="comment-pin"
+          style=${styleMap({
+            top: `${input.pendingPin.top}px`,
+            left: `${input.pendingPin.left}px`,
+          })}>
+          <div class="comment-cursor">${input.pendingPin.index}</div>
+        </div>
+      ` : nothing}
       ${input.pins.map(p => p.visible ? html`
         <div
           class="comment-pin"
@@ -69,25 +103,54 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
           <div class="comment-cursor">${p.index}</div>
         </div>
       ` : nothing)}
+      ${input.activePin ? repeat(
+        [{pin: input.activePin, key: input.activeTargetKey}],
+        item => item.key,
+        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: input.activeThread ? [...input.activeThread.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;
+  #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 CommentOverlayManager(
+        this.#commentManager,
+    );
   }
 
   setOverlayManagerForTest(overlayManager: CommentOverlayManager): void {
@@ -154,24 +217,68 @@ 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');
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction(
+        'comments.toggle-comment-mode',
+    );
     action?.setToggled(isModeActive);
     this.requestUpdate();
   }
 
   #onStateChanged(): void {
+    if (this.#commentOverlayManager.getPendingDraft()) {
+      this.#activeThreadId = null;
+    }
     this.requestUpdate();
   }
 
-  #handlePinClick = (_threadId: string): void => {};
+  #handlePinClick = (threadId: string): void => {
+    this.#commentOverlayManager.clearPendingAnchor();
+    if (this.#activeThreadId === threadId) {
+      this.#activeThreadId = null;
+    } else {
+      this.#activeThreadId = threadId;
+    }
+    this.requestUpdate();
+  };
 
   override performUpdate(): void {
+    const pins = this.#commentOverlayManager.getPinPositions();
+    const draft = this.#commentOverlayManager.getPendingDraft();
+    const pendingPin = draft?.pin ?? null;
+    const highlights: ViewHighlightRectData[] = [
+      ...this.#commentOverlayManager.getHighlightRects(),
+    ];
+
+    if (draft?.highlight) {
+      highlights.push(draft.highlight);
+    }
+
+    let activePin: PinPositionData|PendingPinPositionData|null = null;
+    let activeThread: CommentManager.CommentManager.CommentThread|null = null;
+    if (pendingPin) {
+      activePin = pendingPin;
+    } else 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,
+      pendingPin,
+      highlights,
       hoverHighlight: this.#commentOverlayManager.getHoverHighlight(),
       commentMode: this.#commentManager.isCommentMode(),
       onPinClick: this.#handlePinClick,
+      activeThread,
+      activePin,
+      activeTargetKey: draft ?? activeThread,
+      onAddComment: (text: string) => {
+        const pendingDraft = this.#commentOverlayManager.getPendingDraft();
+
+        if (pendingDraft) {
+          this.#commentOverlayManager.createComment(pendingDraft.element, text, {pendingDraft});
+        }
+      },
     };
     this.#view(viewInput, undefined, this.contentElement);
   }
@@ -192,11 +299,16 @@ 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;

package/front_end/ui/comments/commentThreadWidget.css

@@ -0,0 +1,173 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  .comment-thread-widget {
+    display: flex;
+    width: var(--sys-size-30);
+    padding: var(--sys-size-8);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--sys-size-4);
+    border-radius: var(--sys-shape-corner-medium);
+    background: var(--sys-color-base);
+    box-shadow: var(--sys-elevation-level2);
+    cursor: default;
+  }
+
+  .comment-thread-widget.submitted {
+    background: var(--sys-color-surface2);
+  }
+
+  .header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .sent-status {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-2);
+    font-size: var(--sys-typescale-body5-size);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .check-icon {
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .selected-item {
+    display: flex;
+    height: calc(var(--sys-size-8) + var(--sys-size-2));
+    padding: var(--sys-size-2) var(--sys-size-4) var(--sys-size-2) var(--sys-size-3);
+    align-items: center;
+    border-radius: var(--sys-shape-corner-extra-small);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+    background: var(--sys-color-base);
+    font-family: var(--source-code-font-family);
+    font-size: var(--monospace-font-size);
+    color: var(--sys-color-token-tag);
+    overflow: hidden;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  .comment-text {
+    width: 100%;
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body4-size);
+    color: var(--sys-color-on-surface-subtle);
+    line-height: var(--sys-size-9);
+    overflow-wrap: break-word;
+    white-space: pre-wrap;
+  }
+
+  .agent-response {
+    display: flex;
+    gap: var(--sys-size-2);
+    margin-top: var(--sys-size-4);
+    width: 100%;
+    align-items: flex-start;
+  }
+
+  .elbow {
+    width: var(--sys-size-6);
+    height: var(--sys-size-6);
+    margin-left: var(--sys-size-3);
+    margin-right: var(--sys-size-3);
+    border-left: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+    border-bottom-left-radius: var(--sys-size-6);
+    flex-shrink: 0;
+  }
+
+  .response-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+
+    --code-block-background-color: var(--sys-color-base);
+    --code-background-color: var(--sys-color-base);
+  }
+
+  .response-header {
+    font-weight: bold;
+    margin-bottom: var(--sys-size-2);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    line-height: var(--sys-size-8);
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .response-content devtools-markdown-view {
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body4-size);
+    color: var(--sys-color-on-surface-subtle);
+    line-height: var(--sys-size-9);
+  }
+
+  .input {
+    height: auto;
+    min-height: var(--sys-size-14);
+    max-height: var(--sys-size-27);
+    field-sizing: content;
+    resize: none;
+    scrollbar-width: none;
+    padding: var(--sys-size-5) var(--sys-size-8);
+    border-radius: var(--sys-shape-corner-small);
+    border: var(--sys-size-1) solid var(--sys-color-outline);
+    background: var(--sys-color-base);
+    font-family: var(--default-font-family);
+    font-size: var(--sys-typescale-body5-size);
+    line-height: var(--sys-size-9);
+    letter-spacing: 0;
+  }
+
+  .input::placeholder {
+    color: var(--sys-color-on-surface-subtle);
+  }
+
+  .footer {
+    display: flex;
+    width: 100%;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--sys-size-5);
+  }
+
+  .info-icon {
+    color: var(--sys-color-on-surface-subtle);
+    cursor: pointer;
+  }
+
+  .info-tooltip-container {
+    max-width: var(--sys-size-28);
+    padding: var(--sys-size-4) var(--sys-size-5);
+  }
+
+  .tooltip-link {
+    display: block;
+    margin-top: var(--sys-size-4);
+    color: var(--sys-color-primary);
+    padding-left: 0;
+    background: none;
+    border: none;
+    font: inherit;
+    text-decoration: underline;
+    cursor: pointer;
+  }
+
+  .selected-item-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

package/front_end/ui/comments/comments.ts

@@ -6,10 +6,12 @@ import * as CommentAnchorResolver from './CommentAnchorResolver.js';
 import * as CommentOverlayManager from './CommentOverlayManager.js';
 import * as CommentsOverlayWidget from './CommentsOverlayWidget.js';
 import * as CommentsStatusBarPill from './CommentsStatusBarPill.js';
+import * as CommentThreadWidget from './CommentThreadWidget.js';
 
 export {
   CommentAnchorResolver,
   CommentOverlayManager,
   CommentsOverlayWidget,
   CommentsStatusBarPill,
+  CommentThreadWidget,
 };

package/front_end/ui/comments/commentsOverlay.css

@@ -66,4 +66,10 @@
     background-color: color-mix(in srgb, var(--sys-color-primary), transparent 85%);
     box-sizing: border-box;
   }
+
+  .comment-popup-widget {
+    position: absolute;
+    z-index: 2501;
+    pointer-events: auto;
+  }
 }

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1984,7 +1984,7 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (arrayRanges && arrayRanges.length > 0) {
       empty = false;
     }
-    const sortPropertiesAlphabetically = properties?.[0]?.parent?.sortPropertiesAlphabetically ?? true;
+    const sortPropertiesAlphabetically = properties?.[0]?.sortPropertiesAlphabetically ?? true;
     properties?.sort((a, b) => compareProperties(a, b, sortPropertiesAlphabetically));
 
     const entriesProperty = internalProperties?.find(({property}) => property.name === '[[Entries]]');

package/front_end/ui/legacy/components/perf_ui/FlameChart.ts

@@ -583,6 +583,10 @@ export class FlameChart extends FlameChartBase implements NetworkTimeCalculator.
   }
 
   #transformColor(entryIndex: number, color: string): string {
+    if (!color) {
+      return '';
+    }
+
     if (this.#shouldDimEvent(entryIndex)) {
       let dimmed = this.colorDimmingCache.get(color);
       if (dimmed) {

package/package.json

@@ -52,8 +52,8 @@
     "@typescript-eslint/utils": "8.64.0",
     "@typescript/tsc": "npm:typescript@6.0.2",
     "chai": "6.2.2",
-    "cssnano": "8.0.2",
-    "cssnano-preset-lite": "5.0.1",
+    "cssnano": "9.0.4",
+    "cssnano-preset-lite": "6.0.2",
     "diff": "9.0.0",
     "esbuild": "0.28.2",
     "eslint": "9.39.5",
@@ -75,11 +75,11 @@
     "lit-analyzer": "2.0.3",
     "mocha": "12.0.0",
     "ora": "9.0.0",
-    "postcss": "8.5.25",
+    "postcss": "8.5.28",
     "puppeteer-core": "25.3.0",
     "sinon": "22.0.0",
     "source-map-support": "0.5.21",
-    "stylelint": "17.14.0",
+    "stylelint": "17.15.0",
     "stylelint-config-standard": "40.0.0",
     "svgo": "4.1.0",
     "ts-lit-plugin": "2.0.2",
@@ -90,5 +90,5 @@
     "yargs": "18.1.0",
     "yargs-unparser": "2.0.0"
   },
-  "version": "1.0.1697595"
+  "version": "1.0.1697998"
 }