1383329 - Use a different colour to identify negative line numbers

Status: RESOLVED WONTFIX

(DevTools :: Inspector, enhancement)

Description

[Micah Tigley [:micah]]

Currently negative line number boxes would have the same colour as positive line number boxes. We should have a different colour for negative line numbers that would complement the main CSS Grid colour. 

See design here: https://github.com/ZER0/grid-negative-numbers/wiki#colors

Comment 1

[Jen Simmons [:jensimmons]]

I really do not like this idea. 

I believe everything for one Grid should be the same color — the lines, the area names, the line names, the positive numbers and the negative numbers. Then, for a second Grid, there should be a second color, where everything for that Grid has that color. Then for the third Grid...

It will be very common for developers to have 3, 4, 5, 15 different Grids on one web page. Having multiple colors for each will be a real mess. The entire plan for having things be color-coded, and for those colors to be user adjustable, is for each Grid to have a single color.

Are you planning on expanding the color-picker to let developers choose two colors for each Grid? Likely not.

Let's keep things simple and make everything for each Grid be the one color, as originally designed last year.

Comment 2

[Jen Simmons [:jensimmons]]

In an email thread, Victoria Wang wrote:

> What about keeping the outlines the same color, but giving the negative line number labels a light background color (which could be programmatically derived from the main color)? For example, dark purple outlines with white background on positive labels and pale purple background on negative labels.

My response:

I think we should just make sure the line numbers — all of the line numbers — are big enough that users can easily see that the negative numbers start with a '-'. There is nothing special about the negative numbers. They do exactly the same thing as the positive numbers, and should be used interchangeably with positive numbers. By making them look different, we would be sending a signal to developers that somehow these numbers are different and do a different job. Which is the wrong impression to give. 

I think positive and negative line numbers should be styled identically.

Comment 3

[Jen Simmons [:jensimmons]]

Here’s a demo where there are four Grids on one page, to accomplish one layout: http://labs.jensimmons.com/2017/01-004.html. 

This is the kind of situation we want to keep in mind. And honestly, this 1996 page is still very simple. Modern sites will get far more complex.

Looking at this demo might make it clearer why I'm thinking each Grid should have it’s own color, and only one color. Once performance improvements are made, developers will be able to turn on all the Grids at the same time, and see how they overlap, nest, and line-up (or not). For now, we just have to imagine such a future — imagine what it'll be like to be able to check all the boxes in the list of Grids. (Right now, turned any one on turns the previous one off. But that's not the long-term plan.)

Comment 4

[Victoria Wang [:victoria]]

Hi Jen, thanks for the info. I see what you mean about how things will change when there are multiple grids.

The only issue I see is that it might look a bit visually overwhelming when both positive and negative numbers are visible: https://github.com/ZER0/grid-negative-numbers/raw/master/img/grid-06.png Adding a subtle background to negative number labels could help communicate that they're the inverse counterpart of the positive numbers, and possibly make the grid easier to read (if I'm understanding this correctly :))

Comment 5

[Jen Simmons [:jensimmons]]

I believe the plan is to have a user-option for whether or not the negative numbers are being displayed, so people can hide them to reduce complexity. I think I think that's a good idea... (although not 100% sure). 

I also still think it *might* be better to put the negative numbers on the same side of the box as the positive numbers in order for things to make more sense to users. It would be easier as a developer if the negative and positive numbers (and remember, sometimes there are multiple negative numbers, or multiple positive numbers for any line — not just one), were all together. But it's also really hard to figure out how to fit them all into the space, especially since there may not really be any space. (A problem I know you are putting a ton of effort into figuring out!)

Anyway — things to keep discussing in the other tickets, but I just don't think using a different color helps solve this. It was a great idea to consider, but I think it actually makes things more complex, rather than less, given the fact people have more than one grid on a page.

I'd love to see this ticket closed as "won't fix", if we are ready to let this idea go. And to hunt for other solutions to provide clarity to users.

Comment 6

[Victoria Wang [:victoria]]

Thanks for the clarification, Jen. Sounds good to close this ticket and continue the negative number discussion in other tickets. 

I'll add these ideas to my design notes on Inspector (https://goo.gl/QzyHkm):

- Option to hide negative numbers (switch between positive and negative?)
- Possibly show both types of numbers on the same side.