GoogleChromeLabs · mohdsayed · Feb 7, 2024 · Feb 7, 2024 · Feb 7, 2024 · Feb 7, 2024
diff --git a/packages/design-system/src/components/circlePieChart/index.tsx b/packages/design-system/src/components/circlePieChart/index.tsx
@@ -80,7 +80,7 @@ const CirclePieChart = ({
               className={infoIconClassName}
               title="Cookies must be analyzed on a new, clean Chrome profile for an accurate report"
             >
-              <InfoIcon />
+              <InfoIcon className="fill-granite-gray" />
             </p>
           )}
         </div>

diff --git a/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx b/packages/design-system/src/components/cookiesLanding/cookiesMatrix/index.tsx
@@ -120,7 +120,7 @@ const CookiesMatrix = ({
               <span>{title}</span>
               {showInfoIcon && (
                 <span title={infoIconTitle}>
-                  <InfoIcon />
+                  <InfoIcon className="fill-granite-gray" />
                 </span>
               )}
               {count !== null && <span>: {Number(count) || 0}</span>}

diff --git a/packages/design-system/src/components/table/components/filtersSidebar/listItem.tsx b/packages/design-system/src/components/table/components/filtersSidebar/listItem.tsx
@@ -99,7 +99,7 @@ const ListItem = ({
         </button>
         {filter.description && (
           <p title={filter.description}>
-            <InfoIcon />
+            <InfoIcon className="fill-granite-gray" />
           </p>
         )}
       </div>

diff --git a/packages/design-system/src/icons/info.svg b/packages/design-system/src/icons/info.svg
diff --git a/...cySandbox/privacySandboxContent/index.tsx → ...esting/faciliatedTestingContent/index.tsx b/...cySandbox/privacySandboxContent/index.tsx → ...esting/faciliatedTestingContent/index.tsx
@@ -25,7 +25,7 @@ import InfoCards from './infoCards';
  * Internal dependencies.
  */
 
-const PrivacySandboxContent = () => {
+const FacilitatedTestingContent = () => {
   return (
     <div className="m-auto md:w-[70%] min-w-[30rem]">
       <div className="w-full h-full border border-hex-gray dark:border-quartz text-raisin-black dark:text-bright-gray rounded-lg px-8 py-10 flex flex-col gap-8">
@@ -38,4 +38,4 @@ const PrivacySandboxContent = () => {
   );
 };
 
-export default PrivacySandboxContent;
+export default FacilitatedTestingContent;
diff --git a/...ndbox/privacySandboxContent/infoCards.tsx → ...ng/faciliatedTestingContent/infoCards.tsx b/...ndbox/privacySandboxContent/infoCards.tsx → ...ng/faciliatedTestingContent/infoCards.tsx
@@ -27,22 +27,22 @@ const INFO_CARDS_DATA = [
   {
     heading: 'Membership in Experiment Group',
     content:
-      '<p>To prepare for third-party cookie deprecation, we will be providing Chrome-facilitated testing modes that allow sites to preview how site behavior and functionality work without third-party cookies.</p> <p>Check <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/setup/web/chrome-facilitated-testing" target="_blank">this guide</a> to learn more.</p>',
+      'To prepare for third-party cookie deprecation, we will be providing Chrome-facilitated testing modes that allow sites to preview how site behavior and functionality work without third-party cookies. Check <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/setup/web/chrome-facilitated-testing" target="_blank">this guide</a> to learn more.',
   },
   {
-    heading: 'Request Additional Migration Time',
+    heading: 'Reporting Breakages',
     content:
-      'For an easier transition through the deprecation process, Chrome is providing a third-party <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.chrome.com/docs/web-platform/origin-trials/" target="_blank">deprecation trial</a> which allows embedded sites and services to request additional time to migrate away from third-party cookie dependencies for non-advertising use cases. To learn more please check <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/3pcd/temporary-exceptions/first-party-deprecation-trial?hl=en" target="_blank">this documentation.</a>',
+      'If your site or a service you depend on is breaking with third-party cookies disabled, you should file an issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://b.corp.google.com/issues/new?component=1306484&template=1777152" target="_blank">here</a>. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/issues/new/choose" target="_blank">here</a>  using the third-party cookie deprecation.',
   },
   {
-    heading: 'Attestation Enrollment',
+    heading: 'Request Additional Migration Time',
     content:
-      'To access the Privacy Sandbox relevance and measurement APIs on <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.chrome.com/docs/privacy-sandbox/" target="_blank">Chrome</a> and <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.android.com/design-for-safety/privacy-sandbox" target="_blank">Android</a>, <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.chrome.com/blog/announce-enrollment-privacy-sandbox/" target="_blank">developers need to enroll</a> with the privacy sandbox as a mechanism to verify the entities that call these APIs, and to gather the developer-specific data needed for the proper configuration and use of the APIs. To learn more about this process and how to enroll please check <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://github.com/privacysandbox/attestation/blob/main/how-to-enroll.md" target="_blank">this documentation.</a>',
+      'For an easier transition through the deprecation process, Chrome is providing deprecation trials which allows top-level sites and embedded services to request additional time to migrate away from third-party cookie dependencies for non-advertising use cases. To learn more, please check this information regarding <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/3pcd/temporary-exceptions/first-party-deprecation-trial?hl=en" target="_blank">3P</a> and <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developers.google.com/privacy-sandbox/3pcd/temporary-exceptions/first-party-deprecation-trial#apply_for_the_first-party_deprecation_trial" target="_blank">1P</a> deprecation trials.',
   },
   {
-    heading: 'Reporting Breakages',
+    heading: 'Attestation Enrollment',
     content:
-      'If your site or a service you depend on is breaking with third-party cookies disabled, you should file an issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://b.corp.google.com/issues/new?component=1306484&template=1777152" target="_blank">here</a>. And if you have questions or feedback about Privacy Sandbox, you can raise a new issue <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://github.com/GoogleChromeLabs/privacy-sandbox-dev-support/issues/new/choose" target="_blank">here</a> using the third-party cookie deprecation.',
+      'To access the Privacy Sandbox relevance and measurement APIs on Chrome and Android, developers need to enroll with the privacy sandbox as a mechanism to verify the entities that call these APIs, and to gather the developer-specific data needed for the proper configuration and use of the APIs. To learn more about this process and how to enroll please check this <a class="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80 underline" href="https://developer.chrome.com/blog/announce-enrollment-privacy-sandbox/" target="_blank">documentation</a>.',
   },
 ];
 

diff --git a/...acySandbox/privacySandboxContent/link.tsx → ...Testing/faciliatedTestingContent/link.tsx b/...acySandbox/privacySandboxContent/link.tsx → ...Testing/faciliatedTestingContent/link.tsx
diff --git a/...ndboxContent/restrictionInfoContainer.tsx → ...stingContent/restrictionInfoContainer.tsx b/...ndboxContent/restrictionInfoContainer.tsx → ...stingContent/restrictionInfoContainer.tsx
diff --git a/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx b/packages/extension/src/view/devtools/components/facilitatedTesting/index.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies.
+ */
+import React from 'react';
+import { LandingPage } from '@ps-analysis-tool/design-system';
+import FacilitatedTestingContent from './faciliatedTestingContent';
+
+const FacilitatedTesting = () => (
+  <div data-testid="facilitated-testing-content" className="h-full w-full">
+    <LandingPage
+      title="Facilitated Testing"
+      contentPanel={<FacilitatedTestingContent />}
+    />
+  </div>
+);
+
+export default FacilitatedTesting;
diff --git a/packages/extension/src/view/devtools/components/index.ts b/packages/extension/src/view/devtools/components/index.ts
@@ -19,3 +19,4 @@ export * from './siteBoundaries';
 export { default as Cookies } from './cookies';
 export { default as PrivacySandbox } from './privacySandbox';
 export { default as Settings } from './settings';
+export { default as FacilitatedTesting } from './facilitatedTesting';
diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
@@ -18,13 +18,14 @@
  */
 import React from 'react';
 import { LandingPage } from '@ps-analysis-tool/design-system';
-import PrivacySandboxContent from './privacySandboxContent';
 
 const PrivacySandbox = () => (
   <div data-testid="privacy-sandbox-content" className="h-full w-full">
     <LandingPage
       title="Privacy Sandbox"
-      contentPanel={<PrivacySandboxContent />}
+      extraClasses="h-[78vh] w-full"
+      iframeSrc="https://privacysandbox.com"
+      iframeBorderClass="border border-hex-gray dark:border-quartz"
     />
   </div>
 );

diff --git a/...ools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/associatedSites/index.tsx b/...ools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/associatedSites/index.tsx
@@ -48,7 +48,7 @@ const AssociatedSites = ({
         <p className="text-base flex items-center gap-2 ">
           Associated Subset
           <span title="Browsers may enforce a limit on Associated Domains (e.g. Chrome's limit is 5)">
-            <InfoIcon />
+            <InfoIcon className="fill-granite-gray" />
           </span>
         </p>
         <AddButton onClick={addAssociatedSite} />

diff --git a/packages/extension/src/view/devtools/tabs.tsx b/packages/extension/src/view/devtools/tabs.tsx
@@ -41,6 +41,7 @@ import {
   PrivacySandboxIcon,
   PrivacySandboxIconWhite,
   type SidebarItems,
+  InfoIcon,
 } from '@ps-analysis-tool/design-system';
 
 /**
@@ -64,6 +65,7 @@ import {
   Fingerprinting,
   PrivacySandbox,
   Settings,
+  FacilitatedTesting,
 } from './components';
 
 const TABS: SidebarItems = {
@@ -149,6 +151,14 @@ const TABS: SidebarItems = {
       },
     },
   },
+  facilitatedTesting: {
+    title: 'Facilitated Testing',
+    panel: <FacilitatedTesting />,
+    icon: <InfoIcon className="fill-gray" />,
+    selectedIcon: <InfoIcon className="fill-white" />,
+    dropdownOpen: false,
+    children: {},
+  },
   settings: {
     title: 'Settings',
     panel: <Settings />,

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -201,6 +201,8 @@ module.exports = {
       'chinese-silver': '#CDCDCD',
       'charleston-green': '#292A2D',
       'outer-space': '#303942',
+      'granite-gray': '#5F6369',
+      gray: '#6E6E6E',
     },
     stroke: {
       'bright-gray': '#E8EAED',