Implement tab tray design improvements and fix close functionality.

app/src/main/java/org/mozilla/fenix/browser/BaseBrowserFragment.kt

@@ -94,6 +94,7 @@ import org.mozilla.fenix.ext.requireComponents
 import org.mozilla.fenix.ext.sessionsOfType
 import org.mozilla.fenix.ext.settings
 import org.mozilla.fenix.home.SharedViewModel
+import org.mozilla.fenix.tabtray.TabTrayDialogFragment
 import org.mozilla.fenix.theme.ThemeManager
 import org.mozilla.fenix.wifi.SitePermissionsWifiIntegration
 import java.lang.ref.WeakReference
@@ -216,7 +217,7 @@ abstract class BaseBrowserFragment : Fragment(), UserInteractionHandler, Session
                 topSiteStorage = requireComponents.core.topSiteStorage,
                 sharedViewModel = sharedViewModel,
                 onTabCounterClicked = {
-                    findNavController().navigate(BrowserFragmentDirections.actionGlobalTabTrayDialogFragment())
+                    TabTrayDialogFragment.show(parentFragmentManager)
                 }
             )
 

app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt

@@ -103,6 +103,7 @@ import org.mozilla.fenix.settings.SupportUtils
 import org.mozilla.fenix.settings.SupportUtils.MozillaPage.PRIVATE_NOTICE
 import org.mozilla.fenix.settings.SupportUtils.SumoTopic.HELP
 import org.mozilla.fenix.settings.deletebrowsingdata.deleteAndQuit
+import org.mozilla.fenix.tabtray.TabTrayDialogFragment
 import org.mozilla.fenix.theme.ThemeManager
 import org.mozilla.fenix.utils.FragmentPreDrawManager
 import org.mozilla.fenix.utils.allowUndo
@@ -1036,8 +1037,7 @@ class HomeFragment : Fragment() {
     private fun openTabTray() {
         invokePendingDeleteJobs()
         hideOnboardingIfNeeded()
-
-        findNavController().navigate(HomeFragmentDirections.actionGlobalTabTrayDialogFragment())
+        TabTrayDialogFragment.show(parentFragmentManager)
     }
 
     companion object {

app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt

@@ -11,6 +11,7 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.appcompat.app.AppCompatDialogFragment
 import androidx.core.view.updatePadding
+import androidx.fragment.app.FragmentManager
 import androidx.lifecycle.lifecycleScope
 import androidx.navigation.fragment.findNavController
 import kotlinx.android.synthetic.main.component_tabstray.view.*
@@ -18,6 +19,9 @@ import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.*
 import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.view.*
 import mozilla.components.browser.session.Session
 import mozilla.components.browser.session.SessionManager
+import mozilla.components.browser.state.selector.normalTabs
+import mozilla.components.browser.state.selector.privateTabs
+import mozilla.components.browser.state.state.BrowserState
 import mozilla.components.concept.engine.prompt.ShareData
 import mozilla.components.concept.tabstray.Tab
 import mozilla.components.lib.state.ext.consumeFrom
@@ -80,7 +84,10 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), TabTrayInteractor {
             insets
         }
 
-        consumeFrom(requireComponents.core.store) { tabTrayView.updateState(it) }
+        consumeFrom(requireComponents.core.store) {
+            tabTrayView.updateState(it)
+            navigateHomeIfNeeded(it)
+        }
     }
 
     override fun onTabClosed(tab: Tab) {
@@ -185,8 +192,7 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), TabTrayInteractor {
             sessionManager.remove(it)
         }
 
-        val isPrivate = (activity as HomeActivity).browsingModeManager.mode.isPrivate
-        val snackbarMessage = if (isPrivate) {
+        val snackbarMessage = if (tabTrayView.isPrivateModeSelected) {
             getString(R.string.snackbar_private_tabs_closed)
         } else {
             getString(R.string.snackbar_tabs_closed)
@@ -202,8 +208,6 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), TabTrayInteractor {
             operation = { },
             elevation = ELEVATION
         )
-
-        findNavController().popBackStack(R.id.homeFragment, false)
     }
 
     private fun getListOfSessions(private: Boolean): List<Session> {
@@ -211,7 +215,28 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), TabTrayInteractor {
             .toList()
     }
 
+    private fun navigateHomeIfNeeded(state: BrowserState) {
+        val shouldPop = if (tabTrayView.isPrivateModeSelected) {
+            state.privateTabs.isEmpty()
+        } else {
+            state.normalTabs.isEmpty()
+        }
+
+        if (shouldPop) {
+            findNavController().popBackStack(R.id.homeFragment, false)
+        }
+    }
+
     companion object {
         private const val ELEVATION = 80f
+        private const val FRAGMENT_TAG = "tabTrayDialogFragment"
+
+        fun show(fragmentManager: FragmentManager) {
+            // We want to make sure we don't accidentally show the dialog twice if
+            // a user somehow manages to trigger `show()` twice before we present the dialog.
+            if (fragmentManager.findFragmentByTag(FRAGMENT_TAG) == null) {
+                TabTrayDialogFragment().showNow(fragmentManager, FRAGMENT_TAG)
+            }
+        }
     }
 }

app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt

