826685 - Web Console and Inspector font is (much) larger than Debugger and StyleEditor font (sourceeditor) [linux]

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Paul Rouget [:paul]]

Would be great if WebConsole and Inspector (HTML panel) could use the same font as the sourceeditor.

Comment 1

[Victor Porof [:vporof][:vp]]

See also bug 819943.

Comment 2

[Mihai Sucan [:msucan]]

Please note that currently only the web console and the inspector font sizes adjust automatically based on the system font size setting. I agree, we should sync all font sizes.

Also take into consideration bug 760825.

Comment 3

[Paul Rouget [:paul]]

Attachment: v0.1 (linux)

On Linux (Ubuntu, default configuration), the font in the inspector panels (markup view and sidebar) is too big (14.6px per DOMi). We want something smaller (basically, the size of the text we see in view-source, or any basic content page. 12px here).

Using font-size:inherit appears to work. But I don't understand why.

Comment 4

[Paul Rouget [:paul]]

Attachment: screenshot after patch v0.1

Comment 5

[Mihai Sucan [:msucan]]

Paul: tested this patch and I see it makes the markup panel and the sidebars to no longer respect system font sizes. :( Font size is always the same.

Comment 6

[Paul Rouget [:paul]]

Comment on attachment 700387 [details] [diff] [review]
v0.1 (linux)

Cancelling review.

I need to understand better how fonts work. I think the current size is the right one, for Ubuntu standards. But this is not satisfying me.

Comment 7

[Paul Rouget [:paul]]

Attachment: screenshot Ubuntu (no patch)

Code editors in Ubuntu have the same font-size as our tools (beside the sourceeditor, but that's another story).

But this font size is bugging me because it's much larger than what we find on the web (see the <pre> in the screenshot).

Also, because our tools are tight into the toolbox, we want to be space efficient.

I suggest that the "code" part of our tools (sourceeditor, markup view, rule view, etc.) use the size of a <pre> (content size). we would also make sure this size can be changed (see bug 760825 comment 9).

Comment 8

[Mihai Sucan [:msucan]]

Yesterday on IRC I talked to paul and I suggested the following:

The Web Console, the markup panel and the side panels have no font size issues - they follow the system font size setting properly. If these fonts are too big let's just lower their CSS em value (or percentage, or whatever relative unit we pick). There's not much else to be done her, really.

The source editor just needs to follow the same approach. And that is going to be fixed by bug 760825.

If you want, you can also change orion.css - my Orion patches will need rebasing anyway. So, go ahead and pick a value that has the same size as the web console/markup panel/side panels.

Please make sure the variables view is also synced to the same size.

Comment 9

[Paul Rouget [:paul]]

Attachment: v0.2

Mihai, could you take a look at this? It appears to work for the inspector, but not for the variable view.

Comment 10

[Mihai Sucan [:msucan]]

Comment on attachment 701159 [details] [diff] [review]
v0.2

I just noticed the markup panel is an HTML document. :( XUL is nicer to system font settings.

I suggest: html { font-size: -moz-use-system-font; } then you can use the relative font sizes for the rest of elements.

Comment 11

[Paul Rouget [:paul]]

Attachment: v1

Asking for feedback for now as this needs to be tested on Windows and Mac.

Comment 12

[Mihai Sucan [:msucan]]

Comment on attachment 705821 [details] [diff] [review]
v1

This is it. It works now as desired - font sizes adjust in all tools based on system font sizes.

We also need a similar update for pinstripe and winstripe.

Personal tastes:

- I would suggest that the font-size should be increased from 80% to at least 85% (which is about right). 80% feels small for me - even with the large font settings I have on my system. It also feels a bit smallish within the expected font-sizes throughout Firefox and other system apps. Maybe I'm wrong - I leave it up to you: I won't mind either way.

- Variables view looks much nicer without monospace fonts. I see you changed it to use the monospace font.

Thank you! I'm glad to see this bug is getting fixed.

Comment 13

[Paul Rouget [:paul]]

Attachment: patch v2

(In reply to Mihai Sucan [:msucan] from comment #12)
> - I would suggest that the font-size should be increased from 80% to at
> least 85% (which is about right). 80% feels small for me - even with the
> large font settings I have on my system. It also feels a bit smallish within
> the expected font-sizes throughout Firefox and other system apps. Maybe I'm
> wrong - I leave it up to you: I won't mind either way.

For the moment, I'll keep it at 80%. I'll take a closer look at this today.

> - Variables view looks much nicer without monospace fonts. I see you changed
> it to use the monospace font.

You're right.

Please review this patch as it is. I might change the value to 85% before checking. This patch as been tested on Linux and Windows. It should look ok on mac (I will verify before checkin, clobber is in progress).

Comment 14

[Paul Rouget [:paul]]

85% works for me.

Comment 15

[Paul Rouget [:paul]]

Attachment: patch v2.1

tested on Linux, Mac and Windows.
Used 85%.

Comment 16

[Mihai Sucan [:msucan]]

Comment on attachment 708097 [details] [diff] [review]
patch v2.1

Looks good here. Thanks!

Comment 17

[Paul Rouget [:paul]]

https://hg.mozilla.org/integration/fx-team/rev/43daf9e61e11

Comment 18

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/43daf9e61e11