Fix: V0.11 QA issues (#835)

* Remove autofocus from tabs

* Reorganize banner and move outside scrollable container

* Use callback and return calculation in memoised state

* Text and style changes

* Center the icons

* Scroll to top when panelchanges

* Fix jest test

* Prevent adding dashes to the title

* Hide download button and add correct version number.

* Remove download button if 0 cookies.

* Fix version not visible in sitemap html file.

* Disable download button if the cli analysis doesnt have cookies.

* Properly render sequence diagrams.

* Fix path error.

* Fix color css.

* Fix add report path generated by -o

* Fix jest config to address failing test.

* Fix failing tests.

* Lazy load mermaid js.

* Add min height

* Fix cookie count issue in report and extension.

* Fix mermaid js import.

* Fix event link.

* Fix UTM param extension scope

* change conditions to navigate when no children are available

* Fix toast spacing issue

* Update texts for ja and es locale

* Fix isBlocked.

* Remove extension dependency from extension.

---------

Co-authored-by: sayedtaqui <sayedwp@gmail.com>
Co-authored-by: Amoghavarsha Kudaligi <kgamoghavarsha@gmail.com>

packages/cli/src/index.ts

@@ -35,6 +35,7 @@ import {
   LIBRARIES,
   detectMatchingSignatures,
 } from '@google-psat/library-detection';
+import { pathToFileURL } from 'node:url';
 
 /**
  * Internal dependencies.
@@ -288,6 +289,7 @@ program.parse();
   if (outDir) {
     await saveReports(path.resolve(outputDir), result, sitemapUrl);
     console.log('Reports created successfully!');
+    console.log(`Report path: ${pathToFileURL(outputDir)}`);
     process.exit(0);
   }
 

packages/cli/src/utils/validators.ts

@@ -203,25 +203,30 @@ export function outDirValidator(outDir: string, flag: string) {
     }
   }
 
-  const parentDirExists = existsSync(path.resolve('./out'));
+  let output;
 
-  if (!parentDirExists) {
-    mkdirSync(path.resolve('./out'));
-  }
+  try {
+    const parentDirExists = existsSync(path.resolve('./out'));
 
-  let output;
+    if (!parentDirExists) {
+      mkdirSync(path.resolve('./out'));
+    }
 
-  if (!path.isAbsolute(outDir)) {
-    output = path.resolve('./out', outDir);
-  } else {
-    output = path.resolve(outDir);
-  }
+    if (!path.isAbsolute(outDir)) {
+      output = path.resolve('./out', outDir);
+    } else {
+      output = path.resolve(outDir);
+    }
 
-  const outDirExists = existsSync(output);
+    const outDirExists = existsSync(output);
 
-  if (!outDirExists) {
-    console.log(`"${output}" does not exist, creating\n`);
-    mkdirSync(output);
+    if (!outDirExists) {
+      mkdirSync(output);
+      console.log(`"${output}" does not exist, creating\n`);
+    }
+    return outDir;
+  } catch (error) {
+    redLogger(`Error in creating directory ${output}.`);
+    return null;
   }
-  return outDir;
 }

packages/common/src/utils/addUTMParams.ts

@@ -28,7 +28,9 @@ const addUTMParams = (
   if (
     //@ts-ignore
     !globalThis?.WorkerNavigator &&
-    !globalThis?.chrome?.devtools?.inspectedWindow?.tabId
+    !globalThis?.chrome?.devtools?.inspectedWindow?.tabId &&
+    // @ts-ignore Global variable.
+    !globalThis?.PSAT_EXTENSION
   ) {
     //@ts-ignore
     calculatedMedium = globalThis?.PSAT_DATA?.source ?? 'cli';

packages/common/src/utils/reshapeCookies.ts

@@ -28,7 +28,7 @@ import deriveBlockingStatus from './deriveBlockingStatus';
 
 const reshapeCookies = (cookies: CookieFrameStorageType) => {
   return Object.entries(cookies)
-    .filter(([frame]) => frame.includes('http'))
+    .filter(([frame]) => frame.includes('http') || frame === 'unknown')
     .map(([frame, _cookies]) => createCookieObj(frame, _cookies))
     .reduce((acc, cookieObj) => {
       Object.keys(cookieObj).forEach((key) => {
@@ -80,6 +80,7 @@ const reshapeCookies = (cookies: CookieFrameStorageType) => {
             frameUrls,
             networkEvents,
             blockingStatus,
+            isBlocked: acc[key]?.isBlocked || cookieObj[key]?.isBlocked,
           };
         } else {
           acc[key] = cookieObj[key];

packages/design-system/src/components/landingPage/contentPanel.tsx

@@ -45,7 +45,7 @@ const ContentPanel = ({
             href={addUTMParams(item.url)}
             target="_blank"
             rel="noreferrer"
-            className="w-72 h-80 bg-[#FDFDFD] dark:bg-charleston-green hover:bg-[#FAFAFA] rounded-xl border border-bright-gray dark:border-quartz p-5 hover:shadow hover:scale-[1.03] transition-all duration-150 ease-in-out "
+            className="w-72 min-h-80 bg-[#FDFDFD] dark:bg-charleston-green hover:bg-[#FAFAFA] rounded-xl border border-bright-gray dark:border-quartz p-5 hover:shadow hover:scale-[1.03] transition-all duration-150 ease-in-out "
           >
             <div className="w-16 h-16 flex justify-center items-center rounded-full bg-bright-gray mb-5">
               <div

packages/design-system/src/components/sidebar/collapsedSidebar.tsx

@@ -58,7 +58,7 @@ const CollapsedSidebar = () => {
         'flex flex-col justify-between items-center p-2 w-full h-full'
       )}
     >
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-2 justify-center items-center">
         <button
           className="cursor-pointer hover:opacity-60"
           title="Expand Sidebar Menu"
@@ -100,7 +100,7 @@ const CollapsedSidebar = () => {
           );
         })}
       </div>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col justify-center items-center gap-4">
         {Object.keys(collapsedSidebarItems?.footerElements || {}).map((key) => {
           const Icon = collapsedSidebarItems?.footerElements[key].icon.Element;
 

packages/design-system/src/components/sidebar/sidebarChild.tsx

@@ -98,7 +98,7 @@ const SidebarChild = ({
           }
           setIsSidebarFocused(true);
         }}
-        className={`relative w-full flex items-center py-0.5 outline-0 text-xs dark:text-bright-gray ${
+        className={`w-full flex items-center py-0.5 outline-0 text-xs dark:text-bright-gray ${
           isKeySelected(itemKey)
             ? isSidebarFocused
               ? 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver'
@@ -155,12 +155,7 @@ const SidebarChild = ({
             </span>
           ) : null}
         </p>
-        <div
-          className="absolute"
-          style={{
-            left: visibleWidth ? visibleWidth - 20 : 0,
-          }}
-        >
+        <div className="absolute right-0 px-1">
           {ExtraInterfaceToTitle && (
             <ExtraInterfaceToTitle
               {...sidebarItem.extraInterfaceToTitle?.props}

packages/design-system/src/components/sidebar/useSidebar/utils/findNextItem.ts

@@ -56,7 +56,11 @@ const findNextItem = (
   const currentItem = findItem(items, currentKey) as SidebarItemValue;
 
   if (currentItem?.dropdownOpen && !skipDropdown) {
-    return handleNextItemOnParent(currentItem);
+    const next = handleNextItemOnParent(currentItem);
+
+    if (next) {
+      return next;
+    }
   }
 
   const parentKey = findKeyParent(keyPath);

packages/design-system/src/components/sidebar/useSidebar/utils/findPrevItem.ts

@@ -54,7 +54,7 @@ const findPrevItem = (items: SidebarItems, keyPath: string[]) => {
   let prevKey = keys[currentIndex - 1];
   let prevItem = children[prevKey];
 
-  while (prevItem?.dropdownOpen) {
+  while (prevItem?.dropdownOpen && Object.keys(prevItem.children).length) {
     const prevItemChildren = Object.keys(prevItem.children);
     prevItem = prevItem.children[prevItemChildren[prevItemChildren.length - 1]];
     prevKey = prevItemChildren[prevItemChildren.length - 1];

packages/design-system/src/components/table/components/tableTopBar/index.tsx

@@ -99,7 +99,7 @@ const TableTopBar = ({
         )}
       </div>
 
-      <div className="text-right w-full text-xxxs text-secondary">
+      <div className="text-right w-full text-xxxs text-secondary dark:text-chinese-silver">
         {I18n.getMessage('count')}: {rows.length ?? 0}
       </div>
     </div>

packages/design-system/src/components/tabs/index.tsx

@@ -68,7 +68,6 @@ const Tabs = ({ items }: TabsProps) => {
             key={index}
             onClick={() => setActiveTab(index)}
             onKeyDown={handleKeyDown}
-            autoFocus={index === 0}
             className={classNames(
               'pb-1.5 px-3 border-b-2 hover:opacity-80 outline-none text-sm',
               {

packages/extension/package.json

@@ -37,6 +37,7 @@
     "github-markdown-css": "^5.6.1",
     "marked": "^14.0.0",
     "marked-alert": "^2.0.2",
+    "mermaid": "^11.2.0",
     "p-queue": "^7.3.4",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",

packages/extension/src/serviceWorker/chromeListeners/index.ts

@@ -89,7 +89,7 @@ chrome.tabs.onRemoved.addListener(onTabRemovedListener);
 
 /**
  * Fires when a tab is updated.
- * @see https://developer.chrome.com/docs/extensions/reference/api/tabs#event-onUpdated
+ * @see https://developer.chrome.com/docs/extensions/reference/api/webNavigation#event-onCommitted
  */
 chrome.webNavigation.onCommitted.addListener(onCommittedNavigationListener);
 

packages/extension/src/utils/convertMarkdownToHTML.ts

@@ -22,8 +22,18 @@ import markedAlert from 'marked-alert';
 export const IMAGE_BASE_URL =
   'https://raw.githubusercontent.com/wiki/GoogleChromeLabs/ps-analysis-tool/images';
 
-const convertMarkdownToHTML = async (markdown: string) => {
-  const marked = new Marked().use(markedAlert());
+const convertMarkdownToHTML = async (markdown: string, mermaidJS: any) => {
+  const marked = new Marked().use(markedAlert(), {
+    renderer: {
+      code: function (code) {
+        if (code.lang === 'mermaid') {
+          return `<pre class="mermaid">${code.text}</pre>`;
+        }
+        return `<pre>${code.text}</pre>`;
+      },
+    },
+  });
+
   let html = await marked.parse(markdown);
 
   html = html.replace(
@@ -35,7 +45,33 @@ const convertMarkdownToHTML = async (markdown: string) => {
     '<a target="_blank" '
   );
 
-  return html;
+  if (!mermaidJS) {
+    return html;
+  }
+
+  const DOMParsers = new DOMParser();
+  const content = DOMParsers.parseFromString(html, 'text/html');
+
+  if (document.querySelector('body')?.classList.contains('dark')) {
+    mermaidJS?.initialize({
+      theme: 'dark',
+    });
+  }
+
+  await Promise.all(
+    Array.from(content.querySelectorAll('.mermaid')).map(async (el, i) => {
+      if (el?.textContent) {
+        const element = await mermaidJS?.render(
+          `mermaid-${i}`,
+          el?.textContent
+        );
+        return (el.innerHTML = element.svg);
+      }
+      return el;
+    })
+  );
+
+  return content.documentElement.querySelector('body')?.innerHTML ?? '';
 };
 
 export default convertMarkdownToHTML;

packages/extension/src/utils/downloadReport.ts

@@ -106,6 +106,7 @@ export const generateDashboard = async (
     appliedFilters,
     dateTime,
     psatVersion: version,
+    hideDownloadButton: true,
   })}`;
 
   script.text = code;

packages/extension/src/utils/generateReportObject.ts

@@ -157,6 +157,10 @@ const generateCookieDataForDashboard = (
 
   Array.from(frameUrlSet).forEach((frameURL) => {
     if (frameURL === 'undefined' || !frameURL) {
+      cookieData['unknown'] = {
+        frameCookies: {},
+        frameType: 'sub_frame',
+      };
       return;
     }
 
@@ -167,6 +171,7 @@ const generateCookieDataForDashboard = (
   });
 
   Object.entries(tabCookies).forEach(([cookieKey, cookie]) => {
+    let wasCookieAdded = false;
     cookie.frameIdList?.forEach((frameId) => {
       const frameURL = frameIdToUrlMapping[frameId];
 
@@ -175,20 +180,34 @@ const generateCookieDataForDashboard = (
       }
 
       if (cookieData[frameURL]?.frameCookies) {
+        wasCookieAdded = true;
         //@ts-ignore since the parsedCookie
         cookieData[frameURL].frameCookies[cookieKey] = cookie;
         cookieData[frameURL].frameType =
           tabFrames[frameURL]?.frameType ?? 'sub_frame';
+        return;
       } else {
+        wasCookieAdded = true;
         cookieData[frameURL] = {
           //@ts-ignore since the parsedCookie
           frameCookies: {
             [cookieKey]: cookie,
           },
           frameType: tabFrames[frameURL]?.frameType ?? 'sub_frame',
         };
+        return;
       }
     });
+
+    if (!wasCookieAdded) {
+      cookieData['unknown'] = {
+        //@ts-ignore since the parsedCookie
+        frameCookies: {
+          ...(cookieData['unknown']?.frameCookies ?? {}),
+          [cookieKey]: cookie,
+        },
+      };
+    }
   });
   return cookieData;
 };