Closed Bug 1499322 Opened 2 years ago Closed 2 years ago

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

Categories

(DevTools :: Inspector, defect, P1)

defect

Tracking

(firefox64 fixed)

RESOLVED FIXED
Firefox 64
Tracking Status
firefox64 --- fixed

People

(Reporter: pbro, Assigned: pbro)

References

Details

Attachments

(1 file)

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: nobody → pbrosset
Status: NEW → ASSIGNED
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.
Blocks: 1497181
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/bfb92e2d55e4
Support pseudo elements in the flexbox inspector; r=rcaliman
https://hg.mozilla.org/mozilla-central/rev/bfb92e2d55e4
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
Depends on: 1506792
You need to log in before you can comment on or make changes to this bug.