diff --git a/CHANGELOG.md b/CHANGELOG.md index 4a95282e8..9bf627a0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -175,3 +175,8 @@ * Enhancement: Reorder column to get important data at https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/337 * Update quick links on landing pages https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/329 + +# v0.4.1 +### Extension + +- Enhancement: Allow blurring the sidebar items https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/384 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9bd543574..49a2523fa 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ps-analysis-tool", - "version": "0.4.0", + "version": "0.4.1", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ps-analysis-tool", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "workspaces": [ "packages/*" @@ -24205,7 +24205,7 @@ }, "packages/cli": { "name": "@ps-analysis-tool/cli", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "@ps-analysis-tool/common": "*", @@ -24235,7 +24235,7 @@ }, "packages/cli-dashboard": { "name": "@ps-analysis-tool/cli-dashboard", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "@ps-analysis-tool/common": "*", @@ -24974,7 +24974,7 @@ }, "packages/common": { "name": "@ps-analysis-tool/common", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "tldts": "^6.0.14" @@ -24991,7 +24991,7 @@ }, "packages/design-system": { "name": "@ps-analysis-tool/design-system", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "@ps-analysis-tool/common": "*", @@ -25002,7 +25002,7 @@ }, "packages/eslint-import-resolver": { "name": "@ps-analysis-tool/eslint-import-resolver", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "eslint-import-resolver-node": "^0.3.7" @@ -25010,7 +25010,7 @@ }, "packages/extension": { "name": "@ps-analysis-tool/extension", - "version": "0.4.0", + "version": "0.4.1", "license": "Apache-2.0", "dependencies": { "@floating-ui/core": "^1.5.0", diff --git a/package.json b/package.json index 0666f6ac1..3be9c18d7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ps-analysis-tool", - "version": "0.4.0", + "version": "0.4.1", "description": "Cookie Analysis Tool and CLI for analysis and understanding of cookie usage on web pages.", "scripts": { "cli:prebuild": "node ./scripts/delete-build-artifacts.cjs", diff --git a/packages/cli-dashboard/package.json b/packages/cli-dashboard/package.json index 065e5978e..fb2beaf98 100644 --- a/packages/cli-dashboard/package.json +++ b/packages/cli-dashboard/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/cli-dashboard", - "version": "0.4.0", + "version": "0.4.1", "description": "Dashboard for visualizing cli analysis output", "repository": { "type": "git", diff --git a/packages/cli-dashboard/src/components/utils/tests/data.mock.ts b/packages/cli-dashboard/src/components/utils/tests/data.mock.ts index 27d52abe7..bc5e7a1ad 100644 --- a/packages/cli-dashboard/src/components/utils/tests/data.mock.ts +++ b/packages/cli-dashboard/src/components/utils/tests/data.mock.ts @@ -14,6 +14,11 @@ * limitations under the License. */ +/** + * External dependencies + */ +import { UNKNOWN_FRAME_KEY } from '@ps-analysis-tool/common'; + export const tempSinglePageData = { pageUrl: 'https://edition.cnn.com/sitemaps/sitemap-section.xml', cookieData: { @@ -38,7 +43,7 @@ export const tempSinglePageData = { }, }, }, - 'Unknown frame(s)': { + [UNKNOWN_FRAME_KEY]: { frameCookies: {}, cookiesCount: 0, }, @@ -108,7 +113,7 @@ export const tempMultiPageData = [ }, }, }, - 'Unknown frame(s)': { + [UNKNOWN_FRAME_KEY]: { frameCookies: {}, cookiesCount: 1, }, @@ -157,7 +162,7 @@ export const tempMultiPageData = [ }, }, }, - 'Unknown frame(s)': { + [UNKNOWN_FRAME_KEY]: { frameCookies: {}, cookiesCount: 1, }, diff --git a/packages/cli-dashboard/src/components/utils/tests/extractCookies.ts b/packages/cli-dashboard/src/components/utils/tests/extractCookies.ts index d4bbf70aa..a16f1fb5b 100644 --- a/packages/cli-dashboard/src/components/utils/tests/extractCookies.ts +++ b/packages/cli-dashboard/src/components/utils/tests/extractCookies.ts @@ -52,7 +52,7 @@ describe('extractCookies', () => { frameUrl: 'https://edition.cnn.com', }, }, - 'Unknown frame(s)': {}, + [UNKNOWN_FRAME_KEY]: {}, }); isLandingPage = false; diff --git a/packages/cli-dashboard/src/components/utils/tests/extractReportData.ts b/packages/cli-dashboard/src/components/utils/tests/extractReportData.ts index d921ea361..4550c1a1b 100644 --- a/packages/cli-dashboard/src/components/utils/tests/extractReportData.ts +++ b/packages/cli-dashboard/src/components/utils/tests/extractReportData.ts @@ -14,6 +14,10 @@ * limitations under the License. */ +/** + * External dependencies + */ +import { UNKNOWN_FRAME_KEY } from '@ps-analysis-tool/common'; /** * Internal dependencies */ @@ -70,7 +74,7 @@ describe('extractReportData', () => { frameUrl: 'https://edition.cnn.com', }, }, - 'Unknown frame(s)': {}, + [UNKNOWN_FRAME_KEY]: {}, }, technologies: [ { @@ -131,7 +135,7 @@ describe('extractReportData', () => { frameUrl: 'https://edition.cnn.com', }, }, - 'Unknown frame(s)': {}, + [UNKNOWN_FRAME_KEY]: {}, }, }); }); diff --git a/packages/cli-dashboard/src/components/utils/tests/reshapeCookies.ts b/packages/cli-dashboard/src/components/utils/tests/reshapeCookies.ts index 22d93625c..588fa69fe 100644 --- a/packages/cli-dashboard/src/components/utils/tests/reshapeCookies.ts +++ b/packages/cli-dashboard/src/components/utils/tests/reshapeCookies.ts @@ -14,6 +14,10 @@ * limitations under the License. */ +/** + * External dependencies + */ +import { UNKNOWN_FRAME_KEY } from '@ps-analysis-tool/common'; /** * Internal dependencies */ @@ -47,7 +51,7 @@ describe('reshapeCookies', () => { frameUrls: { sadf: 'https://edition.cnn.com' }, }, }, - 'Unknown frame(s)': {}, + [UNKNOWN_FRAME_KEY]: {}, }; expect(reshapeCookies(cookies)).toEqual({ diff --git a/packages/cli/package.json b/packages/cli/package.json index 8c6e57ff4..320d5936c 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/cli", - "version": "0.4.0", + "version": "0.4.1", "description": "CLI tool for analysis", "main": "index.js", "scripts": { diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts index 1de24bd5d..80bd5eaff 100644 --- a/packages/cli/src/index.ts +++ b/packages/cli/src/index.ts @@ -42,7 +42,7 @@ const DELAY_TIME = 20000; const program = new Command(); program - .version('0.4.0') + .version('0.4.1') .description('CLI to test a URL for 3p cookies') .option('-u, --url ', 'URL of a site') .option('-s, --sitemap-url ', 'URL of a sitemap') diff --git a/packages/common/package.json b/packages/common/package.json index 6359e3710..12d944678 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/common", - "version": "0.4.0", + "version": "0.4.1", "description": "A package for common utilities that are being used in multiple packages", "main": "./dist/index.js", "types": "./dist-types/index.d.ts", diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index 1fbb14b5e..9505e61b0 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -33,4 +33,4 @@ export { default as parseRequestWillBeSentExtraInfo } from './utils/parseRequest export { default as getDomainFromUrl } from './utils/getDomainFromUrl'; export { default as noop } from './utils/noop'; export * from './cookies.types'; -export const UNKNOWN_FRAME_KEY = 'Unknown frame(s)'; +export const UNKNOWN_FRAME_KEY = 'Unknown Frame(s)'; diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 56de34025..96bbdfc39 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/design-system", - "version": "0.4.0", + "version": "0.4.1", "description": "A package for presentational components that are being used in multiple packages", "main": "./src/index.ts", "source":"./src/index.ts", diff --git a/packages/design-system/src/components/sidebar/sidebarChild.tsx b/packages/design-system/src/components/sidebar/sidebarChild.tsx index 008c28ae8..97c3f76b2 100644 --- a/packages/design-system/src/components/sidebar/sidebarChild.tsx +++ b/packages/design-system/src/components/sidebar/sidebarChild.tsx @@ -96,7 +96,7 @@ const SidebarChild = ({ ? 'bg-royal-blue text-white dark:bg-medium-persian-blue dark:text-chinese-silver' : 'bg-gainsboro dark:bg-outer-space' : 'bg-white dark:bg-raisin-black' - } cursor-pointer`} + } cursor-pointer ${sidebarItem.isBlurred ? 'opacity-50' : ''}`} style={{ paddingLeft: recursiveStackIndex * 16 + 12 }} > {Object.keys(sidebarItem.children)?.length !== 0 && ( diff --git a/packages/design-system/src/components/sidebar/useSidebar/index.tsx b/packages/design-system/src/components/sidebar/useSidebar/index.tsx index f9bf03ba2..3e7698e87 100644 --- a/packages/design-system/src/components/sidebar/useSidebar/index.tsx +++ b/packages/design-system/src/components/sidebar/useSidebar/index.tsx @@ -38,6 +38,7 @@ export type SidebarItemValue = { panel?: React.ReactNode; icon?: React.ReactNode; selectedIcon?: React.ReactNode; + isBlurred?: boolean; }; export type SidebarItems = { diff --git a/packages/eslint-import-resolver/package.json b/packages/eslint-import-resolver/package.json index f21d02c54..cc9d5058a 100644 --- a/packages/eslint-import-resolver/package.json +++ b/packages/eslint-import-resolver/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/eslint-import-resolver", - "version": "0.4.0", + "version": "0.4.1", "description": "", "main": "src/index.cjs", "scripts": { diff --git a/packages/extension/package.json b/packages/extension/package.json index adfc46e0b..a5124c0b9 100644 --- a/packages/extension/package.json +++ b/packages/extension/package.json @@ -1,6 +1,6 @@ { "name": "@ps-analysis-tool/extension", - "version": "0.4.0", + "version": "0.4.1", "description": "Chrome extension for cookie analysis", "repository": { "type": "git", diff --git a/packages/extension/src/manifest.json b/packages/extension/src/manifest.json index d018432d5..9fc235898 100644 --- a/packages/extension/src/manifest.json +++ b/packages/extension/src/manifest.json @@ -1,7 +1,7 @@ { "name": "Privacy Sandbox Analysis Tool", "description": "Tooling for understanding cookie usage and guidance on new privacy-preserving Chrome APIs.", - "version": "0.4.0", + "version": "0.4.1", "manifest_version": 3, "icons": { "16": "icons/icon-16.png", diff --git a/packages/extension/src/view/devtools/app.tsx b/packages/extension/src/view/devtools/app.tsx index 374f4022e..8d68274bc 100644 --- a/packages/extension/src/view/devtools/app.tsx +++ b/packages/extension/src/view/devtools/app.tsx @@ -16,7 +16,13 @@ /** * External dependencies. */ -import React, { useRef, useEffect, useCallback, useState } from 'react'; +import React, { + useRef, + useEffect, + useCallback, + useState, + useMemo, +} from 'react'; import { Resizable } from 're-resizable'; import { CookieIcon, @@ -27,7 +33,10 @@ import { type SidebarItems, InspectButton, } from '@ps-analysis-tool/design-system'; -import type { CookieTableData } from '@ps-analysis-tool/common'; +import { + UNKNOWN_FRAME_KEY, + type CookieTableData, +} from '@ps-analysis-tool/common'; /** * Internal dependencies. @@ -46,6 +55,7 @@ const App: React.FC = () => { const { contextInvalidated, setContextInvalidated, + tabCookies, tabFrames, selectedFrame, setSelectedFrame, @@ -56,6 +66,7 @@ const App: React.FC = () => { } = useCookieStore(({ state, actions }) => ({ contextInvalidated: state.contextInvalidated, setContextInvalidated: actions.setContextInvalidated, + tabCookies: state.tabCookies, tabFrames: state.tabFrames, selectedFrame: state.selectedFrame, setSelectedFrame: actions.setSelectedFrame, @@ -96,6 +107,47 @@ const App: React.FC = () => { })(); }, []); + const doesFrameContainCookies = useMemo(() => { + if (!tabCookies) { + return {}; + } + + const tabFramesIdsWithURL = Object.entries(tabFrames || {}).reduce( + (acc, [url, frame]) => { + frame.frameIds?.forEach((id) => { + acc[id] = url; + }); + + return acc; + }, + {} as Record + ); + + const _doesFrameContainCookies = Object.values(tabCookies).reduce( + (acc, cookie) => { + let hasFrame = false; + + cookie.frameIdList?.forEach((frameId) => { + const url = tabFramesIdsWithURL[frameId]; + + if (url) { + acc[url] = true; + hasFrame = true; + } + }); + + if (!hasFrame && cookie.frameIdList?.length > 0) { + acc[UNKNOWN_FRAME_KEY] = true; + } + + return acc; + }, + {} as Record + ); + + return _doesFrameContainCookies; + }, [tabCookies, tabFrames]); + const { activePanel, selectedItemKey, @@ -130,6 +182,7 @@ const App: React.FC = () => { icon: , selectedIcon: , children: {}, + isBlurred: !doesFrameContainCookies[url], }; return acc; @@ -156,6 +209,7 @@ const App: React.FC = () => { }); }, [ canStartInspecting, + doesFrameContainCookies, isInspecting, isKeySelected, isSidebarFocused, diff --git a/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx b/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx index f94f88189..e41adc1d1 100644 --- a/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx +++ b/packages/extension/src/view/devtools/stateProviders/syncCookieStore/index.tsx @@ -25,10 +25,11 @@ import React, { useRef, } from 'react'; import { noop } from '@ps-analysis-tool/design-system'; -import type { - TabCookies, - TabFrames, - CookieData, +import { + type TabCookies, + type TabFrames, + type CookieData, + UNKNOWN_FRAME_KEY, } from '@ps-analysis-tool/common'; /** @@ -155,7 +156,7 @@ export const Provider = ({ children }: PropsWithChildren) => { return tabFrame; }) ); - modifiedTabFrames['Unknown Frame(s)'] = { frameIds: [] }; + modifiedTabFrames[UNKNOWN_FRAME_KEY] = { frameIds: [] }; setTabFrames(modifiedTabFrames); }, []