@@ -66,7 +66,7 @@ class TabTrayView(
         get() = container
 
     init {
-        fabView.new_tab_button.compatElevation = ELEVATION
+        toggleFabText(isPrivate)
 
         behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
             override fun onSlide(bottomSheet: View, slideOffset: Float) {
@@ -118,6 +118,8 @@ class TabTrayView(
             expand()
         }
 
+        behavior.setExpandedOffset(view.context.resources.getDimension(R.dimen.tab_tray_top_offset).toInt())
+
         (view.tabsTray as? BrowserTabsTray)?.also { tray ->
             TabsTouchHelper(tray.tabsAdapter).attachToRecyclerView(tray)
             (tray.tabsAdapter as? FenixTabsAdapter)?.also { adapter ->
@@ -177,6 +179,7 @@ class TabTrayView(
             else -> { state -> !state.content.private }
         }
 
+        toggleFabText(isPrivateModeSelected)
         tabsFeature.filterTabs(filter)
 
         updateState(view.context.components.core.store.state)
@@ -209,12 +212,21 @@ class TabTrayView(
     override fun onTabReselected(tab: TabLayout.Tab?) { /*noop*/ }
     override fun onTabUnselected(tab: TabLayout.Tab?) { /*noop*/ }
 
+    fun toggleFabText(private: Boolean) {
+        if (private) {
+            fabView.new_tab_button.extend()
+            fabView.new_tab_button.contentDescription = view.context.resources.getString(R.string.add_private_tab)
+        } else {
+            fabView.new_tab_button.shrink()
+            fabView.new_tab_button.contentDescription = view.context.resources.getString(R.string.add_tab)
+        }
+    }
+
     companion object {
         private const val DEFAULT_TAB_ID = 0
         private const val PRIVATE_TAB_ID = 1
         private const val EXPAND_AT_SIZE = 3
         private const val SLIDE_OFFSET = 0
-        private const val ELEVATION = 90f
     }
 }
 

app/src/main/res/layout/component_tabstray.xml

@@ -10,7 +10,6 @@
     android:id="@+id/tab_wrapper"
     android:layout_height="match_parent"
     android:layout_width="match_parent"
-    android:layout_marginTop="40dp"
     style="@style/BottomSheetModal"
     android:backgroundTint="@color/foundation_normal_theme"
     app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

app/src/main/res/layout/component_tabstray_fab.xml

@@ -1,17 +1,21 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
+<?xml version="1.0" encoding="utf-8"?><!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
-<com.google.android.material.floatingactionbutton.FloatingActionButton
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:id="@+id/new_tab_button"
+    style="@style/TabTrayFab"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_gravity="bottom|end"
     android:layout_margin="16dp"
+    android:backgroundTint="@color/accent_normal_theme"
     android:contentDescription="@string/add_tab"
-    app:backgroundTint="@color/accent_normal_theme"
-    app:srcCompat="@drawable/ic_new"
-    app:tint="@color/photonWhite" />
+    android:elevation="99dp"
+    android:text="@string/tab_drawer_fab_content"
+    android:textColor="@color/photonWhite"
+    app:elevation="99dp"
+    app:borderWidth="0dp"
+    app:icon="@drawable/ic_new"
+    app:iconTint="@color/photonWhite" />

app/src/main/res/values/dimens.xml

@@ -150,10 +150,12 @@
     <!-- Tabs Tray -->
     <dimen name="tab_tray_divider_margin_start">124dp</dimen>
     <dimen name="tab_tray_divider_margin_end">0dp</dimen>
+    <dimen name="tab_tray_top_offset">40dp</dimen>
 
     <!-- Saved Logins Fragment -->
     <dimen name="saved_logins_sort_menu_dropdown_chevron_icon_margin_start">10dp</dimen>
     <dimen name="saved_logins_sort_menu_dropdown_chevron_icon_size">12dp</dimen>
     <dimen name="saved_logins_detail_menu_vertical_padding">5dp</dimen>
 
+
 </resources>

app/src/main/res/values/strings.xml

@@ -442,6 +442,10 @@
     <string name="tabs_header_private_tabs_title">Private tabs</string>
     <!-- Content description (not visible, for screen readers etc.): Add tab button. Adds a news tab when pressed -->
     <string name="add_tab">Add tab</string>
+    <!-- Content description (not visible, for screen readers etc.): Add tab button. Adds a news tab when pressed -->
+    <string name="add_private_tab">Add private tab</string>
+    <!-- Content for FAB when looking at private tabs in the tab drawer -->
+    <string name="tab_drawer_fab_content">Private</string>
     <!-- Content description (not visible, for screen readers etc.): Removes tab from collection button. Removes the selected tab from collection when pressed -->
     <string name="remove_tab_from_collection">Remove tab from collection</string>
     <!-- Content description (not visible, for screen readers etc.): Close tab button. Closes the current session when pressed -->

app/src/main/res/values/styles.xml

@@ -558,7 +558,11 @@
 
     <style name="BottomSheetModal" parent="Widget.Design.BottomSheet.Modal">
         <item name="shapeAppearance">@style/BottomSheetShapeAppearance</item>
-        <item name="behavior_halfExpandedRatio">0.6</item>
-        <item name="behavior_fitToContents">true</item>
+        <item name="behavior_fitToContents">false</item>
+    </style>
+
+    <style name="TabTrayFab" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">
+        <item name="elevation">90dp</item>
+        <item name="android:stateListAnimator">@null</item>
     </style>
 </resources>