chrome-devtools-frontend 1.0.1690116 → 1.0.1695017

package/front_end/tsconfig.json

@@ -33,8 +33,7 @@
     "devtools_compatibility.js",
     "Images/generate-css-vars.js",
     "core/i18n/collect-ui-strings.js",
-    "core/i18n/generate-locales-js.js",
-    "panels/timeline/enable-easter-egg.js"
+    "core/i18n/generate-locales-js.js"
   ],
   "references": [{ "path": "./tsconfig.compatibility.json" }]
 }

package/front_end/ui/comments/CommentAnchorResolver.ts

@@ -366,6 +366,8 @@ export function resolveCommentAnchor(
 
   const backendNodeIdStr = target.getAttribute('data-backend-node-id');
   const backendNodeId = backendNodeIdStr ? Number(backendNodeIdStr) : undefined;
+  const targetId = target.getAttribute('data-target-id') ?? undefined;
+  const node = (backendNodeId !== undefined && targetId !== undefined) ? {backendNodeId, targetId} : undefined;
 
   return {
     vePath,
@@ -373,7 +375,7 @@ export function resolveCommentAnchor(
     parentTextSignature,
     siblingIndex,
     networkRequestId,
-    backendNodeId,
+    node,
     editor,
   };
 }
@@ -455,8 +457,11 @@ export function rematchCommentAnchor(comment: CommentThread, root: Document|Elem
   if (anchor.networkRequestId) {
     return deepQuerySelector(root, `[data-network-request-id="${CSS.escape(anchor.networkRequestId)}"]`);
   }
-  if (anchor.backendNodeId !== undefined) {
-    return deepQuerySelector(root, `[data-backend-node-id="${CSS.escape(String(anchor.backendNodeId))}"]`);
+  if (anchor.node) {
+    return deepQuerySelector(
+        root,
+        `[data-backend-node-id="${CSS.escape(String(anchor.node.backendNodeId))}"][data-target-id="${
+            CSS.escape(anchor.node.targetId)}"]`);
   }
   if (anchor.editor) {
     const {lineNumber, filePath} = anchor.editor;

package/front_end/ui/comments/CommentOverlayManager.ts

@@ -15,6 +15,8 @@ import {
   resolveCommentAnchorElement,
 } from './CommentAnchorResolver.js';
 
+export const COMMENT_MODE_CURSOR = 'var(--comment-cursor)';
+
 export interface StartOptions {
   root?: Document|Element;
   scrollTarget?: EventTarget;
@@ -27,6 +29,7 @@ export interface PinPositionData {
   top: number;
   left: number;
   visible: boolean;
+  index: number;
 }
 
 export interface HighlightRectData {
@@ -105,6 +108,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
 
   #mutationObserver?: MutationObserver;
   #rematchTimeoutId?: ReturnType<typeof setTimeout>;
+  #cursorElement: HTMLElement|null = null;
 
   constructor(commentManager: CommentManager.CommentManager.CommentManager) {
     super();
@@ -120,9 +124,9 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         CommentManager.CommentManager.Events.COMMENT_MODE_CHANGED,
         ({data: active}) => {
           if (!active) {
-            this.#setHoverHighlight(null);
+            this.#clearHover();
           }
-          document.body.style.cursor = active ? 'crosshair' : '';
+          document.body.style.cursor = active ? COMMENT_MODE_CURSOR : '';
         },
         this,
     );
@@ -157,6 +161,27 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     return this.#commentManager.isCommentMode();
   }
 
+  #setHoverCursor(element: Element|null): void {
+    const previousElement = this.#cursorElement;
+    const newElement = element instanceof HTMLElement ? element : null;
+
+    if (previousElement === newElement) {
+      return;
+    }
+
+    if (previousElement) {
+      previousElement.style.cursor = '';
+      previousElement.style.removeProperty('--override-cursor');
+    }
+
+    if (newElement) {
+      newElement.style.cursor = COMMENT_MODE_CURSOR;
+      newElement.style.setProperty('--override-cursor', COMMENT_MODE_CURSOR);
+    }
+
+    this.#cursorElement = newElement;
+  }
+
   #setHoverHighlight(data: HoverHighlightData|null): void {
     if (data === null && this.#hoverData === null) {
       return;
@@ -170,6 +195,11 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.dispatchEventToListeners(Events.HOVER_HIGHLIGHT_CHANGED, data);
   }
 
+  #clearHover(): void {
+    this.#setHoverHighlight(null);
+    this.#setHoverCursor(null);
+  }
+
   getHoverHighlight(): HoverHighlightData|null {
     return this.#hoverData;
   }
@@ -328,6 +358,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
         top: scrollY + visibleRect.top - 12 + offsetY,
         left: scrollX + visibleRect.right - 12,
         visible: true,
+        index: thread.index,
       });
 
       newHighlights.push({
@@ -387,10 +418,12 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
    * Stops and detaches all active listeners and observers without clearing comment threads.
    */
   stop(): void {
+    document.body.style.cursor = '';
     this.#removeClickListener();
     this.#removeScrollListener();
     this.#removeResizeObserver();
     this.#removeMutationObserver();
+    this.#clearHover();
   }
 
   /**
@@ -438,25 +471,25 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
 
     this.#hoverListener = (event: Event): void => {
       if (!this.isCommentMode()) {
-        this.#setHoverHighlight(null);
+        this.#clearHover();
         return;
       }
       const composedTarget = event.composedPath()[0];
       const target = (composedTarget instanceof Element) ? composedTarget : event.target;
       if (!(target instanceof Element)) {
-        this.#setHoverHighlight(null);
+        this.#clearHover();
         return;
       }
       const isLeaveEvent = event.type === 'mouseout' || event.type === 'mouseleave' || event.type === 'pointerout';
       const anchorEl = resolveCommentAnchorElement(target);
       if (isLeaveEvent) {
         const relatedTarget = (event as MouseEvent | PointerEvent).relatedTarget;
-        if (anchorEl && relatedTarget instanceof Node && anchorEl.contains(relatedTarget)) {
+        if (anchorEl && relatedTarget instanceof Node && anchorEl.isSelfOrAncestor(relatedTarget)) {
           event.consume(true);
           return;
         }
 
-        this.#setHoverHighlight(null);
+        this.#clearHover();
         if (anchorEl) {
           event.consume(true);
         }
@@ -477,12 +510,13 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
             height: visibleRect.height,
             visible: true,
           });
+          this.#setHoverCursor(highlightTarget);
         } else {
-          this.#setHoverHighlight(null);
+          this.#clearHover();
         }
         event.consume(true);
       } else {
-        this.#setHoverHighlight(null);
+        this.#clearHover();
       }
     };
 
@@ -528,7 +562,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#removeScrollListener();
     this.#scrollTarget = target;
     this.#scrollListener = (): void => {
-      this.#setHoverHighlight(null);
+      this.#clearHover();
       if (this.#scrollRafId !== undefined) {
         cancelAnimationFrame(this.#scrollRafId);
       }
@@ -562,7 +596,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
   #installResizeObserver(element: Element = document.body): void {
     this.#removeResizeObserver();
     this.#devToolsResizeObserver = new ResizeObserver(() => {
-      this.#setHoverHighlight(null);
+      this.#clearHover();
       if (this.#resizeRafId !== undefined) {
         cancelAnimationFrame(this.#resizeRafId);
       }
@@ -615,8 +649,14 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#mutationObserver.observe(targetNode, {
       childList: true,
       subtree: true,
-      attributes: true,
-      attributeFilter: ['jslog', 'data-network-request-id', 'data-backend-node-id', 'aria-expanded', 'data-file-path'],
+      attributeFilter: [
+        'jslog',
+        'data-network-request-id',
+        'data-backend-node-id',
+        'data-target-id',
+        'aria-expanded',
+        'data-file-path',
+      ],
     });
   }
 
@@ -643,6 +683,7 @@ export class CommentOverlayManager extends Common.ObjectWrapper.ObjectWrapper<Ev
     this.#observedThreads = new WeakSet();
     this.#pinPositions = [];
     this.#highlightRects = [];
+    this.#clearHover();
     this.#updatePositions();
   }
 }

package/front_end/ui/comments/CommentsOverlayWidget.ts

@@ -29,8 +29,8 @@ export interface ViewInput {
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
-// clang-format off
 const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
   render(html`
     <style>${commentsOverlayStyles}</style>
     <div class="comments-overlay-container">
@@ -66,13 +66,13 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLEl
             left: `${p.left}px`,
           })}
           @click=${() => input.onPinClick(p.id)}>
-          💬
+          <div class="comment-cursor">${p.index}</div>
         </div>
       ` : nothing)}
     </div>
   `, target);
+  // clang-format on
 };
-// clang-format on
 
 export class CommentsOverlayWidget extends UI.Widget.Widget {
   readonly #view: View;

package/front_end/ui/comments/CommentsStatusBarPill.ts

@@ -0,0 +1,96 @@
+// 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 * 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';
+
+const UIStrings = {
+  /**
+   * @description Button text for the comments status bar pill showing the number of open comments.
+   * @example {2} PH1
+   */
+  commentsCount: 'Comments ({PH1})',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('ui/comments/CommentsStatusBarPill.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {html, render} = Lit;
+
+export interface ViewInput {
+  threads: CommentManager.CommentManager.CommentThread[];
+  onPillClick: () => void;
+  disabled?: boolean;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  render(html`
+    ${input.threads.length <= 0 ? Lit.nothing : html`
+      <button
+        class="devtools-pill"
+        ?disabled=${input.disabled}
+        @click=${input.onPillClick}
+        jslog=${VisualLogging.action('comments-status-bar-pill').track({click: true})}>
+        ${i18nString(UIStrings.commentsCount, {PH1: input.threads.length})}
+      </button>
+    `}
+  `, target);
+  // clang-format on
+};
+
+export class CommentsStatusBarPill 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;
+
+  constructor(
+      element: HTMLElement|undefined,
+      [commentManager]: UI.Widget.WidgetDependencies<typeof CommentsStatusBarPill>,
+      view: View = DEFAULT_VIEW,
+  ) {
+    super(element);
+    this.#view = view;
+    this.#commentManager = commentManager;
+  }
+
+  #onThreadsChanged(): void {
+    this.requestUpdate();
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#commentManager.addEventListener(
+        CommentManager.CommentManager.Events.COMMENT_THREADS_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    this.#commentManager.removeEventListener(
+        CommentManager.CommentManager.Events.COMMENT_THREADS_CHANGED,
+        this.#onThreadsChanged,
+        this,
+    );
+    super.willHide();
+  }
+
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      threads: this.#commentManager.getCommentThreads(),
+      onPillClick: this.#handlePillClick,
+    };
+    this.#view(viewInput, undefined, this.contentElement);
+  }
+
+  #handlePillClick = (): void => {};
+}

