Add InstantClick behavior

playwright.config.js

@@ -8,7 +8,8 @@ const config = {
         ...devices["Desktop Chrome"],
         contextOptions: {
           timeout: 60000
-        }
+        },
+        hasTouch: true
       }
     },
     {
@@ -17,7 +18,8 @@ const config = {
         ...devices["Desktop Firefox"],
         contextOptions: {
           timeout: 60000
-        }
+        },
+        hasTouch: true
       }
     }
   ],

src/core/drive/form_submission.js

@@ -2,6 +2,7 @@ import { FetchRequest, FetchMethod, fetchMethodFromString, fetchEnctypeFromStrin
 import { expandURL } from "../url"
 import { clearBusyState, dispatch, getAttribute, getMetaContent, hasAttribute, markAsBusy } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
+import { prefetchCache } from "./prefetch_cache"
 
 export const FormSubmissionState = {
   initialized: "initialized",
@@ -126,13 +127,20 @@ export class FormSubmission {
   }
 
   requestPreventedHandlingResponse(request, response) {
+    prefetchCache.clear()
+
     this.result = { success: response.succeeded, fetchResponse: response }
   }
 
   requestSucceededWithResponse(request, response) {
     if (response.clientError || response.serverError) {
       this.delegate.formSubmissionFailedWithResponse(this, response)
-    } else if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
+      return
+    }
+
+    prefetchCache.clear()
+
+    if (this.requestMustRedirect(request) && responseSucceededWithoutRedirect(response)) {
       const error = new Error("Form responses must redirect to another location")
       this.delegate.formSubmissionErrored(this, error)
     } else {

src/core/drive/prefetch_cache.js

@@ -0,0 +1,34 @@
+const PREFETCH_DELAY = 100
+
+class PrefetchCache {
+  #prefetchTimeout = null
+  #prefetched = null
+
+  get(url) {
+    if (this.#prefetched && this.#prefetched.url === url && this.#prefetched.expire > Date.now()) {
+      return this.#prefetched.request
+    }
+  }
+
+  setLater(url, request, ttl) {
+    this.clear()
+
+    this.#prefetchTimeout = setTimeout(() => {
+      request.perform()
+      this.set(url, request, ttl)
+      this.#prefetchTimeout = null
+    }, PREFETCH_DELAY)
+  }
+
+  set(url, request, ttl) {
+    this.#prefetched = { url, request, expire: new Date(new Date().getTime() + ttl) }
+  }
+
+  clear() {
+    if (this.#prefetchTimeout) clearTimeout(this.#prefetchTimeout)
+    this.#prefetched = null
+  }
+}
+
+export const cacheTtl = 10 * 1000
+export const prefetchCache = new PrefetchCache()

src/core/session.js

@@ -3,6 +3,7 @@ import { CacheObserver } from "../observers/cache_observer"
 import { FormSubmitObserver } from "../observers/form_submit_observer"
 import { FrameRedirector } from "./frames/frame_redirector"
 import { History } from "./drive/history"
+import { LinkPrefetchObserver } from "../observers/link_prefetch_observer"
 import { LinkClickObserver } from "../observers/link_click_observer"
 import { FormLinkClickObserver } from "../observers/form_link_click_observer"
 import { getAction, expandURL, locationIsVisitable } from "./url"
@@ -26,6 +27,7 @@ export class Session {
 
   pageObserver = new PageObserver(this)
   cacheObserver = new CacheObserver()
+  linkPrefetchObserver = new LinkPrefetchObserver(this, document)
   linkClickObserver = new LinkClickObserver(this, window)
   formSubmitObserver = new FormSubmitObserver(this, document)
   scrollObserver = new ScrollObserver(this)
@@ -53,6 +55,7 @@ export class Session {
     if (!this.started) {
       this.pageObserver.start()
       this.cacheObserver.start()
+      this.linkPrefetchObserver.start()
       this.formLinkClickObserver.start()
       this.linkClickObserver.start()
       this.formSubmitObserver.start()
@@ -74,6 +77,7 @@ export class Session {
     if (this.started) {
       this.pageObserver.stop()
       this.cacheObserver.stop()
+      this.linkPrefetchObserver.stop()
       this.formLinkClickObserver.stop()
       this.linkClickObserver.stop()
       this.formSubmitObserver.stop()
@@ -199,6 +203,15 @@ export class Session {
 
   submittedFormLinkToLocation() {}
 
+  // Link hover observer delegate
+
+  canPrefetchRequestToLocation(link, location) {
+    return (
+      this.elementIsNavigatable(link) &&
+        locationIsVisitable(location, this.snapshot.rootLocation)
+    )
+  }
+
   // Link click observer delegate
 
   willFollowLinkToLocation(link, location, event) {

src/http/fetch_request.js

@@ -121,10 +121,17 @@ export class FetchRequest {
   async perform() {
     const { fetchOptions } = this
     this.delegate.prepareRequest(this)
-    await this.#allowRequestToBeIntercepted(fetchOptions)
+    const event = await this.#allowRequestToBeIntercepted(fetchOptions)
     try {
       this.delegate.requestStarted(this)
-      const response = await fetch(this.url.href, fetchOptions)
+
+      if (event.detail.fetchRequest) {
+        this.response = event.detail.fetchRequest.response
+      } else {
+        this.response = fetch(this.url.href, fetchOptions)
+      }
+
+      const response = await this.response
       return await this.receive(response)
     } catch (error) {
       if (error.name !== "AbortError") {
@@ -186,6 +193,8 @@ export class FetchRequest {
     })
     this.url = event.detail.url
     if (event.defaultPrevented) await requestInterception
+
+    return event
   }
 
   #willDelegateErrorHandling(error) {

src/observers/form_link_click_observer.js

@@ -15,6 +15,16 @@ export class FormLinkClickObserver {
     this.linkInterceptor.stop()
   }
 
+  // Link hover observer delegate
+
+  canPrefetchRequestToLocation(link, location) {
+    return false
+  }
+
+  prefetchAndCacheRequestToLocation(link, location) {
+    return
+  }
+
   // Link click observer delegate
 
   willFollowLinkToLocation(link, location, originalEvent) {

src/observers/link_click_observer.js

@@ -1,5 +1,4 @@
-import { expandURL } from "../core/url"
-import { findClosestRecursively } from "../util"
+import { doesNotTargetIFrame, findLinkFromClickTarget, getLocationForLink } from "../util"
 
 export class LinkClickObserver {
   started = false
@@ -31,9 +30,9 @@ export class LinkClickObserver {
   clickBubbled = (event) => {
     if (event instanceof MouseEvent && this.clickEventIsSignificant(event)) {
       const target = (event.composedPath && event.composedPath()[0]) || event.target
-      const link = this.findLinkFromClickTarget(target)
+      const link = findLinkFromClickTarget(target)
       if (link && doesNotTargetIFrame(link)) {
-        const location = this.getLocationForLink(link)
+        const location = getLocationForLink(link)
         if (this.delegate.willFollowLinkToLocation(link, location, event)) {
           event.preventDefault()
           this.delegate.followedLinkToLocation(link, location)
@@ -53,24 +52,4 @@ export class LinkClickObserver {
       event.shiftKey
     )
   }
-
-  findLinkFromClickTarget(target) {
-    return findClosestRecursively(target, "a[href]:not([target^=_]):not([download])")
-  }
-
-  getLocationForLink(link) {
-    return expandURL(link.getAttribute("href") || "")
-  }
-}
-
-function doesNotTargetIFrame(anchor) {
-  if (anchor.hasAttribute("target")) {
-    for (const element of document.getElementsByName(anchor.target)) {
-      if (element instanceof HTMLIFrameElement) return false
-    }
-
-    return true
-  } else {
-    return true
-  }
 }