Refactor: Extension UI and Service Worker.

packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/blockedCookiesSection.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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.
+ */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+  CookiesLandingContainer,
+  CookiesMatrix,
+  MessageBox,
+  prepareCookieStatsComponents,
+  prepareCookiesCount,
+  type DataMapping,
+} from '@ps-analysis-tool/design-system';
+import type { TabCookies, TabFrames } from '@ps-analysis-tool/common';
+
+interface BlockedCookiesSectionProps {
+  tabCookies: TabCookies | null;
+  affectedCookies: TabCookies | null;
+  tabFrames: TabFrames | null;
+}
+const BlockedCookiesSection = ({
+  tabCookies,
+  affectedCookies,
+  tabFrames,
+}: BlockedCookiesSectionProps) => {
+  const cookiesStats = prepareCookiesCount(tabCookies);
+
+  const cookiesStatsComponents = prepareCookieStatsComponents(cookiesStats);
+
+  const cookieBlockedDataMapping: DataMapping[] = [
+    {
+      title: 'Blocked cookies',
+      count: cookiesStats.blockedCookies.total,
+      data: cookiesStatsComponents.blocked,
+    },
+  ];
+
+  const blockedCookieStats = prepareCookiesCount(affectedCookies);
+  const blockedCookiesStatsComponents =
+    prepareCookieStatsComponents(blockedCookieStats);
+
+  return (
+    <CookiesLandingContainer
+      dataMapping={cookieBlockedDataMapping}
+      testId="blocked-cookies-insights"
+    >
+      {!cookiesStats ||
+        (cookiesStats?.firstParty.total === 0 &&
+          cookiesStats?.thirdParty.total === 0 && (
+            <MessageBox
+              headerText="No cookies found on this page"
+              bodyText="Please try reloading the page"
+            />
+          ))}
+      <CookiesMatrix
+        tabCookies={affectedCookies}
+        componentData={cookiesStatsComponents.blockedCookiesLegend}
+        tabFrames={tabFrames}
+        description=""
+        infoIconTitle="Cookies that have been blocked by the browser.(The total count might not be same as cumulative reason count because cookie might be blocked due to more than 1 reason)."
+        showInfoIcon={true}
+        showHorizontalMatrix={false}
+        allowExpand={true}
+      />
+      <CookiesMatrix
+        tabCookies={affectedCookies}
+        componentData={blockedCookiesStatsComponents.legend}
+        tabFrames={tabFrames}
+        description=""
+        showInfoIcon={false}
+        showHorizontalMatrix={false}
+        allowExpand={false}
+      />
+    </CookiesLandingContainer>
+  );
+};
+export default BlockedCookiesSection;

packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/cookiesSection.tsx

@@ -0,0 +1,70 @@
+/*
+ * 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.
+ */
+/**
+ * External dependencies
+ */
+import React from 'react';
+import {
+  CookiesLandingContainer,
+  CookiesMatrix,
+  MessageBox,
+  prepareCookieDataMapping,
+  prepareCookieStatsComponents,
+  prepareCookiesCount,
+} from '@ps-analysis-tool/design-system';
+import type { TabCookies, TabFrames } from '@ps-analysis-tool/common';
+/**
+ * Internal dependencies
+ */
+
+interface CookiesSectionProps {
+  tabCookies: TabCookies | null;
+  tabFrames: TabFrames | null;
+}
+const CookiesSection = ({ tabCookies, tabFrames }: CookiesSectionProps) => {
+  const cookieStats = prepareCookiesCount(tabCookies);
+  const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats);
+  const cookieClassificationDataMapping = prepareCookieDataMapping(
+    cookieStats,
+    cookiesStatsComponents
+  );
+
+  return (
+    <CookiesLandingContainer
+      dataMapping={cookieClassificationDataMapping}
+      testId="cookies-insights"
+    >
+      {!cookieStats ||
+        (cookieStats?.firstParty.total === 0 &&
+          cookieStats?.thirdParty.total === 0 && (
+            <MessageBox
+              headerText="No cookies found on this page"
+              bodyText="Please try reloading the page"
+            />
+          ))}
+      <CookiesMatrix
+        tabCookies={tabCookies}
+        componentData={cookiesStatsComponents.legend}
+        tabFrames={tabFrames}
+        description=""
+        showInfoIcon={true}
+        showHorizontalMatrix={false}
+        allowExpand={true}
+      />
+    </CookiesLandingContainer>
+  );
+};
+export default CookiesSection;

packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/cookieLanding/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 CookiesSection } from './cookiesSection';
+export { default as BlockedCookiesSection } from './blockedCookiesSection';

packages/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx

@@ -18,14 +18,12 @@
  * External dependencies.
  */
 import React from 'react';
-import {
-  Button,
-  CookiesLanding,
-  CookiesMatrix,
-  prepareCookiesCount,
-  prepareCookieStatsComponents,
-} from '@ps-analysis-tool/design-system';
+import { Button, CookiesLanding } from '@ps-analysis-tool/design-system';
 import type { TabCookies, TabFrames } from '@ps-analysis-tool/common';
