If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Use darker font and fallback to Fira Mono when Menlo/Monaco/Droid Sans Mono are not available

VERIFIED FIXED

Status

()

bugzilla.mozilla.org
User Interface: Modal
P1
enhancement
VERIFIED FIXED
8 months ago
6 months ago

People

(Reporter: mak, Assigned: dylan)

Tracking

Production
Dependency tree / graph

Details

Attachments

(2 attachments, 1 obsolete attachment)

(Reporter)

Description

8 months ago
It could just be me, but one of the most common things I do on bugzilla is reading comments and posting.
With the new theme I find the text to be lacking contrast. It hurts my eyes.
I could use Stylish, but maybe we could evaluate giving better contrast to everyone since this tool is mostly text.

By a quick look through inspector, we seem to be using #404040, could we please evaluate going darker to gain more contrast? even just #202020 works much better.
(Assignee)

Comment 1

8 months ago
Are you on a system where the font being used is "Courier" or "Courier New"? Can you try forcing .comment-text to use Consolas and tell me how the font colors compare using that?

That said, #202020 for .comment-text seems reasonable -- but I'm curious if this is related to dvander's request that we add Consolas to the list of acceptable comment text fonts.
Flags: needinfo?(mak77)
(Assignee)

Updated

8 months ago
Severity: normal → enhancement
Priority: -- → P1
(Reporter)

Comment 2

8 months ago
(In reply to Dylan Hardison [:dylan] from comment #1)
> Are you on a system where the font being used is "Courier" or "Courier New"?

Windows 10.

> Can you try forcing .comment-text to use Consolas and tell me how the font
> colors compare using that?

It looks a bit better, yeah. I'd accept even that.
Flags: needinfo?(mak77)

Comment 3

7 months ago
Created attachment 8846370 [details]
BMO comment font stinks.png

(In reply to Marco Bonardo [::mak] from comment #0)
> It could just be me, but one of the most common things I do on bugzilla is
> reading comments and posting.

No, it's not just you.  Bugzilla comment text clarity has bugged me for a long time - it should be *stellar* both in quality and size considering how much time we all spend reading. (including when typing it) In decades I don't recall it ever being stellar. Other bz fields/headings have been great, and their sizes tend to be larger (why?  or my imagination?), so I've never understood why comments seem to be considered second rate.

Per inspector, courier font is indeed at fault my case. Attached is a screen shot comparing bug comments font to fonts from other situations.

Comment 4

7 months ago
Created attachment 8847659 [details]
Courier New vs. Fira Code

I'm overriding the Firefox 'monospace' font to a font that's suitable for my eyes (Fira Code). It seems like the .comment-text style prefers some inappropriate fonts before my usable 'monospace' fallback.

The font selected by the browser is "Courier New" on my system.
(Assignee)

Updated

7 months ago
Assignee: nobody → sebastinssanty
Comment hidden (obsolete)
Prioritizing Consolas definitely looks way better. In the old UI the font was not specified and Chrome chose Consolas - Bugzilla looked best there. Now both browsers are showing old-school Courier.
Comment hidden (obsolete)
Comment hidden (obsolete)

Comment 9

7 months ago
Created attachment 8848708 [details] [review]
github pull request
See Also: → bug 1343820
Comment hidden (obsolete)
(Assignee)

Updated

7 months ago
Duplicate of this bug: 1352024
(Assignee)

Comment 12

7 months ago
Comment on attachment 8848708 [details] [review]
github pull request

pull request is messy still
Attachment #8848708 - Flags: review-
(Assignee)

Comment 13

6 months ago
Comment on attachment 8848708 [details] [review]
github pull request

r=dylan

but before this lands, the version of Fira Sans Mono we ship needs to be updated.
Attachment #8848708 - Flags: review- → review+
Is the new version of Fira Sans Mono a blocker, or a nice to have? I'm going to create a blocking bug, but if it's not, let's remove it as a blocker so we can get this work done.
Flags: needinfo?(dylan)
Comment hidden (off-topic)
Comment on attachment 8847659 [details]
Courier New vs. Fira Code

Just as a note, this patch is about using Fira Mono and Consolas. the screenshot and discussion about Fira Code was brought on by an early mis-communication.
Attachment #8847659 - Attachment is obsolete: true
(In reply to Emma Humphries ☕️ (she/her) [:emceeaich] (UTC-8) +needinfo me from comment #14)
> Is the new version of Fira Sans Mono a blocker, or a nice to have? I'm going
> to create a blocking bug, but if it's not, let's remove it as a blocker so
> we can get this work done.

the mozilla skin initially used fira mono however that was changed due to issues (from bug 1038808 comment 1):
- the "r" is too similar to a dot-less "i"
- * and + are too similar
- the kerning is very weird
- i have to increase my font size to 150% to read comments

i know the first issue has been addressed in https://github.com/mozilla/Fira/issues/49 which is why ensuring bmo ships with the latest version of fira mono is important.  i'm not sure if the other issues have been addressed.  iirc the kerning issue was reported by atoll so i'd recommend getting his feedback with the latest version of fira mono.
Can we just add Consolas for now and worry about Fira Sans separately? It's what Chrome used to give Bugzilla by default and it really helps readability.
(Assignee)

Comment 19

6 months ago
Comment on attachment 8848708 [details] [review]
github pull request

The font the bike shed shall be Consolas...
Attachment #8848708 - Flags: review+
(Assignee)

Comment 20

6 months ago
To github.com:mozilla-bteam/bmo.git
   7ec8604e2..add608cf5  master -> master
Status: NEW → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
(Assignee)

Comment 21

6 months ago
Consolas is too small, I'm going with Fira Mono (with updates).
(Assignee)

Updated

6 months ago
Summary: Use a darker font for comments, and also avoid Courier → Use darker font and fallback to Fira Mono when Menlo/Monaco/Droid Sans Mono are not available
(Assignee)

Updated

6 months ago
Assignee: sebastinssanty → dylan
(Assignee)

Comment 22

6 months ago
Maybe next we want the font slightly larger -- maybe we want another mono-spaced font -- but for right now Fira Mono is superior to the experience we had on windows.
Status: RESOLVED → VERIFIED
(Assignee)

Comment 23

6 months ago
What's your take on how the comments look now? :)
Flags: needinfo?(mak77)
(Assignee)

Updated

6 months ago
Blocks: 1359454
(Assignee)

Updated

6 months ago
Blocks: 1359457
For me, this looks much better on both Chrome again and Firefox. Thanks for taking the time to fix this!
\o/
(Reporter)

Comment 26

6 months ago
(In reply to Dylan Hardison [:dylan] (he/him) from comment #23)
> What's your take on how the comments look now? :)

I see a better contrast on text, thanks!
Flags: needinfo?(mak77)
You need to log in before you can comment on or make changes to this bug.