chrome-devtools-frontend 1.0.1697998 → 1.0.1698733

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -17,7 +17,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {frameworkEventListeners} from './EventListenersUtils.js';
 import eventListenersViewStyles from './eventListenersView.css.js';
-const {widget} = UI.Widget;
+const {widget, widgetRef} = UI.Widget;
 const {html, render} = Lit;
 const {repeat} = Lit.Directives;
 
@@ -54,16 +54,23 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/event_listeners/EventListenersView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ListenerEntry {
+  object: SDK.RemoteObject.RemoteObject;
+  listener: SDK.DOMDebuggerModel.EventListener;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree;
+}
+
 interface ViewInput {
   togglePassiveListener(listener: SDK.DOMDebuggerModel.EventListener): void;
   removeListener(listener: SDK.DOMDebuggerModel.EventListener): boolean;
   reveal(object: SDK.RemoteObject.RemoteObject): void;
   linkifier: Components.Linkifier.Linkifier;
-  listeners: Map<string, Array<{object: SDK.RemoteObject.RemoteObject, listener: SDK.DOMDebuggerModel.EventListener}>>;
+  listeners: Map<string, ListenerEntry[]>;
   filter?: {showFramework: boolean, showPassive: boolean, showBlocking: boolean};
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
 export const DEFAULT_VIEW: View = (input, output, target) => {
   const types = input.listeners.keys().toArray().sort();
 
@@ -92,37 +99,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     void menu.show();
   };
 
-  const listenerProperties = (listener: SDK.DOMDebuggerModel.EventListener): Iterable<Lit.TemplateResult> => {
-    const runtimeModel = listener.domDebuggerModel().runtimeModel();
-    const properties = [
-      new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
-          runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', listener.useCapture()), undefined, {
-            readOnly: false,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }),
-      new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
-          runtimeModel.createRemotePropertyFromPrimitiveValue('passive', listener.passive()), undefined, {
-            readOnly: false,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }),
-      new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
-          runtimeModel.createRemotePropertyFromPrimitiveValue('once', listener.once()), undefined, {
-            readOnly: false,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }),
-    ];
-    if (typeof listener.handler() !== 'undefined') {
-      properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
-          new SDK.RemoteObject.RemoteObjectProperty('handler', listener.handler()), undefined, {
-            readOnly: false,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-          }));
-    }
-    return ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement
-        .createPropertyNodes({properties}, true, true, undefined)
-        .map(node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`);
-  };
-
   const shouldHide = (listenerOrType: SDK.DOMDebuggerModel.EventListener|string): boolean => {
     if (!input.filter) {
       return false;
@@ -183,7 +159,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           <li role=treeitem toggle-on-click aria-label="${type}, event listener" ?hidden=${shouldHide(type)}>
            ${type}
            <ul role=group>
-             ${repeat(input.listeners.get(type) ?? [], ({listener}) => listener, ({listener, object}) => html`
+             ${repeat(input.listeners.get(type) ?? [], ({listener}) => listener, ({listener, object, objectTree}) => html`
                <li role=treeitem
                    data-origin=${listener.origin()}
                    @contextmenu=${(e: Event) => onContextMenu(e, listener, object)}
@@ -213,9 +189,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                          undefined, {tabStop: true})}
                    </span>
                  </span>
-                 <ul role=group>
-                   ${listenerProperties(listener)}
-                 </ul>
+                 <ul role=group ${widget(ObjectUI.ObjectPropertiesSection.ObjectTreeWidget, {objectTree})} ${
+                     widgetRef(ObjectUI.ObjectPropertiesSection.ObjectTreeWidget, () => {})}></ul>
                </li>`)}
              </ul>
           </li>`)}
@@ -229,8 +204,7 @@ export class EventListenersView extends UI.Widget.VBox {
   #objects: Array<SDK.RemoteObject.RemoteObject|null> = [];
   #filter: {showFramework: boolean, showPassive: boolean, showBlocking: boolean}|undefined;
   #view: View;
-  #listeners?:
-      Map<string, Array<{object: SDK.RemoteObject.RemoteObject, listener: SDK.DOMDebuggerModel.EventListener}>>;
+  #listeners?: Map<string, ListenerEntry[]>;
   #linkifier = new Components.Linkifier.Linkifier();
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
@@ -271,6 +245,7 @@ export class EventListenersView extends UI.Widget.VBox {
       filter: this.#filter,
       togglePassiveListener: (listener: SDK.DOMDebuggerModel.EventListener) => {
         void listener.togglePassive().then(() => {
+          this.#listeners = undefined;
           this.requestUpdate();
         });
       },
@@ -305,14 +280,27 @@ export class EventListenersView extends UI.Widget.VBox {
     this.eventListenersArrivedForTest();
   }
 
-  static async #loadListeners(objects: SDK.RemoteObject.RemoteObject[]): Promise<
-      Map<string, Array<{object: SDK.RemoteObject.RemoteObject, listener: SDK.DOMDebuggerModel.EventListener}>>> {
+  static #createObjectTree(listener: SDK.DOMDebuggerModel.EventListener): ObjectUI.ObjectPropertiesSection.ObjectTree {
+    const object = SDK.RemoteObject.RemoteObject.fromLocalObject({
+      useCapture: listener.useCapture(),
+      passive: listener.passive(),
+      once: listener.once(),
+      ...(typeof listener.handler() !== 'undefined' ? {handler: listener.handler()} : {}),
+    });
+    const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+      readOnly: false,
+      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
+    objectTree.expanded = true;
+    return objectTree;
+  }
+
+  static async #loadListeners(objects: SDK.RemoteObject.RemoteObject[]): Promise<Map<string, ListenerEntry[]>> {
     return Map.groupBy((await Promise.all(objects.map(this.#loadListenersForObject))).flat(),
                        ({listener}) => listener.type());
   }
 
-  static async #loadListenersForObject(object: SDK.RemoteObject.RemoteObject):
-      Promise<Array<{object: SDK.RemoteObject.RemoteObject, listener: SDK.DOMDebuggerModel.EventListener}>> {
+  static async #loadListenersForObject(object: SDK.RemoteObject.RemoteObject): Promise<ListenerEntry[]> {
     const domDebuggerModel = object.runtimeModel().target().model(SDK.DOMDebuggerModel.DOMDebuggerModel);
     const [eventListeners, frameworkEventListenersObject] =
         await Promise.all([domDebuggerModel?.eventListeners(object), frameworkEventListeners(object)]);
@@ -335,7 +323,8 @@ export class EventListenersView extends UI.Widget.VBox {
     }
 
     return [eventListeners, frameworkEventListenersObject.eventListeners].flatMap(
-        listeners => listeners.map(listener => ({object, listener})));
+        listeners => listeners.map(
+            listener => ({object, listener, objectTree: EventListenersView.#createObjectTree(listener)})));
 
     function isInternalEventListener(this: Array<Platform.Constructor.Constructor<unknown>>): boolean[] {
       const isInternal = [];

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -87,7 +87,7 @@ interface SerializableSettings {
 
 export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelObserver<SDK.RuntimeModel.RuntimeModel>
     implements Common.Revealer.Revealer<SDK.RemoteObject.LinearMemoryInspectable>,
-               UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement> {
+               UI.ContextMenu.Provider<ObjectUI.ObjectPropertiesSection.ObjectTreeNode> {
   #paneInstance = LinearMemoryInspectorPane.instance();
   #bufferIdToRemoteObject = new Map<string, SDK.RemoteObject.RemoteObject>();
   #bufferIdToHighlightInfo = new Map<string, LinearMemoryInspectorComponents.LinearMemoryViewerUtils.HighlightInfo>();
@@ -315,12 +315,11 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector', omitFocus);
   }
 
-  appendApplicableItems(
-      _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
-      target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement): void {
-    if (target.property.object?.isLinearMemoryInspectable()) {
-      const expression = target.property.path;
-      const object = target.property.object;
+  appendApplicableItems(_event: Event, contextMenu: UI.ContextMenu.ContextMenu,
+                        target: ObjectUI.ObjectPropertiesSection.ObjectTreeNode): void {
+    if (target.object?.isLinearMemoryInspectable()) {
+      const expression = target.path;
+      const object = target.object;
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.openInMemoryInspectorPanel),
           this.reveal.bind(this, new SDK.RemoteObject.LinearMemoryInspectable(object, expression)),

package/front_end/panels/linear_memory_inspector/components/linearMemoryInspector.css

@@ -29,7 +29,11 @@
     justify-content: center;
   }
 
-  .navigator-widget ~ devtools-linear-memory-inspector-viewer {
+  .navigator-widget {
+    flex: none;
+  }
+
+  .navigator-widget + devtools-linear-memory-inspector-viewer {
     margin-top: var(--sys-size-6);
   }
 

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

@@ -52,7 +52,7 @@ UI.ContextMenu.registerProvider({
   },
   contextTypes() {
     return [
-      ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement,
+      ObjectUI.ObjectPropertiesSection.ObjectTreeNode,
     ];
   },
 });

package/front_end/panels/recorder/stepView.css

@@ -215,6 +215,7 @@ devtools-recorder-step-editor.is-selected {
 .step-actions {
   border: none;
   border-radius: 0;
+  flex-shrink: 0;
   height: var(--sys-size-11);
 
   --override-select-menu-show-button-border-radius: 0;

package/front_end/panels/security/SecurityPanel.ts

@@ -608,7 +608,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
         this.onPrimaryPageChanged, this);
 
-    this.sidebar.showLastSelectedElement();
+    this.sidebar.showOverview();
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): SecurityPanel {
@@ -657,7 +657,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   override wasShown(): void {
     super.wasShown();
     if (!this.visibleView) {
-      this.sidebar.showLastSelectedElement();
+      this.sidebar.showOverview();
     }
   }
 
@@ -808,7 +808,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    this.sidebar.showLastSelectedElement();
+    this.sidebar.showOverview();
     this.sidebar.clearOrigins();
     this.origins.clear();
     this.lastResponseReceivedForLoaderId.clear();
@@ -831,8 +831,8 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private onInterstitialShown(): void {
     // The panel might have been displaying the origin view on the
     // previously loaded page. When showing an interstitial, switch
-    // back to the sidebar's last shown view.
-    this.sidebar.showLastSelectedElement();
+    // back to the overview view.
+    this.sidebar.showOverview();
     this.sidebar.toggleOriginsList(true /* hidden */);
   }
 

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -208,7 +207,6 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 };
 
 export class SecurityPanelSidebar extends UI.Widget.VBox {
-  readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
   #mainOrigin: string|null = null;
   #origins = new Map<Platform.DevToolsPath.UrlString, Protocol.Security.SecurityState>();
   #originsHidden = false;
@@ -222,9 +220,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     super(element);
     this.#view = view;
     this.registerRequiredCSS(lockIconStyles, sidebarStyles);
-
-    this.#securitySidebarLastItemSetting =
-        Common.Settings.Settings.instance().createSetting('security-last-selected-element-path', '');
   }
 
   set onShowOrigin(callback: (origin: Platform.DevToolsPath.UrlString|null) => void) {
@@ -233,12 +228,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
   override wasShown(): void {
     super.wasShown();
-    this.showLastSelectedElement();
+    this.requestUpdate();
   }
 
-  showLastSelectedElement(): void {
+  showOverview(): void {
     this.#selectedElementId = 'overview';
-    this.#securitySidebarLastItemSetting.set('overview');
     this.requestUpdate();
     this.#onShowOrigin?.(null);
   }
@@ -295,7 +289,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
       const element = {
         select: () => {
           this.#selectedElementId = origin;
-          this.#securitySidebarLastItemSetting.set(origin);
           this.requestUpdate();
           this.#onShowOrigin?.(origin);
         },
@@ -312,7 +305,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
   set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
     this.#selectedElementId = origin ?? 'overview';
-    this.#securitySidebarLastItemSetting.set(this.#selectedElementId);
     this.requestUpdate();
     this.#onShowOrigin?.(origin);
   }
@@ -333,7 +325,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     const output: ViewOutput = {
       onElementSelected: (id: string) => {
         this.#selectedElementId = id;
-        this.#securitySidebarLastItemSetting.set(id);
         this.requestUpdate();
       },
       onShowOrigin: (origin: Platform.DevToolsPath.UrlString|null) => {

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -540,7 +540,7 @@ export class DebuggerPlugin extends Plugin {
       if (!url) {
         return;
       }
-      scriptFile.addSourceMapURL(url);
+      scriptFile.addSourceMapURL(url, SDK.SourceMap.SourceMapProvenance.USER);
     }
 
     function addDebugInfoURL(

package/front_end/panels/sources/WatchExpressionsSidebarPane.ts

@@ -350,6 +350,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     // clang-format off
     return html`<li
           class=${classMap({'watch-expression-tree-item': true, 'watch-expression-editing': e.editing })}
+          ?open=${Boolean(e.result?.expanded)}
           @keydown=${onExpressionKeydown.bind(undefined, e)}
           @expand=${(event: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onExpand(e, event.detail.expanded)}
           role=treeitem>
@@ -364,12 +365,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               onContextMenu: (event: Event) => onContextMenu(e, event),
             })}></devtools-widget>
         ${e.editing || !e.result || e.exceptionDetails ||
-          !e.result.hasChildren || e.result.object.customPreview() ? nothing : html`
-          <ul role=group>
-            ${ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.createPropertyNodes(
-                        e.result.children ?? {}, false /* skipProto */, false /* skipGettersAndSetters */, input.linkifier).map(
-                     node => html`<devtools-tree-wrapper .treeElement=${node}></devtools-tree-wrapper>`)}
-          </ul>`}
+          !e.result.hasChildren || e.result.object.customPreview() ? nothing :
+          ObjectUI.ObjectPropertiesSection.renderObjectTree(e.result, input.linkifier)}
       </li>`;
     // clang-format on
   };
@@ -552,10 +549,9 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
         this.saveExpressions();
         this.requestUpdate();
       },
-      onExpand: async(e: WatchExpression, expanded: boolean): Promise<void> => {
-        if (expanded) {
-          await e.result?.populateChildrenIfNeeded();
-          this.requestUpdate();
+      onExpand: (e: WatchExpression, expanded: boolean): void => {
+        if (e.result) {
+          e.result.expanded = expanded;
         }
       },
     },
@@ -600,13 +596,12 @@ export class WatchExpressionsSidebarPane extends UI.Widget.VBox implements UI.Ac
     return true;
   }
 
-  appendApplicableItems(
-      _event: Event, contextMenu: UI.ContextMenu.ContextMenu,
-      target: ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement|UISourceCodeFrame): void {
-    if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
-      if (!target.property.property.synthetic) {
+  appendApplicableItems(_event: Event, contextMenu: UI.ContextMenu.ContextMenu,
+                        target: ObjectUI.ObjectPropertiesSection.ObjectTreeNode|UISourceCodeFrame): void {
+    if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectTreeNode) {
+      if (!target.property.synthetic) {
         contextMenu.debugSection().appendItem(i18nString(UIStrings.addPropertyPathToWatch),
-                                              () => this.#focusAndAddExpressionToWatch(target.path()),
+                                              () => this.#focusAndAddExpressionToWatch(target.path),
                                               {jslogContext: 'add-property-path-to-watch'});
       }
       return;

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

@@ -2035,7 +2035,7 @@ UI.ContextMenu.registerProvider({
   },
   contextTypes() {
     return [
-      ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement,
+      ObjectUI.ObjectPropertiesSection.ObjectTreeNode,
       ...maybeRetrieveContextTypes(Sources => [Sources.UISourceCodeFrame.UISourceCodeFrame]),
     ];
   },

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1621,9 +1621,6 @@ export class Overlays extends EventTarget {
         pin.setAttribute('role', 'button');
         pin.setAttribute('tabindex', '0');
         UI.ARIAUtils.setLabel(pin, i18nString(UIStrings.commentPin));
-        if (overlay.commentThreadId) {
-          pin.setAttribute('data-comment-id', overlay.commentThreadId);
-        }
         const cursor = document.createElement('div');
         cursor.classList.add('comment-cursor');
         pin.appendChild(cursor);

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: c6c44ec6a59862a1b0027bc453fcacb9dce75c9e
+Revision: 87625275b7c30150efc10c7dbf7c86982459704f
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -36,8 +36,6 @@ export interface PinPositionData {
   index: number;
 }
 
-export type PendingPinPositionData = Omit<PinPositionData, 'id'>;
-
 export interface HighlightRectData {
   id: string;
   top: number;
@@ -47,21 +45,10 @@ export interface HighlightRectData {
   visible: boolean;
 }
 
-export type PendingHighlightRectData = Omit<HighlightRectData, 'id'>;
-
-export interface PendingDraft {
-  element: Element;
-  anchor: CommentAnchorSignature;
-  pin: PendingPinPositionData|null;
-  highlight: PendingHighlightRectData|null;
-  pinOffset: {offsetX: number, offsetY: number}|null;
-}
-
 export interface CreateCommentOptions {
   author?: 'DEVELOPER'|'AGENT';
   changes?: CommentManager.CommentManager.ChangeRecord[];
   coordinates?: {clientX: number, clientY: number};
-  pendingDraft?: PendingDraft;
 }
 
 export interface HoverHighlightData {
@@ -99,7 +86,6 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #hoverData: HoverHighlightData|null = null;
   #pinPositions: PinPositionData[] = [];
   #highlightRects: HighlightRectData[] = [];
-  #pendingDraft: PendingDraft|null = null;
 
   #clickListener?: (event: Event) => void;
   #hoverListener?: (event: Event) => void;
@@ -133,6 +119,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #mutationObserver?: MutationObserver;
   #rematchTimeoutId?: ReturnType<typeof setTimeout>;
   #cursorElement: HTMLElement|null = null;
+  #isCreatingComment = false;
 
   constructor(commentManager: CommentManager.CommentManager.CommentManager) {
     super();
@@ -140,7 +127,9 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#commentManager.addEventListener(
         CommentManager.CommentManager.Events.COMMENT_THREADS_CHANGED,
         () => {
-          this.#updatePositions();
+          if (!this.#isCreatingComment) {
+            this.#updatePositions();
+          }
         },
         this,
     );
@@ -149,7 +138,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         ({data: active}) => {
           if (!active) {
             this.#clearHover();
-            this.clearPendingAnchor();
+            this.clearDraftThreads();
           }
           document.body.style.cursor = active ? COMMENT_MODE_CURSOR : '';
         },
@@ -237,83 +226,58 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     return this.#highlightRects;
   }
 
-  getPendingDraft(): PendingDraft|null {
-    return this.#pendingDraft;
+  getAnchorElement(thread: CommentThread): Element|undefined {
+    return this.#liveNodeCache.get(thread);
   }
 
-  clearPendingAnchor(): void {
-    if (!this.#pendingDraft) {
-      return;
-    }
-
-    if (!this.#observedThreads.has(this.#pendingDraft.element)) {
-      this.#intersectionObserver?.unobserve(this.#pendingDraft.element);
+  clearDraftThreads(): void {
+    const draftThreads = this.#commentManager.getCommentThreads().filter(t => t.status === 'DRAFT');
+    for (const thread of draftThreads) {
+      this.removeCommentThread(thread.id);
     }
-    this.#pendingDraft = null;
-    this.#updatePositions();
   }
 
   handleElementClick(element: Element, options?: {clientX: number, clientY: number}): boolean {
     if (!this.isCommentMode() || closestAcrossShadow(element, '.comment-thread-widget')) {
       return false;
     }
-    this.clearPendingAnchor();
+    this.clearDraftThreads();
 
     const resolved = this.#resolveAnchor(element, options);
     if (!resolved) {
       return false;
     }
-    const {anchor, anchorElement: anchorEl} = resolved;
+    const {anchorElement: anchorEl} = resolved;
     const visibleRect = computeVisibleRect(anchorEl);
     if (!visibleRect) {
       return false;
     }
-    const anchorRect = anchorEl.getBoundingClientRect();
 
-    let pinOffset: {offsetX: number, offsetY: number}|null = null;
-    if (options) {
-      pinOffset = {
-        offsetX: Math.min(Math.max(options.clientX, visibleRect.left), visibleRect.right) - anchorRect.left,
-        offsetY: Math.min(Math.max(options.clientY, visibleRect.top), visibleRect.bottom) - anchorRect.top,
-      };
-    }
-
-    this.#pendingDraft = {
-      element: anchorEl,
-      anchor,
-      pin: null,
-      highlight: null,
-      pinOffset,
-    };
-    const observer = this.#getIntersectionObserver();
-    if (!this.#observedThreads.has(anchorEl)) {
-      observer.observe(anchorEl);
-    }
-    this.#updatePositions();
-    return true;
+    const thread = this.createComment(element, undefined, {coordinates: options});
+    return thread !== null;
   }
 
   createComment(
       element: Element,
-      text: string,
+      text?: string,
       options?: CreateCommentOptions,
       ): CommentThread|null {
     const author = options?.author ?? 'DEVELOPER';
     const changes = options?.changes;
-    const pendingDraft = options?.pendingDraft;
-    let resolved: {anchor: CommentAnchorSignature, anchorElement: Element}|null;
-    if (pendingDraft) {
-      resolved = {anchor: pendingDraft.anchor, anchorElement: pendingDraft.element};
-    } else {
-      resolved = this.#resolveAnchor(element, options?.coordinates);
-      if (!resolved) {
-        return null;
-      }
+    const resolved = this.#resolveAnchor(element, options?.coordinates);
+    if (!resolved) {
+      return null;
     }
 
     const {anchor, anchorElement} = resolved;
 
-    const thread = this.#commentManager.createCommentThread(anchor, text, author, changes);
+    let thread: CommentThread;
+    this.#isCreatingComment = true;
+    try {
+      thread = this.#commentManager.createCommentThread(anchor, text, author, changes);
+    } finally {
+      this.#isCreatingComment = false;
+    }
     // Non-DOM anchors (e.g. canvas-rendered timeline entries) manage their own overlays
     // and do not have individual backing DOM nodes to cache or observe.
     if (isDomTrackedAnchor(anchor)) {
@@ -324,11 +288,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
       this.#observedThreads.add(anchorElement);
     }
 
-    if (pendingDraft) {
-      this.clearPendingAnchor();
-    } else {
-      this.#updatePositions();
-    }
+    this.#updatePositions();
 
     return thread;
   }
@@ -493,54 +453,12 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
 
     this.#pinPositions = newPins;
     this.#highlightRects = newHighlights;
-    this.#updatePendingPositions(scrollX, scrollY);
     this.dispatchEventToListeners(Events.POSITIONS_UPDATED, {
       pins: newPins,
       highlights: newHighlights,
     });
   }
 
-  #updatePendingPositions(scrollX: number, scrollY: number): void {
-    if (!this.#pendingDraft) {
-      return;
-    }
-
-    const visibleRect = computeVisibleRect(this.#pendingDraft.element);
-    if (!visibleRect) {
-      if (this.#pendingDraft.pin) {
-        this.#pendingDraft.pin.visible = false;
-      }
-      if (this.#pendingDraft.highlight) {
-        this.#pendingDraft.highlight.visible = false;
-      }
-      return;
-    }
-
-    const anchorRect = this.#pendingDraft.element.getBoundingClientRect();
-    const pinOffset = this.#pendingDraft.pinOffset;
-    const pinClientX = pinOffset ?
-        Math.min(Math.max(anchorRect.left + pinOffset.offsetX, visibleRect.left), visibleRect.right) :
-        visibleRect.right;
-    const pinClientY = pinOffset ?
-        Math.min(Math.max(anchorRect.top + pinOffset.offsetY, visibleRect.top), visibleRect.bottom) :
-        visibleRect.top;
-
-    this.#pendingDraft.pin = {
-      top: scrollY + pinClientY - 12,
-      left: scrollX + pinClientX - 12,
-      visible: true,
-      index: this.#commentManager.getCommentThreads().length + 1,
-    };
-
-    this.#pendingDraft.highlight = {
-      top: scrollY + visibleRect.top,
-      left: scrollX + visibleRect.left,
-      width: visibleRect.width,
-      height: visibleRect.height,
-      visible: true,
-    };
-  }
-
   /**
    * Initializes event listeners and lifecycle observers across the target DOM container.
    *
@@ -579,7 +497,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
    */
   stop(): void {
     document.body.style.cursor = '';
-    this.clearPendingAnchor();
+    this.clearDraftThreads();
     this.#removeClickListener();
     this.#removeScrollListener();
     this.#removeResizeObserver();