chrome-devtools-frontend 1.0.1522585 → 1.0.1524741

package/front_end/panels/changes/ChangesSidebar.ts

@@ -1,14 +1,13 @@
 // Copyright 2017 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.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';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -23,75 +22,122 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html, Directives: {ref}} = Lit;
+interface ViewInput {
+  selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
+  onSelect: (uiSourceCode: Workspace.UISourceCode.UISourceCode|null) => void;
+  sourceCodes: Set<Workspace.UISourceCode.UISourceCode>;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const tooltip = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
+      uiSourceCode.contentType().isFromSourceMap() ?
+      i18nString(UIStrings.sFromSourceMap, {PH1: uiSourceCode.displayName()}) :
+      uiSourceCode.url();
+  const icon = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
+      Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode) ? 'snippet' : 'document';
+  const configElements = new WeakMap<HTMLLIElement, Workspace.UISourceCode.UISourceCode>();
+  const onSelect = (e: UI.TreeOutline.TreeViewElement.SelectEvent): void =>
+      input.onSelect(configElements.get(e.detail) ?? null);
+  render(
+      // clang-format off
+      html`<devtools-tree
+             @selected=${onSelect}
+             navigation-variant
+             hide-overflow .template=${html`
+               <ul role="tree">
+                 ${input.sourceCodes.values().map(uiSourceCode => html`
+                   <li
+                     role="treeitem"
+                     ${ref(e => e instanceof HTMLLIElement && configElements.set(e, uiSourceCode))}
+                     ?selected=${uiSourceCode === input.selectedSourceCode}>
+                       <style>${changesSidebarStyles}</style>
+                       <div class=${'navigator-' + uiSourceCode.contentType().name() + '-tree-item'}>
+                         <devtools-icon name=${icon(uiSourceCode)}></devtools-icon>
+                         <span title=${tooltip(uiSourceCode)}>
+                           <span ?hidden=${!uiSourceCode.isDirty()}>*</span>
+                           ${uiSourceCode.displayName()}
+                         </span>
+                       </div>
+                   </li>`)}
+               </ul>`}></devtools-tree>`,
+      // clang-format on
+      target);
+};
 
 export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
