1486177 - Log font size too small and inconsistent font size tooltip, ui label

Status: NEW

(DevTools :: Console, defect, P5)

Description

[Alice0775 White]

This looks like an amateur's work!

Steps To Reproduce:
1. Open Web Console or Browser Console
   --- observe log font size
2. Right click on empty area
   --- observe context Menu label
3. Focus console and Zoom in(press ctrl++ several times)
   --- observe ui label in Web Console
4. Click ... button in Web Console
   --- observe Menu label
5. Mouse hover over UI widget
   --- inconsistent font size tooltip

Actual Results:
Log font size too small.
Inconsistent font size of tooltip and  UI widget label

Expected Results:
At least, log font size more bigger.
At least, font size of tooltip should be consistent.

Comment 1

[Nicolas Chevobbe [:nchevobbe][PTO - back on October 21]]

(In reply to Alice0775 White from comment #0)
> This looks like an amateur's work!
> 
> Steps To Reproduce:
> 1. Open Web Console or Browser Console
>    --- observe log font size
> 2. Right click on empty area
>    --- observe context Menu label
> 3. Focus console and Zoom in(press ctrl++ several times)
>    --- observe ui label in Web Console
> 4. Click ... button in Web Console
>    --- observe Menu label
> 5. Mouse hover over UI widget
>    --- inconsistent font size tooltip
> 
> Actual Results:
> Log font size too small.
> Inconsistent font size of tooltip and  UI widget label
> 
> Expected Results:
> At least, log font size more bigger.
> At least, font size of tooltip should be consistent.

Hello,
Would you mind posting a screenshot here ?

Comment 2

[Alice0775 White]

Attachment: screenshot

Comment 3

[Julian Descottes [:jdescottes]]

Thanks for the attachment.
From your screenshot, issues seem to be:

- default font size of log lines is too small
  I believe the current font size was carefully chosen to balance readability and size. 
  It is hard to find a setting that pleases everybody though. 
  As an alternative to zooming the whole UI, maybe we could discuss making the log size customizable?
  Not sure if this is feasible while keeping everything correctly aligned.

- when zooming, some tooltips are zoomed some others not
  UI elements that look like native elements should not be zoomed in my opinion. 
  I would say it is a valid bug for the title tooltips and the context menu. 
  For the hamburger menu, it's harder to decide.  

- font size for "Persist logs" is too big
  In your screenshot, it looks like it is also the case before zooming. 
  This might be windows only, but this definitely looks like a valid polish bug.

I think we should keep issues #2 and #3 here, but issue #1 should be moved to a separate bug.

(In reply to Alice0775 White from comment #0)
> This looks like an amateur's work!

Can we avoid this kind of comment?

Comment 4

[Alice0775 White]

(In reply to Julian Descottes [:jdescottes][:julian] from comment #3)
> Thanks for the attachment.
> From your screenshot, issues seem to be:
> 
> - default font size of log lines is too small
>   I believe the current font size was carefully chosen to balance
> readability and size. 
>   It is hard to find a setting that pleases everybody though. 
>   As an alternative to zooming the whole UI, maybe we could discuss making
> the log size customizable?
>   Not sure if this is feasible while keeping everything correctly aligned.
> 
> - when zooming, some tooltips are zoomed some others not
>   UI elements that look like native elements should not be zoomed in my
> opinion. 
>   I would say it is a valid bug for the title tooltips and the context menu. 
>   For the hamburger menu, it's harder to decide.  
> 
> - font size for "Persist logs" is too big
>   In your screenshot, it looks like it is also the case before zooming. 
>   This might be windows only, but this definitely looks like a valid polish
> bug.
> 
> I think we should keep issues #2 and #3 here, but issue #1 should be moved
> to a separate bug.
> 
> (In reply to Alice0775 White from comment #0)
> > This looks like an amateur's work!
> 
> Can we avoid this kind of comment?

Sorry. please ignore the sentence. I was frustrating because there were many site with small font and low contrast.

Comment 5

[:Harald Kirschner :digitarald]

Seeing that your tabs have a larger font-size, do you have a OS-level preference set for larger font sizes that Firefox is reading from in some parts of the UI (large fonts) but not others (small fonts)?

Comment 6

[Alice0775 White]

(In reply to :Harald Kirschner :digitarald from comment #5)
> Seeing that your tabs have a larger font-size, do you have a OS-level
> preference set for larger font sizes that Firefox is reading from in some
> parts of the UI (large fonts) but not others (small fonts)?

yes, 9 -> 12pt

Comment 7

[Florens Verschelde :fvsch]

About inconsistent font-sizes

Last year we fixed a bunch of issues with inconsistent font-sizes in panel content. We had 90% of our text using explicit sizes (e.g. font-size: 11px and font-size: 11px), and the remaining 10% inheriting system font-sizes. On macOS the system font-size was always 11px, on Linux it was 14.5px by default (and could be bigger), on Windows it seems to resolve to 12px (9pt) by default but can be set bigger too (12pt = 16px). Now everything should be small (11px and 12px).

We may still have specific issues with tooltips and menus. It would be worth testing on Windows with default system settings and with increased system font size, and see how our tooltips, context menus and other menus behave. And if things get too strange, maybe file more specific bugs.

About small font-sizes

Right now we use 11px text for code and some UI labels, and 12px text for bigger UI labels (like tabs and accordion headers). The goal is to fit a lot of content that our more-or-less expert users can glance at quickly. Of course we want to avoid being too small to read comfortably, what what "too small" means depends a lot between users and other factors.

Some solutions if text looks too small overall:

1. On the user's side, zoom DevTools with Ctrl-Plus. We zoom by 10% increments (100%, 110%, 120%, 130%, etc. up to 200%). Main downside: icons can get blurry on low-resolution displays.
2. On DevTools' side: we could maybe bump our base font-size from 11px to 12px; not a big increase, but already a strong impact on the whole UI.
3. On DevTools' side: we could implement a preference to let users set a different base font-size, that's bug 1319367 (which doesn't have a lot of momentum).