diff --git a/test/integration/find_spec.mjs b/test/integration/find_spec.mjs index cfcd13635..91ea589cc 100644 --- a/test/integration/find_spec.mjs +++ b/test/integration/find_spec.mjs @@ -149,4 +149,32 @@ describe("find bar", () => { ); }); }); + + describe("scrolls to the search result text for smaller viewports", () => { + let pages; + + beforeEach(async () => { + pages = await loadAndWait("tracemonkey.pdf", ".textLayer", 100); + }); + + afterEach(async () => { + await closePages(pages); + }); + + it("must scroll to the search result text", async () => { + await Promise.all( + pages.map(async ([browserName, page]) => { + // Set a smaller viewport to simulate a mobile device + await page.setViewport({ width: 350, height: 600 }); + await page.click("#viewFindButton"); + await page.waitForSelector("#findInput", { visible: true }); + await page.type("#findInput", "productivity"); + + const highlight = await page.waitForSelector(".textLayer .highlight"); + + expect(await highlight.isIntersectingViewport()).toBeTrue(); + }) + ); + }); + }); }); diff --git a/web/pdf_find_controller.js b/web/pdf_find_controller.js index 01610dd11..41124f81b 100644 --- a/web/pdf_find_controller.js +++ b/web/pdf_find_controller.js @@ -29,7 +29,6 @@ const FindState = { const FIND_TIMEOUT = 250; // ms const MATCH_SCROLL_OFFSET_TOP = -50; // px -const MATCH_SCROLL_OFFSET_LEFT = -400; // px const CHARACTERS_TO_NORMALIZE = { "\u2010": "-", // Hyphen @@ -573,10 +572,9 @@ class PDFFindController { return; } this._scrollMatches = false; // Ensure that scrolling only happens once. - const spot = { top: MATCH_SCROLL_OFFSET_TOP, - left: selectedLeft + MATCH_SCROLL_OFFSET_LEFT, + left: selectedLeft, }; scrollIntoView(element, spot, /* scrollMatches = */ true); } diff --git a/web/ui_utils.js b/web/ui_utils.js index 99c4ff58a..7a0c99d47 100644 --- a/web/ui_utils.js +++ b/web/ui_utils.js @@ -120,7 +120,14 @@ function scrollIntoView(element, spot, scrollMatches = false) { offsetY += spot.top; } if (spot.left !== undefined) { - offsetX += spot.left; + const elementWidth = element.getBoundingClientRect().width; + const padding = MathClamp( + (parent.clientWidth - elementWidth) / 2, + 20, + 400 + ); + const left = spot.left - padding; + offsetX += left; parent.scrollLeft = offsetX; } }