From 249ff43a34966b596ec50ed5c22d6c1d2f912ec6 Mon Sep 17 00:00:00 2001 From: Georgi Ganchev Date: Fri, 31 May 2024 14:58:41 +0100 Subject: [PATCH 1/2] tweak: adds optional progress bar support to turbo refresh morphs --- src/core/drive/page_snapshot.js | 4 ++++ src/core/drive/page_view.js | 4 ++++ src/core/drive/visit.js | 10 ++++++++++ src/core/native/browser_adapter.js | 5 ++++- 4 files changed, 22 insertions(+), 1 deletion(-) diff --git a/src/core/drive/page_snapshot.js b/src/core/drive/page_snapshot.js index 58a5a75a9..7bbb62c16 100644 --- a/src/core/drive/page_snapshot.js +++ b/src/core/drive/page_snapshot.js @@ -82,6 +82,10 @@ export class PageSnapshot extends Snapshot { return this.getSetting("refresh-scroll") === "preserve" } + get shouldHideProgressBarOnRefresh() { + return this.shouldMorphPage && this.getSetting("refresh-progress-bar") === "hide" + } + // Private getSetting(name) { diff --git a/src/core/drive/page_view.js b/src/core/drive/page_view.js index 6a40a94d9..24fade684 100644 --- a/src/core/drive/page_view.js +++ b/src/core/drive/page_view.js @@ -63,6 +63,10 @@ export class PageView extends View { return this.isPageRefresh(visit) && this.snapshot.shouldPreserveScrollPosition } + shouldHideProgressBar() { + return this.snapshot.shouldHideProgressBarOnRefresh + } + get snapshot() { return PageSnapshot.fromElement(this.element) } diff --git a/src/core/drive/visit.js b/src/core/drive/visit.js index ec7565979..cbb8374b5 100644 --- a/src/core/drive/visit.js +++ b/src/core/drive/visit.js @@ -341,6 +341,16 @@ export class Visit { this.finishRequest() } + // Progress bar + + hideProgressBar() { + return this.view.shouldHideProgressBar() + } + + showProgressBarAfterDelay() { + return this.hasCachedSnapshot() || this.action !== "restore" + } + // Scrolling performScroll() { diff --git a/src/core/native/browser_adapter.js b/src/core/native/browser_adapter.js index 6f4c73bfe..96a568085 100644 --- a/src/core/native/browser_adapter.js +++ b/src/core/native/browser_adapter.js @@ -27,7 +27,10 @@ export class BrowserAdapter { visitRequestStarted(visit) { this.progressBar.setValue(0) - if (visit.hasCachedSnapshot() || visit.action != "restore") { + + if (visit.hideProgressBar()) return + + if (visit.showProgressBarAfterDelay()) { this.showVisitProgressBarAfterDelay() } else { this.showProgressBar() From 9b43af7ce96972ffa00bf3281e8556f5e6994dda Mon Sep 17 00:00:00 2001 From: Georgi Ganchev Date: Fri, 31 May 2024 15:47:04 +0100 Subject: [PATCH 2/2] chore: add tests --- .../fixtures/page_refresh_progress_bar.html | 143 ++++++++++++++++++ src/tests/functional/page_refresh_tests.js | 11 ++ 2 files changed, 154 insertions(+) create mode 100644 src/tests/fixtures/page_refresh_progress_bar.html diff --git a/src/tests/fixtures/page_refresh_progress_bar.html b/src/tests/fixtures/page_refresh_progress_bar.html new file mode 100644 index 000000000..05f98bfce --- /dev/null +++ b/src/tests/fixtures/page_refresh_progress_bar.html @@ -0,0 +1,143 @@ + + + + + + + + Turbo + + + + + + + + +

Page to be refreshed

+ +Reload + + +

Frame to be morphed

+ + + +

Frame to be reloaded

+ + + +

Frame to be navigated then reset to its initial state after reload

+ Navigate + + +
+ Preserve me! + + +

Frame to be preserved

+ +
+ +
+

Element with Stimulus controller

+ +
reset
+ +
+ +
+ + +
+

Link with params to refresh the page

+

Link to the same page

+

Link to another page

+ +
+ + + + +
+ + + +
+
+ + +
+
+ +
+
+ + diff --git a/src/tests/functional/page_refresh_tests.js b/src/tests/functional/page_refresh_tests.js index 448b79285..65aae9833 100644 --- a/src/tests/functional/page_refresh_tests.js +++ b/src/tests/functional/page_refresh_tests.js @@ -337,6 +337,17 @@ test("doesn't render previews when morphing", async ({ page }) => { assert.equal(await title.textContent(), "Page to be refreshed") }) +test("doesn't show progress bar when morphing", async({ page }) => { + await page.goto("/src/tests/fixtures/page_refresh_progress_bar.html") + + await page.click("#link") + await page.click("#page-refresh-link") + assert.notOk(await hasSelector(page, ".turbo-progress-bar"), "does not show progress bar") + + await page.click("#refresh-link") + assert.notOk(await hasSelector(page, ".turbo-progress-bar"), "does not show progress bar") +}) + async function assertPageScroll(page, top, left) { const [scrollTop, scrollLeft] = await page.evaluate(() => { return [