1251755 - Cannot see pseudo lock in markup view if element is selected

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P1)

Description

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

Attachment: active-element.png

In the markup view, if you apply a pseudo lock to an element and the line is selected, the background color of the line hides the small pseudolock circle that appears on the left of "locked" elements.

In the attachment you can see this more clearly: <td align="top"> has an :active lock, but you cannot see the small orange circle to the left of it.

Comment 1

[Patrick Brosset <:pbro>]

This is pretty serious. Also a really easy fix apparently.
I tried adding `z-index: 1` to the `.child.pseudoclass-locked::before {}` rule from the browser toolbox and it appears to fix it.
I might get to it next week, but if someone is interested, I'm happy to mentor. This is a simple good-first-bug.

Comment 2

[Julian Descottes [:jdescottes]]

Attachment: MozReview Request: Bug 1251755 - markupview: add z-index 1 to pseudoclass ind.r=pbrosset

With Bug 1195120, the ".tag-line .tag-state" has a z-index of 0 instead
of -1. This element is used to display the colored background of a selected
row.

Adding z-index:1 to the pseudoclass indicator ensures it is displayed above
the .tag-state element.

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

Comment 3

[Patrick Brosset <:pbro>]

Comment on attachment 8727291 [details]
MozReview Request: Bug 1251755 - markupview: add z-index 1 to pseudoclass ind.r=pbrosset

https://reviewboard.mozilla.org/r/38407/#review34995

Thanks for the quick fix Julian, and for finding the cause of this regression.

Comment 4

[Pulsebot]

https://hg.mozilla.org/integration/fx-team/rev/5ee60bdfe6b8

Comment 5

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/5ee60bdfe6b8