1667372 - implement/expose "clear formatting/styling" in the compose window

Status: RESOLVED FIXED

(Thunderbird :: Message Compose Window, enhancement, P2)

Description

[Magnus Melin [:mkmelin]]

A super common annoyance and complaint talking to people is that there are many situations (copy paste, or while replying) that you end up with mixed fonts or font styles.

We should have a button on the toolbar that let's you easily clear up such styling but keeps the structural markup that was there.

Filing this bug I notice we have a cmd_removeStyles command for this, partly working.
https://searchfox.org/comm-central/search?q=cmd_removeStyles&path=&case=false&regexp=false

Comment 1

[Magnus Melin [:mkmelin]]

There is also Ctrl+Space (but undocumented).

We should probably use document.execCommand("removeFormat", false, "" );

Comment 2

[Magnus Melin [:mkmelin]]

Potentially we'd want to also detect if people have mixed fonts from pasting, and offer to fix it for them. As a second step.

Comment 3

[José M. Muñoz]

What's wrong with select, "Format > Remove All Text Styles". Works OK, but doesn't remove CSS, IIRC, see bug 1539110.

Comment 4

[Magnus Melin [:mkmelin]]

I never saw that. https://searchfox.org/comm-central/rev/7ed718c90a58141a74da3acbf3f97ad8854e5561/mail/components/compose/content/editor.js#1981

Apparently i need to select all the text to get it to show up.
So, at least there's much room for improving the discoverability of that.

Comment 5

[Magnus Melin [:mkmelin]]

There's not really much reason such an option/button couldn't show all the time, and remove from the whole entered text if executed.

Comment 6

[Henry Wilkes (they/them) [:henry-x]]

Attachment: Bug 1667372 - Add a "Remove Text Styling" button to the message composer. r=mkmelin

Comment 7

[Alessandro Castellani [:aleca]]

Attachment: erease icons.png

Little fly by to propose some possible options for the clear formatting icon.
The currently proposed icon is not very clear unfortunately as the diagonal stroke doesn't play very well with the letter A.
What do you think about these?

Comment 8

[Alessandro Castellani [:aleca]]

Attachment: erease icons.png

wow, figma really did a number on the export quality

Comment 9

[Magnus Melin [:mkmelin]]

Comment on attachment 9224868 [details]
erease icons.png

Of these, I'd say the first one (with the large x) is clearest

Comment 10

[Richard Marti (:Paenglab)]

Comment on attachment 9224868 [details]
erease icons.png

I'm for the one on the right. First, because we use the letter "A" on the other buttons and using the "T" would look inconsistent. Second, the eraser is a good sign for "erasing" the styles.

The icon on the left isn't so clear as it could also be recognized as "Tx".

The "close" sign in the middle could also work with the "A" instead of the eraser.

Comment 11

[Henry Wilkes (they/them) [:henry-x]]

Comment on attachment 9224868 [details]
erease icons.png

The button has two functions:

1. If there is a selection, remove existing styling from the selection.
2. Stop using styling for the next typed character.

Aesthetically, I like the rubber/eraser one the best, but I don't know if it works so well for hinting at the second behaviour. On the other hand, I don't know whether the second behaviour will be used that much.

Regarding the slanted T, I know gmail uses something similar, but I don't think it works that well here. Is it slanted because the button removes Italic, among other stylings?

Also, the letter T is inconsistent with the letter A used for the other style symbols. With the other icons, you don't need to know what the letter A is, just that it looks like a consistent glyph where the buttons meaning can be derived from the differences (underlined, thicker, slanted, bigger, smaller).

I think the first cross blends a little bit too much into the T.

I think the circle cross could work if used on an A, but further in the corner. Similar to the category-dictionary icon https://searchfox.org/mozilla-central/rev/85a74c965bd4bcab091b5767c13c44f84671d9ce/toolkit/themes/shared/extensions/category-dictionaries.svg

I was also wondering if we could just avoid a glyph entirely, and just use a generic stop/remove symbol, which will make sense in context (immediately following the styling buttons):

