chrome-devtools-frontend 1.0.1621064 → 1.0.1621678

package/front_end/generated/InspectorBackendCommands.ts

@@ -349,7 +349,7 @@ inspectorBackend.registerCommand("CrashReportContext.getEntries", [], ["entries"
 inspectorBackend.registerType("CrashReportContext.CrashReportContextEntry", [{"name": "key", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "frameId", "type": "string", "optional": false, "description": "The ID of the frame where the key-value pair was set.", "typeRef": "Page.FrameId"}]);
 
 // DOM.
-inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", ExpandIcon: "expand-icon", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent"});
+inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", ExpandIcon: "expand-icon", PickerIcon: "picker-icon", InterestButton: "interest-button", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent"});
 inspectorBackend.registerEnum("DOM.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
 inspectorBackend.registerEnum("DOM.CompatibilityMode", {QuirksMode: "QuirksMode", LimitedQuirksMode: "LimitedQuirksMode", NoQuirksMode: "NoQuirksMode"});
 inspectorBackend.registerEnum("DOM.PhysicalAxes", {Horizontal: "Horizontal", Vertical: "Vertical", Both: "Both"});

package/front_end/generated/protocol.ts

@@ -4604,7 +4604,7 @@ export namespace DOM {
     After = 'after',
     ExpandIcon = 'expand-icon',
     PickerIcon = 'picker-icon',
-    InterestHint = 'interest-hint',
+    InterestButton = 'interest-button',
     Marker = 'marker',
     Backdrop = 'backdrop',
     Column = 'column',

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -251,7 +251,7 @@ export interface PerformanceTraceAiWidget {
 export interface PerfInsightAiWidget {
   name: 'PERF_INSIGHT';
   data: {
-    insight: 'lcp',
+    insight: Trace.Insights.Types.InsightKeys,
     insightData: Trace.Insights.Types.InsightModel,
   };
 }

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -222,6 +222,12 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
+// TODO(crbug.com/503296282): Remove this when we add support for all insights
+const SUPPORTED_INSIGHT_WIDGETS = new Set<Trace.Insights.Types.InsightKeys>([
+  Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN,
+  Trace.Insights.Types.InsightKeys.RENDER_BLOCKING,
+]);
+
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
     return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
@@ -334,8 +340,8 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
         const failingInsightSuggestions =
             Object.values(insightSet.model)
                 .filter(model => {
-                  return model.state !== 'pass' &&
-                      !poorMetrics.has(model.insightKey as Trace.Insights.Types.InsightKeys);
+                  return model.state !== 'pass' && Trace.Insights.Common.isInsightKey(model.insightKey) &&
+                      !poorMetrics.has(model.insightKey);
                 })
                 .map(model => new PerformanceInsightFormatter(focus, model).getSuggestions().at(-1))
                 .filter((suggestion): suggestion is ConversationSuggestion => !!suggestion)
@@ -536,15 +542,18 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return widgets;
     }
 
-    // Case 2: LCP Insight -> LCP breakdown & CWV widgets
-    if (focus.insight && Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(focus.insight)) {
-      widgets.push({
-        name: 'PERF_INSIGHT',
-        data: {
-          insight: 'lcp',
-          insightData: focus.insight,
-        },
-      });
+    // Case 2: Insight -> PERF_INSIGHT widget
+    if (focus.insight) {
+      const insightKey = focus.insight.insightKey;
+      if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+        widgets.push({
+          name: 'PERF_INSIGHT',
+          data: {
+            insight: insightKey,
+            insightData: focus.insight,
+          },
+        });
+      }
     }
 
     // Case 3: Whole Trace or insight other than LCP -> CWV widget
@@ -1006,15 +1015,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               }
             }
           }
