Feature: Show exempted cookies in extension

packages/common/package.json

@@ -28,6 +28,6 @@
     "tldts": "^6.0.14"
   },
   "devDependencies": {
-    "devtools-protocol": "^0.0.1236148"
+    "devtools-protocol": "^0.0.1282316"
   }
 }

packages/common/src/cookies.types.ts

@@ -40,6 +40,10 @@ export type CookiesCount = {
     total: number;
     [key: string]: number;
   };
+  exemptedCookies: {
+    total: number;
+    [key: string]: number;
+  };
 };
 
 export type CookieAnalytics = {
@@ -119,6 +123,7 @@ export type CookieData = {
     inboundBlock: BLOCK_STATUS;
     outboundBlock: BLOCK_STATUS;
   };
+  exemptionReason?: Protocol.Network.CookieExemptionReason;
 };
 
 export type CookieTableData = CookieData & {
@@ -167,6 +172,7 @@ export interface Legend {
 export interface CookieStatsComponents {
   legend: Legend[];
   blockedCookiesLegend: Legend[];
+  exemptedCookiesLegend: Legend[];
   firstParty: {
     count: number;
     color: string;
@@ -179,6 +185,10 @@ export interface CookieStatsComponents {
     count: number;
     color: string;
   }[];
+  exempted: {
+    count: number;
+    color: string;
+  }[];
 }
 
 export interface FramesWithCookies {

packages/common/src/data/cookieExemptionReason/exemptionReasons.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//For source see https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/sdk/NetworkRequest.ts
+const CookieExemptionReason = {
+  UserSetting: 'This cookie is allowed by user preference.',
+  TPCDMetadata:
+    'This cookie is allowed by a third-party cookie deprecation trial grace period.',
+  TPCDDeprecationTrial:
+    'This cookie is allowed by third-party cookie phaseout deprecation trial.',
+  TPCDHeuristics:
+    'This cookie is allowed by third-party cookie phaseout heuristics.',
+  EnterprisePolicy: 'This cookie is allowed by Chrome Enterprise policy.',
+  StorageAccessAPI: 'This cookie is allowed by the Storage Access API.',
+  TopLevelStorageAccessAPI:
+    'This cookie is allowed by the top-level Storage Access API.',
+  CorsOptIn: 'This cookie is allowed by CORS opt-in',
+};
+
+export default CookieExemptionReason;

packages/common/src/data/cookieExemptionReason/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as cookieExemptionReason } from './exemptionReasons';

packages/common/src/data/index.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as cookieIssueDetails } from './cookieExclusionAndWarningReasons';
+export { cookieExemptionReason } from './cookieExemptionReason';

packages/common/src/index.ts

@@ -26,7 +26,7 @@ export { default as calculateEffectiveExpiryDate } from './utils/calculateEffect
 export { default as sanitizeCsvRecord } from './utils/sanitizeCsvRecord';
 export { parseUrl } from './utils/parseUrl';
 export { default as fetchLocalData } from './utils/fetchLocalData';
-export { default as cookieIssueDetails } from './data/cookieExclusionAndWarningReasons';
+export * from './data';
 export { default as parseResponseReceivedExtraInfo } from './utils/parseResponseReceivedExtraInfo';
 export { default as parseRequestWillBeSentExtraInfo } from './utils/parseRequestWillBeSentExtraInfo';
 export { default as getDomainFromUrl } from './utils/getDomainFromUrl';

packages/common/src/utils/filterCookiesByFrame.ts

@@ -16,22 +16,17 @@
 /**
  * Internal dependencies.
  */
-import { CookieTableData } from '../cookies.types';
-
-interface Cookies {
-  [key: string]: CookieTableData;
-}
-
+import { TabCookies } from '../cookies.types';
 interface TabFrames {
   [key: string]: { frameIds: number[] };
 }
 
 const filterCookiesByFrame = (
-  cookies: Cookies | null,
+  cookies: TabCookies | null,
   tabFrames: TabFrames | null,
   frameUrl: string | null
 ) => {
-  const frameFilteredCookies: { [key: string]: CookieTableData } = {};
+  const frameFilteredCookies: TabCookies = {};
   if (!cookies || !frameUrl || !tabFrames || !tabFrames[frameUrl]) {
     return Object.values(frameFilteredCookies);
   }

packages/common/src/utils/parseRequestWillBeSentExtraInfo.ts

@@ -47,7 +47,7 @@ export default function parseRequestWillBeSentExtraInfo(
 ) {
   const cookies: CookieData[] = [];
 
-  associatedCookies.forEach(({ blockedReasons, cookie }) => {
+  associatedCookies.forEach(({ blockedReasons, cookie, exemptionReason }) => {
     const effectiveExpirationDate = calculateEffectiveExpiryDate(
       cookie.expires
     );
@@ -91,6 +91,7 @@ export default function parseRequestWillBeSentExtraInfo(
       headerType: 'request' as CookieData['headerType'],
       isFirstParty: isFirstParty(domain, tabUrl),
       frameIdList: [],
+      exemptionReason: exemptionReason ? exemptionReason : undefined,
     };
 
     cookies.push(singleCookie);

packages/common/src/utils/parseResponseReceivedExtraInfo.ts

@@ -35,6 +35,7 @@ import isFirstParty from './isFirstParty';
  * Parse Network.responseReceivedExtraInfo for extra information about a cookie.
  * @param {object} headers Headers of resonse to be parsed to get extra information about a cookie.
  * @param {object} blockedCookies Blocked Cookies associated with the response being parsed.
+ * @param {object} exemptedCookies Blocked Cookies associated with the response being parsed.
  * @param {string|undefined} cookiePartitionKey Partittion key for the response.
  * @param {object} requestMap An object for requestId to url.
  * @param {string} tabUrl - The top-level URL (URL in the tab's address bar).
@@ -45,6 +46,7 @@ import isFirstParty from './isFirstParty';
 export default function parseResponseReceivedExtraInfo(
   headers: Protocol.Network.ResponseReceivedExtraInfoEvent['headers'],
   blockedCookies: Protocol.Network.ResponseReceivedExtraInfoEvent['blockedCookies'],
+  exemptedCookies: Protocol.Network.ResponseReceivedExtraInfoEvent['exemptedCookies'],
   cookiePartitionKey: Protocol.Network.ResponseReceivedExtraInfoEvent['cookiePartitionKey'],
   requestMap: { [requestId: string]: string },
   tabUrl: string,
@@ -66,6 +68,13 @@ export default function parseResponseReceivedExtraInfo(
       }
     });
 
+    const exemptedCookie = exemptedCookies?.find((c) => {
+      if (c.cookie) {
+        return c.cookie?.name === parsedCookie.name;
+      }
+      return false;
+    });
+
     const effectiveExpirationDate = calculateEffectiveExpiryDate(
       parsedCookie.expires
     );
@@ -118,6 +127,7 @@ export default function parseResponseReceivedExtraInfo(
       isFirstParty: isFirstParty(domain, tabUrl),
       headerType: 'response' as CookieData['headerType'],
       frameIdList: [],
+      exemptionReason: exemptedCookie?.exemptionReason,
     };
 
     cookies.push(singleCookie);

packages/design-system/src/components/cookieDetails/details.tsx

@@ -21,6 +21,8 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 import {
   BLOCK_STATUS,
+  CookieData,
+  cookieExemptionReason,
   cookieIssueDetails,
   type CookieTableData,
 } from '@ps-analysis-tool/common';
@@ -87,6 +89,20 @@ const Details = ({ selectedCookie, isUsingCDP }: DetailsProps) => {
 
   return (
     <div className="text-xs py-1 px-1.5">
+      {selectedCookie.exemptionReason && (
+        <div className="mb-4">
+          <p className="font-bold text-raising-black dark:text-bright-gray mb-1">
+            Exemption Reason
+          </p>
+          <p className="text-outer-space-crayola dark:text-bright-gray">
+            {
+              cookieExemptionReason[
+                selectedCookie.exemptionReason as CookieData['exemptionReason']
+              ]
+            }
+          </p>
+        </div>
+      )}
       {selectedCookie.isDomainInAllowList && (
         <div className="mb-4">
           <p className="font-bold text-raising-black dark:text-bright-gray mb-1">