[chrome] ux: animate tab tooltip when hovering between tabs

Author: velzie

packages/chrome/src/components/TabStrip/DragTab.tsx

@@ -4,10 +4,13 @@ import { setContextMenu } from "../Menu";
 import { iconClose, iconDuplicate, iconNew, iconRefresh } from "../../icons";
 import { browser, forceScreenshot } from "../../Browser";
 import { Icon } from "../Icon";
-import { activeTooltips, TabTooltip } from "./TabTooltip";
+import { activeTooltips, fastClose, TabTooltip } from "./TabTooltip";
 
 export function DragTab(
-	this: { tooltipActive: boolean },
+	this: {
+		tooltipActive: boolean;
+		tooltipAnimate: boolean;
+	},
 	props: {
 		active: boolean;
 		id: number;
@@ -95,6 +98,8 @@ export function DragTab(
 
 					if (activeTooltips > 0) {
 						// skip delay
+						fastClose();
+						this.tooltipAnimate = true;
 						this.tooltipActive = true;
 					} else {
 						hoverTimeout = window.setTimeout(() => {
@@ -112,7 +117,11 @@ export function DragTab(
 					this.tooltipActive = false;
 				}}
 			></div>
-			<TabTooltip tab={props.tab} active={use(this.tooltipActive)} />
+			<TabTooltip
+				tab={props.tab}
+				active={use(this.tooltipActive)}
+				animate={use(this.tooltipAnimate)}
+			/>
 			<div
 				class="dragroot"
 				style="position: unset;"
@@ -161,10 +170,10 @@ DragTab.style = css`
 
 	.hover-area {
 		position: absolute;
-		top: -5px;
+		top: -3px;
 		left: -3px;
-		right: -5px;
-		bottom: -5px;
+		right: -3px;
+		bottom: -3px;
 		pointer-events: auto;
 	}
 

packages/chrome/src/components/TabStrip/TabTooltip.tsx

@@ -1,11 +1,18 @@
-import { css, type ComponentContext } from "dreamland/core";
+import { createDelegate, css, type ComponentContext } from "dreamland/core";
 import type { Tab } from "../../Tab";
 import { isFirefox } from "../../utils";
 
 export let activeTooltips = 0;
+export let lastX;
+
+export const fastClose = createDelegate<void>();
 
 export function TabTooltip(
-	props: { active: boolean; tab: Tab },
+	props: {
+		active: boolean;
+		animate: boolean;
+		tab: Tab;
+	},
 	cx: ComponentContext
 ) {
 	let wasActive = props.active;
@@ -20,20 +27,56 @@ export function TabTooltip(
 		transform: "scale(95%)",
 	};
 
+	let isClosing = false;
+	fastClose.listen(() => {
+		if (isClosing) {
+			// instantly finish any current animations
+			let animations = cx.root.getAnimations();
+			for (let anim of animations) {
+				anim.finish();
+			}
+		}
+	});
+
 	use(props.active).listen((active) => {
 		if (active && !wasActive) {
 			wasActive = true;
 			activeTooltips++;
-			cx.root.animate([hidden, visible], {
-				duration,
-				fill: "forwards",
-			});
+
+			let x = cx.root.getBoundingClientRect().left;
+
+			if (props.animate) {
+				let shift = lastX - x;
+				cx.root.animate([hidden, visible], {
+					duration: 0,
+					fill: "forwards",
+				});
+				cx.root.animate(
+					[
+						{ transform: `translateX(${shift}px)` },
+						{ transform: "translateX(0px)" },
+					],
+					{
+						duration: 300,
+						easing: "ease-out",
+					}
+				);
+				props.animate = false;
+			} else {
+				cx.root.animate([hidden, visible], {
+					duration,
+					fill: "forwards",
+				});
+			}
+			lastX = x;
 		} else if (!active && wasActive) {
 			wasActive = false;
+			isClosing = true;
 			cx.root.animate([visible, hidden], {
 				duration,
 				fill: "forwards",
 			}).onfinish = () => {
+				isClosing = false;
 				activeTooltips--;
 			};
 		}