1625987 - Make the customize window themeable

Status: RESOLVED FIXED

(Thunderbird :: Theme, task)

Description

[Richard Marti (:Paenglab)]

With the themeableDialog.css we can make the customize window themeable.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: 1625987-customize-themeable.patch

Alessandro, what do think about this?

Comment 2

[Alessandro Castellani [:aleca]]

Comment on attachment 9136794 [details] [diff] [review]
1625987-customize-themeable.patch

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

This is almost perfect, just a couple of changes we should implement.

Let's convert the `titlebarSettings` to an `hbox` and give some spacing between the 2 checkboxes.
Also, we should move this container to the left and have these checkboxes as first options.

The separator "groove" doesn't look great and it's too thick compares to the rest of the style, I think we should remove that completely.
We should also have `Restore Default Set` and `Done` inline aligned to the right.
I don't think we should worry too much about long strings in l10n as this dialog is realizable and we have plenty of space.

I'm attaching a screenshot with the reordered items.

::: mail/themes/linux/mail/customizeToolbar.css
@@ +5,1 @@
>  #instructions {

Let's update this style to be more consistent with the rest of the prefs.
#instructions {
    font-weight: 600;
    font-size: 1.2em;
    margin-block: 5px 10px;
}

Comment 3

[Alessandro Castellani [:aleca]]

Attachment: customize.png

What do you think?

Comment 4

[Richard Marti (:Paenglab)]

Looks good, but could give problems in the width with locales with long labels.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: 1625987-customize-themeable.patch

Okay. Needs bug 1625881 applied first.

On Linux and Windows it worked with all on one line, but on Mac the panel isn't resizeable and a part of the button is cut off.

Comment 6

[Alessandro Castellani [:aleca]]

Comment on attachment 9136868 [details] [diff] [review]
1625987-customize-themeable.patch

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

Let's update the `showTitlebar.label` and `extraDragSpace.label` to remove the "Show" word as the on/off nature of the checkbox properly explains the context.
Shorter strings can help us save some vital space.

Indeed on macos we could have problems due to the non-resizable nature.
What do you think about adding an overflow-auto to the #main-box element?
It's a bit dirty but it will take care of those edge cases with longer strings, and it would be temporary as we were considering with Magnus to transition this to a full page takeover instead of a dialog.

What do you think?

::: common/src/customizeToolbar.xhtml
@@ +74,5 @@
>          ondrop="onPaletteDrop(event)"/>
>  
> +  <hbox id="buttonBox" align="center">
> +#ifndef MOZ_SUITE
> +    <vbox id="titlebarSettings" hidden="true">

This should be an hbox

@@ +79,5 @@
> +      <checkbox id="showTitlebar" oncommand="updateTitlebar();" label="&showTitlebar.label;"/>
> +      <checkbox id="showDragSpace" oncommand="updateDragSpace();" label="&extraDragSpace.label;"/>
> +    </vbox>
> +#endif
> +    <label id="modelistLabel" value="&show.label;"/>

We can also remove this "Show:" label and add an aria-label to the menulist that says something like "Toolbar button style" for a11y.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: 1625987-customize-themeable.patch

Like discussed on Matrix.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: 1625987-customize-themeable.patch

Now with hbox instead only box.

Comment 9

[Alessandro Castellani [:aleca]]

Comment on attachment 9136903 [details] [diff] [review]
1625987-customize-themeable.patch

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

Awesome, thanks.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/8109a7663586
Make the customize window themeable. r=aleca