chrome-devtools-frontend 1.0.1660788 → 1.0.1661063

package/front_end/panels/application/WebMCPView.ts

@@ -252,8 +252,8 @@ export interface ViewInput {
   onPaste: () => void;
 }
 
-export function filterToolCalls(
-    toolCalls: WebMCP.WebMCPModel.Call[], filterState: FilterState): WebMCP.WebMCPModel.Call[] {
+export function filterToolCalls(toolCalls: WebMCP.WebMCPModel.Call[],
+                                filterState: FilterState): WebMCP.WebMCPModel.Call[] {
   let filtered = [...toolCalls];
 
   const statusTypes = filterState.statusTypes;
@@ -734,35 +734,32 @@ export class WebMCPView extends UI.Widget.VBox {
 
   #filterButtons: FilterMenuButtons;
 
-  static createFilterButtons(
-      onToolTypesClick: (contextMenu: UI.ContextMenu.ContextMenu) => void,
-      onStatusTypesClick: (contextMenu: UI.ContextMenu.ContextMenu) => void): FilterMenuButtons {
-    const createButton =
-        (label: string, onContextMenu: (contextMenu: UI.ContextMenu.ContextMenu) => void, jsLogContext: string):
-            FilterMenuButton => {
-              const button = new UI.Toolbar.ToolbarMenuButton(
-                  onContextMenu,
-                  /* isIconDropdown=*/ false, /* useSoftMenu=*/ true, jsLogContext,
-                  /* iconName=*/ undefined,
-                  /* keepOpen=*/ true);
-              button.setText(label);
-
-              /* eslint-disable-next-line @devtools/no-imperative-dom-api */
-              const adorner = new Adorners.Adorner.Adorner();
-              adorner.name = 'countWrapper';
-              const countElement = document.createElement('span');
-              adorner.append(countElement);
-              adorner.classList.add('active-filters-count');
-              adorner.classList.add('hidden');
-              button.setAdorner(adorner);
-
-              const setCount = (count: number): void => {
-                countElement.textContent = `${count}`;
-                count === 0 ? adorner.hide() : adorner.show();
-              };
-
-              return {button, setCount};
-            };
+  static createFilterButtons(onToolTypesClick: (contextMenu: UI.ContextMenu.ContextMenu) => void,
+                             onStatusTypesClick: (contextMenu: UI.ContextMenu.ContextMenu) => void): FilterMenuButtons {
+    const createButton = (label: string, onContextMenu: (contextMenu: UI.ContextMenu.ContextMenu) => void,
+                          jsLogContext: string): FilterMenuButton => {
+      const button = new UI.Toolbar.ToolbarMenuButton(onContextMenu,
+                                                      /* isIconDropdown=*/ false, /* useSoftMenu=*/ true, jsLogContext,
+                                                      /* iconName=*/ undefined,
+                                                      /* keepOpen=*/ true);
+      button.setText(label);
+
+      /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+      const adorner = new Adorners.Adorner.Adorner();
+      adorner.name = 'countWrapper';
+      const countElement = document.createElement('span');
+      adorner.append(countElement);
+      adorner.classList.add('active-filters-count');
+      adorner.classList.add('hidden');
+      button.setAdorner(adorner);
+
+      const setCount = (count: number): void => {
+        countElement.textContent = `${count}`;
+        count === 0 ? adorner.hide() : adorner.show();
+      };
+
+      return {button, setCount};
+    };
 
     return {
       toolTypes: createButton(i18nString(UIStrings.toolTypes), onToolTypesClick, 'webmcp.tool-types'),
@@ -968,20 +965,18 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
 
   const createPayload = (parsedInput: unknown): TemplateResult => {
     const object = new SDK.RemoteObject.LocalJSONObject(parsedInput);
-    const section =
-        new ObjectUI.ObjectPropertiesSection.RootElement(new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
-          readOnly: true,
-          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
-        }));
-    section.title = document.createTextNode(object.description);
-    section.listItemElement.classList.add('source-code', 'object-properties-section');
-    section.childrenListElement.classList.add('source-code', 'object-properties-section');
-    section.expand();
+    const objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(object, {
+      readOnly: true,
+      propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+    });
     return html`<devtools-tree .template=${html`
           <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
           <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>
           <ul role="tree">
-            <devtools-tree-wrapper .treeElement=${section}></devtools-tree-wrapper>
+            <li role=treeitem class="object-properties-section-root-element object-properties-section source-code" open>
+              ${object.description}
+              ${object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
+            </li>
           </ul>
         `}></devtools-tree>`;
   };
@@ -1351,8 +1346,8 @@ export function parseToolSchema(schema: JSONSchema7): ParsedToolSchema {
     }
   }
 
-  function parseProperty(
-      name: string, propDef: JSONSchema7Definition, optional: boolean): ProtocolMonitor.JSONEditor.Parameter {
+  function parseProperty(name: string, propDef: JSONSchema7Definition,
+                         optional: boolean): ProtocolMonitor.JSONEditor.Parameter {
     if (typeof propDef === 'boolean') {
       return {
         name,

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

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/legacy/components/data_grid/data_grid.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
@@ -14,6 +16,10 @@ import adsViewStyles from './adsView.css.js';
 const {html} = Lit;
 
 const UIStrings = {
+  /**
+   * @description Title for the metrics table.
+   */
+  metrics: 'Metrics',
   /**
    * @description Title for a metric showing the percentage of the viewport covered by ads.
    */
@@ -35,75 +41,135 @@ const UIStrings = {
    * @example {5.00%} PH1
    */
   average: '(Average: {PH1})',
+  /**
+   * @description Title for the ad iframes table.
+   * @example {3} PH1
+   */
+  adIframesTitle: 'Ad iframes (total {PH1})',
+  /**
+   * @description Text to display when a value is not available.
+   */
+  notAvailable: 'N/A',
+  /**
+   * @description Text to display when a frame has no name/id.
+   */
+  unnamed: '<unnamed>',
+  /**
+   * @description Title for the Element Id column in the ad iframes table.
+   */
+  elementId: 'Element ID',
+  /**
+   * @description Title for the Initial origin column in the ad iframes table.
+   */
+  initialOrigin: 'Initial origin',
+  /**
+   * @description Title for the CPU column in the ad iframes table.
+   */
+  cpu: 'CPU',
+  /**
+   * @description Title for the Network column in the ad iframes table.
+   */
+  network: 'Network',
+  /**
+   * @description Accessible name for the ad iframes table.
+   */
+  adIframes: 'Ad iframes',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/AdsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+/**
+ * @description Data for a single row in the ad iframes table.
+ */
+interface AdFrameNodeData {
+  elementId: string;
+  initialOrigin: string;
+  networkBytes: string;
+  cpuTime: string;
+}
+
 export interface ViewInput {
   metrics: Protocol.Ads.AdMetrics;
+  adFrames: AdFrameNodeData[];
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
 
+const formatMetric = (val: number|undefined, formatter: (val: number) => string): string => {
+  if (val === undefined || val === -1) {
+    return i18nString(UIStrings.notAvailable);
+  }
+  return formatter(val);
+};
+
+const formatCpu = (val: number|undefined): string => {
+  return formatMetric(val, (v: number): string => i18n.TimeUtilities.millisToString(v));
+};
+
+const formatNetwork = (val: number|undefined): string => {
+  return formatMetric(val, (v: number): string => i18n.ByteUtilities.bytesToString(v));
+};
+
 const DEFAULT_VIEW: View = (input, output, target) => {
   const metrics = input.metrics;
 
   const formatValue = (val: number, isPercentage: boolean): string => {
-    if (isPercentage) {
-      return new Intl
-          .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
-            style: 'percent',
-            maximumFractionDigits: 0,
-          })
-          .format(val / 100);
-    }
-    return new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale).format(val);
+    return formatMetric(val, (v: number): string => {
+      if (isPercentage) {
+        return new Intl
+            .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+              style: 'percent',
+              maximumFractionDigits: 0,
+            })
+            .format(v / 100);
+      }
+      return new Intl.NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale).format(v);
+    });
   };
 
-  const formatAverage = (val: number, isPercentage: boolean): string => {
-    if (isPercentage) {
+  const formatAverage = (val: number|undefined, isPercentage: boolean): string => {
+    return formatMetric(val, (v: number): string => {
+      if (isPercentage) {
+        return new Intl
+            .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
+              style: 'percent',
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            })
+            .format(v / 100);
+      }
       return new Intl
           .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
-            style: 'percent',
             minimumFractionDigits: 2,
             maximumFractionDigits: 2,
           })
-          .format(val / 100);
-    }
-    return new Intl
-        .NumberFormat(i18n.DevToolsLocale.DevToolsLocale.instance().locale, {
-          minimumFractionDigits: 2,
-          maximumFractionDigits: 2,
-        })
-        .format(val);
-  };
-
-  const formatCpu = (val: number): string => {
-    return i18n.TimeUtilities.millisToString(val);
-  };
-
-  const formatNetwork = (val: number): string => {
-    return i18n.ByteUtilities.bytesToString(val);
+          .format(v);
+    });
   };
 
   // clang-format off
   Lit.render(html`
     <style>${adsViewStyles}</style>
     <div class="ads-view-container" jslog=${VisualLogging.pane('ads')}>
+      <div class="metrics-title">${i18nString(UIStrings.metrics)}</div>
       <dl class="metrics-container">
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.viewportAdDensity)}</dt>
           <dd class="metric-value">
             <span>${formatValue(metrics.viewportAdDensityByArea, true)}</span>
-            <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdDensityByArea, true)})}</span>
+            <span class="metric-average">${i18nString(UIStrings.average, {
+                PH1: formatAverage(metrics.averageViewportAdDensityByArea, true),
+              })}</span>
           </dd>
         </div>
         <div class="metric-box">
           <dt class="metric-title">${i18nString(UIStrings.viewportAdCount)}</dt>
           <dd class="metric-value">
             <span>${formatValue(metrics.viewportAdCount, false)}</span>
-            <span class="metric-average">${i18nString(UIStrings.average, {PH1: formatAverage(metrics.averageViewportAdCount, false)})}</span>
+            <span class="metric-average">${i18nString(UIStrings.average, {
+                PH1: formatAverage(metrics.averageViewportAdCount, false),
+              })}</span>
           </dd>
         </div>
         <div class="metric-box">
@@ -119,6 +185,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           </dd>
         </div>
       </dl>
+      <div class="ad-frames-title">${i18nString(UIStrings.adIframesTitle, {PH1: input.adFrames.length})}</div>
+      <div class="ad-frames-container">
+        <devtools-data-grid striped resize="last" class="ad-frames-data-grid" name=${i18nString(UIStrings.adIframes)}>
+          <table>
+            <tr>
+              <th id="elementId" weight="1">${i18nString(UIStrings.elementId)}</th>
+              <th id="initialOrigin" weight="2">${i18nString(UIStrings.initialOrigin)}</th>
+              <th id="cpuTime" weight="1">${i18nString(UIStrings.cpu)}</th>
+              <th id="networkBytes" weight="1">${i18nString(UIStrings.network)}</th>
+            </tr>
+            ${input.adFrames.map(frame => html`
+              <tr>
+                <td title=${frame.elementId}>${frame.elementId}</td>
+                <td title=${frame.initialOrigin}>${frame.initialOrigin}</td>
+                <td title=${frame.cpuTime}>${frame.cpuTime}</td>
+                <td title=${frame.networkBytes}>${frame.networkBytes}</td>
+              </tr>
+            `)}
+          </table>
+        </devtools-data-grid>
+      </div>
     </div>
   `, target);
   // clang-format on
@@ -131,6 +218,10 @@ export class AdsView extends UI.Widget.Widget {
   #pollSessionId = 0;
   #view: View;
 
+  readonly #adFrames = new Map<Protocol.Page.FrameId, Protocol.Ads.AdFrameData>();
+  readonly #adIframeElementIds = new Map<Protocol.Page.FrameId, string|null>();
+  readonly #fetchingElementIds = new Set<Protocol.Page.FrameId>();
+
   constructor(view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#view = view;
@@ -194,6 +285,7 @@ export class AdsView extends UI.Widget.Widget {
         }
         if (!response.getError()) {
           this.#currentMetrics = response.metrics;
+          this.#processAdFrames(response.metrics);
           this.requestUpdate();
         }
       }
@@ -203,6 +295,65 @@ export class AdsView extends UI.Widget.Widget {
     }
   }
 
+  #processAdFrames(metrics: Protocol.Ads.AdMetrics): void {
+    // Drop removed frames from the local cache.
+    for (const frameId of metrics.removeAdFrames || []) {
+      this.#adFrames.delete(frameId);
+      this.#adIframeElementIds.delete(frameId);
+    }
+
+    // Merge partial updates into the local cache.
+    for (const frame of metrics.updateAdFrames || []) {
+      const frameId = frame.frameId;
+      const existingFrame = this.#adFrames.get(frameId) || {} as Protocol.Ads.AdFrameData;
+
+      // Object Spread / Protocol Undefined Behavior
+      // To reduce the payload size, the C++ backend only sends the 'initialOrigin' field
+      // when it changes since the last sent message for the same frame. Because
+      // the parsed JSON frame won't have the 'initialOrigin' key if it hasn't changed,
+      // spreading it over existingFrame won't overwrite existingFrame.initialOrigin with
+      // undefined.
+      const newFrame = {...existingFrame, ...frame} as Protocol.Ads.AdFrameData;
+      this.#adFrames.set(frameId, newFrame);
+    }
+
+    // Asynchronously fetch Element IDs for newly tracked frames.
+    // Duplicate requests are prevented by #fetchingElementIds.
+    for (const frameId of this.#adFrames.keys()) {
+      if (!this.#adIframeElementIds.has(frameId) && !this.#fetchingElementIds.has(frameId)) {
+        this.#fetchingElementIds.add(frameId);
+        void this.#fetchIframeElementId(frameId)
+            .then(elementId => {
+              if (this.#adFrames.has(frameId) && elementId !== undefined) {
+                this.#adIframeElementIds.set(frameId, elementId);
+              }
+            })
+            .catch(() => {})
+            .finally(() => {
+              this.#fetchingElementIds.delete(frameId);
+              this.requestUpdate();
+            });
+      }
+    }
+  }
+
+  async #fetchIframeElementId(frameId: Protocol.Page.FrameId): Promise<string|null|undefined> {
+    const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+    if (!frame) {
+      return undefined;
+    }
+    const domModel = frame.resourceTreeModel().target().model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return undefined;
+    }
+    const deferredNode = await domModel.getOwnerNodeForFrame(frameId);
+    if (deferredNode) {
+      const node = await deferredNode.resolvePromise();
+      return node?.getAttribute('id') || null;
+    }
+    return null;
+  }
+
   #onPrimaryPageChanged(): void {
     this.#currentMetrics = {
       viewportAdDensityByArea: 0,
