Fenix: FNX2-16055 ⁃ Move tabs from the home screen to a "tab tray"

[ekager]

User Story

As a user, I want my tabs to be organized separately from the homescreen, so I can better manage my tabs and also make good use of my homescreen.

Acceptance Criteria

(Retain previous tab functionality)
-I can easily swipe a tab in order to delete it, for faster and more intuitive tab management.
-I can undo the deletion of a tab, in case of an accidental delete.
-I can still go through the save collections flow to create a new collection.
-Homescreen remains useful to me

---

I think a more traditional "tabs" fragment from browsing could make sense in Fenix.

Why/User Benefit/User Problem

• As we heard in the UR study 2, some users can be confused by the tab/home button in the toolbar.
• Additionally, in #1017 we are hearing from users that the thin tab slices aren't very useful for distinguishing tabs.
• Lastly, from a navigation perspective, I think the UX can be confusing with the shared tabs / home view. That in order to view tabs from the browser you have to go home, what should happen when you press "back", etc.

UX

• Screen flow
• Tab tray screen for specs

[kbrosnan]

We have done much of what comment 0 talks about. Though the final bullet is not addressed. We still have a unified home/tabs screen.

[yoasif]

I thought Fennec had already solved this (along with pretty much every other Android browser I have tried), but there was the sessions idea that was supposed to be front and center (since removed) which testers were willing to try.

1487 and #1981 were solved in Fennec pretty elegantly, imo - and even sessions could be reintegrated with a scope like view like in Fennec, where top sites, bookmarks, history appear -- maybe a new scope for sessions could appear?

[topotropic]

related: https://github.com/mozilla-mobile/fenix/issues/570

[lime124]

ok so what i'm reading is that this issue has been mostly addressed (per kevin's comment) there's the final bullet about the homescreen. let's put this as part of the homescreen design effort so we can take a look then.

lmk if i missed something @ekager !

[severinrudie]

I noticed a few animation bugs with the current home screen that @boek thought might trouble us here too, and opened https://github.com/mozilla-mobile/fenix/issues/6801 to track them.

I think we could fix a lot of these bugs with one change if we added an animation to remove the current tabs before switching themes. Details in https://github.com/mozilla-mobile/fenix/issues/6801#issuecomment-558412929.

[jonalmeida]

@darkwing @boek there is a tabstray component that implements a lot of the same functionality. Is there a reason to not work off that, or rather, use the tabstray API so that it still follows the API contracts for other browser forks?

You can see the browser-tabstray component at work in Sample Browser or Reference Browser.

[boek]

@jonalmeida We didn't know that existed at first! Though the Fenix tab tray has quite a bit of added functionality with selection/sharing/collections so I'm not sure how much of that we could re-use without some heavy modifications

[jonalmeida]

@jonalmeida We didn't know that existed at first! Though the Fenix tab tray has quite a bit of added functionality with selection/sharing/collections so I'm not sure how much of that we could re-use without some heavy modifications

I filed some follow-up issues:

• https://github.com/mozilla-mobile/fenix/issues/7071
• https://github.com/mozilla-mobile/android-components/issues/5281

[boek]

@jonalmeida perfect 🙌 thank you!

[liuche]

Putting the Must label here bc the meta #6602 is a must.

[liuche]

cc @mcomella since you mentioned you were interested in significant changes to the app.

[mheubusch]

strings approved!

[Armez]

Consider Ordering tab slices from bottom of the screen when toolbar is set to bottom and add a shortcut for bookmarks near new tab icon

[topotropic]

@boek @darkwing I had a brief look at the current implementation and was wondering if we can show the current home/new tab screen (the one with Collections) when people open a new tab from the tab tray instead of the search screen?

Also, when people launch Fenix for the first time, read through onboarding and then tap on "Start browsing" button we launch them on home/new tab but show the multitask icon with a 0. Would it be possible to handle home screen as new tab and show a 1 in the multitask icon and when people tap on it list it as "Firefox home" like we currently do in Fennec?

[Dunexus]

Looking at abstract, tabs in the new tab tray looks like a list of inert links (like bookmarks or history) instead of living tabs like current implementation or the one in most of mobile browsers including fennec. Is there a UX goal behind this change ?