-  private treeoutline: UI.TreeOutline.TreeOutlineInShadow;
-  private readonly treeElements: Map<Workspace.UISourceCode.UISourceCode, UISourceCodeTreeElement>;
-  private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
-  constructor(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+  readonly #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+  readonly #view: View;
+  readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
+  #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  constructor(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl, target?: HTMLElement, view = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
+    this.#view = view;
 
-    this.treeoutline = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
-    this.treeoutline.registerRequiredCSS(changesSidebarStyles);
-    this.treeoutline.setFocusable(false);
-    this.treeoutline.setHideOverflow(true);
-    this.treeoutline.addEventListener(UI.TreeOutline.Events.ElementSelected, this.selectionChanged, this);
-    UI.ARIAUtils.markAsTablist(this.treeoutline.contentElement);
-
-    this.element.appendChild(this.treeoutline.element);
-
-    this.treeElements = new Map();
-    this.workspaceDiff = workspaceDiff;
-    this.workspaceDiff.modifiedUISourceCodes().forEach(this.addUISourceCode.bind(this));
-    this.workspaceDiff.addEventListener(
+    this.#workspaceDiff = workspaceDiff;
+    this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#addUISourceCode.bind(this));
+    this.#workspaceDiff.addEventListener(
         WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+    this.requestUpdate();
   }
 
   selectedUISourceCode(): Workspace.UISourceCode.UISourceCode|null {
-    // @ts-expect-error uiSourceCode seems to be dynamically attached.
-    return this.treeoutline.selectedTreeElement ? this.treeoutline.selectedTreeElement.uiSourceCode : null;
+    return this.#selectedUISourceCode;
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      onSelect: uiSourceCode => this.#selectionChanged(uiSourceCode),
+      sourceCodes: this.#sourceCodes,
+      selectedSourceCode: this.#selectedUISourceCode
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
-  private selectionChanged(): void {
+  #selectionChanged(selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null): void {
+    this.#selectedUISourceCode = selectedUISourceCode;
     this.dispatchEventToListeners(Events.SELECTED_UI_SOURCE_CODE_CHANGED);
+    this.requestUpdate();
   }
 
-  private uiSourceCodeModifiedStatusChanged(
-      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
-    if (event.data.isModified) {
-      this.addUISourceCode(event.data.uiSourceCode);
-    } else {
-      this.removeUISourceCode(event.data.uiSourceCode);
-    }
+  #addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    this.#sourceCodes.add(uiSourceCode);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
+    uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    this.requestUpdate();
   }
 
-  private removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const treeElement = this.treeElements.get(uiSourceCode);
-    this.treeElements.delete(uiSourceCode);
-    if (this.treeoutline.selectedTreeElement === treeElement) {
-      const nextElementToSelect = treeElement.previousSibling || treeElement.nextSibling;
-      if (nextElementToSelect) {
-        nextElementToSelect.select(true);
-      } else {
-        treeElement.deselect();
-        this.selectionChanged();
+  #removeUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.TitleChanged, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.requestUpdate, this);
+    uiSourceCode.removeEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.requestUpdate, this);
+    if (uiSourceCode === this.#selectedUISourceCode) {
+      let newSelection;
+      for (const sourceCode of this.#sourceCodes.values()) {
+        if (sourceCode === uiSourceCode) {
+          break;
+        }
+        newSelection = sourceCode;
       }
+      this.#sourceCodes.delete(uiSourceCode);
+      this.#selectionChanged(newSelection ?? this.#sourceCodes.values().next().value ?? null);
+    } else {
+      this.#sourceCodes.delete(uiSourceCode);
     }
-    if (treeElement) {
-      this.treeoutline.removeChild(treeElement);
-      treeElement.dispose();
-    }
-    if (this.treeoutline.rootElement().childCount() === 0) {
-      this.treeoutline.setFocusable(false);
-    }
+    this.requestUpdate();
   }
 
-  private addUISourceCode(uiSourceCode: Workspace.UISourceCode.UISourceCode): void {
-    const treeElement = new UISourceCodeTreeElement(uiSourceCode);
-    this.treeElements.set(uiSourceCode, treeElement);
-    this.treeoutline.setFocusable(true);
-    this.treeoutline.appendChild(treeElement);
+  private uiSourceCodeModifiedStatusChanged(
+      event: Common.EventTarget.EventTargetEvent<WorkspaceDiff.WorkspaceDiff.ModifiedStatusChangedEvent>): void {
+    const {isModified, uiSourceCode} = event.data;
+    if (isModified) {
+      this.#addUISourceCode(uiSourceCode);
+    } else {
+      this.#removeUISourceCode(uiSourceCode);
+    }
+    this.requestUpdate();
   }
 }
 
@@ -102,47 +148,3 @@ export const enum Events {
 export interface EventTypes {
   [Events.SELECTED_UI_SOURCE_CODE_CHANGED]: void;
 }
-
-export class UISourceCodeTreeElement extends UI.TreeOutline.TreeElement {
-  uiSourceCode: Workspace.UISourceCode.UISourceCode;
-  private readonly eventListeners: Common.EventTarget.EventDescriptor[];
-  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
-    super();
-    this.uiSourceCode = uiSourceCode;
-    this.listItemElement.classList.add('navigator-' + uiSourceCode.contentType().name() + '-tree-item');
-    UI.ARIAUtils.markAsTab(this.listItemElement);
-
-    let iconName: 'document'|'snippet' = 'document';
-    if (Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(this.uiSourceCode)) {
-      iconName = 'snippet';
-    }
-    const defaultIcon = IconButton.Icon.create(iconName);
-    this.setLeadingIcons([defaultIcon]);
-
-    this.eventListeners = [
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.TitleChanged, this.updateTitle, this),
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyChanged, this.updateTitle, this),
-      uiSourceCode.addEventListener(Workspace.UISourceCode.Events.WorkingCopyCommitted, this.updateTitle, this),
-    ];
-
-    this.updateTitle();
-  }
-
-  private updateTitle(): void {
-    let titleText: string = this.uiSourceCode.displayName();
-    if (this.uiSourceCode.isDirty()) {
-      titleText = '*' + titleText;
-    }
-    this.title = titleText;
-
-    let tooltip: Common.UIString.LocalizedString|string = this.uiSourceCode.url();
-    if (this.uiSourceCode.contentType().isFromSourceMap()) {
-      tooltip = i18nString(UIStrings.sFromSourceMap, {PH1: this.uiSourceCode.displayName()});
-    }
-    this.tooltip = tooltip;
-  }
-
-  dispose(): void {
-    Common.EventTarget.removeEventListeners(this.eventListeners);
-  }
-}

