developer tools ui too large

RESOLVED WORKSFORME

Status

RESOLVED WORKSFORME
4 years ago
3 months ago

People

(Reporter: raggam-nl, Unassigned)

Tracking

33 Branch
x86_64
Linux

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments)

(Reporter)

Description

4 years ago
Created attachment 8507868 [details]
Screenshot from 2014-10-20 15:23:48.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:33.0) Gecko/20100101 Firefox/33.0
Build ID: 20141015093046

Steps to reproduce:

Open developer tools <ctrl><shift><i>

I'm using Fedora Linux 20 on a Macbook Air 13'' with a resolution of 1440x900. screen space is precious at this small screens. event on my external full-hd monitor i prefer better usage of screen space.


Actual results:

Firefox developer tools' UI elements are too large. Compared to google chrome, developer tools' buttons take twice the space then google's. see the attached screenshot.


Expected results:

Smaller interface elements, which take less space - except on mobile devices.
optimal solution would be to have some sort of configuration options. e.g. configurable fonts for text areas and ui elements, as well as small, medium and large paddings between interface elements.
(Reporter)

Updated

4 years ago
Component: Untriaged → Developer Tools
Jeff, maybe you have some thoughts here?
Component: Developer Tools → Developer Tools: Framework
Flags: needinfo?(jgriffiths)
(In reply to J. Ryan Stinnett [:jryans] from comment #1)
> Jeff, maybe you have some thoughts here?

I am generally interested in making sure we don't use up too much space on small screens. We did a bunch of work on this previously in bug 915414. To me the supplied screenshot looks somewhat worse than what I see on OS X[1], so perhaps there are extra issues on Linux? We may be sensitive to gtk font sizes in ways chrome isn't. But you can also see from my screenshot that we are still 'spacier' / have more padding and larger fonts than chrome.

I think I've stressed this before - the most common screen resolution desktop right now is 1366x768[2] by a pretty far margin. We're gathering telemetry data right now to get an idea of what this looks like for people using our tools, see bug 1046234.

[1] http://note.io/1rY3g9j
[2] http://gs.statcounter.com/#desktop-resolution-ww-monthly-201309-201409
Flags: needinfo?(jgriffiths)
Status: UNCONFIRMED → NEW
Ever confirmed: true
(Reporter)

Comment 3

4 years ago
Created attachment 8508134 [details]
Screenshot from 2014-10-20 21:17:04.png

another screenshot with a 8px font setting (actually, 10px, scale factor 0.8). by the way, i'm using adwaita theme, the dark style one.
(In reply to Johannes Raggam from comment #3)
> Created attachment 8508134 [details]
> Screenshot from 2014-10-20 21:17:04.png
> 
> another screenshot with a 8px font setting (actually, 10px, scale factor
> 0.8). by the way, i'm using adwaita theme, the dark style one.

Thanks for following up. It really looks to me like there's something wrong on Linux. Let's use this bug to track that in particular, but I also think it's worthwhile reviewing padding generally. I've logged bug 1085594 to track the larger issue and put it into our backlog.

Comment 5

4 years ago
This is the code we use: http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/common.css#11

We try to be proportional to the system font size. But on Linux, this makes the font huge. So we already shrink the font to 80%.

I believe we should just use the font size used by web pages, not by the system (font metric is different for content).
(Reporter)

Comment 6

4 years ago
i just found out by accident, that you can use <CTRL><+> and <CTRL><-> to increase/decrease the inspectos font size. that does the trick for me, almost. i'm closing this bug.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → WORKSFORME

Updated

3 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.