-          if (params.insightName === 'LCPBreakdown') {
-            widgets.push({
-              name: 'PERF_INSIGHT',
-              data: {
-                insight: 'lcp',
-                insightData: insight as Trace.Insights.Types.InsightModel,
-              },
-            });
-          }
+        }
+
+        const insightKey = params.insightName;
+        if (Trace.Insights.Common.isInsightKey(insightKey) && SUPPORTED_INSIGHT_WIDGETS.has(insightKey)) {
+          widgets.push({
+            name: 'PERF_INSIGHT',
+            data: {
+              insight: insightKey,
+              insightData: insight as Trace.Insights.Types.InsightModel,
+            },
+          });
         }
 
         const key = `getInsightDetails('${params.insightSetId}', '${params.insightName}')`;

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -21,10 +21,11 @@ import {NetworkProject} from './NetworkProject.js';
 import type {ResourceMapping} from './ResourceMapping.js';
 import {type ResourceScriptFile, ResourceScriptMapping} from './ResourceScriptMapping.js';
 import {
+  isErrorLike,
   type SymbolizedError,
   SymbolizedErrorObject,
   SymbolizedSyntaxError,
-  UnparsableError
+  UnparsableError,
 } from './SymbolizedError.js';
 
 export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
@@ -247,6 +248,9 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
       }
     } else if (remoteObject.type === 'string') {
       errorStack = remoteObject.description || '';
+      if (!isErrorLike(errorStack)) {
+        return null;
+      }
     } else {
       return null;
     }

package/front_end/models/bindings/SymbolizedError.ts

@@ -11,6 +11,10 @@ import type * as Workspace from '../workspace/workspace.js';
 import type {DebuggerWorkspaceBinding} from './DebuggerWorkspaceBinding.js';
 import {type LiveLocation, LiveLocationPool} from './LiveLocation.js';
 
+export function isErrorLike(stack: string): boolean {
+  return /\n\s*at\s/.test(stack) || stack.startsWith('SyntaxError:');
+}
+
 export type SymbolizedError = SymbolizedErrorObject|SymbolizedSyntaxError|UnparsableError;
 
 export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
@@ -21,6 +25,19 @@ export class UnparsableError extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     super();
     this.errorStack = errorStack;
     this.cause = cause;
+
+    this.cause?.addEventListener(Events.UPDATED, this.#fireUpdated, this);
+  }
+
+  dispose(): void {
+    this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
+    if (this.cause instanceof SymbolizedErrorObject || this.cause instanceof UnparsableError) {
+      this.cause.dispose();
+    }
+  }
+
+  #fireUpdated(): void {
+    this.dispatchEventToListeners(Events.UPDATED);
   }
 }
 
