Reduce visual salience/noise of composition's paragraph format and font selectors when unfocused
Categories
(Thunderbird :: Theme, enhancement)
Tracking
(Not tracked)
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.
Reporter | ||
Comment 1•4 years ago
|
||
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
Reporter | ||
Comment 2•4 years ago
|
||
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.
Reporter | ||
Comment 3•4 years ago
|
||
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.
Reporter | ||
Comment 4•4 years ago
|
||
My styling proposals are for Windows. Don't know for other OS, but should be mostly consistent with the From selector, too.
Assignee | ||
Comment 5•4 years ago
|
||
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.
Assignee | ||
Comment 6•4 years ago
|
||
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.
Assignee | ||
Comment 7•4 years ago
|
||
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?
Reporter | ||
Comment 8•4 years ago
•
|
||
(In reply to Richard Marti (:Paenglab) from comment #6)
Comment on attachment 9145400 [details]
Screenshot 3: Proposal (:hover): same like From selector on hoverI'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 focusedAgain, 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.
Reporter | ||
Comment 9•4 years ago
|
||
(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 areaYes, we could do this.
Awesome. That's the biggest issue here, so that would help much.
Reporter | ||
Comment 10•4 years ago
•
|
||
(In reply to Richard Marti (:Paenglab) from comment #6)
Comment on attachment 9145400 [details]
Screenshot 3: Proposal (:hover): same like From selector on hoverI'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.
Reporter | ||
Comment 11•4 years ago
|
||
(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.
Updated•4 years ago
|
Updated•4 years ago
|
Updated•4 years ago
|
Comment 12•4 years ago
|
||
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.
Reporter | ||
Comment 13•4 years ago
|
||
(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... :-/
Assignee | ||
Comment 14•4 years ago
|
||
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.
Comment 15•4 years ago
|
||
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.
Assignee | ||
Comment 16•4 years ago
|
||
(In reply to Alessandro Castellani (:aleca) from comment #15)
Comment on attachment 9146304 [details] [diff] [review]
1635060-formatToolbar-menulist-background.patchReview 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)...
Assignee | ||
Comment 17•4 years ago
|
||
Like discussed on Matrix with lighter highlight colours on Linux.
Comment 18•4 years ago
|
||
Comment on attachment 9146540 [details] [diff] [review] 1635060-formatToolbar-menulist-background.patch Review of attachment 9146540 [details] [diff] [review]: ----------------------------------------------------------------- Beautiful!
Assignee | ||
Updated•4 years ago
|
Comment 19•4 years ago
|
||
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
Description
•