@@ -214,12 +365,32 @@ export class AdsView extends UI.Widget.Widget {
       updateAdFrames: [],
       removeAdFrames: [],
     };
+    this.#adFrames.clear();
+    this.#adIframeElementIds.clear();
+    this.#fetchingElementIds.clear();
     this.requestUpdate();
   }
 
   override performUpdate(): void {
+    const adFramesArray: AdFrameNodeData[] = [];
+    for (const [frameId, frame] of this.#adFrames) {
+      // The table displays the resolved ID, or an <unnamed> placeholder if the
+      // element lacks an ID attribute, or an empty string while pending.
+      const elementIdText = this.#adIframeElementIds.has(frameId) ?
+          (this.#adIframeElementIds.get(frameId) || i18nString(UIStrings.unnamed)) :
+          '';
+
+      adFramesArray.push({
+        elementId: elementIdText,
+        initialOrigin: frame.initialOrigin || '',
+        cpuTime: formatCpu(frame.cpuTime),
+        networkBytes: formatNetwork(frame.networkBytes),
+      });
+    }
+
     const viewInput: ViewInput = {
       metrics: this.#currentMetrics,
+      adFrames: adFramesArray,
     };
     this.#view(viewInput, undefined, this.contentElement);
   }

package/front_end/panels/application/components/adsView.css

@@ -58,3 +58,28 @@
   font-weight: normal;
   color: var(--sys-color-on-surface-subtle);
 }
