ntp: support configurable burn animation (#1789)

* ntp: support configurable burn animation

* configurable by URL

Author: shakyShane

special-pages/pages/new-tab/app/activity/components/Activity.js

@@ -261,8 +261,10 @@ export function ActivityConfigured({ children }) {
  *     <ActivityConsumer />
  * </ActivityProvider>
  * ```
+ * @param {object} props
+ * @param {boolean} props.showBurnAnimation
  */
-export function ActivityConsumer() {
+export function ActivityConsumer({ showBurnAnimation }) {
     const { state } = useContext(ActivityContext);
     const service = useContext(ActivityServiceContext);
     const platformName = usePlatformName();
@@ -279,7 +281,7 @@ export function ActivityConsumer() {
         }
         return (
             <SignalStateProvider>
-                <BurnProvider service={service}>
+                <BurnProvider service={service} showBurnAnimation={showBurnAnimation}>
                     <ActivityConfigured>
                         <ActivityBody canBurn={true} visibility={visibility} />
                     </ActivityConfigured>

special-pages/pages/new-tab/app/activity/components/ActivityItemAnimationWrapper.js

@@ -1,4 +1,4 @@
-import { useContext, useLayoutEffect, useRef } from 'preact/hooks';
+import { useContext, useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import { ActivityBurningSignalContext } from '../../burning/BurnProvider.js';
 import { useComputed } from '@preact/signals';
 import cn from 'classnames';
@@ -20,7 +20,7 @@ const BurnAnimationLazy = lazy(() => import('../../burning/BurnAnimationLottieWe
  */
 export function ActivityItemAnimationWrapper({ children, url }) {
     const ref = useRef(/** @type {HTMLDivElement|null} */ (null));
-    const { exiting, burning } = useContext(ActivityBurningSignalContext);
+    const { exiting, burning, showBurnAnimation, doneBurning } = useContext(ActivityBurningSignalContext);
     const isBurning = useComputed(() => burning.value.some((x) => x === url));
     const isExiting = useComputed(() => exiting.value.some((x) => x === url));
 
@@ -67,11 +67,17 @@ export function ActivityItemAnimationWrapper({ children, url }) {
     return (
         <div class={cn(styles.anim, isBurning.value && styles.burning)} ref={ref}>
             {!isExiting.value && children}
-            {!isExiting.value && isBurning.value && (
+            {!isExiting.value && isBurning.value && showBurnAnimation && (
                 <Suspense fallback={null}>
-                    <BurnAnimationLazy url={url} />
+                    <BurnAnimationLazy url={url} doneBurning={doneBurning} />
                 </Suspense>
             )}
+            {!isExiting.value && isBurning.value && !showBurnAnimation && <NullBurner url={url} doneBurning={doneBurning} />}
         </div>
     );
 }
+
+function NullBurner({ url, doneBurning }) {
+    useEffect(() => doneBurning(url), [url]);
+    return null;
+}

special-pages/pages/new-tab/app/burning/BurnAnimationLottieWeb.js

@@ -8,18 +8,19 @@ import { ActivityBurningSignalContext } from './BurnProvider.js';
  *
  * @param {Object} props The properties object.
  * @param {string} props.url The URL associated with the animation, used to identify or provide additional context in the dispatched events.
+ * @param {(url: string) => void} props.doneBurning
  */
-export function BurnAnimation({ url }) {
+export function BurnAnimation({ url, doneBurning }) {
     const ref = useRef(/** @type {Lottie} */ null);
     const json = useContext(ActivityBurningSignalContext);
     useEffect(() => {
         if (!ref.current) return;
         let finished = false;
         let timer = null;
 
-        const publish = (reason) => {
+        const publish = (_reason) => {
             if (finished) return;
-            window.dispatchEvent(new CustomEvent('done-burning', { detail: { url, reason } }));
+            doneBurning(url);
             finished = true;
             clearTimeout(timer);
         };
@@ -52,6 +53,6 @@ export function BurnAnimation({ url }) {
                 publish('unmount occurred');
             }
         };
-    }, [url, json]);
+    }, [url, json, doneBurning]);
     return <div ref={ref} data-lottie-player></div>;
 }

special-pages/pages/new-tab/app/burning/BurnProvider.js

@@ -1,5 +1,5 @@
 import { h, createContext } from 'preact';
-import { useContext, useEffect } from 'preact/hooks';
+import { useCallback, useContext } from 'preact/hooks';
 import { batch, signal, useSignal, useSignalEffect } from '@preact/signals';
 import { useEnv } from '../../../../shared/components/EnvironmentProvider.js';
 import { ActivityInteractionsContext } from './ActivityInteractionsContext.js';
@@ -13,15 +13,20 @@ export const ActivityBurningSignalContext = createContext({
     exiting: signal([]),
     /** @type {import("@preact/signals").Signal<{state: 'loading' | 'ready' | 'error', data: null | Record<string, any>}>} */
     animation: signal({ state: 'loading', data: null }),
+    /** @type {boolean} */
+    showBurnAnimation: true,
+    /** @type {(url: string) => void} */
+    doneBurning: (_url) => {},
 });
 
 /**
  * @param {object} props
  * @param {import("preact").ComponentChild} props.children
  * @param {{confirmBurn: (url: string) => Promise<{action: 'burn' | 'none'}>; disableBroadcast: () => void; enableBroadcast: () => void }} props.service
+ * @param {boolean} [props.showBurnAnimation] - defaults to true to match original implementation
  *
  */
-export function BurnProvider({ children, service }) {
+export function BurnProvider({ children, service, showBurnAnimation = true }) {
     const burning = useSignal(/** @type {string[]} */ ([]));
     const exiting = useSignal(/** @type {string[]} */ ([]));
     const animation = useSignal({ state: /** @type {'loading' | 'ready' | 'error'} */ ('loading'), data: null });
@@ -94,23 +99,21 @@ export function BurnProvider({ children, service }) {
         };
     });
 
-    useEffect(() => {
-        const handler = (e) => {
-            if (e.detail.url) {
+    /** @type {(url: string) => void} */
+    const doneBurning = useCallback(
+        (url) => {
+            if (url) {
                 batch(() => {
-                    burning.value = burning.value.filter((x) => x !== e.detail.url);
-                    exiting.value = exiting.value.concat(e.detail.url);
+                    burning.value = burning.value.filter((x) => x !== url);
+                    exiting.value = exiting.value.concat(url);
                 });
             }
-        };
-        window.addEventListener('done-burning', handler);
-        return () => {
-            window.removeEventListener('done-burning', handler);
-        };
-    }, [burning, exiting]);
+        },
+        [burning, exiting],
+    );
 
     return (
-        <ActivityBurningSignalContext.Provider value={{ burning, exiting, animation }}>
+        <ActivityBurningSignalContext.Provider value={{ burning, exiting, animation, showBurnAnimation, doneBurning }}>
             <ActivityInteractionsContext.Provider value={{ didClick }}>{children}</ActivityInteractionsContext.Provider>
         </ActivityBurningSignalContext.Provider>
     );

special-pages/pages/new-tab/app/protections/components/ProtectionsConsumer.js

@@ -50,7 +50,7 @@ function ProtectionsReadyState({ data, config }) {
         >
             {config.feed === 'activity' && (
                 <ActivityProvider>
-                    <ActivityConsumer />
+                    <ActivityConsumer showBurnAnimation={config.showBurnAnimation ?? true} />
                 </ActivityProvider>
             )}
             {config.feed === 'privacy-stats' && (

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

@@ -89,6 +89,10 @@ export function protectionsMockTransport() {
                         config.feed = 'activity';
                     }
 
+                    if (url.searchParams.get('protections.burn') === 'false') {
+                        config.showBurnAnimation = false;
+                    }
+
                     return Promise.resolve(config);
                 }
                 default: {

special-pages/pages/new-tab/app/protections/protections.md

@@ -40,7 +40,8 @@ title: Protections Report
 ```json
 {
    "expansion": "collapsed",
-   "feed": "privacy-stats"
+   "feed": "privacy-stats",
+   "showBurnAnimation": true
 }
 ```
 
@@ -63,6 +64,7 @@ title: Protections Report
 ```json
 {
    "expansion": "collapsed",
-   "feed": "privacy-stats"
+   "feed": "privacy-stats",
+   "showBurnAnimation": true
 }
 ```

special-pages/pages/new-tab/messages/types/protections-config.json

@@ -16,6 +16,10 @@
         "privacy-stats",
         "activity"
       ]
+    },
+    "showBurnAnimation": {
+      "description": "Boolean flag to explicitly enable or disable the burn animations",
+      "type": "boolean"
     }
   }
 }

special-pages/pages/new-tab/types/new-tab.ts

@@ -556,6 +556,10 @@ export interface ProtectionsSetConfigNotification {
 export interface ProtectionsConfig {
   expansion: Expansion;
   feed: FeedType;
+  /**
+   * Boolean flag to explicitly enable or disable the burn animations
+   */
+  showBurnAnimation?: boolean;
 }
 /**
  * Generated from @see "../messages/reportInitException.notify.json"