In the video I posted a couple days ago I mentioned that the goal for the shadow-cljs UI is to be embeddable.
One of the locations this could be embedded into would be the Chrome Devtools and this then begs the question if this could replace the built-in HUD entirely?
One of the “problems” with the HUD has always been that it runs inside your build and has to work in your page. This means that is can easily conflict with your HTML/CSS (demonstrated by turning everything green above) or your JS. The HUD also has to stay quite minimal since we don’t want to inject too many deps into your build.
The Devtools Page however runs completely isolated and can do whatever it wants. It also runs in its own thread so it won’t interfere with your page in any way.
The downside I see for this is that you have to have the devtools open and the “shadow-cljs” tab selected. You won’t see anything when inside the Elements or Network tabs. Although the HUD could be reduced to minimal icons so you know when to check the devtools.
As an alternative I might experiment with embedding the same UI via a seamless iframe into the page itself. It would then still run isolated and wouldn’t have to worry about whats happening in the page either.