chrome-devtools-frontend 1.0.1631386 → 1.0.1635648

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

@@ -13,8 +13,8 @@ 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 type {
-  AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, PerfInsightAiWidget,
-  PerformanceTraceAiWidget, StylePropertiesAiWidget,
+  AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
+  PerfInsightAiWidget, PerformanceTraceAiWidget, SourceFileAiWidget, StylePropertiesAiWidget,
   TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
@@ -31,6 +31,7 @@ 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 * as Elements from '../../elements/elements.js';
+import * as Lighthouse from '../../lighthouse/lighthouse.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
 import type {BaseInsightComponent} from '../../timeline/components/insights/BaseInsightComponent.js';
 import * as TimelineInsights from '../../timeline/components/insights/insights.js';
@@ -239,6 +240,14 @@ const UIStringsNotTranslate = {
    * @description Title for the core web vitals widget.
    */
   coreVitals: 'Core Web Vitals',
+  /**
+   * @description Title for the Lighthouse report widget.
+   */
+  lighthouseReport: 'Lighthouse report',
+  /**
+   * @description Accessible label for the reveal button in the Lighthouse report widget.
+   */
+  revealLighthouse: 'Reveal Lighthouse report',
   /**
    * @description Title for the LCP breakdown widget.
    */
@@ -1323,6 +1332,19 @@ async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget):
   };
 }
 
