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

RESOLVED FIXED in Firefox 21

Status

RESOLVED FIXED
6 years ago
4 months ago

People

(Reporter: paul, Assigned: paul)

Tracking

(Depends on: 1 bug)

Trunk
Firefox 21
x86
Linux
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 6 obsolete attachments)

(Assignee)

Description

6 years ago
Would be great if WebConsole and Inspector (HTML panel) could use the same font as the sourceeditor.
See also bug 819943.
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.
(Assignee)

Updated

6 years ago
Depends on: 760825
(Assignee)

Comment 3

6 years ago
Created attachment 700387 [details] [diff] [review]
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.
Assignee: nobody → paul
Status: NEW → ASSIGNED
Attachment #700387 - Flags: review?(dao)
(Assignee)

Comment 4

6 years ago
Created attachment 700388 [details]
screenshot after patch v0.1
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.
(Assignee)

Comment 6

6 years ago
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.
Attachment #700387 - Flags: review?(dao)
(Assignee)

Updated

6 years ago
OS: All → Linux
Summary: Web Console and Inspector font is (much) larger than Debugger and StyleEditor font (sourceeditor) → Web Console and Inspector font is (much) larger than Debugger and StyleEditor font (sourceeditor) [linux]
(Assignee)

Comment 7

6 years ago
Created attachment 700433 [details]
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).
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.
(Assignee)

Comment 9

6 years ago
Created attachment 701159 [details] [diff] [review]
v0.2

Mihai, could you take a look at this? It appears to work for the inspector, but not for the variable view.
Attachment #700388 - Attachment is obsolete: true
Attachment #701159 - Flags: feedback?(mihai.sucan)
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.
Attachment #701159 - Flags: feedback?(mihai.sucan)
(Assignee)

Updated

6 years ago
Blocks: 831711
(Assignee)

Comment 11

6 years ago
Created attachment 705821 [details] [diff] [review]
v1

Asking for feedback for now as this needs to be tested on Windows and Mac.
Attachment #700387 - Attachment is obsolete: true
Attachment #700433 - Attachment is obsolete: true
Attachment #701159 - Attachment is obsolete: true
Attachment #705821 - Flags: feedback?(mihai.sucan)
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.
Attachment #705821 - Flags: feedback?(mihai.sucan) → feedback+
(Assignee)

Updated

6 years ago
Depends on: 836233
(Assignee)

Comment 13

6 years ago
Created attachment 708072 [details] [diff] [review]
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).
Attachment #705821 - Attachment is obsolete: true
Attachment #708072 - Flags: review?(mihai.sucan)
(Assignee)

Comment 14

6 years ago
85% works for me.
(Assignee)

Comment 15

6 years ago
Created attachment 708097 [details] [diff] [review]
patch v2.1

tested on Linux, Mac and Windows.
Used 85%.
Attachment #708072 - Attachment is obsolete: true
Attachment #708072 - Flags: review?(mihai.sucan)
Attachment #708097 - Flags: review?(mihai.sucan)
Comment on attachment 708097 [details] [diff] [review]
patch v2.1

Looks good here. Thanks!
Attachment #708097 - Flags: review?(mihai.sucan) → review+
(Assignee)

Updated

6 years ago
Whiteboard: [land-in-fx-team]
(Assignee)

Updated

6 years ago
Blocks: 836233
No longer depends on: 836233
(Assignee)

Comment 17

6 years ago
https://hg.mozilla.org/integration/fx-team/rev/43daf9e61e11
Whiteboard: [land-in-fx-team] → [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/43daf9e61e11
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 21

Updated

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