+
+.metrics-title,
+.ad-frames-title {
+  color: var(--sys-color-on-surface);
+  flex: 0 0 auto;
+  font-weight: bold;
+  margin-bottom: 8px;
+}
+
+.ad-frames-data-grid {
+  flex: auto;
+}
+
+.ad-frames-container {
+  border: 1px solid var(--sys-color-divider);
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+  margin-bottom: 24px;
+  height: 300px;
+  min-height: 150px;
+  position: relative;
+  resize: vertical;
+  overflow: hidden;
+}

package/front_end/panels/application/preloading/components/RuleSetDetailsView.ts

@@ -129,8 +129,8 @@ export class RuleSetDetailsView extends UI.Widget.VBox {
 
   async #getSourceText(): Promise<string> {
     if (this.#shouldPrettyPrint && this.#ruleSet?.sourceText !== undefined) {
-      const formattedResult =
-          await Formatter.ScriptFormatter.formatScriptContent('application/json', this.#ruleSet.sourceText);
+      const formattedResult = await Formatter.ScriptFormatter.formatScriptContent(
+          SDK.TargetManager.TargetManager.instance().settings, 'application/json', this.#ruleSet.sourceText);
       return formattedResult.formattedContent;
     }
 

package/front_end/panels/console/ConsoleView.ts

@@ -346,7 +346,8 @@ export class ConsoleView extends UI.Widget.VBox implements
   private userHasOpenedSidebarAtLeastOnce = false;
   private issueToolbarThrottle: Common.Throttler.Throttler;
   private requestResolver = new Logs.RequestResolver.RequestResolver();
-  private issueResolver = new IssuesManager.IssueResolver.IssueResolver();
+  private issueResolver =
+      new IssuesManager.IssueResolver.IssueResolver(IssuesManager.IssuesManager.IssuesManager.instance());
   #isDetached = false;
   #onIssuesCountUpdateBound = this.#onIssuesCountUpdate.bind(this);
   #collapseAllButton: UI.Toolbar.ToolbarButton;

package/front_end/panels/console/PromptBuilder.ts

@@ -68,8 +68,9 @@ export class PromptBuilder {
     const firstNewline = text.indexOf('\n');
     if (text.length > MAX_CODE_SIZE && (firstNewline < 0 || firstNewline > MAX_CODE_SIZE)) {
       // Use formatter
+      const settings = runtimeModel.target().targetManager().settings;
       const {formattedContent, formattedMapping} = await Formatter.ScriptFormatter.formatScriptContent(
-          mappedLocation?.uiSourceCode.mimeType() ?? 'text/javascript', text);
+          settings, mappedLocation?.uiSourceCode.mimeType() ?? 'text/javascript', text);
       const [lineNumber, columnNumber] =
           formattedMapping.originalToFormatted(mappedLocation?.lineNumber ?? 0, mappedLocation?.columnNumber ?? 0);
       return {text: formattedContent, columnNumber, lineNumber};