chrome-devtools-frontend 1.0.1621064 → 1.0.1622369

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7639,6 +7639,14 @@ export const NativeFunctions = [
     name: "Sanitizer",
     signatures: [["?configuration"]]
   },
+  {
+    name: "allowProcessingInstruction",
+    signatures: [["pi"]]
+  },
+  {
+    name: "removeProcessingInstruction",
+    signatures: [["pi"]]
+  },
   {
     name: "TaskController",
     signatures: [["?init"]]

package/front_end/models/trace/insights/Common.ts

@@ -26,6 +26,10 @@ export function getInsight<InsightName extends keyof InsightModels>(
   return insightSet.model[insightName];
 }
 
+export function isInsightKey(key: string): key is InsightKeys {
+  return Object.values(InsightKeys).includes(key as InsightKeys);
+}
+
 export function getLCP(insightSet: InsightSet):
     {value: Types.Timing.Micro, event: Types.Events.AnyLargestContentfulPaintCandidate}|null {
   const insight = getInsight(InsightKeys.LCP_BREAKDOWN, insightSet);

package/front_end/models/trace/insights/types.ts

@@ -145,7 +145,7 @@ export type InsightModelErrors = {
  */
 export type TraceInsightSets = Map<Types.Events.NavigationId, InsightSet>;
 
-export const enum InsightKeys {
+export enum InsightKeys {
   LCP_BREAKDOWN = 'LCPBreakdown',
   INP_BREAKDOWN = 'INPBreakdown',
   CLS_CULPRITS = 'CLSCulprits',

package/front_end/models/web_mcp/WebMCPModel.ts

@@ -90,6 +90,7 @@ export interface Call {
   tool: Tool;
   input: string;
   result?: Result;
+  cancel: () => void;
 }
 
 export class Tool {
@@ -244,7 +245,16 @@ export class WebMCPModel extends SDK.SDKModel.SDKModel<EventTypes> implements Pr
     if (!tool) {
       return;
     }
-    const call: Call = {tool, input: params.input, invocationId: params.invocationId};
+    const call: Call = {
+      tool,
+      input: params.input,
+      invocationId: params.invocationId,
+      cancel: () => {
+        if (call.result === undefined) {
+          void this.agent.invoke_cancelInvocation({invocationId: params.invocationId});
+        }
+      },
+    };
     this.#calls.set(params.invocationId, call);
     this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
   }

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

@@ -20,6 +20,7 @@ import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Trace from '../../../models/trace/trace.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';
@@ -31,6 +32,7 @@ import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
+import type {BaseInsightComponent} from '../../timeline/components/insights/BaseInsightComponent.js';
 import * as TimelineInsights from '../../timeline/components/insights/insights.js';
 import * as Timeline from '../../timeline/timeline.js';
 import * as TimelineUtils from '../../timeline/utils/utils.js';
@@ -201,6 +203,18 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the LCP breakdown widget.
    */
   revealLcpBreakdown: 'Reveal LCP breakdown',
+  /**
+   * @description Accessible label for the reveal button in the LCP discovery widget.
+   */
+  revealLcpDiscovery: 'Reveal LCP discovery',
+  /**
+   * @description Accessible label for the reveal button in the layout shift culprits widget.
+   */
+  revealClsCulprits: 'Reveal layout shift culprits',
+  /**
+   * @description Accessible label for the reveal button in the render-blocking requests widget.
+   */
+  revealRenderBlockingBreakdown: 'Reveal render-blocking requests',
   /**
    * @description Accessible label for the reveal button in the LCP element widget.
    */
@@ -221,6 +235,18 @@ const UIStringsNotTranslate = {
    * @description Title for the LCP breakdown widget.
    */
   lcpBreakdown: 'LCP breakdown',
+  /**
+   * @description Title for the LCP discovery widget.
+   */
+  lcpDiscovery: 'LCP discovery',
+  /**
+   * @description Title for the layout shift culprits widget.
+   */
+  clsCulprits: 'Layout shift culprits',
+  /**
+   * @description Title for the render-blocking requests widget.
+   */
+  renderBlockingBreakdown: 'Render-blocking requests',
   /**
    * @description Title for the LCP element widget.
    */
@@ -914,33 +940,78 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
   };
 }
 
+const INSIGHT_METADATA: Record<string, {
+  component: typeof TimelineInsights.LCPBreakdown.LCPBreakdown | typeof TimelineInsights.RenderBlocking.RenderBlocking |
+      typeof TimelineInsights.LCPDiscovery.LCPDiscovery | typeof TimelineInsights.CLSCulprits.CLSCulprits,
+  accessibleLabel: string,
+  title: string,
+  jslog: string,
+}> = {
+  [Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN]: {
+    component: TimelineInsights.LCPBreakdown.LCPBreakdown,
+    accessibleLabel: UIStringsNotTranslate.revealLcpBreakdown,
+    title: UIStringsNotTranslate.lcpBreakdown,
+    jslog: 'lcp-breakdown-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.RENDER_BLOCKING]: {
+    component: TimelineInsights.RenderBlocking.RenderBlocking,
+    accessibleLabel: UIStringsNotTranslate.revealRenderBlockingBreakdown,
+    title: UIStringsNotTranslate.renderBlockingBreakdown,
+    jslog: 'render-blocking-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.LCP_DISCOVERY]: {
+    component: TimelineInsights.LCPDiscovery.LCPDiscovery,
+    accessibleLabel: UIStringsNotTranslate.revealLcpDiscovery,
+    title: UIStringsNotTranslate.lcpDiscovery,
+    jslog: 'lcp-discovery-widget',
+  },
+  [Trace.Insights.Types.InsightKeys.CLS_CULPRITS]: {
+    component: TimelineInsights.CLSCulprits.CLSCulprits,
+    accessibleLabel: UIStringsNotTranslate.revealClsCulprits,
+    title: UIStringsNotTranslate.clsCulprits,
+    jslog: 'cls-culprits-widget',
+  },
+};
+
+function renderInsightWidget<T extends Trace.Insights.Types.InsightModel>(
+    component: new () => BaseInsightComponent<T>, insight: T, jslog: string, accessibleLabel: string, title: string,
+    bounds?: Trace.Types.Timing.TraceWindowMicro): WidgetMakerResponse {
+  const renderedWidget = html`<devtools-widget
+    class=${jslog}
+    ${widget(component, {
+    model: insight,
+    minimal: true,
+    bounds: bounds ?? null,
+  })}></devtools-widget>`;
+
+  return {
+    renderedWidget,
+    revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+    accessibleRevealLabel: lockedString(accessibleLabel),
+    title: lockedString(title),
+    jslogContext: jslog,
+  };
+}
+
 async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<WidgetMakerResponse|null> {
-  switch (widgetData.data.insight) {
-    case 'lcp': {
-      const insight = widgetData.data.insightData;
-      if (!insight || !Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
-        return null;
-      }
-      // clang-format off
-      const renderedWidget = html`<devtools-widget
-        class="lcp-breakdown-widget"
-        ${widget(TimelineInsights.LCPBreakdown.LCPBreakdown, {
-          model: insight,
-          minimal: true,
-        })}></devtools-widget>`;
-      // clang-format on
+  const insightKey = widgetData.data.insight;
+  const insight = widgetData.data.insightData;
 
-      return {
-        renderedWidget,
-        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
-        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpBreakdown),
-        title: lockedString(UIStringsNotTranslate.lcpBreakdown),
-        jslogContext: 'lcp-breakdown',
-      };
-    }
-    default:
+  const meta = INSIGHT_METADATA[insightKey];
+  if (!meta) {
+    return null;
+  }
+
+  let bounds;
+  if (insightKey === Trace.Insights.Types.InsightKeys.CLS_CULPRITS) {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
       return null;
+    }
+    bounds = traceBounds;
   }
+
+  return renderInsightWidget(meta.component, insight, meta.jslog, meta.accessibleLabel, meta.title, bounds);
 }
 
 async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget): Promise<WidgetMakerResponse|null> {

package/front_end/panels/application/WebMCPView.ts

@@ -167,6 +167,10 @@ const UIStrings = {
    * @description Context menu action to copy the description of a tool
    */
   copyDescription: 'Copy description',
+  /**
+   * @description Context menu action to cancel an in-progress tool call
+   */
+  cancelCall: 'Cancel',
   /**
    * @description Text for the header of the tool run section
    */
@@ -498,6 +502,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                             const payload = parsePayload(call.input);
                             input.onRevealTool(call.tool, payload.valueObject as Record<string, unknown> | undefined);
                           }, {jslogContext: 'webmcp.edit-and-run', disabled: isUnregistered});
+                          if (call.result === undefined) {
+                            contextMenu.defaultSection().appendItem(i18nString(UIStrings.cancelCall), () => {
+                              call.cancel();
+                            }, {jslogContext: 'webmcp.cancel-call'});
+                          }
                         }}>
                       <td>
                         <div class="name-cell">
