Keep sidebar and topbar stable during full-page navigation #3008
Service Desk opened 8 hours ago

Goal

On full document navigations between layout screens, keep the sidebar and topbar visually stable so the page does not blank out as a whole. Navigation stays a normal same-origin page load: a new Wicket page, new Ajax callback URLs, and new WebSocket observers. This is not SPA-style content swapping.

Requirements

  1. Enable cross-document view transitions for same-origin navigations (@view-transition { navigation: auto; }).
  2. Pair chrome with CSS view-transition-name on the existing .sidebar and .topbar classes (already unique on LayoutPage). Do not add HTML ids for this, and do not use Wicket markup ids.
  3. Honor prefers-reduced-motion: reduce by disabling the effect.
  4. Unsupported browsers keep current behavior (progressive enhancement). Firefox does not ship cross-document view transitions yet; Chromium 126+ and Safari 18.2+ do.

Out of scope

  • Fetch-and-swap or innerHTML replacement of #content / #main
  • Click interception and History API as a router
  • Server-side AbstractAjaxBehavior to render another page into the current one
  • Naming .side-info or .main (those classes are duplicated or unstable and skip the whole transition)
  • Changing intra-page Ajax + onedev.server.history.pushState (already same-document)

Constraints

  • Only the chrome boxes are pinned. Sidebar menus and the topbar title still change across project, administration, user, and my pages.
  • SimplePage (login and similar) has no sidebar or topbar.
  • .sidebar and .topbar already use CSS transition: all … ease; that must not fight view-transition snapshots.
  • Only real document navigations participate. Wicket Ajax updates, many window.location fallbacks, POSTs, and some redirects will not.

Acceptance criteria

  •  Same-origin full navigations between LayoutPage screens in supporting browsers keep sidebar and topbar from blanking out with the rest of the document
  •  No duplicate view-transition-name values (in particular, do not name .side-info or nested .main)
  •  prefers-reduced-motion: reduce disables the effect
  •  Unsupported browsers are unchanged
  •  Existing intra-page Ajax navigation is unchanged
1/1
Type
Improvement
Priority
Normal
Assignee
Labels
No labels
Issue Votes (0)
Watchers (2)
Reference
OD-3008
Please wait...
Connection lost or session expired, reload to recover
Page is in error, reload to recover