Introduced <hope-tab>

[wilsonpage]

@etiennesegonzac feedback?

[wilsonpage]

There's an issue related to the 'tab-background' not being correctly aligned, this means that when a tab is closed we can see the content of the 'current' tab below.

I'm alos not confident the scroll-snapping logic is correct. It seems to snap in-between tabs sometimes. I don't know scroll-snapping at all, so it's tricky to diagnose. Might be obvious to you :)

[wilsonpage]

Also worth mentioning that I've stripped out the history illusion with the fake homescreen. I'm unsure if we want to keep these demos or just plough forwards towards a real working prototype.

I see a tab history feature being implemented in a <little-browser> style component that can take care of navigation transitions and pre-rendering until we see something like this at the platform level.

[etiennesegonzac]

There's an issue related to the 'tab-background' not being correctly aligned, this means that when a tab is closed we can see the content of the 'current' tab below.

This I'd like to fix as part of this PR, but in general I vote for "ploughing forward" :)

[etiennesegonzac]

There's an issue related to the 'tab-background' not being correctly aligned

Might actually just be another container sizing issue. The tab manager should clip tabs properly for the animation to play.

[wilsonpage]

@etiennesegonzac r?

[etiennesegonzac]

Just at the "testing on my phone" stage, but this looks really promising.

2 issues:

• when scrolling the page (so cool to see the page scroll!) it propagates and often brings up the tabview. This could get annoying. I suggest adding something similar to [1] for now.
• when creating a new tab you can see the "fake homescreen" flash as it loads during the transition, we probably want to wait for the new tab's iframe to be loaded before starting the animation (we can make sure the loadtime is tiny for this page and later we might pre-render 1 or 2 to keep handy)

[1] https://github.com/mozilla-b2g/gaia/blob/8e8a7d1b9cc4a05808ebcdd7da20d0768ebd03b4/apps/system/js/utility_tray.js#L81-L90

[etiennesegonzac]

(BTW to get the tab view once the scroll doesn't propagate, we have a grippy invisible zone at the bottom of the screen)

[etiennesegonzac]

Now that the real review is done, some naming bikeshedding :) I feel like it'd be nice to have something more visually different when looking at files and logs than hope-tabs on hope-tab. So I'd like to suggest a file/debug statement rename to

• <tabs-view>
• <light-tab>

Happy to discuss it, as always :)

If prefixing is really important I'd vote for <hope-tabs-view> and <hope-tab>.

[wilsonpage]

when creating a new tab you can see the "fake homescreen" flash as it loads during the transition, we probably want to wait for the new tab's iframe to be loaded before starting the animation (we can make sure the loadtime is tiny for this page and later we might pre-render 1 or 2 to keep handy)

Should be possible to expose a .loaded promise from <hope-tab>.

[wilsonpage]

If prefixing is really important I'd vote for and .

How about <hope-tab-manager> and <hope-tab>?

[etiennesegonzac]

FTR we ended up on

• <hope-tab-list>
• <hope-tab>

[etiennesegonzac]

Should be possible to expose a .loaded promise from .

That sounds really good!

[wilsonpage]

when scrolling the page (so cool to see the page scroll!) it propagates and often brings up the tabview. This could get annoying. I suggest adding something similar to [1] for now.

I've having issues with this fix/hack. It seems to only work if overflow property is set after the iframe has been scrolled at least once. Wondering if we can get a more reliable suggestion from platform/kats?

[etiennesegonzac]

We can leave the scrolling issue for a follow up :)

[wilsonpage]

@etiennesegonzac r?

[etiennesegonzac]

r=me with the last comment addressed and some squashing :)