Feature: Export report in an HTML file

package.json

@@ -6,7 +6,6 @@
 		"cli:prebuild": "node ./scripts/delete-build-artifacts.cjs",
 		"cli:dev": "tsc-watch --build",
 		"cli:build": "npm run cli:prebuild && tsc --build",
-		"cli-dashboard:start": "npm run dev --workspace=@ps-analysis-tool/cli-dashboard",
 		"cli-dashboard:dev": "npm run dev --workspace=@ps-analysis-tool/cli-dashboard",
 		"cli-dashboard:build": "npm run build --workspace=@ps-analysis-tool/cli-dashboard",
 		"cli": "node dist/cli/index.js",

packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx

@@ -43,7 +43,7 @@ const LandingHeader = ({ dataMapping = [] }: LandingHeaderProps) => {
       <div className="lg:max-w-[729px] flex gap-9 px-4">
         {dataMapping.map((circleData, index) => {
           return (
-            <div key={index} className="text-center w-16">
+            <div key={index} className="text-center w-16 h-fit">
               <CirclePieChart
                 title={circleData.title}
                 centerCount={circleData.count}

packages/extension/package.json

@@ -40,6 +40,7 @@
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "devtools-protocol": "^0.0.1236148"
+    "devtools-protocol": "^0.0.1236148",
+    "html-inline-script-webpack-plugin": "^3.2.1"
   }
 }

packages/extension/src/manifest.json

@@ -38,7 +38,7 @@
   },
   "web_accessible_resources": [
     {
-      "resources": ["assets/data/*.json", "data/*json"],
+      "resources": ["assets/data/*.json", "data/*json", "report/index.html"],
       "matches": ["*://*/*"]
     }
   ]

packages/extension/src/utils/downloadReport.ts

@@ -0,0 +1,88 @@
+/*
+ * 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 {
+  prepareCookieStatsComponents,
+  prepareCookiesCount,
+  prepareFrameStatsComponent,
+  type DataMapping,
+} from '@ps-analysis-tool/design-system';
+import { saveAs } from 'file-saver';
+
+/**
+ * Utility function to download report.
+ * @param tabCookies Tab cookies.
+ * @param tabFrames Tab frames.
+ */
+export default async function downloadReport(tabCookies: any, tabFrames: any) {
+  const htmlText = await (await fetch('../report/index.html')).text();
+  const parser = new DOMParser();
+  const reportDom = parser.parseFromString(htmlText, 'text/html');
+
+  const cookieStats = prepareCookiesCount(tabCookies);
+  const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats);
+  const frameStateCreator = prepareFrameStatsComponent(tabFrames, tabCookies);
+
+  const cookieClassificationDataMapping: DataMapping[] = [
+    {
+      title: 'Total cookies',
+      count: cookieStats.total,
+      data: cookiesStatsComponents.legend,
+    },
+    {
+      title: '1st party cookies',
+      count: cookieStats.firstParty.total,
+      data: cookiesStatsComponents.firstParty,
+    },
+    {
+      title: '3rd party cookies',
+      count: cookieStats.thirdParty.total,
+      data: cookiesStatsComponents.thirdParty,
+    },
+  ];
+
+  const blockedCookieDataMapping: DataMapping[] = [
+    {
+      title: 'Blocked cookies',
+      count: cookieStats.blockedCookies.total,
+      data: cookiesStatsComponents.blocked,
+    },
+  ];
+
+  // Injections
+  const script = reportDom.createElement('script');
+  const code = `window.PSAT_DATA = ${JSON.stringify({
+    cookieClassificationDataMapping,
+    tabCookies,
+    cookiesStatsComponents,
+    tabFrames,
+    showInfoIcon: true,
+    showHorizontalMatrix: false,
+    blockedCookieDataMapping,
+    showBlockedInfoIcon: true,
+    frameStateCreator,
+  })}`;
+
+  script.text = code;
+  reportDom.head.appendChild(script);
+
+  const injectedHtmlText = `<head>${reportDom.head.innerHTML}<head><body>${reportDom.body.innerHTML}</body>`;
+  const html = new Blob([injectedHtmlText]);
+
+  saveAs(html, 'report.html');
+}

packages/extension/src/view/devtools/components/cookies/index.tsx

@@ -30,6 +30,7 @@ import { type CookieTableData } from '@ps-analysis-tool/common';
 import { useCookie, useSettings } from '../../stateProviders';
 import CookiesListing from './cookiesListing';
 import AssembledCookiesLanding from './cookieLanding';
+import downloadReport from '../../../../utils/downloadReport';
 
 interface CookiesProps {
   setFilteredCookies: React.Dispatch<CookieTableData[]>;
@@ -43,12 +44,16 @@ const Cookies = ({ setFilteredCookies }: CookiesProps) => {
     selectedFrame,
     changeListeningToThisTab,
     tabToRead,
+    tabCookies,
+    tabFrames,
   } = useCookie(({ state, actions }) => ({
     isCurrentTabBeingListenedTo: state.isCurrentTabBeingListenedTo,
     loading: state.loading,
     selectedFrame: state.selectedFrame,
     tabToRead: state.tabToRead,
     changeListeningToThisTab: actions.changeListeningToThisTab,
+    tabCookies: state.tabCookies,
+    tabFrames: state.tabFrames,
   }));
 
   const { allowedNumberOfTabs } = useSettings(({ state }) => ({
@@ -86,6 +91,11 @@ const Cookies = ({ setFilteredCookies }: CookiesProps) => {
           <CookiesListing setFilteredCookies={setFilteredCookies} />
         ) : (
           <CookiesLanding>
+            <Button
+              extraClasses="absolute top-3 right-3"
+              onClick={() => downloadReport(tabCookies, tabFrames)}
+              text="Download report"
+            />
             <AssembledCookiesLanding />
           </CookiesLanding>
         )}

packages/extension/src/view/report/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/extension/src/view/report/app.tsx

@@ -0,0 +1,83 @@
+/*
+ * 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,
+} from '@ps-analysis-tool/design-system';
+
+/**
+ * Internal dependencies
+ */
+import './app.css';
+
+const App = ({ data }: { data: any }) => {
+  return (
+    <div className="h-full w-full flex flex-col">
+      <CookiesLandingContainer
+        dataMapping={data.cookieClassificationDataMapping}
+        testId="cookies-insights"
+      >
+        <CookiesMatrix
+          title={data.cookieClassificationTitle}
+          tabCookies={data.tabCookies}
+          componentData={data.cookiesStatsComponents.legend}
+          tabFrames={data.tabFrames}
+          showInfoIcon={data.showInfoIcon}
+          showHorizontalMatrix={data.showHorizontalMatrix}
+          associatedCookiesCount={data.associatedCookiesCount}
+        />
+      </CookiesLandingContainer>
+      <CookiesLandingContainer
+        dataMapping={data.blockedCookieDataMapping}
+        testId="blocked-cookies-insights"
+      >
+        {data.cookiesStatsComponents.blockedCookiesLegend.length > 0 && (
+          <CookiesMatrix
+            title="Blocked Reasons"
+            tabCookies={data.tabCookies}
+            componentData={data.cookiesStatsComponents.blockedCookiesLegend}
+            tabFrames={data.tabFrames}
+            showInfoIcon={data.showBlockedInfoIcon}
+            showHorizontalMatrix={false}
+            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)."
+          />
+        )}
+      </CookiesLandingContainer>
+      <CookiesLandingContainer
+        dataMapping={data.frameStateCreator.dataMapping}
+        testId="frames-insights"
+      >
+        <CookiesMatrix
+          title="Frames"
+          componentData={data.frameStateCreator.legend}
+          showMatrix={true}
+          tabCookies={data.tabCookies}
+          tabFrames={data.tabFrames}
+          showInfoIcon={data.showInfoIcon}
+          showHorizontalMatrix={false}
+          infoIconTitle="The details regarding frames and associated cookies in this page."
+        />
+      </CookiesLandingContainer>
+    </div>
+  );
+};
+
+export default App;

packages/extension/src/view/report/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Report</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

packages/extension/src/view/report/index.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { createRoot } from 'react-dom/client';
+
+/**
+ * Internal dependencies
+ */
+import App from './app';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const root = document.getElementById('root');
+  //@ts-ignore custom data attached to window breaks types
+  const data = window.PSAT_DATA;
+
+  if (root) {
+    createRoot(root).render(<App data={data} />);
+  }
+});