1348254 - Update color palette for grid highlighters in the layout panel

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P2)

Description

[Julian Descottes [:jdescottes]]

The default colors proposed in the layout panel are too bright and hard to see on most grid demo sites we have available.

The first color should be the same dark purple as the one proposed when creating the highlighter from the rule view.

Comment 1

[Julian Descottes [:jdescottes]]

Attachment: Bug 1348254 - grid inspector: update grid inspector colors;

Review commit: https://reviewboard.mozilla.org/r/125992/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/125992/

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: grid_inspector_default_color_revert.png

Since we currently cannot display more than one grid, we were thinking about going back to having a single default color (the dark purple we have today on release: #4B0082).

Jen, let us know if you'd still prefer to have different default colors.

Comment 3

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8853985 [details]
Bug 1348254 - grid inspector: update grid inspector colors;

https://reviewboard.mozilla.org/r/125992/#review128648

Comment 4

[Jen Simmons [:jensimmons]]

I'm torn about this. On the one hand, let's keep to our roadmap and setup the mental model for future users now. On the other hand, maybe it is better to have one color, and figure out the rest later. Mostly I'm frustrated with this process of not designing the overall system, and instead making important products and design decisions in tiny separate conversations, without enough time to consider or see the whole. No good design work is ever done in such a fashion. Projected designed in this way end up scattered and disjoined. 

I don't have time (or the authority) to think about the whole system. And so, I do not know what the wise decision is. Any of us could argue our personal opinion. But again, that's not how good design work is done. 
"I personally don't like the colors" is a place to start, but not a compelling solution. Engineering should be done from a longer-term design-driven roadmap.

Having separate colors is not just about making it clear which grid is which when multiple grids are turned on. It's about setting up a helpful mental model in the dev-tool user's mind, so they understand what's happening — how grid works, what they've built. 
 
I'm sorry that I don't have a couple days to get into this. I just can't.

Comment 5

[Julian Descottes [:jdescottes]]

Comment on attachment 8853985 [details]
Bug 1348254 - grid inspector: update grid inspector colors;

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/125992/diff/1-2/

Comment 6

[Patrick Brosset <:pbro>]

Thanks Jen. You are right and I agree. We did have overall designs before starting to work on the new layout panel though: https://projects.invisionapp.com/share/3X87NEBYH#/screens/179720294
I'm afraid they just didn't go that far into the details. So we need some more designer time on this. Unfortunately, although this might change very soon, we don't have a designer currently available for working on DevTools.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/07b054e43bb6
grid inspector: update grid inspector colors;r=gl

Comment 8

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/07b054e43bb6

Comment 9

[Sajedul Islam]

I have reproduced this bug with Nightly 55.0a1 (2017-03-17) on Windows 8.1 , 64 Bit ! 

This bug's fix is Verified with latest Nightly 55.0a1 !

Build ID 	20170520030204
User Agent 	Mozilla/5.0 (Windows NT 6.3; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0

[testday-20170519]