1991928 - Devtools support for Navigation API

Status: NEW

(DevTools :: Debugger, enhancement, P2)

Description

[Simon Pieters [:zcorpan]]

There should be at least support for breakpoints for the new events on window.navigation (maybe under "Load" or maybe a new category "Navigation").

• navigate
• navigatesuccess
• navigateerror
• currententrychange

I don't know if there are other things that should be supported in devtools for the Navigation API.

Comment 1

[Simon Pieters [:zcorpan]]

Perhaps a way to inspect the session history with Jake diagrams?

Comment 2

[Tomislav Jovanovic :zombie]

I'm guessing Simon meant this to go to Devtools, feel free to toss it back if I misunderstood.

Comment 3

[Nazım Can Altınova [:canova][:canaltinova on phabricator]]

I think "Debugger" component is more correct for this, considering that it's about supporting for breakpoints.

Comment 4

[Julian Descottes [:jdescottes]]

See if we can simply add the events to https://searchfox.org/firefox-main/source/devtools/server/actors/utils/event-breakpoints.js

Comment 5

[Alexandre Poirot [:ochameau]]

Looks like it given how these events are dispatched from native code:
https://searchfox.org/firefox-main/rev/644f0db17749554fe23a45b43e77e61f42acdfd9/dom/navigation/Navigation.cpp#1100-1109

Comment 6

[Alexandre Poirot [:ochameau]]

Is there a handy example page out there where we could easily test and practice the navigation API and its related events?

It may also help us see if we could do more than just breakpoints.

Jake, you told me about having tools to help debug/inspect/understand the session history. Do you have some UI/UX in mind?

Comment 7

[Jake Archibald [:jakea]]

Hi! Sorry for the delay in replying, I was away last week.

Yes, an ideal devtool would be a timeline for the session history of the tab. https://html.spec.whatwg.org/multipage/document-sequences.html#jake-diagrams - 'Jake diagrams' were the best thing I came up with when trying to document this stuff in the spec.

Something that has step numbers across the top, like Jake-diagrams, then rows for the top level and each of the frames.

When inspecting a session history entry (one of the items in the rows), it should provide the session history entry data, as in:

• URL
• History API state
• Navigation API state
• Navigation API key
• Navigation API ID
• Nice to have: Scroll restoration mode & scroll position data
• Document state (see below)

Ideally it should be easy to spot when a single document state is used contiguously across multiple session history entries (as in, same document navigations). Hilariously, it is possible for the same document to be used by two non-contiguous history entries, but it's… I think… rare in practice. For document state:

• State of the document: active, bf-cached, evicted.
• If evicted, reason for eviction (for debugging bf-cachability)
• If there's a 'resource' (eg POST body) associated with this document
• Nice to haves: Referrer, referrer policy, history policy

It'd be nice to be able to navigate directly to a history step.

If any of this isn't clear, I can try and provide more details, or jump on a call.

Comment 8

[Jake Archibald [:jakea]]

The above is good for capturing the current state of session history, but it might be handy to have a log for session history mutations.

Eg, logs like:

• URL & history API state changed for step 4, frame[0][1], via history.replaceState()
• Steps 5, 6, 7 removed due to push navigation from step 4 within frame[1]. New step 5 created.

Comment 9

[Simon Pieters [:zcorpan]]

For Jake Diagrams, also see https://domenic.github.io/jake-diagram-generator/ and https://farre.github.io/web-tools/rejake/