Brian Grinstead [:bgrins] Assignee
	Description • 10 years ago

I've heard some feedback that it can be hard to distinguish between margins / borders and other regions on some elements. 

For instance, here is a comment about this image: https://hacks.mozilla.org/wp-content/uploads/2014/03/inspector-box-model.png.

"The colors used for the box model stuff is really horrible for someone who is colorblind. Took me a few seconds of moving my head around at different angles to even see there were more than two colors." - https://hacks.mozilla.org/2014/03/box-model-highlighter-web-console-improvements-firefox-os-hud-more-firefox-developer-tools-episode-30/comment-page-1/#comment-2159209.

Of course, it depends on the element that is being inspected, but I agree that it can be hard to distinguish (regardless of colorblindness).  I don't want to change the colors themselves since they match other tooling, but I think the easiest way to fix this would be to bump up the opacity of the overlay (it is currently .4).  I'll upload a comparison.

	Brian Grinstead [:bgrins] Assignee
	Comment 1 • 10 years ago

Darrin,
I've made a grid demoing the various opacity levels inspecting the light and dark elements here: http://jsfiddle.net/bgrins/64LvR/

The main issue I see is that even at .8, the border color on a dark border blends to look just like margin (see light element at .8 and compare with .9).  That said, I think anything more opaque than .4 would be an improvement in contrast, with the separation really starting at .8.  What do you think?  Let me know if you want to see more options.

	Brian Grinstead [:bgrins] Assignee
	Comment 2 • 10 years ago

To play a different opacity, you just need to change the value in browser/themes/shared/devtools/highlighter.inc.css right at the top: 

svg|g.box-model-container {
  opacity: 0.4;
}

Link: https://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/highlighter.inc.css#8

	Sebastian Zartner [:sebo]
	Comment 4 • 10 years ago

Honza mentioned lately that the color scheme for the highlighter may be unified across browsers.

Sebastian

	Jan Honza Odvarko [:Honza] (always need-info? me)
	Comment 5 • 10 years ago

(In reply to Sebastian Zartner from comment #4)
> Honza mentioned lately that the color scheme for the highlighter may be
> unified across browsers.
I was talking about the Network panel waterfall bars (request timings).

Honza

	Brian Grinstead [:bgrins] Assignee
	Comment 6 • 10 years ago

Since we are here already, where are the colors for the box model highlighting overlay for Firebug defined?  From what I hear, those colors may be easier to see on a variety of page backgrounds.

	Sebastian Zartner [:sebo]
	Comment 7 • 10 years ago

(In reply to Jan Honza Odvarko [:Honza] from comment #5)
> (In reply to Sebastian Zartner from comment #4)
> > Honza mentioned lately that the color scheme for the highlighter may be
> > unified across browsers.
> I was talking about the Network panel waterfall bars (request timings).
> 
> Honza

Hmm, I think to remember you were talking about both. Sorry if I'm wrong.

> where are the colors for the box model highlighting overlay for Firebug defined?
For Firebug 2 they are defined here:
https://github.com/firebug/firebug/blob/962d82bd1d31171a39a57aa7f5b14da8e1d164a3/extension/content/firebug/html/inspector.js#L1227

For Firebug 3 there were not adjusted yet, see https://github.com/firebug/firebug.next/issues/134.

Sebastian

	Brian Grinstead [:bgrins] Assignee
	Comment 8 • 10 years ago

What firebug does on the same page

	Brian Grinstead [:bgrins] Assignee
	Comment 10 • 10 years ago

Stephen, to add some context here take a look at this recent post to the mailing list: https://groups.google.com/forum/#!topic/mozilla.dev.developer-tools/fwjKu2QPPT0.

Right now I'm leaning towards just using the Firebug-specific box-model colors (as seen in attachment 8524109 [details]) as opposed to a variation on our current color (as seen in attachment 8398100 [details])

	Brian Grinstead [:bgrins] Assignee
	Comment 11 • 10 years ago

Updates the colors to match firebug (screenshots incoming)

	Patrick Brosset <:pbro>
	Comment 14 • 10 years ago

Comment on attachment 8532274 [details] [diff] [review]
highlighter-colors.patch

Review of attachment 8532274 [details] [diff] [review]:
-----------------------------------------------------------------

Let's ship this!
So, yeah, it's not as nice as before, and colors aren't completely coherent with how the toolbox is themed BUT:
- better contrast in the layout-view
- better colors for color-blind people
- and it's super easy/fast to adjust again in the future in another bug if we have better colors

	Brian Grinstead [:bgrins] Assignee
	Comment 15 • 10 years ago

https://treeherder.mozilla.org/ui/#/jobs?repo=try&revision=ad5658071fd0

	Ryan VanderMeulen [:RyanVM]
	Comment 16 • 10 years ago

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

	Ryan VanderMeulen [:RyanVM]
	Comment 17 • 10 years ago

https://hg.mozilla.org/mozilla-central/rev/ab3136b93cd0

	Tim Nguyen :ntim
	Comment 18 • 10 years ago

The new colors are hidious. If we're changing something, can we at least use our color palette ?