Slide in a new page once it's loaded.

[Gozala]

No description provided.

[Gozala]

I have did a preliminary exploration if this can be done. Specifically I was somewhat worried about the fact that we need to keep current page around while the page we're navigating to is loading. Here is what I found out:

1. In theory there is a will-navigate event on webContent, which if prevented should prevent page from navigating away. As it turns out it does not actually prevent it though. That being said I tested calling webView.stop() on will-navigate event which seemed to prevent navigation. Assuming that's reliable we should be able to prevent page from navigating away and do that programmatically when we're ready.
2. We should be able to prevent navigation, to capture current content and then actually loadURL we were navigating to. That way we could swap current page with a captured image while new page is loading below. But that means current page will not be interactive which would be unfortunate, but probably ok for the proof of concept.
3. Alternatively we could just load the url in a new webview and keep old one under the new one & store webview ids in a history entries so that when user goes back / forward we'd be able to enable bring relevant webview to the front. But I'm all but certain about the overhead of essentially having webview per loaded content.

@patrykadas It's also unlcear what should happen if user clicks other link while one is loading.

[Gozala]

Alternative option could be to keep track of navigation history ourselves. So idea would be that for each tab we'd have history: [{ url: a1, at:{n:0,of:1}, {url: a2, at:{n:0,of:2} }, {url: a1, at:{n:2,of:1} }, ...]. Idea is that we'd use two webviews under the hood. One every navigation we'll load a new link into the other webview (one that isn't showing a current page). Once new page is painted and we finish a slide animation, we take a screenshot of a former page & navigate to an about:blank. That way we'll be able to use at fields of the history entries to encode at what index and in which of the two webviews we have each history entry loaded there for allowing us to perform goBack / goForward in the correct one.

There probably going to be some issues though:

1. Navigation history includes navigation's in a nested iframes.
2. window.history stuff; we may degrade performance.
3. Anchor links.

Some of those things probably needs figuring out anyway. And if it's not perfect but good in majority cases I think that's good enough for the prototype.

[patrykadas]

@Gozala
I have added small X that's being transformed to menu icon once you load a link, visible here:
https://youtu.be/G8BADxAcKCM
It also provides a way to actually stop loading a website, apart from clicking ESC. I have also came to conclusion that + button should be only visible once page's actually loaded.

In the case of clicking another link, I think I'd simply for now follow current browsers' behavior and start loading another one, like here:
https://youtu.be/alvfCG1RxRE

[Gozala]

I have added small X that's being transformed to menu icon once you load a link, visible here:
https://youtu.be/G8BADxAcKCM
It also provides a way to actually stop loading a website, apart from clicking ESC.

Looks nice, although to be honest it's super subtle and I'm so distracted by other animations that spotting it happen is tricky.

I think it would actually pretty cool if we convert those menu items back to xs whenever we zoom out, which would be a way to close down individual trail entries as well.

I have also came to conclusion that + button should be only visible once page's actually loaded.

Can you please elaborate ? I'm not disagreeing, just not sure what the intend is or what do you want to do with a + button on a current page (not the one being loaded).

In the case of clicking another link, I think I'd simply for now follow current browsers' behavior and start loading another one, like here:
https://youtu.be/alvfCG1RxRE

Would be nice to have some feedback signaling user that former load got cancelled / replaced by new one.

On the side note, I'm starting to think that hovered tab and loading tab should be presented in a slightly different ways, such that hovering another link while you have tab loading is not going to fully cover loading tab. Presumably that would help visualizing the fact that clicking another link drops currently loading tab.