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

Status: UNCONFIRMED

(DevTools :: General, enhancement, P3)

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]

Attachment: 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] (Use needinfo, replies may be slow)]

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

Comment 11

[Florens Verschelde :fvsch]

With work being done in bug 1520440 and related bugs, this might become possible.

Patrick, do you know if this is something we might want to pursue in 2019?

If so, we have two options:

1. Offer an arbitrary code font-size preference (between bounds, say 10px to 20px)
2. Offer a 'bigger fonts' option with a font-size that we pick (say 13px or 14px)

To be honest it might be a bunch of work to fix text elements that have a fixed height:20px or similar issues, without regressing tests. Personally I think it would be great to do anyway, but I just wanted to mention that it's not a quick fix if we want a great result. (We can also make it an 'advanced' feature and mark it as experimental, to calibrate expectations.)

Comment 12

[Patrick Brosset <:pbro>]

If this was a font-size preference , then it would be experimental by definition, because the pref wouldn't be surfaced anywhere else than in about:config. That is, until we were happy with the result and then created maybe a drop-down to select the font-size in the DevTools settings panel.
So, I can definitely see that as a possibility. Adding the pref, and then filing the bugs one by one to fix the issues with text not changing size when this pref changes.

Now, I think Victoria should also be consulted in terms of whether or not this is something we even want to allow in the UI at all.

Finally, in terms of prioritization, this wouldn't be one of our top 2019 projects for sure, so we'd have to rely on our amazing community to help fix those bugs one after the other. I think a lot of them could be good-first-bugs, so that might be a great community project in fact.
Just setting expectations.

Comment 13

[Florens Verschelde :fvsch]

One user report stating that the font-size used (monospace 11px in the Console on Windows) is too small to read: bug 1486177.

Comment 15

[dariohill]

Sure thing! What kind of development tools are you looking for? There are many different types of tools that can assist you in your development work.