Allow users to change code font-size in Developer Tools




Developer Tools
11 months ago
10 months ago


(Reporter: Florens Verschelde, Unassigned)


Firefox Tracking Flags

(Not tracked)



(1 attachment)



11 months ago
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*), 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

11 months ago
Created attachment 8813096 [details]

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

11 months ago
Dupe to bug 858765?
Severity: normal → enhancement
Helen, any thoughts on this subject?
Flags: needinfo?(hholmes)
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).
Flags: needinfo?(hholmes)
Priority: -- → P5
Priority: P5 → P3

Comment 5

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

Comment 6

10 months ago
You need to log in before you can comment on or make changes to this bug.