chrome-devtools-frontend 1.0.1700561 → 1.0.1701636

package/front_end/generated/protocol.ts

@@ -18532,24 +18532,6 @@ export namespace Storage {
     durability: StorageBucketsDurability;
   }
 
-  /**
-   * A single Related Website Set object.
-   */
-  export interface RelatedWebsiteSet {
-    /**
-     * The primary site of this set, along with the ccTLDs if there is any.
-     */
-    primarySites: string[];
-    /**
-     * The associated sites of this set, along with the ccTLDs if there is any.
-     */
-    associatedSites: string[];
-    /**
-     * The service sites of this set, along with the ccTLDs if there is any.
-     */
-    serviceSites: string[];
-  }
-
   export interface GetStorageKeyForFrameRequest {
     frameId: Page.FrameId;
   }
@@ -18763,10 +18745,6 @@ export namespace Storage {
     deletedSites: string[];
   }
 
-  export interface GetRelatedWebsiteSetsResponse extends ProtocolResponseWithError {
-    sets: RelatedWebsiteSet[];
-  }
-
   /**
    * A cache's contents have been modified.
    */
@@ -20429,6 +20407,10 @@ export namespace WebMCP {
      * A hint indicating that executing the tool will result in consequential actions, ex: booking a flight, transferring money.
      */
     consequential?: boolean;
+    /**
+     * If true, indicates that the tool is intended for debugging and developer tooling rather than end-user interactions.
+     */
+    debugging?: boolean;
     /**
      * If the declarative tool was declared with the autosubmit attribute.
      */

package/front_end/models/ai_assistance/debug.ts

@@ -7,11 +7,19 @@
  */
 
 export function isDebugMode(): boolean {
-  return Boolean(localStorage.getItem('debugAiAssistancePanelEnabled'));
+  try {
+    return Boolean(localStorage.getItem('debugAiAssistancePanelEnabled'));
+  } catch {
+    return false;
+  }
 }
 
 export function isStructuredLogEnabled(): boolean {
-  return Boolean(localStorage.getItem('aiAssistanceStructuredLogEnabled'));
+  try {
+    return Boolean(localStorage.getItem('aiAssistanceStructuredLogEnabled'));
+  } catch {
+    return false;
+  }
 }
 
 export function debugLog(...log: unknown[]): void {

package/front_end/models/comment_manager/CD4ABridge.ts

@@ -72,7 +72,7 @@ export class CD4ABridge extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     if (!this.#targetManager) {
       return undefined;
     }
-    const target = this.#targetManager.targetById(nodeSignature.targetId) ?? this.#targetManager.primaryPageTarget();
+    const target = this.#targetManager.targetById(nodeSignature.targetId);
     const domModel = target?.model(SDK.DOMModel.DOMModel);
     if (!domModel) {
       return undefined;
@@ -156,7 +156,7 @@ export class CD4ABridge extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
     }
 
     if (target?.node && this.#targetManager) {
-      const sdkTarget = this.#targetManager.targetById(target.node.targetId) ?? this.#targetManager.primaryPageTarget();
+      const sdkTarget = this.#targetManager.targetById(target.node.targetId);
       const domModel = sdkTarget?.model(SDK.DOMModel.DOMModel);
       if (domModel) {
         const cdpNodeId = target.node.backendNodeId as Protocol.DOM.BackendNodeId;

package/front_end/models/comment_manager/CommentManager.ts

@@ -74,6 +74,9 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   }
 
   setCommentMode(active: boolean): void {
+    if (active && !this.#agentAttached) {
+      return;
+    }
     if (this.#commentMode === active) {
       return;
     }

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -134,8 +134,8 @@ export class FormatterWorkerPool {
     return this.runTask(FormatterActions.FormatterActions.FORMAT, parameters) as Promise<FormatterActions.FormatResult>;
   }
 
-  javaScriptSubstitute(expression: string, mapping: Map<string, string|null>): Promise<string> {
-    if (mapping.size === 0) {
+  javaScriptSubstitute(expression: string, mapping: Array<Map<string, string|null>>): Promise<string> {
+    if (mapping.every(m => m.size === 0)) {
       return Promise.resolve(expression);
     }
     return this.runTask(FormatterActions.FormatterActions.JAVASCRIPT_SUBSTITUTE, {content: expression, mapping})

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -1367,6 +1367,11 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     signatures: [["message","?options"],["message","transfer"],["message","targetOrigin","?transfer"]],
     receivers: ["Window"]
   },
+  {
+    name: "postMessage",
+    signatures: [["message","targetOrigin"],["message","?options"]],
+    receivers: ["HTMLPersistentWidgetElement","PersistentWidgetOpener"]
+  },
   {
     name: "deleteRule",
     signatures: [["index"]],
@@ -2050,7 +2055,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "write",
-    signatures: [["...text"],["text"],["text1","...text"]],
+    signatures: [["...text"]],
     receivers: ["Document"]
   },
   {
@@ -2489,7 +2494,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "writeln",
-    signatures: [["...text"],["text"],["text1","...text"]]
+    signatures: [["...text"]]
   },
   {
     name: "elementFromPoint",

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -15,7 +15,7 @@ interface CachedScopeMap {
 }
 
 const scopeToCachedIdentifiersMap = new WeakMap<Formatter.FormatterWorkerPool.ScopeTreeNode, CachedScopeMap>();
-const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Map<string, string|null>>();
+const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Array<Map<string, string|null>>>();
 
 export async function getTextFor(contentProvider: TextUtils.ContentProvider.ContentProvider):
     Promise<TextUtils.Text.Text|null> {
@@ -401,56 +401,61 @@ export const resolveScopeChain =
           return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
+function reverseScopeMapping(variableMapping: Map<string, string>): Map<string, string|null> {
+  const result = new Map<string, string|null>();
+  for (const [compiledName, originalName] of variableMapping) {
+    if (originalName && !result.has(originalName)) {
+      result.set(originalName, compiledName);
+    }
+  }
+  return result;
+}
+
 /**
- * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
- * shadowed) we set it to `null`.
+ * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
  */
 export const allVariablesInCallFrame = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-    Promise<Map<string, string|null>> => {
+    Promise<Array<Map<string, string|null>>> => {
       if (!callFrame.debuggerModel.target()
                .targetManager()
                .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
                .get()) {
-        return new Map<string, string|null>();
+        return [];
       }
-      const cachedMap = cachedMapByCallFrame.get(callFrame);
-      if (cachedMap) {
-        return cachedMap;
+      const cached = cachedMapByCallFrame.get(callFrame);
+      if (cached) {
+        return cached;
+      }
+
+      if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+        const sourceMap = callFrame.script.sourceMap() ??
+            await callFrame.debuggerModel.sourceMapManager().sourceMapForClientPromise(callFrame.script);
+        const mappedVariables =
+            sourceMap?.resolveMappedVariablesAtPosition(callFrame.location(), callFrame.returnValue() !== null);
+        if (mappedVariables) {
+          cachedMapByCallFrame.set(callFrame, mappedVariables);
+          return mappedVariables;
+        }
       }
 
       const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
       const nameMappings =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
-      const reverseMapping = new Map<string, string|null>();
-      const compiledNames = new Set<string>();
-      for (const {variableMapping} of nameMappings) {
-        for (const [compiledName, originalName] of variableMapping) {
-          if (!originalName) {
-            continue;
-          }
-          if (!reverseMapping.has(originalName)) {
-            // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-            const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-            reverseMapping.set(originalName, compiledNameOrNull);
-          }
-          compiledNames.add(compiledName);
-        }
-      }
+      const reverseMapping = nameMappings.map(({variableMapping}) => reverseScopeMapping(variableMapping));
       cachedMapByCallFrame.set(callFrame, reverseMapping);
       return reverseMapping;
     };
 
 /**
- * @returns A mapping from original name -> compiled name. If the orignal name is unavailable (e.g. because the compiled name was
- * shadowed) we set it to `null`.
+ * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
  */
 export const allVariablesAtPosition =
     async(location: SDK.DebuggerModel.Location,
           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-        Promise<Map<string, string|null>> => {
-          const reverseMapping = new Map<string, string|null>();
+        Promise<Array<Map<string, string|null>>> => {
+          const reverseMapping: Array<Map<string, string|null>> = [];
           const script = location.script();
           if (!script) {
             return reverseMapping;
@@ -462,6 +467,15 @@ export const allVariablesAtPosition =
             return reverseMapping;
           }
 
+          if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+            const sourceMap =
+                script.sourceMap() ?? await script.debuggerModel.sourceMapManager().sourceMapForClientPromise(script);
+            const mappedVariables = sourceMap?.resolveMappedVariablesAtPosition(location);
+            if (mappedVariables) {
+              return mappedVariables;
+            }
+          }
+
           const scopeTreeAndText = await computeScopeTree(script);
           if (!scopeTreeAndText) {
             return reverseMapping;
@@ -470,21 +484,10 @@ export const allVariablesAtPosition =
           const {scopeTree, text} = scopeTreeAndText;
           const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
           const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
-          const compiledNames = new Set<string>();
 
           while (scopeChain.length > 0) {
             const {variableMapping} = await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
-            for (const [compiledName, originalName] of variableMapping) {
-              if (!originalName) {
-                continue;
-              }
-              if (!reverseMapping.has(originalName)) {
-                // An inner scope might have shadowed {compiledName}. Mark it as "unavailable" in that case.
-                const compiledNameOrNull = compiledNames.has(compiledName) ? null : compiledName;
-                reverseMapping.set(originalName, compiledNameOrNull);
-              }
-              compiledNames.add(compiledName);
-            }
+            reverseMapping.push(reverseScopeMapping(variableMapping));
             scopeChain.pop();
           }
           return reverseMapping;

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.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 Buttons from '../../ui/components/buttons/buttons.js';
@@ -35,6 +36,10 @@ const UIStrings = {
    * @description Tooltip for the clear announcements button in the announcements tool.
    */
   clearAnnouncements: 'Clear announcements',
+  /**
+   * @description Tooltip for the export to CSV button in the announcements tool.
+   */
+  exportCsv: 'Export to CSV',
   /**
    * @description Label/title for the dropdown filter to select which announcement types to record.
    */
@@ -108,6 +113,8 @@ export interface ViewInput {
   isRecording: boolean;
   onToggleRecording: () => void;
   onClear: () => void;
+  onExportCsv: () => void;
+  canExport: boolean;
   recordTypeFilter: RecordTypeFilter;
   onRecordTypeFilterChange: (type: RecordTypeFilter) => void;
   textFilter: string;
@@ -144,6 +151,14 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             .variant=${Buttons.Button.Variant.TOOLBAR}
             .jslogContext=${'accessibility.clear-announcements'}>
           </devtools-button>
+          <devtools-button
+            title=${i18nString(UIStrings.exportCsv)}
+            .iconName=${'download'}
+            .disabled=${!input.canExport}
+            @click=${input.onExportCsv}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.export-csv'}>
+          </devtools-button>
           <div class="toolbar-divider" role="separator"></div>
           <select
             title=${i18nString(UIStrings.filterByType)}
@@ -729,6 +744,32 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
   };
 }
 
+export function escapeCsvValue(val: string): string {
+  const escaped = val.replace(/"/g, '""');
+  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r') || escaped.includes('"')) {
+    return `"${escaped}"`;
+  }
+  return escaped;
+}
+
+export function buildCsvContent(announcements: readonly A11yAnnouncement[]): string {
+  const csvRows: string[] = [];
+  csvRows.push(['Time', 'API', 'Politeness', 'Message'].join(','));
+
+  for (const item of announcements) {
+    const timeString = new Date(item.time).toISOString();
+    const row = [
+      escapeCsvValue(timeString),
+      escapeCsvValue(item.api),
+      escapeCsvValue(item.politeness),
+      escapeCsvValue(item.message),
+    ];
+    csvRows.push(row.join(','));
+  }
+
+  return csvRows.join('\r\n');
+}
+
 export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane implements SDK.TargetManager.Observer {
   #announcements: A11yAnnouncement[] = [];
   #filteredAnnouncements: readonly A11yAnnouncement[]|null = null;
@@ -984,6 +1025,29 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
     this.requestUpdate();
   }
 
+  #exportCsv(): void {
+    const csvContent = this.#buildCsvContent();
+    const blob = new Blob(['\ufeff', csvContent], {type: 'text/csv;charset=utf-8'});
+    const url = URL.createObjectURL(blob);
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    const link = document.createElement('a');
+    link.setAttribute('href', url);
+    link.setAttribute('download', `aria-live-announcements-${Platform.DateUtilities.toISO8601Compact(new Date())}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  #buildCsvContent(): string {
+    return buildCsvContent(this.filteredAnnouncements);
+  }
+
+  exportCsvForTest(): string {
+    return this.#buildCsvContent();
+  }
+
   override performUpdate(): void {
     const blockedTargets: BlockedTargetInfo[] = [];
     for (const [target, reason] of this.#blockedTargets) {
@@ -991,6 +1055,7 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       blockedTargets.push({targetName, reason});
     }
 
+    const filteredAnnouncements = this.filteredAnnouncements;
     const input: ViewInput = {
       isRecording: this.#isRecording,
       onToggleRecording: () => {
@@ -1003,6 +1068,10 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       onClear: () => {
         this.clearAnnouncements();
       },
+      onExportCsv: () => {
+        this.#exportCsv();
+      },
+      canExport: filteredAnnouncements.length > 0,
       recordTypeFilter: this.#recordTypeFilter,
       onRecordTypeFilterChange: (type: RecordTypeFilter) => {
         this.setRecordTypeFilter(type);
@@ -1012,7 +1081,7 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
         this.setTextFilter(text);
       },
       blockedTargets,
-      announcements: this.filteredAnnouncements,
+      announcements: filteredAnnouncements,
     };
     this.#view(input, undefined, this.contentElement);
   }

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -1636,7 +1636,7 @@ async function makeDomTreeWidget(widgetData: AiAssistanceModel.AiAgent.DomTreeAi
   // clang-format off
   const renderedWidget = html`
     ${networkRequest ? renderNetworkRequestPreview(networkRequest) : Lit.nothing}
-    <devtools-widget class="dom-tree-widget" ${widget(Elements.ElementsTreeOutline.DOMTreeWidget, {
+    <devtools-widget class="dom-tree-widget" ${widget(Elements.DOMTreeWidget.DOMTreeWidget, {
       maxTreeDepth: 2,
       enableContextMenu: false,
       showComments: false,

package/front_end/panels/common/CommentsOverlayWidget.ts

@@ -43,6 +43,7 @@ const POPUP_MARGIN = 8;
 const PIN_HEIGHT = 30;
 const POPUP_WIDTH = 288;
 const POPUP_HEIGHT = 220;
+const AUTO_CLOSE_DELAY_MS = 2000;
 
 const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   // clang-format off
@@ -119,6 +120,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   readonly #commentManager: CommentManager.CommentManager.CommentManager;
   #commentOverlayManager: Comments.CommentOverlayManager.CommentOverlayManager;
   #activeThreadId: string|null = null;
+  #closeTimeoutId: number|null = null;
   #cachedTitle: Title = {text: ''};
   #cachedTitleAnchor: CommentManager.CommentManager.CommentAnchorSignature|null = null;
 
@@ -173,6 +175,7 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
   }
 
   override willHide(): void {
+    this.#clearCloseTimeout();
     this.#commentOverlayManager.stop();
     this.#commentOverlayManager.removeEventListener(
         Comments.CommentOverlayManager.Events.POSITIONS_UPDATED,
@@ -204,6 +207,13 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
     super.willHide();
   }
 
+  #clearCloseTimeout(): void {
+    if (this.#closeTimeoutId !== null) {
+      window.clearTimeout(this.#closeTimeoutId);
+      this.#closeTimeoutId = null;
+    }
+  }
+
   #onAgentAttachedChanged(
       event: Common.EventTarget.EventTargetEvent<
           CommentManager.CommentManager.EventTypes[CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED]>,
@@ -329,7 +339,18 @@ export class CommentsOverlayWidget extends UI.Widget.Widget {
       activePin,
       title,
       onAddComment: (text: string) => {
-        activeThread?.save(text);
+        if (!activeThread) {
+          return;
+        }
+        activeThread.save(text);
+        const threadId = activeThread.id;
+        this.#closeTimeoutId = window.setTimeout(() => {
+          this.#closeTimeoutId = null;
+          if (this.#activeThreadId === threadId) {
+            this.#activeThreadId = null;
+            this.requestUpdate();
+          }
+        }, AUTO_CLOSE_DELAY_MS);
       },
     };
     this.#view(viewInput, undefined, this.contentElement);
@@ -350,6 +371,9 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
 
   handleAction(_context: UI.Context.Context, actionId: string): boolean {
     if (actionId === 'comments.toggle-comment-mode') {
+      if (!this.#commentManager.isAgentAttached()) {
+        return false;
+      }
       if (!widgetInstance) {
         widgetInstance = new CommentsOverlayWidget(
             undefined,
@@ -383,11 +407,14 @@ export class ButtonProvider implements UI.Toolbar.Provider {
         Root.DevToolsContext.globalInstance().get(
             CommentManager.CommentManager.CommentManager,
         );
-    this.#button = UI.Toolbar.Toolbar.createActionButton('comments.toggle-comment-mode');
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('comments.toggle-comment-mode');
+    action.setEnabled(this.#commentManager.isAgentAttached());
+    this.#button = UI.Toolbar.Toolbar.createActionButton(action);
     this.#button.setVisible(this.#commentManager.isAgentAttached());
     this.#commentManager.addEventListener(
         CommentManager.CommentManager.Events.AGENT_ATTACHED_CHANGED,
         event => {
+          action.setEnabled(event.data);
           this.#button.setVisible(event.data);
         },
     );

package/front_end/panels/common/ExtensionServer.ts

@@ -34,6 +34,7 @@ const kForbiddenSchemes = [
   'chrome-error:',
   'chrome-search:',
   'devtools:',
+  'isolated-app:',
 ];
 
 declare global {
@@ -44,6 +45,18 @@ declare global {
 
 let extensionServerInstance: ExtensionServer|null;
 
+function parseCanonicalURL(url: Platform.DevToolsPath.UrlString): URL|null {
+  try {
+    let parsedURL = new URL(url);
+    while (parsedURL.protocol === 'blob:' || parsedURL.protocol === 'filesystem:') {
+      parsedURL = new URL(parsedURL.href.slice(parsedURL.protocol.length));
+    }
+    return parsedURL;
+  } catch {
+    return null;
+  }
+}
+
 export class HostsPolicy {
   static create(policy?: Host.InspectorFrontendHostAPI.ExtensionHostsPolicy): HostsPolicy|null {
     const runtimeAllowedHosts = [];
@@ -98,12 +111,11 @@ class RegisteredExtension {
       return false;
     }
 
-    let parsedURL;
-    try {
-      parsedURL = new URL(inspectedURL);
-    } catch {
+    const parsedURL = parseCanonicalURL(inspectedURL);
+    if (!parsedURL) {
       return false;
     }
+    inspectedURL = parsedURL.href as Platform.DevToolsPath.UrlString;
 
     if (parsedURL.protocol === 'chrome-extension:') {
       if (parsedURL.origin !== this.origin) {
@@ -1827,12 +1839,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   }
 
   static canInspectURL(url: Platform.DevToolsPath.UrlString): boolean {
-    let parsedURL;
     // This is only to work around invalid URLs we're occasionally getting from some tests.
     // TODO(caseq): make sure tests supply valid URLs or we specifically handle invalid ones.
-    try {
-      parsedURL = new URL(url);
-    } catch {
+    const parsedURL = parseCanonicalURL(url);
+    if (!parsedURL) {
       return false;
     }
 

package/front_end/panels/console/ConsolePrompt.ts

@@ -459,7 +459,7 @@ export class ConsolePrompt extends ConsolePromptBase {
         ?.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
   }
 
-  private async substituteNames(expression: string, mapping: Map<string, string|null>): Promise<string> {
+  private async substituteNames(expression: string, mapping: Array<Map<string, string|null>>): Promise<string> {
     try {
       return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
     } catch {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1030,7 +1030,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
         return;
       }
-      const treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(
+      const treeOutline = new Elements.DOMTreeWidget.ElementsTreeOutline(
           /* omitRootDOMNode: */ false, /* selectEnabled: */ true, /* hideGutter: */ true);
       treeOutline.rootDOMNode = node;
       treeOutline.deindentSingleNode();

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -359,7 +359,8 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
 
     let completions: string[] = await this.classNamesPromise;
     const classesMap = this.nodeClasses((selectedNode));
-    completions = completions.filter(value => !classesMap.get(value));
+    const existingClasses = new Set(expression.split(/[,\s]/).map(className => className.trim()).filter(Boolean));
+    completions = completions.filter(value => !classesMap.get(value) && !existingClasses.has(value));
 
     if (prefix[0] === '.') {
       completions = completions.map(value => '.' + value);

package/front_end/panels/elements/DOMTreeContextMenu.ts

@@ -9,9 +9,9 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Emulation from '../emulation/emulation.js';
 
 import {canGetJSPath} from './DOMPath.js';
+import type {DOMTreeWidget} from './DOMTreeWidget.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement} from './ElementsTreeElement.js';
-import type {DOMTreeWidget} from './ElementsTreeOutline.js';
 
 const UIStrings = {
   /**