1680755 - Invitation details dialog toolbar not correctly themed with LW-themes

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Russ Hansen]

Attachment: Unreadable toolbar in dialog

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:83.0) Gecko/20100101 Firefox/83.0

Steps to reproduce:

Install a persona with light icons. In this case, I chose "Dark Blue." Go from default theme to installed persona theme.

Actual results:

Though the theme installs and views properly, other dialogues now have light toolbar icons, which make the toolbar hard to read.

Expected results:

Toolbars in dialogues should be unaffected/be colored in a way that is legible.

Comment 1

[Russ Hansen]

Attachment: Persona toolbar

Comment 2

[Russ Hansen]

Attachment: Persona information

Comment 3

[Russ Hansen]

Oddly enough, the Dark Blue theme does not show light icons as it's chosen toolbar color. They are supposed to be dark blue like the header bar. I'm not sure why Thunderbird isn't honoring the persona's icon color choice, and this may be a bug in and of itself in personas.

If any theme with light toolbar icons is used, the dialog box toolbar will be affected.

Comment 4

[Russ Hansen]

On second thought, the problem seems to be that the Personas manager is not honoring the toolbar icon color of the theme. I've tried a variety of themes like "Dark Blue," and I can't seem to find one that has light colored toolbar icons. Yet they all show light toolbar icons.

It looks like there was some change from 68 that caused Thunderbird to stop honoring persona color choices, and choose dark mode icons, which don't work with the dialog because the theme is not actually in dark mode, so the toolbar background is light.

Comment 5

[Russ Hansen]

Confirmed: Thunderbird is choosing dark mode icons (based on theme colors?), not on the actual persona theme choice. As a result, non dark mode themes will have icon colors for dark mode, which screws up dialogs.

Please try to reproduce. Thanks.

Comment 6

[Russ Hansen]

Attachment: Delete me please

This is how it is handled in 68.12.1.

It still chooses light icons for the toolbar, but uses default mode toolbar icons for the dialog.

Comment 7

[Russ Hansen]

Please delete that last file attachment. I forgot to scrub it for personal information.

Comment 8

[Russ Hansen]

Attachment: Dialog box in 68.12.1

This is how it is handled in 68.12.1.

It still chooses light icons for the toolbar, but uses default mode toolbar icons for the dialog.

Comment 9

[Russ Hansen]

Attachment: Toolbar 68.12.1

Note that 68 still chooses to not honor the toolbar icon color of the theme.

There are a variety of things happening with Personas here.

Comment 10

[Russ Hansen]

Sorry about the messy report. I got ideas for testing after it was already filed.

Comment 11

[Richard Marti (:Paenglab)]

Do you see other dialogs behaving like this too or is this the only dialog?

Comment 12

[Russ Hansen]

(In reply to Richard Marti (:Paenglab) from comment #11)

Do you see other dialogs behaving like this too or is this the only dialog?

By no means do I know where every dialog with a toolbar is in Thunderbird, but all the other dialogs appear to respect the toolbar color of the persona. So, for Dark Blue, it becomes off-white text on a slate background which is usable.

Comment 13

[Russ Hansen]

Attachment: Task List Entry dialog

For instance: This is the dialog for entering a task in Lightning.

It seems to be limited to the event accept/decline toolbar. If you could give me an exhaustive list of all dialogs that use toolbars in this way, I can test all of them.

Comment 14

[David Lawrence [:dkl]]

The content of attachment 9191306 [details] has been deleted for the following reason:

Deleted at request of author

Comment 15

[Richard Marti (:Paenglab)]

Attachment: 1680755-details-dialog-themeable.patch

You need to test this with a LW-theme. The normal dark and light themes worked already.

Comment 16

[Russ Hansen]

(In reply to Richard Marti (:Paenglab) from comment #15)

Created attachment 9191485 [details] [diff] [review]
1680755-details-dialog-themeable.patch

You need to test this with a LW-theme. The normal dark and light themes worked already.

The "Dark Blue" theme definitely triggers the problem if you want a test case.

https://addons.thunderbird.net/en-US/thunderbird/addon/dark-blue/?src=search

Comment 17

[Alessandro Castellani [:aleca]]

Comment on attachment 9191485 [details] [diff] [review]
1680755-details-dialog-themeable.patch

Review of attachment 9191485 [details] [diff] [review]:
-----------------------------------------------------------------

Good work on this as it makes it readable and follow the theme.
A couple of issues still noticeable that I think we should fix.

The toolbar has a thick border bottom, coming from an :after pseudo element that doesn't follow the background color, looking out of place and noticeable even for regular summaries without invitation.
The visible focus ring of the close notification image makes it look like the notification bar is cut.
(screenshot coming)

Comment 18

[Alessandro Castellani [:aleca]]

Attachment: Screenshot from 2020-12-07 11-42-04.png

Comment 19

[Richard Marti (:Paenglab)]

Attachment: 1680755-details-dialog-themeable.patch

Using now a dashed focus-ring and hide the complete toolbox in a normal summary dialog.

Comment 20

[Alessandro Castellani [:aleca]]

Comment on attachment 9191735 [details] [diff] [review]
1680755-details-dialog-themeable.patch

Review of attachment 9191735 [details] [diff] [review]:
-----------------------------------------------------------------

::: calendar/base/content/dialogs/calendar-summary-dialog.css
@@ +18,5 @@
> +
> +.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
> +  outline: 1px dashed;
> +  outline-offset: -2px;
> +}

I think this should be in the shared messenger.css file in order to be sure all the notifications across Thunderbird will use this style for consistency.

Comment 21

[Richard Marti (:Paenglab)]

Attachment: 1680755-details-dialog-themeable.patch

Moved the focus ring code to notification.css.

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/01f070944725
Make the invitation details dialog toolbar correctly themeable. r=aleca