diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/SyncedTabsController.kt b/app/src/main/java/org/mozilla/fenix/tabtray/SyncedTabsController.kt index 8fbb87c63..0c6a02a57 100644 --- a/app/src/main/java/org/mozilla/fenix/tabtray/SyncedTabsController.kt +++ b/app/src/main/java/org/mozilla/fenix/tabtray/SyncedTabsController.kt @@ -50,7 +50,7 @@ class SyncedTabsController( .collect { mode -> when (mode) { is TabTrayDialogFragmentState.Mode.Normal -> { - concatAdapter.addAdapter(0, adapter) + concatAdapter.addAdapter(adapter) } is TabTrayDialogFragmentState.Mode.MultiSelect -> { concatAdapter.removeAdapter(adapter) @@ -63,8 +63,7 @@ class SyncedTabsController( override fun displaySyncedTabs(syncedTabs: List) { scope.launch { val tabsList = listOf(SyncedTabsAdapter.AdapterItem.Title) + syncedTabs.toAdapterList() - // Reverse layout for TabTrayView which does things backwards. - adapter.submitList(tabsList.reversed()) + adapter.submitList(tabsList) } } diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt index 3b64217f4..c92964508 100644 --- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt +++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayDialogFragment.kt @@ -22,7 +22,6 @@ import androidx.navigation.fragment.navArgs import androidx.recyclerview.widget.LinearLayoutManager import androidx.recyclerview.widget.RecyclerView import kotlinx.android.synthetic.main.component_tabstray.view.* -import kotlinx.android.synthetic.main.component_tabstray_fab.view.* import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.* import kotlinx.android.synthetic.main.fragment_tab_tray_dialog.view.* import kotlinx.coroutines.Dispatchers @@ -67,8 +66,7 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), UserInteractionHandler private lateinit var tabTrayDialogStore: TabTrayDialogFragmentStore private val snackbarAnchor: View? - get() = if (tabTrayView.fabView.new_tab_button.isVisible) tabTrayView.fabView.new_tab_button - else null + get() = null private val collectionStorageObserver = object : TabCollectionStorage.Observer { override fun onCollectionCreated(title: String, sessions: List) { @@ -158,6 +156,7 @@ class TabTrayDialogFragment : AppCompatDialogFragment(), UserInteractionHandler if (newConfig.orientation != currentOrientation) { tabTrayView.dismissMenu() tabTrayView.expand() + tabTrayView.updateTabsTrayLayout() currentOrientation = newConfig.orientation } } diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt index 4963c044e..a52055e79 100644 --- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt +++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayView.kt @@ -20,12 +20,11 @@ import androidx.core.view.updatePadding import androidx.lifecycle.LifecycleOwner import androidx.lifecycle.lifecycleScope import androidx.recyclerview.widget.ConcatAdapter -import androidx.recyclerview.widget.LinearLayoutManager +import androidx.recyclerview.widget.GridLayoutManager import com.google.android.material.bottomsheet.BottomSheetBehavior import com.google.android.material.tabs.TabLayout import kotlinx.android.extensions.LayoutContainer import kotlinx.android.synthetic.main.component_tabstray.view.* -import kotlinx.android.synthetic.main.component_tabstray_fab.view.* import kotlinx.android.synthetic.main.tabs_tray_tab_counter.* import kotlinx.coroutines.Dispatchers.Main import kotlinx.coroutines.delay @@ -68,10 +67,6 @@ class TabTrayView( private val filterTabs: (Boolean) -> Unit ) : LayoutContainer, TabLayout.OnTabSelectedListener { val lifecycleScope = lifecycleOwner.lifecycleScope - val fabView = LayoutInflater.from(container.context) - .inflate(R.layout.component_tabstray_fab, container, true) - - private val hasAccessibilityEnabled = container.context.settings().accessibilityServicesEnabled val view = LayoutInflater.from(container.context) .inflate(R.layout.component_tabstray, container, true) @@ -100,17 +95,8 @@ class TabTrayView( init { components.analytics.metrics.track(Event.TabsTrayOpened) - toggleFabText(isPrivate) - behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() { override fun onSlide(bottomSheet: View, slideOffset: Float) { - if (interactor.onModeRequested() is Mode.Normal && !hasAccessibilityEnabled) { - if (slideOffset >= SLIDE_OFFSET) { - fabView.new_tab_button.show() - } else { - fabView.new_tab_button.hide() - } - } } override fun onStateChanged(bottomSheet: View, newState: Int) { @@ -163,11 +149,8 @@ class TabTrayView( ) } + updateTabsTrayLayout() view.tabsTray.apply { - layoutManager = LinearLayoutManager(container.context).apply { - reverseLayout = true - stackFromEnd = true - } adapter = concatAdapter tabsTouchHelper = TabsTouchHelper( @@ -180,14 +163,11 @@ class TabTrayView( tabsAdapter.tabTrayInteractor = interactor tabsAdapter.onTabsUpdated = { // Put the 'Add to collections' button after the tabs have loaded. - concatAdapter.addAdapter(0, collectionsButtonAdapter) + concatAdapter.addAdapter(collectionsButtonAdapter) // Put the Synced Tabs adapter at the end. - concatAdapter.addAdapter(0, syncedTabsController.adapter) + concatAdapter.addAdapter(syncedTabsController.adapter) - if (hasAccessibilityEnabled) { - tabsAdapter.notifyDataSetChanged() - } if (!hasLoaded) { hasLoaded = true scrollToTab(view.context.components.core.store.state.selectedTabId) @@ -235,24 +215,24 @@ class TabTrayView( } } - adjustNewTabButtonsForNormalMode() + adjustNewTabButtonForNormalMode() + } + + private fun gridViewNumberOfCols(context: Context): Int { + val displayMetrics = context.resources.displayMetrics + val dpWidth = displayMetrics.widthPixels / displayMetrics.density + val columnWidthDp = 190 + val columnCount = (dpWidth / columnWidthDp).toInt() + return if (columnCount >= 2) columnCount else 2 } private fun handleTabClicked(tab: SyncTab) { interactor.onSyncedTabClicked(tab) } - private fun adjustNewTabButtonsForNormalMode() { + private fun adjustNewTabButtonForNormalMode() { view.tab_tray_new_tab.apply { - isVisible = hasAccessibilityEnabled - setOnClickListener { - sendNewTabEvent(isPrivateModeSelected) - interactor.onNewTabTapped(isPrivateModeSelected) - } - } - - fabView.new_tab_button.apply { - isVisible = !hasAccessibilityEnabled + visibility = View.VISIBLE setOnClickListener { sendNewTabEvent(isPrivateModeSelected) interactor.onNewTabTapped(isPrivateModeSelected) @@ -270,6 +250,24 @@ class TabTrayView( components.analytics.metrics.track(eventToSend) } + fun updateTabsTrayLayout() { + view.tabsTray.apply { + val gridLayoutManager = GridLayoutManager(container.context, gridViewNumberOfCols(container.context)) + gridLayoutManager.spanSizeLookup = object : GridLayoutManager.SpanSizeLookup() { + override fun getSpanSize(position: Int): Int { + val numTabs = tabsAdapter.itemCount + return if (position < numTabs) { + 1 + } else { + gridViewNumberOfCols(container.context) + } + } + } + + layoutManager = gridLayoutManager + } + } + fun expand() { behavior.state = BottomSheetBehavior.STATE_EXPANDED } @@ -286,7 +284,6 @@ class TabTrayView( } override fun onTabSelected(tab: TabLayout.Tab?) { - toggleFabText(isPrivateModeSelected) filterTabs.invoke(isPrivateModeSelected) toggleSaveToCollectionButton(isPrivateModeSelected) @@ -337,7 +334,6 @@ class TabTrayView( toggleUIMultiselect(multiselect = true) - fabView.new_tab_button.isVisible = false view.tab_tray_new_tab.isVisible = false view.collect_multi_select.isVisible = state.mode.selectedItems.isNotEmpty() @@ -410,7 +406,7 @@ class TabTrayView( counter_text.text = updateTabCounter(browserState.normalTabs.size) updateTabCounterContentDescription(browserState.normalTabs.size) - adjustNewTabButtonsForNormalMode() + adjustNewTabButtonForNormalMode() } private fun toggleUIMultiselect(multiselect: Boolean) { @@ -514,18 +510,6 @@ class TabTrayView( menu?.dismiss() } - private 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) - } - } - fun onBackPressed(): Boolean { return interactor.onBackPressed() } @@ -541,13 +525,7 @@ class TabTrayView( val selectedBrowserTabIndex = tabs .indexOfFirst { it.id == sessionId } - // We offset the tab index by the number of items in the other adapters. - // We add the offset, because the layoutManager is initialized with `reverseLayout`. - val recyclerViewIndex = selectedBrowserTabIndex + - collectionsButtonAdapter.itemCount + - syncedTabsController.adapter.itemCount - - layoutManager?.scrollToPosition(recyclerViewIndex) + layoutManager?.scrollToPosition(selectedBrowserTabIndex) } } diff --git a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt index ee9abd086..eb1526a85 100644 --- a/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt +++ b/app/src/main/java/org/mozilla/fenix/tabtray/TabTrayViewHolder.kt @@ -57,7 +57,6 @@ class TabTrayViewHolder( itemView.findViewById(R.id.mozac_browser_tabstray_thumbnail) @VisibleForTesting - internal val urlView: TextView? = itemView.findViewById(R.id.mozac_browser_tabstray_url) private val playPauseButtonView: ImageButton = itemView.findViewById(R.id.play_pause_button) override var tab: Tab? = null @@ -75,7 +74,6 @@ class TabTrayViewHolder( // Basic text updateTitle(tab) - updateUrl(tab) updateCloseButtonDescription(tab.title) // Drawables and theme @@ -155,24 +153,6 @@ class TabTrayViewHolder( titleView.text = title } - private fun updateUrl(tab: Tab) { - // Truncate to MAX_URI_LENGTH to prevent the UI from locking up for - // extremely large URLs such as data URIs or bookmarklets. The same - // is done in the toolbar and awesomebar: - // https://github.com/mozilla-mobile/fenix/issues/1824 - // https://github.com/mozilla-mobile/android-components/issues/6985 - urlView?.apply { - text = - if (context.settings().shouldStripUrl) { - tab.url - .toShortUrl(itemView.context.components.publicSuffixList) - .take(MAX_URI_LENGTH) - } else { - tab.url.take(MAX_URI_LENGTH) - } - } - } - @VisibleForTesting internal fun updateBackgroundColor(isSelected: Boolean) { val color = if (isSelected) { diff --git a/app/src/main/res/layout/component_tabstray.xml b/app/src/main/res/layout/component_tabstray.xml index ca2689b4a..b29fa5057 100644 --- a/app/src/main/res/layout/component_tabstray.xml +++ b/app/src/main/res/layout/component_tabstray.xml @@ -135,7 +135,7 @@ android:layout_height="48dp" android:background="?android:attr/selectableItemBackgroundBorderless" android:contentDescription="@string/add_tab" - android:visibility="gone" + android:visibility="visible" app:layout_constraintBottom_toBottomOf="@id/tab_layout" app:layout_constraintEnd_toStartOf="@id/tab_tray_overflow" app:layout_constraintTop_toTopOf="@id/tab_layout" diff --git a/app/src/main/res/layout/component_tabstray_fab.xml b/app/src/main/res/layout/component_tabstray_fab.xml deleted file mode 100644 index 2e9ac3a17..000000000 --- a/app/src/main/res/layout/component_tabstray_fab.xml +++ /dev/null @@ -1,22 +0,0 @@ - - - diff --git a/app/src/main/res/layout/tab_tray_item.xml b/app/src/main/res/layout/tab_tray_item.xml index b3d9d3ddf..0659f01c0 100644 --- a/app/src/main/res/layout/tab_tray_item.xml +++ b/app/src/main/res/layout/tab_tray_item.xml @@ -4,9 +4,10 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> @@ -15,22 +16,22 @@ android:id="@+id/play_pause_button" android:layout_width="24dp" android:layout_height="24dp" - android:layout_marginStart="80dp" - android:layout_marginTop="4dp" + android:layout_marginTop="30dp" + android:layout_marginEnd="5dp" android:background="?attr/selectableItemBackgroundBorderless" android:contentDescription="@string/mozac_feature_media_notification_action_pause" android:elevation="10dp" android:visibility="gone" - app:layout_constraintStart_toStartOf="@id/mozac_browser_tabstray_card" + app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/play_with_background" /> - - + app:layout_constraintStart_toStartOf="parent" + app:layout_constraintTop_toTopOf="parent" /> 40dp - 92dp - 69dp + 125dp + 130dp 10dp