Add a font-size options in the devtools options' panel

NEW
Unassigned

Status

()

Firefox
Developer Tools
P3
enhancement
4 years ago
6 days ago

People

(Reporter: Gérard Talbot, Unassigned)

Tracking

({access})

Trunk
access
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: Work around: cmd/ctrl +/-/0 on the focused devtools frame)

(Reporter)

Description

4 years ago
If I examine a webpage with Developer Tools' Inspector, I should be able to set the font size affecting of both source view pane (on the left handside) and CSS values (Rules, Computed, Fonts, Box Model) pane (on the right handside).

Opera 12.16 DragonFly allows users to do this. Opera 12.16 DragonFly allows users to even set the line height and the font family for the same webpage debugging+inspection corresponding panes. Screenshot available if requested.

Consider this as a "hard to read for over 40 years old" kind of bug report.

Additionally, when I set monospaced font from default 12px to 16px (Edit/Preferences/Content tab/Advanced... button/Fixed Width) under Linux, this will positively impact (positive repercussion) Ctrl+U source view and the CSS Style sheet Editor ... but it won't affect Developer Tools' Inspector panes.


Additional notes
----------------
- I have searched for duplicates and did not find any
- KDE 4.12.0, Linux 3.11.0-15-generic x86_64, Qt: 4.8.4, Kubuntu 13.10 saucy here
- adding access keyword
- Firefox 26, buildID = 20131206145143 here
- +CC Felix Miata
- Hardware and OS both set to All

Comment 1

4 years ago
"Consider this as a "hard to read for over 40 years old" kind of bug report."

Exactly.  This falls into the area of accessibility, which a lot of people think of as "disability options".  Yes, there are accessibility features that allow low vision users to access software, but increasing a font size also allows full vision users with older eyes to access the software too.
(Reporter)

Comment 2

4 years ago
Steps to reproduce
------------------
- click the gear icon (with tooltip "Tools' options") at upper left corner of developer tools bar

Actual results
--------------
- there is no way to set the font size of text in Web console, Inspector, Style Editor, etc..

Expected results
----------------
- there should be a way (like a drop-down menu list of font size) to set the font size of text in Web console, Inspector, Style Editor, etc..
The devtools' fontsize can now be changed with the usual cmd/ctrl +/-/0 just like you would on a webpage.
The devtools frame needs to be focused first for this to work, otherwise the actual page's font will be changing.
I think cmd/ctrl mouse-wheel doesn't work though.

I'm not sure whether we should add a drop-down in the options panel too.
(Reporter)

Comment 4

4 years ago
> The devtools' fontsize can now be changed with the usual cmd/ctrl +/-/0 

Yes! Confirmed in Firefox 28.0 (buildId == 20140410211200)
and the font size change is remembered, memorized too when I <Ctrl>+<Shift>+C another tab.

> I think cmd/ctrl mouse-wheel doesn't work though.

<Ctrl>+mousewheelrolling does not work.

> I'm not sure whether we should add a drop-down in the options panel too.

Well, I believe a drop-down of font-size values in the options panel is welcomed ... albeit it may be now less urgent to implement since there is now a known workaround. If a normal user does not see an interface for setting his preferences for font-size for webpage inspection (devtools), (s)he will be lead to believe there is no way to set this.

Thank you very much for implementing this!! 

Gérard
(Reporter)

Updated

4 years ago
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: Work around: cmd/ctrl +/-/0 on the focused devtools frame
Component: Developer Tools: Inspector → Developer Tools
Summary: Ability to set font size of Style and DOM Inspector for both panes (Source view pane on left and Rules+Computed+Fonts+BoxModel pane on right) → Add a font-size options in the devtools options' panel
(Reporter)

Updated

2 years ago
See Also: → bug 900173
(Reporter)

Comment 5

2 years ago
See also bug 900173

I think we should resolve bug 900173 as a DUPLICATE of this bug.
Component: Developer Tools → Developer Tools: Inspector
Component: Developer Tools: Inspector → Developer Tools
Priority: -- → P3
This comes up several times during workshops (as it came up today).
I'm aware of the Ctrl/Cmd-[+] shortcut, but it's tricky (one has to know the shortcut, the devtools frame has to be focused etc.), and also fails on at least Hungarian (but also possibly other) keyboard layouts on OSX:

Cmd-[+] on Hungarian layouts would have to use Cmd-[Shift-3], as "plus" is located over the number [3] key. This, as you'd expect fails on OSX, as this conflicts with the default screenshot shortcut on that system. Only workaround is going into keyboard settings, adding an US/GB layout (or similar) switching to it and using -/+ keys besides Delete as one would use on an US keyboard to actually make this change. "This is madness."

I'd also like to advocate for a similar control to those in the Firefox "hamburger" menu, that is, plus/minus buttons to increase/decrease devtools font size.
Severity: normal → enhancement
You need to log in before you can comment on or make changes to this bug.