Also, is reordering tabs (https://github.com/mozilla-mobile/fenix/issues/2487) considered in this re-implementation of tabs ?

[andreicristianpetcu]

@boek can I test this in Nightly? I saw a commit mentioning a feature flag.

[cadeyrn]

@andreicristianpetcu You have to use a debug build and then you can tap five times the Firefox logo on the "About" screen to enable the "Secret Settings" screen in the settings.

[boek]

@andreicristianpetcu Soon! I forgot to update the feature flag to include nightly

[yoasif]

It works in the latest nightly, FYI.

[yoasif]

Did some testing yesterday and today -- I'm glad it is behind a flag because I have a lot of feedback. :)

See issues:

https://github.com/mozilla-mobile/fenix/issues/10369 - Tab tray buttons have bad contrast in dark theme with on screen buttons
https://github.com/mozilla-mobile/fenix/issues/10370 - Tab tray buttons have bad alignment
https://github.com/mozilla-mobile/fenix/issues/10371 - It is too hard to save/move a selection of tabs into collections via tab tray

Other ideas:

https://github.com/mozilla-mobile/fenix/issues/10372 - Collections should be integrated into Tab Tray
https://github.com/mozilla-mobile/fenix/issues/10368 - Tapping new tab button should open a new tab instead of asking user to type url or search query
https://github.com/mozilla-mobile/fenix/issues/10373 - Tab tray home button seems superfluous, since new tab could easily do this

Issues that seem relevant again:

https://github.com/mozilla-mobile/fenix/issues/7913 - Tabbed tab switcher

[Cheap-Skate]

I tried to map out the new tab tray state machine following some of @yoasif 's comments in https://github.com/mozilla-mobile/fenix/issues/10368#issue-611217388 . But I've posted here since it seems to be really an omnibus issue. I think he's covered most of it, I find it very confusing. It differs somewhat from a conventional browser, what really strikes me is

• can't access Home page (aka Top Sites) from within a tab. That's very unusual for a browser and it's something I desperately miss.
• from the tab tray there are two unusual interim states not directly associated with a tab:- "Interim Home" and "Interim Search". As @yoasif says, in these interim states the tab has not yet been created, and they are a complex pair of states with rules for moving to/from them from the tabs tray and between them. The new tab is not actually created until I choose something from the Interim states. That's unusual:- normally the "new tab" button creates an empty tab and moves the user to its Home screen.
• the Interim Search state looks identical to the normal tab Search state, but it's not. Pressing "Back" from Interim Search takes me to the tabs tray, but pressing "Back" from normal Search takes me to Web content. I find it confusing to have two identical Search screens, one within a tab and one not.
• there are a few other rough edges:- I can navigate from Interim Home to Interim Search by tapping the URL bar, but then the Back button takes me to the tabs tray, not to Interim Search; and, tapping Back from the Interim Home state takes me out of the browser altogether (likely just a bug, I can file if you like).

If you like I can break these out under @yoasif's issues, or you can ignore me altogether, I think @yoasif has got it covered.

[Matth7878]

I think that when user tap address bar it should show home screen. Only when he really starts interacting with text in address bar he should see search / suggestions screen.

[madb1lly]

Hi all,

I had a quick try of this new system this morning and I got a bit lost. I've since looked at the screen flow which @ekager shared in the OP and I now understand it better. I think what is confusing is that although this is closer to how Fennec works it's also sufficiently different to be confusing:

• In Fennec home and new tab are the same, but in Fenix they are different and to access home and therefore Top Sites (which should be things I access frequently) it takes two taps, which is not an improvement.

Also:

• Closing tab in the new Open Tabs view doesn't show an Undo dialogue (I assume this is a bug)

I like the thumbnails we see in the new Open Tabs view.

Cheers 🙂

[cadeyrn]

Closing tab in the new Open Tabs view doesn't show an Undo dialogue (I assume this is a bug)

The tabs tray is not yet finished. That's why it's still behind a feature flag and a secret setting. :) Implementing the undo snackbar is #10332.

[gabrielluong]

Closing this issue since the initial tab tray that we are working on has been landed behind a feature flag. Follow ups to this feature are tracked on https://github.com/orgs/mozilla-mobile/projects/53.