Add view memory to security panel

The security panel now has "memory" for which tool was last used
rather than always opening to the security overview view.

Bug: 352364594, b/382253571
Change-Id: I0825a912349cec574ed2205b482378009f913c2c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6182444
Reviewed-by: Danil Somsikov <[email protected]>
Reviewed-by: Shuran Huang <[email protected]>
Commit-Queue: Shuran Huang <[email protected]>

Author: masnoble

front_end/panels/security/CookieControlsTreeElement.ts

@@ -11,8 +11,11 @@ export class CookieControlsTreeElement extends SecurityPanelSidebarTreeElement {
     this.setLeadingIcons([IconButton.Icon.create('gear', 'cookie-icon')]);
   }
 
-  override onselect(): boolean {
+  override get elemId(): string {
+    return 'controls';
+  }
+
+  override showElement(): void {
     this.listItemElement.dispatchEvent(new CustomEvent('showFlagControls', {bubbles: true, composed: true}));
-    return true;
   }
 }

front_end/panels/security/CookieReportTreeElement.ts

@@ -11,8 +11,11 @@ export class CookieReportTreeElement extends SecurityPanelSidebarTreeElement {
     this.setLeadingIcons([IconButton.Icon.create('cookie', 'cookie-icon')]);
   }
 
-  override onselect(): boolean {
+  override get elemId(): string {
+    return 'report';
+  }
+
+  override showElement(): void {
     this.listItemElement.dispatchEvent(new CustomEvent('showCookieReport', {bubbles: true, composed: true}));
-    return true;
   }
 }

front_end/panels/security/OriginTreeElement.ts

@@ -48,9 +48,8 @@ export class OriginTreeElement extends SecurityPanelSidebarTreeElement {
     return this.#originInternal;
   }
 
-  override onselect(): boolean {
+  override showElement(): void {
     this.listItemElement.dispatchEvent(new ShowOriginEvent(this.#originInternal));
-    return true;
   }
 }
 

front_end/panels/security/SecurityPanel.ts

@@ -655,11 +655,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 +670,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 +822,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 +845,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 */);
   }
 

front_end/panels/security/SecurityPanelSidebar.ts

@@ -76,17 +76,22 @@ const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanelSidebar.t
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SecurityPanelSidebar extends UI.Widget.VBox {
+  readonly #securitySidebarLastItemSetting: Common.Settings.Setting<string>;
   readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
   readonly #originGroupTitles: Map<OriginGroup, string>;
   #originGroups: Map<OriginGroup, UI.TreeOutline.TreeElement>;
   securityOverviewElement: OriginTreeElement;
+  readonly #cookieControlsTreeElement: CookieControlsTreeElement|undefined;
+  readonly #cookieReportTreeElement: CookieReportTreeElement|undefined;
   readonly #elementsByOrigin: Map<string, OriginTreeElement>;
   readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
   #mainOrigin: string|null;
 
   constructor(element?: HTMLElement) {
     super(undefined, undefined, element);
 
+    this.#securitySidebarLastItemSetting =
+        Common.Settings.Settings.instance().createSetting('security-last-selected-element-path', 'overview');
     this.#mainOrigin = null;
 
     this.sidebarTree = new UI.TreeOutline.TreeOutlineInShadow(UI.TreeOutline.TreeVariant.NAVIGATION_TREE);
@@ -95,9 +100,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
     if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
       const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
-      privacyTreeSection.appendChild(
-          new CookieControlsTreeElement(i18nString(UIStrings.flagControls), 'cookie-flag-controls'));
-      privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport), 'cookie-report'));
+      this.#cookieControlsTreeElement =
+          new CookieControlsTreeElement(i18nString(UIStrings.flagControls), 'cookie-flag-controls');
+      privacyTreeSection.appendChild(this.#cookieControlsTreeElement);
+      this.#cookieReportTreeElement = new CookieReportTreeElement(i18nString(UIStrings.cookieReport), 'cookie-report');
+      privacyTreeSection.appendChild(this.#cookieReportTreeElement);
     }
 
     const securitySectionTitle = i18nString(UIStrings.security);
@@ -131,6 +138,25 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.#clearOriginGroups();
 
     this.#elementsByOrigin = new Map();
+
+    this.element.addEventListener('update-sidebar-selection', (event: Event) => {
+      const id: string = (event as CustomEvent).detail.id;
+      this.#securitySidebarLastItemSetting.set(id);
+    });
+    this.showLastSelectedElement();
+  }
+
+  showLastSelectedElement(): void {
+    if (this.#cookieControlsTreeElement &&
+        this.#securitySidebarLastItemSetting.get() === this.#cookieControlsTreeElement.elemId) {
+      this.#cookieControlsTreeElement.showElement();
+    } else if (
+        this.#cookieReportTreeElement &&
+        this.#securitySidebarLastItemSetting.get() === this.#cookieReportTreeElement.elemId) {
+      this.#cookieReportTreeElement.showElement();
+    } else {
+      this.securityOverviewElement.showElement();
+    }
   }
 
   #addSidebarSection(title: string, jslogContext: string): UI.TreeOutline.TreeElement {

front_end/panels/security/SecurityPanelSidebarTreeElement.ts

@@ -8,4 +8,21 @@ export class SecurityPanelSidebarTreeElement extends UI.TreeOutline.TreeElement
     super(title, expandable, jslogContext);
     UI.ARIAUtils.setLabel(this.listItemElement, title);
   }
+
+  get elemId(): string {
+    // default landing spot for the security panel
+    return 'overview';
+  }
+
+  showElement(): void {
+    throw new Error('Unimplemented Method');
+  }
+
+  override onselect(): boolean {
+    const id = this.elemId;
+    this.listItemElement.dispatchEvent(
+        new CustomEvent('update-sidebar-selection', {bubbles: true, composed: true, detail: {id}}));
+    this.showElement();
+    return false;
+  }
 }

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2967,6 +2967,7 @@ export const knownContextValues = new Set([
   'second-col',
   'secure',
   'security',
+  'security-last-selected-element-path',
   'security.main-view',
   'security.origin-view',
   'security.toggle-san-truncation',