Reland "[IPP Devtools] Create basic side panel to hold IPP in P&S panel"

This is a reland of commit b3481fd

Original change's description:
> [IPP Devtools] Create basic side panel to hold IPP in P&S panel
>
> Create a new side panel named “IP Protection Proxy” that will hold all
> information in the privacy and security panel that is associated with IP
> protection.
>
> Bug: 429151565
> Change-Id: I522b1199dabf756b69944ca776d481d3ef333195
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6718272
> Reviewed-by: Philip Pfaffe <[email protected]>
> Reviewed-by: Danil Somsikov <[email protected]>
> Commit-Queue: Clare Jin <[email protected]>

Bug: 429151565
Change-Id: Ib7869cc134fa4555c76488cf5ec9fb396097062e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6837896
Reviewed-by: Philip Pfaffe <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Clare Jin <[email protected]>

Author: clarej12

config/gni/devtools_grd_files.gni

@@ -1796,13 +1796,16 @@ grd_files_unbundled_sources = [
   "front_end/panels/security/CookieControlsView.js",
   "front_end/panels/security/CookieReportTreeElement.js",
   "front_end/panels/security/CookieReportView.js",
+  "front_end/panels/security/IPProtectionTreeElement.js",
+  "front_end/panels/security/IPProtectionView.js",
   "front_end/panels/security/OriginTreeElement.js",
   "front_end/panels/security/SecurityModel.js",
   "front_end/panels/security/SecurityPanel.js",
   "front_end/panels/security/SecurityPanelSidebar.js",
   "front_end/panels/security/SecurityPanelSidebarTreeElement.js",
   "front_end/panels/security/cookieControlsView.css.js",
   "front_end/panels/security/cookieReportView.css.js",
+  "front_end/panels/security/ipProtectionView.css.js",
   "front_end/panels/security/lockIcon.css.js",
   "front_end/panels/security/mainView.css.js",
   "front_end/panels/security/originView.css.js",

front_end/core/host/InspectorFrontendHost.ts

@@ -419,6 +419,9 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
         thirdPartyCookieHeuristicsEnabled: true,
         managedBlockThirdPartyCookies: 'Unset',
       },
