chrome-devtools-frontend 1.0.1630574 → 1.0.1632065

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -348,6 +348,13 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
       ];
     }
 
+    case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE: {
+      return [
+        {title: 'How is localStorage used on this page?', jslogContext: 'storage-default'},
+        {title: 'How is sessionStorage used on this page?', jslogContext: 'storage-default'},
+      ];
+    }
+
     default:
       Platform.assertNever(conversation.type, 'Unknown conversation type');
   }
@@ -616,6 +623,14 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(focus);
 }
 
+function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
+    AiAssistanceModel.StorageAgent.StorageContext|null {
+  if (!item) {
+    return null;
+  }
+  return new AiAssistanceModel.StorageAgent.StorageContext(item);
+}
+
 /**
  * State relating to the visibility of the Walkthrough.
  *
@@ -671,6 +686,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   #selectedBreakpoint: AiAssistanceModel.BreakpointDebuggerAgent.BreakpointContext|null = null;
   #selectedAccessibility: AiAssistanceModel.AccessibilityAgent.AccessibilityContext|null = null;
+  #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
+
   // Messages displayed in the `ChatView` component.
 
   #messages: Message[] = [];
@@ -993,6 +1010,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     const isSourcesPanelVisible = viewManager.isViewVisible('sources');
     const isPerformancePanelVisible = viewManager.isViewVisible('timeline');
     const isLighthousePanelVisible = viewManager.isViewVisible('lighthouse');
+    const isApplicationPanelVisible = viewManager.isViewVisible('resources');
 
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     if (isElementsPanelVisible && hostConfig.devToolsFreestyler?.enabled) {
@@ -1009,6 +1027,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE;
     } else if (isLighthousePanelVisible && hostConfig.devToolsAiAssistanceAccessibilityAgent?.enabled) {
       targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY;
+    } else if (isApplicationPanelVisible && hostConfig.devToolsAiAssistanceStorageAgent?.enabled) {
+      targetConversationType = AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE;
     }
 
     if (isAiAssistanceContextSelectionAgentEnabled() && !targetConversationType) {
@@ -1147,6 +1167,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         createBreakpointContext(UI.Context.Context.instance().flavor(Workspace.UISourceCode.UILocation));
     this.#selectedAccessibility = createAccessibilityContext(
         UI.Context.Context.instance().flavor(LighthousePanel.LighthousePanel.ActiveLighthouseReport));
+    this.#selectedStorage =
+        createStorageContext(UI.Context.Context.instance().flavor(AiAssistanceModel.StorageItem.StorageItem));
     this.#updateConversationState(this.#conversation);
 
     this.#aiAssistanceEnabledSetting?.addChangeListener(this.requestUpdate, this);
@@ -1159,6 +1181,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        AiAssistanceModel.StorageItem.StorageItem, this.#handleStorageItemFlavorChange);
+
     UI.Context.Context.instance().addFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.Context.Context.instance().addFlavorChangeListener(
@@ -1197,6 +1222,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         SDK.NetworkRequest.NetworkRequest, this.#handleNetworkRequestFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
         AiAssistanceModel.AIContext.AgentFocus, this.#handlePerformanceTraceFlavorChange);
+    UI.Context.Context.instance().removeFlavorChangeListener(
+        AiAssistanceModel.StorageItem.StorageItem, this.#handleStorageItemFlavorChange);
+
     UI.Context.Context.instance().removeFlavorChangeListener(
         Workspace.UISourceCode.UISourceCode, this.#handleUISourceCodeFlavorChange);
     UI.Context.Context.instance().removeFlavorChangeListener(
@@ -1243,6 +1271,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#updateConversationState(this.#conversation);
   };
 
+  #handleStorageItemFlavorChange =
+      (ev: Common.EventTarget.EventTargetEvent<AiAssistanceModel.StorageItem.StorageItem>): void => {
+        if (this.#selectedStorage?.getItem() === ev.data) {
+          return;
+        }
+
+        this.#selectedStorage = createStorageContext(ev.data);
+        this.#updateConversationState(this.#conversation);
+      };
+
   #handleDOMNodeAttrChange =
       (ev: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode, name: string}>): void => {
         if (this.#selectedElement?.getItem() === ev.data.node) {
@@ -1415,6 +1453,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#conversation.selectedContext ?
             lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibility) :
             lockedString(UIStringsNotTranslate.inputPlaceholderForAccessibilityNoContext);
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
+        return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
 
         if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
@@ -1472,6 +1512,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
       case AiAssistanceModel.AiHistoryStorage.ConversationType.BREAKPOINT:
 
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
         if (loggingEnabled) {
           return lockedString(UIStringsNotTranslate.inputDisclaimerForNoContext);
@@ -1726,6 +1767,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return this.#selectedBreakpoint;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.ACCESSIBILITY:
         return this.#selectedAccessibility;
+      case AiAssistanceModel.AiHistoryStorage.ConversationType.STORAGE:
+        return this.#selectedStorage;
+
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
 
       case undefined:
@@ -1746,6 +1790,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#selectedBreakpoint = data;
     } else if (data instanceof AiAssistanceModel.AccessibilityAgent.AccessibilityContext) {
       this.#selectedAccessibility = data;
+    } else if (data instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+      this.#selectedStorage = data;
     }
 
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);

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

@@ -103,6 +103,10 @@ const UIStringsNotTranslate = {
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
   removeContextPerfInsight: 'Remove performance insight from context',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContextStorage: 'Remove storage from context',
   /**
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
@@ -179,6 +183,9 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
+  if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+    return lockedString(UIStringsNotTranslate.removeContextStorage);
+  }
   return lockedString(UIStringsNotTranslate.removeContext);
 }
 
@@ -352,6 +359,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceAgent.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
+                            input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
+                            html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :
                             Lit.nothing}
                             <span
                               role="button"

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,19 @@ 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;
+  }
+
+  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: '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/application/preloading/components/PreloadingString.ts

@@ -11,6 +11,11 @@ import * as Protocol from '../../../../generated/protocol.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 
 const UIStrings = {
+  /**
+   * @description Descrption text for Prefetch status PrefetchCancelledOnUserNavigation.
+   */
+  PrefetchCancelledOnUserNavigation:
+      'The prefetch was cancelled because the user navigated the page before the prefetch finished',
   /**
    * @description  Description text for Prefetch status PrefetchFailedIneligibleRedirect.
    */
