1319367 - Allow users to change code font-size in Developer Tools

Status: UNCONFIRMED

Description

[Florens Verschelde [:fvsch]]

In most places in the Developer Tools, such as the Inspector, Console, Debugger etc., there are three different types of text:

- Main UI text (looks like 13px San Francisco on macOS; I remember seeing bigger text on some Linux workstations)
- Main code text (pretty sure it’s 13px Source Code Pro everywhere?)

Depending on the specifics of the platform and on user needs, the 13px Source Code Pro:
- may be too small to begin with;
- may appear too small due to the platform's rendering (especially with heavy hinting applied, e.g. the difference between 12px and 13px or 13px and 14px can be a full pixel difference in x-height, which is massive).

I suggest offering a way for end users to control the code text size in Developer Tools, independently from the zoom level. Rationale is:
1. Users may not want to zoom the main DevTools UI if it’s already big enough / they know it well / they don’t want it to take more space / or in order to avoid getting blurry icons everywhere (a very real problem on @1x displays).
2. Specifics of different platforms (different OSes and versions, high and low dpi…) means even sane defaults can fail.

Partly related bugs:
Bug 900173 - difference in font-size between Inspector and Style Editor.
Bug 1220163 - zooming DevTools zooms its context menus.

Proposed solutions:

1. Fairly simple = a font-size preference in the DevTools settings panel. In that case I recommend sticking with Source Code Pro, having that preference has a integer value set to 13 by default, with a minimum at 10 and maybe a maximum at 20 (beyond that the user would probably need to zoom the full UI and/or use a system-wide zoom).

2. A bit more complex = if 13px Source Code Pro is the sane default for code, set it as the default in Firefox's about:preferences#content (Fonts & Colors > Advanced… > Monospace) (font.size.fixed.* and font.name.monospace.*), and use that in the DevTools, allowing users to modify it in Firefox rather than in the Developer Tools. Downside = harder, impacts web content.

Comment 1

[Florens Verschelde [:fvsch]]

Created attachment 8813096 [details]
devtools-code-font-size-xubuntu.png

Example of result in Xubuntu. (Image quality is not ideal.) Code text seems to render at 13px and looks smallish and shrunken, probably due to heavy hinting being applied. UI text looks bigger, probably in the 14-16px range.

Comment 2

[YF (Yang)]

Dupe to bug 858765?

Comment 3

[J. Ryan Stinnett [:jryans]]

Helen, any thoughts on this subject?

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

I'm not opposed; I think everything in devtools could be a little larger, everything is very small and tight (although that seems to be what the overwhelming majority wants).

Comment 5

[Dan Jacobson]

Before Firebug and Developers Tools were merged, one could change this is Firebug. Now the choice is gone.

Comment 6

[Dan Jacobson]

s/is/in/

Comment 7

[tgvita]

a year has passed and this is still of annoyance, I'm using Fedora 27, and the Inspector fonts are just waaaaay too small, if I use ctrl +/- shortcut things are even more weird, the css modify is literally dirty hack, hope they do something!

Comment 8

[tgvita]

(In reply to tgvita from comment #7)
> a year has passed and this is still of annoyance, I'm using Fedora 27, and
> the Inspector fonts are just waaaaay too small, if I use ctrl +/- shortcut
> things are even more weird, the css modify is literally dirty hack, hope
> they do something!

plus, the css hack we can find on StackOverflow or somewhere won't apply on inspector at all, but only works on the debugger & etc. The firefox Devs knew the font size varies on different platforms, why don't they give us a option or simply respect the Global settings?? Chromium did pretty well on this aspect, and their devtool are good and stable, but the lack of hardware video decode accelerate and decoders on linux sucks.

Comment 9

[Wolfgang Marcos]

If I can offer my opinion, it would be great to have a "font size scale" for developer tools. Personally, I have poor vision and already use the font scale in Cinnamon (to increase font size), but it does not affect the developer tools and, long story short, found this bug.

I believe a simple approach would be keep the current font size as default (since it appeals to so many people) and add an option to the developer tools to change font scale for those who want to change it. It may prove itself way simpler than grab the desktop font scale, considering there's a multitude of different desktops.

Comment 10

[Florens Verschelde [:fvsch]]

Bug 1458224 fixes the incoherent text size issues on Linux (or at least 95% of them).

I would love to work on an option to use bigger font-sizes.
MVP could be a "bigger font-size" option in DevTools Settings, shown in Nightly only, and progressive work to enable that in different tools. So we would have the default 11px/12px text sizes, and optionally something like 13px/14px (or maybe more).

Particularly useful for those laptops which are set to render at "1x" but with small pixels (I have one, it's a pain to read anything, and DevTools with its 11px is obviously more painful than most things).