1183743 - [Rule View] Add a highlight color for the rule selector's pseudoclass and attribute in the rule editor

Status: NEW

(DevTools :: Inspector: Rules, enhancement, P3)

Description

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

In Bug 1178535, we added parsing of the css selector to 4 types: element, pseudoclass locks, attributes and other pseudoclasses. We also added a highlight color for pseudoclass locks to make it easier to see the new rules added in the rule view when we toggle a pseudoclass lock. This bug is to figure out the best UX and color for attributes and the other pseudoclasses.

Comment 1

[Helen V. Holmes (:helenvholmes) (:✨)]

I think I need some clarification on what's needed for this bug.

data-*: Do we just need a color for data attributes, or are we trying to think through how we might choose colors when someone has a bunch of different data attributes? (http://html5doctor.com/html5-custom-data-attributes/)

pseudoclass locks: there is a bug with some UX work for pseudoclass locks that seems like it never got reviewed here: Bug 1205371

Comment 2

[Helen V. Holmes (:helenvholmes) (:✨)]

Whoops, hit submit before I was done.

Gabriel, what do you mean by "other pseudoclasses"? Are there more than just before/after?

Comment 3

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

Attachment: Screenshot

Comment 4

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

So, this is specific to the display of the selectors in the rules view. Currently, we add a red highlight colour for pseudoclasses listed in the pseudo class panel (:hover, :active, :focus). See https://bugzilla.mozilla.org/attachment.cgi?id=8705835 for screenshot. 

We added the ability to parse selectors for the pseudoclasses and attributes. So, this bug is to pick colour(s) for other pseudoclasses that are not listed in that panel (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) and css selector attributes, eg. a[target="home.html"].

Comment 5

[Helen V. Holmes (:helenvholmes) (:✨)]

Attachment: Screen Shot 2016-01-11 at 7.37.09 AM.png

Comment 6

[Helen V. Holmes (:helenvholmes) (:✨)]

The way I see it, we can go one of two ways:

- Continue using red for all pseudo classes, since they're all technically in the same category. (I suspect that you Gabriel aren't really a fan of that, which is fine—it's true that I think most people mentally have the pseudolocks in a category all on their own).
- Use complimentary colors to that orange-red. I'd suggest maybe #B52943 and #C92627? Those two colors seem to look nice together with the current orange-red of the current pseudo-lock color. (See attachment.)

I don't really have anything to say about the UX of it, since it really isn't a UX question.

Comment 7

[Julian Descottes [:jdescottes]]

Inspector bug triage. Filter on CLIMBING SHOES.