React: Dev tools does not respect zoom level on firefox OSX

[andyhmltn]

Currently when using the react dev tools on Firefox OSX, I am unable to change the current zoom level. The default zoom level is quite small so even with good eyesight, I struggle to read it on a high resolution display.

It is possible to adjust the zoom level of the Firefox dev tools as a whole, by focusing the panel and using CMD +/-. However the React dev tools does not respect this and has no option to switch the zoom level manually. As a result, the react dev tools extension is unusable on Firefox. I would imagine this is a bigger issue for anyone with poor eyesight.

Can we please add some accessibility options or fix this behaviour?

[bvaughn]

Not sure why this wouldn't work, since all of the DevTools styles use REM units.

Have you seen the "display density" setting? You might like the "Comfortable" setting better. (Bigger font.)

[andyhmltn]

Interesting, thank you for your help. So it appears as if that does go someway to solving the problem. It bumps the text size up a little, but still, the size does not respond to the zoom level so I can't increase it any further. For my eye sight, the bumped text size seems to be okay. But I can imagine how someone that maybe can't see as well would still need to adjust it.

I remember seeing this option when I tried this morning, but there appears to be a separate bug in the developer edition of Firefox. The options for that dropdown appear off screen, so I'm unable to select either:

(The white box in the top right seems to be the options, displayed slightly offscreen)

But with the normal edition of Firefox, although there still is an issue, I can actually see (and select) the options:

I'm guessing the zoom issue is a problem with the way Firefox handles developer extensions because I have a similar problem with the Redux dev tools.

[bvaughn]

I'm guessing the zoom issue is a problem with the way Firefox handles developer extensions because I have a similar problem with the Redux dev tools.

Yeah, I think this must be the case.

Sorry for the inconvenience here. Hopefully someone can pick this up and take a look soon.

[hardikmodha]

@andyhmltn Can you try holding Ctrl and scrolling your mouse wheel while the devtools have focus? It should work.

Reference: https://www.reddit.com/r/firefox/comments/9fowcn/firefox_devtools_font_size_inconsistently_tiny/e5y6gdg/

[erabhimanyu]

This works @hardikmodha thanks. Equivalent for mac drag 2 fingers + cmd should work.

[andyhmltn]

@hardikmodha Fantastic, that's actually solved it! Not super obvious, but that's exactly what I was after. Appears to work in the redux dev tools as well. I can finally use Firefox 😄 🎉 Thanks for your help

[andyhmltn]

Gonna re-open this as it doesn't appear that clicking + dragging saves that zoom at all. Great work around but it resets on new tabs etc

[bvaughn]

This doesn't sound like something we can actually fix in React DevTools. Zoom level should be something that browser stores and restores, no?

[hardikmodha]

@andyhmltn I agree with Brian on this. The same issue also exists with another extension (redux-devtools) as you mentioned.

[andyhmltn]

That’s a fair point. Although a change at the Firefox level would mean that
Cmd+scroll saves between sessions, which doesn’t seem like the intended
behaviour for a majority of the time. It would just be nice for some
accessibility controls in the extension. Not only on zoom levels I guess,
but things like colour, also.

On Tue, 20 Aug 2019 at 19:22, Hardik Modha [e-mail] wrote:

@andyhmltn https://github.com/andyhmltn I agree with Brian on this. The
same issue also exists with another extension (redux-devtools) as you
mentioned.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/16413?email_source=notifications&email_token=AAHD5AMA6RQRTUYDRZ3XJUTQFQY77A5CNFSM4IMFB6GKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XGJVY#issuecomment-523134167,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHD5AICXU3OUVFTHA45CQTQFQY77ANCNFSM4IMFB6GA
.

>

---

Andy Hamilton
Designer, Developer & SysAdmin

Ruby/Python/PHP

[bvaughn]

It would just be nice for some accessibility controls in the extension. Not only on zoom levels I guess, but things like colour, also.

Not sure I understand what you mean by this.

Are you saying that the extension is also forgetting your chosen theme between reloads?

[andyhmltn]

No not at all. I apologise, the inclusion of colour there was a bit silly
because like you say, you can change the theme. I forgot about this.

It would just be nice just not to have to zoom every time the dev tools are
open. I will of course submit a bug to Firefox, but I’m guessing the fact
that it doesn’t save is intended behaviour. Thanks for your help, I’ll
close this issue if this is something you believe should be fixed at the
browser level.

On Tue, 20 Aug 2019 at 21:13, Brian Vaughn [e-mail] wrote:

It would just be nice for some accessibility controls in the extension.
Not only on zoom levels I guess, but things like colour, also.

Not sure I understand what you mean by this.

Are you saying that the extension is also forgetting your chosen theme
between reloads?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/16413?email_source=notifications&email_token=AAHD5AMC3AILNIED332TKALQFRF7TA5CNFSM4IMFB6GKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4XQDMY#issuecomment-523174323,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAHD5AJEBTQSIQGWQXIGA2LQFRF7TANCNFSM4IMFB6GA
.

>

---

Andy Hamilton
Designer, Developer & SysAdmin

Ruby/Python/PHP

[bvaughn]

Thanks for clarifying.

So far as I'm aware, this is something that should be reported to Firefox - yes.

If I open a website in Firefox, use cmd+ several times to make the text larger, then restart Firefox - it remembers the larger text size. I would expect it to do the same for an extension.

[andyhmltn]

Fair enough. Will open an issue. Thanks 👍