From 2f13c3f9f2c2e83a938663490c723fc3b40d47ee Mon Sep 17 00:00:00 2001
From: Sawyer Blatz <sdblatz@gmail.com>
Date: Thu, 28 Feb 2019 08:36:45 -0800
Subject: [PATCH] Closes #630: Polishes tab UI (#686)

---
 .../mozilla/fenix/home/tabs/TabsAdapter.kt    |   7 +-
 .../main/res/drawable/session_background.xml  |   4 +-
 app/src/main/res/drawable/session_border.xml  |   6 +-
 app/src/main/res/layout/tab_list_row.xml      | 107 ++++++++++--------
 app/src/main/res/values/attrs.xml             |   1 +
 app/src/main/res/values/colors.xml            |   1 +
 app/src/main/res/values/styles.xml            |   2 +
 7 files changed, 69 insertions(+), 59 deletions(-)

diff --git a/app/src/main/java/org/mozilla/fenix/home/tabs/TabsAdapter.kt b/app/src/main/java/org/mozilla/fenix/home/tabs/TabsAdapter.kt
index 3bb998257..2d8468a0d 100644
--- a/app/src/main/java/org/mozilla/fenix/home/tabs/TabsAdapter.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/tabs/TabsAdapter.kt
@@ -13,6 +13,7 @@ import androidx.recyclerview.widget.RecyclerView
 import io.reactivex.Observer
 import kotlinx.android.extensions.LayoutContainer
 import kotlinx.android.synthetic.main.tab_list_row.*
+import org.mozilla.fenix.DefaultThemeManager
 import org.mozilla.fenix.R
 import org.mozilla.fenix.ext.increaseTapArea
 
