React-devtools: Tiny font on Firefox 52

[tambeta]

For some reason, the React tab in Firefox Dev Tools has a tiny font to the point of unreadability on my setup. I've installed React Devtools 2.3.3 to Firefox 52.1.2 built against GTK2 on Arch Linux, XFCE 4.12. Two screenshots for comparison:

• Inspector tab
• React tab

Proposed fix: the React tab should use the same font settings as the Inspector or Console tab (which in turn seem to use whatever is set as Firefox's default monospaced font). I have set a custom DPI value via xrandr to match my monitor's physical properties if that is of any relevance.

I'd be happy to use any temporary workaround (e.g. editing Firefox's userChrome.css) if you can suggest one.

[clarkbw]

Maybe @digitarald can take a look into this

[digitarald]

Tested on ESR 52 with 2.3.3 and could not reproduce this. The font size adjusts according to whatever scaling the devtools is set to, even when zooming in and out.

@tambeta could you debug the CSS using the browser toolbox if anything else changes the font size?

[tambeta]

The browser toolbox is informative. It seems that the Inspector tab uses --monospace-font-family (from global browser settings, I assume) and a relative (80%) font size:

while React Devtools seems to use hardcoded values (Menlo etc, 11px):

I would propose React Devtools to mimic the host add-on's behavior.

[digitarald]

Great find. I guess the build you reported on customized the theme font size.

[garyking]

@tambeta Did you ever find a userChrome CSS rule that could be used to temporarily fix this? The font size is too small to read for me in Firefox, and there's no way to increase its size.

Also, did the problem begin only recently before your original post on this issue? I installed v2.4.0 of the addon (the oldest version I could install, released on June 30, 2017) in Firefox 58, and the problem still exists there.

I used the Browser Inspector on the React addon, and was able to play with the font size in there, but since it seems like the addon takes place within an iframe, userChrome has no effect on its contents.

[tambeta]

@garyking Sorry, can't help you there. I haven't really looked into it, because I haven't worked with React recently. Do let me know if you happen to find a workaround, though. A very clumsy fix is to increase the global monospaced font size in browser preferences.

I can't say when the problem started, as it was present in the first version of React Devtools I ever installed (2.3.3).

[garyking]

I ended up switching to using Chrome when using the React Devtools.

[quarleswn]

Any update on this??? Firefox 61 here and the font size is still not adjustable. Wouldn't it be fairly easy and logical to add it to the "Settings" popup that appears when clicking the settings icon in the upper left?:

Great to be able to adjust the theme but it would seem font size is also a very natural choice for putting in here.

[leanderlindahl]

I have the same problem (tiny font that won't scale up) with version 3.4.3, Firefox 64.0, MacOS 10.14.1.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools