Make rewind/fast-forward buttons more discoverable (#10607)

Use of the space previously occupied by the breakpoint toggle to show fast-forward and rewind buttons on hover. These are super useful but they are currently very hard to discover (since they require hovering while pressing cmd/ctrl).
replayio · Jul 10, 2024 · d595fd6 · d595fd6
1 parent 4baaa3a
commit d595fd6
Show file tree

Hide file tree

Showing 12 changed files with 371 additions and 401 deletions.
diff --git a/packages/e2e-tests/helpers/source-panel.ts b/packages/e2e-tests/helpers/source-panel.ts
@@ -754,7 +754,6 @@ export async function rewindToLine(
   await debugPrint(page, `Rewinding to line ${chalk.bold(lineNumber)}`, "rewindToLine");
 
   const lineLocator = await getSourceLine(page, lineNumber);
-  const buttonLocator = lineLocator.locator('[data-test-name="ContinueToButton"]');
 
   // Account for the fact that SourceListRow doesn't render SourceListRowMouseEvents while scrolling
   await waitFor(async () => {
@@ -763,15 +762,13 @@ export async function rewindToLine(
   });
 
   await lineLocator.locator('[data-test-name="SourceLine-HitCount"]').hover({ force: true });
-  await page.keyboard.down("Shift");
-  await page.keyboard.down(getCommandKey());
-
-  await expect(await buttonLocator.getAttribute("data-test-state")).toBe("previous");
-
-  await buttonLocator.click({ force: true });
 
-  await page.keyboard.up(getCommandKey());
-  await page.keyboard.up("Shift");
+  const buttonLocator = lineLocator.locator('[data-test-name="RewindButton"]');
+  await waitFor(async () => {
+    const isDisabled = await buttonLocator.getAttribute("disabled");
+    expect(isDisabled).toBe(null);
+  });
+  await buttonLocator.click();
 }
 
 export async function fastForwardToLine(
@@ -788,7 +785,6 @@ export async function fastForwardToLine(
   await debugPrint(page, `Fast forwarding to line ${chalk.bold(lineNumber)}`, "fastForwardToLine");
 
   const lineLocator = await getSourceLine(page, lineNumber);
-  const buttonLocator = lineLocator.locator('[data-test-name="ContinueToButton"]');
 
   // Account for the fact that SourceListRow doesn't render SourceListRowMouseEvents while scrolling
   await waitFor(async () => {
@@ -797,11 +793,13 @@ export async function fastForwardToLine(
   });
 
   await lineLocator.locator('[data-test-name="SourceLine-HitCount"]').hover({ force: true });
-  await page.keyboard.down(getCommandKey());
-
-  await expect(await buttonLocator.getAttribute("data-test-state")).toBe("next");
 
-  await buttonLocator.click({ force: true });
+  const buttonLocator = lineLocator.locator('[data-test-name="FastForwardButton"]');
+  await waitFor(async () => {
+    const isDisabled = await buttonLocator.getAttribute("disabled");
+    expect(isDisabled).toBe(null);
+  });
+  await buttonLocator.click();
 
   await page.keyboard.up(getCommandKey());
 }

diff --git a/packages/replay-next/components/sources/HoverButton.tsx b/packages/replay-next/components/sources/HoverButton.tsx
diff --git a/...components/sources/HoverButton.module.css → ...ts/sources/LogpointHoverButton.module.css b/...components/sources/HoverButton.module.css → ...ts/sources/LogpointHoverButton.module.css
@@ -1,8 +1,5 @@
 .Button,
 .ButtonWithNag {
-  position: absolute;
-  left: calc(var(--source-line-number-offset) + var(--source-hit-count-offset));
-
   border-radius: 0.25rem;
 
   display: flex;
@@ -14,19 +11,30 @@
   outline: none;
   border: none;
   padding: 0;
-}
-
-.Button {
   background-color: var(--background-color-primary-button);
   color: var(--color-primary-button);
+  transition: 200ms;
 }
-.Button[disabled] {
-  background-color: var(--background-color-disabled-button);
-  color: var(--color-disabled-button);
-  cursor: default;
+.Button:hover:not(:disabled) {
+  background-color: var(--background-color-primary-button-hover);
 }
 
 .ButtonWithNag {
   background-color: var(--background-color-secondary-button);
   color: var(--color-secondary-button);
 }
+.ButtonWithNag:hover:not(:disabled) {
+  background-color: var(--background-color-secondary-button-hover);
+}
+
+.Button[disabled],
+.ButtonWithNag[disabled] {
+  background-color: var(--background-color-disabled-button);
+  color: var(--color-disabled-button);
+  cursor: default;
+}
+
+.Icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}