ntp: adding support for view transitions

Author: shakyShane

special-pages/pages/new-tab/app/favorites/components/FavoritesCustomized.js

@@ -19,7 +19,18 @@ export function FavoritesConsumer() {
     if (state.status === 'ready') {
         telemetry.measureFromPageLoad('favorites-will-render', 'time to favorites');
         return (
-            <PragmaticDND items={state.data.favorites} itemsDidReOrder={favoritesDidReOrder}>
+            <PragmaticDND
+                items={state.data.favorites}
+                itemsDidReOrder={(params) => {
+                    if (state.config.animation?.kind === 'view-transitions') {
+                        document.startViewTransition(() => {
+                            favoritesDidReOrder(params);
+                        });
+                    } else {
+                        favoritesDidReOrder(params);
+                    }
+                }}
+            >
                 <FavoritesMemo
                     favorites={state.data.favorites}
                     expansion={state.config.expansion}

special-pages/pages/new-tab/app/favorites/components/FavoritesProvider.js

@@ -12,11 +12,10 @@ import { reducer, useConfigSubscription, useDataSubscription, useInitialDataAndC
  * @typedef {import('../../../types/new-tab.ts').FavoritesOpenAction['target']} OpenTarget
  * @typedef {import('../../service.hooks.js').State<FavoritesData, FavoritesConfig>} State
  * @typedef {import('../../service.hooks.js').Events<FavoritesData, FavoritesConfig>} Events
- * @typedef {{id: string; url: string}} BaseFavoriteType
  */
 
 /**
- * @template {BaseFavoriteType} ItemType - allow any type that extends BaseFavoriteType
+ * @template ItemType
  * @typedef {(params: { list: ItemType[], id: string, fromIndex: number, targetIndex: number }) => void} ReorderFn
  */
 

special-pages/pages/new-tab/app/favorites/components/PragmaticDND.js

@@ -25,7 +25,7 @@ const InstanceIdContext = createContext(getInstanceId());
  * @param {object} props
  * @param {import("preact").ComponentChild} props.children
  * @param {T[]} props.items
- * @param {import('./FavoritesProvider.js').ReorderFn<{id: string; url: string}>} props.itemsDidReOrder
+ * @param {(params: {list: T[]; id: string; fromIndex: number; targetIndex: number}) => void} props.itemsDidReOrder
  */
 export function PragmaticDND({ children, items, itemsDidReOrder }) {
     /**
@@ -133,13 +133,6 @@ function useGridState(favorites, itemsDidReOrder, instanceId) {
                         axis: 'horizontal',
                     });
 
-                    // mark an element as dropped globally.
-                    // todo: not happy with this, but it's working for launch.
-                    document.documentElement.dataset.dropped = String(startId);
-                    setTimeout(() => {
-                        document.documentElement.dataset.dropped = '';
-                    }, 0);
-
                     itemsDidReOrder({
                         list: reorderedList,
                         id: startId,

special-pages/pages/new-tab/app/favorites/components/Tile.js

@@ -46,6 +46,7 @@ export function Tile_({ url, etldPlusOne, faviconSrc, faviconMax, index, title,
             data-index={index}
             data-dropped={String(dropped)}
             data-edge={'closestEdge' in state && state.closestEdge}
+            style={{ viewTransitionName: `tile-${id}` }}
             ref={ref}
         >
             <div class={cn(styles.icon, styles.draggable)}>

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

@@ -466,7 +466,7 @@ export function mockTransport() {
                     /** @type {FavoritesConfig} */
                     const defaultConfig = { expansion: 'collapsed', animation: { kind: 'none' } };
                     const fromStorage = read('favorites_config') || defaultConfig;
-                    if (url.searchParams.get('animation') === 'view-transitions') {
+                    if (url.searchParams.get('favorites.animation') === 'view-transitions') {
                         fromStorage.animation = { kind: 'view-transitions' };
                     }
                     return Promise.resolve(fromStorage);

special-pages/pages/new-tab/messages/types/animation.json

@@ -23,17 +23,6 @@
           "const": "view-transitions"
         }
       }
-    },
-    {
-      "title": "Auto",
-      "description": "Use the auto-animate library to provide default animation styles",
-      "type": "object",
-      "required": ["kind"],
-      "properties": {
-        "kind": {
-          "const": "auto-animate"
-        }
-      }
     }
   ]
 }

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

@@ -53,7 +53,7 @@ export type Expansion = "expanded" | "collapsed";
 /**
  * Generic Animation configuration
  */
-export type Animation = None | ViewTransitions | Auto;
+export type Animation = None | ViewTransitions;
 /**
  * The visibility state of the widget, as configured by the user
  */
@@ -307,12 +307,6 @@ export interface None {
 export interface ViewTransitions {
   kind: "view-transitions";
 }
-/**
- * Use the auto-animate library to provide default animation styles
- */
-export interface Auto {
-  kind: "auto-animate";
-}
 /**
  * Generated from @see "../messages/freemiumPIRBanner_action.notify.json"
  */