Improve UI for credential entries in list view (#2108)

<!--
Note: This checklist is a reminder of our shared engineering expectations. 
The items in Bold are required
If your PR involves UI changes:
    1. Upload screenshots or screencasts that illustrate the changes before / after
    2. Add them under the UI changes section (feel free to add more columns if needed)
    3. Make sure these changes are tested in API 23 and API 26
If your PR does not involve UI changes, you can remove the **UI changes** section
-->

Task/Issue URL: https://app.asana.com/0/0/1202659292537113/f

### Description
Improves the look of the individual entries in the credential management list.

- Styles the title and subtitle to match designs
- Shows the title if it exists, otherwise falls back to showing the domain

### Steps to test this PR

- [x] Save a few autofill entries
- [x] Visit the credential management screen; verify the style of the title and subtitle look ok
- [x] Edit a credential and add a title; return to the listing page
- [x] Verify the title is shown instead of the domain
- [x] Re-edit the credential to remove the title and return to the listing page
- [x] Verify the domain is shown instead of a title

Author: CDRussell

autofill/autofill-impl/src/main/java/com/duckduckgo/autofill/AutofillDomainFormatter.kt

@@ -18,15 +18,15 @@ package com.duckduckgo.autofill
 
 import androidx.core.net.toUri
 import com.duckduckgo.app.global.baseHost
-import com.duckduckgo.di.scopes.FragmentScope
+import com.duckduckgo.di.scopes.AppScope
 import com.squareup.anvil.annotations.ContributesBinding
 import javax.inject.Inject
 
 interface AutofillDomainFormatter {
     fun extractDomain(domain: String?): String?
 }
 
-@ContributesBinding(FragmentScope::class)
+@ContributesBinding(AppScope::class)
 class AutofillDomainFormatterDomainNameOnly @Inject constructor() : AutofillDomainFormatter {
     override fun extractDomain(domain: String?): String? {
         val domain = domain?.toUri()?.baseHost

autofill/autofill-impl/src/main/java/com/duckduckgo/autofill/ui/credential/management/AutofillManagementRecyclerAdapter.kt

@@ -32,6 +32,7 @@ class AutofillManagementRecyclerAdapter(
     val lifecycleOwner: LifecycleOwner,
     val faviconManager: FaviconManager,
     val grouper: CredentialGrouper,
+    val titleExtractor: LoginCredentialTitleExtractor,
     val onCredentialSelected: (credentials: LoginCredentials) -> Unit,
     val onCopyUsername: (credentials: LoginCredentials) -> Unit,
     val onCopyPassword: (credentials: LoginCredentials) -> Unit
@@ -66,8 +67,8 @@ class AutofillManagementRecyclerAdapter(
     private fun onBindViewHolderCredential(position: Int, viewHolder: CredentialsViewHolder) {
         val item = listItems[position] as ListItem.Credential
         with(viewHolder.binding) {
-            username.text = item.credentials.username
-            domain.text = item.credentials.domain
+            title.text = item.credentials.username
+            subtitle.text = titleExtractor.extract(item.credentials)
             root.setOnClickListener { onCredentialSelected(item.credentials) }
             updateFavicon(item.credentials)
         }

autofill/autofill-impl/src/main/java/com/duckduckgo/autofill/ui/credential/management/LoginCredentialTitleExtractor.kt

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2022 DuckDuckGo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.duckduckgo.autofill.ui.credential.management
+
+import com.duckduckgo.autofill.AutofillDomainFormatter
+import com.duckduckgo.autofill.domain.app.LoginCredentials
+import com.duckduckgo.di.scopes.FragmentScope
+import com.squareup.anvil.annotations.ContributesBinding
+import javax.inject.Inject
+
+interface LoginCredentialTitleExtractor {
+    fun extract(credential: LoginCredentials): String
+}
+
+@ContributesBinding(FragmentScope::class)
+class TitleOrDomainExtractor @Inject constructor(private val domainExtractor: AutofillDomainFormatter) : LoginCredentialTitleExtractor {
+
+    override fun extract(credential: LoginCredentials): String {
+        val title = credential.domainTitle
+        if (title != null && title.isNotBlank()) {
+            return title
+        }
+
+        return domainExtractor.extractDomain(credential.domain) ?: ""
+    }
+}

autofill/autofill-impl/src/main/java/com/duckduckgo/autofill/ui/credential/management/viewing/AutofillManagementListMode.kt

@@ -35,6 +35,7 @@ import com.duckduckgo.autofill.impl.databinding.FragmentAutofillManagementListMo
 import com.duckduckgo.autofill.ui.credential.management.AutofillManagementRecyclerAdapter
 import com.duckduckgo.autofill.ui.credential.management.AutofillSettingsViewModel
 import com.duckduckgo.autofill.ui.credential.management.CredentialGrouper
+import com.duckduckgo.autofill.ui.credential.management.LoginCredentialTitleExtractor
 import com.duckduckgo.di.scopes.FragmentScope
 import com.duckduckgo.mobile.android.ui.view.quietlySetIsChecked
 import dagger.android.support.AndroidSupportInjection
@@ -54,6 +55,9 @@ class AutofillManagementListMode : Fragment() {
     @Inject
     lateinit var credentialGrouper: CredentialGrouper
 
+    @Inject
+    lateinit var titleExtractor: LoginCredentialTitleExtractor
+
     val viewModel by lazy {
         ViewModelProvider(requireActivity(), viewModelFactory)[AutofillSettingsViewModel::class.java]
     }
@@ -129,6 +133,7 @@ class AutofillManagementListMode : Fragment() {
             this,
             faviconManager = faviconManager,
             grouper = credentialGrouper,
+            titleExtractor = titleExtractor,
             onCredentialSelected = this::onCredentialsSelected,
             onCopyUsername = this::onCopyUsername,
             onCopyPassword = this::onCopyPassword,

autofill/autofill-impl/src/main/res/layout/item_row_autofill_credentials_management_screen.xml

@@ -35,28 +35,30 @@
         app:layout_constraintTop_toTopOf="parent" />
 
     <TextView
-        android:id="@+id/domain"
+        android:id="@+id/title"
         android:layout_width="0dp"
         android:layout_height="0dp"
         tools:text="duckduckgo.com"
         android:textColor="?normalTextColor"
+        android:textSize="16sp"
         android:layout_marginStart="12dp"
         app:layout_constraintStart_toEndOf="@id/favicon"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@id/username"
+        app:layout_constraintBottom_toTopOf="@id/subtitle"
         app:layout_constraintTop_toTopOf="@id/favicon" />
 
     <TextView
-        android:id="@+id/username"
+        android:id="@+id/subtitle"
         android:layout_width="0dp"
         android:layout_height="wrap_content"
         android:layout_gravity="bottom"
         android:gravity="center_vertical"
-        android:textColor="?normalTextColor"
+        android:textColor="?attr/autofillCredentialListSubtitleColor"
+        android:textSize="14sp"
         app:layout_constraintBottom_toBottomOf="@id/favicon"
-        app:layout_constraintEnd_toEndOf="@id/domain"
-        app:layout_constraintStart_toStartOf="@id/domain"
-        app:layout_constraintTop_toBottomOf="@id/domain"
+        app:layout_constraintEnd_toEndOf="@id/title"
+        app:layout_constraintStart_toStartOf="@id/title"
+        app:layout_constraintTop_toBottomOf="@id/title"
         tools:text="username" />
 
 </androidx.constraintlayout.widget.ConstraintLayout>

autofill/autofill-impl/src/test/java/com/duckduckgo/autofill/ui/credential/management/TitleOrDomainExtractorTest.kt

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2022 DuckDuckGo
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.duckduckgo.autofill.ui.credential.management
+
+import com.duckduckgo.autofill.AutofillDomainFormatter
+import com.duckduckgo.autofill.domain.app.LoginCredentials
+import org.junit.Assert.assertEquals
+import org.junit.Test
+import org.mockito.kotlin.mock
+import org.mockito.kotlin.never
+import org.mockito.kotlin.verify
+
+class TitleOrDomainExtractorTest {
+
+    private val domainFormatter: AutofillDomainFormatter = mock()
+    private val testee = TitleOrDomainExtractor(domainFormatter)
+
+    @Test
+    fun whenTitleIsNullThenDomainIsUsed() {
+        val result = testee.extract(creds(title = null, domain = "example.com"))
+        verify(domainFormatter).extractDomain("example.com")
+    }
+
+    @Test
+    fun whenTitleIsEmptyThenDomainIsUsed() {
+        val result = testee.extract(creds(title = "", domain = "example.com"))
+        verify(domainFormatter).extractDomain("example.com")
+    }
+
+    @Test
+    fun whenTitleIsBlankThenDomainIsUsed() {
+        val result = testee.extract(creds(title = "  ", domain = "example.com"))
+        verify(domainFormatter).extractDomain("example.com")
+    }
+
+    @Test
+    fun whenTitleIsPopulatedThenDomainNotUsed() {
+        val result = testee.extract(creds(title = "Site", domain = "example.com"))
+        assertEquals("Site", result)
+        verify(domainFormatter, never()).extractDomain("example.com")
+    }
+
+    private fun creds(title: String?, domain: String?) = LoginCredentials(
+        domainTitle = title,
+        domain = domain,
+        username = null,
+        password = null
+    )
+
+}

common-ui/src/main/res/values/attrs-autofill.xml

@@ -17,4 +17,5 @@
 <resources>
     <attr name="autofillDialogTitleColor" format="color" />
     <attr name="autofillDialogOnboardingExplanationColor" format="color" />
+    <attr name="autofillCredentialListSubtitleColor" format="color" />
 </resources>

common-ui/src/main/res/values/themes.xml

@@ -146,6 +146,7 @@
 
         <item name="autofillDialogTitleColor">@color/white</item>
         <item name="autofillDialogOnboardingExplanationColor">@color/gray50</item>
+        <item name="autofillCredentialListSubtitleColor">@color/paleBrownishGray</item>
     </style>
 
     <style name="AppTheme.Dark" parent="AppTheme.BaseDark" />
@@ -269,6 +270,7 @@
 
         <item name="autofillDialogTitleColor">@color/gray90</item>
         <item name="autofillDialogOnboardingExplanationColor">@color/gray70</item>
+        <item name="autofillCredentialListSubtitleColor">@color/brownishGrayTwo</item>
         <item name="appTPHeaderBackground">@color/light_blue</item>
     </style>