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

Status: VERIFIED FIXED

(bugzilla.mozilla.org :: User Interface, enhancement, P1)

Description

[Marco Bonardo [:mak]]

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.

Comment 1

[Dylan Hardison [:dylan] (he/him)]

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.

Comment 2

[Marco Bonardo [:mak]]

(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.

Comment 3

[Wayne Mery (:wsmwk)]

Attachment: 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

[Lars Viklund]

Attachment: 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.

Comment 5

[Dylan Hardison [:dylan] (he/him)]

I think the darker color + putting Fira Code and Consolas where courier is listed would help.

Comment 6

[David Anderson [:dvander] - inactive, e-mail if emergency]

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 7

[Lars Viklund]

While Fira Code is an excellent font it may not be quite suitable for the general population
It has ligatures for common programming operators which may obscure the actual text of comments on Bugzilla.

The Fira Mono font that it's based on may very well have its place in the stylesheet, particularly as it's a Mozilla font.

Comment 8

[:Atoll]

(In reply to Lars Viklund from comment #7)
> While Fira Code is an excellent font it may not be quite suitable for the
> general population
> It has ligatures for common programming operators which may obscure the
> actual text of comments on Bugzilla.

Could you provide some examples of such ligatures here, so that we can test them and see how if they're appropriate?

Comment 9

[Bug Butler]

Attachment: github pull request

Comment 10

[Lars Viklund]

Verbatim from https://github.com/tonsky/FiraCode/blob/master/showcases/showcases.txt, rendered at https://github.com/tonsky/FiraCode/blob/master/showcases/all_ligatures.png

         .= .- := =:= __
        == != === !== =/=

<-< <<- <-- <- <-> -> --> ->> >->
<=< <<= <==    <=> => ==> =>> >=>
    >>= >>- >- <~> -< -<< =<<
        <~~ <~ ~~ ~> ~~>

     <<< << <= <>  >= >> >>>
   <||| <|| <| <|> |> ||> |||>

            <$ <$> $>
            <+ <+> +>
            <* <*> *>

      \\ \\\  /* */  /// //
      </ <!--  </>  --> />
      0xF 9:45 m-x *ptr www

       ;; :: ::: !! ?? %% && 
      || .. ... ..< .? ?. ?:
       -- --- ++ +++ ** ***

          ~= ~- -~ ~@
       ^= ?= /= /== |= ||=
         #! ## ### ####
      #{ #[ ]# #( #? #_ #_(
         
         
a*b a*A B*b A*B *a *A a* A*
a-b a-A B-b A-B -a -A a- A-
a+b a+A B+b A+B +a +A a+ A+
a:b a:A B:b A:B :a :A a: A:

Comment 12

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8848708 [details] [review]
github pull request

pull request is messy still

Comment 13

[Dylan Hardison [:dylan] (he/him)]

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.

Comment 14

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

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.

Comment 15

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Actually, no.

I'm terrified of the confusion the ligatures for

        == != === !== =/=

will cause.

We don't review a lot of code in #F or Haskell, but we do review a lot of JavaScript and those ligatures will make that code unreadable.

Comment 16

[Dylan Hardison [:dylanAtHome]]

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.

Comment 17

[:glob ✱]

(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.

Comment 18

[David Anderson [:dvander] - inactive, e-mail if emergency]

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.

Comment 19

[Dylan Hardison [:dylan] (he/him)]

Comment on attachment 8848708 [details] [review]
github pull request

The font the bike shed shall be Consolas...

Comment 20

[Dylan Hardison [:dylan] (he/him)]

To github.com:mozilla-bteam/bmo.git
   7ec8604e2..add608cf5  master -> master

Comment 21

[Dylan Hardison [:dylan] (he/him)]

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

Comment 22

[Dylan Hardison [:dylan] (he/him)]

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.

Comment 23

[Dylan Hardison [:dylan] (he/him)]

What's your take on how the comments look now? :)

Comment 24

[David Anderson [:dvander] - inactive, e-mail if emergency]

For me, this looks much better on both Chrome again and Firefox. Thanks for taking the time to fix this!

Comment 25

[Panos Astithas (he/him) [:past] (please ni?)]

\o/

Comment 26

[Marco Bonardo [:mak]]

(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!