package/front_end/ui/comments/comments-meta.ts

@@ -13,6 +13,14 @@ const UIStrings = {
    * @description Title of an action that toggles comment mode.
    */
   toggleCommentMode: 'Add comments to send to your AI coding agent',
+  /**
+   * @description Label for the comments status bar when it's not showing.
+   */
+  showComments: 'Show comments',
+  /**
+   * @description Label for the comments status bar when it's showing.
+   */
+  comments: 'Comments',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/comments/comments-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -30,6 +38,19 @@ function isCommentsEnabled(config?: Root.Runtime.HostConfig): boolean {
   return Boolean(config?.devToolsComments?.enabled);
 }
 
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.STATUS_BAR,
+  id: 'comments-status-bar-pill',
+  order: 1,
+  condition: isCommentsEnabled,
+  commandPrompt: i18nLazyString(UIStrings.showComments),
+  title: i18nLazyString(UIStrings.comments),
+  async loadView(universe) {
+    const Comments = await loadCommentsModule();
+    return new Comments.CommentsStatusBarPill.CommentsStatusBarPill(undefined, [universe.commentManager]);
+  },
+});
+
 UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   actionId: 'comments.toggle-comment-mode',

package/front_end/ui/comments/comments.ts

@@ -5,9 +5,11 @@
 import * as CommentAnchorResolver from './CommentAnchorResolver.js';
 import * as CommentOverlayManager from './CommentOverlayManager.js';
 import * as CommentsOverlayWidget from './CommentsOverlayWidget.js';
