Changed sync toolbar UI to make errors more prominent

[michalrentka]

Added alert icon and colors to sync toolbar based on consecutive error count

[michalrentka]

@dstillman, @yexingsha I wanted to make sync errors a bit more prominent if there are consecutive errors. For now I just tried adding a colored icon. Yellow "!" icon for 3 consecutive errors, red "!" icon for 5 consecutive errors and "medium" weight font. At first I wanted to make bigger changes but I didn't want to make it too annoying. I don't distinguish between error types now, I guess more important errors could go straight to red.

Here's how it looks for single / two errors:

3 - 4 errors:
5+ errors:
One more thing could be to add a small yellow / red line to the error popup like this:

[yexingsha]

I wonder what is the goal of this change—if we are trying to draw attention to errors, wouldn't it be better to make important errors more prominent at their first occurrence so that users can take action right away? Or is there a case where some errors might be resolved on their own, so that we don't need to draw attention to them until 3 or more consecutive errors happen?

As to the design, I think the red/yellow icons work okay on iPadOS. How would they look on iOS?

[michalrentka]

I wonder what is the goal of this change—if we are trying to draw attention to errors, wouldn't it be better to make important errors more prominent at their first occurrence so that users can take action right away? Or is there a case where some errors might be resolved on their own, so that we don't need to draw attention to them until 3 or more consecutive errors happen?

As to the design, I think the red/yellow icons work okay on iPadOS. How would they look on iOS?

@yexingsha sometimes we see reports on forums from users who send us their logs and we see a lot of (I think I’ve seen like 50+) sync issues being ignored. While those sync issues didn’t cause the reported issue, at least part of their library is not syncing properly. So the idea was to bring attention to recurring issues so that people don’t loose data eventually. Some issues might go away, some can be solved by the user, other need to be reported to us.

[yexingsha]

I see, thanks for the explanation! I think errors should be displayed according to their importance (in other words, whether the user needs to take immediate action), but it does make sense for some errors to become more important as they reoccur.

[michalrentka]

It's quite hard to actually know which errors need immediate action and others don't, some can be quite random. That's why I went with recurring over trying to categorise errors, just to let the user know that something is wrong and it hasn't resolved itself. @mvasilak, @dstillman do you think we should try to categorise errors and show yellow / red based on that? Or do I just increase the recurring limits maybe?

[michalrentka]

I increased the limits a bit, for now let's just do recurring check, we can improve later. We might get some feedback as well.

[mvasilak]

Isn't cleaner to use a UIButton.Configuration with also an image where it is needed, and proper imagePlacement, rather than a stack view? That way the button retains its text for accesibility, which is lost with this implementation in case of warning.

Furthermore, anInt based enum, e.g. WarningLevel, with computed property color: UIColor? could clarify further.

[michalrentka]

Isn't cleaner to use a UIButton.Configuration with also an image where it is needed, and proper imagePlacement, rather than a stack view? That way the button retains its text for accesibility, which is lost with this implementation in case of warning.

You're right, I updated to use proper UIButton API.

Furthermore, anInt based enum, e.g. WarningLevel, with computed property color: UIColor? could clarify further.

Not sure the WarningLevel changes much in this case, but I added it :)

696ec22