1506874 - Layout sidebar panel re-render 3 times for every new selection

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Steps:
- Add some console.log statement to the render method of /devtools/client/inspector/layout/components/LayoutApp.js
- Build and launch Firefox
- Select nodes in the inspector with the Layout sidebar visible

Expected: the console.log should be displayed once only when you select a new element

Actual: the console.log appears 3 times.

This means that the entire sidebar is being re-rendered 3 times in a row, for nothing.

We should probably use shouldComponentUpdate, but I'm not sure how we would effectively compare the props to return true/false based on whether they changed, because the store is really complex and deep.

I don't know how this part of React works exactly, but it seems to me like the LayoutApp component should only re-render if the list of accordion items changes (e.g. when you select an element that is a flex item and a flex container).
However if, say, the width/height displayed in the boxmodel component change, then the LayoutApp shouldn't re-render, only the boxmodel component inside of it should. Right?
That doesn't seem to be the case today and it seems like that would make the sidebar more performant if it was.

Note that I'm making this block bug 1503197 because it's tricky to add new telemetry probes for the flexbox inspector when the panel re-renders more than it should.

Comment 1

[Patrick Brosset <:pbro>]

Gabriel, with your work on the layout sidebar and on performance, I'm thinking this might be something for you to evaluate.