+import * as CommentsStatusBarPill from './CommentsStatusBarPill.js';
 
 export {
   CommentAnchorResolver,
   CommentOverlayManager,
   CommentsOverlayWidget,
+  CommentsStatusBarPill,
 };

package/front_end/ui/comments/commentsOverlay.css

@@ -21,17 +21,36 @@
     position: absolute;
     pointer-events: auto;
     cursor: pointer;
-    font-size: var(--sys-typescale-headline1-size);
-    line-height: var(--sys-typescale-body1-line-height);
-    filter: drop-shadow(0 2px 5px rgb(0 0 0 / 35%));
     user-select: none;
     transition: transform 0.1s ease;
+    transform-origin: center center;
+      will-change: transform;
   }
 
   .comment-pin:hover {
     transform: scale(1.15);
   }
 
+    .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;
+    }
+
   .comment-anchor-highlight {
     position: absolute;
     pointer-events: none;

package/front_end/ui/components/buttons/floatingButton.css

@@ -116,3 +116,28 @@ button {
     color: var(--ref-palette-neutral100) !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+
+@media (forced-colors: active) {
+  button {
+    forced-color-adjust: none;
+    box-shadow: 0 0 0 var(--sys-size-1) ButtonText;
+
+    :host-context(:not(.theme-with-dark-background)) &,
+    :host-context(.theme-with-dark-background) &:not(:disabled) {
+      background-color: ButtonFace;
+    }
+
+    :host-context(:not(.theme-with-dark-background)) &:not(:disabled) > devtools-icon,
+    :host-context(.theme-with-dark-background) &:not(:disabled) > devtools-icon {
+      color: ButtonText;
+    }
+
+    &:focus-visible {
+      outline-color: ButtonText;
+    }
+
+    &:disabled > devtools-icon {
+      color: GrayText;
+    }
+  }
+}

package/front_end/ui/components/markdown_view/MarkdownView.ts

@@ -7,7 +7,7 @@ import './CodeBlock.js';
 import './MarkdownImage.js';
 import '../../kit/kit.js';
 
-import type * as Marked from '../../../third_party/marked/marked.js';
+import * as Marked from '../../../third_party/marked/marked.js';
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
@@ -433,3 +433,33 @@ export class MarkdownInsightRenderer extends MarkdownLitRenderer {
     return super.templateForToken(token as Marked.Marked.MarkedToken);
   }
 }
+
+export function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownLitRenderer = new MarkdownLitRenderer(),
+                                     {animate, ref: refFn}: {
+                                       animate?: boolean,
+                                       ref?: (element?: Element) => void,
+                                     } = {}): Lit.TemplateResult {
+  let tokens = [];
+  try {
+    tokens = Marked.Marked.lexer(text);
+    for (const token of tokens) {
+      // Try to render all the tokens to make sure that
+      // they all have a template defined for them. If there
+      // isn't any template defined for a token, we'll fallback
+      // to rendering the text as plain text instead of markdown.
+      markdownRenderer.renderToken(token);
+    }
+  } catch {
+    // The tokens were not parsed correctly or
+    // one of the tokens are not supported, so we
+    // continue to render this as text.
+    return html`${text}`;
+  }
+
+  // clang-format off
+  return html`<devtools-markdown-view
+    .data=${{tokens, renderer: markdownRenderer, animationEnabled: animate} as MarkdownViewData}
+    ${refFn ? Lit.Directives.ref(refFn) : Lit.nothing}>
+  </devtools-markdown-view>`;
+  // clang-format on
+}

