chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/security/CookieControlsView.ts

@@ -26,89 +26,89 @@ const {render, html} = Lit;
 
 const UIStrings = {
   /**
-   *@description Title in the view's header for the controls tool in the Privacy & Security panel
+   * @description Title in the view's header for the controls tool in the Privacy & Security panel
    */
   viewTitle: 'Controls',
   /**
-   *@description Explanation in the view's header about the purpose of this controls tool
+   * @description Explanation in the view's header about the purpose of this controls tool
    */
   viewExplanation: 'Test how this site will perform if third-party cookies are limited in Chrome',
   /**
-   *@description Title in the card within the controls tool
+   * @description Title in the card within the controls tool
    */
   cardTitle: 'Temporarily limit third-party cookies',
   /**
-   *@description Disclaimer beneath the card title to tell the user that the controls will only persist while devtools is open
+   * @description Disclaimer beneath the card title to tell the user that the controls will only persist while devtools is open
    */
   cardDisclaimer: 'Only when DevTools is open',
   /**
-   *@description Message as part of the banner that prompts the user to reload the page to see the changes take effect. This appears when the user makes any change within the tool
+   * @description Message as part of the banner that prompts the user to reload the page to see the changes take effect. This appears when the user makes any change within the tool
    */
   siteReloadMessage: 'To apply your updated controls, reload the page',
   /**
-   *@description Title of controls section. These are exceptions that the user will be able to override to test their site
+   * @description Title of controls section. These are exceptions that the user will be able to override to test their site
    */
   exceptions: 'Exceptions',
   /**
-   *@description Explanation of what exceptions are in this context
+   * @description Explanation of what exceptions are in this context
    */
   exceptionsExplanation: 'Scenarios that grant access to third-party cookies',
   /**
-   *@description Title for the grace period exception control
+   * @description Title for the grace period exception control
    */
   gracePeriodTitle: 'Third-party cookie grace period',
   /**
-   *@description Explanation of the grace period and a link to learn more
-   *@example {grace period} PH1
+   * @description Explanation of the grace period and a link to learn more
+   * @example {grace period} PH1
    */
   gracePeriodExplanation:
       'If this site or a site embedded on it is enrolled in the {PH1}, then the site can access third-party cookies',
   /**
-   *@description Text shown when a site and its embedded resources are not enrolled in a grace period.
-   *@example {grace period} PH1
+   * @description Text shown when a site and its embedded resources are not enrolled in a grace period.
+   * @example {grace period} PH1
    */
   enrollGracePeriod: 'To use this, enroll this site or sites embedded on it in the {PH1}',
   /**
-   *@description Text used for link within gracePeriodExplanation and enrollGracePeriod to let the user learn more about the grace period
+   * @description Text used for link within gracePeriodExplanation and enrollGracePeriod to let the user learn more about the grace period
    */
   gracePeriod: 'grace period',
   /**
-   *@description Title for the heuristic exception control
+   * @description Title for the heuristic exception control
    */
   heuristicTitle: 'Heuristics based exception',
   /**
-   *@description Explanation of the heuristics with a link to learn more about the scenarios in which they apply
-   *@example {predefined scenarios} PH1
+   * @description Explanation of the heuristics with a link to learn more about the scenarios in which they apply
+   * @example {predefined scenarios} PH1
    */
   heuristicExplanation:
       'In {PH1} like pop-ups or redirects, a site embedded on this site can access third-party cookies',
   /**
-   *@description Text used for link within the heuristicExplanation to let the user learn more about the heuristic exception
+   * @description Text used for link within the heuristicExplanation to let the user learn more about the heuristic exception
    */
   scenarios: 'predefined scenarios',
   /**
-   *@description Note at the bottom of the controls tool telling the user that their organization has an enterprise policy that controls cookies. This may disable the tool
+   * @description Note at the bottom of the controls tool telling the user that their organization has an enterprise policy that controls cookies. This may disable the tool
    */
   enterpriseDisclaimer: 'Your organization manages third-party cookie access for this site',
   /**
-   *@description Tooltip that appears when the user hovers over the card's enterprise icon
+   * @description Tooltip that appears when the user hovers over the card's enterprise icon
    */
   enterpriseTooltip: 'This setting is managed by your organization',
   /**
-    +*@description Button with the enterpise disclaimer that takes the user to the relevant enterprise cookie chrome setting
+   * +*@description Button with the enterpise disclaimer that takes the user to the relevant enterprise cookie chrome setting
    */
   viewDetails: 'View details',
   /**
-   *@description Text shown when the Third-party Cookie Metadata Grants flag or Third-party Cookie Heuristics Grants flag is disabled with a link to the flag in chrome://flags/.
-   *@example {#tpcd-heuristics-grants} PH1
+   * @description Text shown when the Third-party Cookie Metadata Grants flag or Third-party Cookie Heuristics Grants flag is disabled with a link to the flag in chrome://flags/.
+   * @example {#tpcd-heuristics-grants} PH1
    */
   enableFlag: 'To use this, set {PH1} to Default',
   /**
-   *@description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Metadata Grants flag.
+   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Metadata Grants flag.
    */
   tpcdMetadataGrants: '#tpcd-metadata-grants',
   /**
-   *@description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Heuristics Grants flag.
+   * @description Text used for link within the enableFlag to show users where they can enable the Third-party Cookie Heuristics Grants flag.
    */
   tpcdHeuristicsGrants: '#tpcd-heuristics-grants',
 } as const;