@@ -42,7 +59,7 @@ export class SymbolizedErrorObject extends Common.ObjectWrapper.ObjectWrapper<Ev
   dispose(): void {
     this.stackTrace.removeEventListener(StackTrace.StackTrace.Events.UPDATED, this.#fireUpdated, this);
     this.cause?.removeEventListener(Events.UPDATED, this.#fireUpdated, this);
-    if (this.cause instanceof SymbolizedErrorObject) {
+    if (this.cause instanceof SymbolizedErrorObject || this.cause instanceof UnparsableError) {
       this.cause.dispose();
     }
   }

package/front_end/models/issues_manager/GenericIssue.ts

@@ -193,6 +193,31 @@ export const genericNavigationEntryMarkedSkippable = {
   }],
 };
 
+export const genericFormModelContextMissingToolName = {
+  file: 'genericFormModelContextMissingToolName.md',
+  links: [],
+};
+
+export const genericFormModelContextMissingToolDescription = {
+  file: 'genericFormModelContextMissingToolDescription.md',
+  links: [],
+};
+
+export const genericFormModelContextParameterMissingTitleAndDescription = {
+  file: 'genericFormModelContextParameterMissingTitleAndDescription.md',
+  links: [],
+};
+
+export const genericFormModelContextRequiredParameterMissingName = {
+  file: 'genericFormModelContextRequiredParameterMissingName.md',
+  links: [],
+};
+
+export const genericFormModelContextParameterMissingName = {
+  file: 'genericFormModelContextParameterMissingName.md',
+  links: [],
+};
+
 const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMarkdownIssueDescription>([
   [Protocol.Audits.GenericIssueErrorType.FormLabelForNameError, genericFormLabelForNameError],
   [Protocol.Audits.GenericIssueErrorType.FormInputWithNoLabelError, genericFormInputWithNoLabelError],
@@ -233,6 +258,26 @@ const issueDescriptions = new Map<Protocol.Audits.GenericIssueErrorType, LazyMar
     Protocol.Audits.GenericIssueErrorType.NavigationEntryMarkedSkippable,
     genericNavigationEntryMarkedSkippable,
   ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolName,
+    genericFormModelContextMissingToolName,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolDescription,
+    genericFormModelContextMissingToolDescription,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingTitleAndDescription,
+    genericFormModelContextParameterMissingTitleAndDescription,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextRequiredParameterMissingName,
+    genericFormModelContextRequiredParameterMissingName,
+  ],
+  [
+    Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingName,
+    genericFormModelContextParameterMissingName,
+  ],
 ]);
 
 const issueTypes = new Map<Protocol.Audits.GenericIssueErrorType, IssueKind>([
@@ -249,5 +294,9 @@ const issueTypes = new Map<Protocol.Audits.GenericIssueErrorType, IssueKind>([
   [Protocol.Audits.GenericIssueErrorType.FormLabelForMatchesNonExistingIdError, IssueKind.PAGE_ERROR],
   [Protocol.Audits.GenericIssueErrorType.FormLabelHasNeitherForNorNestedInputError, IssueKind.IMPROVEMENT],
   [Protocol.Audits.GenericIssueErrorType.FormInputHasWrongButWellIntendedAutocompleteValueError, IssueKind.IMPROVEMENT],
-
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolName, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextMissingToolDescription, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingTitleAndDescription, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextRequiredParameterMissingName, IssueKind.PAGE_ERROR],
+  [Protocol.Audits.GenericIssueErrorType.FormModelContextParameterMissingName, IssueKind.PAGE_ERROR],
 ]);

package/front_end/models/issues_manager/descriptions/genericFormModelContextMissingToolDescription.md

@@ -0,0 +1,5 @@
+# Missing tool description for a WebMCP declarative tool definition
+
+This form is intended to be used as a WebMCP declarative tool definition, but it lacks a description explaining what the tool does. Descriptions are critical for AI models to decide when to use a given tool.
+
+To fix this issue, provide a tool description via the `tooldescription` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextMissingToolName.md

@@ -0,0 +1,5 @@
+# Missing tool name for a WebMCP declarative tool definition
+
+This form is intended to be used as a WebMCP declarative tool definition, but it does not specify a name. A tool name is required for an AI model to correctly identify and invoke the tool.
+
+To fix this issue, provide a tool name via the `toolname` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextParameterMissingName.md

@@ -0,0 +1,5 @@
+# Parameter missing name for a WebMCP declarative tool definition
+
+An input element within this form lacks a `name` attribute. Without a name, the AI model cannot format the parameter payload correctly when invoking the tool.
+
+To fix this issue, ensure form parameters have a `name` attribute.

package/front_end/models/issues_manager/descriptions/genericFormModelContextParameterMissingTitleAndDescription.md

@@ -0,0 +1,5 @@
+# Missing parameter title and description for a WebMCP declarative tool definition
+
+A parameter within this form (such as an `<input>` field) is missing both a title and a description. An AI model needs this metadata to understand what information should be passed to this parameter when invoking the tool.
+
+To fix this issue, add a title and description to the form parameter.

package/front_end/models/issues_manager/descriptions/genericFormModelContextRequiredParameterMissingName.md

@@ -0,0 +1,5 @@
+# Required parameter missing name for a WebMCP declarative tool definition
+
+A required input element within this form lacks a `name` attribute. Without a name, the AI model cannot format the parameter payload correctly when invoking the tool.
+
+To fix this issue, ensure all required form parameters have a `name` attribute.

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

@@ -201,6 +201,10 @@ 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 render-blocking requests widget.
+   */
+  revealRenderBlockingBreakdown: 'Reveal render-blocking requests',
   /**
    * @description Accessible label for the reveal button in the LCP element widget.
    */
@@ -221,6 +225,10 @@ const UIStringsNotTranslate = {
    * @description Title for the LCP breakdown widget.
    */
   lcpBreakdown: 'LCP breakdown',
+  /**
+   * @description Title for the render-blocking requests widget.
+   */
+  renderBlockingBreakdown: 'Render-blocking requests',
   /**
    * @description Title for the LCP element widget.
    */
@@ -916,7 +924,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
 
 async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<WidgetMakerResponse|null> {
   switch (widgetData.data.insight) {
-    case 'lcp': {
+    case Trace.Insights.Types.InsightKeys.LCP_BREAKDOWN: {
       const insight = widgetData.data.insightData;
       if (!insight || !Trace.Insights.Models.LCPBreakdown.isLCPBreakdownInsight(insight)) {
         return null;
@@ -938,6 +946,28 @@ async function makePerfInsightWidget(widgetData: PerfInsightAiWidget): Promise<W
         jslogContext: 'lcp-breakdown',
       };
     }
+    case Trace.Insights.Types.InsightKeys.RENDER_BLOCKING: {
+      const insight = widgetData.data.insightData;
+      if (!insight || !Trace.Insights.Models.RenderBlocking.isRenderBlockingInsight(insight)) {
+        return null;
+      }
+      // clang-format off
+      const renderedWidget = html`<devtools-widget
+        class="render-blocking-widget"
+        ${widget(TimelineInsights.RenderBlocking.RenderBlocking, {
+          model: insight,
+          minimal: true,
+        })}></devtools-widget>`;
+      // clang-format on
+
+      return {
+        renderedWidget,
+        revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
+        accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealRenderBlockingBreakdown),
+        title: lockedString(UIStringsNotTranslate.renderBlockingBreakdown),
+        jslogContext: 'render-blocking-widget',
+      };
+    }
     default:
       return 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/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>;

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: Internal
 Version: N/A
-Revision: 3e3e498dbe4d68709d4f6b2e2a834a7a85a17a83
+Revision: b1e55a8961dbd7de8febb16a1bd10f31de63c4c6
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -137,9 +137,7 @@ export class TextEditor extends HTMLElement {
   }
 
   override focus(): void {
-    if (this.#activeEditor) {
-      this.#activeEditor.focus();
-    }
+    this.editor.focus();
   }
 
   #ensureSettingListeners(): void {

package/front_end/ui/legacy/Treeoutline.ts

@@ -1752,7 +1752,8 @@ function removeNode(node: TreeElement, preserveParentExpandable = false): void {
  * @attribute hide-overflow
  */
 export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
-  static readonly observedAttributes = ['navigation-variant', 'hide-overflow', 'dense'];
+  static readonly observedAttributes =
+      ['navigation-variant', 'hide-overflow', 'dense', 'show-selection-on-keyboard-focus'];
   readonly #treeOutline = new TreeOutlineInShadow(undefined, this);
 
   constructor() {
@@ -1918,6 +1919,9 @@ export class TreeViewElement extends HTMLElementWithLightDOMTemplate {
       case 'dense':
         this.#treeOutline.setDense(booleanValueIsTrue);
         break;
+      case 'show-selection-on-keyboard-focus':
+        this.#treeOutline.setShowSelectionOnKeyboardFocus(booleanValueIsTrue);
+        break;
     }
   }
 }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -3235,6 +3235,7 @@ export const knownContextValues = new Set([
   'removed-size',
   'rename',
   'render-blocking',
+  'render-blocking-widget',
   'rendering',
   'rendering-emulations',
   'rendering.toggle-prefers-color-scheme',
@@ -4382,6 +4383,7 @@ export const knownContextValues = new Set([
   'webgl-warning-fired',
   'webmcp.call-inputs',
   'webmcp.call-outputs',
+  'webmcp.cancel-call',
   'webmcp.canceled',
   'webmcp.completed',
   'webmcp.copy-tool-description',

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1621064"
+  "version": "1.0.1621678"
 }