search

mozilla-mobile / fenix

⚠️ Fenix (Firefox for Android) moved to a new repository. It is now developed and maintained as part of: https://github.com/mozilla-mobile/firefox-android
https://github.com/mozilla-mobile/firefox-android
Mozilla Public License 2.0
6.47k stars 1.27k forks source link

[Bug] Contrast Issue with disconnected device warnings in 3 dot menu #7504

Closed s-ankur closed 4 years ago

s-ankur commented 4 years ago

Steps to reproduce

Disconnect firefox account login for fenix from accounts.firefox.com open 3 dot menu either in a webpage or in the overview Screenshot_20200104-112810 Screenshot_20200104-112818

Device information

Nightly 200106 06:00 (Build #20060606) 27.0.0, 25da25a0d GV: 73.0a1-20200105094728

┆Issue is synchronized with this Jira Task

brampitoyo commented 4 years ago

@s-ankur @mcarare This problem looks funky.

A couple of observations:

brampitoyo commented 4 years ago

I’d like to get a better understanding of where the problem comes from, to see whether we need to solve it with a new design, or just fix it by making the colour identical to all other list items.

darkwing commented 4 years ago

To repeat:

  1. Pair your phone
  2. Disconnect the pairing from "Manage Devices" on desktop
  3. Force-close the app on phone
  4. This effect should be there
darkwing commented 4 years ago

@AmyYLee What colors would you like use to use for these icons?

AmyYLee commented 4 years ago

I’d like to get a better understanding of where the problem comes from, to see whether we need to solve it with a new design, or just fix it by making the colour identical to all other list items.

Hi, I agree with @brampitoyo about needing more context. So we highlight the settings item if the user has disconnected from their Sync account? I'm wondering if this is really necessary to alert them at the top level of the 3-dot menu. I'm thinking this would be highlighted if the user goes into settings and we notify them that their sync account is disconnected.

darkwing commented 4 years ago

Interesting. So context-wise, yes, the way to trigger this is to connect your account, then disconnect it via the browser, and restart Fenix. IMO showing the indicator on the 3-dot menu is good, as it implies their history and bookmarks may not be in sync. For the purpose of moving forward, however, I'm looking to know what colors we should use for the "Settings" icons and background, as well as the top "Reconnect to resume syncing" header.

Screenshot_20200219-224026

Screenshot_20200219-224054

brampitoyo commented 4 years ago

@darkwing – @AmyYLee and I went through the same set of screens and reached the same conclusion: showing warning in the Main Menu is good.

Unfortunately, I’m not able to create a collection; so instead of linking to one Abstract URL, I will have to link to individual artboards below.

First thing first, on the three-dot icon, we recommend removing the yellow overlay + dot.

Inside the main menu, we prefer a separate menu item called “Reconnect to sync”.

When tapped, this menu item should deeplink to the “Sign in to continue to Firefox Sync” webview. In other words, users will be able to bypass going into Settings, and go straight to the sign in step.

But this could present a few problems:

  1. Is it easy to add a new menu item?
  2. Even though the string is reused from something we already have, will it fit the menu when displayed in different locales?

If this approach isn’t possible, we recommend what you’ve shown: put a warning icon to the side of Settings.

The difference is: we would change the exclamation mark icon into the “avatar warn” icon – the same one used under Settings.

Under Settings, there’s a warning message, too.

This warning will be identical as we have today – same colours for light, dark and private themes.

The only thing we need to tweak here are the colours:

darkwing commented 4 years ago

@magorlick Did you have any thoughts on telemetry for reconnecting to sync or the sync process?

lobontiumira commented 4 years ago

Verified on the 3/2 Nightly build the disconnected messages with HTC 10 (Android 8), Google Pixel (Android 10), and Sony Xperia Z5 Premium (Android 7.1.1), and this is how they look on light theme and dark theme.

@brampitoyo the three-dot icon, the yellow overlay + dot, it is not removed, on light theme is barely visible.

I'll remove the qa-needed label, but not close the issue until we know if the three-dot yellow overlay will be removed or not.

light dark

brampitoyo commented 4 years ago

@softvision-miralobontiu wrote:

…the three-dot icon, the yellow overlay + dot, it is not removed, on light theme is barely visible.

Let’s remove the yellow overlay and dot from all themes. @AmyYLee and I agreed that this issue doesn’t need a special notification dot. The yellow warning on its own will be enough.