989053 - Make box model regions on page content more visible

Status: RESOLVED FIXED

(DevTools :: Framework, defect)

Description

[Brian Grinstead [:bgrins]]

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.

Comment 1

[Brian Grinstead [:bgrins]]

Attachment: highlighter-colors.png

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.

Comment 2

[Brian Grinstead [:bgrins]]

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

Comment 4

[Sebastian Zartner [:sebo]]

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

Sebastian

Comment 5

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(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

Comment 6

[Brian Grinstead [:bgrins]]

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.

Comment 7

[Sebastian Zartner [:sebo]]

(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

Comment 8

[Brian Grinstead [:bgrins]]

Attachment: firebug-colors.png

What firebug does on the same page

Comment 9

[Brian Grinstead [:bgrins]]

Attachment: chrome-colors.png

Comment 10

[Brian Grinstead [:bgrins]]

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])

Comment 11

[Brian Grinstead [:bgrins]]

Attachment: highlighter-colors.patch

Updates the colors to match firebug (screenshots incoming)

Comment 12

[Brian Grinstead [:bgrins]]

Attachment: on-dark-theme.png

Comment 13

[Brian Grinstead [:bgrins]]

Attachment: on-light-theme.png

Comment 14

[Patrick Brosset <:pbro>]

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

Comment 15

[Brian Grinstead [:bgrins]]

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

Comment 16

[Ryan VanderMeulen [:RyanVM]]

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

Comment 17

[Ryan VanderMeulen [:RyanVM]]

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

Comment 18

[Tim Nguyen :ntim]

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