Avoid request on same page

src/core/drive/visit.ts

@@ -2,7 +2,7 @@ import { Adapter } from "../native/adapter"
 import { FetchMethod, FetchRequest, FetchRequestDelegate } from "../../http/fetch_request"
 import { FetchResponse } from "../../http/fetch_response"
 import { History } from "./history"
-import { getAnchor } from "../url"
+import { getAnchor, getRequestURL } from "../url"
 import { PageSnapshot } from "./page_snapshot"
 import { Action } from "../types"
 import { uuid } from "../../util"
@@ -39,7 +39,8 @@ export type VisitOptions = {
   historyChanged: boolean,
   referrer?: URL,
   snapshotHTML?: string,
-  response?: VisitResponse
+  response?: VisitResponse,
+  restorationIdentifier?: string,
 }
 
 const defaultOptions: VisitOptions = {
@@ -70,6 +71,7 @@ export class Visit implements FetchRequestDelegate {
   frame?: number
   historyChanged = false
   location: URL
+  isSamePage: boolean
   redirectedToLocation?: URL
   request?: FetchRequest
   response?: VisitResponse
@@ -81,6 +83,11 @@ export class Visit implements FetchRequestDelegate {
   constructor(delegate: VisitDelegate, location: URL, restorationIdentifier: string | undefined, options: Partial<VisitOptions> = {}) {
     this.delegate = delegate
     this.location = location
+    this.isSamePage = (
+      getAnchor(location) != null &&
+      getRequestURL(location) === getRequestURL(this.view.lastRenderedLocation)
+    )
+
     this.restorationIdentifier = restorationIdentifier || uuid()
 
     const { action, historyChanged, referrer, snapshotHTML, response } = { ...defaultOptions, ...options }
@@ -251,6 +258,15 @@ export class Visit implements FetchRequestDelegate {
     }
   }
 
+  goToSamePageAnchor() {
+    if (this.isSamePage) {
+      this.render(async () => {
+        this.cacheSnapshot()
+        this.adapter.visitRendered(this)
+      })
+    }
+  }
+
   // Fetch request delegate
 
   requestStarted() {
@@ -310,8 +326,10 @@ export class Visit implements FetchRequestDelegate {
   }
 
   scrollToAnchor() {
-    if (getAnchor(this.location)) {
-      this.view.scrollToAnchor(getAnchor(this.location))
+    const anchor = getAnchor(this.location);
+
+    if (anchor) {
+      this.view.scrollToAnchor(anchor)
       return true
     }
   }
@@ -345,9 +363,13 @@ export class Visit implements FetchRequestDelegate {
   }
 
   shouldIssueRequest() {
-    return this.action == "restore"
-      ? !this.hasCachedSnapshot()
-      : true
+    if (this.isSamePage) {
+      return false
+    } else if (this.action == "restore") {
+      return !this.hasCachedSnapshot()
+    } else {
+      return true
+    }
   }
 
   cacheSnapshot() {

src/core/native/browser_adapter.ts

@@ -21,6 +21,7 @@ export class BrowserAdapter implements Adapter {
   visitStarted(visit: Visit) {
     visit.issueRequest()
     visit.changeHistory()
+    visit.goToSamePageAnchor()
     visit.loadCachedSnapshot()
   }
 

src/core/session.ts

@@ -109,9 +109,9 @@ export class Session implements FormSubmitObserverDelegate, HistoryDelegate, Lin
 
   // History delegate
 
-  historyPoppedToLocationWithRestorationIdentifier(location: URL) {
+  historyPoppedToLocationWithRestorationIdentifier(location: URL, restorationIdentifier: string) {
     if (this.enabled) {
-      this.navigator.proposeVisit(location, { action: "restore", historyChanged: true })
+      this.navigator.proposeVisit(location, { action: "restore", historyChanged: true, restorationIdentifier })
     } else {
       this.adapter.pageInvalidated()
     }

src/core/snapshot.ts

@@ -9,11 +9,11 @@ export class Snapshot<E extends Element = Element> {
     return [ ...this.element.children ]
   }
 
-  hasAnchor(anchor: string) {
+  hasAnchor(anchor: string | undefined) {
     return this.getElementForAnchor(anchor) != null
   }
 
-  getElementForAnchor(anchor: string) {
+  getElementForAnchor(anchor: string | undefined) {
     try {
       return this.element.querySelector(`[id='${anchor}'], a[name='${anchor}']`)
     } catch {

src/core/url.ts

@@ -10,8 +10,6 @@ export function getAnchor(url: URL) {
     return url.hash.slice(1)
   } else if (anchorMatch = url.href.match(/#(.*)$/)) {
     return anchorMatch[1]
-  } else {
-    return ""
   }
 }
 
@@ -28,13 +26,15 @@ export function isPrefixedBy(baseURL: URL, url: URL) {
   return baseURL.href === expandURL(prefix).href || baseURL.href.startsWith(prefix)
 }
 
+export function getRequestURL(url: URL) {
+  const anchor = getAnchor(url)
+  return anchor != null
+    ? url.href.slice(0, -(anchor.length + 1))
+    : url.href
+}
+
 export function toCacheKey(url: URL) {
-  const anchorLength = url.hash.length
-  if (anchorLength < 2) {
-    return url.href
-  } else {
-    return url.href.slice(0, -anchorLength)
-  }
+  return getRequestURL(url)
 }
 
 export function urlsAreEqual(left: string, right: string) {

src/core/view.ts

@@ -25,6 +25,7 @@ export abstract class View<E extends Element, S extends Snapshot<E> = Snapshot<E
     const element = this.snapshot.getElementForAnchor(anchor)
     if (element) {
       this.scrollToElement(element)
+      this.focusElement(element)
     } else {
       this.scrollToPosition({ x: 0, y: 0 })
     }
@@ -42,6 +43,13 @@ export abstract class View<E extends Element, S extends Snapshot<E> = Snapshot<E
     return window
   }
 
+  focusElement(element: Element | HTMLElement) {
+    const tabindex = element.getAttribute('tabindex')
+    element.setAttribute('tabindex', '-1')
+    if ('focus' in element) element.focus()
+    tabindex ? element.setAttribute('tabindex', tabindex) : element.removeAttribute('tabindex')
+  }
+
   // Rendering
 
   async render(renderer: R) {

src/tests/fixtures/navigation.html

@@ -7,7 +7,11 @@
     <script src="/src/tests/fixtures/test.js"></script>
   </head>
   <body>
-    <section>
+    <a href="#main">Skip Link</a>
+
+    <a href="#ignored-link" id="ignored-link">Skipped Content</a>
+
+    <section id="main" style="height: 200vh;">
       <h1>Navigation</h1>
       <p><a id="same-origin-unannotated-link" href="/src/tests/fixtures/one.html">Same-origin unannotated link</a></p>
       <p><form id="same-origin-unannotated-form" method="get" action="/src/tests/fixtures/one.html"><button>Same-origin unannotated form</button></form></p>

src/tests/helpers/functional_test_case.ts

@@ -45,6 +45,10 @@ export class FunctionalTestCase extends InternTestCase {
     return this.evaluate(element => element.scrollIntoView(), element)
   }
 
+  async pressTab(): Promise<void> {
+    return this.remote.getActiveElement().then(activeElement => activeElement.type(('\uE004'))) // TAB
+  }
+
   async outerHTMLForSelector(selector: string): Promise<string> {
     const element = await this.remote.findByCssSelector(selector)
     return this.evaluate(element => element.outerHTML, element)
@@ -98,6 +102,10 @@ export class FunctionalTestCase extends InternTestCase {
     return this.evaluate(() => document.body as any)
   }
 
+  async getActiveElement() {
+    return await this.remote.getActiveElement()
+  }
+
   get location(): Promise<string> {
     return this.evaluate(() => location.toString())
   }