1085357 - developer tools ui too large

Status: RESOLVED WORKSFORME

(DevTools :: Framework, defect)

Description

[Johannes Raggam]

Attachment: 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.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Jeff, maybe you have some thoughts here?

Comment 2

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(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

Comment 3

[Johannes Raggam]

Attachment: 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.

Comment 4

[Jeff Griffiths (:canuckistani) (:⚡︎)]

(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

[Paul Rouget [:paul]]

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).

Comment 6

[Johannes Raggam]

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.