@@ -598,11 +607,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ` : html`
             <devtools-list class="square-corners">
               ${tools.map(tool => html`
-                <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool?.tool})}
-                     @click=${() => input.onToolSelect(tool)}
-                     @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
-                  <div class="tool-name-container">
-                    <div class="tool-name source-code">${tool.name}</div>
+                    <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool?.tool})}
+                         @click=${() => input.onToolSelect(tool)}
+                         @contextmenu=${(e: Event) => onToolContextMenu(e, tool)}>
+                    <div class="tool-name-container">
+                      <div class="tool-name source-code">${tool.name}</div>
                     <div class="tool-icons">
                       ${getIconGroupsFromStats(toolStats.stats.get(tool)).map(group => html`
                         <icon-button
@@ -613,8 +622,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                           } as IconButton.IconButton.IconButtonData}
                           @click=${(e: Event) => e.stopPropagation()}></icon-button>`)}
                     </div>
-                  </div>
-                  <div class="tool-description">${tool.description}</div>
+                    </div>
+                    <div class="tool-description">${tool.description}</div>
                 </div>`)}
             </devtools-list>
           `}

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -0,0 +1,69 @@
+// 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 Bindings from '../../models/bindings/bindings.js';
+import type * as Workspace from '../../models/workspace/workspace.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+export interface ViewInput {
+  error: Bindings.SymbolizedError.SymbolizedError;
+  ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+}
+
+const DEFAULT_VIEW = (_input: ViewInput, _output: object, _target: HTMLElement): void => {};
+
+export class SymbolizedErrorWidget extends UI.Widget.Widget {
+  #error?: Bindings.SymbolizedError.SymbolizedError;
+  #view: typeof DEFAULT_VIEW;
+  #ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+
+  constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set ignoreListManager(ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager) {
+    this.#ignoreListManager = ignoreListManager;
+    this.requestUpdate();
+  }
+
+  get ignoreListManager(): Workspace.IgnoreListManager.IgnoreListManager|undefined {
+    return this.#ignoreListManager;
+  }
+
+  set error(error: Bindings.SymbolizedError.SymbolizedError) {
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.#error = error;
+    if (this.isShowing()) {
+      this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    }
+    this.requestUpdate();
+  }
+
+  get error(): Bindings.SymbolizedError.SymbolizedError|undefined {
+    return this.#error;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+  }
+
+  override performUpdate(): void {
+    if (!this.#error) {
+      return;
+    }
+    const input: ViewInput = {
+      error: this.#error,
+      ignoreListManager: this.#ignoreListManager,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}

package/front_end/panels/console/console.ts

@@ -13,6 +13,7 @@ import './ConsoleViewMessage.js';
 import './ConsolePrompt.js';
 import './ConsoleView.js';
 import './ConsolePanel.js';
+import './SymbolizedErrorWidget.js';
 import './PromptBuilder.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
@@ -27,6 +28,7 @@ import * as ConsoleView from './ConsoleView.js';
 import * as ConsoleViewMessage from './ConsoleViewMessage.js';
 import * as ConsoleViewport from './ConsoleViewport.js';
 import * as PromptBuilder from './PromptBuilder.js';
+import * as SymbolizedErrorWidget from './SymbolizedErrorWidget.js';
 
 export {
   ConsoleContextSelector,
@@ -41,4 +43,5 @@ export {
   ConsoleViewMessage,
   ConsoleViewport,
   PromptBuilder,
+  SymbolizedErrorWidget,
 };

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -154,7 +154,6 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
     this.editing = {
       commit: editorHandles.commit,
       cancel: editorHandles.cancel,
-      editor: undefined,
       resize: () => {},
     };
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -460,10 +460,14 @@ export interface ViewInput {
   descendantDecorations: Decoration[];
   decorationsTooltip: string;
   indent: number;
+
+  editorState: CodeMirror.EditorState|null;
+  editorWidth: number|null;
 }
 
 export interface ViewOutput {
   contentElement?: HTMLElement;
+  editorRef?: TextEditor.TextEditor.TextEditor;
 }
 
 export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective> {
@@ -936,11 +940,12 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
   const gutterContainerClasses = {
     'has-decorations': input.decorations.length || input.descendantDecorations.length,
     'gutter-container': true,
+    hidden: Boolean(input.editorState),
   };
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
-      ${input.node ? html`<span class="highlight">${renderTitle(
+      ${input.node ? html`<span class="highlight ${input.editorState ? 'hidden' : ''}">${renderTitle(
     input.node,
     input.isClosingTag,
     input.expanded,
@@ -951,7 +956,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
     input.onExpand,
   )}</span>` : nothing}
       ${input.isHovered || input.isSelected ? html`
-        <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
+        <div class="selection fill ${input.editorState ? 'hidden' : ''}" style=${`margin-left: ${-input.indent}px`}></div>
       ` : nothing}
       <div class=${Lit.Directives.classMap(gutterContainerClasses)}
            style="left: ${-input.indent}px"
@@ -964,7 +969,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
              ${input.descendantDecorations.map(d => html`<div class="elements-gutter-decoration elements-has-decorated-children" style="--decoration-color: ${d.color}"></div>`)}
         </div>` : nothing}
       </div>
-      ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
+      ${hasAdorners ? html`<div class="adorner-container ${(input.editorState) ? 'hidden' : ''}">
         ${maybeRenderAdAdorner(input)}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
           .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
@@ -1123,10 +1128,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </devtools-adorner>` : nothing}
       </div>`: nothing}
       ${input.isSelected ? html`
-        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: '$0' })} aria-hidden="true"></span>
+        <span class="selected-hint ${input.editorState ? 'hidden' : ''}" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, { PH1: '$0' })} aria-hidden="true"></span>
       ` : nothing}
       ${input.showAiButton ? html`
-        <span class="ai-button-container">
+        <span class="ai-button-container ${input.editorState ? 'hidden' : ''}">
           <devtools-floating-button
             icon-name=${AIAssistance.AiUtils.getIconName()}
             title=${input.aiButtonTitle || ''}
@@ -1136,6 +1141,15 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           </devtools-floating-button>
         </span>
       ` : nothing}
+      ${input.editorState ? html`<div @keydown=${(event: KeyboardEvent) => {
+        if (event.key === 'Escape') {
+          event.consume(true);
+        }
+      }} class="source-code elements-tree-editor" style="width: ${input.editorWidth ?? 0}px;">
+        <devtools-text-editor .state=${input.editorState} ${ref(el => {
+          output.editorRef = el as TextEditor.TextEditor.TextEditor;
+        })}></devtools-text-editor>
+      </div>`: nothing}
     </div>
   `, target);
   // clang-format on
@@ -1151,7 +1165,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private inClipboard: boolean;
   #hovered: boolean;
   private editing: EditorHandles|null;
-  private htmlEditElement?: HTMLElement;
+  #editorRef?: TextEditor.TextEditor.TextEditor;
+  #editorState: CodeMirror.EditorState|null = null;
+  #editorWidth: number|null = null;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
   #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
   #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
@@ -1288,9 +1304,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   // ClearNode param is used to clean DOM after in-place editing..
   performUpdate(clearNode = false): void {
-    if (this.editing) {
-      return;
-    }
     const output: ViewOutput = {};
     DEFAULT_VIEW(
         {
@@ -1380,10 +1393,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               void action.execute();
             }
           },
+          editorState: this.#editorState,
+          editorWidth: this.#editorWidth,
         },
         output, this.listItemElement);
 
     this.#contentElement = output.contentElement;
+    this.#editorRef = output.editorRef;
     if (this.#updateRecord) {
       this.#updateRecord = null;
     }
@@ -1683,10 +1699,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  override onunbind(): void {
-    if (this.editing) {
-      this.editing.cancel();
-    }
+  clearView(): void {
     // Update the element to clean up adorner registrations with the
     // ElementsPanel.
     // We do not change the ElementsTreeElement state in case the
@@ -1744,9 +1757,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           descendantDecorations: [],
           decorationsTooltip: '',
           indent: 0,
+          editorState: null,
+          editorWidth: null,
         },
         {}, this.listItemElement);
+  }
 
+  override onunbind(): void {
+    if (this.editing) {
+      this.editing.cancel();
+    }
+    this.clearView();
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
@@ -2553,7 +2574,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.editing = {
         commit: editorHandles.commit,
         cancel: editorHandles.cancel,
-        editor: undefined,
         resize: () => {},
       };
     }
@@ -2569,31 +2589,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    const initialValue = convertUnicodeCharsToHTMLEntities(maybeInitialValue).text;
-    this.htmlEditElement = document.createElement('div');
-    this.htmlEditElement.className = 'source-code elements-tree-editor';
-
-    // Hide header items.
-    let child: (ChildNode|null) = this.listItemElement.firstChild;
-    while (child) {
-      if (child instanceof HTMLElement) {
-        child.style.display = 'none';
-      }
-      child = child.nextSibling;
-    }
     // Hide children item.
     if (this.childrenListElement) {
       this.childrenListElement.style.display = 'none';
     }
+    const initialValue = convertUnicodeCharsToHTMLEntities(maybeInitialValue).text;
     // Append editor.
-    this.listItemElement.append(this.htmlEditElement);
-    this.htmlEditElement.addEventListener('keydown', event => {
-      if (event.key === 'Escape') {
-        event.consume(true);
-      }
-    });
-
-    const editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
+    this.#editorState = CodeMirror.EditorState.create({
       doc: initialValue,
       extensions: [
         CodeMirror.keymap.of([
@@ -2623,58 +2625,49 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         }),
         CodeMirror.EditorView.domEventHandlers({
           focusout: event => {
+            if (!this.#editorRef) {
+              return;
+            }
             // The relatedTarget is null when no element gains focus, e.g. switching windows.
             const relatedTarget = (event.relatedTarget as Node | null);
-            if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) {
+            if (relatedTarget && !relatedTarget.isSelfOrDescendant(this.#editorRef)) {
               this.editing?.commit();
             }
           },
         }),
       ],
-    }));
-    this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), editor, resize: resize.bind(this)};
+    });
+    this.performUpdate();
     resize.call(this);
-    this.htmlEditElement.appendChild(editor);
-    editor.editor.focus();
-
+    this.#editorRef?.focus();
+    this.editing = {commit: commit.bind(this), cancel: dispose.bind(this), resize: resize.bind(this)};
     this.treeOutline?.setMultilineEditing(this.editing);
 
     function resize(this: ElementsTreeElement): void {
-      if (this.treeOutline && this.htmlEditElement) {
-        this.htmlEditElement.style.width = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30 + 'px';
+      if (this.treeOutline) {
+        this.#editorWidth = this.treeOutline.visibleWidth() - this.computeLeftIndent() - 30;
+        this.performUpdate();
       }
     }
 
     function commit(this: ElementsTreeElement): void {
-      if (this.editing?.editor) {
-        commitCallback(initialValue, this.editing.editor.state.doc.toString());
+      if (this.#editorRef) {
+        commitCallback(initialValue, this.#editorRef.editor.state.doc.toString());
       }
       dispose.call(this);
     }
 
     function dispose(this: ElementsTreeElement): void {
-      if (!this.editing?.editor) {
+      if (!this.#editorRef) {
         return;
       }
       this.editing = null;
-
-      // Remove editor.
-      if (this.htmlEditElement) {
-        this.listItemElement.removeChild(this.htmlEditElement);
-      }
-      this.htmlEditElement = undefined;
+      this.#editorState = null;
+      this.performUpdate();
       // Unhide children item.
       if (this.childrenListElement) {
         this.childrenListElement.style.removeProperty('display');
       }
-      // Unhide header items.
-      let child: (ChildNode|null) = this.listItemElement.firstChild;
-      while (child) {
-        if (child instanceof HTMLElement) {
-          child.style.removeProperty('display');
-        }
-        child = child.nextSibling;
-      }
 
       if (this.treeOutline) {
         this.treeOutline.setMultilineEditing(null);
@@ -3016,7 +3009,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   toggleEditAsHTML(callback?: ((arg0: boolean) => void), startEditing?: boolean): void {
-    if (this.editing && this.htmlEditElement) {
+    if (this.editing && this.#editorState) {
       this.editing.commit();
       return;
     }
@@ -3222,7 +3215,6 @@ export function convertUnicodeCharsToHTMLEntities(text: string): {
 export interface EditorHandles {
   commit: () => void;
   cancel: () => void;
-  editor?: TextEditor.TextEditor.TextEditor;
   resize: () => void;
 }
 

package/front_end/panels/elements/PropertiesWidget.ts

@@ -103,7 +103,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       ${input.objectTree && input.allChildrenFiltered ? html`
         <div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>
       ` : nothing}
-      <devtools-tree @treeelementexpand=${onExpand} .template=${html`
+      <devtools-tree show-selection-on-keyboard-focus @treeelementexpand=${onExpand} .template=${html`
         <ul role=tree class="source-code object-properties-section">
           <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>;
           <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>;