Fenix: FNX2-16663 ⁃ [Bug] (regression) large gap on "Delete browsing data on quit" screen

[cadeyrn]

Steps to reproduce

1. open the "Delete browsing data on quit" screen

Expected behavior

No large gap because it a) doesn't make sense to waste the space and b) other settings screens don't have such a gap (AFAIK only the view / edit login screens have such a gap and I reported that already as a bug).

Actual behavior

Large gap on the left side of the first option. Probably a regression from #11693. /cc @mcarare

UNITO-UNDERSCORE!20200619-221121!

Device information

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

[hakkikaancaliskan]

This is intended behavior, #11665.

[mcarare]

@cadeyrn As the above comment says, this follows to UX specs here: https://github.com/mozilla-mobile/fenix/issues/11665#issue-640085355.

[cadeyrn]

@mcarare I think this issue should be reopened because even if it follows the mockup it doesn't mean that the mockup does not contain an error. In this case I report an error in the specification.

Please have a look at the other settings screen. Other screens don't have such a gap and introducing such a gap only for one screen is in fact a bug because it breaks the consistency of the design. /cc @brampitoyo - maybe you can comment?

Let's only focus only on the toggle options:

None of these options has such a gap.

The tracking protection settings are an exception - but only because there is an additional icon:

And the icon is another good point. To remove the gap you have to use app:iconSpaceReserved="false". So the property name already makes clear that this space is reserved for icons. And if you don't use an icon there is no reason for the gap.

Also the checkboxes "Open tabs", "Browsing history" and so on are kind of sub options and I know no UX guideline in the world saying that for options with sub options the parent option should be indented, I only know the opposite. At least it should start on the same position on the y axis. Otherwise You would also have to move the checkboxes if you don't want to break with the logic of parent and sub options.

And we also already have an example for that in Fenix:

Here "Show in private sessions" is a sub option of "Show search suggestions" and it starts on the same position on the y axis as the parent option (well, at least almost), but the parent option is not indented.

So this:

… makes really no sense at all. Because it's conflicting both with a) the logic of these options and b) the design of Fenix in not only one way. Also other Mozilla apps like Firefox Lite or Firefox Lockwise don't do this. So it's a consistency break in an even bigger way than only Fenix.

But if you want to keep the new design then it doesn't make sense not to change all the other mentioned places. But I really hope you fix this one instead of "fixing" all the other screens because there is really no user benefit it wasting the spacing for emptiness…

And before someone is saying: "But the Google Material Design Guidelines shows screens with toogle options without icon and with such a gap…": Even Google Chrome does not have gaps for toggle options without icon in their settings screens! WhatsApp or Twitter are other popular examples of apps that don't do this.

(left: Google Chrome, middle: WhatsApp, right: Twitter)

[brampitoyo]

@cadeyrn Stay tuned. I’m checking with our team and will get back to you.