@@ -85,8 +86,10 @@ class TabsAdapter(private val actionEmitter: Observer<TabsAction>) :
         }
 
         fun updateSelected(selected: Boolean) {
-            item_tab.background = if (selected)
-                view.context.getDrawable(R.drawable.session_border) else null
+            if (selected)
+                DefaultThemeManager.resolveAttribute(R.attr.sessionBorderColor, view.context)
+            else
+                session_card.setCardBackgroundColor(view.context.getColor(android.R.color.transparent))
         }
 
         companion object {
diff --git a/app/src/main/res/drawable/session_background.xml b/app/src/main/res/drawable/session_background.xml
index 827143d2c..3fbf808b1 100644
--- a/app/src/main/res/drawable/session_background.xml
+++ b/app/src/main/res/drawable/session_background.xml
@@ -6,6 +6,6 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
     <solid android:color="@color/photonGrey40" />
     <corners
-        android:bottomLeftRadius="7dp"
-        android:bottomRightRadius="7dp" />
+        android:bottomLeftRadius="8dp"
+        android:bottomRightRadius="8dp" />
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/session_border.xml b/app/src/main/res/drawable/session_border.xml
index 6b8aed892..e329c7c72 100644
--- a/app/src/main/res/drawable/session_border.xml
+++ b/app/src/main/res/drawable/session_border.xml
@@ -4,10 +4,6 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <stroke android:width="2dp"
-        android:color="?attr/sessionBorderColor"/>
-
-    <padding android:left="1dp"  android:top="1dp" android:right="1dp" android:bottom="1dp"/>
-
+    <solid android:color="?attr/sessionBackgroundColor"/>
     <corners android:radius="8dp"/>
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/tab_list_row.xml b/app/src/main/res/layout/tab_list_row.xml
index c9347e3e8..2df39dc02 100644
--- a/app/src/main/res/layout/tab_list_row.xml
+++ b/app/src/main/res/layout/tab_list_row.xml
@@ -1,67 +1,74 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<!-- 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/. -->
+<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/session_card"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginTop="8dp"
     android:layout_marginBottom="8dp"
+    android:clipToPadding="false"
     android:padding="10dp"
-    android:elevation="5dp"
+    app:cardBackgroundColor="?attr/sessionBorderColor"
     app:cardCornerRadius="10dp"
-    android:clipChildren="true">
+    app:cardElevation="5dp"
+    app:cardUseCompatPadding="true">
 
     <androidx.constraintlayout.widget.ConstraintLayout
-            android:background="@drawable/session_border"
-            android:id="@+id/item_tab"
-            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            android:paddingTop="10dp">
+        android:id="@+id/item_tab"
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_margin="2dp"
+        android:background="@drawable/session_border"
+        android:paddingTop="10dp">
 
-        <ImageView android:id="@+id/favicon_image"
-                   android:layout_width="wrap_content"
-                   android:layout_height="wrap_content"
-                   android:src="@drawable/ic_link"
-                   android:tint="@android:color/black"
-                   android:paddingStart="10dp"
-                   android:paddingEnd="10dp"
-                   android:paddingTop="4dp"
-                   app:layout_constraintStart_toStartOf="parent"
-                   app:layout_constraintTop_toTopOf="parent"
-                   android:contentDescription="@string/favicon_content_description"/>
+        <ImageView
+            android:id="@+id/favicon_image"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@string/favicon_content_description"
+            android:paddingStart="10dp"
+            android:paddingEnd="10dp"
+            android:src="@drawable/ic_link"
+            android:tint="@android:color/black"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <TextView android:id="@+id/text_url"
-                  android:textSize="18sp"
-                  android:maxLines="1"
-                  android:ellipsize="end"
-                  android:layout_width="0dp"
-                  android:layout_height="wrap_content"
-                  android:layout_marginBottom="4dp"
-                  app:layout_constraintHorizontal_bias="0"
-                  app:layout_constraintTop_toTopOf="parent"
-                  app:layout_constraintStart_toEndOf="@id/favicon_image"
-                  app:layout_constraintEnd_toStartOf="@id/close_tab_button"/>
+        <TextView
+            android:id="@+id/text_url"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:layout_marginBottom="4dp"
+            android:ellipsize="end"
+            android:maxLines="1"
+            android:textColor="?attr/toolbarTextColor"
+            android:textSize="18sp"
+            app:layout_constraintEnd_toStartOf="@id/close_tab_button"
+            app:layout_constraintHorizontal_bias="0"
+            app:layout_constraintStart_toEndOf="@id/favicon_image"
+            app:layout_constraintTop_toTopOf="parent" />
 
-        <ImageView android:id="@+id/close_tab_button"
-                   android:layout_width="wrap_content"
-                   android:layout_height="wrap_content"
-                   android:src="@drawable/ic_close"
-                   android:paddingEnd="10dp"
-                   android:contentDescription="@string/close_tab"
-                   app:layout_constraintBottom_toBottomOf="@id/text_url"
-                   app:layout_constraintEnd_toEndOf="parent"/>
+        <ImageView
+            android:id="@+id/close_tab_button"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:contentDescription="@string/close_tab"
+            android:paddingEnd="10dp"
+            android:src="@drawable/ic_close"
+            app:layout_constraintBottom_toBottomOf="@id/text_url"
+            app:layout_constraintEnd_toEndOf="parent" />
 
-        <ImageView android:layout_width="0dp"
-                   android:layout_height="100dp"
-                   android:layout_marginStart="1dp"
-                   android:layout_marginEnd="1dp"
-                   android:layout_marginBottom="1dp"
-                   android:background="@drawable/session_background"
-                   app:layout_constraintTop_toBottomOf="@id/text_url"
-                   app:layout_constraintBottom_toBottomOf="parent"
-                   app:layout_constraintStart_toStartOf="parent"
-                   app:layout_constraintEnd_toEndOf="parent"
-                   android:contentDescription="TODO"/>
+        <ImageView
+            android:layout_width="0dp"
+            android:layout_height="100dp"
+            android:background="@drawable/session_background"
+            android:contentDescription="TODO"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/text_url" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.cardview.widget.CardView>
\ No newline at end of file
diff --git a/app/src/main/res/values/attrs.xml b/app/src/main/res/values/attrs.xml
index 41b75ddc3..116f923ca 100644
--- a/app/src/main/res/values/attrs.xml
+++ b/app/src/main/res/values/attrs.xml
@@ -25,6 +25,7 @@
     <attr name="toolbarTextColor" format="reference"/>
     <attr name="navigationBarColorHome" format="reference"/>
     <attr name="homeDividerColor" format="reference" />
+    <attr name="sessionBackgroundColor" format="reference"/>
     <attr name="sessionBorderColor" format="reference"/>
 
     <!-- Search fragment -->
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index ebf95abcb..c9cf92a57 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -33,6 +33,7 @@
     <color name="session_list_empty_bg">#1A665BFD</color>
     <color name="session_list_empty_fg">#544CD9</color>
     <color name="session_list_header">#6D6D6E</color>
+    <color name="session_list_private_header">#4a4671</color>
 
     <color name="private_browsing_primary">#ad3bff</color>
     <color name="private_browsing_top_gradient">#242251</color>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index f8d7ee39e..2b4484c3d 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -27,6 +27,7 @@
         <item name="toolbarWrapperBackground">@drawable/home_search_background_light</item>
         <item name="toolbarTextColor">@color/search_text</item>
         <item name="homeDividerColor">@color/photonGrey30</item>
+        <item name="sessionBackgroundColor">@color/photonWhite</item>
         <item name="sessionBorderColor">@color/session_border_color</item>
 
         <!-- Search fragment colors -->
@@ -71,6 +72,7 @@
         <item name="toolbarWrapperBackground">@drawable/home_search_background_private</item>
         <item name="toolbarTextColor">@color/off_white</item>
         <item name="homeDividerColor">@color/search_private_background</item>
+        <item name="sessionBackgroundColor">@color/session_list_private_header</item>
         <item name="sessionBorderColor">@color/private_browsing_primary</item>
 
         <!-- Search fragment colors -->