@@ -174,7 +174,7 @@ export class CookieControlsView extends UI.Widget.VBox {
           ${Boolean(enterpriseEnabledSetting.get()) ? html `
             <devtools-icon
               tabindex="0"
-              .name=${'domain'}
+              name="domain"
               ${Lit.Directives.ref((el: Element|undefined) => {
                 UI.Tooltip.Tooltip.install(el as HTMLElement, i18nString(UIStrings.enterpriseTooltip));
                 (el as HTMLElement).role = 'img';
@@ -266,7 +266,7 @@ export class CookieControlsView extends UI.Widget.VBox {
         <div class="text body">${i18nString(UIStrings.enterpriseDisclaimer)}</div>
           <div class="anchor">
             <devtools-icon
-            .name=${'domain'}
+            name="domain"
             ></devtools-icon>
             <devtools-button
             @click=${input.openChromeCookieSettings}
@@ -305,7 +305,7 @@ export class CookieControlsView extends UI.Widget.VBox {
     `, target, {host: this});
     // clang-format on
   }) {
-    super(true, undefined, element);
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.#isGracePeriodActive = false;
     this.#thirdPartyControlsDict = Root.Runtime.hostConfig.thirdPartyCookieControls;

package/front_end/panels/security/CookieReportView.ts

@@ -23,165 +23,149 @@ const {render, html, Directives: {ref}} = Lit;
 
 const UIStrings = {
   /**
-   *@description Title in the header for the third-party cookie report in the Security & Privacy Panel
+   * @description Title in the header for the third-party cookie report in the Security & Privacy Panel
    */
   title: 'Third-party cookies',
   /**
-   *@description Explanation in the header about the cookies listed in the report
+   * @description Explanation in the header about the cookies listed in the report
    */
   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
+   * @description A link the user can follow to learn more about third party cookie usage
    */
   learnMoreLink: 'Learn more about how third-party cookies are used',
   /**
-   *@description Column header for Cookie Report table. This column will contain the name of the cookie
+   * @description Column header for Cookie Report table. This column will contain the name of the cookie
    */
   name: 'Name',
   /**
-   *@description Column header for Cookie Report table. This column will contain the domain of the cookie
+   * @description Column header for Cookie Report table. This column will contain the domain of the cookie
    */
   domain: 'Domain',
   /**
-   *@description Column header for Cookie Report table. This column will contain the type of the cookie. E.g. Advertisement, Marketing, etc.
+   * @description Column header for Cookie Report table. This column will contain the type of the cookie. E.g. Advertisement, Marketing, etc.
    */
   type: 'Type',
   /**
-   *@description Column header for Cookie Report table. This column will contain the third-party of the cookie. E.g. Amazon Analytics, etc.
+   * @description Column header for Cookie Report table. This column will contain the third-party of the cookie. E.g. Amazon Analytics, etc.
    */
   platform: 'Platform',
   /**
-   *@description Column header for Cookie Report table, This column will contain the actionable step the user can take (if any) for the cookie
+   * @description Column header for Cookie Report table, This column will contain the actionable step the user can take (if any) for the cookie
    */
   recommendation: 'Recommendation',
   /**
-   *@description Column header for Cookie Report table. This column will contain the blocked or allowed status of the cookie. See status strings below for more information on the different statuses
+   * @description Column header for Cookie Report table. This column will contain the blocked or allowed status of the cookie. See status strings below for more information on the different statuses
    */
   status: 'Status',
   /**
-   *@description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status
+   * @description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
   allowed: 'Allowed',
   /**
-   *@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
+   * @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',
   /**
-   *@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
+   * @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
    */
   blocked: 'Blocked',
   /**
-   *@description String in the Cookie Report table. This is used when any data could not be fetched and that cell is unknown
+   * @description String in the Cookie Report table. This is used when any data could not be fetched and that cell is unknown
    */
   unknown: 'Unknown',
   /**
-   *@description Display name for the Cookie Report table. This string is used by the data grid for accessibility.
+   * @description Display name for the Cookie Report table. This string is used by the data grid for accessibility.
    */
   report: 'Third-Party Cookie Report',
   /**
-   *@description The main string the user sees when there are no cookie issues to show. This will take place of the table
+   * @description The main string the user sees when there are no cookie issues to show. This will take place of the table
    */
   emptyReport: 'Not a crumb left',
   /**
-   *@description Explanation to the user that there were no third-party cookie related issues found which is why they are not seeing the table/report
+   * @description Explanation to the user that there were no third-party cookie related issues found which is why they are not seeing the table/report
    */
   emptyReportExplanation: 'No issues with third-party cookies found',
   /**
-   *@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
+   * @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',
   /**
-   *@description Label for a link to an entry in the third-party cookie migration readiness list GitHub.
+   * @description Label for a link to an entry in the third-party cookie migration readiness list GitHub.
    */
   guidance: 'guidance',
   /**
-   *@description String in Cookie Report table. This is used when a cookie has a grace period exception.
-   *@example {reported issues} PH1
+   * @description String in Cookie Report table. This is used when a cookie has a grace period exception.
+   * @example {reported issues} PH1
    */
   gracePeriod: 'Review {PH1}. Grace period exception is active.',
   /**
-   *@description Label for a link to third-party cookie site compatibility look-up.
+   * @description Label for a link to third-party cookie site compatibility look-up.
    */
   reportedIssues: 'reported issues',
   /**
-   *@description String in Cookie Report table. This is used when a cookie has a heuristics exception.
+   * @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.',
   /**
-   *@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.
+   * @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.
    */
   other: 'Contact third-party site for more info',
   /**
-   *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
-   */
-  gitHubResourceInsightTypeString: 'Github',
-  /**
-   *@description String representing the GracePeriod insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
-   */
-  gracePeriodInsightTypeString: 'Grace Period',
-  /**
-   *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
-   */
-  heuristicsInisightTypeString: 'Heuristics',
-  /**
-   *@description String representing a null insight type. Used as filter chip text to allow the user to filter the table based on recommendation.
-   */
-  otherInsightTypeString: 'Other',
-  /**
-   *@description String representing the Advertising cookie type. Used to format 'ad' category from the Third Party Web dataset.
+   * @description String representing the Advertising cookie type. Used to format 'ad' category from the Third Party Web dataset.
    */
   adCookieTypeString: 'Advertising',
   /**
-   *@description String representing the Analytics cookie type. Used to format 'analytics' category from the Third Party Web dataset.
+   * @description String representing the Analytics cookie type. Used to format 'analytics' category from the Third Party Web dataset.
    */
   analyticsCookieTypeString: 'Analytics',
   /**
-   *@description String representing the Social cookie type. Used to format 'social' category from the Third Party Web dataset.
+   * @description String representing the Social cookie type. Used to format 'social' category from the Third Party Web dataset.
    */
   socialCookieTypeString: 'Social',
   /**
-   *@description String representing the Video cookie type. Used to format 'video' category from the Third Party Web dataset.
+   * @description String representing the Video cookie type. Used to format 'video' category from the Third Party Web dataset.
    */
   videoCookieTypeString: 'Video',
   /**
-   *@description String representing the Utility cookie type. Used to format 'utility' category from the Third Party Web dataset.
+   * @description String representing the Utility cookie type. Used to format 'utility' category from the Third Party Web dataset.
    */
   utilityCookieTypeString: 'Utility',
   /**
-   *@description String representing the Hosting cookie type. Used to format 'hosting' category from the Third Party Web dataset.
+   * @description String representing the Hosting cookie type. Used to format 'hosting' category from the Third Party Web dataset.
    */
   hostingCookieTypeString: 'Hosting',
   /**
-   *@description String representing the Marketing cookie type. Used to format 'marketing' category from the Third Party Web dataset.
+   * @description String representing the Marketing cookie type. Used to format 'marketing' category from the Third Party Web dataset.
    */
   marketingCookieTypeString: 'Marketing',
   /**
-   *@description String representing the Customer Success cookie type. Used to format 'customer-success' category from the Third Party Web dataset.
+   * @description String representing the Customer Success cookie type. Used to format 'customer-success' category from the Third Party Web dataset.
    */
   customerSuccessCookieTypeString: 'Customer Success',
   /**
-   *@description String representing the Content cookie type. Used to format 'content' category from the Third Party Web dataset.
+   * @description String representing the Content cookie type. Used to format 'content' category from the Third Party Web dataset.
    */
   contentCookieTypeString: 'Content',
   /**
-   *@description String representing the CDN cookie type. Used to format 'cdn' category from the Third Party Web dataset.
+   * @description String representing the CDN cookie type. Used to format 'cdn' category from the Third Party Web dataset.
    */
   cdnCookieTypeString: 'CDN',
   /**
-   *@description String representing the Tag Manager cookie type. Used to format 'tag-manager' category from the Third Party Web dataset.
+   * @description String representing the Tag Manager cookie type. Used to format 'tag-manager' category from the Third Party Web dataset.
    */
   tagManagerCookieTypeString: 'Tag Manager',
   /**
-   *@description String representing the Consent Provider cookie type. Used to format 'consent-provider' category from the Third Party Web dataset.
+   * @description String representing the Consent Provider cookie type. Used to format 'consent-provider' category from the Third Party Web dataset.
    */
   consentProviderCookieTypeString: 'Consent Provider',
   /**
-   *@description String representing the Other cookie type. Used to format 'other' category from the Third Party Web dataset.
+   * @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.
+   * @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',
 } as const;
@@ -286,7 +270,7 @@ export class CookieReportView extends UI.Widget.VBox {
                 <div class="empty-report">
                   <devtools-icon
                     class="cookie-off"
-                    .name=${'cookie_off'}
+                    name="cookie_off"
                   ></devtools-icon>
                   <div class="empty-report-title">
                     ${i18nString(UIStrings.emptyReport)}
@@ -302,7 +286,7 @@ export class CookieReportView extends UI.Widget.VBox {
     `, target, {host: this});
     // clang-format on
   }) {
-    super(true, undefined, element);
+    super(element, {useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(cookieReportViewStyles);
     this.searchText = Common.Settings.Settings.instance().createSetting('cookie-report-search-query', '').get();
@@ -443,23 +427,6 @@ export class CookieReportView extends UI.Widget.VBox {
     }
   }
 
-  static getInsightTypeString(insight?: Protocol.Audits.CookieIssueInsight): string {
-    if (!insight) {
-      return i18nString(UIStrings.otherInsightTypeString);
-    }
-
-    switch (insight.type) {
-      case Protocol.Audits.InsightType.GitHubResource:
-        return i18nString(UIStrings.gitHubResourceInsightTypeString);
-      case Protocol.Audits.InsightType.GracePeriod:
-        return i18nString(UIStrings.gracePeriodInsightTypeString);
-      case Protocol.Audits.InsightType.Heuristics:
-        return i18nString(UIStrings.heuristicsInisightTypeString);
-      default:
-        return i18nString(UIStrings.otherInsightTypeString);
-    }
-  }
-
   static getRecommendation(domain: string, insight?: Protocol.Audits.CookieIssueInsight): HTMLElement {
     const recElem = document.createElement('div');
 

package/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}));
+  }
+}

package/front_end/panels/security/IPProtectionView.ts

@@ -0,0 +1,179 @@
+// 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 '../../ui/legacy/components/data_grid/data_grid.js';
+import '../../ui/components/buttons/buttons.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.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 {widgetConfig} = UI.Widget;
+
+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',
+  /**
+   * @description Text informing the user that IP Proxy is not available
+   */
+  notInIncognito: 'IP proxy unavailable',
+  /**
+   * @description Description in the widget instructing users to open site in incognito
+   */
+  openIncognito: 'IP proxy is only available within incognito mode. Open site in incognito.',
+  /**
+   * @description Column header for the ID of a proxy request in the Proxy Request View panel.
+   */
+  idColumn: 'ID',
+  /**
+   * @description Column header for the URL of a proxy request in the Proxy Request View panel.
+   */
+  urlColumn: 'URL',
+  /**
+   * @description Column header for the HTTP method of a proxy request in the Proxy Request View panel.
+   */
+  methodColumn: 'Method',
+  /**
+   * @description Column header for the status code of a proxy request in the Proxy Request View panel.
+   */
+  statusColumn: 'Status',
+  /**
+   * @description Title for the grid of proxy requests.
+   */
+  proxyRequests: 'Proxy Requests',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/security/IPProtectionView.ts', UIStrings);
+export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const INCOGNITO_EXPLANATION_URL = 'https://support.google.com/chrome/answer/95464?hl=en&co=GENIE.Platform%3DDesktop' as
+    Platform.DevToolsPath.UrlString;
+
+// A simplified representation of a network request for mock data.
+interface MockNetworkRequest {
+  requestId: string;
+  url: string;
+  requestMethod: string;
+  statusCode: number;
+}
+
+export type View = (input: IPProtectionView, output: IPProtectionView, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _, target) => {
+  // clang-format off
+  render(html`
+    <style>
+      ${ipProtectionViewStyles}
+    </style>
+    <div class="ip-protection">
+      <div class="header">
+        <h1>${i18nString(UIStrings.viewTitle)}</h1>
+        <div class="body">${i18nString(UIStrings.viewExplanation)}</div>
+      </div>
+      ${Root.Runtime.hostConfig.isOffTheRecord ? html`
+        <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>
+        <devtools-data-grid striped name=${i18nString(UIStrings.proxyRequests)}>
+          <table>
+            <thead>
+              <tr>
+                <th id="id" sortable>${i18nString(UIStrings.idColumn)}</th>
+                <th id="url" sortable>${i18nString(UIStrings.urlColumn)}</th>
+                <th id="method" sortable>${i18nString(UIStrings.methodColumn)}</th>
+                <th id="status" sortable>${i18nString(UIStrings.statusColumn)}</th>
+              </tr>
+            </thead>
+            <tbody id="proxy-requests-body">
+              ${input.proxyRequests.map((request, index) => html`
+                <tr data-request-id=${request.requestId}>
+                  <td>${index + 1}</td>
+                  <td>${request.url}</td>
+                  <td>${request.requestMethod}</td>
+                  <td>${String(request.statusCode)}</td>
+                </tr>
+              `)}
+            </tbody>
+          </table>
+        </devtools-data-grid>
+        ` : html`
+        <div class="empty-report">
+          <devtools-widget
+            class="learn-more"
+            .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.notInIncognito),
+              text: i18nString(UIStrings.openIncognito),
+              link: INCOGNITO_EXPLANATION_URL,
+            })}>
+          </devtools-widget>
+        </div>
+      `}
+    </div>
+  `, target, {host: input});
+  // clang-format on
+};
+
+export class IPProtectionView extends UI.Widget.VBox {
+  #view: View;
+  #proxyRequests: MockNetworkRequest[] = [];
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+    this.registerRequiredCSS(ipProtectionViewStyles);
+
+    // TODO(crbug.com/429153435): Replace with real data.
+    this.#proxyRequests = [
+      {requestId: '1', url: 'https://example.com/api/data', requestMethod: 'GET', statusCode: 200},
+      {requestId: '2', url: 'https://example.com/api/submit', requestMethod: 'POST', statusCode: 404},
+      {requestId: '3', url: 'https://example.com/assets/style.css', requestMethod: 'GET', statusCode: 200},
+    ];
+
+    this.requestUpdate();
+  }
+
+  get proxyRequests(): readonly MockNetworkRequest[] {
+    return this.#proxyRequests;
+  }
+
+  override performUpdate(): void {
+    this.#view(this, this, this.contentElement);
+  }
+}