+async function makeSourceFileWidget(widgetData: SourceFileAiWidget): Promise<WidgetMakerResponse|null> {
+  const file = widgetData.data.uiSourceCode;
+  const customRevealTitle = i18n.i18n.lockedString(`Show ${file.name()}`);
+  return {
+    renderedWidget: null,
+    title: null,
+    revealable: file,
+    customRevealTitle,
+    accessibleRevealLabel: customRevealTitle,
+    jslogContext: 'source-file-widget',
+  };
+}
+
 function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget['data']['networkRequest']>):
     Lit.TemplateResult {
   const filename = networkRequest.url.split('/').pop() || networkRequest.url;
@@ -1330,24 +1352,27 @@ function renderNetworkRequestPreview(networkRequest: NonNullable<DomTreeAiWidget
   const resourceType = Common.ResourceType.resourceTypes[networkRequest.resourceType];
   const {iconName, color} = PanelUtils.iconDataForResourceType(resourceType);
 
-  const imageUrl = networkRequest.imageContent?.asImagePreviewUrl() ?? networkRequest.url;
+  // This can be `null` if the image is too large to have a preview generated.
+  // And we can't fallback to the actual URL due to CSP restrictions.
+  const imageUrl = networkRequest.imageContent?.asImagePreviewUrl();
 
+  // clang-format off
   return html`
     <div class="network-request-preview">
       <div class="network-request-header">
         <div class="network-request-icon">
-          ${
-      resourceType.isImage() ? html`<img src=${imageUrl} alt=${filename} />` :
-                               html`<devtools-icon name=${iconName} style=${Lit.Directives.styleMap({
-                                 color: color ?? ''
-                               })}></devtools-icon>`}
-        </div>        <div class="network-request-details">
+          ${resourceType.isImage() && imageUrl ? // only try to render the image if we have a preview URL, else fallback to a coloured square.
+            html`<img src=${imageUrl} alt=${filename} />` :
+            html`<devtools-icon name=${iconName} style=${Lit.Directives.styleMap({ color: color ?? '' })}></devtools-icon>`}
+        </div>
+        <div class="network-request-details">
           <div class="network-request-name" title=${networkRequest.url}>${filename}</div>
           <div class="network-request-size">${size}</div>
         </div>
       </div>
     </div>
   `;
+  // clang-format on
 }
 
 async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMakerResponse|null> {
@@ -1425,6 +1450,10 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.track}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
     case 'BOTTOM_UP_TREE':
       return `${widget.name}:${widget.data.bounds.min}-${widget.data.bounds.max}`;
+    case 'SOURCE_FILE':
+      return `${widget.name}:${widget.data.uiSourceCode.url()}`;
+    case 'LIGHTHOUSE_REPORT':
+      return `${widget.name}:${widget.data.report.fetchTime}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1508,6 +1537,12 @@ async function renderWidgets(
       case 'BOTTOM_UP_TREE':
         response = await makeBottomUpTimelineTreeWidget(widgetData);
         break;
+      case 'SOURCE_FILE':
+        response = await makeSourceFileWidget(widgetData);
+        break;
+      case 'LIGHTHOUSE_REPORT':
+        response = await makeLighthouseReportWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }
@@ -2047,3 +2082,21 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
     jslogContext: 'timeline-range-summary',
   };
 }
+
+async function makeLighthouseReportWidget(widgetData: LighthouseReportAiWidget): Promise<WidgetMakerResponse|null> {
+  const reportEl =
+      Lighthouse.LighthouseReportRenderer.LighthouseReportRenderer.renderLighthouseScores(widgetData.data.report);
+  if (!reportEl) {
+    return null;
+  }
+
+  const snapshotReport = widgetData.data.snapshotReport;
+
+  return {
+    renderedWidget: html`<div class="lighthouse-report-widget">${reportEl}</div>`,
+    revealable: new Lighthouse.LighthousePanel.ActiveLighthouseReport(widgetData.data.report),
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLighthouse),
+    title: lockedString(UIStringsNotTranslate.lighthouseReport),
+    jslogContext: snapshotReport ? 'lighthouse-snapshot-report-widget' : 'lighthouse-report-widget',
+  };
+}

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

@@ -30,13 +30,13 @@ const UIStrings = {
    */
   copiedToClipboard: 'Copied to clipboard',
   /**
-   * @description Label for the 'as prompt' radio button in the export for agents dialog.
+   * @description Label for the 'summary prompt' radio button in the export for agents dialog.
    */
-  asPrompt: 'As prompt',
+  asPrompt: 'Summary prompt',
   /**
-   * @description Label for the 'as markdown' radio button in the export for agents dialog.
+   * @description Label for the 'full conversation' radio button in the export for agents dialog.
    */
-  asMarkdown: 'As markdown',
+  asMarkdown: 'Full conversation',
   /**
    * @description Button text for saving content as a markdown file.
    */

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -33,6 +33,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -110,6 +111,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
           SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_UPDATED, this.domStorageItemUpdated, this),
     ];
     this.refreshItems();
+    this.selectedItemChanged(null);
   }
 
   private domStorageItemsCleared(): void {
@@ -178,6 +180,26 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     this.domStorageItemsCleared();
   }
 
+  protected override selectedItemChanged(item: {key: string, value: string}|null): void {
+    const storageKey = this.domStorage.storageKey;
+    if (!storageKey) {
+      return;
+    }
+
+    const parsedKey = SDK.StorageKeyManager.parseStorageKey(storageKey);
+    const origin = parsedKey.origin;
+    const storageType = this.domStorage.isLocalStorage ? 'localStorage' : 'sessionStorage';
+
+    if (!item) {
+      const storageItem = new AiAssistanceModel.StorageItem.StorageItem({origin, storageKey});
+      UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
+      return;
+    }
+
+    const storageItem = new AiAssistanceModel.StorageItem.StorageItem({origin, storageKey, storageType, key: item.key});
+    UI.Context.Context.instance().setFlavor(AiAssistanceModel.StorageItem.StorageItem, storageItem);
+  }
+
   protected removeItem(key: string): void {
     this.domStorage?.removeItem(key);
   }

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -224,7 +224,9 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
         } else {
           void this.#previewEntry(item);
         }
+        this.selectedItemChanged(item);
       },
+
       onSort: (ascending: boolean) => {
         this.#isSortOrderAscending = ascending;
       },
@@ -403,6 +405,9 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     return this.#items.map(item => item.key);
   }
 
+  protected selectedItemChanged(_item: {key: string, value: string}|null): void {
+  }
+
   protected abstract setItem(key: string, value: string): void;
   protected abstract removeItem(key: string): void;
   protected abstract createPreview(key: string, value: string): Promise<Widget|null>;

package/front_end/panels/common/ExtensionServer.ts

@@ -141,6 +141,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private inspectedTabId?: string;
   private readonly extensionAPITestHook?: (server: unknown, api: unknown) => unknown;
   private themeChangeHandlers = new Map<string, MessagePort>();
+  private readonly recorderViewPortMap: Map<string, MessagePort>;
   readonly #pendingExtensions: Host.InspectorFrontendHostAPI.ExtensionDescriptor[] = [];
 
   private constructor() {
@@ -148,6 +149,7 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.clientObjects = new Map();
     this.handlers = new Map();
     this.subscribers = new Map();
+    this.recorderViewPortMap = new Map();
     this.subscriptionStartHandlers = new Map();
     this.subscriptionStopHandlers = new Map();
     this.extraHeaders = new Map();
@@ -430,8 +432,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
     const {pluginName, mediaType, port, capabilities} = message;
+    const extensionOrigin = this.getExtensionOrigin(_shared_port);
     Extensions.RecorderPluginManager.RecorderPluginManager.instance().addPlugin(
-        new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(pluginName, port, capabilities, mediaType));
+        new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(
+            pluginName, port, capabilities, extensionOrigin, mediaType));
     return this.status.OK();
   }
 
@@ -483,12 +487,15 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return this.status.OK();
   }
 
-  private onShowRecorderView(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage): Record
-      |undefined {
+  private onShowRecorderView(
+      message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage, port: MessagePort): Record|undefined {
     if (message.command !== Extensions.ExtensionAPI.PrivateAPI.Commands.ShowRecorderView) {
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.ShowRecorderView}`);
     }