package/front_end/ui/components/srgb_overlay/SrgbOverlay.ts

@@ -9,7 +9,7 @@ import {html, render} from '../../../ui/lit/lit.js';
 
 import srgbOverlayStyles from './srgbOverlay.css.js';
 
-interface SrgbOverlayProps {
+export interface SrgbOverlayProps {
   // [0 - 1] corresponding to HSV hue
   hue: number;
   width: number;

package/front_end/ui/components/suggestion_input/SuggestionInput.ts

@@ -22,8 +22,7 @@ function assert<T>(
   }
 }
 
-const {html, Decorators, Directives, LitElement} = Lit;
-const {customElement, property, state} = Decorators;
+const {html, Directives} = Lit;
 const {classMap} = Directives;
 
 declare global {
@@ -41,7 +40,6 @@ const jsonPropertyOptions = {
   attribute: false,
 };
 
-@customElement('devtools-editable-content')
 class EditableContent extends HTMLElement {
   static get observedAttributes(): string[] {
     return ['disabled', 'placeholder'];
@@ -127,7 +125,7 @@ class SuggestionInitEvent extends Event {
   }
 }
 
-type SuggestionFilter = (option: string, query: string) => boolean;
+export type SuggestionFilter = (option: string, query: string) => boolean;
 
 const defaultSuggestionFilter = (option: string, query: string): boolean =>
     option.toLowerCase().startsWith(query.toLowerCase());
@@ -136,13 +134,19 @@ const defaultSuggestionFilter = (option: string, query: string): boolean =>
  * @fires SuggestionInitEvent#suggestioninit
  * @fires SuggestEvent#suggest
  */
-@customElement('devtools-suggestion-box')
-class SuggestionBox extends LitElement {
-  @property(jsonPropertyOptions) declare options: readonly string[];
-  @property() declare expression: string;
-  @property() declare suggestionFilter?: SuggestionFilter;
+class SuggestionBox extends Lit.LitElement {
+  static override properties: typeof Lit.LitElement.properties = {
+    options: jsonPropertyOptions,
+    expression: {type: String},
+    suggestionFilter: {attribute: false},
+    cursor: {state: true},
+  };
+
+  declare options: readonly string[];
+  declare expression: string;
+  declare suggestionFilter?: SuggestionFilter;
 
-  @state() private declare cursor: number;
+  private declare cursor: number;
 
   #suggestions: string[] = [];
 
@@ -229,30 +233,42 @@ class SuggestionBox extends LitElement {
   }
 }
 
-@customElement('devtools-suggestion-input')
-export class SuggestionInput extends LitElement {
-  static override shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+export class SuggestionInput extends Lit.LitElement {
+  static override shadowRootOptions: ShadowRootInit = {
+    ...Lit.LitElement.shadowRootOptions,
     delegatesFocus: true,
-  } as const;
+  };
+
+  static override properties: typeof Lit.LitElement.properties = {
+    options: jsonPropertyOptions,
+    autocomplete: {type: Boolean},
+    suggestionFilter: {attribute: false},
+    expression: {state: true},
+    placeholder: {type: String},
+    value: {type: String},
+    disabled: {type: Boolean},
+    strikethrough: {type: Boolean},
+    mimeType: {type: String},
+    jslogContext: {type: String},
+  };
 
   /**
    * State passed to devtools-suggestion-box.
    */
-  @property(jsonPropertyOptions) declare options: readonly string[];
-  @property({type: Boolean}) declare autocomplete?: boolean;
-  @property() declare suggestionFilter?: SuggestionFilter;
-  @state() declare expression: string;
+  declare options: readonly string[];
+  declare autocomplete?: boolean;
+  declare suggestionFilter?: SuggestionFilter;
+  declare expression: string;
 
   /**
    * State passed to devtools-editable-content.
    */
-  @property() declare placeholder: string;
-  @property() declare value: string;
-  @property({type: Boolean}) declare disabled: boolean;
-  @property({type: Boolean}) declare strikethrough: boolean;
-  @property() declare mimeType: string;
-  @property() declare jslogContext?: string;
+  declare placeholder: string;
+  declare value: string;
+  declare disabled: boolean;
+  declare strikethrough: boolean;
+  declare mimeType: string;
+  declare jslogContext?: string;
 
   constructor() {
     super();
@@ -364,3 +380,7 @@ export class SuggestionInput extends LitElement {
     // clang-format on
   }
 }
+
+customElements.define('devtools-editable-content', EditableContent);
+customElements.define('devtools-suggestion-box', SuggestionBox);
+customElements.define('devtools-suggestion-input', SuggestionInput);

package/front_end/ui/kit/icons/Icon.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-// @ts-expect-error tsc 6 can't find type declarations for this file.
 import '../../../Images/Images.js';
 
 import iconStyles from './icon.css.js';

package/front_end/ui/kit/link/Link.ts

@@ -129,9 +129,16 @@ export class Link extends HTMLElement {
   };
 
   #onKeyDown = (event: KeyboardEvent): void => {
-    if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+    if (!Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
+      return;
+    }
+    if (this.href) {
       this.#handleOpeningLink(event);
+      return;
     }
+
+    event.consume(true);
+    this.click();
   };
 
   #render(): void {

package/front_end/ui/legacy/ContextMenu.ts

@@ -946,7 +946,7 @@ export class ContextMenu extends SubMenu {
 
   private static pendingMenu: ContextMenu|null = null;
   private static useSoftMenu = false;
-  static readonly groupWeights = [
+  static readonly groupWeights: string[] = [
     'header',
     'new',
     'reveal',
@@ -978,7 +978,7 @@ export class ContextMenu extends SubMenu {
  *
  */
 export class MenuButton extends HTMLElement {
-  static readonly observedAttributes = ['icon-name', 'disabled'];
+  static readonly observedAttributes: string[] = ['icon-name', 'disabled'];
   readonly #shadow = this.attachShadow({mode: 'open'});
   #triggerTimeoutId?: number;
   #populateMenuCall?: (arg0: ContextMenu) => void;