Closed Bug 1635060 Opened 4 years ago Closed 4 years ago

Reduce visual salience/noise of composition's paragraph format and font selectors when unfocused

Categories

(Thunderbird :: Theme, enhancement)

enhancement

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 78.0

People

(Reporter: thomas8, Assigned: Paenglab)

References

Details

Attachments

(5 files, 2 obsolete files)

The year is 2020 AD. The composition header area is entirely flattened by the designers. Entirely!? No!!! ... One small area of indomitable dropdowns still holds out against the invadors. And life is not easy for the legions of users who garrison the fortified camps of consistency, styling, whitespace, and minimalism...

Something which has itched me for ages: Pls look at the attached screenshot 1 from a bit of distance. The theming style is mostly consistent, dominated by black text and black icons on light-grey background. But there are two elements which are oddly standing out for no reason: paragraph format and font selectors. Their darker background color, in addition to the box border, makes them over-salient, I keep wondering if maybe they are focused, they are permanently standing out for no reason, yet functionally they are among the least important. This spoils the overall impression of the flat header area. It's better than it used to be, but still somewhat painful to the fine eye...

Without the border it looks odd (disconnected and more noisy), but if we match the background color with the pane background and make the border lighter, suddenly, they fall into place and the eye pain is gone... see screenshot 2 (mockup) in the next comment.

Proposal for said dropdowns:

Unfocused state (normalized salience):

  • use pane background color
  • use subject border color (lighter), also for separators on formatting toolbar (like separator after From selector)

Net effect:

  • Dropdowns now blend in nicely with the entire flat header, over-salience removed.
  • By light border, dropdowns still recognizable as a coherent element including the dropdown marker
Attachment #9145395 - Flags: feedback?(richard.marti)
Attachment #9145395 - Flags: feedback?(alessandro)

Proposal (:hover):

  • use same border and bg colors as for From selector dropdown when hovered. What a relief! Now feels light and professional.

There's no reason for elements of the same type (dropdown selector) to have different stylings.

Attachment #9145400 - Flags: feedback?(richard.marti)
Attachment #9145400 - Flags: feedback?(alessandro)

