Closed Bug 803984 Opened 10 years ago Closed 10 years ago

Convert all fonts to monospace

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 20

People

(Reporter: rcampbell, Assigned: rcampbell)

References

Details

(Whiteboard: [fixed-in-fx-team])

Attachments

(1 file, 3 obsolete files)

Some of our inspector tools (style inspector, markup view) have variable-width fonts. They should all be monospace.
Attached patch mono (obsolete) — Splinter Review
seems to do the trick.

http://cl.ly/KKzd
Assignee: nobody → rcampbell
Status: NEW → ASSIGNED
Attachment #673984 - Flags: review?(paul)
Blocks: 786204
Comment on attachment 673984 [details] [diff] [review]
mono

> browser/themes/gnomestripe/devtools/common.css
>+  font-family: "DejaVu Sans Mono", monospace;

Why DejaVu? Can we just use monospace? I'm not sure we want to force the font family on Linux (but it's ok for Windows and Mac).

>+  font-size: 11px;

We try to avoid fixed sizes. If you really need it for a tool, can you move it into the tool's CSS file?

>+body {
>+[…]
>+}


>+window {
>+[…]
>+}

This is a bit too aggressive. Can we introduce a class?
> <window class="devtools-code-window">
> <body class="devtools-code-window">
> 
> .devtools-code-window {
>   […];
> }
Attachment #673984 - Flags: review?(paul) → review-
(In reply to Paul Rouget [:paul] from comment #2)
> Comment on attachment 673984 [details] [diff] [review]
> mono
> 
> > browser/themes/gnomestripe/devtools/common.css
> >+  font-family: "DejaVu Sans Mono", monospace;
> 
> Why DejaVu? Can we just use monospace? I'm not sure we want to force the
> font family on Linux (but it's ok for Windows and Mac).

I'm mimicking the font settings from webconsole.css.

> >+  font-size: 11px;
> 
> We try to avoid fixed sizes. If you really need it for a tool, can you move
> it into the tool's CSS file?

For whatever reason, the font-size of the markup panel is enormous without specifying it. Maybe it's pulling my default font size from preferences? not sure, but maybe worth investigating.

> >+body {
> >+[…]
> >+}
> 
> 
> >+window {
> >+[…]
> >+}
> 
> This is a bit too aggressive. Can we introduce a class?

Sure.

> > <window class="devtools-code-window">
> > <body class="devtools-code-window">
> > 
> > .devtools-code-window {
> >   […];
> > }

updates to follow...
Duplicate of this bug: 786204
Attached patch mono 2 (obsolete) — Splinter Review
removed blanket body, window rules. Added font-size: inherit (same as orion.css, inherits from system). Removed specific font-families, now using monospace everywhere. Added the .monocode class to contain it.

Currently only affects the markup view but could add the style inspector, computed views as well.
Attachment #673984 - Attachment is obsolete: true
Attachment #682787 - Flags: review?(paul)
(In reply to Rob Campbell [:rc] (:robcee) from comment #5)
> Added font-size: inherit (same as orion.css, inherits from system).

"inherit" inherits from the parent node, not from the system. It should be a no-op for the body in markup-view.xhtml.
OS: Mac OS X → All
Hardware: x86 → All
What happens if you don't specify the font-size? Font-size should be specified at the tool level.
What stops you from using .monocode for the sidebar tools?
(In reply to Dão Gottwald [:dao] from comment #6)
> (In reply to Rob Campbell [:rc] (:robcee) from comment #5)
> > Added font-size: inherit (same as orion.css, inherits from system).
> 
> "inherit" inherits from the parent node, not from the system. It should be a
> no-op for the body in markup-view.xhtml.

nuts, I didn't look deeply enough. Orion has a font-size: 10pt; rule here:

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/sourceeditor/orion/orion.css#12

That's the real source of the inherit.

(In reply to Paul Rouget [:paul] from comment #7)
> What happens if you don't specify the font-size? Font-size should be
> specified at the tool level.
> What stops you from using .monocode for the sidebar tools?

I can try it without the font-size, paul. Initial attempt to put .monocode in the sidebar tools was failing.
Comment on attachment 682787 [details] [diff] [review]
mono 2

canceling review request.
Attachment #682787 - Flags: review?(paul)
I'd also advocated for devtools-monospace rather than the slightly cryptic monocode...
(In reply to Dão Gottwald [:dao] from comment #10)
> I'd also advocated for devtools-monospace rather than the slightly cryptic
> monocode...

Yes, that does sound better. Thanks!
Attachment #682787 - Attachment is obsolete: true
Comment on attachment 685433 [details] [diff] [review]
Convert all fonts to monospace, v3

I took another crack at this and it's looking somewhat better. I'm not 100% happy with it though. The font sizes are inconsistent with the other tools (debugger, scratchpad) and hard-coded at 12px which looked good on my system, might not elsewhere.

Would love suggestions.
Attachment #685433 - Flags: review?(paul)
Did you try font: message-box; font-family: monospace;?
font: message-box; font-family: monospace; looks good here.
Attachment #685433 - Attachment is obsolete: true
Attachment #685433 - Flags: review?(paul)
Attachment #685804 - Flags: review?(paul)
Attachment #685804 - Flags: review?(paul) → review+
fixed in fx-team
https://hg.mozilla.org/integration/fx-team/rev/39b1337c33e8
Whiteboard: [fixed-in-fx-team]
https://hg.mozilla.org/mozilla-central/rev/39b1337c33e8
Status: ASSIGNED → RESOLVED
Closed: 10 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 20
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.