chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

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;

package/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', () => {