1814991 - [Tabs tray to Compose] Add page indicators and three dot button to Tabs Tray banner

Status: RESOLVED FIXED

(Firefox for Android :: Tabs, task, P2)

Description

[Noah Bond [:007]]

Re-implement paging indicators so it's clear what page the user is on. In the present XML version, the UI lives across TabsTrayFragment, component_tabstray2.xml, TabCounterBinding, TabLayoutMediator, and SelectionBannerBinding.

As part of this ticket:

• The functionality of Normal/Private/Synced page indicators should be maintained
  • Icon + active/inactive state coloring
  • The normal tabs indicator should have the current tab count.
• Also add the three-dot menu icon with a placeholder action. (This will be completed in Bug 1816517, so simply add a placeholder click lambda for now).
• The click listener lambdas for the page indicators with the business logic plumbed-in.
• The drag indicator bar component_tabstray2.handle in XML
• The previews should be fully functioning, with the tab indicator correctly changing when its selected/unselected.

Dev notes

• Utilize TabRow + Tab to implement the page indicators
• Use an IconButton for the three dot menu

Up-to-date specs

Comment 1

[Noah Bond [:007]]

Attachment: Tabs Tray page indicators screenshot.png

Comment 2

[Noah Bond [:007]]

Note that the corners of the banner will only be rounded while in the half-expanded state. This matches the existing behavior in the XML version of the UI, but is also a restriction of the current BottomSheet code from Google.

Comment 3

[BMO Github Automation]

Attachment: [mozilla-mobile/firefox-android] Bug 1814991 - Implement Tabs Tray single select banner UI (#1528)

Comment 4

[BMO Github Automation]

Authored by https://github.com/MozillaNoah
https://github.com/mozilla-mobile/firefox-android/commit/9c1a0dbba28d66e710ccd3f137fb873c179ab8c4
[main] Bug 1814991 - Implement Tabs Tray single select banner UI