[PR #5193] [MERGED] feat: preserve response viewer scroll position per tab #5098

New issue

Closed

opened 2026-03-17 02:34:38 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:34:38 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5193
Author: @jarvis2754
Created: 6/24/2025
Status: ✅ Merged
Merged: 7/28/2025
Merged by: @jamesgeorge007

Base: next ← Head: contrib

📝 Commits (10+)

8f4731c feat: add scroll position memory per tab in Response view
c5389ca Merge branch 'hoppscotch:main' into contrib
6672d0f feat: add scroll persistence and cleanup, remove hardcoded scroller references
df08e5e chore: German i18n string entry additions (#5142)
4fabff1 fix(desktop): prevent navigation on file drops (#5176)
3578cc3 feat(desktop): native tab keyboard shortcuts (#5190)
93c4634 fix: output raw numbers in JSON filter (#5152)
3a183a9 chore: resolve global env in team env and tooltip UI update (#5187)
b401b79 fix(common): auto unescape utf-8 issue in the request body (#5185)
e5675d6 refactor(backend): enhance auth strategies with type safety and better error handling (#5066)

📊 Changes

11 files changed (+381 additions, -11 deletions)

View changed files

📝 packages/hoppscotch-common/src/components/http/RequestTab.vue (+5 -1)
📝 packages/hoppscotch-common/src/components/http/Response.vue (+3 -4)
📝 packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue (+2 -0)
📝 packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue (+14 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue (+13 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue (+13 -1)
📝 packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue (+12 -2)
➕ packages/hoppscotch-common/src/composables/useScrollerRef.ts (+113 -0)
📝 packages/hoppscotch-common/src/pages/index.vue (+9 -1)
➕ packages/hoppscotch-common/src/services/__tests__/scroll.service.spec.ts (+99 -0)
➕ packages/hoppscotch-common/src/services/scroll.service.ts (+98 -0)

📄 Description

feat: Add per-tab scroll position memory in Response view (#5027)

Description

This commit implements per-tab scroll position saving in the Response viewer.

Changes

Created scrollStore.ts to manage scroll positions across tabs
Modified Response.vue:
- Saves .cm-scroller scrollTop for each tab ID
- Restores scrollTop when revisiting a tab
Modified RequestTab.vue to pass tabId to Response.vue

How it works

Each tab has a unique tab.id.
When a user scrolls the response body, the scroll position is saved in a global Map<tabId, scrollTop>.
When the tab is reopened or re-rendered, the scroll is restored using a ResizeObserver.

Closes #5027

Please let me know if there is any problem with the code.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5193 **Author:** [@jarvis2754](https://github.com/jarvis2754) **Created:** 6/24/2025 **Status:** ✅ Merged **Merged:** 7/28/2025 **Merged by:** [@jamesgeorge007](https://github.com/jamesgeorge007) **Base:** `next` ← **Head:** `contrib` --- ### 📝 Commits (10+) - [`8f4731c`](https://github.com/hoppscotch/hoppscotch/commit/8f4731c3e1341e7c9e3881553828a144eb08b590) feat: add scroll position memory per tab in Response view - [`c5389ca`](https://github.com/hoppscotch/hoppscotch/commit/c5389ca75c5e7bedbf332cff299820814be6885d) Merge branch 'hoppscotch:main' into contrib - [`6672d0f`](https://github.com/hoppscotch/hoppscotch/commit/6672d0f66f7e1a822bc020aea91d09506afc5f92) feat: add scroll persistence and cleanup, remove hardcoded scroller references - [`df08e5e`](https://github.com/hoppscotch/hoppscotch/commit/df08e5ea380be88fb9586ea90025c11b0a62c5b7) chore: German `i18n` string entry additions (#5142) - [`4fabff1`](https://github.com/hoppscotch/hoppscotch/commit/4fabff118ad4189ee9d662b8aedd21cb6a2ee0ac) fix(desktop): prevent navigation on file drops (#5176) - [`3578cc3`](https://github.com/hoppscotch/hoppscotch/commit/3578cc31efc050f384f42e881f5878302f2f006e) feat(desktop): native tab keyboard shortcuts (#5190) - [`93c4634`](https://github.com/hoppscotch/hoppscotch/commit/93c463415bd593034cffb8957fd061101f5e0107) fix: output raw numbers in JSON filter (#5152) - [`3a183a9`](https://github.com/hoppscotch/hoppscotch/commit/3a183a9ff2086a8c94a21d197187d8b54d88323c) chore: resolve global env in team env and tooltip UI update (#5187) - [`b401b79`](https://github.com/hoppscotch/hoppscotch/commit/b401b79f74c8a419ca0529589a3c3198df70581e) fix(common): auto unescape utf-8 issue in the request body (#5185) - [`e5675d6`](https://github.com/hoppscotch/hoppscotch/commit/e5675d63cd447afc553d151a8d827d3e1c27599a) refactor(backend): enhance auth strategies with type safety and better error handling (#5066) ### 📊 Changes **11 files changed** (+381 additions, -11 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/src/components/http/RequestTab.vue` (+5 -1) 📝 `packages/hoppscotch-common/src/components/http/Response.vue` (+3 -4) 📝 `packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue` (+2 -0) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/HTMLLensRenderer.vue` (+14 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/JSONLensRenderer.vue` (+13 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/RawLensRenderer.vue` (+13 -1) 📝 `packages/hoppscotch-common/src/components/lenses/renderers/XMLLensRenderer.vue` (+12 -2) ➕ `packages/hoppscotch-common/src/composables/useScrollerRef.ts` (+113 -0) 📝 `packages/hoppscotch-common/src/pages/index.vue` (+9 -1) ➕ `packages/hoppscotch-common/src/services/__tests__/scroll.service.spec.ts` (+99 -0) ➕ `packages/hoppscotch-common/src/services/scroll.service.ts` (+98 -0) </details> ### 📄 Description feat: Add per-tab scroll position memory in Response view (#5027) ### Description This commit implements per-tab scroll position saving in the Response viewer. ### Changes - Created `scrollStore.ts` to manage scroll positions across tabs - Modified `Response.vue`: - Saves `.cm-scroller` scrollTop for each tab ID - Restores scrollTop when revisiting a tab - Modified `RequestTab.vue` to pass `tabId` to `Response.vue` ### How it works Each tab has a unique `tab.id`. When a user scrolls the response body, the scroll position is saved in a global `Map<tabId, scrollTop>`. When the tab is reopened or re-rendered, the scroll is restored using a `ResizeObserver`. Closes #5027 Please let me know if there is any problem with the code. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>