1. A cross, either plain or inside a circle.
2. A stop sign (like https://searchfox.org/comm-central/rev/c880e5a1cfbce281b8836f092e08df167919d32f/mail/themes/shared/mail/icons/exclude.svg).
3. A "clean" symbol. E.g. just your rubber on its own. In GNOME/GTK, there is edit-clear-all named icon, which is themed as a rubber (https://gitlab.gnome.org/GNOME/adwaita-icon-theme/-/blob/master/Adwaita/scalable/actions/edit-clear-all-symbolic.svg) or a sweeping brush (https://gitlab.gnome.org/GNOME/adwaita-icon-theme/-/blob/master/src/fullcolor/legacy/edit-clear-all.svg, https://github.com/elementary/icons/blob/master/actions/symbolic/edit-clear-all-symbolic.svg).

Comment 12

[Magnus Melin [:mkmelin]]

FWIW, we discussed changing the letters of other buttons there. I filed bug 1714329 now.

Comment 13

[Henry Wilkes (they/them) [:henry-x]]

Comment on attachment 9224868 [details]
erease icons.png

Just realised, libreoffice and microsoft (https://support.microsoft.com/en-us/office/clear-all-text-formatting-c094c4da-7f09-4cea-9a8d-c166949c9c80#OfficeVersion=Windows) both use the letter A with a rubber/eraser as their icons for this. So the third icon works well in that respect.

Google uses an icon similar to the first T icon, except it uses a single slash over the T. But I feel like the google one ends up looking like an X or a chi.

Comment 14

[Alessandro Castellani [:aleca]]

Attachment: remove-text-styling.svg

Here's the SVG for the 3rd icon, the A with the eraser.
I like that one a lot as indeed the other 2 kinda look like Tx and they might be a bit confusing.
Pinging Richard to check if it's properly pixel hinted and if it needs optimization.

Comment 15

[Richard Marti (:Paenglab)]

Comment on attachment 9225107 [details]
remove-text-styling.svg

Looks good, but I think the "A" is too small compared to the other icons. I'll attach your icon with the file size optimization.

Comment 16

[Richard Marti (:Paenglab)]

Attachment: remove-text-styling.svg with thin eraser

Comment 17

[Richard Marti (:Paenglab)]

Attachment: remove-text-styling.svg with fat eraser

Comment 18

[Richard Marti (:Paenglab)]

Attachment: comparison.png

Comparison of the three icons. On top the one from Alessandro which isn't aligned with the other icons and too small. In the middle my icon with the thin eraser (my favourite). On bottom with fat eraser which could be the best for uneven scaling. But the scaling couldn't be so bad as the eraser is turned 45°.

Comment 19

[Alessandro Castellani [:aleca]]

I wanted to give more importance to the eraser but without using a 2px thick line, that's why the A is smaller.
I don't mind v2 (the example in the middle) but I'd propose to see if it's possible to make the A a tiny bit smaller and the eraser a bit more prominent without affecting sharpness.
What do you think?

Comment 20

[Henry Wilkes (they/them) [:henry-x]]

Comment on attachment 9225107 [details]
remove-text-styling.svg

I like this and it looks good in place.

Comment 21

[Henry Wilkes (they/them) [:henry-x]]

Comment on attachment 9225163 [details]
comparison.png

The button will go at the end of the list, so the size of the A can be compared to the underline size. I'll attach what it looks like now.

Comment 22

[Henry Wilkes (they/them) [:henry-x]]

Attachment: Current "Remove Text Styling" button in the toolbar

Comment 23

[Richard Marti (:Paenglab)]

Attachment: remove-text-styling.svg eraser moved down

This is aleca's proposal with the eraser moved down. How about this?

Comment 24

[Alessandro Castellani [:aleca]]

Comment on attachment 9225255 [details]
remove-text-styling.svg eraser moved down

I like this.
Let's go with this one.

Comment 25

[Henry Wilkes (they/them) [:henry-x]]

Attachment: Current "Remove Text Styling" icons in the toolbar (top: older version, bottom: newer version)

I also think the updated one looks better in the toolbar.

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/bb94a54a2af5
Add a "Remove Text Styling" button to the message composer. r=mkmelin

Comment 27

[Magnus Melin [:mkmelin]]

Looks like we should disable these tests until they work without failures (repro locally but only with --verify):

• comm/mail/test/browser/composition/browser_font_size.js
• comm/mail/test/browser/composition/browser_remove_text_styling.js
• comm/mail/test/browser/composition/browser_text_styling.js

Comment 28

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/d54dd0929463
disable clear styling related tests that are not yet reliable. rs=me DONTBUILD