package/front_end/panels/security/SecurityModel.ts

@@ -9,31 +9,31 @@ import * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
-   *@description Text in Security Panel of the Security panel
+   * @description Text in Security Panel of the Security panel
    */
   theSecurityOfThisPageIsUnknown: 'The security of this page is unknown.',
   /**
-   *@description Text in Security Panel of the Security panel
+   * @description Text in Security Panel of the Security panel
    */
   thisPageIsNotSecure: 'This page is not secure.',
   /**
-   *@description Text in Security Panel of the Security panel
+   * @description Text in Security Panel of the Security panel
    */
   thisPageIsSecureValidHttps: 'This page is secure (valid HTTPS).',
   /**
-   *@description Text in Security Panel of the Security panel
+   * @description Text in Security Panel of the Security panel
    */
   thisPageIsNotSecureBrokenHttps: 'This page is not secure (broken HTTPS).',
   /**
-   *@description Description of an SSL cipher that contains a separate (bulk) cipher and MAC.
-   *@example {AES_256_CBC} PH1
-   *@example {HMAC-SHA1} PH2
+   * @description Description of an SSL cipher that contains a separate (bulk) cipher and MAC.
+   * @example {AES_256_CBC} PH1
+   * @example {HMAC-SHA1} PH2
    */
   cipherWithMAC: '{PH1} with {PH2}',
   /**
-   *@description Description of an SSL Key and its Key Exchange Group.
-   *@example {ECDHE_RSA} PH1
-   *@example {X25519} PH2
+   * @description Description of an SSL Key and its Key Exchange Group.
+   * @example {ECDHE_RSA} PH1
+   * @example {X25519} PH2
    */
   keyExchangeWithGroup: '{PH1} with {PH2}',
 } as const;