Fenix: FNX2-13521 ⁃ [Bug] large gap in view / edit logins

[cadeyrn]

Steps to reproduce

1. view your saved logins
2. open an entry
3. edit the login

Expected behavior

In step 2 and step 3 there should not be a large gap on the left side. No other settings screen has a gap on the left side at all. There was a similar gap in the sync settings but this was removed a few weegs ago in #10251.

Actual behavior

There is a large gap for no reason on the left side.

/cc @eliserichards since your'e working on the logins feature. Maybe you could include this in your current work while you're working on related issues?

Device information

• Android device: OnePlus 7T Pro McLaren Edition with Oxygen OS 10.0.9 (Android 10)
• Fenix version: master branch revision 7e6116512c354eb1d8524f8922f7970fe155c65c

[AmyYLee]

@cadeyrn Hi, this is part of the layout consistency effort happening in this issue https://github.com/mozilla-mobile/fenix/issues/11572. The gap is intentional as this follows Material design. The other screens need to be updated.

[cadeyrn]

@AmyYLee Such a gap was added on another screen a few days ago and I left a detailed comment:
https://github.com/mozilla-mobile/fenix/issues/11776#issuecomment-646957549

Could you please review this comment? There are strong reasons _not_ do this. Also note that even Google does not follow this "Google Material design guideline" in Google Chrome.

[AmyYLee]

@AmyYLee Such a gap was added on another screen a few days ago and I left a detailed comment:
#11776 (comment)

Could you please review this comment? There are strong reasons _not_ do this. Also note that even Google does not follow this "Google Material design guideline" in Google Chrome.

Hi,

I looked at issue #11776 and @brampitoyo will be looking into this issue. Thanks.

[brampitoyo]

Thanks @cadeyrn. We’ll decide on an alignment policy that applies to all list, and get back to you.

Just to note that our original inspiration was not Chrome’s Settings. It was Android System Settings, where it strongly follows Material Design. It’s not to say that we won’t change that. After all, Material’s suggestions aren’t strict, and many apps (including Google’s own!) break it. But System Settings was our inspiration. It’s a data point to help you understand where our thinking for Fenix Settings came from.

[cadeyrn]

Thanks for the explanation.

It was Android System Settings, where it strongly follows Material Design.

I just checked it on my device (Android 10). There is an important difference: In the system settings there are icons on almost every screen. Even if not every row has an icon on most screens there is at least one icon per screen and it would look bad if the text of some rows would start on the left and the text of other rows more right. But in Fenix the opposite is true. In Fenix most screens do _not_ have icons at all and then it looks wrong to have such gaps. If you really want to follow this guideline maybe you could add more icons to Fenix? Then it would make much more sense. In fact this gap is space reserved for icons and if there are no icons at all it should be treated different than screens with icons.

[cadeyrn]

Since the changes on the other screens it no longer makes sense to keep this issue open.

(I "love" Github for the childish behaviour of some members, who, in revenge for one negative reaction, randomly rate various comments from one badly. And yes, I know for sure that _cannotbeblank_ did this a few minutes after he got a reaction for a reason. Unfortunately not a single case here.)

[brampitoyo]

@cadeyrn I want to point out how important your observation on https://github.com/mozilla-mobile/fenix/issues/11572#issuecomment-649252539 is:

In the system settings there are icons on almost every screen […]

But in Fenix the opposite is true. In Fenix most screens do not have icons at all and then it looks wrong to have such gaps.

If you really want to follow this guideline maybe you could add more icons to Fenix? Then it would make much more sense.

Our user studies have shown that icons help comprehension (although text labelling is still the main way to “read” about what’s under each list item). So let’s think about more places where we can introduce more icons.

[cadeyrn]

@brampitoyo Do you need a separate issue to track this (since this one is already closed and was about something different) or is this already on an internal list?