package/front_end/panels/changes/changesSidebar.css

@@ -4,12 +4,14 @@
  * found in the LICENSE file.
  */
 
+@scope to (devtools-widget > *) {
 .tree-outline li {
   min-height: 20px;
 }
 
 devtools-icon {
   color: var(--icon-file-default);
+  margin-right: var(--sys-size-4);
 }
 
 .navigator-sm-script-tree-item devtools-icon,
@@ -46,3 +48,4 @@ devtools-icon {
     color: ButtonText !important; /* stylelint-disable-line declaration-no-important */
   }
 }
+}

package/front_end/panels/console/ConsoleView.ts

@@ -976,7 +976,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.scheduleViewportRefresh();
     this.consoleMessageAddedForTest(viewMessage);
 
-    // Figure out whether the message should belong into this group or the parent group based on group end timestamp.
+    /** Figure out whether the message should belong into this group or the parent group based on group end timestamp. **/
     function addToGroup(viewMessage: ConsoleViewMessage, currentGroup: ConsoleGroupViewMessage): void {
       const currentEnd = currentGroup.groupEnd();
       if (currentEnd !== null) {
@@ -1070,7 +1070,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.messageAppendedForTests();
 
-    // Show the group the message belongs to, and also show parent groups.
+    /** Show the group the message belongs to, and also show parent groups. **/
     function showGroup(currentGroup: ConsoleGroupViewMessage|null, visibleViewMessages: ConsoleViewMessage[]): void {
       if (currentGroup === null) {
         return;

package/front_end/panels/developer_resources/DeveloperResourcesListView.ts

@@ -3,20 +3,19 @@
 // found in the LICENSE file.
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
+import '../../ui/components/highlighting/highlighting.js';
 
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
 
 import developerResourcesListViewStyles from './developerResourcesListView.css.js';
 
-const {ref} = Directives;
-
 const UIStrings = {
   /**
    * @description Text for the status of something
@@ -87,7 +86,6 @@ const {withThousandsSeparator} = Platform.NumberUtilities;
 export interface ViewInput {
   items: SDK.PageResourceLoader.PageResource[];
   selectedItem: SDK.PageResourceLoader.PageResource|null;
-  highlight: (element: Element|undefined, textContent: string|undefined, columnId: string) => void;
   filters: TextUtils.TextUtils.ParsedFilter[];
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
   onSelect: (e: CustomEvent<HTMLElement>) => void;
@@ -98,6 +96,20 @@ export interface ViewInput {
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 const DEFAULT_VIEW: View = (input, _output, target) => {
+  function highlightRange(textContent: string|undefined, columnId: string): string {
+    if (!textContent) {
+      return '';
+    }
+    const filter = input.filters.find(filter => filter.key?.split(',')?.includes(columnId));
+    if (!filter?.regex) {
+      return '';
+    }
+    const matches = filter.regex.exec(textContent ?? '');
+    if (!matches?.length) {
+      return '';
+    }
+    return `${matches.index},${matches[0].length}`;
+  }
   // clang-format off
   render(html`
       <style>${developerResourcesListViewStyles}</style>
@@ -135,11 +147,11 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                     item.success === false ? i18nString(UIStrings.failure) :
                                              i18nString(UIStrings.pending)}</td>
               <td title=${item.url} aria-label=${item.url}>
-                <div aria-hidden="true" part="url-outer"
-                     ${ref(e => input.highlight(e, item.url, 'url'))}>
+                <devtools-highlight aria-hidden="true" part="url-outer"
+                                    ranges=${highlightRange(item.url, 'url')}>
                   <div part="url-prefix">${splitURL ? splitURL[1] : item.url}</div>
                   <div part="url-suffix">${splitURL ? splitURL[2] : ''}</div>
-                </div>
+                </devtools-highlight>
               </td>
               <td title=${item.initiator.initiatorUrl || ''}
                   aria-label=${item.initiator.initiatorUrl || ''}
@@ -154,9 +166,9 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                   item.duration !== null ? html`<span>${i18n.TimeUtilities.millisToString(item.duration)}</span>` : ''}</td>
               <td class="error-message">
                 ${item.errorMessage ? html`
-                <span ${ref(e => input.highlight(e, item.errorMessage, 'error-message'))}>
+                <devtools-highlight ranges=${highlightRange(item.errorMessage, 'error-message')}>
                   ${item.errorMessage}
-                </span>` : nothing}
+                </devtools-highlight>` : nothing}
               </td>
             </tr>`;
           })}
@@ -233,7 +245,6 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
       items: this.#items,
       selectedItem: this.#selectedItem,
       filters: this.#filters,
-      highlight: this.#highlight.bind(this),
       onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => {
         if (e.detail?.element) {
           this.#populateContextMenu(e.detail.menu, e.detail.element);
@@ -256,28 +267,4 @@ export class DeveloperResourcesListView extends UI.Widget.VBox {
     const output = {};
     this.#view(input, output, this.contentElement);
   }
-
-  #highlight(element: Element|undefined, textContent: string|undefined, columnId: string): void {
-    if (!element || !textContent) {
-      return;
-    }
-    const highlightContainers =
-        new Set<Element>([...element.querySelectorAll('.filter-highlight')].map(e => e.parentElement as Element));
-    for (const container of highlightContainers) {
-      container.textContent = container.textContent;
-    }
-    const filter = this.#filters.find(filter => filter.key?.split(',')?.includes(columnId));
-    if (!filter?.regex) {
-      return;
-    }
-    const matches = filter.regex.exec(element.textContent ?? '');
-    if (!matches?.length) {
-      return;
-    }
-    const range = new TextUtils.TextRange.SourceRange(matches.index, matches[0].length);
-    UI.UIUtils.highlightRangesWithStyleClass(element, [range], 'filter-highlight');
-    for (const el of element.querySelectorAll('.filter-highlight')) {
-      el.setAttribute('part', 'filter-highlight');
-    }
-  }
 }

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -191,7 +191,7 @@ const createTraceElement =
       return trace;
     };
 
-// clang-format off
+/** clang-format off **/
 class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -66,6 +66,7 @@ enum SpecificPseudoStates {
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
   OPEN = 'open',
+  TARGET_CURRENT = 'target-current',
 }
 
 interface ElementState {
@@ -179,6 +180,8 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.PLACEHOLDER_SHOWN, {state: SpecificPseudoStates.PLACEHOLDER_SHOWN, type: 'specific'});
     this.#states.set(SpecificPseudoStates.AUTOFILL, {state: SpecificPseudoStates.AUTOFILL, type: 'specific'});
     this.#states.set(SpecificPseudoStates.OPEN, {state: SpecificPseudoStates.OPEN, type: 'specific'});
+    this.#states.set(
+        SpecificPseudoStates.TARGET_CURRENT, {state: SpecificPseudoStates.TARGET_CURRENT, type: 'specific'});
 
     setDualStateCheckboxes(SpecificPseudoStates.VALID, SpecificPseudoStates.INVALID);
     setDualStateCheckboxes(SpecificPseudoStates.USER_VALID, SpecificPseudoStates.USER_INVALID);
@@ -268,6 +271,9 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     const isElementOfTypes = (node: SDK.DOMModel.DOMNode, types: string[]): boolean => {
       return types.includes(node.nodeName()?.toLowerCase());
     };
+    const isAnchorElementWithHref = (node: SDK.DOMModel.DOMNode): boolean => {
+      return isElementOfTypes(node, ['a']) && node.getAttribute('href') !== undefined;
+    };
     const isInputWithTypeRadioOrCheckbox = (node: SDK.DOMModel.DOMNode): boolean => {
       return isElementOfTypes(node, ['input']) &&
           (node.getAttribute('type') === 'checkbox' || node.getAttribute('type') === 'radio');
@@ -385,6 +391,12 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.OPEN, true);
     }
+
+    if (isAnchorElementWithHref(node) || node.pseudoType() === 'scroll-marker') {
+      hideSpecificCheckbox(SpecificPseudoStates.TARGET_CURRENT, false);
+    } else {
+      hideSpecificCheckbox(SpecificPseudoStates.TARGET_CURRENT, true);
+    }
   }
 }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -2950,14 +2950,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
 export const InitialChildrenLimit = 500;
 
-// A union of HTML4 and HTML5-Draft elements that explicitly
-// or implicitly (for HTML5) forbid the closing tag.
+/**
+ * A union of HTML4 and HTML5-Draft elements that explicitly
+ * or implicitly (for HTML5) forbid the closing tag.
+ **/
 export const ForbiddenClosingTagElements = new Set<string>([
   'area', 'base',  'basefont', 'br',   'canvas',   'col',  'command', 'embed',  'frame', 'hr',
   'img',  'input', 'keygen',   'link', 'menuitem', 'meta', 'param',   'source', 'track', 'wbr',
 ]);
 
-// These tags we do not allow editing their tag name.
+/** These tags we do not allow editing their tag name. **/
 export const EditTagBlocklist = new Set<string>(['html', 'head', 'body']);
 
 export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB: Adorners.Adorner.Adorner): number {
@@ -3000,8 +3002,10 @@ export interface EditorHandles {
   resize: () => void;
 }
 
-// As a privacy measure we are logging elements tree outline as a flat list where every tree item is a
-// child of a tree outline.
+/**
+ * As a privacy measure we are logging elements tree outline as a flat list where every tree item is a
+ * child of a tree outline.
+ **/
 function loggingParentProvider(e: Element): Element|undefined {
   const treeElement = UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(e);
   return treeElement?.treeOutline?.contentElement;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1230,11 +1230,6 @@ export class ElementsTreeOutline extends
   }
 
   private contextMenuEventFired(event: MouseEvent): void {
-    // The context menu construction may be async. In order to
-    // make sure that no other (default) context menu shows up, we need
-    // to stop propagating and prevent the default action.
-    event.stopPropagation();
-    event.preventDefault();
     const treeElement = this.treeElementFromEventInternal(event);
     if (treeElement instanceof ElementsTreeElement) {
       void this.showContextMenu(treeElement, event);
@@ -1246,13 +1241,21 @@ export class ElementsTreeOutline extends
       return;
     }
 
-    const contextMenu = new UI.ContextMenu.ContextMenu(event);
-    const isPseudoElement = Boolean(treeElement.node().pseudoType());
-    const isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
     const node = (event.target as Node | null);
     if (!node) {
       return;
     }
+
+    // The context menu construction may be async. In order to
+    // make sure that no other (default) context menu shows up, we need
+    // to stop propagating and prevent the default action.
+    event.stopPropagation();
+    event.preventDefault();
+
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    const isPseudoElement = Boolean(treeElement.node().pseudoType());
+    const isTag = treeElement.node().nodeType() === Node.ELEMENT_NODE && !isPseudoElement;
+
     let textNode: Element|null = node.enclosingNodeOrSelfWithClass('webkit-html-text-node');
     if (textNode?.classList.contains('bogus')) {
       textNode = null;

package/front_end/panels/elements/PropertyRenderer.ts

@@ -57,8 +57,10 @@ export function rendererBase<MatchT extends SDK.CSSPropertyParser.Match>(
   return RendererBase;
 }
 
-// This class implements highlighting for rendered nodes in value traces. On hover, all nodes belonging to the same
-// Match (using object identity) are highlighted.
+/**
+ * This class implements highlighting for rendered nodes in value traces. On hover, all nodes belonging to the same
+ * Match (using object identity) are highlighted.
+ **/
 export class Highlighting {
   static readonly REGISTRY_NAME = 'css-value-tracing';
   // This holds a stack of active ranges, the top-stack is the currently highlighted set. mouseenter and mouseleave
@@ -145,19 +147,21 @@ export class Highlighting {
   }
 }
 
-// This class is used to guide value tracing when passed to the Renderer. Tracing has two phases. First, substitutions
-// such as var() are applied step by step. In each step, all vars in the value are replaced by their definition until no
-// vars remain. In the second phase, we evaluate other functions such as calc() or min() or color-mix(). Which CSS
-// function types are actually substituted or evaluated is not relevant here, rather it is decided by an individual
-// MatchRenderer.
-//
-// Callers don't need to keep track of the tracing depth (i.e., the number of substitution/evaluation steps).
-// TracingContext is stateful and keeps track of the depth, so callers can progressively produce steps by calling
-// TracingContext#nextSubstitution or TracingContext#nextEvaluation. Calling Renderer with the tracing context will then
-// produce the next step of tracing. The tracing depth is passed to the individual MatchRenderers by way of
-// TracingContext#substitution or TracingContext#applyEvaluation/TracingContext#evaluation (see function-level comments
-// about how these two play together), which MatchRenderers call to request a fresh TracingContext for the next level of
-// substitution/evaluation.
+/**
+ * This class is used to guide value tracing when passed to the Renderer. Tracing has two phases. First, substitutions
+ * such as var() are applied step by step. In each step, all vars in the value are replaced by their definition until no
+ * vars remain. In the second phase, we evaluate other functions such as calc() or min() or color-mix(). Which CSS
+ * function types are actually substituted or evaluated is not relevant here, rather it is decided by an individual
+ * MatchRenderer.
+ *
+ * Callers don't need to keep track of the tracing depth (i.e., the number of substitution/evaluation steps).
+ * TracingContext is stateful and keeps track of the depth, so callers can progressively produce steps by calling
+ * TracingContext#nextSubstitution or TracingContext#nextEvaluation. Calling Renderer with the tracing context will then
+ * produce the next step of tracing. The tracing depth is passed to the individual MatchRenderers by way of
+ * TracingContext#substitution or TracingContext#applyEvaluation/TracingContext#evaluation (see function-level comments
+ * about how these two play together), which MatchRenderers call to request a fresh TracingContext for the next level of
+ * substitution/evaluation.
+ **/
 export class TracingContext {
   #substitutionDepth = 0;
   #hasMoreSubstitutions: boolean;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1193,10 +1193,12 @@ type ShadowLengthProperty = ShadowProperty&{
   propertyType: Exclude<ShadowPropertyType, ShadowPropertyType.INSET|ShadowPropertyType.COLOR>,
 };
 
-// The shadow model is an abstraction over the various shadow properties on the one hand and the order they were defined
-// in on the other, so that modifications through the shadow editor can retain the property order in the authored text.
-// The model also looks through var()s by keeping a mapping between individual properties and any var()s they are coming
-// from, replacing the var() functions as needed with concrete values when edited.
+/**
+ * The shadow model is an abstraction over the various shadow properties on the one hand and the order they were defined
+ * in on the other, so that modifications through the shadow editor can retain the property order in the authored text.
+ * The model also looks through var()s by keeping a mapping between individual properties and any var()s they are coming
+ * from, replacing the var() functions as needed with concrete values when edited.
+ **/
 export class ShadowModel implements InlineEditor.CSSShadowEditor.CSSShadowModel {
   readonly #properties: ShadowProperty[];
   readonly #shadowType: SDK.CSSPropertyParserMatchers.ShadowType;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -135,9 +135,9 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const FILTER_IDLE_PERIOD = 500;
 // Minimum number of @property rules for the @property section block to be folded initially
 const MIN_FOLDED_SECTIONS_COUNT = 5;
-// Title of the registered properties section
+/** Title of the registered properties section **/
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
-// Title of the function section
+/** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -21,8 +21,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/components/AccessibilityTreeNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-// TODO(jobay) move this to Platform.StringUtilities if still needed.
-// This function is a variant of setTextContentTruncatedIfNeeded found in DOMExtension.
+/**
+ * TODO(jobay) move this to Platform.StringUtilities if still needed.
+ * This function is a variant of setTextContentTruncatedIfNeeded found in DOMExtension.
+ **/
 function truncateTextIfNeeded(text: string): string {
   const maxTextContentLength = 10000;
 

package/front_end/panels/elements/components/AdornerManager.ts

@@ -38,8 +38,10 @@ export enum RegisteredAdorners {
   POPOVER = 'popover',
 }
 
-// This enum-like const object serves as the authoritative registry for all the
-// adorners available.
+/**
+ * This enum-like const object serves as the authoritative registry for all the
+ * adorners available.
+ **/
 export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorner {
   switch (which) {
     case RegisteredAdorners.GRID:
@@ -215,7 +217,7 @@ const OrderedAdornerCategories = [
   AdornerCategories.DEFAULT,
 ];
 
-// Use idx + 1 for the order to avoid JavaScript's 0 == false issue
+/** Use idx + 1 for the order to avoid JavaScript's 0 == false issue **/
 export const AdornerCategoryOrder = new Map(OrderedAdornerCategories.map((category, idx) => [category, idx + 1]));
 
 export function compareAdornerNamesByCategory(nameA: string, nameB: string): number {