1519352 - Instantiate the grid and flexbox highlighters on the front-end

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

We can encounter a scenario where the box model+flexbox highlighter and flexbox highlighter (from the sidebar) are both on and overlapping each other. While this wasn't something noticeable visually at moment, I think we should consider not showing the flexbox highlighter from the box model highlighter when this is the case or vice versa. The case for doing this is more obvious when we think about the grid highlighter and the extra options it has like showing the grid area names. It is possible looking at our flexbox highlighter mockups that we might consider doing more and the overlapping issue can eventually become an issue.

This was a comment from pbro on https://bugzilla.mozilla.org/show_bug.cgi?id=1297100#c8:
"And 1 other thing I think we should do differently than this patch: I think we should instantiate the grid highlighter on the front-end (maybe in toolbox-highlighter-utils.js, or maybe just in inspector-panel.js with getHighlighterByType), instead of having box-model.js do it on the server.
If we do it on the front-end, then we can pass the actorID of the grid highlighter to the box-model highlighter, and that allows us to make sure we're only ever using just one instance.".