work

Author: dmail

packages/frontend/navi/docs/navigation.md

@@ -527,10 +527,14 @@ the two, never both: see [route_transitions.md](./route_transitions.md).
 
 Four cases, and they are not a policy to configure but four different facts:
 
-- **Going somewhere new** (a `<Link>`, anything that pushes) lands at the top.
-  It is an arrival: the offset one had elsewhere means nothing here, and left
-  alone the new entry would be born holding the previous page's offset — which
-  the browser would then hand back as if it were this page's own.
+- **Going somewhere new** (a `<Link>`, anything that pushes to another path)
+  lands at the top. It is an arrival: the offset one had elsewhere means nothing
+  here, and left alone the new entry would be born holding the previous page's
+  offset — which the browser would then hand back as if it were this page's own.
+  A push that keeps the path is not one: it stacks an entry over the page the
+  reader is scrolled in — a [layer](#a-layer-over-the-screen-what-its-address-may-say)
+  opening, a [state whose values are places](#a-state-whose-values-are-places-history-push)
+  written — and moves nothing, like a replace.
 - **Going back or forward** (the browser's buttons, `navBack()`,
   `history.back()`) lands where that page was left. navi keeps the position and
   puts it back once the page is really rendered, which is what the browser

packages/frontend/navi/src/nav/browser_integration/scroll_restoration.js

@@ -151,11 +151,26 @@ export const restoreScrollPosition = (url) => {
 // the one before it — and that borrowed offset is what is then remembered FOR
 // it, and handed back on the way forward.
 //
+// Arrived at, which a push does not always mean. A push that keeps the pathname
+// stacks an entry over the document the reader is scrolled in — a layer opened
+// over the screen, a param whose values are places one came from (see
+// navigation.md) — and the page under the new address is the one they never
+// left. The path names the page; the search says what is drawn on or over it.
+// So `from`, the url being left, tells an arrival from the same place said
+// differently, and only the first is moved.
+//
 // The document, because the document is the scrollport in the common case. An
 // app that scrolls an element of its own scrolls it itself.
-export const startAtTop = (url) => {
+export const startAtTop = (url, { from } = {}) => {
+  const urlObject = new URL(url, window.location.href);
   // A fragment names where to land, and the browser is the one that finds it.
-  if (new URL(url, window.location.href).hash) {
+  if (urlObject.hash) {
+    return;
+  }
+  if (
+    from !== undefined &&
+    new URL(from, window.location.href).pathname === urlObject.pathname
+  ) {
     return;
   }
   window.scrollTo({ top: 0, left: 0, behavior: "instant" });

packages/frontend/navi/src/nav/browser_integration/via_history.js

@@ -180,7 +180,10 @@ export const setupBrowserIntegrationViaHistory = ({
   };
 
   const applyRoutingTask = (url, options) => {
-    const isSameUrl = url === window.location.href;
+    // Read before the history is written: the url the reader is being taken
+    // away from, which is what decides where a push lands (see startAtTop).
+    const urlLeft = window.location.href;
+    const isSameUrl = url === urlLeft;
     const {
       reason,
       navigationType, // "load", "reload", "replace", "push", "traverse"
@@ -260,11 +263,12 @@ export const setupBrowserIntegrationViaHistory = ({
     //
     // A replace gets neither: it is the same place said differently — a param
     // settling, a state written — and moving the reader for it would throw
-    // them out of a page they never left. The one replace that IS an arrival
-    // is a row of tabs travelling, and the row says so for itself (see
+    // them out of a page they never left. A push that keeps the pathname is
+    // read the same way, by startAtTop itself. The one replace that IS an
+    // arrival is a row of tabs travelling, and the row says so for itself (see
     // route_travel.jsx).
     if (navigationType === "push") {
-      whenRenderingResumes(() => startAtTop(url));
+      whenRenderingResumes(() => startAtTop(url, { from: urlLeft }));
     } else if (navigationType === "traverse") {
       whenRenderingResumes(() => restoreScrollPosition(url));
     }

packages/frontend/navi/src/nav/browser_integration/via_navigation.js

@@ -141,7 +141,10 @@ export const setupBrowserIntegrationViaNavigation = ({
   // Aborting: each run aborts the previous one, and the navigate event's own
   // signal (superseded navigation, stop button) aborts the current one.
   let abortController = null;
-  const runRouting = (url, { reason, navigationType, state, abortEvent }) => {
+  const runRouting = (
+    url,
+    { reason, navigationType, state, abortEvent, urlLeft },
+  ) => {
     const redirectionUrl = resolveRouteRedirection(url);
     if (redirectionUrl) {
       redirectAway(redirectionUrl);
@@ -205,7 +208,7 @@ export const setupBrowserIntegrationViaNavigation = ({
     // Same rule, same timing as via_history.js's own, and the same reading of
     // a replace: only the row that travels knows one of its own is an arrival.
     if (navigationType === "push") {
-      whenRenderingResumes(() => startAtTop(url));
+      whenRenderingResumes(() => startAtTop(url, { from: urlLeft }));
     } else if (navigationType === "traverse") {
       whenRenderingResumes(() => restoreScrollPosition(url));
     }
@@ -340,7 +343,10 @@ export const setupBrowserIntegrationViaNavigation = ({
         event.sourceElement || (event.info ? event.info.element : undefined),
       routeTransition: event.info ? event.info.routeTransition : undefined,
     });
-    const isSameUrl = url === window.location.href;
+    // The url the reader is being taken away from, read here because the
+    // commit — and with it the document url — happens before the handler runs.
+    const urlLeft = window.location.href;
+    const isSameUrl = url === urlLeft;
     event.intercept({
       // The browser would scroll at commit time — before the picture of the
       // page being left is taken. The shared scroll machinery does it at the
@@ -366,6 +372,7 @@ export const setupBrowserIntegrationViaNavigation = ({
             navigationType,
             state,
             abortEvent: event.signal,
+            urlLeft,
           });
           // The handler's promise IS the navigation for the browser (its
           // loading UI follows it) — but a routing that fails is displayed by