1497210 - Flexbox inspector crashes the whole Layout sidebar tab when selecting a parent flex container

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P1)

Description

[Patrick Brosset <:pbro>]

STR:
- open https://treeherder.mozilla.org/#/jobs?repo=try&revision=9e27545a9fee79ef2be628721170289ac01f00b3&selectedJob=203976072
- select node `#keyboard-shortcuts` in the inspector
- in the layout sidebar, click on the toggle to activate the flexbox highlighter (not sure this is actually needed to repro the crash)
- make sure you have the flex item accordion expanded too
- now in the inspector, select the parent element `.d-flex.flex-column.h-100` 

==> the layout tab crashes.

The following errors are displayed in the browser console:

TypeError: "flexItem is undefined; can't access its "nodeFront" property"
	render resource://devtools/client/inspector/flexbox/components/FlexItemSelector.js:73:11
	finishClassComponent resource://devtools/client/shared/vendor/react-dom.js:10332:22
	updateClassComponent resource://devtools/client/shared/vendor/react-dom.js:10295:10
	beginWork resource://devtools/client/shared/vendor/react-dom.js:10894:14
	performUnitOfWork resource://devtools/client/shared/vendor/react-dom.js:12713:12
	workLoop resource://devtools/client/shared/vendor/react-dom.js:12730:24
	renderRoot resource://devtools/client/shared/vendor/react-dom.js:12770:7
	performWorkOnRoot resource://devtools/client/shared/vendor/react-dom.js:13359:22
	performWork resource://devtools/client/shared/vendor/react-dom.js:13281:7
	performSyncWork resource://devtools/client/shared/vendor/react-dom.js:13253:3
	requestWork resource://devtools/client/shared/vendor/react-dom.js:13153:5
	1 resource://devtools/client/shared/vendor/react-dom.js:13022:11
	enqueueSetState resource://devtools/client/shared/vendor/react-dom.js:8845:5
	setState resource://devtools/client/shared/vendor/react.js:406:3
	onStateChange resource://devtools/client/shared/vendor/react-redux.js:1412:11
	dispatch resource://devtools/client/shared/vendor/redux.js:416:7
	waitUntilService resource://devtools/client/shared/redux/middleware/wait-service.js:59:20
	promiseMiddleware resource://devtools/client/shared/redux/middleware/promise.js:16:14
	thunk resource://devtools/client/shared/redux/middleware/thunk.js:16:9
	task resource://devtools/client/shared/redux/middleware/task.js:39:12
	update resource://devtools/client/inspector/flexbox/flexbox.js:451:7
react-dom.js:11273:5

​

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 1497210.patch

Comment 2

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/e68617c25cbe
Ensure a valid flex item prop is provided to the FlexItemSelector. r=pbro

Comment 3

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/e68617c25cbe