chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/security/CookieReportView.ts

@@ -2,19 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
+import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as NetworkForward from '../network/forward/forward.js';
 
 import cookieReportViewStyles from './cookieReportView.css.js';
 
-const {render, html, Directives: {ref}} = LitHtml;
+const {render, html, Directives: {ref}} = Lit;
 
 const UIStrings = {
   /**
@@ -24,8 +25,7 @@ const UIStrings = {
   /**
    *@description Explaination in the header about the cookies listed in the report
    */
-  body:
-      'Third-party cookies that might be restricted by users, depending on their settings. If a user chooses to restrict cookies, then this site might not work for them.',
+  body: 'This site might not work if third-party cookies and other cookies are limited in Chrome.',
   /**
    *@description A link the user can follow to learn more about third party cookie usage
    */
@@ -61,7 +61,7 @@ const UIStrings = {
   /**
    *@description Status string in the cookie report for a third-party cookie that is allowed due to a grace period or heuristic exception. Otherwise, this would have been blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
-  allowedByException: 'Allowed By Exception',
+  allowedByException: 'Allowed by exception',
   /**
    *@description Status string in the cookie report for a third-party cookie that was blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
@@ -86,7 +86,7 @@ const UIStrings = {
    *@description String in Cookie Report table. This is used when a cookie's domain has an entry in the third-party cookie migration readiness list GitHub.
    *@example {guidance} PH1
    */
-  gitHubResource: 'Review {PH1} from third-party site.',
+  gitHubResource: 'Review {PH1} from third-party site',
   /**
    *@description Label for a link to an entry in the third-party cookie migration readiness list GitHub.
    */
@@ -103,7 +103,7 @@ const UIStrings = {
   /**
    *@description String in Cookie Report table. This is used when a cookie has a heuristics exception.
    */
-  heuristics: 'Action needed later. Heuristics based exception is active',
+  heuristics: 'Action needed later. Heuristics based exception is active.',
   /**
    *@description String in Cookie Report table. This is used when a cookie's domain does not have an entry in the third-party cookie migration readiness list Github nor a grace period nor heuristics exception.
    */
@@ -176,14 +176,21 @@ const UIStrings = {
    *@description String representing the Other cookie type. Used to format 'other' category from the Third Party Web dataset.
    */
   otherCookieTypeString: 'Other',
+  /**
+   *@description String that shows up in the context menu when right clicking one of the entries in the cookie report.
+   */
+  showRequestsWithThisCookie: 'Show requests with this cookie',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
   gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[];
+  filterItems: UI.FilterBar.Item[];
   onFilterChanged: () => void;
   onSortingChanged: () => void;
+  populateContextMenu:
+      (arg0: UI.ContextMenu.ContextMenu, arg1: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>) => void;
 }
 export interface ViewOutput {
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
@@ -201,27 +208,6 @@ export interface CookieReportNodeData {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
-const filterItems: UI.FilterBar.Item[] = [
-  {
-    name: UIStrings.blocked,
-    label: () => i18nString(UIStrings.blocked),
-    title: UIStrings.blocked,
-    jslogContext: UIStrings.blocked,
-  },
-  {
-    name: UIStrings.allowed,
-    label: () => i18nString(UIStrings.allowed),
-    title: UIStrings.allowed,
-    jslogContext: UIStrings.allowed,
-  },
-  {
-    name: UIStrings.allowedByException,
-    label: () => i18nString(UIStrings.allowedByException),
-    title: UIStrings.allowedByException,
-    jslogContext: UIStrings.allowedByException,
-  },
-];
-
 export class CookieReportView extends UI.Widget.VBox {
   #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
@@ -229,6 +215,7 @@ export class CookieReportView extends UI.Widget.VBox {
   #view: View;
   dataGrid?: DataGrid.DataGrid.DataGridImpl<CookieReportNodeData>;
   gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] = [];
+  filterItems: UI.FilterBar.Item[] = [];
 
   constructor(element?: HTMLElement, view: View = (input, output, target) => {
     const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<CookieReportNodeData> = {
@@ -243,21 +230,23 @@ export class CookieReportView extends UI.Widget.VBox {
         {id: 'recommendation', title: i18nString(UIStrings.recommendation), weight: 1, sortable: true},
       ],
       striped: true,
+      rowContextMenuCallback: input.populateContextMenu.bind(input),
     };
 
     // clang-format off
     render(html `
         <div class="report overflow-auto">
             <div class="header">
-              <div class="title">${i18nString(UIStrings.title)}</div>
-              <div class="body">${i18nString(UIStrings.body)} <x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
+              <h1>${i18nString(UIStrings.title)}</h1>
+              <div class="body">${i18nString(UIStrings.body)} <x-link class="devtools-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
             </div>
             ${input.gridData.length > 0 ?
               html`
                 <devtools-named-bit-set-filter
                   class="filter"
+                  aria-label="Third-party cookie status filters"
                   @filterChanged=${input.onFilterChanged}
-                  .options=${{items: filterItems}}
+                  .options=${{items: input.filterItems}}
                   ${ref((el?: Element) => {
                     if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
                       output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
@@ -295,6 +284,7 @@ export class CookieReportView extends UI.Widget.VBox {
   }) {
     super(true, undefined, element);
     this.#view = view;
+    this.registerRequiredCSS(cookieReportViewStyles);
 
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
@@ -309,25 +299,27 @@ export class CookieReportView extends UI.Widget.VBox {
       }
     }
 
-    this.update();
+    this.requestUpdate();
   }
 
-  override async doUpdate(): Promise<void> {
+  override performUpdate(): void {
     this.gridData = this.#buildNodes();
+    this.filterItems = this.#buildFilterItems();
     this.#view(this, this, this.contentElement);
   }
 
   onFilterChanged(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   onSortingChanged(): void {
-    this.update();
+    this.requestUpdate();
   }
 
   #onPrimaryPageChanged(): void {
     this.#cookieRows.clear();
-    this.update();
+    this.namedBitSetFilterUI = undefined;
+    this.requestUpdate();
   }
 
   #onIssueEventReceived(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
@@ -336,7 +328,7 @@ export class CookieReportView extends UI.Widget.VBox {
         return;
       }
       this.#onIssueAdded(event.data.issue);
-      this.update();
+      this.requestUpdate();
     }
   }
 
@@ -347,6 +339,39 @@ export class CookieReportView extends UI.Widget.VBox {
     }
   }
 
+  #buildFilterItems(): UI.FilterBar.Item[] {
+    const filterItems: UI.FilterBar.Item[] = [];
+
+    if (this.#cookieRows.values().some(n => n.status === IssuesManager.CookieIssue.CookieStatus.BLOCKED)) {
+      filterItems.push({
+        name: UIStrings.blocked,
+        label: () => i18nString(UIStrings.blocked),
+        title: UIStrings.blocked,
+        jslogContext: UIStrings.blocked,
+      });
+    }
+    if (this.#cookieRows.values().some(n => n.status === IssuesManager.CookieIssue.CookieStatus.ALLOWED)) {
+      filterItems.push({
+        name: UIStrings.allowed,
+        label: () => i18nString(UIStrings.allowed),
+        title: UIStrings.allowed,
+        jslogContext: UIStrings.allowed,
+      });
+    }
+    if (this.#cookieRows.values().some(
+            n => n.status === IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_GRACE_PERIOD ||
+                n.status === IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_HEURISTICS)) {
+      filterItems.push({
+        name: UIStrings.allowedByException,
+        label: () => i18nString(UIStrings.allowedByException),
+        title: UIStrings.allowedByException,
+        jslogContext: UIStrings.allowedByException,
+      });
+    }
+
+    return filterItems;
+  }
+
   #buildNodes(): DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] {
     return [...this.#cookieRows.values()]
         .filter(row => {
@@ -392,9 +417,26 @@ export class CookieReportView extends UI.Widget.VBox {
                 ));
   }
 
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([cookieReportViewStyles]);
+  populateContextMenu(
+      contextMenu: UI.ContextMenu.ContextMenu, gridNode: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>): void {
+    const cookie = gridNode as DataGrid.DataGrid.DataGridNode<CookieReportNodeData>;
+    if (!cookie) {
+      return;
+    }
+
+    contextMenu.revealSection().appendItem(i18nString(UIStrings.showRequestsWithThisCookie), () => {
+      const requestFilter = NetworkForward.UIFilter.UIRequestFilter.filters([
+        {
+          filterType: NetworkForward.UIFilter.FilterType.CookieDomain,
+          filterValue: cookie.data['domain'],
+        },
+        {
+          filterType: NetworkForward.UIFilter.FilterType.CookieName,
+          filterValue: cookie.data['name'],
+        },
+      ]);
+      void Common.Revealer.reveal(requestFilter);
+    }, {jslogContext: 'show-requests-with-this-cookie'});
   }
 
   static getStatusString(status: IssuesManager.CookieIssue.CookieStatus): string {
@@ -433,7 +475,7 @@ export class CookieReportView extends UI.Widget.VBox {
     return recElem;
   }
 
-  static getRecommendationText(domain: string, insight?: Protocol.Audits.CookieIssueInsight): LitHtml.TemplateResult {
+  static getRecommendationText(domain: string, insight?: Protocol.Audits.CookieIssueInsight): Lit.TemplateResult {
     if (!insight) {
       return html`${i18nString(UIStrings.other)}`;
     }
@@ -451,8 +493,11 @@ export class CookieReportView extends UI.Widget.VBox {
         })}`;
       }
       case Protocol.Audits.InsightType.GracePeriod: {
+        const url = SDK.TargetManager.TargetManager.instance().primaryPageTarget()?.inspectedURL();
         const gracePeriodLink = UI.XLink.XLink.create(
             'https://developers.google.com/privacy-sandbox/cookies/dashboard?url=' +
+                // The order of the URLs matters - needs to be 1P + 3P.
+                (url ? Common.ParsedURL.ParsedURL.fromString(url)?.host + '+' : '') +
                 (domain.charAt(0) === '.' ? domain.substring(1) : domain),
             i18nString(UIStrings.reportedIssues), undefined, undefined, 'compatibility-lookup-link');
 

package/front_end/panels/security/OriginTreeElement.ts

@@ -48,14 +48,13 @@ export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
     return this.#originInternal;
   }
 
-  override onselect(): boolean {
+  override showElement(): void {
     this.listItemElement.dispatchEvent(new ShowOriginEvent(this.#originInternal));
-    return true;
   }
 }
 
 declare global {
   interface HTMLElementEventMap {
-    'showorigin': ShowOriginEvent;
+    showorigin: ShowOriginEvent;
   }
 }

package/front_end/panels/security/SecurityModel.ts

@@ -84,9 +84,9 @@ export enum Events {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-export type EventTypes = {
-  [Events.VisibleSecurityStateChanged]: PageVisibleSecurityState,
-};
+export interface EventTypes {
+  [Events.VisibleSecurityStateChanged]: PageVisibleSecurityState;
+}
 
 export const SummaryMessages: {[x: string]: () => string} = {
   [Protocol.Security.SecurityState.Unknown]: i18nLazyString(UIStrings.theSecurityOfThisPageIsUnknown),

package/front_end/panels/security/SecurityPanel.test.ts

@@ -2,19 +2,59 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Platform from '../../core/platform/platform.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 {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {createTarget, getGetHostConfigStub} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
 import {getMainFrame, navigate} from '../../testing/ResourceTreeHelpers.js';
 
 import * as Security from './security.js';
 
+const {urlString} = Platform.DevToolsPath;
+
 describeWithMockConnection('SecurityAndPrivacyPanel', () => {
+  describe('viewMemory', () => {
+    it('initially shows control view if privacy UI is enabled', () => {
+      const stub = getGetHostConfigStub({devToolsPrivacyUI: {enabled: true}});
+      const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+
+      assert.instanceOf(securityPanel.visibleView, Security.CookieControlsView.CookieControlsView);
+
+      stub.restore();
+    });
+
+    it('initially shows security main view if privacy UI is not enabled', () => {
+      const stub = getGetHostConfigStub({devToolsPrivacyUI: {enabled: false}});
+      const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+
+      assert.instanceOf(securityPanel.visibleView, Security.SecurityPanel.SecurityMainView);
+
+      stub.restore();
+    });
+
+    it('remembers last selected view when new panel is made', () => {
+      const stub = getGetHostConfigStub({devToolsPrivacyUI: {enabled: true}});
+      let securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+
+      // Should initially be the controls view
+      assert.instanceOf(securityPanel.visibleView, Security.CookieControlsView.CookieControlsView);
+
+      // Select and switch to the security main view
+      securityPanel.sidebar.securityOverviewElement.select(/* omitFocus=*/ false, /* selectedByUser=*/ true);
+      assert.instanceOf(securityPanel.visibleView, Security.SecurityPanel.SecurityMainView);
+
+      // Create a new security panel. The last selected view memory should make the main view visible
+      securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+      assert.instanceOf(securityPanel.visibleView, Security.SecurityPanel.SecurityMainView);
+
+      stub.restore();
+    });
+  });
+
   describe('updateOrigin', () => {
     it('correctly updates the URL scheme highlighting', () => {
-      const origin = 'https://foo.bar' as Platform.DevToolsPath.UrlString;
+      const origin = urlString`https://foo.bar`;
       const securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
 
       securityPanel.sidebar.addOrigin(origin, Protocol.Security.SecurityState.Unknown);

package/front_end/panels/security/SecurityPanel.ts

@@ -11,7 +11,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CookieControlsView} from './CookieControlsView.js';
@@ -30,6 +30,8 @@ import {
 } from './SecurityModel.js';
 import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
 
+const {widgetConfig} = UI.Widget;
+
 const UIStrings = {
   /**
    *@description Summary div text content in Security Panel of the Security panel
@@ -464,7 +466,7 @@ const SignatureSchemeStrings = new Map([
 
 const LOCK_ICON_NAME = 'lock';
 const WARNING_ICON_NAME = 'warning';
-const INFO_ICON_NAME = 'info';
+const UNKNOWN_ICON_NAME = 'indeterminate-question-box';
 
 export function getSecurityStateIconForDetailedView(
     securityState: Protocol.Security.SecurityState, className: string): IconButton.Icon.Icon {
@@ -481,7 +483,7 @@ export function getSecurityStateIconForDetailedView(
       break;
     case Protocol.Security.SecurityState.Info:  // fallthrough
     case Protocol.Security.SecurityState.Unknown:
-      iconName = INFO_ICON_NAME;
+      iconName = UNKNOWN_ICON_NAME;
       break;
   }
 
@@ -494,7 +496,7 @@ export function getSecurityStateIconForOverview(
   switch (securityState) {
     case Protocol.Security.SecurityState.Unknown:  // fallthrough
     case Protocol.Security.SecurityState.Neutral:
-      iconName = INFO_ICON_NAME;
+      iconName = UNKNOWN_ICON_NAME;
       break;
     case Protocol.Security.SecurityState.Insecure:  // fallthrough
     case Protocol.Security.SecurityState.InsecureBroken:
@@ -531,22 +533,21 @@ export function createHighlightedUrl(url: Platform.DevToolsPath.UrlString, secur
   return highlightedUrl;
 }
 
-const {render, html} = LitHtml;
-export type ViewInput = {
-  panel: SecurityPanel,
-};
-export type ViewOutput = {
-  setVisibleView: (view: UI.Widget.VBox) => void,
-  splitWidget: UI.SplitWidget.SplitWidget,
-  mainView: SecurityMainView,
-  visibleView: UI.Widget.VBox|null,
-  sidebar: SecurityPanelSidebar,
-};
+export interface ViewInput {
+  panel: SecurityPanel;
+}
+export interface ViewOutput {
+  setVisibleView: (view: UI.Widget.VBox) => void;
+  splitWidget: UI.SplitWidget.SplitWidget;
+  mainView: SecurityMainView;
+  visibleView: UI.Widget.VBox|null;
+  sidebar: SecurityPanelSidebar;
+}
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.SDKModelObserver<SecurityModel> {
-  readonly mainView!: SecurityMainView;
+  readonly mainView: SecurityMainView;
   readonly sidebar!: SecurityPanelSidebar;
   private readonly lastResponseReceivedForLoaderId: Map<string, SDK.NetworkRequest.NetworkRequest>;
   private readonly origins: Map<string, OriginState>;
@@ -563,15 +564,9 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     <devtools-split-widget
     .options=${{vertical: true, settingName: 'security'}}
     ${UI.Widget.widgetRef(UI.SplitWidget.SplitWidget, e => {output.splitWidget = e;})}>
-        <devtools-widget
-          slot="main"
-          .widgetClass=${SecurityMainView}
-          .widgetParams=${[input.panel] as SecurityMainViewProps}
-          ${UI.Widget.widgetRef(SecurityMainView, e => {output.mainView = e;})}>
-        </devtools-widget>
         <devtools-widget
           slot="sidebar"
-          .widgetClass=${SecurityPanelSidebar}
+          .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
           @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
           @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
           ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
@@ -582,12 +577,14 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   }) {
     super('security');
 
-    void this.doUpdate();
+    this.update();
 
     this.sidebar.setMinimumSize(100, 25);
     this.sidebar.element.classList.add('panel-sidebar');
     this.sidebar.element.setAttribute('jslog', `${VisualLogging.pane('sidebar').track({resize: true})}`);
 
+    this.mainView = new SecurityMainView();
+    this.mainView.panel = this;
     this.element.addEventListener(ShowOriginEvent.eventName, (event: ShowOriginEvent) => {
       if (event.origin) {
         this.showOrigin(event.origin);
@@ -610,6 +607,8 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
         this.onPrimaryPageChanged, this);
+
+    this.sidebar.showLastSelectedElement();
   }
 
   static instance(opts: {forceNew: boolean|null} = {forceNew: null}): SecurityPanel {
@@ -642,7 +641,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     return certificateButton;
   }
 
-  override async doUpdate(): Promise<void> {
+  update(): void {
     this.view({panel: this}, this, this.contentElement);
   }
 
@@ -655,11 +654,6 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     this.updateVisibleSecurityState(data);
   }
 
-  selectAndSwitchToMainView(): void {
-    // The sidebar element will trigger displaying the main view. Rather than making a redundant call to display the main view, we rely on this.
-    this.sidebar.securityOverviewElement.select(true);
-  }
-
   showOrigin(origin: Platform.DevToolsPath.UrlString): void {
     const originState = this.origins.get(origin);
     if (!originState) {
@@ -675,7 +669,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   override wasShown(): void {
     super.wasShown();
     if (!this.visibleView) {
-      this.selectAndSwitchToMainView();
+      this.sidebar.showLastSelectedElement();
     }
   }
 
@@ -827,9 +821,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    if (!(this.visibleView instanceof CookieReportView) && !(this.visibleView instanceof CookieControlsView)) {
-      this.selectAndSwitchToMainView();
-    }
+    this.sidebar.showLastSelectedElement();
     this.sidebar.clearOrigins();
     this.origins.clear();
     this.lastResponseReceivedForLoaderId.clear();
@@ -852,8 +844,8 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   private onInterstitialShown(): void {
     // The panel might have been displaying the origin view on the
     // previously loaded page. When showing an interstitial, switch
-    // back to the Overview view.
-    this.selectAndSwitchToMainView();
+    // back to the sidebar's last shown view.
+    this.sidebar.showLastSelectedElement();
     this.sidebar.toggleOriginsList(true /* hidden */);
   }
 
@@ -871,9 +863,8 @@ export enum OriginGroup {
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
-type SecurityMainViewProps = [SecurityPanel];
 export class SecurityMainView extends UI.Widget.VBox {
-  private readonly panel: SecurityPanel;
+  panel!: SecurityPanel;
   private readonly summarySection: HTMLElement;
   private readonly securityExplanationsMain: HTMLElement;
   private readonly securityExplanationsExtra: HTMLElement;
@@ -881,16 +872,15 @@ export class SecurityMainView extends UI.Widget.VBox {
   private summaryText: HTMLElement;
   private explanations: (Protocol.Security.SecurityStateExplanation|SecurityStyleExplanation)[]|null;
   private securityState: Protocol.Security.SecurityState|null;
-  constructor(panel: SecurityPanel, element?: HTMLElement) {
+  constructor(element?: HTMLElement) {
     super(undefined, undefined, element);
+    this.registerRequiredCSS(lockIconStyles, mainViewStyles);
     this.element.setAttribute('jslog', `${VisualLogging.pane('security.main-view')}`);
 
     this.setMinimumSize(200, 100);
 
     this.contentElement.classList.add('security-main-view');
 
-    this.panel = panel;
-
     this.summarySection = this.contentElement.createChild('div', 'security-summary');
 
     // Info explanations should appear after all others.
@@ -1329,10 +1319,6 @@ export class SecurityMainView extends UI.Widget.VBox {
     void Common.Revealer.reveal(NetworkForward.UIFilter.UIRequestFilter.filters(
         [{filterType: NetworkForward.UIFilter.FilterType.MixedContent, filterValue: filterKey}]));
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([lockIconStyles, mainViewStyles]);
-  }
 }
 
 export class SecurityOriginView extends UI.Widget.VBox {
@@ -1340,6 +1326,7 @@ export class SecurityOriginView extends UI.Widget.VBox {
   private readonly originLockIcon: HTMLElement;
   constructor(panel: SecurityPanel, origin: Platform.DevToolsPath.UrlString, originState: OriginState) {
     super();
+    this.registerRequiredCSS(originViewStyles, lockIconStyles);
     this.element.setAttribute('jslog', `${VisualLogging.pane('security.origin-view')}`);
     this.panel = panel;
     this.setMinimumSize(200, 100);
@@ -1601,11 +1588,6 @@ export class SecurityOriginView extends UI.Widget.VBox {
         newSecurityState, `security-property security-property-${newSecurityState}`);
     this.originLockIcon.appendChild(icon);
   }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([originViewStyles, lockIconStyles]);
-  }
 }
 
 export class SecurityDetailsTable {
@@ -1640,3 +1622,19 @@ export interface OriginState {
 }
 
 export type Origin = Platform.DevToolsPath.UrlString;
+
+export class SecurityRevealer implements Common.Revealer.Revealer<CookieReportView> {
+  async reveal(): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('security');
+    const view = UI.ViewManager.ViewManager.instance().view('security');
+    if (view) {
+      const securityPanel = await view.widget();
+      if (securityPanel instanceof SecurityPanel && securityPanel.sidebar.cookieReportTreeElement) {
+        securityPanel.sidebar.cookieReportTreeElement.select(/* omitFocus=*/ false, /* selectedByUser=*/ true);
+      } else {
+        throw new Error(
+            'Expected securityPanel to be an instance of SecurityPanel with a cookieReportTreeElement in the sidebar');
+      }
+    }
+  }
+}