Unify pseudo class colors in markup view and rule view

VERIFIED FIXED

Status

defect
P3
normal
VERIFIED FIXED
4 years ago
6 months ago

People

(Reporter: bgrins, Assigned: akshithashetty84)

Tracking

Trunk
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox43 affected)

Details

(Whiteboard: [btpp-backlog])

Attachments

(2 attachments)

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.
See Also: → 1205371
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Whiteboard: [btpp-backlog]
Product: Firefox → DevTools

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?

Flags: needinfo?(gl)

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.

(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.

Flags: needinfo?(gl)
Assignee: nobody → akshithashetty84
Status: NEW → ASSIGNED

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

Attachment #9047461 - Attachment description: Bug 1200686 - Unify pseudo class clors in markup view and rule view. r=fvsch → Bug 1200686 - Unify pseudo class colors in markup view and rule view. r=fvsch
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/07903d118908
Unify pseudo class colors in markup view and rule view. r=fvsch

Thank you.

Status: ASSIGNED → RESOLVED
Closed: 6 months ago
Resolution: --- → INVALID

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

Status: RESOLVED → VERIFIED
Flags: needinfo?(florens)
Flags: needinfo?(florens)
Resolution: INVALID → FIXED
You need to log in before you can comment on or make changes to this bug.