573840 - Web Console styling is broken with a Persona

Status: VERIFIED FIXED

(DevTools :: General, defect)

Description

[David Dahl :ddahl]

:root:-moz-lwtheme-brighttext {
  text-shadow: 1px 1px 2px black;
}

in chrome://global/skin/global.css seems to add a text-shadow to log entries in the HeadsUpDisplay/web console

Screenshot here: http://yfrog.com/0sdominspectoraddonsforfip

This is with the Robot theme enabled, but seems to be code in fx css.

Comment 1

[Dão Gottwald [:dao]]

You need to stop the text-shadow inheritance, i.e. set text-shadow: none, on the element that has the white background.

Comment 2

[Patrick Walton (:pcwalton)]

Broadening the scope of this bug to include all of the Web Console styling under a Persona.

Comment 3

[Patrick Walton (:pcwalton)]

Attachment: Mac screenshot as of Firefox 4 beta 3.

Screenshot attached (slightly out of date, since it's of beta 3).

Comment 4

[Dietrich Ayala (:dietrich)]

non-primary UI + non-default option (persona) means this doesn't block. would accept a well-tested patch.

Comment 6

[Mike Kaply [:mkaply]]

Where's the Web Console code?

Comment 7

[Patrick Walton (:pcwalton)]

(In reply to comment #6)
> Where's the Web Console code?

The code is in toolkit/components/console/hudservice/. The themes are in toolkit/themes/*stripe/global/webConsole.css.

Comment 8

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch, part 1.

Patch part 1 fixes the styling on the Mac.

Comment 9

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch, part 1, version 2.

New version of part 1 of the patch removes the shadow everywhere on the Mac, not just in the output node.

Comment 10

[Patrick Walton (:pcwalton)]

Attachment: Post-patch Mac screenshot.

Here's a screenshot of what the Console looks like on the Mac with this patch and a Persona applied.

Comment 11

[Rob Campbell [:rc] (:robcee)]

colorful.

Comment 12

[Dão Gottwald [:dao]]

Comment on attachment 472062 [details] [diff] [review]
Proposed patch, part 1, version 2.

> .hud-box {
>     border-bottom: 1px solid #aaa;
>+    text-shadow: none !important;

drop !important

>-.hud-console-filter-toolbar {
>+.hud-console-filter-toolbar, .hud-console-filter-toolbar:-moz-lwtheme {

This looks unnecessary.

Comment 13

[Kevin Dangoor]

Comment on attachment 472062 [details] [diff] [review]
Proposed patch, part 1, version 2.

removing review request that I added earlier until Dao's comment is addressed and this has been updated for Windows and Linux.

Comment 14

[Mihai Sucan [:msucan]]

Patrick: I can't comment on this since I don't own a Mac and I can't test the patch. When you have the changes ready for Linux as well, I can comment.

Otherwise, I believe it is acceptable - by looking into the screenshots. I'd also agree with Dão - the !important priority should not be required.

Comment 15

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch, version 3.

Comment 16

[Patrick Walton (:pcwalton)]

New patch adds Windows and Linux support. Review requested.

Comment 17

[Kevin Dangoor]

Re-requesting blocking. johnath thinks this is likely a blocker because possibly ~25% of our users use Personas and they can render the console output unintelligible.

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 474110 [details] [diff] [review]
Proposed patch, version 3.

>--- a/toolkit/themes/gnomestripe/global/webConsole.css
>+++ b/toolkit/themes/gnomestripe/global/webConsole.css

>+.hud-console-filter-toolbar:-moz-lwtheme {
>+    border-top: @scopeBarSeparatorBorder@ !important;

There's no scopeBarSeparatorBorder for gnomestrip.

>--- a/toolkit/themes/winstripe/global/webConsole.css
>+++ b/toolkit/themes/winstripe/global/webConsole.css

> .hud-console-filter-toolbar {
>+    color: -moz-dialogtext !important;
>     padding: 1px 0px;
>     -moz-box-align: center;
> }

This doesn't seem to be needed, at least on Windows.

>+.hud-console-filter-toolbar:-moz-lwtheme {
>+    border-top: @scopeBarSeparatorBorder@ !important;

Winstripe doesn't have this either.

Comment 19

[Patrick Walton (:pcwalton)]

Attachment: Proposed patch, version 4.

New patch addresses review comments.

Comment 20

[Dão Gottwald [:dao]]

Comment on attachment 475715 [details] [diff] [review]
Proposed patch, version 4.

>--- a/toolkit/themes/gnomestripe/global/webConsole.css
>+++ b/toolkit/themes/gnomestripe/global/webConsole.css

> .hud-console-filter-toolbar {
>+    color: -moz-dialogtext !important;
>     padding: 1px 0px;
>     -moz-box-align: center;
> }

This is also not needed.

>--- a/toolkit/themes/pinstripe/global/webConsole.css
>+++ b/toolkit/themes/pinstripe/global/webConsole.css

> .hud-console-filter-toolbar {
>     background: @scopeBarBackground@ !important;
>-    border-bottom: @scopeBarSeparatorBorder@;
>+    border-bottom: @scopeBarSeparatorBorder@ !important;
>+    color: -moz-dialogtext !important;
>     padding: 0px 1px;
>     -moz-appearance: none !important;
>     -moz-box-align: center;
> }

I suppose the color isn't needed here either.

Comment 21

[Patrick Walton (:pcwalton)]

Attachment: [checked-in] Proposed patch, version 5.

New patch addresses review comments. Re-review requested.

Comment 22

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 476094 [details] [diff] [review]
[checked-in] Proposed patch, version 5.

http://hg.mozilla.org/mozilla-central/rev/38c0f5de0401