Proposal (focused):

  • use same border and bg colors as for From selector dropdown when focused. What a relief! I can now see where the focus really is (because it's in that blue box where the value changes, and the blue selection color in the dropdown still speaks for itself)

There's no reason for elements of the same type (dropdown selector) to have different stylings.

Attachment #9145401 - Flags: feedback?(richard.marti)
Attachment #9145401 - Flags: feedback?(alessandro)

My styling proposals are for Windows. Don't know for other OS, but should be mostly consistent with the From selector, too.

Comment on attachment 9145395 [details]
Screenshot 2: Proposal (unfocused): Over-salience removed, dropdowns blending in nicely with the flat header area

Yes, we could do this.
Attachment #9145395 - Flags: feedback?(richard.marti) → feedback+
Comment on attachment 9145400 [details]
Screenshot 3: Proposal (:hover): same like From selector on hover

I'm against this because the menulist looks then like a text input field. It should be darker on hover like the other format buttons.
Attachment #9145400 - Flags: feedback?(richard.marti) → feedback-
Comment on attachment 9145401 [details]
Screenshot 4: Proposal (focused): Same like From-selector when focused

Again, it should look like the other format buttons.

Btw. how can you focus this menulists and the other format buttons?
Attachment #9145401 - Flags: feedback?(richard.marti)

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

Comment on attachment 9145400 [details]
Screenshot 3: Proposal (:hover): same like From selector on hover

I'm against this because the menulist looks then like a text input field. It
should be darker on hover like the other format buttons.

OK, I hear you... not a big issue... but...

  • Why should it look and behave like a button when it's not a button?
  • I'd argue that it actually is a crippled text input, you can even type a first character and it will pick a matching entry. The end result is text input, only we're forcing users to select from list of texts.
  • Please look at Firefox: about:preferences > Zoom selector. Blue focus border on active dropdown box because focus indicates where keyboard input will go. Blue focus border does help a lot to identify that tiny spot on my large screen where the actual change is happening.
  • Btw, is there any reason why the font selector does not accept typed text input? Typing a known font name and getting autocomplete can be much more efficient than choosing from long lists.
  • I don't know, I can't get used to focused spots turning darker. To me, dark-grey is the color of "disabled", and I'd expect the focus point to be under "spotlight", so that's lighter.
  • Black text on white background simply has the best contrast, it's much harder to read black on grey.

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

Comment on attachment 9145401 [details]
Screenshot 4: Proposal (focused): Same like From-selector when focused

Again, it should look like the other format buttons.

Btw. how can you focus this menulists and the other format buttons?

With keyboard? You can't. Need to go through main menus.
There's two solutions I could think of for primary UI:

  • Single tab focus stop in normal focus ring on first item of a toolbar, the rest you navigate with cursor. Extra stop might be annoying when you just want to go from subject to body.
  • Have some sort of hotkey which activates extended / detailed focus ring where everything on screen becomes accessible, probably still using only a single tab stop on the toolbar, the rest with cursor.

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

Comment on attachment 9145395 [details]
Screenshot 2: Proposal (unfocused): Over-salience removed, dropdowns
blending in nicely with the flat header area

Yes, we could do this.

Awesome. That's the biggest issue here, so that would help much.

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

Comment on attachment 9145400 [details]
Screenshot 3: Proposal (:hover): same like From selector on hover

I'm against this because the menulist looks then like a text input field. It
should be darker on hover like the other format buttons.

In short: Both technically and from an UX perspective, the font selector is an input, even a textual input. And it's different from the other buttons on the formatting toolbar which are menulists, so you just pick 1 thing from a list, but that thing does not stay as a value in the input, unlike the font which actually stays as your user text input from the list. Then, I believe textual inputs should have blue border to emphasize the chosen text value.

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

Btw. how can you focus this menulists and the other format buttons?

I think the focus behaviour of these dropdown boxes has changed, not sure why and how.
In former times, focus used to stay on the input, you could use cursor up/down to navigate list entries even with the list closed, Alt+Cursor down to open the dropdown, ESC or Alt+Cursor-up to close the dropdown, and focus would still stay there. Pressing Enter, or pressing ESC on closed input (or ESC twice on open dropdown) would then return focus to message body.

Apologies for bailing on this, but I'm super busy with other million bugs.
Richard is in charge of themes and styles, and I 100% trust his decisions, so you can ping him for any reviews and feedback.
Again, sorry for bailing.

(In reply to Alessandro Castellani (:aleca) from comment #12)

Again, sorry for bailing.

No problem at all, Alex. I'll sort it out with Richard in a fair fight from man to man... ;-) .... damn, he is stronger than me... :-/

This patch removes the formatting toolbars menulist background colour when not hovered or open. The other states are the same as the format toolbar buttons.

I needed on Linux and Windows to differentiate between the normal toolbar and the formatting toolbar to let the menulist on the normal toolbar look like before. On mac it has still the native appearance on the normal toolbar.

Assignee: nobody → richard.marti
Status: NEW → ASSIGNED
Attachment #9146304 - Flags: review?(alessandro)
Comment on attachment 9146304 [details] [diff] [review]
1635060-formatToolbar-menulist-background.patch

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

Thanks for taking care of this.
I think we should go a little step further and nail the consistency.
We should:
- Add border radius to match the radius of the text styling buttons and input fields.
- Add a hover effect, maybe a dark background?

I only tested this on Linux, so apologies if something doesn't translate well with other OSs.

Also, did you consider how it might look if we use the theamable styling you've been applying to the various dialogs?
Just an idea, nothing concrete here.
Attachment #9146304 - Flags: review?(alessandro) → feedback+

(In reply to Alessandro Castellani (:aleca) from comment #15)

Comment on attachment 9146304 [details] [diff] [review]
1635060-formatToolbar-menulist-background.patch

Review of attachment 9146304 [details] [diff] [review]:

Thanks for taking care of this.
I think we should go a little step further and nail the consistency.
We should:

  • Add border radius to match the radius of the text styling buttons and
    input fields.

Done

  • Add a hover effect, maybe a dark background?

There was a hover effect but because of silly typos it didn't work on Linux. Additionally changed the hove background to be better visible.

Also, did you consider how it might look if we use the theamable styling
you've been applying to the various dialogs?
Just an idea, nothing concrete here.

I did try it already when I made the header toolbox themeable. It didn't work well with the different popups (toolbarbutton popup, menulist popup etc.). I can try to make them themeable in a new bug. And then we still have menus/context menus that don't follow the dark system themes (on Mac and Windows)...

Attachment #9146304 - Attachment is obsolete: true
Attachment #9146422 - Flags: review?(alessandro)

Like discussed on Matrix with lighter highlight colours on Linux.

Attachment #9146422 - Attachment is obsolete: true
Attachment #9146422 - Flags: review?(alessandro)
Attachment #9146540 - Flags: review?(alessandro)
Comment on attachment 9146540 [details] [diff] [review]
1635060-formatToolbar-menulist-background.patch

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

Beautiful!
Attachment #9146540 - Flags: review?(alessandro) → review+
Target Milestone: --- → Thunderbird 78.0

Pushed by mkmelin@iki.fi:
https://hg.mozilla.org/comm-central/rev/1ceeeaabf3d5
Apply no background to the formatToolbar menulists in normal state. r=aleca

Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
See Also: → 1636773
You need to log in before you can comment on or make changes to this bug.