@@ -454,6 +459,7 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
   PrefetchNotEligibleRedirectFromServiceWorker: {name: () => i18n.i18n.lockedString('Unknown')},
   PrefetchNotEligibleRedirectToServiceWorker: {name: () => i18n.i18n.lockedString('Unknown')},
   PrefetchEvictedAfterBrowsingDataRemoved: {name: i18nLazyString(UIStrings.PrefetchEvictedAfterBrowsingDataRemoved)},
+  PrefetchCancelledOnUserNavigation: {name: i18nLazyString(UIStrings.PrefetchCancelledOnUserNavigation)},
 };
 
 /** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
@@ -540,6 +546,8 @@ export function prefetchFailureReason(
       return PrefetchReasonDescription['PrefetchNotEligibleRedirectToServiceWorker'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchEvictedAfterBrowsingDataRemoved:
       return PrefetchReasonDescription['PrefetchEvictedAfterBrowsingDataRemoved'].name();
+    case Protocol.Preload.PrefetchStatus.PrefetchCancelledOnUserNavigation:
+      return PrefetchReasonDescription['PrefetchCancelledOnUserNavigation'].name();
     default:
       // Note that we use switch and exhaustiveness check to prevent to
       // forget updating these strings, but allow to handle unknown

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;

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -399,6 +399,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
   }
 
+  selectReport(report: LighthouseModel.ReporterTypes.ReportJSON): void {
+    this.reportSelector.selectReport(report);
+  }
+
   static async executeLighthouseRecording(
       overrides?: LighthouseModel.RunTypes.RunOverrides,
       ): Promise<LighthouseModel.ReporterTypes.ReportJSON|null> {
@@ -409,3 +413,10 @@ export class LighthousePanel extends UI.Panel.Panel {
     return report;
   }
 }
+
+export class ReportRevealer implements Common.Revealer.Revealer<ActiveLighthouseReport> {
+  async reveal(report: ActiveLighthouseReport): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('lighthouse');
+    LighthousePanel.instance().selectReport(report.report);
+  }
+}

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+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 type * as ProtocolClient from '../../core/protocol_client/protocol_client.js';
@@ -128,9 +129,22 @@ export class ProtocolService implements ProtocolClient.CDPConnection.CDPConnecti
     //
     // To ensure the teardown operations can proceed, we need a dialog handler which lasts until
     // the LighthouseProtocolService detaches.
-    const dialogHandler = (): void => {
-      void mainTarget.pageAgent().invoke_handleJavaScriptDialog({accept: true});
-    };
+
+    const initialInspectedUrl = mainTarget.inspectedURL();
+    const parsedInitialOrigin = Common.ParsedURL.ParsedURL.extractOrigin(initialInspectedUrl);
+    const dialogHandler =
+        (event: Common.EventTarget.EventTargetEvent<Protocol.Page.JavascriptDialogOpeningEvent>): void => {
+          const parsedEventOrigin =
+              Common.ParsedURL.ParsedURL.extractOrigin(event.data.url as Platform.DevToolsPath.UrlString);
+          if (!parsedInitialOrigin || parsedEventOrigin !== parsedInitialOrigin) {
+            // See http://crbug.com/513728809.
+            console.warn(`Lighthouse auto-accept for dialog on ${
+                event.data.url} blocked as it was not from the original audit origin ${initialInspectedUrl}.`);
+            return;
+          }
+
+          void mainTarget.pageAgent().invoke_handleJavaScriptDialog({accept: true});
+        };
 
     resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.JavaScriptDialogOpening, dialogHandler);
     this.removeDialogHandler = () =>

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -111,6 +111,26 @@ export class LighthouseReportRenderer {
     return reportEl;
   }
 
+  /**
+   * Renders only the score gauges component of the Lighthouse report, stripping out
+   * topbar, categories, and footer. Used by the Lighthouse report walkthrough widget.
+   */
+  static renderLighthouseScores(lhr: LighthouseModel.ReporterTypes.ReportJSON): HTMLElement|null {
+    // Ideally, we would only render the scores header, but since it's imported from lighthouse
+    // and it doesn't expose a way to render only the scores header, we render the full report
+    // and strip out the other components.
+    const reportEl = LighthouseReportRenderer.renderLighthouseReport(lhr);
+    const reportContainer = reportEl.querySelector('.lh-container');
+    const scoresHeader = reportEl.querySelector('.lh-scores-header');
+    if (!scoresHeader || !reportContainer) {
+      return null;
+    }
+    reportContainer.replaceChildren(scoresHeader);
+    const topbar = reportEl.querySelector('.lh-topbar');
+    topbar?.remove();
+    return reportEl;
+  }
+
   static async waitForMainTargetLoad(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!mainTarget) {

package/front_end/panels/lighthouse/LighthouseReportSelector.ts

@@ -94,16 +94,28 @@ export class ReportSelector {
   selectNewReport(): void {
     this.#comboBox.select(this.newLighthouseItem);
   }
+
+  selectReport(report: LighthouseModel.ReporterTypes.ReportJSON): void {
+    for (const [optionElement, item] of this.itemByOptionElement) {
+      if (item.report === report) {
+        this.#comboBox.select(optionElement);
+        item.select();
+        return;
+      }
+    }
+  }
 }
 
 export class Item {
   private readonly renderReport: () => void;
   private readonly showLandingCallback: () => void;
   private readonly element: HTMLOptionElement;
+  readonly report: LighthouseModel.ReporterTypes.ReportJSON;
 
   constructor(
       lighthouseResult: LighthouseModel.ReporterTypes.ReportJSON, renderReport: () => void,
       showLandingCallback: () => void) {
+    this.report = lighthouseResult;
     this.renderReport = renderReport;
     this.showLandingCallback = showLandingCallback;
 

package/front_end/panels/lighthouse/lighthouse-meta.ts

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as Lighthouse from './lighthouse.js';
+import * as Lighthouse from './lighthouse.js';
 
 const UIStrings = {
   /**
@@ -41,3 +42,16 @@ UI.ViewManager.registerViewExtension({
     i18n.i18n.lockedLazyString('pwa'),
   ],
 });
+
+Common.Revealer.registerRevealer({
+  contextTypes() {
+    return [
+      Lighthouse.LighthousePanel.ActiveLighthouseReport,
+    ];
+  },
+  destination: Common.Revealer.RevealerDestination.LIGHTHOUSE_PANEL,
+  async loadRevealer() {
+    const Lighthouse = await loadLighthouseModule();
+    return new Lighthouse.LighthousePanel.ReportRevealer();
+  },
+});

package/front_end/panels/recorder/injected/selectors/PierceSelector.ts

@@ -4,7 +4,7 @@
 
 import {
   pierceQuerySelectorAll,
-} from '../../../../third_party/puppeteer/package/lib/esm/puppeteer/injected/PierceQuerySelector.js';
+} from '../../../../third_party/puppeteer/package/lib/puppeteer/injected/PierceQuerySelector.js';
 
 import {
   findMinMax,