From af51cdaa90591e8491bb4d7ded1d74b63f24b8c8 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 07:05:02 +0530 Subject: [PATCH 01/39] Add content and basic styling for privacy sandbox landing page --- .../components/privacySandbox/index.tsx | 41 +++++++++++++++---- tailwind.config.cjs | 2 + 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index f8188f316..e1b9021b4 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -17,16 +17,43 @@ * External dependencies. */ import React from 'react'; -import { LandingPage } from '@google-psat/design-system'; +import { PrivacySandboxColoredIcon } from '@google-psat/design-system'; const PrivacySandbox = () => (
- +
+
+ +

Privacy Sandbox

+
+
+
+ +

+ Protecting your privacy online +

+

+ The Privacy Sandbox initiative aims to create technologies that both + protect people's privacy online and give companies and + developers tools to build thriving digital businesses. The Privacy + Sandbox reduces cross-site and cross-app tracking while helping to + keep online content and services free for all. +

+
+ + +
+
+
+
); diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 4adaa675e..9dbcc68c9 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -216,6 +216,7 @@ module.exports = { 'selection-green-dark': '#74d47e', 'selection-yellow-light': '#8b8f18', 'selection-yellow-dark': '#dbdb48', + 'cultured-grey': '#F7F7F7', }, borderColor: { ...colors, @@ -233,6 +234,7 @@ module.exports = { 'baby-blue-eyes': '#A8C7FA', 'leaf-green-dark': '#87DFB2', sapphire: '#0B57D0', + 'dark-grey': '#AAAAAA', }, colors: { ...colors, From f067334480e76b068a56278bfacf7144ccf0699f Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 10:11:36 +0530 Subject: [PATCH 02/39] Reduce font sizes to bring the content above the fold --- .../components/privacySandbox/index.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index e1b9021b4..7234ce80e 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -21,33 +21,33 @@ import { PrivacySandboxColoredIcon } from '@google-psat/design-system'; const PrivacySandbox = () => (
-
-
- -

Privacy Sandbox

+
+
+ +

Privacy Sandbox

-
+
-

+

Protecting your privacy online

-

+

The Privacy Sandbox initiative aims to create technologies that both protect people's privacy online and give companies and developers tools to build thriving digital businesses. The Privacy Sandbox reduces cross-site and cross-app tracking while helping to keep online content and services free for all.

-
- -
From f6730d69347976d68be2e826900e26eabbefd8ae Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 10:21:35 +0530 Subject: [PATCH 03/39] Add external icon and hover styling --- .../src/icons/external-link-black.svg | 1 + packages/design-system/src/icons/index.tsx | 1 + .../devtools/components/privacySandbox/index.tsx | 14 +++++++++----- 3 files changed, 11 insertions(+), 5 deletions(-) create mode 100644 packages/design-system/src/icons/external-link-black.svg diff --git a/packages/design-system/src/icons/external-link-black.svg b/packages/design-system/src/icons/external-link-black.svg new file mode 100644 index 000000000..43209f757 --- /dev/null +++ b/packages/design-system/src/icons/external-link-black.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/design-system/src/icons/index.tsx b/packages/design-system/src/icons/index.tsx index 4b67a45ed..f02497988 100644 --- a/packages/design-system/src/icons/index.tsx +++ b/packages/design-system/src/icons/index.tsx @@ -73,3 +73,4 @@ export { default as GreenTick } from './green-tick-icon.svg'; export { default as ChevronDown } from './chevron-down.svg'; export { default as WarningBare } from './warning.svg'; export { default as GroupsIcon } from './groups.svg'; +export { default as ExternalLinkBlack } from './external-link-black.svg'; diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index 7234ce80e..20104204f 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -17,7 +17,10 @@ * External dependencies. */ import React from 'react'; -import { PrivacySandboxColoredIcon } from '@google-psat/design-system'; +import { + PrivacySandboxColoredIcon, + ExternalLinkBlack, +} from '@google-psat/design-system'; const PrivacySandbox = () => (
@@ -43,11 +46,12 @@ const PrivacySandbox = () => ( Sandbox reduces cross-site and cross-app tracking while helping to keep online content and services free for all.

-
- -
From 71f42267b4dd8537098789b68a8eb81537bb5930 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 10:29:03 +0530 Subject: [PATCH 04/39] Add external link and quick links --- .../devtools/components/privacySandbox/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index 20104204f..2bff4b737 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -18,9 +18,11 @@ */ import React from 'react'; import { + QuickLinksList, PrivacySandboxColoredIcon, ExternalLinkBlack, } from '@google-psat/design-system'; +import { addUTMParams } from '@google-psat/common'; const PrivacySandbox = () => (
@@ -47,10 +49,14 @@ const PrivacySandbox = () => ( keep online content and services free for all.

- + @@ -58,6 +64,9 @@ const PrivacySandbox = () => (
+
+ +
); From 75678bc7c8d41d43c0befe08085cfb6028aad20d Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 11:14:58 +0530 Subject: [PATCH 05/39] Add new dashboard icon --- .../sidebar/useSidebar/constants.ts | 1 + .../src/icons/dashboard-white.svg | 1 + .../design-system/src/icons/dashboard.svg | 1 + packages/design-system/src/icons/index.tsx | 2 ++ .../devtools/components/dashboard/index.tsx | 31 +++++++++++++++++++ .../src/view/devtools/components/index.ts | 1 + packages/extension/src/view/devtools/tabs.ts | 17 ++++++++++ 7 files changed, 54 insertions(+) create mode 100644 packages/design-system/src/icons/dashboard-white.svg create mode 100644 packages/design-system/src/icons/dashboard.svg create mode 100644 packages/extension/src/view/devtools/components/dashboard/index.tsx diff --git a/packages/design-system/src/components/sidebar/useSidebar/constants.ts b/packages/design-system/src/components/sidebar/useSidebar/constants.ts index bb6314272..2902d5d62 100644 --- a/packages/design-system/src/components/sidebar/useSidebar/constants.ts +++ b/packages/design-system/src/components/sidebar/useSidebar/constants.ts @@ -15,6 +15,7 @@ */ export enum SIDEBAR_ITEMS_KEYS { + DASHBOARD = 'dashboard', COOKIES = 'cookies', COOKIES_WITH_ISSUES = 'cookie-issues', TECHNOLOGIES = 'technologies', diff --git a/packages/design-system/src/icons/dashboard-white.svg b/packages/design-system/src/icons/dashboard-white.svg new file mode 100644 index 000000000..8eda7fc0b --- /dev/null +++ b/packages/design-system/src/icons/dashboard-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/design-system/src/icons/dashboard.svg b/packages/design-system/src/icons/dashboard.svg new file mode 100644 index 000000000..ee7f4eb98 --- /dev/null +++ b/packages/design-system/src/icons/dashboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/design-system/src/icons/index.tsx b/packages/design-system/src/icons/index.tsx index f02497988..5565b1d2f 100644 --- a/packages/design-system/src/icons/index.tsx +++ b/packages/design-system/src/icons/index.tsx @@ -74,3 +74,5 @@ export { default as ChevronDown } from './chevron-down.svg'; export { default as WarningBare } from './warning.svg'; export { default as GroupsIcon } from './groups.svg'; export { default as ExternalLinkBlack } from './external-link-black.svg'; +export { default as DashboardIcon } from './dashboard.svg'; +export { default as DashboardIconWhite } from './dashboard-white.svg'; diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx new file mode 100644 index 000000000..50d69ed58 --- /dev/null +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -0,0 +1,31 @@ +/* + * Copyright 2024 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 { DashboardIcon } from '@google-psat/design-system'; + +const Dashboard = () => { + return ( +
+ +

Dashboard

+
+ ); +}; + +export default Dashboard; diff --git a/packages/extension/src/view/devtools/components/index.ts b/packages/extension/src/view/devtools/components/index.ts index 9198cc7c1..86ecac272 100644 --- a/packages/extension/src/view/devtools/components/index.ts +++ b/packages/extension/src/view/devtools/components/index.ts @@ -20,3 +20,4 @@ export { default as Cookies } from './cookies'; export { default as PrivacySandbox } from './privacySandbox'; export { default as Settings } from './settings'; export { default as Layout } from './layout'; +export { default as Dashboard } from './dashboard'; diff --git a/packages/extension/src/view/devtools/tabs.ts b/packages/extension/src/view/devtools/tabs.ts index 7a6eb1c31..89dbb4cbe 100644 --- a/packages/extension/src/view/devtools/tabs.ts +++ b/packages/extension/src/view/devtools/tabs.ts @@ -42,6 +42,8 @@ import { type SidebarItems, SIDEBAR_ITEMS_KEYS, GroupsIcon, + DashboardIcon, + DashboardIconWhite, } from '@google-psat/design-system'; /** @@ -71,10 +73,25 @@ import { Settings, ProtectedAudience, PrivateAggregation, + Dashboard, } from './components'; import { I18n } from '@google-psat/i18n'; const TABS: SidebarItems = { + [SIDEBAR_ITEMS_KEYS.DASHBOARD]: { + title: () => 'Dashboard', + panel: { + Element: Dashboard, + }, + icon: { + Element: DashboardIcon, + }, + selectedIcon: { + Element: DashboardIconWhite, + }, + dropdownOpen: false, + children: {}, + }, [SIDEBAR_ITEMS_KEYS.PRIVACY_SANDBOX]: { title: () => 'Privacy Sandbox', panel: { From 98b04e0020c78cf0ad6c627cdaeea0ccc061844e Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 11:18:24 +0530 Subject: [PATCH 06/39] Add new dashboard title --- .../src/view/devtools/components/dashboard/index.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 50d69ed58..1f04e46a6 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -21,9 +21,13 @@ import { DashboardIcon } from '@google-psat/design-system'; const Dashboard = () => { return ( -
- -

Dashboard

+
+
+
+ +

Dashboard

+
+
); }; From 7617bce7003be5828de7f448b9a31cce5ace7e09 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 11:36:19 +0530 Subject: [PATCH 07/39] Add pinned items --- .../devtools/components/dashboard/index.tsx | 40 ++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 1f04e46a6..f5ac9cced 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -17,7 +17,27 @@ * External dependencies. */ import React from 'react'; -import { DashboardIcon } from '@google-psat/design-system'; +import { + DashboardIcon, + GroupsIcon, + CookieIcon, + RelatedWebsiteSetsIcon, +} from '@google-psat/design-system'; + +const PINNED_ITEMS = [ + { + name: 'Protected Audience', + icon: GroupsIcon, + }, + { + name: 'Cookies', + icon: CookieIcon, + }, + { + name: 'Related Website Sets', + icon: RelatedWebsiteSetsIcon, + }, +]; const Dashboard = () => { return ( @@ -27,6 +47,24 @@ const Dashboard = () => {

Dashboard

+
+

Pinned

+
+ {PINNED_ITEMS.map((item) => { + const Icon = item.icon; + + return ( +
+ + {item.name} +
+ ); + })} +
+
); From a513aac8ad6016353ed29b94d8a7234be89c0eab Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 12:08:05 +0530 Subject: [PATCH 08/39] Style pinned items --- .../src/view/devtools/components/dashboard/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index f5ac9cced..df4fc3ba6 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -47,8 +47,8 @@ const Dashboard = () => {

Dashboard

-
-

Pinned

+
+

Pinned

{PINNED_ITEMS.map((item) => { const Icon = item.icon; @@ -56,10 +56,10 @@ const Dashboard = () => { return (
- - {item.name} + + {item.name}
); })} From 11f40c6b7d1962a588ed909396810eefc09a14a8 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 12:31:55 +0530 Subject: [PATCH 09/39] Add features section and basic styles to it --- .../devtools/components/dashboard/index.tsx | 89 ++++++++++++++++++- 1 file changed, 88 insertions(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index df4fc3ba6..fad98d63c 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -22,8 +22,17 @@ import { GroupsIcon, CookieIcon, RelatedWebsiteSetsIcon, + AntiCovertTrackingIcon, + SiteBoundariesIcon, } from '@google-psat/design-system'; +/** + * Internal dependencies. + */ +// @ts-ignore - To ignore auto fixing path with package name. +// eslint-disable-next-line import/no-relative-packages +import PrivateAggregationIcon from '../../../../../../../assets/icons/private-aggregation.svg'; + const PINNED_ITEMS = [ { name: 'Protected Audience', @@ -39,6 +48,63 @@ const PINNED_ITEMS = [ }, ]; +const FEATURE_LIST = [ + { + name: 'Cookies', + icon: CookieIcon, + description: + 'Privacy Sandbox technologies enhance user privacy by allowing ad selection and measurement without individual tracking or third-party cookies.', + }, + { + name: 'Private Advertising', + icon: PrivateAggregationIcon, + description: + 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', + buttons: [ + { + name: 'Topics', + }, + { + name: 'Attribution', + }, + { + name: 'Protected Audience', + }, + { + name: 'Private Aggregation', + }, + ], + }, + { + name: 'Tracking Protection', + icon: AntiCovertTrackingIcon, + description: + 'The Privacy Sandbox initiative also includes efforts designed to limit covert tracking, including addressing specific covert tracking techniques such as fingerprinting and network-level tracking.', + buttons: [ + { + name: 'Bounce Tracking', + }, + { + name: 'Fingerprinting', + }, + ], + }, + { + name: 'Site Boundaries', + icon: SiteBoundariesIcon, + description: + 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents. Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', + buttons: [ + { + name: 'CHIPS', + }, + { + name: 'Related Website Sets', + }, + ], + }, +]; + const Dashboard = () => { return (
@@ -47,7 +113,7 @@ const Dashboard = () => {

Dashboard

-
+

Pinned

{PINNED_ITEMS.map((item) => { @@ -65,6 +131,27 @@ const Dashboard = () => { })}
+
+

Features

+
+ {FEATURE_LIST.map((item) => { + const Icon = item.icon; + + return ( +
+
+ + {item.name} +
+

{item.description}

+
+ ); + })} +
+
); From 976f303415b72eea65b878510d34a73cccd76e24 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 12:51:51 +0530 Subject: [PATCH 10/39] Add buttons for each feature --- .../devtools/components/dashboard/index.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index fad98d63c..4098aa9f0 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -60,6 +60,7 @@ const FEATURE_LIST = [ icon: PrivateAggregationIcon, description: 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', + color: '', buttons: [ { name: 'Topics', @@ -107,7 +108,10 @@ const FEATURE_LIST = [ const Dashboard = () => { return ( -
+
@@ -147,6 +151,17 @@ const Dashboard = () => { {item.name}

{item.description}

+
+ {item.buttons && + item.buttons.map((button) => ( + + ))} +
); })} From 016c3e5d76784595c4b54a400c8bd759ea77f389 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 13:26:24 +0530 Subject: [PATCH 11/39] Style features color --- .../devtools/components/dashboard/index.tsx | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 4098aa9f0..36c68283e 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -25,6 +25,7 @@ import { AntiCovertTrackingIcon, SiteBoundariesIcon, } from '@google-psat/design-system'; +import classNames from 'classnames'; /** * Internal dependencies. @@ -60,7 +61,9 @@ const FEATURE_LIST = [ icon: PrivateAggregationIcon, description: 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', - color: '', + colorClasses: { + heading: 'text-bright-navy-blue', + }, buttons: [ { name: 'Topics', @@ -81,6 +84,9 @@ const FEATURE_LIST = [ icon: AntiCovertTrackingIcon, description: 'The Privacy Sandbox initiative also includes efforts designed to limit covert tracking, including addressing specific covert tracking techniques such as fingerprinting and network-level tracking.', + colorClasses: { + heading: 'text-third-party', + }, buttons: [ { name: 'Bounce Tracking', @@ -95,6 +101,9 @@ const FEATURE_LIST = [ icon: SiteBoundariesIcon, description: 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents. Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', + colorClasses: { + heading: 'text-first-party', + }, buttons: [ { name: 'CHIPS', @@ -140,6 +149,10 @@ const Dashboard = () => {
{FEATURE_LIST.map((item) => { const Icon = item.icon; + const headingClasses = classNames( + 'text-sm', + item?.colorClasses?.heading ? item?.colorClasses?.heading : '' + ); return (
{ >
- {item.name} +

{item.name}

{item.description}

From 297082e6d720eeae8910c5d5acfaffa8f02c1c19 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 13:40:55 +0530 Subject: [PATCH 12/39] Add internal links --- .../devtools/components/dashboard/index.tsx | 13 +++ .../components/privacySandbox/index.tsx | 99 +++++++++++-------- 2 files changed, 71 insertions(+), 41 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 36c68283e..aa914ac07 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -24,6 +24,8 @@ import { RelatedWebsiteSetsIcon, AntiCovertTrackingIcon, SiteBoundariesIcon, + useSidebar, + SIDEBAR_ITEMS_KEYS, } from '@google-psat/design-system'; import classNames from 'classnames'; @@ -67,15 +69,19 @@ const FEATURE_LIST = [ buttons: [ { name: 'Topics', + sidebarKey: SIDEBAR_ITEMS_KEYS.TOPICS, }, { name: 'Attribution', + sidebarKey: SIDEBAR_ITEMS_KEYS.ATTRIBUTION, }, { name: 'Protected Audience', + sidebarKey: SIDEBAR_ITEMS_KEYS.PROTECTED_AUDIENCE, }, { name: 'Private Aggregation', + sidebarKey: SIDEBAR_ITEMS_KEYS.PRIVATE_AGGREGATION, }, ], }, @@ -90,9 +96,11 @@ const FEATURE_LIST = [ buttons: [ { name: 'Bounce Tracking', + sidebarKey: SIDEBAR_ITEMS_KEYS.BOUNCE_TRACKING, }, { name: 'Fingerprinting', + sidebarKey: SIDEBAR_ITEMS_KEYS.FINGERPRINTING, }, ], }, @@ -107,15 +115,19 @@ const FEATURE_LIST = [ buttons: [ { name: 'CHIPS', + sidebarKey: SIDEBAR_ITEMS_KEYS.CHIPS, }, { name: 'Related Website Sets', + sidebarKey: SIDEBAR_ITEMS_KEYS.RELATED_WEBSITE_SETS, }, ], }, ]; const Dashboard = () => { + const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); + return (
{ diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index 2bff4b737..53040a34f 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -21,53 +21,70 @@ import { QuickLinksList, PrivacySandboxColoredIcon, ExternalLinkBlack, + useSidebar, + SIDEBAR_ITEMS_KEYS, } from '@google-psat/design-system'; import { addUTMParams } from '@google-psat/common'; -const PrivacySandbox = () => ( -
-
-
- -

Privacy Sandbox

-
-
-
+const PrivacySandbox = () => { + const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); + + return ( +
+
+
-

- Protecting your privacy online -

-

- The Privacy Sandbox initiative aims to create technologies that both - protect people's privacy online and give companies and - developers tools to build thriving digital businesses. The Privacy - Sandbox reduces cross-site and cross-app tracking while helping to - keep online content and services free for all. -

-
- - Learn About Privacy Sandbox - - - +

Privacy Sandbox

+
+
+
+ +

+ Protecting your privacy online +

+

+ The Privacy Sandbox initiative aims to create technologies that + both protect people's privacy online and give companies and + developers tools to build thriving digital businesses. The Privacy + Sandbox reduces cross-site and cross-app tracking while helping to + keep online content and services free for all. +

+
+ + Learn About Privacy Sandbox + + + +
-
-
-
-
- +
+ +
+ +
- -); + ); +}; export default PrivacySandbox; From 05b0ce42a54169010848b6b1243228f6c3c70286 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 16:48:05 +0530 Subject: [PATCH 13/39] Link iternal pages --- .../view/devtools/components/dashboard/index.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index aa914ac07..8178fbbbb 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -40,14 +40,17 @@ const PINNED_ITEMS = [ { name: 'Protected Audience', icon: GroupsIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.PROTECTED_AUDIENCE, }, { name: 'Cookies', icon: CookieIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, }, { name: 'Related Website Sets', icon: RelatedWebsiteSetsIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.RELATED_WEBSITE_SETS, }, ]; @@ -55,12 +58,14 @@ const FEATURE_LIST = [ { name: 'Cookies', icon: CookieIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, description: 'Privacy Sandbox technologies enhance user privacy by allowing ad selection and measurement without individual tracking or third-party cookies.', }, { name: 'Private Advertising', icon: PrivateAggregationIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.PRIVATE_ADVERTISING, description: 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', colorClasses: { @@ -88,6 +93,7 @@ const FEATURE_LIST = [ { name: 'Tracking Protection', icon: AntiCovertTrackingIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.ANTI_COVERT_TRACKING, description: 'The Privacy Sandbox initiative also includes efforts designed to limit covert tracking, including addressing specific covert tracking techniques such as fingerprinting and network-level tracking.', colorClasses: { @@ -107,6 +113,7 @@ const FEATURE_LIST = [ { name: 'Site Boundaries', icon: SiteBoundariesIcon, + sidebarKey: SIDEBAR_ITEMS_KEYS.SITE_BOUNDARIES, description: 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents. Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', colorClasses: { @@ -147,7 +154,8 @@ const Dashboard = () => { return (
navigateTo(item.sidebarKey)} > {item.name} @@ -169,7 +177,8 @@ const Dashboard = () => { return (
navigateTo(item.sidebarKey)} >
From 8cf808f693d38e5bd695c4a4857f027289fe8e3c Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 19:20:20 +0530 Subject: [PATCH 14/39] Handle button inside box --- .../devtools/components/dashboard/index.tsx | 31 +++++++++++++++++-- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 8178fbbbb..11d8551ee 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -16,7 +16,7 @@ /** * External dependencies. */ -import React from 'react'; +import React, { useCallback } from 'react'; import { DashboardIcon, GroupsIcon, @@ -135,6 +135,27 @@ const FEATURE_LIST = [ const Dashboard = () => { const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); + const handleFeatureBoxClick = useCallback( + (event: React.MouseEvent, sidebarKey: string) => { + const target = event.target as HTMLElement; + if (target?.tagName !== 'BUTTON') { + navigateTo(sidebarKey); + } + }, + [navigateTo] + ); + + const handleButtonClick = useCallback( + (event: React.MouseEvent, sidebarKey: string) => { + const target = event.target as HTMLElement; + + if (target?.tagName === 'BUTTON') { + navigateTo(sidebarKey); + } + }, + [navigateTo] + ); + return (
{
navigateTo(item.sidebarKey)} + onClick={(event) => + handleFeatureBoxClick(event, item.sidebarKey) + } >
@@ -191,7 +214,9 @@ const Dashboard = () => { From 39d808cc6250f6829e12e5cdafe6896a210e0c5d Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 19:28:55 +0530 Subject: [PATCH 15/39] Update description --- .../extension/src/view/devtools/components/dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 11d8551ee..2d28993d6 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -115,7 +115,7 @@ const FEATURE_LIST = [ icon: SiteBoundariesIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.SITE_BOUNDARIES, description: - 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents. Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', + 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', colorClasses: { heading: 'text-first-party', }, From b1b29e6ce0b06aaf82abc3fb664af55bd0ca14da Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Mon, 2 Sep 2024 19:34:59 +0530 Subject: [PATCH 16/39] Update cookies description --- .../extension/src/view/devtools/components/dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 2d28993d6..1ada50516 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -60,7 +60,7 @@ const FEATURE_LIST = [ icon: CookieIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, description: - 'Privacy Sandbox technologies enhance user privacy by allowing ad selection and measurement without individual tracking or third-party cookies.', + 'Provide information and insights regarding the behavior and distribution of cookies on web pages while navigating across sites during browsing sessions.', }, { name: 'Private Advertising', From 3134f2b719290cb3bea5ca05d856fc80825fa996 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Wed, 4 Sep 2024 18:31:43 +0530 Subject: [PATCH 17/39] Update styling for dark mode --- .../src/view/devtools/components/dashboard/index.tsx | 12 ++++++------ .../devtools/components/privacySandbox/index.tsx | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 1ada50516..099c8644f 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -159,7 +159,7 @@ const Dashboard = () => { return (
@@ -175,10 +175,10 @@ const Dashboard = () => { return (
navigateTo(item.sidebarKey)} > - + {item.name}
); @@ -198,13 +198,13 @@ const Dashboard = () => { return (
handleFeatureBoxClick(event, item.sidebarKey) } >
- +

{item.name}

{item.description}

@@ -212,7 +212,7 @@ const Dashboard = () => { {item.buttons && item.buttons.map((button) => ( From 065a7bba1365842be4e356b40015c8984e1cbba7 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Wed, 4 Sep 2024 18:35:12 +0530 Subject: [PATCH 18/39] Update cookie text --- .../extension/src/view/devtools/components/dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 099c8644f..1e84e79ff 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -60,7 +60,7 @@ const FEATURE_LIST = [ icon: CookieIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, description: - 'Provide information and insights regarding the behavior and distribution of cookies on web pages while navigating across sites during browsing sessions.', + 'Gain insights into the behavior and distribution of cookies on web pages while navigating across sites during browsing sessions.', }, { name: 'Private Advertising', From e1db82afb53303bbbed5f13b7ee227b2a1a69c6b Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Wed, 4 Sep 2024 18:37:16 +0530 Subject: [PATCH 19/39] Move dash below privacy sandbox --- packages/extension/src/view/devtools/tabs.ts | 28 ++++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/extension/src/view/devtools/tabs.ts b/packages/extension/src/view/devtools/tabs.ts index f0bc070eb..726560ffc 100644 --- a/packages/extension/src/view/devtools/tabs.ts +++ b/packages/extension/src/view/devtools/tabs.ts @@ -74,20 +74,6 @@ import { } from './components'; const TABS: SidebarItems = { - [SIDEBAR_ITEMS_KEYS.DASHBOARD]: { - title: () => 'Dashboard', - panel: { - Element: Dashboard, - }, - icon: { - Element: DashboardIcon, - }, - selectedIcon: { - Element: DashboardIconWhite, - }, - dropdownOpen: false, - children: {}, - }, [SIDEBAR_ITEMS_KEYS.PRIVACY_SANDBOX]: { title: () => 'Privacy Sandbox', panel: { @@ -272,6 +258,20 @@ const TABS: SidebarItems = { }, }, }, + [SIDEBAR_ITEMS_KEYS.DASHBOARD]: { + title: () => 'Dashboard', + panel: { + Element: Dashboard, + }, + icon: { + Element: DashboardIcon, + }, + selectedIcon: { + Element: DashboardIconWhite, + }, + dropdownOpen: false, + children: {}, + }, [SIDEBAR_ITEMS_KEYS.SETTINGS]: { title: () => I18n.getMessage('settings'), panel: { From 2d3ed61ec9a96867cd2cd94f7af5ece35c159c87 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Thu, 5 Sep 2024 20:20:36 +0530 Subject: [PATCH 20/39] Use side icons dynamically --- .../components/sidebar/collapsedSidebar.tsx | 46 +++++++++++++++---- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx index 18f0bf046..855825e31 100644 --- a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx +++ b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx @@ -23,7 +23,7 @@ import classNames from 'classnames'; * Internal dependencies. */ import { MenuOpenIcon } from '../../icons'; -import { useSidebar } from './useSidebar'; +import { useSidebar, type SidebarItemValue } from './useSidebar'; const CollapsedSidebar = () => { const { @@ -31,11 +31,13 @@ const CollapsedSidebar = () => { updateSelectedItemKey, currentSelectedItemKey, toggleSidebarCollapse, + sidebarItems, } = useSidebar(({ state, actions }) => ({ collapsedSidebarItems: state.collapsedSidebarItems, updateSelectedItemKey: actions.updateSelectedItemKey, currentSelectedItemKey: state.currentItemKey, toggleSidebarCollapse: actions.toggleSidebarCollapse, + sidebarItems: state.sidebarItems, })); const handleFooterElementClick = useCallback( @@ -54,13 +56,39 @@ const CollapsedSidebar = () => { 'flex flex-col justify-between items-center p-2 w-full h-full' )} > - +
+ + {Object.keys(sidebarItems).map((itemKey) => { + if (['settings'].includes(itemKey)) { + return null; + } + + const sidebarItem = sidebarItems[itemKey] as SidebarItemValue; + const Icon = sidebarItem.icon ? sidebarItem.icon.Element : null; + const props = sidebarItem?.icon?.props || {}; + const title = + typeof sidebarItem.title === 'function' + ? sidebarItem.title() + : sidebarItem.title; + + return ( + + ); + })} +
{Object.keys(collapsedSidebarItems?.footerElements || {}).map((key) => { const Icon = collapsedSidebarItems?.footerElements[key].icon.Element; @@ -85,7 +113,7 @@ const CollapsedSidebar = () => { )} onClick={(e) => handleFooterElementClick(e, key)} > - + ); })} From 7750ad2daea1097faf9941e22c710792fbf62ac9 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Thu, 5 Sep 2024 22:16:25 +0530 Subject: [PATCH 21/39] Style selected icons --- .../components/sidebar/collapsedSidebar.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx index 855825e31..657dc09a7 100644 --- a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx +++ b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx @@ -32,12 +32,14 @@ const CollapsedSidebar = () => { currentSelectedItemKey, toggleSidebarCollapse, sidebarItems, + selectedItemKey, } = useSidebar(({ state, actions }) => ({ collapsedSidebarItems: state.collapsedSidebarItems, updateSelectedItemKey: actions.updateSelectedItemKey, currentSelectedItemKey: state.currentItemKey, toggleSidebarCollapse: actions.toggleSidebarCollapse, sidebarItems: state.sidebarItems, + selectedItemKey: state.selectedItemKey, })); const handleFooterElementClick = useCallback( @@ -76,12 +78,17 @@ const CollapsedSidebar = () => { typeof sidebarItem.title === 'function' ? sidebarItem.title() : sidebarItem.title; + const isCurrent = itemKey === selectedItemKey; + const buttonClassNames = classNames('cursor-pointer', { + 'opacity-70': isCurrent, + 'hover:opacity-60': !isCurrent, + }); return ( ); })} @@ -113,12 +113,17 @@ const CollapsedSidebar = () => { key={key} title={typeof title === 'function' ? title() : title} className={classNames('rounded-full p-1', { - 'opacity-70 cursor-auto': isCurrent, + 'opacity-70 cursor-auto dark:opacity-40': isCurrent, 'hover:opacity-70': !isCurrent, })} onClick={(e) => handleFooterElementClick(e, key)} > - + ); })} From 40700699702d77d041bdb65fdfb57c08adae5af9 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Fri, 6 Sep 2024 16:19:18 +0530 Subject: [PATCH 28/39] Fix overflow auto issue --- .../src/view/devtools/components/dashboard/index.tsx | 2 +- .../src/view/devtools/components/privacySandbox/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index ca57823d3..2783bd295 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -65,7 +65,7 @@ const Dashboard = () => { return (
diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index e3b4006a1..76d84e06d 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -38,7 +38,10 @@ const PrivacySandbox = () => { }, []); return ( -
+
Date: Fri, 6 Sep 2024 16:50:21 +0530 Subject: [PATCH 29/39] Remove clip path from privacy sandbox logo --- packages/design-system/src/icons/privacy-sandbox-colored.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/icons/privacy-sandbox-colored.svg b/packages/design-system/src/icons/privacy-sandbox-colored.svg index 52a3c540d..c80948657 100644 --- a/packages/design-system/src/icons/privacy-sandbox-colored.svg +++ b/packages/design-system/src/icons/privacy-sandbox-colored.svg @@ -1,6 +1,6 @@ - + @@ -13,7 +13,7 @@ - + From e55e4f4769fe4151dc5403f4d9e00d765e1b2a49 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Fri, 6 Sep 2024 19:02:02 +0530 Subject: [PATCH 30/39] Reuse landing page for dashboard --- .../src/components/landingPage/index.tsx | 4 +- .../components/dashboard/contentPanel.tsx | 133 ++++++++++++++++++ .../devtools/components/dashboard/index.tsx | 120 ++-------------- .../privacySandbox/contentPanel.tsx | 75 ++++++++++ .../components/privacySandbox/index.tsx | 74 +--------- 5 files changed, 226 insertions(+), 180 deletions(-) create mode 100644 packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx create mode 100644 packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx index aac96d9c7..985317578 100644 --- a/packages/design-system/src/components/landingPage/index.tsx +++ b/packages/design-system/src/components/landingPage/index.tsx @@ -37,6 +37,7 @@ interface LandingPageProps { contentPanel?: ReactNode; iframeBorderClass?: string; extraClasses?: string; + showQuickLinks?: boolean; } const LandingPage = ({ @@ -47,6 +48,7 @@ const LandingPage = ({ children, extraClasses, contentPanel, + showQuickLinks = true, }: LandingPageProps) => { const [loading, setLoading] = useState(iframeSrc ? true : false); const [open, setOpen] = useState(true); @@ -114,7 +116,7 @@ const LandingPage = ({
)}
- + {showQuickLinks && }
); diff --git a/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx new file mode 100644 index 000000000..a0a07895b --- /dev/null +++ b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx @@ -0,0 +1,133 @@ +/* + * Copyright 2024 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, { useCallback } from 'react'; +import { SIDEBAR_ITEMS_KEYS, useSidebar } from '@google-psat/design-system'; +import classNames from 'classnames'; + +/** + * Internal dependencies. + */ +import { PINNED_ITEMS, FEATURE_LIST } from './constants'; +import { useCookie } from '../../stateProviders'; + +const ContentPanel = () => { + const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); + const { tabFrames } = useCookie(({ state }) => ({ + tabFrames: state.tabFrames, + })); + + const handleFeatureBoxClick = useCallback( + (event: React.MouseEvent, sidebarKey: string) => { + const target = event.target as HTMLElement; + + if (target?.tagName !== 'BUTTON') { + navigateTo(sidebarKey); + } + }, + [navigateTo] + ); + + const handleButtonClick = useCallback( + (event: React.MouseEvent, sidebarKey: string) => { + const target = event.target as HTMLElement; + const firstFrame = + Object.keys(tabFrames || {})?.[0] || SIDEBAR_ITEMS_KEYS.COOKIES; + + if (target?.tagName === 'BUTTON') { + navigateTo( + sidebarKey === 'FIRST_COOKIE_TABLE' ? firstFrame : sidebarKey + ); + } + }, + [navigateTo, tabFrames] + ); + + return ( +
+
+
+

Pinned

+
+ {PINNED_ITEMS.map((item) => { + const Icon = item.icon; + + return ( +
navigateTo(item.sidebarKey)} + > + + {item.name} +
+ ); + })} +
+
+
+

Features

+
+ {FEATURE_LIST.map((item) => { + const Icon = item.icon; + const headingClasses = classNames( + 'text-sm', + item?.colorClasses?.heading ? item?.colorClasses?.heading : '' + ); + + return ( +
+ handleFeatureBoxClick(event, item.sidebarKey) + } + > +
+ +

{item.name}

+
+

{item.description}

+
+ {item.buttons && + item.buttons.map((button) => ( + + ))} +
+
+ ); + })} +
+
+
+
+ ); +}; + +export default ContentPanel; diff --git a/packages/extension/src/view/devtools/components/dashboard/index.tsx b/packages/extension/src/view/devtools/components/dashboard/index.tsx index 2783bd295..17ac6819c 100644 --- a/packages/extension/src/view/devtools/components/dashboard/index.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/index.tsx @@ -16,125 +16,21 @@ /** * External dependencies. */ -import React, { useCallback } from 'react'; -import { - DashboardIcon, - SIDEBAR_ITEMS_KEYS, - useSidebar, -} from '@google-psat/design-system'; -import classNames from 'classnames'; +import React from 'react'; +import { LandingPage } from '@google-psat/design-system'; /** * Internal dependencies. */ -import { PINNED_ITEMS, FEATURE_LIST } from './constants'; -import { useCookie } from '../../stateProviders'; +import ContentPanel from './contentPanel'; const Dashboard = () => { - const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); - const { tabFrames } = useCookie(({ state }) => ({ - tabFrames: state.tabFrames, - })); - - const handleFeatureBoxClick = useCallback( - (event: React.MouseEvent, sidebarKey: string) => { - const target = event.target as HTMLElement; - - if (target?.tagName !== 'BUTTON') { - navigateTo(sidebarKey); - } - }, - [navigateTo] - ); - - const handleButtonClick = useCallback( - (event: React.MouseEvent, sidebarKey: string) => { - const target = event.target as HTMLElement; - const firstFrame = - Object.keys(tabFrames || {})?.[0] || SIDEBAR_ITEMS_KEYS.COOKIES; - - if (target?.tagName === 'BUTTON') { - navigateTo( - sidebarKey === 'FIRST_COOKIE_TABLE' ? firstFrame : sidebarKey - ); - } - }, - [navigateTo, tabFrames] - ); - return ( -
-
-
- -

Dashboard

-
-
-

Pinned

-
- {PINNED_ITEMS.map((item) => { - const Icon = item.icon; - - return ( -
navigateTo(item.sidebarKey)} - > - - {item.name} -
- ); - })} -
-
-
-

Features

-
- {FEATURE_LIST.map((item) => { - const Icon = item.icon; - const headingClasses = classNames( - 'text-sm', - item?.colorClasses?.heading ? item?.colorClasses?.heading : '' - ); - - return ( -
- handleFeatureBoxClick(event, item.sidebarKey) - } - > -
- -

{item.name}

-
-

{item.description}

-
- {item.buttons && - item.buttons.map((button) => ( - - ))} -
-
- ); - })} -
-
-
-
+ } + showQuickLinks={false} + /> ); }; diff --git a/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx b/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx new file mode 100644 index 000000000..5d8ba8475 --- /dev/null +++ b/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx @@ -0,0 +1,75 @@ +/* + * Copyright 2024 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 { + PrivacySandboxColoredIcon, + ExternalLinkBlack, + useSidebar, + SIDEBAR_ITEMS_KEYS, +} from '@google-psat/design-system'; +import { addUTMParams } from '@google-psat/common'; + +const ContentPanel = () => { + const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); + + return ( +
+
+
+ +

+ Protecting your privacy online +

+

+ The Privacy Sandbox initiative aims to create technologies that both + protect people's privacy online and give companies and + developers tools to build thriving digital businesses. The Privacy + Sandbox reduces cross-site and cross-app tracking while helping to + keep online content and services free for all. +

+
+ + Learn About Privacy Sandbox + + + +
+
+
+
+ ); +}; + +export default ContentPanel; diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx index 76d84e06d..dbbe4f405 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx @@ -17,18 +17,14 @@ * External dependencies. */ import React, { useEffect } from 'react'; -import { - QuickLinksList, - PrivacySandboxColoredIcon, - ExternalLinkBlack, - useSidebar, - SIDEBAR_ITEMS_KEYS, -} from '@google-psat/design-system'; -import { addUTMParams } from '@google-psat/common'; +import { LandingPage } from '@google-psat/design-system'; -const PrivacySandbox = () => { - const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); +/** + * Internal dependencies. + */ +import ContentPanel from './contentPanel'; +const PrivacySandbox = () => { useEffect(() => { (async () => { await chrome.storage.sync.set({ @@ -38,63 +34,7 @@ const PrivacySandbox = () => { }, []); return ( -
-
-
- -

Privacy Sandbox

-
-
-
- -

- Protecting your privacy online -

-

- The Privacy Sandbox initiative aims to create technologies that - both protect people's privacy online and give companies and - developers tools to build thriving digital businesses. The Privacy - Sandbox reduces cross-site and cross-app tracking while helping to - keep online content and services free for all. -

-
- - Learn About Privacy Sandbox - - - -
-
-
-
-
- -
-
+ } /> ); }; From f7a140172128a54932cb03cd582bbf01b9f7a382 Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Fri, 6 Sep 2024 19:07:22 +0530 Subject: [PATCH 31/39] Use color code for titles --- .../devtools/components/dashboard/constants.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/constants.ts b/packages/extension/src/view/devtools/components/dashboard/constants.ts index 5236ff263..b548ef896 100644 --- a/packages/extension/src/view/devtools/components/dashboard/constants.ts +++ b/packages/extension/src/view/devtools/components/dashboard/constants.ts @@ -23,15 +23,9 @@ import { AntiCovertTrackingIcon, SiteBoundariesIcon, SIDEBAR_ITEMS_KEYS, + PrivateAdvertisingIcon, } from '@google-psat/design-system'; -/** - * Internal dependencies. - */ -// @ts-ignore - To ignore auto fixing path with package name. -// eslint-disable-next-line import/no-relative-packages -import PrivateAggregationIcon from '../../../../../../../assets/icons/private-aggregation.svg'; - export const PINNED_ITEMS = [ { name: 'Protected Audience', @@ -70,12 +64,12 @@ export const FEATURE_LIST = [ }, { name: 'Private Advertising', - icon: PrivateAggregationIcon, + icon: PrivateAdvertisingIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.PRIVATE_ADVERTISING, description: 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', colorClasses: { - heading: 'text-bright-navy-blue', + heading: 'text-blue-600', }, buttons: [ { @@ -103,7 +97,7 @@ export const FEATURE_LIST = [ description: 'The Privacy Sandbox initiative also includes efforts designed to limit covert tracking, including addressing specific covert tracking techniques such as fingerprinting and network-level tracking.', colorClasses: { - heading: 'text-third-party', + heading: 'text-yellow-500', }, buttons: [ { @@ -123,7 +117,7 @@ export const FEATURE_LIST = [ description: 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', colorClasses: { - heading: 'text-first-party', + heading: 'text-green-700', }, buttons: [ { From ff7b2e55c4977dbb5412d4f4e6bd365d50464220 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 9 Sep 2024 13:05:42 +0530 Subject: [PATCH 32/39] Update the condition --- .../src/components/sidebar/collapsedSidebar.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx index 0c7447249..3813151ea 100644 --- a/packages/design-system/src/components/sidebar/collapsedSidebar.tsx +++ b/packages/design-system/src/components/sidebar/collapsedSidebar.tsx @@ -67,7 +67,11 @@ const CollapsedSidebar = () => { {Object.keys(sidebarItems).map((itemKey) => { - if (['settings'].includes(itemKey)) { + if ( + Object.keys(collapsedSidebarItems?.footerElements || {}).includes( + itemKey + ) + ) { return null; } From 2b88ffa073a8ad9d0ec23377c4da066d3a512b5c Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 9 Sep 2024 16:05:54 +0530 Subject: [PATCH 33/39] Update styles, component organization and callbacks --- .../src/components/landingPage/index.tsx | 8 ++--- .../components/dashboard/contentPanel.tsx | 33 +++++-------------- .../src/view/devtools/components/layout.tsx | 20 +++++------ .../privacySandbox/contentPanel.tsx | 2 +- 4 files changed, 24 insertions(+), 39 deletions(-) diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx index 985317578..a294ae574 100644 --- a/packages/design-system/src/components/landingPage/index.tsx +++ b/packages/design-system/src/components/landingPage/index.tsx @@ -59,7 +59,7 @@ const LandingPage = ({
@@ -75,12 +75,12 @@ const LandingPage = ({
-
+
)} {psInfoKey && } - {contentPanel &&
{contentPanel}
} + {contentPanel && <>{contentPanel}}
{children && ( diff --git a/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx index a0a07895b..b0d340154 100644 --- a/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx @@ -32,28 +32,15 @@ const ContentPanel = () => { tabFrames: state.tabFrames, })); - const handleFeatureBoxClick = useCallback( - (event: React.MouseEvent, sidebarKey: string) => { - const target = event.target as HTMLElement; - - if (target?.tagName !== 'BUTTON') { - navigateTo(sidebarKey); - } - }, - [navigateTo] - ); - const handleButtonClick = useCallback( (event: React.MouseEvent, sidebarKey: string) => { - const target = event.target as HTMLElement; + event.preventDefault(); + event.stopPropagation(); + const firstFrame = Object.keys(tabFrames || {})?.[0] || SIDEBAR_ITEMS_KEYS.COOKIES; - if (target?.tagName === 'BUTTON') { - navigateTo( - sidebarKey === 'FIRST_COOKIE_TABLE' ? firstFrame : sidebarKey - ); - } + navigateTo(sidebarKey === 'FIRST_COOKIE_TABLE' ? firstFrame : sidebarKey); }, [navigateTo, tabFrames] ); @@ -61,9 +48,9 @@ const ContentPanel = () => { return (
-
+

Pinned

@@ -73,7 +60,7 @@ const ContentPanel = () => { return (
navigateTo(item.sidebarKey)} > @@ -96,10 +83,8 @@ const ContentPanel = () => { return (
- handleFeatureBoxClick(event, item.sidebarKey) - } + className="min-w-[345px] max-w-[400px] border border-chinese-silver px-3 py-4 rounded hover:cursor-pointer hover:bg-light-gray dark:hover:bg-charleston-green hover:shadow hover:scale-[1.03] transition-all duration-150 ease-in-out" + onClick={() => navigateTo(item.sidebarKey)} >
diff --git a/packages/extension/src/view/devtools/components/layout.tsx b/packages/extension/src/view/devtools/components/layout.tsx index 7244f5170..812f445a6 100644 --- a/packages/extension/src/view/devtools/components/layout.tsx +++ b/packages/extension/src/view/devtools/components/layout.tsx @@ -254,18 +254,18 @@ const Layout = ({ setSidebarData }: LayoutProps) => { >
{PanelElement && } + {settingsChanged && ( +
+ +
+ )}
- {settingsChanged && ( -
- -
- )}
); diff --git a/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx b/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx index 5d8ba8475..9b5bdb3ca 100644 --- a/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx +++ b/packages/extension/src/view/devtools/components/privacySandbox/contentPanel.tsx @@ -31,7 +31,7 @@ const ContentPanel = () => { return (
From b704be989748de0bbebea389ad29c0e45331ce4e Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 9 Sep 2024 16:26:14 +0530 Subject: [PATCH 34/39] Undo organization --- .../src/view/devtools/components/layout.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/extension/src/view/devtools/components/layout.tsx b/packages/extension/src/view/devtools/components/layout.tsx index 812f445a6..b56d8d089 100644 --- a/packages/extension/src/view/devtools/components/layout.tsx +++ b/packages/extension/src/view/devtools/components/layout.tsx @@ -254,18 +254,18 @@ const Layout = ({ setSidebarData }: LayoutProps) => { >
{PanelElement && } - {settingsChanged && ( -
- -
- )}
+ {settingsChanged && ( +
+ +
+ )}
); From 2d9c7076ef9ca5e2596bfaa5990bbecdd89cbe64 Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Mon, 9 Sep 2024 16:41:00 +0530 Subject: [PATCH 35/39] width changes --- .../design-system/src/components/landingPage/index.tsx | 8 ++++---- .../view/devtools/components/dashboard/contentPanel.tsx | 6 +++--- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx index a294ae574..4ddc365f2 100644 --- a/packages/design-system/src/components/landingPage/index.tsx +++ b/packages/design-system/src/components/landingPage/index.tsx @@ -54,12 +54,12 @@ const LandingPage = ({ const [open, setOpen] = useState(true); return ( -
+
{loading && }
@@ -75,12 +75,12 @@ const LandingPage = ({
-
+
{ return (
@@ -60,7 +60,7 @@ const ContentPanel = () => { return (
navigateTo(item.sidebarKey)} > @@ -83,7 +83,7 @@ const ContentPanel = () => { return (
navigateTo(item.sidebarKey)} >
From 1f20c6974204dd93eddd98889843f5647b22547e Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Tue, 10 Sep 2024 10:11:24 +0530 Subject: [PATCH 36/39] The dashboard should adapt to small screens and break the layout into two and one-column layout --- .../view/devtools/components/dashboard/contentPanel.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx index 0a46aee0d..d2fa96300 100644 --- a/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx +++ b/packages/extension/src/view/devtools/components/dashboard/contentPanel.tsx @@ -53,14 +53,14 @@ const ContentPanel = () => {

Pinned

-
+
{PINNED_ITEMS.map((item) => { const Icon = item.icon; return (
navigateTo(item.sidebarKey)} > @@ -72,7 +72,7 @@ const ContentPanel = () => {

Features

-
+
{FEATURE_LIST.map((item) => { const Icon = item.icon; const headingClasses = classNames( @@ -83,7 +83,7 @@ const ContentPanel = () => { return (
navigateTo(item.sidebarKey)} >
From 1d3610961bf8f2f0eb35e8dafdef0e2e2aa1f93f Mon Sep 17 00:00:00 2001 From: sayedtaqui Date: Tue, 10 Sep 2024 10:44:15 +0530 Subject: [PATCH 37/39] Refactor code to show table button if table is availale --- .../devtools/components/cookies/index.tsx | 10 ++--- .../components/dashboard/constants.ts | 6 +-- .../components/dashboard/contentPanel.tsx | 13 +++++- .../hooks/useCanShowAnalyzeTabButton.ts | 40 +++++++++++++++++++ 4 files changed, 56 insertions(+), 13 deletions(-) create mode 100644 packages/extension/src/view/devtools/hooks/useCanShowAnalyzeTabButton.ts diff --git a/packages/extension/src/view/devtools/components/cookies/index.tsx b/packages/extension/src/view/devtools/components/cookies/index.tsx index f8acb3372..dbcfb002b 100644 --- a/packages/extension/src/view/devtools/components/cookies/index.tsx +++ b/packages/extension/src/view/devtools/components/cookies/index.tsx @@ -29,6 +29,7 @@ import { I18n } from '@google-psat/i18n'; * Internal dependencies. */ import { useCookie, useSettings } from '../../stateProviders'; +import useCanShowAnalyzeTabButton from '../../hooks/useCanShowAnalyzeTabButton'; import CookiesListing from './cookiesListing'; import AssembledCookiesLanding from './cookieLanding'; @@ -50,6 +51,7 @@ const Cookies = ({ setFilteredCookies }: CookiesProps) => { tabToRead: state.tabToRead, changeListeningToThisTab: actions.changeListeningToThisTab, })); + const canShowAnalyzeTabButton = useCanShowAnalyzeTabButton(); const { allowedNumberOfTabs } = useSettings(({ state }) => ({ allowedNumberOfTabs: state.allowedNumberOfTabs, @@ -70,13 +72,7 @@ const Cookies = ({ setFilteredCookies }: CookiesProps) => { ); } - if ( - (tabToRead && - isCurrentTabBeingListenedTo && - allowedNumberOfTabs && - allowedNumberOfTabs === 'single') || - (allowedNumberOfTabs && allowedNumberOfTabs === 'unlimited') - ) { + if (canShowAnalyzeTabButton) { return (
{ const navigateTo = useSidebar(({ actions }) => actions.updateSelectedItemKey); const { tabFrames } = useCookie(({ state }) => ({ tabFrames: state.tabFrames, })); + const canShowAnalyzeTabButton = useCanShowAnalyzeTabButton(); const handleButtonClick = useCallback( (event: React.MouseEvent, sidebarKey: string) => { @@ -45,6 +47,15 @@ const ContentPanel = () => { [navigateTo, tabFrames] ); + useEffect(() => { + if (canShowAnalyzeTabButton && FEATURE_LIST[0].buttons.length === 1) { + FEATURE_LIST[0].buttons.push({ + name: 'Cookies Table', + sidebarKey: 'FIRST_COOKIE_TABLE', + }); + } + }, [canShowAnalyzeTabButton]); + return (
{ + const { isCurrentTabBeingListenedTo, tabToRead } = useCookie(({ state }) => ({ + isCurrentTabBeingListenedTo: state.isCurrentTabBeingListenedTo, + tabToRead: state.tabToRead, + })); + + const { allowedNumberOfTabs } = useSettings(({ state }) => ({ + allowedNumberOfTabs: state.allowedNumberOfTabs, + })); + + return ( + (tabToRead && + isCurrentTabBeingListenedTo && + allowedNumberOfTabs && + allowedNumberOfTabs === 'single') || + (allowedNumberOfTabs && allowedNumberOfTabs === 'unlimited') + ); +}; + +export default useCanShowAnalyzeTabButton; From 179ceb6ca67f96600557f18ff8fbe2452585770c Mon Sep 17 00:00:00 2001 From: Mayank Rana Date: Tue, 10 Sep 2024 10:44:41 +0530 Subject: [PATCH 38/39] Use 100 percent on landing page --- packages/design-system/src/components/landingPage/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx index 4ddc365f2..d79a4e4cf 100644 --- a/packages/design-system/src/components/landingPage/index.tsx +++ b/packages/design-system/src/components/landingPage/index.tsx @@ -54,7 +54,7 @@ const LandingPage = ({ const [open, setOpen] = useState(true); return ( -
+
{loading && }
Date: Tue, 10 Sep 2024 11:20:45 +0530 Subject: [PATCH 39/39] Use I18n for strings --- .../components/dashboard/constants.ts | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/extension/src/view/devtools/components/dashboard/constants.ts b/packages/extension/src/view/devtools/components/dashboard/constants.ts index 531f6f633..ef73f3e33 100644 --- a/packages/extension/src/view/devtools/components/dashboard/constants.ts +++ b/packages/extension/src/view/devtools/components/dashboard/constants.ts @@ -25,20 +25,21 @@ import { SIDEBAR_ITEMS_KEYS, PrivateAdvertisingIcon, } from '@google-psat/design-system'; +import { I18n } from '@google-psat/i18n'; export const PINNED_ITEMS = [ { - name: 'Protected Audience', + name: I18n.getMessage('protectedAudience'), icon: GroupsIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.PROTECTED_AUDIENCE, }, { - name: 'Cookies', + name: I18n.getMessage('cookies'), icon: CookieIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, }, { - name: 'Related Website Sets', + name: I18n.getMessage('rws'), icon: RelatedWebsiteSetsIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.RELATED_WEBSITE_SETS, }, @@ -46,7 +47,7 @@ export const PINNED_ITEMS = [ export const FEATURE_LIST = [ { - name: 'Cookies', + name: I18n.getMessage('cookies'), icon: CookieIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.COOKIES, description: @@ -59,69 +60,66 @@ export const FEATURE_LIST = [ ], }, { - name: 'Private Advertising', + name: I18n.getMessage('privateAdvertising'), icon: PrivateAdvertisingIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.PRIVATE_ADVERTISING, - description: - 'Enable your critical advertising use cases without relying on cross-site tracking via APIs providing accurate relevance information and and measurement data for digital ads.', + description: I18n.getMessage('privateAdvertisingDescription'), colorClasses: { heading: 'text-blue-600', }, buttons: [ { - name: 'Topics', + name: I18n.getMessage('topics'), sidebarKey: SIDEBAR_ITEMS_KEYS.TOPICS, }, { - name: 'Attribution', + name: I18n.getMessage('attribution'), sidebarKey: SIDEBAR_ITEMS_KEYS.ATTRIBUTION_REPORTING, }, { - name: 'Protected Audience', + name: I18n.getMessage('protectedAudience'), sidebarKey: SIDEBAR_ITEMS_KEYS.PROTECTED_AUDIENCE, }, { - name: 'Private Aggregation', + name: I18n.getMessage('privateAggregation'), sidebarKey: SIDEBAR_ITEMS_KEYS.PRIVATE_AGGREGATION, }, ], }, { - name: 'Tracking Protection', + name: I18n.getMessage('trackingProtection'), icon: AntiCovertTrackingIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.ANTI_COVERT_TRACKING, - description: - 'The Privacy Sandbox initiative also includes efforts designed to limit covert tracking, including addressing specific covert tracking techniques such as fingerprinting and network-level tracking.', + description: I18n.getMessage('antiCovertTrackingDescription'), colorClasses: { heading: 'text-yellow-500', }, buttons: [ { - name: 'Bounce Tracking', + name: I18n.getMessage('bounceTracking'), sidebarKey: SIDEBAR_ITEMS_KEYS.BOUNCE_TRACKING, }, { - name: 'Fingerprinting', + name: I18n.getMessage('fingerprinting'), sidebarKey: SIDEBAR_ITEMS_KEYS.FINGERPRINTING, }, ], }, { - name: 'Site Boundaries', + name: I18n.getMessage('siteBoundaries'), icon: SiteBoundariesIcon, sidebarKey: SIDEBAR_ITEMS_KEYS.SITE_BOUNDARIES, - description: - 'Privacy-preserving APIs ensuring that information collected on one site is not automatically shared with another site, unless the user explicitly consents.', + description: I18n.getMessage('siteBoundariesDescription'), colorClasses: { heading: 'text-green-700', }, buttons: [ { - name: 'CHIPS', + name: I18n.getMessage('chips'), sidebarKey: SIDEBAR_ITEMS_KEYS.CHIPS, }, { - name: 'Related Website Sets', + name: I18n.getMessage('rws'), sidebarKey: SIDEBAR_ITEMS_KEYS.RELATED_WEBSITE_SETS, }, ],