Merge develop and resolve conflicts

packages/extension/src/icons/index.tsx

@@ -42,3 +42,4 @@ export { default as AntiCovertTrackingIcon } from './anti-covert-tracking.svg';
 export { default as AntiCovertTrackingIconWhite } from './anti-covert-tracking-white.svg';
 export { default as Add } from './add.svg';
 export { default as Cross } from './cross.svg';
+export { default as Refresh } from './refresh-icon.svg';

packages/extension/src/localStore/cookieStore.ts

@@ -43,6 +43,10 @@ const CookieStore = {
         if (_updatedCookies?.[cookieKey]) {
           _updatedCookies[cookieKey] = {
             ...cookie,
+            headerType:
+              _updatedCookies[cookieKey].headerType === 'javascript'
+                ? _updatedCookies[cookieKey].headerType
+                : cookie.headerType,
             frameIdList: Array.from(
               new Set<number>([
                 ...cookie.frameIdList,
@@ -84,7 +88,6 @@ const CookieStore = {
    */
   async updateTabFocus(tabId: string) {
     const storage = await chrome.storage.local.get();
-
     if (storage[tabId]) {
       storage[tabId].focusedAt = Date.now();
     }

packages/extension/src/localStore/types.ts

@@ -27,7 +27,7 @@ export type CookieData = {
   parsedCookie: ParsedCookie;
   analytics: CookieAnalytics | null;
   url: string;
-  headerType: 'response' | 'request';
+  headerType: 'response' | 'request' | 'javascript'; // @todo Change headerType key name.
   isFirstParty: boolean | null;
   frameIdList: number[];
 };

packages/extension/src/utils/setDocumentCookies.ts

@@ -0,0 +1,149 @@
+/*
+ * 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 { isFirstParty } from '@cookie-analysis-tool/common';
+
+/**
+ * Internal dependencies.
+ */
+import { createCookieObject } from '../worker/createCookieObject';
+import { fetchDictionary, type CookieDatabase } from './fetchCookieDictionary';
+import findAnalyticsMatch from '../worker/findAnalyticsMatch';
+import { CookieStore, type CookieData } from '../localStore';
+
+interface ProcessAndStoreDucmentCookiesProps {
+  tabUrlResult: string;
+  tabId: string;
+  documentCookies: string[];
+  dictionary: CookieDatabase;
+  isException: object;
+}
+
+const processAndStoreDocumentCookies = async ({
+  tabUrlResult,
+  tabId,
+  documentCookies,
+  dictionary,
+  isException,
+}: ProcessAndStoreDucmentCookiesProps) => {
+  if (!isException && typeof tabUrlResult === 'string') {
+    const tabUrl = tabUrlResult;
+
+    const frames = await chrome.webNavigation.getAllFrames({
+      tabId: Number(tabId),
+    });
+
+    const outerMostFrame = frames?.filter(
+      (frame) => frame.frameType === 'outermost_frame'
+    );
+
+    const parsedCookieData: CookieData[] = await Promise.all(
+      documentCookies.map(async (singleCookie: string) => {
+        const cookieValue = singleCookie.split('=')[1]?.trim();
+        const cookieName = singleCookie.split('=')[0]?.trim();
+        let analytics;
+
+        const parsedCookie = await createCookieObject(
+          {
+            name: cookieName,
+            value: cookieValue,
+          },
+          tabUrl
+        );
+
+        if (dictionary) {
+          analytics = findAnalyticsMatch(parsedCookie.name, dictionary);
+        }
+
+        const isFirstPartyCookie = isFirstParty(
+          parsedCookie.domain || '',
+          tabUrl
+        );
+
+        return Promise.resolve({
+          parsedCookie,
+          analytics:
+            analytics && Object.keys(analytics).length > 0 ? analytics : null,
+          url: tabUrl,
+          headerType: 'javascript', // @todo Update headerType name.
+          isFirstParty: isFirstPartyCookie || null,
+          frameIdList: [
+            outerMostFrame && outerMostFrame[0]
+              ? outerMostFrame[0]?.frameId
+              : 0,
+          ],
+        });
+      })
+    );
+
+    await CookieStore.update(tabId, parsedCookieData);
+  }
+};
+
+/**
+ * Utility function to get the cookies from result and send it for processing.
+ * @param result the evaluated value of array of string.
+ * @param exceptionGenerated Boolean value which specifies if an exception was generated during evaluating the javascript.
+ * @param tabId Tab ID from which the JS cookies have to be read.
+ * @param dictionary JSON object which is used to classify cookie based on their use.
+ */
+const getJSCookiesForProcessing = (
+  result: string[],
+  exceptionGenerated: object,
+  tabId: string,
+  dictionary: CookieDatabase
+) => {
+  let documentCookies: string[] = [];
+
+  if (!exceptionGenerated && result.length > 1) {
+    documentCookies = result;
+
+    chrome.devtools.inspectedWindow.eval(
+      'window.location.href',
+      (tabUrlResult: string, isException) =>
+        processAndStoreDocumentCookies({
+          tabUrlResult,
+          tabId,
+          documentCookies,
+          dictionary,
+          isException,
+        })
+    );
+  } else {
+    return;
+  }
+};
+
+/**
+ * Adds the cookies set via document.cookie.
+ * @param tabId Id of the tab being listened to.
+ */
+async function setDocumentCookies(tabId: string) {
+  if (!tabId) {
+    return;
+  }
+
+  const dictionary = await fetchDictionary();
+
+  chrome.devtools.inspectedWindow.eval(
+    'document.cookie.split(";")',
+    (result: string[], isException) =>
+      getJSCookiesForProcessing(result, isException, tabId, dictionary)
+  );
+}
+export default setDocumentCookies;

packages/extension/src/view/design-system/components/circlePieChart/emptyCirclePieChart.tsx

@@ -24,11 +24,7 @@ import { VictoryPie } from 'victory';
  */
 import { COLOR_MAP } from '../../theme/colors';
 
-interface EmptyCirclePieChartProps {
-  fallbackText?: string;
-}
-
-const EmptyCirclePieChart = ({ fallbackText }: EmptyCirclePieChartProps) => {
+const EmptyCirclePieChart = () => {
   return (
     <div className="w-full h-full relative">
       <VictoryPie
@@ -37,8 +33,8 @@ const EmptyCirclePieChart = ({ fallbackText }: EmptyCirclePieChartProps) => {
         colorScale={[COLOR_MAP.brightGray]}
         data={[{ x: '', y: 100 }]}
       />
-      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-raisin-black opacity-40 text-xs leading-4'">
-        {fallbackText || 'Not Found'}
+      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center opacity-40 text-2xl leading-4'">
+        0
       </p>
     </div>
   );

packages/extension/src/view/design-system/components/circlePieChart/index.tsx

@@ -40,7 +40,6 @@ const CirclePieChart = ({
   centerCount,
   data,
   title,
-  fallbackText,
   infoIconClassName = '',
 }: CirclePieChartProps) => {
   const centerTitleClasses = centerCount <= MAX_COUNT ? 'text-2xl' : 'text-l';
@@ -49,7 +48,7 @@ const CirclePieChart = ({
     <>
       <div className="inline-block align-bottom w-16">
         {centerCount <= 0 ? (
-          <EmptyCirclePieChart fallbackText={fallbackText} />
+          <EmptyCirclePieChart />
         ) : (
           <div className="w-full h-full relative">
             <VictoryPie

packages/extension/src/view/design-system/components/circlePieChart/tests/circlePieChart.tsx

@@ -28,27 +28,6 @@ describe('CirclePieChart', () => {
     { count: 73, color: 'blue' },
   ];
 
-  it('renders EmptyCirclePieChart when centerCount is 0', () => {
-    const centerCount = 0;
-    const title = 'Empty Chart';
-    const fallbackText = 'No Data';
-
-    const { getByText } = render(
-      <CirclePieChart
-        centerCount={centerCount}
-        data={testData}
-        title={title}
-        fallbackText={fallbackText}
-      />
-    );
-
-    // Check if the EmptyCirclePieChart is rendered when centerCount is 0
-    const emptyChartTitle = getByText(title);
-    expect(emptyChartTitle).toBeInTheDocument();
-    const fallbackTextElement = getByText(fallbackText);
-    expect(fallbackTextElement).toBeInTheDocument();
-  });
-
   it('renders CirclePieChart with correct centerCount when centerCount is less than or equal to MAX_COUNT', () => {
     const centerCount = 123;
     const title = '1st Party cookies';