Show CPM Stats on new tab page #4 - Feature discovery dialog

SharedPackages/BrowserServicesKit/Sources/ContentScopeScripts/Resources/contentScopeIsolated.js

@@ -12314,7 +12314,7 @@ ul.messages {
       }
     });
   }
-  async function getExpandedPerformanceMetrics() {
+  async function getExpandedPerformanceMetrics(timeoutMs = 500) {
     try {
       if (document.readyState !== "complete") {
         return returnError("Document not ready");
@@ -12331,7 +12331,7 @@ ul.messages {
       const fcp = paint.find((p) => p.name === "first-contentful-paint");
       let largestContentfulPaint = null;
       if (PerformanceObserver.supportedEntryTypes.includes("largest-contentful-paint")) {
-        largestContentfulPaint = await waitForLCP();
+        largestContentfulPaint = await waitForLCP(timeoutMs);
       }
       const totalResourceSize = resources.reduce((sum, r) => sum + (r.transferSize || 0), 0);
       if (navigation) {
@@ -12552,7 +12552,8 @@ ul.messages {
       }
     }
     async triggerExpandedPerformanceMetrics() {
-      const expandedPerformanceMetrics = await getExpandedPerformanceMetrics();
+      const permissableDelayMs = this.getFeatureSetting("expandedTimeoutMs") ?? 5e3;
+      const expandedPerformanceMetrics = await getExpandedPerformanceMetrics(permissableDelayMs);
       this.messaging.notify("expandedPerformanceMetricsResult", expandedPerformanceMetrics);
     }
   };

SharedPackages/BrowserServicesKit/Sources/ContentScopeScripts/Resources/pages/new-tab/dist/index.css

@@ -1995,7 +1995,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   --background: rgba(255, 255, 255, 0.09);
 }
 .Protections_block {
-  margin-top: 32px;
+  margin-top: 16px;
 }
 .Protections_blockLegacy {
   margin-top: 24px;
@@ -2090,6 +2090,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   height: 16px;
   display: inline-block;
   vertical-align: middle;
+  margin-top: 2px;
 }
 .PrivacyStats_widgetExpander {
   position: relative;
@@ -2958,7 +2959,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   align-items: center;
   gap: 6px;
   padding: 8px 10px;
-  border-radius: 100px;
+  border-radius: 1000px;
   background-color: var(--color-white-at-3);
   border: 1px solid var(--color-white-at-12);
   height: 20px;
@@ -2982,8 +2983,8 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   white-space: nowrap;
 }
 [data-theme=light] .TickPill_tickPill {
-  background-color: var(--color-black-at-4);
-  border: 1px solid var(--color-black-at-12);
+  background-color: var(--color-black-at-1);
+  border: 1px solid var(--color-black-at-9);
 }
 [data-theme=light] .TickPill_text {
   color: var(--color-black-at-84);