chrome-devtools-frontend 1.0.1613625 → 1.0.1615539

package/front_end/panels/application/WebMCPView.ts

@@ -8,7 +8,10 @@ import '../../ui/components/node_text/node_text.js';
 import '../../ui/legacy/components/data_grid/data_grid.js';
 import '../../ui/legacy/legacy.js';
 
+import type {JSONSchema7, JSONSchema7Definition} from 'json-schema';
+
 import * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -30,6 +33,7 @@ import {
   type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as ProtocolMonitor from '../protocol_monitor/protocol_monitor.js';
 
 import webMCPViewStyles from './webMCPView.css.js';
 
@@ -130,7 +134,7 @@ const UIStrings = {
   /**
    * @description Text for the status of a tool call that succeeded
    */
-  success: 'Success',
+  completed: 'Completed',
   /**
    * @description Text for the status of a tool call that has failed
    */
@@ -155,6 +159,14 @@ const UIStrings = {
    * @example {1} PH1
    */
   inProgressCount: '{PH1} In Progress',
+  /**
+   * @description Context menu action to copy the name of a tool
+   */
+  copyName: 'Copy name',
+  /**
+   * @description Context menu action to copy the description of a tool
+   */
+  copyDescription: 'Copy description',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -167,7 +179,7 @@ export interface FilterState {
     declarative?: boolean,
   };
   statusTypes?: {
-    success?: boolean,
+    completed?: boolean,
     error?: boolean,
     pending?: boolean,
   };
@@ -202,8 +214,8 @@ export function filterToolCalls(
   const statusTypes = filterState.statusTypes;
   if (statusTypes) {
     filtered = filtered.filter(call => {
-      const {success, error, pending} = statusTypes;
-      if (success && call.result?.status === Protocol.WebMCP.InvocationStatus.Success) {
+      const {completed, error, pending} = statusTypes;
+      if (completed && call.result?.status === Protocol.WebMCP.InvocationStatus.Completed) {
         return true;
       }
       if (error && call.result?.status === Protocol.WebMCP.InvocationStatus.Error) {
@@ -243,33 +255,33 @@ export function filterToolCalls(
 }
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 function calculateToolStats(calls: WebMCP.WebMCPModel.Call[]):
-    {total: number, success: number, failed: number, canceled: number, inProgress: number} {
-  let total = 0, success = 0, failed = 0, canceled = 0, inProgress = 0;
+    {total: number, completed: number, failed: number, canceled: number, inProgress: number} {
+  let total = 0, completed = 0, failed = 0, canceled = 0, inProgress = 0;
   for (const call of calls) {
     total++;
     if (call.result?.status === Protocol.WebMCP.InvocationStatus.Error) {
       failed++;
     } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Canceled) {
       canceled++;
-    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Success) {
-      success++;
+    } else if (call.result?.status === Protocol.WebMCP.InvocationStatus.Completed) {
+      completed++;
     } else if (call.result === undefined) {
       inProgress++;
     }
   }
-  return {total, success, failed, canceled, inProgress};
+  return {total, completed, failed, canceled, inProgress};
 }
 
 function getIconGroupsFromStats(toolStats: ReturnType<typeof calculateToolStats>):
     IconButton.IconButton.IconWithTextData[] {
   const groups = [];
-  if (toolStats.success > 0) {
+  if (toolStats.completed > 0) {
     groups.push({
       iconName: 'check-circle',
       iconColor: 'var(--sys-color-green)',
       iconWidth: '16px',
       iconHeight: '16px',
-      text: String(toolStats.success),
+      text: String(toolStats.completed),
     });
   }
   if (toolStats.failed > 0) {
@@ -341,12 +353,22 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         return i18nString(UIStrings.error);
       case Protocol.WebMCP.InvocationStatus.Canceled:
         return i18nString(UIStrings.canceled);
-      case Protocol.WebMCP.InvocationStatus.Success:
-        return i18nString(UIStrings.success);
+      case Protocol.WebMCP.InvocationStatus.Completed:
+        return i18nString(UIStrings.completed);
       default:
         return i18nString(UIStrings.inProgress);
     }
   };
+  const onToolContextMenu = (event: Event, tool: WebMCP.WebMCPModel.Tool): void => {
+    const contextMenu = new UI.ContextMenu.ContextMenu(event);
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyName), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(tool.name);
+    }, {jslogContext: 'webmcp.copy-tool-name'});
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.copyDescription), () => {
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(tool.description);
+    }, {jslogContext: 'webmcp.copy-tool-description'});
+    void contextMenu.show();
+  };
   // clang-format off
   render(html`
     <style>${webMCPViewStyles}</style>
@@ -488,7 +510,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 const groups = getIconGroupsFromStats(toolStats);
                 return html`
                     <div class=${Directives.classMap({'tool-item': true, selected: tool === input.selectedTool})}
-                         @click=${() => input.onToolSelect(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>
                       ${groups.length > 0 ? html`<icon-button .data=${
@@ -600,19 +623,19 @@ export class WebMCPView extends UI.Widget.VBox {
   }
 
   #showStatusTypesContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    const toggle = (key: 'success'|'error'|'pending'): void => {
+    const toggle = (key: 'completed'|'error'|'pending'): void => {
       const current = this.#filterState.statusTypes ?? {};
       const next = {...current, [key]: !current[key]};
       let statusTypesToPass: FilterState['statusTypes'] = next;
-      if (!next.success && !next.error && !next.pending) {
+      if (!next.completed && !next.error && !next.pending) {
         statusTypesToPass = undefined;
       }
       this.#handleFilterChange({...this.#filterState, statusTypes: statusTypesToPass});
     };
 
     contextMenu.defaultSection().appendCheckboxItem(
-        i18nString(UIStrings.success), () => toggle('success'),
-        {checked: this.#filterState.statusTypes?.['success'] ?? false, jslogContext: 'webmcp.success'});
+        i18nString(UIStrings.completed), () => toggle('completed'),
+        {checked: this.#filterState.statusTypes?.['completed'] ?? false, jslogContext: 'webmcp.completed'});
     contextMenu.defaultSection().appendCheckboxItem(
         i18nString(UIStrings.error), () => toggle('error'),
         {checked: this.#filterState.statusTypes?.['error'] ?? false, jslogContext: 'webmcp.error'});
@@ -990,3 +1013,232 @@ export class ToolDetailsWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 }
+
+export interface ParsedToolSchema {
+  parameters: ProtocolMonitor.JSONEditor.Parameter[];
+  typesByName: Map<string, ProtocolMonitor.JSONEditor.Parameter[]>;
+  enumsByName: Map<string, Record<string, string>>;
+}
+
+const parsedSchemaCache = new WeakMap<object, ParsedToolSchema>();
+
+export function parseToolSchema(schema: JSONSchema7): ParsedToolSchema {
+  if (typeof schema === 'object' && schema !== null) {
+    const cached = parsedSchemaCache.get(schema);
+    if (cached) {
+      return cached;
+    }
+  }
+
+  const typesByName = new Map<string, ProtocolMonitor.JSONEditor.Parameter[]>();
+  const enumsByName = new Map<string, Record<string, string>>();
+  const simpleTypesByName = new Map<string, ProtocolMonitor.JSONEditor.ParameterType>();
+  let typeCount = 0;
+
+  function createEnumRecord(values: unknown[]): Record<string, string> {
+    const enumRecord: Record<string, string> = {};
+    for (const val of values) {
+      enumRecord[String(val)] = String(val);
+    }
+    return enumRecord;
+  }
+
+  function preScanDefinition(name: string, def: JSONSchema7Definition): void {
+    if (typeof def === 'boolean') {
+      return;
+    }
+    if (def.type === 'string' && def.enum) {
+      enumsByName.set(name, createEnumRecord(def.enum));
+    } else if (def.type && typeof def.type === 'string' && def.type !== 'object' && def.type !== 'array') {
+      let paramType = ProtocolMonitor.JSONEditor.ParameterType.STRING;
+      switch (def.type) {
+        case 'number':
+        case 'integer':
+          paramType = ProtocolMonitor.JSONEditor.ParameterType.NUMBER;
+          break;
+        case 'boolean':
+          paramType = ProtocolMonitor.JSONEditor.ParameterType.BOOLEAN;
+          break;
+      }
+      simpleTypesByName.set(name, paramType);
+    }
+  }
+
+  function parseDefinition(name: string, def: JSONSchema7Definition): void {
+    if (typeof def === 'boolean') {
+      return;
+    }
+    if (def.type === 'object' && def.properties) {
+      const nestedParams: ProtocolMonitor.JSONEditor.Parameter[] = [];
+      for (const [key, value] of Object.entries(def.properties)) {
+        const isOpt = !(def.required || []).includes(key);
+        nestedParams.push(parseProperty(key, value, isOpt));
+      }
+      typesByName.set(name, nestedParams);
+    }
+  }
+
+  // First pass: populate enums and simple types
+  if (schema.definitions) {
+    for (const [name, def] of Object.entries(schema.definitions)) {
+      preScanDefinition(name, def);
+    }
+  }
+  if (schema.$defs) {
+    for (const [name, def] of Object.entries(schema.$defs)) {
+      preScanDefinition(name, def);
+    }
+  }
+
+  // Second pass: parse objects
+  if (schema.definitions) {
+    for (const [name, def] of Object.entries(schema.definitions)) {
+      parseDefinition(name, def);
+    }
+  }
+  if (schema.$defs) {
+    for (const [name, def] of Object.entries(schema.$defs)) {
+      parseDefinition(name, def);
+    }
+  }
+
+  function parseProperty(
+      name: string, propDef: JSONSchema7Definition, optional: boolean): ProtocolMonitor.JSONEditor.Parameter {
+    if (typeof propDef === 'boolean') {
+      return {
+        name,
+        optional,
+        description: '',
+        type: ProtocolMonitor.JSONEditor.ParameterType.STRING,
+        isCorrectType: true,
+      };
+    }
+    const prop = propDef;
+    if (prop.$ref) {
+      const typeRef = prop.$ref.split('/').pop() || '';
+      let paramType = ProtocolMonitor.JSONEditor.ParameterType.OBJECT;
+      if (enumsByName.has(typeRef)) {
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.STRING;
+      } else {
+        const simpleType = simpleTypesByName.get(typeRef);
+        if (simpleType !== undefined) {
+          paramType = simpleType;
+        }
+      }
+      return {
+        name,
+        optional,
+        description: prop.description || '',
+        type: paramType,
+        typeRef,
+        isCorrectType: true,
+      };
+    }
+
+    const typeStr = Array.isArray(prop.type) ? prop.type[0] : prop.type;
+    let type: string|undefined = typeStr === 'integer' ? 'number' : typeStr;
+    if (!typeStr) {
+      if (prop.properties) {
+        type = 'object';
+      } else if (prop.items) {
+        type = 'array';
+      } else {
+        type = 'unknown';
+      }
+    }
+    const description = prop.description || '';
+
+    let paramType = ProtocolMonitor.JSONEditor.ParameterType.UNKNOWN;
+    switch (type) {
+      case 'string':
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.STRING;
+        break;
+      case 'number':
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.NUMBER;
+        break;
+      case 'boolean':
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.BOOLEAN;
+        break;
+      case 'object':
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.OBJECT;
+        break;
+      case 'array':
+        paramType = ProtocolMonitor.JSONEditor.ParameterType.ARRAY;
+        break;
+    }
+
+    const base: ProtocolMonitor.JSONEditor.Parameter = {
+      name,
+      optional,
+      description,
+      type: paramType,
+      isCorrectType: true,
+    };
+
+    if (type === 'object') {
+      if (prop.properties) {
+        const typeRef = `Object_${++typeCount}`;
+        const nestedParams: ProtocolMonitor.JSONEditor.Parameter[] = [];
+        for (const [key, value] of Object.entries(prop.properties)) {
+          const isOpt = !(prop.required || []).includes(key);
+          nestedParams.push(parseProperty(key, value, isOpt));
+        }
+        typesByName.set(typeRef, nestedParams);
+        base.typeRef = typeRef;
+      } else {
+        base.isKeyEditable = true;
+      }
+    } else if (type === 'array') {
+      const items =
+          prop.items && !Array.isArray(prop.items) && typeof prop.items !== 'boolean' ? prop.items : undefined;
+      if (items) {
+        const itemTypeStr = Array.isArray(items.type) ? items.type[0] : items.type;
+        if (items.$ref) {
+          base.typeRef = items.$ref.split('/').pop() || '';
+        } else if (itemTypeStr === 'object' && items.properties) {
+          const typeRef = `Object_${++typeCount}`;
+          const nestedParams: ProtocolMonitor.JSONEditor.Parameter[] = [];
+          for (const [key, value] of Object.entries(items.properties)) {
+            const isOpt = !(items.required || []).includes(key);
+            nestedParams.push(parseProperty(key, value, isOpt));
+          }
+          typesByName.set(typeRef, nestedParams);
+          base.typeRef = typeRef;
+        } else if (itemTypeStr) {
+          const itemType = itemTypeStr === 'integer' ? 'number' : itemTypeStr;
+          if (itemType === 'string' && items.enum) {
+            const typeRef = `Enum_${++typeCount}`;
+            enumsByName.set(typeRef, createEnumRecord(items.enum));
+            base.typeRef = typeRef;
+          } else {
+            base.typeRef = itemType as string;
+          }
+        } else {
+          base.typeRef = 'string';
+        }
+      } else {
+        base.typeRef = 'string';
+      }
+    } else if (type === 'string' && prop.enum) {
+      const typeRef = `Enum_${++typeCount}`;
+      enumsByName.set(typeRef, createEnumRecord(prop.enum));
+      base.typeRef = typeRef;
+    }
+
+    return base;
+  }
+
+  const parameters: ProtocolMonitor.JSONEditor.Parameter[] = [];
+  if ((schema.type === 'object' || !schema.type) && schema.properties) {
+    for (const [key, value] of Object.entries(schema.properties)) {
+      const isOpt = !(schema.required || []).includes(key);
+      parameters.push(parseProperty(key, value, isOpt));
+    }
+  }
+
+  const result = {parameters, typesByName, enumsByName};
+  if (typeof schema === 'object' && schema !== null) {
+    parsedSchemaCache.set(schema, result);
+  }
+  return result;
+}

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -150,7 +150,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     </div>
     ${renderProtocolTest(input.protocolHandler, input.queryInputState, input.protocolSelectHandler,
                          input.queryInputChangeHandler, input.testProtocolClickHandler)}
-  `, target);
+  `, target, {container: {classes: ['vbox']}});
   // clang-format on
 };
 
@@ -172,7 +172,7 @@ export class ProtocolHandlersView extends UI.Widget.Widget {
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {useShadowDom: false, classes: ['vbox']});
+    super(element, {useShadowDom: false});
     this.#view = view;
   }
 

package/front_end/panels/application/webMCPView.css

@@ -77,7 +77,7 @@
         height: 100%;
         display: flex;
         flex-direction: column;
-        overflow: auto;
+        overflow: hidden;
     }
 
     .tool-details-grid {
@@ -86,6 +86,7 @@
       gap: 0 var(--sys-size-16);
       padding: calc(0.5*var(--sys-size-6)) var(--sys-size-8);
       align-items: flex-start;
+      overflow-y: auto;
 
       .label {
         color: var(--sys-color-on-surface-subtle);
@@ -94,6 +95,8 @@
       }
 
       .value {
+        user-select: text;
+
         &.source-code {
           color: var(--sys-color-token-attribute);
         }

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -166,8 +166,15 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View =
                     role="link"
                     jslog=${VisualLogging.link('open-ai-settings').track({
                       click: true,
+                      keydown: 'Enter',
                     })}
                     @click=${input.onManageInSettingsTooltipClick}
+                    @keydown=${(e: KeyboardEvent) => {
+                      if (e.key === 'Enter') {
+                        e.consume(true);
+                        input.onManageInSettingsTooltipClick();
+                      }
+                    }}
                 >${lockedString(UIStringsNotTranslate.manageInSettings)}</span></div></devtools-tooltip>
           </div>
         `, target);

package/front_end/panels/console/ConsoleContextSelector.ts

@@ -303,7 +303,7 @@ interface ViewInput {
 type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
 
 const DEFAULT_VIEW: View = (input, _output, target): void => {
-  if (!input.title || !input.subtitle) {
+  if (!input.title) {
     render(nothing, target);
     return;
   }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1592,7 +1592,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const label = document.createElement('div');
     label.classList.add('button-label');
     const text = document.createElement('div');
-    text.innerText = this.getExplainLabel();
+    // We use a data attribute and a CSS pseudo-element for the button label
+    // to prevent the text from being picked up by the console's custom
+    // copy-to-clipboard traversal, which only collects actual text nodes.
+    text.setAttribute('data-text', this.getExplainLabel());
     label.append(text);
     button.append(label);
     button.classList.add('hover-button');
@@ -1615,7 +1618,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const label = document.createElement('div');
     label.classList.add('button-label');
     const text = document.createElement('div');
-    text.innerText = 'Debug with breakpoint AI';
+    // We use a data attribute and a CSS pseudo-element for the button label
+    // to prevent the text from being picked up by the console's custom
+    // copy-to-clipboard traversal, which only collects actual text nodes.
+    text.setAttribute('data-text', 'Debug with breakpoint AI');
     label.append(text);
     button.append(label);
     button.classList.add('hover-button');

package/front_end/panels/console/consoleView.css

@@ -615,6 +615,10 @@
   & div {
     display: inline-block;
     vertical-align: -1px;
+
+    &::after {
+      content: attr(data-text);
+    }
   }
 }
 

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -8,7 +8,6 @@ import '../../ui/kit/kit.js';
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../../models/geometry/geometry.js';
@@ -483,7 +482,7 @@ function renderContrastIssue(key: string, issues: ContrastIssue[]): TemplateResu
   const color = (minContrastIssue.textColor.asString(Common.Color.Format.HEXA));
   const backgroundColor = (minContrastIssue.backgroundColor.asString(Common.Color.Format.HEXA));
 
-  const showAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
+  const showAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
 
   const title = i18nString(UIStrings.textColorSOverSBackgroundResults, {
     PH1: color,
@@ -1041,7 +1040,7 @@ function renderContrastRatio(data: PopulateNodesEventNodeTypes): TemplateResult
   if (!('contrastRatio' in data)) {
     throw new Error('Contrast ratio entry is missing a contrast ratio.');
   }
-  const showAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
+  const showAPCA = Common.Settings.Settings.instance().moduleSetting('apca').get();
   const contrastRatio = Platform.NumberUtilities.floor(data.contrastRatio, 2);
   const contrastRatioString = showAPCA ? contrastRatio + '%' : contrastRatio;
   const border = getBorderString(data.backgroundColor);

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
@@ -267,7 +266,7 @@ export class CSSOverviewModel extends SDK.SDKModel.SDKModel<void> {
           const formattedTextColor = formatColor(blendedTextColor);
           const formattedBackgroundColor = formatColor(blendedBackgroundColor.asLegacyColor());
           const key = `${formattedTextColor}_${formattedBackgroundColor}`;
-          if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
+          if (Common.Settings.Settings.instance().moduleSetting('apca').get()) {
             const contrastRatio = contrastInfo.contrastRatioAPCA();
             const threshold = contrastInfo.contrastRatioAPCAThreshold();
             const passes = contrastRatio && threshold ? Math.abs(contrastRatio) >= threshold : false;

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -291,7 +291,9 @@ interface AffectedCountViewInput {
 }
 type AffectedCountView = (input: AffectedCountViewInput, output: object, target: HTMLElement) => void;
 export const AFFECTED_COUNT_DEFAULT_VIEW: AffectedCountView = (input, output, target) => {
-  render(html`${i18nString(UIStrings.dAffected, {PH1: input.count})}`, target);
+  render(
+      html`${i18nString(UIStrings.dAffected, {PH1: input.count})}`, target,
+      {container: {classes: ['blocked-url-count']}});
 };
 
 function matchesUrl(conditions: SDK.NetworkManager.RequestCondition, url: string): boolean {
@@ -304,7 +306,7 @@ export class AffectedCountWidget extends UI.Widget.Widget {
   #lookUpRequestCount?: (condition: SDK.NetworkManager.RequestCondition) => number;
 
   constructor(target?: HTMLElement, view = AFFECTED_COUNT_DEFAULT_VIEW) {
-    super(target, {classes: ['blocked-url-count']});
+    super(target);
     this.#view = view;
   }
 

package/front_end/panels/network/RequestPayloadView.ts

@@ -289,8 +289,13 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         </ul>
       </li>
      </ul>
-     `}></devtools-tree>
-   `, target);
+     `}></devtools-tree>`, target, {
+      container: {
+        classes: ['request-payload-view'],
+        attributes: {
+          jslog: `${VisualLogging.pane('payload').track({resize: true})}`,
+        },
+      }});
   // clang-format on
 };
 
@@ -305,7 +310,7 @@ export class RequestPayloadView extends UI.Widget.VBox {
   #viewQueryParamSource = false;
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('payload').track({resize: true})}`, classes: ['request-payload-view']});
+    super();
     this.#view = view;
   }
 

package/front_end/panels/network/RequestTimingView.ts

@@ -407,9 +407,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     }
   }
 
-  render(
-      // clang-format off
-      html`<style>${networkingTimingTableStyles}</style>
+  // clang-format off
+  render(html`
+    <style>${networkingTimingTableStyles}</style>
     <table
       class=${classes}
       jslog=${VisualLogging.pane('timing').track({
@@ -532,9 +532,8 @@ ${uiI18n.getFormatLocalizedStringTemplate(str_, UIStrings.duringDevelopmentYouCa
                                                   html`<devtools-link href="https://web.dev/custom-metrics/#server-timing-api" .jslogContext=${'server-timing-api'}>${i18nString(UIStrings.theServerTimingApi)}</devtools-link>`})}
            </td>
          </tr>` : nothing}
-   </table>`,
-      // clang-format on
-      target);
+      </table>`, target, {container: {classes: ['resource-timing-view']}});
+  // clang-format on
 };
 
 export class RequestTimingView extends UI.Widget.VBox {
@@ -543,7 +542,7 @@ export class RequestTimingView extends UI.Widget.VBox {
   #lastMinimumBoundary = -1;
   readonly #view: View;
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
-    super(target, {classes: ['resource-timing-view']});
+    super(target);
     this.#view = view;
   }
 

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -626,8 +626,9 @@ interface ControlPaneInput {
 type ControlPaneView = (input: ControlPaneInput, output: object, target: HTMLElement) => void;
 
 const CONTROL_PANE_DEFAULT_VIEW: ControlPaneView = (input, _output, target) => {
-  render(
-      input.chartsInfo.map(chartInfo => {
+  // clang-format off
+  render(html`
+    ${input.chartsInfo.map(chartInfo => {
         const chartName = chartInfo.metrics[0].name;
         const active = input.enabledCharts.has(chartName);
         const value = input.metricValues.get(chartName) || 0;
@@ -637,8 +638,9 @@ const CONTROL_PANE_DEFAULT_VIEW: ControlPaneView = (input, _output, target) => {
             value,
             (e: Event) => input.onCheckboxChange(chartName, e),
         );
-      }),
-      target);
+      })}
+    `, target, {container: {classes: ['perfmon-control-pane']}});
+  // clang-format on
 };
 
 export class ControlPane extends UI.Widget.VBox {
@@ -651,7 +653,7 @@ export class ControlPane extends UI.Widget.VBox {
   readonly #view: ControlPaneView;
 
   constructor(element: HTMLElement, view = CONTROL_PANE_DEFAULT_VIEW) {
-    super(element, {useShadowDom: false, classes: ['perfmon-control-pane']});
+    super(element, {useShadowDom: false});
     this.#view = view;
 
     this.#enabledChartsSetting = Common.Settings.Settings.instance().createSetting(

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: a287ca9049cc3727d680078c1d9275b32f721c2d
+Revision: 7e9e4ee5d284534f90cf424bf02eb9d65ed151ec
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE