Skip to content

Commit

Permalink
Apply max-width constraints to autofill dialogs' contents (#3773)
Browse files Browse the repository at this point in the history 
<!--
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)
If your PR does not involve UI changes, you can remove the **UI
changes** section

At a minimum, make sure your changes are tested in API 23 and one of the
more recent API levels available.
-->

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

### Description
We want to apply a max-width constraint to the contents of the autofill
dialogs. Some of the autofill dialogs had different ways of constraining
content before, and others had none; this PR consolidates them all into
using this approach:

- Guideline left set to 10% from left edge of dialog, guideline right
set to 10% from right edge of dialog
- Autofill dialog content can use the remaining 80% of dialog width, up
to max of `480dp`

ℹ️ Note for reviewing the PR: 
- a lot of the _changes_ are caused by indentation as views are now
inside another view group
- tip: hide whitespace differences to see only what's actually changed,
ignoring the change indentation
<img width="249" alt="Screenshot 2023-10-31 at 12 34 27"
src="https://github.com/duckduckgo/Android/assets/1336281/f19f99f0-6b02-4d3a-9810-4d2a4719432c">


### Steps to test this PR

_Save login prompt_
- [x] Visit https://fill.dev/form/login-simple and enter username
[`abcd`] and password (>= 4 chars)
- [x] Verify save prompt looks ok

_Select login prompt_
- [x] Visit https://fill.dev/form/login-simple again
- [x] verify prompt to login with saved credential looks ok

_Update login prompt_
- [x] Visit https://fill.dev/form/login-simple again and dismiss any
prompts to use a saved login
- [x] Instead, enter same username as before `abcd` and a new password
- [x] Verify the update login prompt looks ok

_Generate password prompt_
- [x] Visit https://fill.dev/form/registration-email and tap on password
field
- [x] Verify generate password prompts looks ok

_Email protection in-context signup_ 
- [x] Visit https://fill.dev/form/registration-email when you're **not**
signed into email protection (requires device to be in English locale)
- [x] Tap on grey Dax in email field; verify the prompt to sign up for
email protection looks ok

_Email protection, signed in state_
- [x] Sign into email protection (doesn't matter how you sign in,
in-context or normal approach from settings)
- [x] Visit https://fill.dev/form/registration-email again, and tap on
email field
- [x] Verify the prompt to use Email Protection looks ok



### UI changes

