Downloads warning styling improvements (use moz-message-bar)

In #41718 (closed) and #41800 (closed) we added a download warning to about:downloads and places.xhtml.

In the merge request we (cc @donuts @ma1) weren't quite happy with the styling:

1. The Library button has different old styling. This is just because the default button styling is not in scope. I'm not sure it is worth importing all those button styling rules.
2. The icon is center aligned with the message box, rather than aligned with the bold title. The mozilla message-bar element doesn't have an easy way to control this because the icon lives in a shadow root, so doesn't share the styling rules with the rest of the content.

In the first case, I think we can probably leave this until mozilla imports the common.css styling into places.xhtml, or just re-implements that since it is pretty old. The (possibly-inactive) bugzilla 1788947 may be relevant.

In the latter case, it is do-able by us if we modify the <message-bar> widget code, but mozilla might also be interested in doing this if they want to start using the widget in a similar way. E.g. in about:preferences there are some multi-line message boxes where they might want to eventually use this.

added UX label

marked this issue as related to #41718 (closed)

marked this issue as related to #41800 (closed)

added 13.0 stable label

added Backlog label

added Desktop label

added Feature label

removed 13.0 stable label

added 13.5 stable Roadmap::Future labels

removed Backlog label

removed 13.5 stable label

added 14.0 stable 14.5 stable labels

Upstream added moz-message-bar, which might help us address part of this if we switch to that.

Actually, it seems message-bar was removed entirely.

I'll see if moz-message-bar entirely resolves this issue, otherwise I'll split the transition from message-bar to moz-message-bar into a separate issue.

@donuts I've had a look at moz-message-bar and it is not a direct replacement for the message-bar element we currently use.

Here are a few screenshots that show what a quick conversion to moz-message-bar looks like.

In about:downloads:

In the "Library" window (bookmarks window Ctlr+Shift+O):

In the downloads panel:

First thing to note is that it doesn't fix the button styling in the "Library" window, but it does address the icon alignment for us.

A few questions:

1. Do we want to switch to moz-message-bar or manage our own component?
2. Do we want to also switch the downloads panel to use this style? Currently it is styled using its own rules, but we could use moz-message-bar here as well. It would be easier to maintain if all three locations for the message use the same layout.
3. Do we want to add a full-stop to the end of "Be careful opening downloads"? I think it might help with readability when the body text is on the same line. It may have an effect on screen readers (would have to check).
4. We would have to modify moz-message-bar to keep the "Tails" string as a link to the Tails website. It is do-able, but it would require a small amount of maintenance with each ESR since it is mozilla code. Is it worth it?
5. Do we want a warning icon instead of the "info" icon?
6. Any other tweaks to make?

1. Do we want to switch to moz-message-bar or manage our own component?

Let's use the moz component for ease of maintainability, please.

2. Do we want to also switch the downloads panel to use this style? Currently it is styled using its own rules, but we could use moz-message-bar here as well. It would be easier to maintain if all three locations for the message use the same layout.

Yes, that makes sense to me too.

3. Do we want to add a full-stop to the end of "Be careful opening downloads"? I think it might help with readability when the body text is on the same line. It may have an effect on screen readers (would have to check).

I believe Firefox's house style forgoes periods in titles (including in message bars): https://acorn.firefox.com/latest/components/message-bar-V5RTUg0H

4. We would have to modify moz-message-bar to keep the "Tails" string as a link to the Tails website. It is do-able, but it would require a small amount of maintenance with each ESR since it is mozilla code. Is it worth it?

Is there a "Support link" we could hijack for this purpose instead (see design docs above), with a call to action to learn more about Tails?

5. Do we want a warning icon instead of the "info" icon?

I'm in two minds as to whether or not this should be considered informational vs a warning, however if we were to go with a warning icon, I think the whole message bar should change to the warning type (i.e. become yellow).

6. Any other tweaks to make?

Yes please – could you remove the upper of the two horizontal rules in the downloads panel please? It's no longer necessary now that the warning itself includes its own perimeter.

@donuts thanks for the feedback, I'll start putting something together then.

Is there a "Support link" we could hijack for this purpose instead (see design docs above), with a call to action to learn more about Tails?

I couldn't find a support page that explains both proxy-leaks via downloaded files, and Tails as a solution, so I don't think we could use a simple "Learn more" that wouldn't be confusing. Maybe it would be worth creating such a page in "about:manual".

Otherwise, I guess we could do

To be safe, open files while offline or use a portable operating system like Tails. Learn more about Tails

I couldn't find a support page that explains both proxy-leaks via downloaded files, and Tails as a solution, so I don't think we could use a simple "Learn more" that wouldn't be confusing. Maybe it would be worth creating such a page in "about:manual".

This appears to be another case of there being relevant content on the support portal that isn't present on the manual:

https://support.torproject.org/faq/staying-anonymous/

However the text here doesn't mention Tails, but does recommend Dangerzone for PDFs instead.

To be safe, open files while offline or use a portable operating system like Tails. Learn more about Tails

I think this is the way to go, for now. Thanks!

added FF128-esr label

assigned to @henry

changed title from Downloads warning styling improvements to Downloads warning styling improvements (use moz-message-bar)

mentioned in issue #42616 (closed)

marked this issue as related to #42616 (closed)

removed Roadmap::Future label

added Doing label

marked this issue as related to #43072 (closed)

mentioned in issue #43072 (closed)

mentioned in merge request !1119 (merged)

closed

removed 14.5 stable label

marked this issue as related to tor-browser-build#41215 (closed)