chrome-devtools-frontend 1.0.1645245 → 1.0.1646714

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -349,6 +349,7 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       return [
         {title: 'How is localStorage used on this page?', jslogContext: 'storage-default'},
         {title: 'How is sessionStorage used on this page?', jslogContext: 'storage-default'},
+        {title: 'What cookies are stored for this page?', jslogContext: 'storage-default'},
       ];
     }
 
@@ -576,12 +577,12 @@ function createDOMNodeContext(node: SDK.DOMModel.DOMNode|null): AiAssistanceMode
   return new AiAssistanceModel.DOMNodeContext.DOMNodeContext(node);
 }
 
-function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileAgent.FileContext|
+function createFileContext(file: Workspace.UISourceCode.UISourceCode|null): AiAssistanceModel.FileContext.FileContext|
     null {
   if (!file) {
     return null;
   }
-  return new AiAssistanceModel.FileAgent.FileContext(file);
+  return new AiAssistanceModel.FileContext.FileContext(file);
 }
 
 function createAccessibilityContext(report: LighthousePanel.LighthousePanel.ActiveLighthouseReport|null):
@@ -592,13 +593,13 @@ function createAccessibilityContext(report: LighthousePanel.LighthousePanel.Acti
   return new AiAssistanceModel.AccessibilityAgent.AccessibilityContext(report.report);
 }
 
-function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
-    AiAssistanceModel.NetworkAgent.RequestContext|null {
+function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|
+                              null): AiAssistanceModel.RequestContext.RequestContext|null {
   if (!request) {
     return null;
   }
   const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-  return new AiAssistanceModel.NetworkAgent.RequestContext(request, calculator);
+  return new AiAssistanceModel.RequestContext.RequestContext(request, calculator);
 }
 
 function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentFocus|null):
@@ -666,10 +667,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #conversation?: AiAssistanceModel.AiConversation.AiConversation;
 
-  #selectedFile: AiAssistanceModel.FileAgent.FileContext|null = null;
+  #selectedFile: AiAssistanceModel.FileContext.FileContext|null = null;
   #selectedElement: AiAssistanceModel.DOMNodeContext.DOMNodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
-  #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
+  #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
   #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
@@ -1254,7 +1255,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
         if (Boolean(ev.data)) {
           const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-          this.#selectedRequest = new AiAssistanceModel.NetworkAgent.RequestContext(ev.data, calculator);
+          this.#selectedRequest = new AiAssistanceModel.RequestContext.RequestContext(ev.data, calculator);
         } else {
           this.#selectedRequest = null;
         }
@@ -1280,7 +1281,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         if (!newFile || this.#selectedFile?.getItem() === newFile) {
           return;
         }
-        this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(ev.data);
+        this.#selectedFile = new AiAssistanceModel.FileContext.FileContext(ev.data);
         this.#updateConversationState(this.#conversation);
       };
 
@@ -1488,12 +1489,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     const context = this.#conversation.selectedContext;
-    if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
       const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
           context.getItem(), NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
       return Common.Revealer.reveal(requestLocation);
     }
-    if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+    if (context instanceof AiAssistanceModel.FileContext.FileContext) {
       return Common.Revealer.reveal(context.getItem().uiLocation(0, 0));
     }
     if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
