1067422 - Change colour of cross on style editor

Status: NEW

(DevTools :: Style Editor, defect, P3)

Description

[kud]

Attachment: bug

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:35.0) Gecko/20100101 Firefox/35.0
Build ID: 20140914030209

Steps to reproduce:

The cross isn't really visible.



Expected results:

The cross could be white or something "light".

Comment 1

[kud]

Plus, the left cross isn't really well vertical-aligned.

Comment 2

[Patrick Brosset <:pbro>]

Plus, the cross on the left isn't really supposed to be a cross at all, it's supposed to represent the fact that there's been an error. This error icon confuses me every time and I try and click on it.

Comment 3

[kud]

Yes, Patrick! The red colour should be enough to say it's an error. It's unneeded.

Comment 4

[Jacob Clark]

Hi, I'd like to pick this up, after looking through the source I can see that the icon is inheriting from a sprite resource with four coloured 'x' light and dark from the global.css stylesheet `.close-icon`. 

Where would be the best place to overwrite the `-moz-image-region` to display the lighter coloured 'x'? 

Thanks.

Comment 5

[Jacob Clark]

After further investigation this seems to be an issue with the core XUL and will need further investigation there, however as a temporary fix to this issue I suggest we could degrade a missing stylesheet `error` to simply a `warning` or override the styling of the button elsewhere (other than the core component styling).

Comment 6

[Patrick Brosset <:pbro>]

The notificationbox XUL element that we use for this alert is at toolbox.xul level [1]. The toolbox is the container for all the tools we have. Each and every tool in the toolbox lives in its own iframe, and so whatever stylesheet a tool has does not affect anything outside of the tool itself, because of the iframe.

I suggest we override the CSS that applies to this element at the toolbox stylesheet level. Maybe common.css [2] is the right candidate for this.

In this stylesheet, you could override the rule with a selector like "notification .close-icon" and then mess around with the -moz-image-region property to display the brighter image?

Having said that, I think the bigger problem in this notification box is the fact that the error icon on the left hand side looks a lot like a close icon and draws too much attention to it.
"notification .messageImage {display:none;}" would hide it altogether and would therefore make the real close icon much more obvious.

Note that once you've changed the stylesheet, you need to rebuild the theme by running "mach build browser" and then restart with "mach run" (I don't know if you've done this before, so here is our guide to hacking the devtools: https://wiki.mozilla.org/DevTools/Hacking).

[1] http://mxr.mozilla.org/mozilla-central/source/browser/devtools/framework/toolbox.xul#68
[2] http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/common.css

Comment 7

[Lin Clark [:linclark]]

I found this when looking for easy issues to work on. Jacob, would you mind if I take this on, or are you still planning to work on it?

Comment 8

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

(In reply to Lin Clark from comment #7)
> I found this when looking for easy issues to work on. Jacob, would you mind
> if I take this on, or are you still planning to work on it?

Lin, feel free to take a look at this!

Comment 9

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).