1200686 - Unify pseudo class colors in markup view and rule view

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Brian Grinstead [:bgrins]]

Bug 1120406 makes the pseudo class dot match the breadcrumbs lock style: https://bugzilla.mozilla.org/attachment.cgi?id=8655123.

See https://bugzilla.mozilla.org/show_bug.cgi?id=1120406#c11 - we should make sure the rule view and the markup view / breadcrumbs use the same color to indicate a pseudo class lock.

Comment 1

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 2

[Florens Verschelde :fvsch]

We want to change the pseudo-class colors to specific shades of Photon Yellow as described here:
https://github.com/firefox-devtools/ux/issues/13#issuecomment-467643399
So I'm thinking we should hijack this bug which is very close. :)

Here's my shot at a spec:

Colors:

• Dark theme: pseudo-class colors should be Yellow 50 for text & Yellow 60 for the markup indicator (disc)
• Light theme: pseudo-class colors should be Yellow 70 for text & Yellow 60 for the markup indicator (disc)

Locations where this should be applied:

• Disc indicators in markup view (probably devtools/client/themes/markup.css)
• Pseudo-class selector text in Rules (probably devtools/client/themes/rules.css)
• Pseudo-class text in the breadcrumbs (probably devtools/client/themes/breadcrumbs.css). Note: the currently "active" element (element which is focused in the markup view) uses blue text; that shouldn't change.

Gabriel, do you know if there are more places to look at?

Comment 3

[akshitha shetty]

Hi, as discussed in https://github.com/firefox-devtools/ux/issues/13#issuecomment-462405738, I would like to take up this one. Could you please assign it to me?
Thanks.

Comment 4

[akshitha shetty]

Attachment: The final outcome after making the discussed changes are as above

Comment 5

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

(In reply to Florens Verschelde :fvsch from comment #2)

We want to change the pseudo-class colors to specific shades of Photon Yellow as described here:
https://github.com/firefox-devtools/ux/issues/13#issuecomment-467643399
So I'm thinking we should hijack this bug which is very close. :)

Here's my shot at a spec:

Colors:

• Dark theme: pseudo-class colors should be Yellow 50 for text & Yellow 60 for the markup indicator (disc)
• Light theme: pseudo-class colors should be Yellow 70 for text & Yellow 60 for the markup indicator (disc)

Locations where this should be applied:

• Disc indicators in markup view (probably devtools/client/themes/markup.css)
• Pseudo-class selector text in Rules (probably devtools/client/themes/rules.css)
• Pseudo-class text in the breadcrumbs (probably devtools/client/themes/breadcrumbs.css). Note: the currently "active" element (element which is focused in the markup view) uses blue text; that shouldn't change.

Gabriel, do you know if there are more places to look at?

List looks fine to me.

Comment 6

[akshitha shetty]

Attachment: Bug 1200686 - Unify pseudo class colors in markup view and rule view. r=fvsch

Bug 1200686 - Unify pseudo class clors in markup view and rule view. r=fvsch

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/07903d118908
Unify pseudo class colors in markup view and rule view. r=fvsch

Comment 8

[akshitha shetty]

Thank you.

Comment 9

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/07903d118908

Comment 10

[akshitha shetty]

Hi, this issue has been fixed I suppose. Could you please guide me on updating the status of this one ?