Flex inspector is empty when one of the flex items is a pseudo element

RESOLVED FIXED in Firefox 64

Status

defect
P1
normal
RESOLVED FIXED
6 months ago
5 months ago

People

(Reporter: pbro, Assigned: pbro)

Tracking

unspecified
Firefox 64
Dependency tree / graph

Firefox Tracking Flags

(firefox64 fixed)

Details

Attachments

(1 attachment)

(Assignee)

Description

6 months ago
Steps:
- open https://developer.mozilla.org/en-US/docs/Web/CSS/Reference in nightly
- open the inspector with the Layout panel expanded
- select the div.nav-toolbox-wrapper element in the inspector

==> The flexbox inspector panel is empty.

The browser content toolbox shows the following error:

Error while calling actor 'flexbox's method 'getFlexItems' this.element.style is undefined; can't access its "flex-basis" property protocol.js:1041:5
resource://devtools/server/actors/layout.js:174:9

The problem is on this line: 
https://searchfox.org/mozilla-central/rev/c9272ef398954288525e37196eada1e5a93d93bf/devtools/server/actors/layout.js#174

Because we assume this.element is an object that will always have a style property. However when it's a pseudo-element it doesn't. So we need to handle that case.
Pseudo-elements as flex items are quite common, so this is an important bug to fix in 64.
(Assignee)

Updated

6 months ago
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
(Assignee)

Comment 1

6 months ago
On the server, when looking for a flex container for a node, we were bailing
out if the displayType of the node was null. It was null for pseudo-elements.
This value was returned by the displayType getter in the NodeActor class.
Now, the reason for this dates to 4 years ago in bug 1139937 where trying to
get the display style of a pseudo-element was done in a way to failed. So we
just decided to return null at that point. It doesn't fail anymore, we're
able to return, say, "block" if a pseudo-element has a display:block style.
So I've removed the checks that returned null and that fixed the issue here.

The other part of the fix that was need is in the FlexItemActor class on the
server too. This class can be created for a pseudo-element too.
It accesses element.style without checking if that property exists. However it
does not exist for pseudo-elements. So we needed to add a check for that.
It's not a problem to just skip it in this case because pseudo-elements can't
have inline styles.
(Assignee)

Updated

6 months ago
Blocks: 1497181

Comment 2

6 months ago
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bfb92e2d55e4
Support pseudo elements in the flexbox inspector; r=rcaliman

Comment 3

6 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/bfb92e2d55e4
Status: ASSIGNED → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64

Updated

5 months ago
Depends on: 1506792
You need to log in before you can comment on or make changes to this bug.