chrome-devtools-frontend 1.0.1690531 → 1.0.1695017

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -626,11 +626,14 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   };
   #textInputValue = '';
 
-  constructor(private view: View = defaultView, {aidaClient, aidaAvailability}: {
+  private view: View;
+
+  constructor(view: View|undefined = defaultView, {aidaClient, aidaAvailability}: {
     aidaClient: Host.AidaClient.AidaClient,
     aidaAvailability: Host.AidaClient.AidaAccessPreconditions,
   }) {
     super(AiAssistancePanel.panelName);
+    this.view = view;
     this.registerRequiredCSS(aiAssistancePanelStyles);
     this.#aiAssistanceEnabledSetting = this.#getAiAssistanceEnabledSetting();
 
@@ -730,8 +733,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onTextSubmit: async (text: string, imageInput?: Host.AidaClient.Part,
                                multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
             const submit = (): void => {
-              Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
-              void this.#startConversation(text, imageInput, multimodalInputType);
+              void this.#submitQuery(text, imageInput, multimodalInputType);
             };
 
             const seenSetting = Common.Settings.Settings.instance().resolve(
@@ -1505,11 +1507,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return;
       }
 
-      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
       if (this.#conversation && this.#conversation.isBlockedByOrigin) {
         this.#handleNewChatRequest();
       }
-      await this.#startConversation(predefinedPrompt);
+      await this.#submitQuery(predefinedPrompt);
     } else {
       this.#viewOutput.chatView?.focusTextInput();
     }
@@ -1589,7 +1590,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     this.#updateConversationState(conversation);
-    await this.#doConversation(conversation.history);
+    await this.#consumeResponseStream(conversation.history);
   }
 
   #handleNewChatRequest(): void {
@@ -1707,7 +1708,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
   }
 
-  async #startConversation(
+  /**
+   * Submits a user query turn to the active conversation and streams the response.
+   * Executes on every turn (both initial prompt and follow-up turns).
+   */
+  async #submitQuery(
       text: string,
       imageInput?: Host.AidaClient.Part,
       multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType,
@@ -1715,13 +1720,18 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     if (!this.#conversation) {
       return;
     }
-    // Cancel any previous in-flight conversation.
+    // Cancel any previous in-flight query.
     this.#cancel();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceQuerySubmitted);
     const signal = this.#runAbortController.signal;
 
-    // If a different context is provided, it must be from the same origin.
+    // Initial conversation boundary (turn 1 only).
     if (this.#conversation.isEmpty) {
       Badges.UserBadges.instance().recordAction(Badges.BadgeAction.STARTED_AI_CONVERSATION);
+      // Note: Prior to September 2026 (crrev.com/c/8366147), this event erroneously logged on every query
+      // turn because this method was named #startConversation. It is now correctly
+      // restricted to conversation initialization.
+      void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
     }
 
     let multimodalInput: AiAssistanceModel.AiAgent.MultimodalInput|undefined;
@@ -1733,9 +1743,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       };
     }
 
-    void VisualLogging.logFunctionCall(`start-conversation-${this.#conversation.type}`, 'ui');
-
-    await this.#doConversation(
+    await this.#consumeResponseStream(
         this.#conversation.run(
             text,
             {
@@ -1746,9 +1754,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     );
   }
 
