1507723 - Text nodes show as clickable items in sidebar

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Martin Balfanz [:mbalfanz]]

Attachment: Screenshot_2018-11-16 11.23.36_MqbzDr.png

STR:
- visit https://www.mozilla.org/en-US/privacy/firefox/ and select "Firefox" from the top menu
- have a look at the flex items in the sidebar

ER:
- show only items as interactive that are actually interactive

AR:
- text node shows with hover color and "navigation arrow", even though it's not clickable/selectable as flex item

Comment 1

[Patrick Brosset <:pbro>]

Really it should be possible to click and select the text node within this flex container.
The problem you have discovered here is that short text nodes that are only-child of a parent element are "inlined" in the markup-view instead of shown as a different node that can be independently selected.
This was done on purpose years ago to make the markup-view look more compact. But now it's unfortunately making it impossible for us to select them and see the flex item sizing information for them.

I don't think the solution is to undo the inlining of text nodes. 
Maybe we should show the anonymous block element that is created to wrap text nodes inside flex layouts?
Or maybe we should make it possible to select an inlined text node.

Comment 2

[Patrick Brosset <:pbro>]

I'm looking at the code for this, and what seems doable is not inlining text nodes when they are flex items. We do this already for Shadow DOM slots, so it might be good to this here too.

Comment 3

[Patrick Brosset <:pbro>]

Attachment: Bug 1507723 - Don't inline only-child short text nodes that are also flex items; r?gl!

This change cleans up a lot of the getCurrentDisplay's logic which was unnecessarily
complex, it seems.
It also extracts the logic to walk up the DOM to find flex/grid containers to a
reusable functions.
Finally, this new extracted function is now used in the walker to determine if a text
node can be inlined in its parent element or not.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/55d27d4a5f79
Don't inline only-child short text nodes that are also flex items; r=gl

Comment 5

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/55d27d4a5f79

Comment 6

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I reproduced this issue using 64.0a1(2018-11-16), on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx 65.0b10 on Windows 10 x64, macOS 10.13 and Ubuntu 16.04 LTS.
Cheers!