Merge branch 'develop' into test/optimize-table

GoogleChromeLabs · Feb 6, 2024 · 59772dd · 59772dd
2 parents f7417df + 0f05f4f
commit 59772dd
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 57 deletions.
diff --git a/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx b/...es/cli-dashboard/src/components/siteReport/tabs/cookies/cookiesLandingContainer/index.tsx
@@ -59,11 +59,9 @@ const CookiesLandingContainer = ({
         associatedCookiesCount={Object.values(tabFrames).length}
         showMessageBoxBody={false}
         showBlockedCookiesSection
+        cookieClassificationTitle="Categories"
       >
         <div className="flex flex-col">
-          <h3 className="text-xs font-bold text-darkest-gray dark:text-bright-gray uppercase">
-            Comparative Insights
-          </h3>
           <div className="pt-4">
             <CookiesMatrix
               tabCookies={affectedCookies}
@@ -73,14 +71,10 @@ const CookiesLandingContainer = ({
                 ).legend
               }
               tabFrames={tabFrames}
-              title="Affected Cookies"
               description=""
               showInfoIcon={false}
               showHorizontalMatrix={false}
-              count={Number(Object.values(affectedCookies).length)}
               allowExpand={false}
-              highlightTitle={true}
-              capitalizeTitle={true}
             />
           </div>
         </div>

diff --git a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx
@@ -56,7 +56,7 @@ const CookiesMatrix = ({
   tabCookies,
   tabFrames,
   componentData = [],
-  title = 'Cookie Classification',
+  title = 'Categories',
   description = '',
   showHorizontalMatrix = true,
   showMatrix = true,

diff --git a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/tests/cookieMatrix.tsx
@@ -31,17 +31,17 @@ describe('CookiesMatrix', () => {
   it('should render the cookies insights', () => {
     const tabCookies = mockResponse.tabCookies;
     const tabFrames = mockResponse.tabFrames;
+    const title = 'Title';
 
     const { getByTestId } = render(
       <CookiesMatrix
+        title="Title"
         tabCookies={tabCookies}
         componentData={cookiesStatsComponents.legend}
         tabFrames={tabFrames}
       />
     );
 
-    expect(
-      getByTestId('cookies-matrix-Cookie Classification')
-    ).toBeInTheDocument();
+    expect(getByTestId(`cookies-matrix-${title}`)).toBeInTheDocument();
   });
 });
diff --git a/packages/design-system/src/components/cookiesLanding/index.tsx b/packages/design-system/src/components/cookiesLanding/index.tsx
@@ -47,6 +47,7 @@ interface CookiesLandingProps {
   };
   showFramesSection?: boolean;
   description?: React.ReactNode;
+  cookieClassificationTitle?: string;
 }
 
 const CookiesLanding = ({
@@ -62,6 +63,7 @@ const CookiesLanding = ({
   showHorizontalMatrix = false,
   description = '',
   additionalComponents = {},
+  cookieClassificationTitle,
 }: CookiesLandingProps) => {
   const cookieStats = prepareCookiesCount(tabCookies);
   const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats);
@@ -112,14 +114,14 @@ const CookiesLanding = ({
               />
             ))}
         <CookiesMatrix
+          title={cookieClassificationTitle}
           tabCookies={tabCookies}
           componentData={cookiesStatsComponents.legend}
           tabFrames={tabFrames}
           showInfoIcon={showInfoIcon}
           showHorizontalMatrix={showHorizontalMatrix}
           associatedCookiesCount={associatedCookiesCount}
         />
-        {children && <div className="mt-8">{children}</div>}
       </CookiesLandingContainer>
       {showBlockedCookiesSection && (
         <CookiesLandingContainer
@@ -140,10 +142,11 @@ const CookiesLanding = ({
               />
             </>
           )}
+          {children && <div className="mt-8">{children}</div>}
         </CookiesLandingContainer>
       )}
       {/* TODO: This is not scalable. Refactor code so that components can be added from the the extension or dashboard package. */}
-      {Object.keys(additionalComponents).length &&
+      {Boolean(Object.keys(additionalComponents).length) &&
         Object.keys(additionalComponents).map((key: string) => {
           const Component = additionalComponents[key];
           return <Component key={key} />;

diff --git a/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx b/packages/design-system/src/components/cookiesLanding/landingHeader/index.tsx
@@ -35,7 +35,9 @@ interface LandingHeaderProps {
 const LandingHeader = ({ dataMapping = [] }: LandingHeaderProps) => {
   return (
     <div
-      className="flex justify-center border-t border-hex-gray pt-5 pb-5 dark:border-quartz"
+      className={
+        'flex justify-center border-hex-gray pt-5 pb-5 dark:border-quartz border-t'
+      }
       data-testid="cookies-landing-header"
     >
       <div className="lg:max-w-[729px] flex gap-9 px-4">

diff --git a/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx b/packages/design-system/src/components/cookiesLanding/tests/cookiesLanding.tsx
@@ -39,8 +39,6 @@ describe('CookiesLanding', () => {
 
     expect(getByTestId('cookies-landing')).toBeInTheDocument();
     expect(getAllByTestId('cookies-landing-header')[0]).toBeInTheDocument();
-    expect(
-      getByTestId('cookies-matrix-Cookie Classification')
-    ).toBeInTheDocument();
+    expect(getByTestId('cookies-matrix-Categories')).toBeInTheDocument();
   });
 });
diff --git a/packages/extension/src/serviceWorker/index.ts b/packages/extension/src/serviceWorker/index.ts
@@ -34,6 +34,7 @@ import { fetchDictionary } from '../utils/fetchCookieDictionary';
 import { ALLOWED_NUMBER_OF_TABS } from '../constants';
 import SynchnorousCookieStore from '../store/synchnorousCookieStore';
 import canProcessCookies from '../utils/canProcessCookies';
+import { getTab } from '../utils/getTab';
 
 let cookieDB: CookieDatabase | null = null;
 let syncCookieStore: SynchnorousCookieStore | undefined;
@@ -545,8 +546,7 @@ chrome.runtime.onMessage.addListener(async (request) => {
       !syncCookieStore?.tabs[request.payload.tabId] &&
       tabMode === 'unlimited'
     ) {
-      const tabs = await chrome.tabs.query({});
-      const currentTab = tabs.find((tab) => tab.id === request.payload.tabId);
+      const currentTab = await getTab(request.payload.tabId);
 
       syncCookieStore?.addTabData(request?.payload?.tabId);
       syncCookieStore?.updateUrl(
@@ -639,8 +639,9 @@ chrome.storage.sync.onChanged.addListener(
     }
     tabMode = changes.allowedNumberOfTabs.newValue;
 
+    const tabs = await chrome.tabs.query({});
+
     if (changes?.allowedNumberOfTabs?.newValue === 'single') {
-      const tabs = await chrome.tabs.query({});
       tabToRead = '';
 
       chrome.runtime.sendMessage({
@@ -668,19 +669,21 @@ chrome.storage.sync.onChanged.addListener(
           tabId: tab?.id,
           text: '',
         });
+
         syncCookieStore?.removeTabData(tab.id);
+
         chrome.tabs.reload(Number(tab?.id), { bypassCache: true });
         return tab;
       });
     } else {
-      const tabs = await chrome.tabs.query({});
       chrome.runtime.sendMessage({
         type: 'ServiceWorker::Popup::INITIAL_SYNC',
         payload: {
           tabMode,
           tabToRead: tabToRead,
         },
       });
+
       chrome.runtime.sendMessage({
         type: 'ServiceWorker::DevTools::INITIAL_SYNC',
         payload: {
@@ -730,26 +733,37 @@ chrome.storage.sync.onChanged.addListener(
       },
     });
 
+    const tabs = await chrome.tabs.query({});
+
     if (!changes?.isUsingCDP?.newValue) {
       await Promise.all(
-        Object.keys(syncCookieStore?.tabsData ?? {}).map(async (key) => {
+        tabs.map(async (tab) => {
+          if (!tab.id) {
+            return;
+          }
+
           try {
-            await chrome.debugger.detach({ tabId: Number(key) });
-            syncCookieStore?.removeCookieData(Number(key));
-            syncCookieStore?.sendUpdatedDataToPopupAndDevTools(Number(key));
+            await chrome.debugger.detach({ tabId: tab.id });
+            syncCookieStore?.removeCookieData(tab.id);
+            syncCookieStore?.sendUpdatedDataToPopupAndDevTools(tab.id);
           } catch (error) {
-            // Fail silently
+            // eslint-disable-next-line no-console
+            console.warn(error);
           } finally {
-            await chrome.tabs.reload(Number(key), { bypassCache: true });
+            await chrome.tabs.reload(tab.id, { bypassCache: true });
           }
         })
       );
     } else {
       await Promise.all(
-        Object.keys(syncCookieStore?.tabsData ?? {}).map(async (key) => {
-          syncCookieStore?.removeCookieData(Number(key));
-          syncCookieStore?.sendUpdatedDataToPopupAndDevTools(Number(key));
-          await chrome.tabs.reload(Number(key), { bypassCache: true });
+        tabs.map(async (tab) => {
+          if (!tab.id) {
+            return;
+          }
+
+          syncCookieStore?.removeCookieData(tab.id);
+          syncCookieStore?.sendUpdatedDataToPopupAndDevTools(tab.id);
+          await chrome.tabs.reload(tab.id, { bypassCache: true });
         })
       );
     }

diff --git a/packages/extension/src/store/synchnorousCookieStore.ts b/packages/extension/src/store/synchnorousCookieStore.ts
@@ -127,11 +127,7 @@ class SynchnorousCookieStore {
           this.tabsData[tabId][cookieKey] = cookie;
         }
       }
-      //@ts-ignore Since this is for debugging the data to check the data being collected by the storage.
-      globalThis.PSAT = {
-        tabsData: this.tabsData,
-        tabs: this.tabs,
-      };
+
       updateCookieBadgeText(this.tabsData[tabId], tabId);
     } catch (error) {
       //Fail silently
@@ -297,6 +293,10 @@ class SynchnorousCookieStore {
    * @param {number} tabId The active tab id.
    */
   removeCookieData(tabId: number) {
+    if (!this.tabs[tabId] || !this.tabsData[tabId]) {
+      return;
+    }
+
     delete this.tabsData[tabId];
     this.tabsData[tabId] = {};
     this.tabs[tabId].newUpdates = 0;
@@ -311,6 +311,11 @@ class SynchnorousCookieStore {
     if (this.tabsData[tabId] && this.tabs[tabId]) {
       return;
     }
+    //@ts-ignore Since this is for debugging the data to check the data being collected by the storage.
+    globalThis.PSAT = {
+      tabsData: this.tabsData,
+      tabs: this.tabs,
+    };
 
     this.tabsData[tabId] = {};
     this.tabs[tabId] = {
@@ -354,6 +359,9 @@ class SynchnorousCookieStore {
     tabId: number,
     overrideForInitialSync = false
   ) {
+    if (!this.tabs[tabId] || !this.tabsData[tabId]) {
+      return;
+    }
     let sentMessageAnyWhere = false;
 
     try {
@@ -385,13 +393,12 @@ class SynchnorousCookieStore {
           },
         });
       }
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
-    }
 
-    if (sentMessageAnyWhere) {
-      this.tabs[tabId].newUpdates = 0;
+      if (sentMessageAnyWhere) {
+        this.tabs[tabId].newUpdates = 0;
+      }
+    } catch (error) {
+      //Fail silently. Ignoring the console.warn here because the only error this will throw is of "Error: Could not establish connection".
     }
   }
 }

diff --git a/packages/extension/src/store/tests/synchnorousCookieStore.ts b/packages/extension/src/store/tests/synchnorousCookieStore.ts
@@ -24,16 +24,15 @@ let synchnorousCookieStore: SynchnorousCookieStore;
 describe('SynchnorousCookieStore:', () => {
   beforeAll(() => {
     globalThis.chrome = SinonChrome as unknown as typeof chrome;
+    synchnorousCookieStore = new SynchnorousCookieStore();
   });
 
   beforeEach(() => {
-    synchnorousCookieStore = new SynchnorousCookieStore();
     synchnorousCookieStore.addTabData(123456);
     synchnorousCookieStore.updateUrl(123456, 'https://bbc.com');
   });
 
   afterEach(() => {
-    synchnorousCookieStore = new SynchnorousCookieStore();
     synchnorousCookieStore.clear();
   });
 

diff --git a/packages/extension/src/store/utils/updateCookieBadgeText.ts b/packages/extension/src/store/utils/updateCookieBadgeText.ts
@@ -38,10 +38,18 @@ export default function updateCookieBadgeText(
         storage[cookieKey].frameIdList?.length >= 1
     ).length;
     if (numCookies >= 0) {
-      chrome.action.setBadgeText({
-        tabId: tabId,
-        text: numCookies.toString(),
-      });
+      chrome.action.setBadgeText(
+        {
+          tabId: tabId,
+          text: numCookies.toString(),
+        },
+        () => {
+          if (chrome.runtime.lastError) {
+            // eslint-disable-next-line no-console
+            console.warn(chrome.runtime.lastError);
+          }
+        }
+      );
     }
   } catch (error) {
     // do nothing

diff --git a/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx b/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx
@@ -369,15 +369,20 @@ export const Provider = ({ children }: PropsWithChildren) => {
   );
 
   const tabRemovedListener = useCallback(async () => {
-    const availableTabs = await chrome.tabs.query({});
-
-    if (
-      availableTabs.length === ALLOWED_NUMBER_OF_TABS &&
-      availableTabs.filter(
-        (processingTab) => processingTab.id?.toString() === tabToRead
-      )
-    ) {
-      setReturningToSingleTab(true);
+    try {
+      const availableTabs = await chrome.tabs.query({});
+
+      if (
+        availableTabs.length === ALLOWED_NUMBER_OF_TABS &&
+        availableTabs.filter(
+          (processingTab) => processingTab.id?.toString() === tabToRead
+        )
+      ) {
+        setReturningToSingleTab(true);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.warn(error);
     }
   }, [tabToRead]);