+    if (this.recorderViewPortMap.get(message.id) !== port) {
+      return this.status.E_FAILED('Permission denied');
+    }
     Extensions.RecorderPluginManager.RecorderPluginManager.instance().showView(message.id);
     return undefined;
   }
@@ -516,7 +523,8 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_EXISTS(id);
     }
 
-    const pagePath = ExtensionServer.expandResourcePath(this.getExtensionOrigin(port), message.pagePath);
+    const extensionOrigin = this.getExtensionOrigin(port);
+    const pagePath = ExtensionServer.expandResourcePath(extensionOrigin, message.pagePath);
     if (pagePath === undefined) {
       return this.status.E_BADARG('pagePath', 'Resources paths cannot point to non-extension resources');
     }
@@ -528,7 +536,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       title: message.title,
       onShown,
       onHidden,
+      extensionOrigin,
     });
+    this.recorderViewPortMap.set(id, port);
     return this.status.OK();
   }
 
@@ -614,15 +624,25 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return undefined;
   }
 
-  private onAddRequestHeaders(message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage): Record
-      |undefined {
+  private onAddRequestHeaders(
+      message: Extensions.ExtensionAPI.PrivateAPI.ExtensionServerRequestMessage, port: MessagePort): Record|undefined {
     if (message.command !== Extensions.ExtensionAPI.PrivateAPI.Commands.AddRequestHeaders) {
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.AddRequestHeaders}`);
     }
-    const id = message.extensionId;
-    if (typeof id !== 'string') {
-      return this.status.E_BADARGTYPE('extensionId', typeof id, 'string');
+    // Use the authenticated port origin instead of the caller-supplied extensionId to
+    // prevent one extension from manipulating another extension's header set.
+    const id = this.getExtensionOrigin(port);
+    const extension = this.registeredExtensions.get(id);
+    if (!extension) {
+      return this.status.E_FAILED('Permission denied');
+    }
+    // Refuse the request if the extension has any runtime_blocked_hosts policy entries.
+    // MultitargetNetworkManager fans out setExtraHTTPHeaders to every attached network
+    // agent (including OOPIF/subframe targets), so there is no safe per-target URL check
+    // here. Blocking the call when blocked hosts exist is the minimal safe mitigation.
+    if (extension.hostsPolicy.runtimeBlockedHosts.length > 0) {
+      return this.status.E_FAILED('Permission denied');
     }
     let extensionHeaders = this.extraHeaders.get(id);
     if (!extensionHeaders) {
@@ -977,8 +997,6 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
     const options = (message.options || {});
 
-    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
-        typeof options.userAgent === 'string' ? options.userAgent : '', null);
     let injectedScript;
     if (options.injectedScript) {
       injectedScript = '(function(){' + options.injectedScript + '})()';
@@ -991,6 +1009,11 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (!this.extensionAllowedOnTarget(target, port)) {
       return this.status.E_FAILED('Permission denied');
     }
+    // Apply the UA override only after confirming the extension is allowed on this target,
+    // so that extensions blocked by runtime_blocked_hosts cannot override the UA for the
+    // primary page (and, via singleton persistence, for future targets that attach later).
+    SDK.NetworkManager.MultitargetNetworkManager.instance().setUserAgentOverride(
+        typeof options.userAgent === 'string' ? options.userAgent : '', null);
     resourceTreeModel?.reloadPage(Boolean(options.ignoreCache), injectedScript);
     return this.status.OK();
   }

package/front_end/panels/console/ConsolePinPane.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 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 Root from '../../core/root/root.js';
@@ -16,6 +17,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelCommon from '../common/common.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';
 
@@ -56,6 +58,25 @@ const UIStrings = {
    * @description Text of a DOM element in Console Pin Pane of the Console panel
    */
   notAvailable: 'not available',
+  /**
+   * @description Headline of warning shown to users when pasting text/code into DevTools.
+   */
+  doYouTrustThisCode: 'Do you trust this code?',
+  /**
+   * @description Warning shown to users when pasting text/code into DevTools. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
+   * @example {allow pasting} PH1
+   */
+  doNotPaste:
+      'Don\'t paste code you do not understand or have not reviewed yourself into DevTools. This could allow attackers to steal your identity or take control of your computer. Please type “{PH1}” below to allow pasting.',
+  /**
+   * @description Text a user needs to type in order to confirm that they are aware of the danger of pasting code into the DevTools console.
+   */
+  allowPasting: 'allow pasting',
+  /**
+   * @description Input box placeholder which instructs the user to type 'allow pasting' into the input box. IMPORTANT: keep double quotes around PH1 and do not use single quotes.
+   * @example {allow pasting} PH1
+   */
+  typeAllowPasting: 'Type “{PH1}”',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsolePinPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -271,11 +292,15 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
   #hovered = false;
   #lastNode: SDK.RemoteObject.RemoteObject|null = null;
   #deletePinIcon!: Buttons.Button.Button;
+  readonly #selfXssWarningDisabledSetting: Common.Settings.Setting<boolean>;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
 
+    this.#selfXssWarningDisabledSetting = Common.Settings.Settings.instance().createSetting(
+        'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
+
     this.#pinEditor = {
       workingCopy: () => this.#editor?.state.doc.toString() ?? '',
       workingCopyWithHint: () => this.#editor ? TextEditor.Config.contentIncludingHint(this.#editor.editor) : '',
@@ -375,7 +400,10 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
           },
         },
       ]),
-      CodeMirror.EditorView.domEventHandlers({blur: (_e, view) => this.#onBlur(view)}),
+      CodeMirror.EditorView.domEventHandlers({
+        blur: (_e, view) => this.#onBlur(view),
+        paste: () => this.#onPaste(),
+      }),
       TextEditor.Config.baseConfiguration(doc),
       TextEditor.Config.closeBrackets.instance(),
       TextEditor.Config.autocompletion.instance(),
@@ -398,6 +426,32 @@ export class ConsolePinPresenter extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
+  #onPaste(): boolean {
+    if (Root.Runtime.Runtime.queryParam('isChromeForTesting') ||
+        Root.Runtime.Runtime.queryParam('disableSelfXssWarnings') || this.#selfXssWarningDisabledSetting.get()) {
+      return false;
+    }
+    void this.#showSelfXssWarning();
+    return true;
+  }
+
+  async #showSelfXssWarning(): Promise<void> {
+    const allowPasting = await PanelCommon.TypeToAllowDialog.show({
+      jslogContext: {
+        dialog: 'self-xss-warning',
+        input: 'allow-pasting',
+      },
+      header: i18nString(UIStrings.doYouTrustThisCode),
+      message: i18nString(UIStrings.doNotPaste, {PH1: i18nString(UIStrings.allowPasting)}),
+      typePhrase: i18nString(UIStrings.allowPasting),
+      inputPlaceholder: i18nString(UIStrings.typeAllowPasting, {PH1: i18nString(UIStrings.allowPasting)}),
+    });
+    if (allowPasting) {
+      this.#selfXssWarningDisabledSetting.set(true);
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.SelfXssAllowPastingInDialog);
+    }
+  }
+
   setHovered(hovered: boolean): void {
     if (this.#hovered === hovered) {
       return;