fix(downloads): make package disclosure motion visible
Keep the explicitly requested 300 ms package transition active when Chromium reports reduced motion, and separate the prepared and active disclosure states by a painted frame. Add focused regression coverage and an opt-in motion mode for the visual harness while keeping normal captures deterministic.
This commit is contained in:
@@ -5,6 +5,7 @@ import {
|
||||
DOWNLOAD_DISCLOSURE_DURATION_MS,
|
||||
mergeDownloadDisclosureRows,
|
||||
prepareDownloadDisclosureTransition,
|
||||
scheduleDownloadDisclosureActivation,
|
||||
type DownloadDisclosureRow
|
||||
} from "./download-disclosure-transition";
|
||||
import type { DownloadsViewActions, DownloadsViewModel } from "./DownloadsView";
|
||||
@@ -114,7 +115,7 @@ export function VirtualizedDownloadsBody({ actions, model, state }: { actions: D
|
||||
transitionRowsRef.current = prepared.rows;
|
||||
setTransitionRows(prepared.rows);
|
||||
let settleTimer = 0;
|
||||
const animationFrame = window.requestAnimationFrame(() => {
|
||||
const cancelActivation = scheduleDownloadDisclosureActivation(window.requestAnimationFrame.bind(window), window.cancelAnimationFrame.bind(window), () => {
|
||||
const active = activateDownloadDisclosureTransition(transitionRowsRef.current ?? prepared.rows);
|
||||
transitionRowsRef.current = active;
|
||||
setTransitionRows(active);
|
||||
@@ -125,7 +126,7 @@ export function VirtualizedDownloadsBody({ actions, model, state }: { actions: D
|
||||
}, DOWNLOAD_DISCLOSURE_DURATION_MS);
|
||||
});
|
||||
return () => {
|
||||
window.cancelAnimationFrame(animationFrame);
|
||||
cancelActivation();
|
||||
if (settleTimer) window.clearTimeout(settleTimer);
|
||||
};
|
||||
}, [model.disclosureRevision, model.displayMode]);
|
||||
|
||||
@@ -4,6 +4,22 @@ import { DOWNLOAD_FILE_ROW_HEIGHT } from "./download-virtualizer";
|
||||
export const DOWNLOAD_DISCLOSURE_DURATION_MS = 300;
|
||||
export const DOWNLOAD_DISCLOSURE_MAX_ANIMATED_ITEMS = 64;
|
||||
|
||||
export function scheduleDownloadDisclosureActivation(
|
||||
requestFrame: (callback: FrameRequestCallback) => number,
|
||||
cancelFrame: (frame: number) => void,
|
||||
activate: () => void
|
||||
): () => void {
|
||||
let paintFrame = 0;
|
||||
let activationFrame = 0;
|
||||
paintFrame = requestFrame(() => {
|
||||
activationFrame = requestFrame(activate);
|
||||
});
|
||||
return () => {
|
||||
cancelFrame(paintFrame);
|
||||
if (activationFrame) cancelFrame(activationFrame);
|
||||
};
|
||||
}
|
||||
|
||||
export type DownloadDisclosurePhase = "stable" | "entering" | "leaving";
|
||||
|
||||
export type DownloadDisclosureRow = DownloadLogicalRow & {
|
||||
|
||||
@@ -583,6 +583,14 @@
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.downloads-virtual-spacer {
|
||||
transition-duration: 300ms !important;
|
||||
}
|
||||
|
||||
.downloads-virtual-row {
|
||||
transition-duration: 300ms, 300ms, 300ms !important;
|
||||
}
|
||||
|
||||
.downloads-table.is-column-drag-active [data-download-column],
|
||||
.downloads-table.is-column-drag-settling [data-download-column] {
|
||||
transition-duration: 220ms !important;
|
||||
|
||||
Reference in New Issue
Block a user