@@ -1733,11 +1734,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #handleConversationContextChange = (data: unknown): void => {
-    if (data instanceof AiAssistanceModel.FileAgent.FileContext) {
+    if (data instanceof AiAssistanceModel.FileContext.FileContext) {
       this.#selectedFile = data;
     } else if (data instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
       this.#selectedElement = data;
-    } else if (data instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+    } else if (data instanceof AiAssistanceModel.RequestContext.RequestContext) {
       this.#selectedRequest = data;
     } else if (data instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
       this.#selectedPerformanceTrace = data;

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

@@ -171,13 +171,13 @@ export type ViewOutput = undefined;
 
 function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationContext<unknown>):
     Platform.UIString.LocalizedString {
-  if (context instanceof AiAssistanceModel.FileAgent.FileContext) {
+  if (context instanceof AiAssistanceModel.FileContext.FileContext) {
     return lockedString(UIStringsNotTranslate.removeContextFile);
   }
   if (context instanceof AiAssistanceModel.DOMNodeContext.DOMNodeContext) {
     return lockedString(UIStringsNotTranslate.removeContextElement);
   }
-  if (context instanceof AiAssistanceModel.NetworkAgent.RequestContext) {
+  if (context instanceof AiAssistanceModel.RequestContext.RequestContext) {
     return lockedString(UIStringsNotTranslate.removeContextRequest);
   }
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
@@ -351,9 +351,9 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                                 })}
                               ></devtools-widget>` :
                             html`
-                          ${input.context instanceof AiAssistanceModel.NetworkAgent.RequestContext ?
+                          ${input.context instanceof AiAssistanceModel.RequestContext.RequestContext ?
                             PanelUtils.PanelUtils.getIconForNetworkRequest(input.context.getItem()) :
-                            input.context instanceof AiAssistanceModel.FileAgent.FileContext ?
+                            input.context instanceof AiAssistanceModel.FileContext.FileContext ?
                             PanelUtils.PanelUtils.getIconForSourceFile(input.context.getItem()) :
                             input.context instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext ?
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -52,6 +52,7 @@ import {BackForwardCacheTreeElement} from './BackForwardCacheTreeElement.js';
 import {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
+import * as ApplicationComponents from './components/components.js';
 import {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {RootTreeElement as DeviceBoundSessionsRootTreeElement} from './DeviceBoundSessionsTreeElement.js';
 import {
@@ -110,6 +111,10 @@ const UIStrings = {
    * @description Text in Application Panel Sidebar of the Application panel
    */
   application: 'Application',
+  /**
+   * @description Text in Application Panel Sidebar of the Application panel
+   */
+  ads: 'Ads',
   /**
    * @description Text in Application Panel Sidebar of the Application panel
    */
@@ -354,6 +359,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
   webMcpTreeElement?: WebMCPTreeElement;
+  adsTreeElement?: ApplicationPanelTreeElement;
   deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
@@ -403,6 +409,25 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       this.applicationTreeElement.appendChild(this.webMcpTreeElement);
     }
 
+    if (Root.Runtime.hostConfig.devToolsAdsPanel?.enabled) {
+      const adsTreeElement = new ApplicationPanelTreeElement(panel, i18nString(UIStrings.ads), false, 'ads');
+      const icon = createIcon('experiment');
+      adsTreeElement.setLeadingIcons([icon]);
+      adsTreeElement.itemURL = 'ads://' as Platform.DevToolsPath.UrlString;
+      let adsView: ApplicationComponents.AdsView.AdsView;
+      adsTreeElement.onselect = (selectedByUser?: boolean): boolean => {
+        ApplicationPanelTreeElement.prototype.onselect.call(adsTreeElement, selectedByUser);
+        if (!adsView) {
+          adsView = new ApplicationComponents.AdsView.AdsView();
+        }
+        adsTreeElement.showView(adsView);
+        UI.UIUserMetrics.UIUserMetrics.instance().panelShown('ads');
+        return false;
+      };
+      this.adsTreeElement = adsTreeElement;
+      this.applicationTreeElement.appendChild(this.adsTreeElement);
+    }
+
     const storageSectionTitle = i18nString(UIStrings.storage);
     const storageTreeElement = this.addSidebarSection(storageSectionTitle, 'storage');
     this.localStorageListTreeElement = new ExpandableApplicationPanelTreeElement(

package/front_end/panels/application/WebMCPTreeElement.ts

@@ -5,6 +5,7 @@
 import type * as Platform from '../../core/platform/platform.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -17,6 +18,13 @@ export class WebMCPTreeElement extends ApplicationPanelTreeElement {
     super(storagePanel, 'WebMCP', false, 'web-mcp');
     const icon = createIcon('document');
     this.setLeadingIcons([icon]);
+    const newBadge = UI.UIUtils.maybeCreateNewBadge('web-mcp');
+    if (newBadge) {
+      const fragment = document.createDocumentFragment();
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(html`<div class="trailing-icons icons-container">${newBadge}</div>`, fragment);
+      this.listItemElement.appendChild(fragment);
+    }
   }
 
   override get itemURL(): Platform.DevToolsPath.UrlString {

package/front_end/panels/application/WebMCPView.ts

@@ -16,6 +16,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import type * as Bindings from '../../models/bindings/bindings.js';
 import type * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as WebMCP from '../../models/web_mcp/web_mcp.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -33,6 +34,8 @@ import {
   type TemplateResult,
 } from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as Console from '../console/console.js';
+import symbolizedErrorWidgetStyles from '../console/symbolizedErrorWidget.css.js';
 import * as ProtocolMonitor from '../protocol_monitor/protocol_monitor.js';
 
 import webMCPViewStyles from './webMCPView.css.js';
@@ -191,10 +194,6 @@ const UIStrings = {
    * @description Notice to display when a tool has been unregistered
    */
   toolUnregisteredNotice: 'This tool has been unregistered',
-  /**
-   * @description Text preceding a nested error in a stack trace
-   */
-  causedBy: 'Caused by:',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/WebMCPView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -592,7 +591,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
                           errorText: input.selectedCall?.result?.errorText,
-                          exceptionDetails: input.selectedCall?.result?.exceptionDetails,
+                          symbolizedError: input.selectedCall?.result?.symbolizedError,
                   })}>
                 </devtools-widget>
               </devtools-tabbed-pane>
@@ -953,11 +952,11 @@ export interface PayloadViewInput {
   valueObject?: unknown;
   valueString?: string;
   errorText?: string;
-  exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
+  symbolizedError?: Bindings.SymbolizedError.SymbolizedError|null;
 }
 
 export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
-  if (!input.valueObject && !input.valueString && !input.errorText && !input.exceptionDetails) {
+  if (!input.valueObject && !input.valueString && !input.errorText && !input.symbolizedError) {
     render(nothing, target);
     return;
   }
@@ -988,73 +987,44 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       html`<div class="payload-value source-code error-text">${text}</div>`;
 
   const createException = (
-      details: WebMCP.WebMCPModel.ExceptionDetails,
-      linkifier: Components.Linkifier.Linkifier = new Components.Linkifier.Linkifier(),
-      ): TemplateResult => {
-    const renderFrame = (
-        frame: StackTrace.ErrorStackParser.ParsedErrorFrame,
-        index: number,
-        array: StackTrace.ErrorStackParser.ParsedErrorFrame[],
-        ): TemplateResult => {
-      const newline = index < array.length - 1 ? '\n' : '';
-      const {line, link, isCallFrame} = frame;
-
-      if (!isCallFrame) {
-        return html`<span>${line}${newline}</span>`;
-      }
-
-      if (!link) {
-        return html`<span class="formatted-builtin-stack-frame">${line}${newline}</span>`;
-      }
-
-      const scriptLocationLink = linkifier.linkifyScriptLocation(
-          details.error.runtimeModel().target(),
-          link.scriptId || null,
-          link.url,
-          link.lineNumber,
-          {
-            columnNumber: link.columnNumber,
-            showColumnNumber: true,
-          },
-      );
-      scriptLocationLink.tabIndex = -1;
-
-      return html`<span class="formatted-stack-frame">${link.prefix}${scriptLocationLink}${link.suffix}${
-          newline}</span>`;
-    };
-
+      error: Bindings.SymbolizedError.SymbolizedError|null,
+      ): TemplateResult|typeof nothing => {
+    if (!error) {
+      return nothing;
+    }
     return html`
       <div class="payload-value source-code error-text">
-        ${details.frames.length === 0 && details.description ? html`<span>${details.description}\n</span>` : nothing}
-        <div>${details.frames.map(renderFrame)}</div>
-        ${
-        details.cause ? html`\n${i18nString(UIStrings.causedBy)}\n${createException(details.cause, linkifier)}` :
-                        nothing}</div>`;
+        <devtools-widget
+          ${UI.Widget.widget(Console.SymbolizedErrorWidget.SymbolizedErrorWidget, {error})}
+        ></devtools-widget>
+      </div>
+    `;
   };
 
-  render(
-      html`
+  render(html`
     <style>${webMCPViewStyles}</style>
+    <style>${symbolizedErrorWidgetStyles}</style>
     <div class="call-payload-view">
       <div class="call-payload-content">
             ${
-          isParsable ? createPayload(input.valueObject) :
-                       (input.valueString !== undefined ?
-                            createSourceText(input.valueString) :
-                            (input.exceptionDetails ? createException(input.exceptionDetails) :
-                                                      (input.errorText ? createErrorText(input.errorText) : nothing)))}
+             isParsable ?
+                 createPayload(input.valueObject) :
+                 (input.valueString !== undefined ?
+                      createSourceText(input.valueString) :
+                      (input.symbolizedError ? createException(input.symbolizedError) :
+                                               (input.errorText ? createErrorText(input.errorText) : nothing)))}
       </div>
     </div>
   `,
-      target);
+         target);
 };
 
 export class PayloadWidget extends UI.Widget.Widget {
   #valueObject?: unknown;
   #valueString?: string;
   #errorText?: string;
-  #exceptionDetailsPromise?: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>;
-  #exceptionDetails?: WebMCP.WebMCPModel.ExceptionDetails;
+  #symbolizedErrorPromise?: Promise<Bindings.SymbolizedError.SymbolizedError|null>;
+  #symbolizedError?: Bindings.SymbolizedError.SymbolizedError|null;
   #view: typeof PAYLOAD_DEFAULT_VIEW;
 
   constructor(element?: HTMLElement, view = PAYLOAD_DEFAULT_VIEW) {
@@ -1089,27 +1059,27 @@ export class PayloadWidget extends UI.Widget.Widget {
     return this.#errorText;
   }
 
-  async #updateExceptionDetails(
-      exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined): Promise<void> {
-    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
+  async #updateSymbolizedError(symbolizedErrorPromise: Promise<Bindings.SymbolizedError.SymbolizedError|null>|
+                               undefined): Promise<void> {
+    if (this.#symbolizedErrorPromise === symbolizedErrorPromise) {
       return;
     }
-    this.#exceptionDetailsPromise = exceptionDetailsPromise;
-    this.#exceptionDetails = undefined;
+    this.#symbolizedErrorPromise = symbolizedErrorPromise;
+    this.#symbolizedError = undefined;
     this.requestUpdate();
-    const exceptionDetails = await exceptionDetailsPromise;
-    if (this.#exceptionDetailsPromise === exceptionDetailsPromise) {
-      this.#exceptionDetails = exceptionDetails;
+    const symbolizedError = await symbolizedErrorPromise;
+    if (this.#symbolizedErrorPromise === symbolizedErrorPromise) {
+      this.#symbolizedError = symbolizedError || null;
       this.requestUpdate();
     }
   }
 
-  set exceptionDetails(exceptionDetailsPromise: Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined) {
-    void this.#updateExceptionDetails(exceptionDetailsPromise);
+  set symbolizedError(symbolizedErrorPromise: Promise<Bindings.SymbolizedError.SymbolizedError|null>|undefined) {
+    void this.#updateSymbolizedError(symbolizedErrorPromise);
   }
 
-  get exceptionDetails(): Promise<WebMCP.WebMCPModel.ExceptionDetails|undefined>|undefined {
-    return this.#exceptionDetailsPromise;
+  get symbolizedError(): Promise<Bindings.SymbolizedError.SymbolizedError|null>|undefined {
+    return this.#symbolizedErrorPromise;
   }
   override wasShown(): void {
     super.wasShown();
@@ -1121,7 +1091,7 @@ export class PayloadWidget extends UI.Widget.Widget {
       valueObject: this.#valueObject,
       valueString: this.#valueString,
       errorText: this.#errorText,
-      exceptionDetails: this.#exceptionDetails,
+      symbolizedError: this.#symbolizedError,
     };
     this.#view(input, {}, this.contentElement);
   }

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

@@ -7,6 +7,7 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import adsViewStyles from './adsView.css.js';
 
@@ -89,34 +90,36 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   // clang-format off
   Lit.render(html`
     <style>${adsViewStyles}</style>
-    <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>
-        </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>
-        </dd>
-      </div>
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
-        <dd class="metric-value">
-          <span>${formatCpu(metrics.totalAdCpuTime)}</span>
-        </dd>
-      </div>
-      <div class="metric-box">
-        <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
-        <dd class="metric-value">
-          <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
-        </dd>
-      </div>
-    </dl>
+    <div class="ads-view-container" jslog=${VisualLogging.pane('ads')}>
+      <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>
+          </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>
+          </dd>
+        </div>
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.totalCpuUsage)}</dt>
+          <dd class="metric-value">
+            <span>${formatCpu(metrics.totalAdCpuTime)}</span>
+          </dd>
+        </div>
+        <div class="metric-box">
+          <dt class="metric-title">${i18nString(UIStrings.totalNetworkUsage)}</dt>
+          <dd class="metric-value">
+            <span>${formatNetwork(metrics.totalAdNetworkBytes)}</span>
+          </dd>
+        </div>
+      </dl>
+    </div>
   `, target);
   // clang-format on
 };

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

@@ -11,6 +11,12 @@
   overflow: auto;
 }
 
+.ads-view-container {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+}
+
 .metrics-container {
   flex: 0 0 auto;
   margin: 0 0 24px;

package/front_end/panels/common/ExtensionServer.ts

@@ -12,6 +12,7 @@ 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 _ProtocolClient from '../../core/protocol_client/protocol_client.js';  // eslint-disable-line @typescript-eslint/no-unused-vars
+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 Bindings from '../../models/bindings/bindings.js';
@@ -1616,6 +1617,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           targetType = Host.UserMetrics.ExtensionEvalTarget.SAME_EXTENSION;
         } else {
           targetType = Host.UserMetrics.ExtensionEvalTarget.OTHER_EXTENSION;
+          if (!Root.Runtime.hostConfig.extensionsOnChromeUrls?.enabled) {
+            return this.status.E_FAILED(
+                'Access to extension URLs is restricted; use --extensions-on-chrome-urls to enable.');
+          }
         }
       }
       Host.userMetrics.extensionEvalTarget(targetType);

package/front_end/panels/profiler/IsolateSelector.ts

@@ -66,8 +66,10 @@ export class IsolateSelector extends UI.Widget.VBox implements UI.ListControl.Li
   totalValueDiv: HTMLElement;
   readonly totalTrendDiv: HTMLElement;
 
-  constructor() {
-    super();
+  // `devtools-widget` passes its host element into widget constructors.
+  // Accept and forward it so this widget attaches to that host element.
+  constructor(element?: HTMLElement) {
+    super(element);
 
     this.items = new UI.ListModel.ListModel();
     this.list = new UI.ListControl.ListControl(this.items, this, UI.ListControl.ListMode.NonViewport);