Rendering issue in devtools scope tree

[hipitihop]

Problem

We have recently noticed the following rendering issue with the devtools scope tree.

Environment / Observations

• this started happening a few weeks back.
• seems to happen intermittently although presently it is all the time.
• happens both on my Linux Ubuntu (Ubuntu 18.04.3 LTS) desktop and a colleague's Windows 10.
• Chrome Version 77.0.3865.75 (Official Build) (64-bit)
• Chrome restart does not clear it.
• Playing with docking position does not change anything.
• Sometimes I have seen it render some of the vars but not all of them if you resize the devtools scope panel.
• If you disable custom formatters in settings, it renders fine but alas back to raw JS data structures.
• Rendering same ds in console via js/console.log does the right thing and expandable tree renders perfectly.

This might be a cljs-devtools issue I see latest 0.9.10 was released over a year ago. I'm not sure but did dirac embed the devtools and is it possibly running a more up to date version ? (we don't use dirac at the moment, but if installing it instead of cljs-devtools would that solve it ?

[darwin]

Thanks for reporting. My wild guess is that this will be related to some weird CSS interaction between cljs-devtools markup and official DevTools stylesheets.

[darwin]

I investigated it and my conclusion is following:

1. it is a CSS issue, caused by overflow:hidden rule defined on some parent DOM nodes in "object properties" section and the fact that custom formatter "cells" are now rendered as if they overflowed their bounding boxes (for some reason unclear to me).
2. DevTools css styles haven't changed recently to introduce this problem, it must be some recent Chrome CSS engine change
3. I don't see a possible workaround for this in cljs-devtools itself.
4. in short term I can work around it in Dirac
5. in long term we need to prepare a minimal repro case and raise this to Chrome bug tracker as a regression

[darwin]

After further investigation. The overflow is triggered when scope area is small enough to fit whole custom formatter content. Display of disclosure triangles, seq numbers or "fn" markers is just a visual bug - for some reason overflow:hidden does not apply to them.

So a workaround is to resize right pane horizontally to fit whole custom formatter content.

[darwin]

Filled upstream as bug 1004070.

[hipitihop]

@darwin Many thanks for jumping on to this quickly and reporting upstream. As you discovered, I too have noticed that resizing the pane horizontally sometimes helps, however frequently there is simply not enough horizontal space even when set to the width of the window. In my case, this is on a 1920px monitor.

[darwin]

I'm with you. That is why I recommended them to get rid of that overflow:hidden logic and let the content scroll horizontally instead.

[mike-thompson-day8]

For those that follow, a workaround is to right-click on any "scoped variable" not being rendered correctly, and select "store as global variable" . You can then inspect the data in the js console where there's no render issues. Idea credit @melissjs

https://blittle.github.io/chrome-dev-tools/sources/store-as-global.html