+/**
+ * Internal dependencies
+ */
+import { CookiesSection, BlockedCookiesSection } from './cookieLanding';
 
 interface CookiesLandingContainerProps {
   tabFrames: TabFrames;
@@ -51,33 +49,13 @@ const CookiesLandingContainer = ({
           />
         </div>
       )}
-      <CookiesLanding
-        tabFrames={tabFrames}
-        tabCookies={tabCookies}
-        showInfoIcon={false}
-        showBlockedInfoIcon={true}
-        associatedCookiesCount={Object.values(tabFrames).length}
-        showMessageBoxBody={false}
-        showBlockedCookiesSection
-        cookieClassificationTitle="Categories"
-      >
-        <div className="flex flex-col">
-          <div className="pt-4">
-            <CookiesMatrix
-              tabCookies={affectedCookies}
-              componentData={
-                prepareCookieStatsComponents(
-                  prepareCookiesCount(affectedCookies)
-                ).legend
-              }
-              tabFrames={tabFrames}
-              description=""
-              showInfoIcon={false}
-              showHorizontalMatrix={false}
-              allowExpand={false}
-            />
-          </div>
-        </div>
+      <CookiesLanding>
+        <CookiesSection tabCookies={tabCookies} tabFrames={tabFrames} />
+        <BlockedCookiesSection
+          tabCookies={tabCookies}
+          affectedCookies={affectedCookies}
+          tabFrames={tabFrames}
+        />
       </CookiesLanding>
     </>
   );

packages/common/src/utils/parseRequestWillBeSentExtraInfo.ts

@@ -31,30 +31,32 @@ import isFirstParty from './isFirstParty';
 
 /**
  * Parses Network.requestWillBeSentExtraInfo to get extra information about a cookie.
- * @param {object} request Request to be parsed to get extra information about a cookie.
+ * @param {object} associatedCookies Cookies associated with the request being parsed.
  * @param {object} cookieDB Cookie database to find analytics from.
  * @param {object} requestMap An object for requestId to url.
  * @param {string} tabUrl - The top-level URL (URL in the tab's address bar).
+ * @param {string} requestId - The requestId of the request being processed
  * @returns {object} parsed cookies.
  */
 export default function parseRequestWillBeSentExtraInfo(
-  request: Protocol.Network.RequestWillBeSentExtraInfoEvent,
+  associatedCookies: Protocol.Network.RequestWillBeSentExtraInfoEvent['associatedCookies'],
   cookieDB: CookieDatabase,
   requestMap: { [requestId: string]: string },
-  tabUrl: string
+  tabUrl: string,
+  requestId: string
 ) {
   const cookies: CookieData[] = [];
 
-  request.associatedCookies.forEach(({ blockedReasons, cookie }) => {
+  associatedCookies.forEach(({ blockedReasons, cookie }) => {
     const effectiveExpirationDate = calculateEffectiveExpiryDate(
       cookie.expires
     );
 
     let domain,
       url = '';
 
-    if (requestMap && requestMap[request?.requestId]) {
-      url = requestMap[request?.requestId] ?? '';
+    if (requestMap && requestMap[requestId]) {
+      url = requestMap[requestId] ?? '';
     }
 
     if (cookie?.domain) {
@@ -75,7 +77,7 @@ export default function parseRequestWillBeSentExtraInfo(
         requestEvents: [
           {
             type: REQUEST_EVENT.CDP_REQUEST_WILL_BE_SENT_EXTRA_INFO,
-            requestId: request.requestId,
+            requestId,
             url: url,
             blocked: blockedReasons.length !== 0,
             timeStamp: Date.now(),

packages/common/src/utils/parseResponseReceivedExtraInfo.ts

@@ -33,26 +33,31 @@ import isFirstParty from './isFirstParty';
 
 /**
  * Parse Network.responseReceivedExtraInfo for extra information about a cookie.
- * @param {object} response Response to be parsed to get 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 {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).
  * @param {object} cookieDB Cookie database to find analytics from.
+ * @param {string} requestId - The requestId of the request being processed
  * @returns {object} parsed cookies.
  */
 export default function parseResponseReceivedExtraInfo(
-  response: Protocol.Network.ResponseReceivedExtraInfoEvent,
+  headers: Protocol.Network.ResponseReceivedExtraInfoEvent['headers'],
+  blockedCookies: Protocol.Network.ResponseReceivedExtraInfoEvent['blockedCookies'],
+  cookiePartitionKey: Protocol.Network.ResponseReceivedExtraInfoEvent['cookiePartitionKey'],
   requestMap: { [requestId: string]: string },
   tabUrl: string,
-  cookieDB: CookieDatabase
+  cookieDB: CookieDatabase,
+  requestId: string
 ) {
   const cookies: CookieData[] = [];
-  const responseToParse =
-    response.headers['set-cookie'] ?? response.headers['Set-Cookie'];
+  const responseToParse = headers['set-cookie'] ?? headers['Set-Cookie'];
 
   responseToParse?.split('\n').forEach((headerLine: string) => {
     let parsedCookie: CookieData['parsedCookie'] = parse(headerLine);
 
-    const blockedCookie = response.blockedCookies.find((c) => {
+    const blockedCookie = blockedCookies.find((c) => {
       if (c.cookie) {
         return c.cookie?.name === parsedCookie.name;
       } else {
@@ -68,15 +73,15 @@ export default function parseResponseReceivedExtraInfo(
     if (headerLine.toLowerCase().includes('partitioned')) {
       parsedCookie = {
         ...parsedCookie,
-        partitionKey: response?.cookiePartitionKey,
+        partitionKey: cookiePartitionKey,
       };
     }
 
     let domain,
       url = '';
 
-    if (requestMap && requestMap[response?.requestId]) {
-      url = requestMap[response?.requestId] ?? '';
+    if (requestMap && requestMap[requestId]) {
+      url = requestMap[requestId] ?? '';
     }
 
     if (parsedCookie?.domain) {
@@ -99,7 +104,7 @@ export default function parseResponseReceivedExtraInfo(
         responseEvents: [
           {
             type: RESPONSE_EVENT.CDP_RESPONSE_RECEIVED_EXTRA_INFO,
-            requestId: response.requestId,
+            requestId,
             url: url,
             blocked: blockedCookie ? true : false,
             timeStamp: Date.now(),