-  async #doConversation(
-      items: Iterable<AiAssistanceModel.AiAgent.ResponseData, void, void>|
-      AsyncIterable<AiAssistanceModel.AiAgent.ResponseData, void, void>): Promise<void> {
+  /**
+   * Consumes response items (live generator or historic array) and drives UI updates.
+   */
+  async #consumeResponseStream(items: Iterable<AiAssistanceModel.AiAgent.ResponseData, void, void>|
+                               AsyncIterable<AiAssistanceModel.AiAgent.ResponseData, void, void>): Promise<void> {
     const release = await this.#mutex.acquire();
     try {
       let systemMessage: ModelChatMessage = {

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

@@ -19,10 +19,9 @@ import * as Trace from '../../../models/trace/trace.js';
 import * as Workspace from '../../../models/workspace/workspace.js';
 import * as PanelsCommon from '../../../panels/common/common.js';
 import * as TraceBounds from '../../../services/trace_bounds/trace_bounds.js';
-import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
-import type * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
+import * as MarkdownView from '../../../ui/components/markdown_view/markdown_view.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import type * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -614,7 +613,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
       <div class="user-query-wrapper">
         <section class=${messageClasses} jslog=${VisualLogging.section('question')}>
           ${imageInput}
-          <div class="message-content">${renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
+          <div class="message-content">${MarkdownView.MarkdownView.renderTextAsMarkdown(message.text, input.markdownRenderer)}</div>
         </section>
       </div>
     `, target);
@@ -643,7 +642,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           (part, index) => {
             const isLastPart = index === message.parts.length - 1;
             if (part.type === 'answer') {
-              return html`<p>${renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
+              return html`<p>${MarkdownView.MarkdownView.renderTextAsMarkdown(part.text, input.markdownRenderer, { animate: !input.isReadOnly && input.isLoading && isLastPart && input.isLastMessage })}</p>`;
             }
             if (part.type === 'widget') {
               return html`${Lit.Directives.until(renderWidgets(part.widgets, {wrapperClass: 'main-widgets-wrapper'}))}`;
@@ -662,36 +661,6 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
 
 export type View = typeof DEFAULT_VIEW;
 
-function renderTextAsMarkdown(text: string, markdownRenderer: MarkdownView.MarkdownView.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 MarkdownView.MarkdownView.MarkdownViewData}
-    ${refFn ? ref(refFn) : Lit.nothing}>
-  </devtools-markdown-view>`;
-  // clang-format on
-}
-
 export function titleForStep(step: Step): string {
   return step.title ?? `${lockedString(UIStringsNotTranslate.investigating)}…`;
 }
@@ -754,7 +723,9 @@ function renderStepDetails({
 }): Lit.LitTemplate {
   const sideEffects =
       isLast && step.state.type === 'needs_approval' ? renderSideEffectConfirmationUi(step) : Lit.nothing;
-  const thought = step.thought ? html`<p>${renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` : Lit.nothing;
+  const thought = step.thought ?
+      html`<p>${MarkdownView.MarkdownView.renderTextAsMarkdown(step.thought, markdownRenderer)}</p>` :
+      Lit.nothing;
 
   // clang-format off
   const contextDetails = step.contextDetails ?

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

@@ -3,13 +3,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
+
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, type LitTemplate, render} from '../../../ui/lit/lit.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import disabledWidgetStyles from './disabledWidget.css.js';
 
@@ -85,14 +86,14 @@ function renderConsentViewContents(
   }
 
   // eslint-disable-next-line @devtools/no-imperative-dom-api
-  const settingsLink = document.createElement('span');
+  const settingsLink = document.createElement('devtools-link');
   settingsLink.textContent = i18nString(UIStrings.settingsLink);
   settingsLink.classList.add('link');
   UI.ARIAUtils.markAsLink(settingsLink);
   settingsLink.addEventListener('click', () => {
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
   });
-  settingsLink.setAttribute('jslog', `${VisualLogging.action('open-ai-settings').track({click: true})}`);
+  settingsLink.jslogContext = 'open-ai-settings';
 
   let consentViewContents: HTMLSpanElement;
   if (hostConfig.devToolsAiAssistancePerformanceAgent?.enabled) {

package/front_end/panels/animation/AnimationTimeline.ts

@@ -1213,6 +1213,7 @@ export class NodeUI {
       return;
     }
     this.element.setAttribute('data-backend-node-id', String(node.backendNodeId()));
+    this.element.setAttribute('data-target-id', node.domModel().target().id());
     this.#node = node;
     this.nodeChanged();
     const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {

package/front_end/panels/application/CrashReportContextView.ts

@@ -213,7 +213,6 @@ export class CrashReportContextView extends UI.Widget.VBox {
             frameId,
             displayName,
             isMain: frame?.isMainFrame() ?? false,
-            origin: frame?.securityOrigin || '',
             entries: frameEntries,
           };
         })

package/front_end/panels/application/FrameDetailsView.ts

@@ -351,7 +351,7 @@ function renderDocumentSection(input: FrameDetailsViewInput): LitTemplate {
         </div>
       </devtools-report-value>
       ${maybeRenderUnreachableURL(input.frame?.unreachableUrl())}
-      ${maybeRenderOrigin(input.frame?.securityOrigin)}
+      ${maybeRenderOrigin(input.frame?.securityOrigin())}
       ${renderOwnerElement(input.linkTargetDOMNode)}
       ${maybeRenderCreationStacktrace(input.creationStackTrace)}
       ${maybeRenderAdStatus(input.frame?.adFrameType(), input.frame?.adFrameStatus())}
@@ -414,12 +414,13 @@ function renderNetworkLinkForUnreachableURL(unreachableUrlString: Platform.DevTo
   return nothing;
 }
 
-function maybeRenderOrigin(securityOrigin: string|null): LitTemplate {
-  if (securityOrigin && securityOrigin !== '://') {
+function maybeRenderOrigin(securityOrigin: SDK.SecurityOrigin.SecurityOrigin|undefined): LitTemplate {
+  if (securityOrigin && !securityOrigin.isOpaque()) {
+    const originString = securityOrigin.siteId();
     return html`
         <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
         <devtools-report-value>
-          <div class="text-ellipsis" title=${securityOrigin}>${securityOrigin}</div>
+          <div class="text-ellipsis" title=${originString}>${originString}</div>
         </devtools-report-value>
       `;
   }

package/front_end/panels/application/IndexedDBViews.ts

@@ -289,14 +289,14 @@ const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void =
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
-  return html`<devtools-data-grid striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
+  return html`<devtools-data-grid row-height="auto" striped style="flex: auto;" name=${i18nString(UIStrings.indexedDb)} .template=${html`
     <style>${indexedDBViewsStyles}</style>
     <table>
       <tr>
         <th id="number" fixed width="50px">#</th>
-        <th id="key">${renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
-        ${input.isIndex ? html`<th id="primary-key">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
-        <th id="value">${i18nString(UIStrings.valueString)}</th>
+        <th id="key" weight="2">${renderKeyColumnHeader(i18nString(UIStrings.keyString), keyPath)}</th>
+        ${input.isIndex ? html`<th id="primary-key" weight="2">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
+        <th id="value" weight="8">${i18nString(UIStrings.valueString)}</th>
       </tr>
       ${repeat(input.entries, (_entry, index) => index, (entry, index) => {
         return html`

package/front_end/panels/application/indexedDBViews.css

@@ -32,20 +32,6 @@
   color: inherit;
 }
 
-:host-context(.indexed-db-data-view) .section,
-:host-context(.indexed-db-data-view) .section > .header,
-:host-context(.indexed-db-data-view) .section > .header .title {
-  margin: 0;
-  min-height: inherit;
-  line-height: inherit;
-}
-
-:host-context(.indexed-db-data-view) .data-grid .data-container td .section .header .title {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
 .indexed-db-key-path {
   color: var(--sys-color-error);
   white-space: pre-wrap;

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -232,18 +232,25 @@ export class ConsoleContextSelector implements SDK.TargetManager.SDKModelObserve
       return i18nString(UIStrings.extension);
     }
     const sameTargetParentFrame = frame?.sameTargetParentFrame();
+    const executionContextOrigin =
+        executionContext.origin ? SDK.SecurityOrigin.SecurityOrigin.create(executionContext.origin) : null;
     // TODO(crbug.com/1159332): Understand why condition involves the sameTargetParentFrame.
-    if (!frame || !sameTargetParentFrame || sameTargetParentFrame.securityOrigin !== executionContext.origin) {
+    if (!frame || !sameTargetParentFrame ||
+        !sameTargetParentFrame.securityOrigin().isSameOriginWith(executionContextOrigin)) {
       const url = Common.ParsedURL.ParsedURL.fromString(executionContext.origin);
       if (url) {
         return url.domain();
       }
     }
 
-    if (frame?.securityOrigin) {
-      const domain = new Common.ParsedURL.ParsedURL(frame.securityOrigin).domain();
-      if (domain) {
-        return domain;
+    if (frame) {
+      const origin = frame.securityOrigin();
+      if (!origin.isOpaque()) {
+        const domain =
+            Common.ParsedURL.ParsedURL.fromString(origin.siteId() as Platform.DevToolsPath.UrlString)?.domain();
+        if (domain) {
+          return domain;
+        }
       }
     }
     return 'IFrame';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -288,7 +288,7 @@ const hoverButtonObserver = new IntersectionObserver(results => {
   }
 });
 
-function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.Widget): void {
+function appendOrShow(parent: Element, child: DocumentFragment|UI.Widget.AnyWidget|HTMLElement): void {
   if (child instanceof UI.Widget.Widget) {
     child.show(parent, null, /* suppressOprhanWidgetError=*/ true);
   } else {
@@ -795,7 +795,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       if (shouldFormatMessage && parameters[i].type === 'string') {
         appendOrShow(formattedResult, this.linkifyStringAsFragment(parameters[i].description || ''));
       } else {
-        formattedResult.appendChild(this.formatParameter(parameters[i], false, true));
+        appendOrShow(formattedResult, this.formatParameter(parameters[i], false, true));
       }
       if (i < parameters.length - 1) {
         UI.UIUtils.createTextChild(formattedResult, ' ');
@@ -804,10 +804,12 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return formattedResult;
   }
 
-  protected formatParameter(
-      output: SDK.RemoteObject.RemoteObject, forceObjectFormat?: boolean, includePreview?: boolean): HTMLElement {
+  protected formatParameter(output: SDK.RemoteObject.RemoteObject, forceObjectFormat?: boolean,
+                            includePreview?: boolean): HTMLElement|UI.Widget.AnyWidget {
     if (output.customPreview()) {
-      return new ObjectUI.CustomPreviewComponent.CustomPreviewComponent(output).element as HTMLElement;
+      const component = new ObjectUI.CustomPreviewComponent.CustomPreviewComponent();
+      component.object = output;
+      return component;
     }
 
     const outputType = forceObjectFormat ? 'object' : (output.subtype || output.type);
@@ -1185,11 +1187,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     for (const token of tokens) {
       switch (token.type) {
         case 'generic': {
-          formattedResult.append(this.formatParameter(token.value, true /* force */, false /* includePreview */));
+          appendOrShow(formattedResult,
+                       this.formatParameter(token.value, true /* force */, false /* includePreview */));
           break;
         }
         case 'optimal': {
-          formattedResult.append(this.formatParameter(token.value, false /* force */, true /* includePreview */));
+          appendOrShow(formattedResult,
+                       this.formatParameter(token.value, false /* force */, true /* includePreview */));
           break;
         }
         case 'string': {
@@ -2271,7 +2275,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
         formattedResult.classList.add('console-message-text');
         const tableElement = formattedResult.createChild('div', 'console-message-formatted-table');
         const dataGridContainer = tableElement.createChild('span');
-        tableElement.appendChild(this.formatParameter(actualTable, true, false));
+        appendOrShow(tableElement, this.formatParameter(actualTable, true, false));
         const shadowRoot = dataGridContainer.attachShadow({mode: 'open'});
         const dataGridWidget = this.dataGrid.asWidget();
         dataGridWidget.markAsRoot();

package/front_end/panels/coverage/coverageView.css

@@ -10,7 +10,7 @@
 
 .coverage-toolbar-container {
   display: flex;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   flex: 0 0 auto;
 }
 
@@ -20,7 +20,7 @@
 
 .coverage-toolbar-summary {
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   padding-left: 5px;
   flex: 0 0 19px;
   display: flex;
@@ -28,7 +28,7 @@
 }
 
 .coverage-toolbar-summary .coverage-message {
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
   padding-left: 1ex;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -45,7 +45,7 @@
 .prerender-page {
   justify-content: center;
   align-items: center;
-  padding: 20px;
+  padding: var(--sys-size-9);
 }
 
 .bfcache-page .message,
@@ -56,14 +56,14 @@
 
 .inline-button {
   display: inline-flex;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
   position: relative;
   vertical-align: sub;
-  margin: 2px;
+  margin: var(--sys-size-2);
   background-color: var(--sys-color-cdt-base-container);
   justify-content: center;
-  width: 28px;
+  width: var(--sys-size-12);
 }
 
 .inline-button:hover {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -428,14 +428,13 @@ function renderFontMetrics(font: string, fontMetricInfo: FontMetric[]): Template
       ${fontMetricInfo.map(({label, values}) => html`
         <div>
           <h3>${label}</h3>
-          ${renderGroup(values, 'font-info', `${font}/${label}`)}
+          ${renderGroup(values, 'font-info', `${font}/${label}`, label)}
         </div>`)}
     </div>`;
 }
 
-function renderGroup(
-    values: Array<{title: string, nodes: Array<number|UnusedDeclaration|Protocol.CSS.CSSMedia>}>, type: string,
-    path = ''): TemplateResult {
+function renderGroup(values: Array<{title: string, nodes: Array<number|UnusedDeclaration|Protocol.CSS.CSSMedia>}>,
+                     type: string, path = '', groupLabel = ''): TemplateResult {
   const total = values.reduce((prev, curr) => prev + curr.nodes.length, 0);
 
   // clang-format off
@@ -449,7 +448,7 @@ function renderGroup(
             <div class="title">${title}</div>
             <button data-type=${type} data-path=${path} data-label=${title}
             jslog=${VisualLogging.action().track({click: true}).context(`css-overview.${type}`)}
-            aria-label=${`${title}: ${itemLabel}`}>
+            aria-label=${`${groupLabel ? `${groupLabel}, ` : ''}${title}: ${itemLabel}`}>
               <div class="details">${itemLabel}</div>
               <div class="bar-container">
                 <div class="bar" style=${styleMap({width})}></div>

package/front_end/panels/developer_resources/developerResourcesView.css

@@ -11,7 +11,7 @@
 
   .developer-resource-view-toolbar-container {
     display: flex;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: 0 0 auto;
   }
 
@@ -21,7 +21,7 @@
 
   .developer-resource-view-toolbar-summary {
     background-color: var(--sys-color-cdt-base-container);
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     padding-left: 5px;
     flex: 0 0 19px;
     display: flex;
@@ -29,7 +29,7 @@
   }
 
   .developer-resource-view-toolbar-summary .developer-resource-view-message {
-    padding-top: 2px;
+    padding-top: var(--sys-size-2);
     padding-left: 1ex;
     text-overflow: ellipsis;
     white-space: nowrap;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -864,9 +864,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.onExpand,
     input.issues,
   )}</span>` : nothing}
-      ${input.isHovered || input.isSelected ? html`
-        <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
-      ` : nothing}
+      <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
       <div class=${classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
            @click=${input.onGutterClick}>
@@ -1148,7 +1146,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
                          moveDirection?: string) => void;
   runPendingUpdates?: () => void;
   focusOutline?: () => void;
-  setMultilineEditing?: (multilineEditing: EditorHandles|null) => void;
+  setMultilineEditing?: (multilineEditing: EditorHandles|null, node?: SDK.DOMModel.DOMNode) => void;
   visibleWidth?: () => number;
 
   #view: View;
@@ -1293,6 +1291,20 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
 
     this.editing = null;
     this.expandAllButtonElement = null;
+
+    this.contentElement.addEventListener('dblclick', (event: MouseEvent) => {
+      if (!this.node || this.editing || this.isClosingTag) {
+        return;
+      }
+      if (!this.isDOMNodeSelected) {
+        this.selectDOMNode?.(this.node, true);
+        this.isDOMNodeSelected = true;
+      }
+      const target = (event.composedPath()[0] || event.target) as Element;
+      if (this.startEditingTarget(target)) {
+        event.preventDefault();
+      }
+    });
   }
 
   static visibleShadowRoots(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
@@ -1368,6 +1380,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     // editorState) is happening. Doing an update would break editing
     // (crbug.com/515639787).
     if (this.editing && !this.#editorState) {
+      if (this.initialEdit) {
+        const edit = this.initialEdit;
+        this.initialEdit = null;
+        this.onInitialEditCompleted?.();
+        if (edit.isEditAsHTML) {
+          edit.editAsHTMLCallback?.(false);
+        }
+      }
       return;
     }
     this.updateDecorations();
@@ -2243,13 +2263,14 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
   }
 
-  private async startEditingAsHTML(
-      commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
-      maybeInitialValue: string|null): Promise<void> {
-    if (maybeInitialValue === null) {
+  private async startEditingAsHTML(commitCallback: (arg0: string, arg1: string) => void, disposeCallback: () => void,
+                                   maybeInitialValue: string|null|undefined): Promise<void> {
+    if (maybeInitialValue === null || maybeInitialValue === undefined) {
+      disposeCallback();
       return;
     }
     if (this.editing) {
+      disposeCallback();
       return;
     }
 
@@ -2338,7 +2359,7 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     this.requestUpdate();
     resize.call(this);
     this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), resize: resize.bind(this)};
-    this.setMultilineEditing?.(this.editing);
+    this.setMultilineEditing?.(this.editing, this.node);
     await this.updateComplete;
     this.#editorRef?.focus();
 
@@ -2705,7 +2726,9 @@ export class ElementsTreeWidget extends UI.Widget.Widget {
     }
 
     const node = this.node;
-    void node.getOuterHTML().then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback));
+    void node.getOuterHTML()
+        .then(this.startEditingAsHTML.bind(this, commitChange, disposeCallback))
+        .catch(disposeCallback);
   }
 
   #highlightSearchResults(): void {
@@ -3012,8 +3035,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       };
       this.widget.runPendingUpdates = () => outline.runPendingUpdates();
       this.widget.focusOutline = () => outline.focus();
-      this.widget.setMultilineEditing = multilineEditing => {
-        outline.domTreeWidget?.setMultilineEditing(multilineEditing);
+      this.widget.setMultilineEditing = (multilineEditing, n) => {
+        outline.domTreeWidget?.setMultilineEditing(multilineEditing, n ?? this.nodeInternal);
       };
       this.widget.visibleWidth = () => outline.domTreeWidget?.visibleWidth ?? outline.visibleWidth();
     }
@@ -3117,6 +3140,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.widget.onunbind();
   }
 
+  override ensureSelection(): void {
+    // Selection element is rendered in DEFAULT_VIEW via ElementsTreeWidget.
+  }
+
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
     treeElement.widget.animateOnDOMUpdate();
   }