fix: Next Steps bubble spacing in Windows + visibility bug (#1719)

* fix: Next Steps bubble spacing in Windows + visibility bug

* feat: Add dismissing next steps cards to mock-transport

* fix: removal fn

* fix: dismiss fn to remove from array

Author: vkraucunas

special-pages/pages/new-tab/app/mock-transport.js

@@ -92,6 +92,7 @@ export function mockTransport() {
     /** @type {Map<SubscriptionNames, any[]>} */
     const rmfSubscriptions = new Map();
     const freemiumPIRBannerSubscriptions = new Map();
+    const nextStepsSubscriptions = new Map();
 
     function clearRmf() {
         const listeners = rmfSubscriptions.get('rmf_onDataUpdate') || [];
@@ -102,6 +103,16 @@ export function mockTransport() {
         }
     }
 
+    function clearNextStepsCard(cardId, data) {
+        const listeners = nextStepsSubscriptions.get('nextSteps_onDataUpdate') || [];
+        const newContent = data.content.filter((card) => card.id !== cardId);
+        const message = { content: newContent };
+        for (const listener of listeners) {
+            listener(message);
+            write('nextSteps_data', message);
+        }
+    }
+
     const transports = {
         customizer: customizerMockTransport(),
         activity: activityMockTransport(),
@@ -137,6 +148,7 @@ export function mockTransport() {
                 }
                 case 'rmf_dismiss': {
                     console.log('ignoring rmf_dismiss', msg.params);
+                    clearRmf();
                     return;
                 }
                 case 'freemiumPIRBanner_action': {
@@ -177,6 +189,15 @@ export function mockTransport() {
                     console.log('mock: ignoring favorites_add');
                     return;
                 }
+                case 'nextSteps_dismiss': {
+                    if (msg.params.id) {
+                        const data = read('nextSteps_data');
+                        clearNextStepsCard(msg.params.id, data);
+                        return;
+                    }
+                    console.log('ignoring nextSteps_dismiss');
+                    return;
+                }
                 default: {
                     console.warn('unhandled notification', msg);
                 }
@@ -231,6 +252,19 @@ export function mockTransport() {
                     }
                     return () => {};
                 }
+                case 'nextSteps_onDataUpdate': {
+                    const prev = nextStepsSubscriptions.get('nextSteps_onDataUpdate') || [];
+                    const next = [...prev];
+                    next.push(cb);
+                    nextStepsSubscriptions.set('nextSteps_onDataUpdate', next);
+                    const params = url.searchParams.get('next-steps');
+                    if (params && params in nextSteps) {
+                        const data = read('nextSteps_data');
+                        cb(data);
+                    }
+
+                    return () => {};
+                }
                 case 'rmf_onDataUpdate': {
                     // store the callback for later (eg: dismiss)
                     const prev = rmfSubscriptions.get('rmf_onDataUpdate') || [];
@@ -387,6 +421,7 @@ export function mockTransport() {
                                     return { id: /** @type {any} */ (id) };
                                 }),
                         };
+                        write('nextSteps_data', data);
                     }
                     return Promise.resolve(data);
                 }

special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css

@@ -186,6 +186,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        padding: 0 1px;
+        margin: 0 -1px;
 
         h2 {
             color: var(--ntp-text-on-primary);

special-pages/pages/new-tab/app/next-steps/components/NextStepsGroup.js

@@ -31,7 +31,7 @@ export function NextStepsCardGroup({ types, expansion, toggle, action, dismiss }
 
     return (
         <div class={styles.cardGroup} id={WIDGET_ID}>
-            <NextStepsBubbleHeader />
+            {types.length > 0 && <NextStepsBubbleHeader />}
             <div class={styles.cardGrid}>
                 {alwaysShown.map((type) => (
                     <NextStepsCard key={type} type={type} dismiss={dismiss} action={action} />