Files
openidea/e2e/overviewLane.spec.ts
JawandClaude Opus 5.5 07456b2562 fix(editor): show the scrollbar thumb over overview marks (#1031)
The overview lane lies over the vertical scrollbar, so a mark the height of the lane (a new file added to git is one green VCS mark) hid the native thumb completely. The lane now draws the thumb itself, above its marks and without taking the pointer, at the position of the native one (scrollbarThumb, inset by its 2px border); it switches to the hover color while the pointer is on the thumb. The native thumb is made transparent in editors that have the lane, so the two don't add up, and still takes the drag. Editors without the lane (notebook cells, previews) keep the native thumb.

Fixes #1014

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-03 20:31:57 +08:00

50 lines
2.6 KiB
TypeScript

import { expect, openFromTree, test } from "./fixtures";
// Headless Chromium hides scrollbars by default; this test drags one.
test.use({ launchOptions: { ignoreDefaultArgs: ["--hide-scrollbars"] } });
test("the scrollbar thumb drags even where overview marks cover it (#752)", async ({ workbench: page }) => {
const editor = await openFromTree(page, "build.gradle.kts");
await editor.locator(".cm-content").click();
await page.keyboard.press("Meta+a");
await page.keyboard.insertText(Array.from({ length: 400 }, (_, i) => `val mark${i} = ${i}`).join("\n"));
// A match on every line covers the overview lane, as a new file's change mark does.
await page.keyboard.press("Meta+f");
await page.getByRole("textbox", { name: "Find" }).fill("mark");
await expect(editor.locator(".cm-openidea-overviewMark").first()).toBeVisible();
const scroller = editor.locator(".cm-scroller");
await scroller.evaluate((s) => (s.scrollTop = 0));
const box = (await scroller.boundingBox())!;
// Over a mark and inside the thumb, which is at the top of the track.
const x = box.x + box.width - 5;
const y = box.y + 12;
await page.mouse.move(x - 40, y);
await page.mouse.move(x, y);
await page.mouse.down();
await page.mouse.move(x, y + 150, { steps: 10 });
await page.mouse.up();
expect(await scroller.evaluate((s) => s.scrollTop)).toBeGreaterThan(0);
// Away from the thumb the marks take the pointer again.
await page.mouse.move(x, box.y + box.height - 20);
await expect(editor.locator(".cm-openidea-overview")).not.toHaveClass(/cm-openidea-overview-onThumb/);
});
test("the scrollbar thumb shows over a mark the height of the lane (#1014)", async ({ workbench: page }) => {
const editor = await openFromTree(page, "build.gradle.kts");
await editor.locator(".cm-content").click();
await page.keyboard.press("Meta+a");
await page.keyboard.insertText(Array.from({ length: 400 }, (_, i) => `val mark${i} = ${i}`).join("\n"));
await page.keyboard.press("Meta+f");
await page.getByRole("textbox", { name: "Find" }).fill("mark");
await expect(editor.locator(".cm-openidea-overviewMark").first()).toBeVisible();
const thumb = editor.locator(".cm-openidea-overviewThumb");
await expect(thumb).toBeVisible();
// Drawn last in the lane, so it paints over every mark.
expect(await thumb.evaluate((t) => t.nextElementSibling)).toBeNull();
const scroller = editor.locator(".cm-scroller");
const top = async () => (await thumb.boundingBox())!.y;
const before = await top();
await scroller.evaluate((s) => (s.scrollTop = s.scrollHeight));
await expect.poll(top).toBeGreaterThan(before + 100);
});