+      devToolsIpProtectionPanelInDevTools: {
+        enabled: false,
+      }
     };
     if ('hostConfigForTesting' in globalThis) {
       const {hostConfigForTesting} = (globalThis as unknown as {hostConfigForTesting: Root.Runtime.HostConfig});

front_end/core/root/Runtime.ts

@@ -442,6 +442,10 @@ export interface HostConfigThirdPartyCookieControls {
   managedBlockThirdPartyCookies: string|boolean;
 }
 
+export interface HostConfigIPProtection {
+  enabled: boolean;
+}
+
 interface AiGeneratedTimelineLabels {
   enabled: boolean;
 }
@@ -491,6 +495,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsVeLogging: HostConfigVeLogging,
   devToolsWellKnown: HostConfigWellKnown,
   devToolsPrivacyUI: HostConfigPrivacyUI,
+  devToolsIpProtectionPanelInDevTools: HostConfigIPProtection,
   /**
    * OffTheRecord here indicates that the user's profile is either incognito,
    * or guest mode, rather than a "normal" profile.

front_end/panels/security/BUILD.gn

@@ -12,6 +12,7 @@ generate_css("css_files") {
   sources = [
     "cookieControlsView.css",
     "cookieReportView.css",
+    "ipProtectionView.css",
     "lockIcon.css",
     "mainView.css",
     "originView.css",
@@ -25,6 +26,8 @@ devtools_module("security") {
     "CookieControlsView.ts",
     "CookieReportTreeElement.ts",
     "CookieReportView.ts",
+    "IPProtectionTreeElement.ts",
+    "IPProtectionView.ts",
     "OriginTreeElement.ts",
     "SecurityModel.ts",
     "SecurityPanel.ts",

front_end/panels/security/IPProtectionTreeElement.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+
+import {SecurityPanelSidebarTreeElement} from './SecurityPanelSidebarTreeElement.js';
+
+export class IPProtectionTreeElement extends SecurityPanelSidebarTreeElement {
+  constructor(title: string, jslogContext: string|number) {
+    super(title, false, jslogContext);
+    this.setLeadingIcons([IconButton.Icon.create('shield', 'shield-icon')]);
+  }
+
+  override get elemId(): string {
+    return 'protection';
+  }
+
+  override showElement(): void {
+    this.listItemElement.dispatchEvent(new CustomEvent('showIPProtection', {bubbles: true, composed: true}));
+  }
+}

front_end/panels/security/IPProtectionView.ts

@@ -0,0 +1,89 @@
+// Copyright 2025 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/* eslint-disable rulesdir/no-lit-render-outside-of-view */
+
+import '../../ui/components/switch/switch.js';
+import '../../ui/components/cards/cards.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+
+import ipProtectionViewStyles from './ipProtectionView.css.js';
+
+const {render, html} = Lit;
+
+const UIStrings = {
+  /**
+   *@description Title in the view's header for the IP Protection tool in the Privacy & Security panel
+   */
+  viewTitle: 'IP Protection Proxy Controls',
+  /**
+   *@description Explanation in the view's header about the purpose of this IP Protection tool
+   */
+  viewExplanation: 'Test how this site will perform if IP Proxy is enabled in Chrome',
+  /**
+   *@description Title in the card within the IP Protection tool
+   */
+  cardTitle: 'Bypass IP Protection',
+  /**
+   *@description Description in the card within the IP Protection tool
+   */
+  cardDescription: 'Only when DevTools is open',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/security/IPProtectionView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nFormatString = i18n.i18n.getFormatLocalizedString.bind(undefined, str_);
+
+export type View = (input: object, output: object, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _, target) => {
+  // clang-format off
+  render(html`
+    <style>
+      ${ipProtectionViewStyles}
+    </style>
+    <div class="overflow-auto">
+      <div class="ip-protection">
+        <div class="header">
+          <h1>${i18nString(UIStrings.viewTitle)}</h1>
+          <div class="body">${i18nString(UIStrings.viewExplanation)}</div>
+        </div>
+        <devtools-card class="card-container">
+          <div class="card">
+            <div class="card-header">
+              <div class="lhs">
+                <div class="text">
+                  <h2 class="main-text">${i18nString(UIStrings.cardTitle)}</h2>
+                  <div class="body-subtext">
+                    ${i18nString(UIStrings.cardDescription)}
+                  </div>
+                </div>
+                <div>
+                  <devtools-switch></devtools-switch>
+                </div>
+              </div>
+            </div>
+          </div>
+        </devtools-card>
+      </div>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class IPProtectionView extends UI.Widget.VBox {
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(this, this, this.contentElement);
+  }
+}

front_end/panels/security/SecurityPanel.test.ts

@@ -44,6 +44,28 @@ describeWithMockConnection('SecurityAndPrivacyPanel', () => {
       securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
       assert.instanceOf(securityPanel.visibleView, Security.SecurityPanel.SecurityMainView);
     });
+
+    it('remembers last selected view for IP Protection', () => {
+      updateHostConfig({
+        devToolsPrivacyUI: {enabled: true},
+        devToolsIpProtectionPanelInDevTools: {enabled: true},
+      });
+      let securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+
+      // Should initially be the controls view, as it's the first item in the privacy section.
+      assert.instanceOf(securityPanel.visibleView, Security.CookieControlsView.CookieControlsView);
+
+      const ipProtectionTreeElement = securityPanel.sidebar.ipProtectionTreeElement;
+      assert.exists(ipProtectionTreeElement, 'IPProtectionTreeElement should exist when feature is enabled');
+
+      // Select and switch to the IP Protection view
+      ipProtectionTreeElement.select(/* omitFocus=*/ false, /* selectedByUser=*/ true);
+      assert.instanceOf(securityPanel.visibleView, Security.IPProtectionView.IPProtectionView);
+
+      // Create a new security panel. The last selected view memory should make the IP Protection view visible
+      securityPanel = Security.SecurityPanel.SecurityPanel.instance({forceNew: true});
+      assert.instanceOf(securityPanel.visibleView, Security.IPProtectionView.IPProtectionView);
+    });
   });
 
   describe('updateOrigin', () => {

front_end/panels/security/SecurityPanel.ts

@@ -18,6 +18,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CookieControlsView} from './CookieControlsView.js';
 import {CookieReportView} from './CookieReportView.js';
+import {IPProtectionView} from './IPProtectionView.js';
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
 import {ShowOriginEvent} from './OriginTreeElement.js';
@@ -568,6 +569,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
         <devtools-widget
           slot="sidebar"
           .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
+          @showIPProtection=${() => output.setVisibleView(new IPProtectionView())}
           @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
           @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
           ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>

front_end/panels/security/SecurityPanelSidebar.ts

@@ -13,6 +13,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
 import {CookieReportTreeElement} from './CookieReportTreeElement.js';
+import {IPProtectionTreeElement} from './IPProtectionTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
 import {
@@ -41,6 +42,10 @@ const UIStrings = {
    * @description Sidebar element text in the Security panel
    */
   flagControls: 'Controls',
+  /**
+   * @description Sidebar element text in the Security panel
+   */
+  ipProtection: 'IP Protection',
   /**
    * @description Text in Security Panel of the Security panel
    */
@@ -78,6 +83,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
   securityOverviewElement: OriginTreeElement;
   readonly #cookieControlsTreeElement: CookieControlsTreeElement|undefined;
   readonly cookieReportTreeElement: CookieReportTreeElement|undefined;
+  readonly ipProtectionTreeElement: IPProtectionTreeElement|undefined;
   readonly #elementsByOrigin: Map<string, OriginTreeElement>;
   readonly #mainViewReloadMessage: UI.TreeOutline.TreeElement;
   #mainOrigin: string|null;
@@ -102,6 +108,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
       this.cookieReportTreeElement = new CookieReportTreeElement(i18nString(UIStrings.cookieReport), 'cookie-report');
       privacyTreeSection.appendChild(this.cookieReportTreeElement);
 
+      if (Root.Runtime.hostConfig.devToolsIpProtectionPanelInDevTools?.enabled) {
+        this.ipProtectionTreeElement = new IPProtectionTreeElement(i18nString(UIStrings.ipProtection), 'ip-protection');
+        privacyTreeSection.appendChild(this.ipProtectionTreeElement);
+      }
+
       // If this if the first time this setting is set, go to the controls tool
       if (this.#securitySidebarLastItemSetting.get() === '') {
         this.#securitySidebarLastItemSetting.set(this.#cookieControlsTreeElement.elemId);
@@ -181,6 +192,11 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
         this.#securitySidebarLastItemSetting.get() === this.cookieReportTreeElement.elemId) {
       this.cookieReportTreeElement.select();
       this.cookieReportTreeElement.showElement();
+    } else if (
+        this.ipProtectionTreeElement &&
+        this.#securitySidebarLastItemSetting.get() === this.ipProtectionTreeElement.elemId) {
+      this.ipProtectionTreeElement.select();
+      this.ipProtectionTreeElement.showElement();
     } else {
       this.securityOverviewElement.select();
       this.securityOverviewElement.showElement();

front_end/panels/security/ipProtectionView.css

@@ -0,0 +1,91 @@
+/*
+ * Copyright 2025 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    width: 100%;
+    box-shadow: none;
+  }
+
+  .overflow-auto {
+    height: 100%;
+  }
+
+  .ip-protection {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sys-size-5) var(--sys-size-3) var(--sys-size-5) var(--sys-size-5);
+    min-width: var(--sys-size-33);
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-2);
+    padding-left: var(--sys-size-5);
+  }
+
+  h1 {
+    margin: 0;
+    font: var(--sys-typescale-headline4);
+  }
+
+  .card-container {
+    max-width: 100%;
+  }
+
+  .card {
+    display: flex;
+    flex-direction: column;
+    padding: var(--sys-size-6) var(--sys-size-8);
+    gap: var(--sys-size-6);
+
+    &.enterprise-disabled {
+      color: var(--sys-color-token-subtle);
+    }
+  }
+
+  .card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .card-header > .lhs {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-right: var(--sys-size-9);
+
+    & > devtools-icon {
+      height: var(--sys-size-11);
+      width: var(--sys-size-11);
+    }
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-size-2);
+  }
+
+  h2 {
+    font: var(--sys-typescale-headline5);
+    margin: 0;
+  }
+
+  .body {
+    font: var(--sys-typescale-body4-regular);
+  }
+
+  .main-text {
+    color: var(--sys-color-on-surface);
+  }
+
+  .body-subtext {
+    color: var(--sys-color-on-surface-subtle);
+  }
+}