Screenshots available
[here](https://app.asana.com/0/0/1205842983551006/f) for phones and
tablets, portrait and landscape
  • Loading branch information
@CDRussell
CDRussell authored Oct 31, 2023
1 parent 9367453 commit 43c169b
Show file tree
Hide file tree
Showing 8 changed files with 483 additions and 405 deletions.
163 changes: 91 additions & 72 deletions autofill/autofill-impl/src/main/res/layout/content_autofill_generate_password_dialog.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,86 +28,105 @@
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineStart"
style="@style/AutofillDialogContentGuidelineStart" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineEnd"
style="@style/AutofillDialogContentGuidelineEnd" />

<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/autofillDialogContentContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/dialogTitle"
android:layout_marginTop="40dp"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginEnd="@dimen/keyline_4"
android:text="@string/autofill_password_generation_offer_title"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toTopOf="parent"
app:typography="h2" />
app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@id/guidelineStart"
app:layout_constraintEnd_toEndOf="@id/guidelineEnd">

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/generatedPassword"
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
app:typography="body1_mono"
android:gravity="center_horizontal"
android:layout_marginTop="28dp"
tools:text="abc123ABC456@^*789abc123ABC456@^*789abc123ABC456@^*789"
android:layout_marginBottom="28dp"
android:letterSpacing="0.06"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="@id/copyPasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/dialogTitle"
android:layout_height="wrap_content" />
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/dialogTitle"
android:layout_marginTop="40dp"
android:layout_marginStart="@dimen/keyline_4"
android:layout_marginEnd="@dimen/keyline_4"
android:text="@string/autofill_password_generation_offer_title"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toTopOf="parent"
app:typography="h2" />

<com.duckduckgo.mobile.android.ui.view.button.IconButton
android:id="@+id/copyPasswordButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackgroundBorderless"
android:scaleType="fitCenter"
android:layout_marginStart="10dp"
app:tint="?attr/daxColorPrimaryIcon"
app:srcCompat="@drawable/ic_copy"
app:layout_constraintStart_toEndOf="@id/generatedPassword"
app:layout_constraintTop_toTopOf="@id/generatedPassword"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintBottom_toBottomOf="@id/generatedPassword"
android:contentDescription="@string/credentialManagementEditButtonCopyPassword" />
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/generatedPassword"
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
app:typography="body1_mono"
android:gravity="center_horizontal"
android:layout_marginTop="28dp"
tools:text="abc123ABC456@^*789abc123ABC456@^*789abc123ABC456@^*789"
android:layout_marginBottom="28dp"
android:letterSpacing="0.06"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="@id/copyPasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/dialogTitle"
android:layout_height="wrap_content" />

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/dialogSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:enabled="false"
android:gravity="center_horizontal"
app:layout_constraintWidth_percent="0.75"
app:typography="body2"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/generatedPassword"
android:text="@string/autofill_password_generation_offer_message" />
<com.duckduckgo.mobile.android.ui.view.button.IconButton
android:id="@+id/copyPasswordButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?selectableItemBackgroundBorderless"
android:scaleType="fitCenter"
android:layout_marginStart="10dp"
app:tint="?attr/daxColorPrimaryIcon"
app:srcCompat="@drawable/ic_copy"
app:layout_constraintStart_toEndOf="@id/generatedPassword"
app:layout_constraintTop_toTopOf="@id/generatedPassword"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintBottom_toBottomOf="@id/generatedPassword"
android:contentDescription="@string/credentialManagementEditButtonCopyPassword" />

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/useSecurePasswordButton"
app:buttonSize="large"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:text="@string/autofill_password_generation_offer_accept"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/dialogSubtitle"
app:layout_constraintWidth_percent="0.8" />
<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/dialogSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:enabled="false"
android:gravity="center_horizontal"
app:layout_constraintWidth_percent="0.75"
app:typography="body2"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/generatedPassword"
android:text="@string/autofill_password_generation_offer_message" />

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
android:id="@+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buttonSize="large"
android:text="@string/autofill_password_generation_offer_decline"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/useSecurePasswordButton" />
<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/useSecurePasswordButton"
app:buttonSize="large"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:text="@string/autofill_password_generation_offer_accept"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/dialogSubtitle" />

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
android:id="@+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buttonSize="large"
android:text="@string/autofill_password_generation_offer_decline"
app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
app:layout_constraintTop_toBottomOf="@id/useSecurePasswordButton" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
179 changes: 88 additions & 91 deletions autofill/autofill-impl/src/main/res/layout/content_autofill_save_new_credentials.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,117 +14,114 @@
~ limitations under the License.
-->

<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.ConstraintLayout
style="@style/AutofillDialogRootViewStyle">
<androidx.constraintlayout.widget.ConstraintLayout style="@style/AutofillDialogRootViewStyle">

<ImageView
android:id="@+id/closeButton"
style="@style/AutofillDialogCloseButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F00"
android:orientation="vertical"
app:layout_constraintGuide_percent=".15"/>
style="@style/AutofillDialogContentGuidelineStart" />

<androidx.constraintlayout.widget.Guideline
android:id="@+id/guidelineEnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#F00"
android:orientation="vertical"
app:layout_constraintGuide_percent=".85"/>

<ImageView
android:id="@+id/closeButton"
style="@style/AutofillDialogCloseButton"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
style="@style/AutofillDialogContentGuidelineEnd" />

<LinearLayout
android:id="@+id/siteDetailsContainer"
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/autofillDialogContentContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@id/guidelineStart"
app:layout_constraintTop_toTopOf="parent">
app:layout_constraintEnd_toEndOf="@id/guidelineEnd">

<ImageView
android:id="@+id/favicon"
style="@style/AutofillDialogFaviconStyle"
tools:src="@drawable/ic_dax_icon"/>
<LinearLayout
android:id="@+id/siteDetailsContainer"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

<ImageView
android:id="@+id/favicon"
style="@style/AutofillDialogFaviconStyle"
tools:src="@drawable/ic_dax_icon" />

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/siteName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/keyline_2"
app:typography="h5"
tools:text="duckduckgo.com" />

</LinearLayout>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:id="@+id/siteName"
android:layout_width="wrap_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="@dimen/keyline_2"
app:typography="h5"
tools:text="duckduckgo.com" />

</LinearLayout>

<com.duckduckgo.mobile.android.ui.view.text.DaxTextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="@+id/dialogTitle"
android:breakStrategy="balanced"
android:text="@string/saveLoginDialogTitle"
android:layout_marginTop="@dimen/keyline_5"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
app:layout_constraintStart_toStartOf="@id/guidelineStart"
app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
app:typography="h2" />


<TextView
tools:ignore="DeprecatedWidgetInXml"
android:id="@+id/onboardingSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:text="@string/saveLoginDialogSubtitle"
android:textAlignment="center"
android:textColor="?autofillDialogOnboardingExplanationColor"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
app:layout_constraintStart_toStartOf="@id/saveLoginButton"
app:layout_constraintTop_toBottomOf="@id/dialogTitle"/>

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/saveLoginButton"
android:layout_width="0dp"
app:buttonSize="large"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"
android:text="@string/saveLoginDialogButtonSave"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle"
app:layout_constraintWidth_max="300dp"
app:layout_constraintWidth_percent="0.8"/>

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
android:id="@+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buttonSize="large"
android:text="@string/saveLoginDialogNotNow"
app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
app:layout_constraintStart_toStartOf="@id/saveLoginButton"
app:layout_constraintTop_toBottomOf="@id/saveLoginButton"/>
android:id="@+id/dialogTitle"
android:breakStrategy="balanced"
android:text="@string/saveLoginDialogTitle"
android:layout_marginTop="@dimen/keyline_5"
android:gravity="center_horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
app:typography="h2" />


<TextView
tools:ignore="DeprecatedWidgetInXml"
android:id="@+id/onboardingSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:text="@string/saveLoginDialogSubtitle"
android:textAlignment="center"
android:textColor="?autofillDialogOnboardingExplanationColor"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
app:layout_constraintStart_toStartOf="@id/saveLoginButton"
app:layout_constraintTop_toBottomOf="@id/dialogTitle" />

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
android:id="@+id/saveLoginButton"
android:layout_width="0dp"
app:buttonSize="large"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/keyline_5"
android:text="@string/saveLoginDialogButtonSave"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle" />

<com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
android:id="@+id/cancelButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:buttonSize="large"
android:text="@string/saveLoginDialogNotNow"
app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
app:layout_constraintStart_toStartOf="@id/saveLoginButton"
app:layout_constraintTop_toBottomOf="@id/saveLoginButton" />

</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.core.widget.NestedScrollView>
Expand Down
Loading

0 comments on commit 43c169b

Please sign in to comment.