Debug Hover Widget - Enable the widget resizing for long items whose overflow is hidden

[liguori]

It would be very useful to implement the resizing for the Debug Hover Widget. Sometime happen that during a debug session you want to check the content of a variable of a complex object. If this content overflows the default widget's width (324px), It is hidden.


Actually, the only way for check this content is to add the code expression into the "watch panel" or evaluate it trought the "Debug console". An alternative can be waiting for the tooltip that appear on the mouse hover at the specific node of the three.

[liguori]

Hi @weinand and @isidorn! I Have developed a very 'raw' implementation for the horizontal reisizing. Should i submit a PR?

[isidorn]

Our solution for this is setting
"workbench.tree.horizontalScrolling": true
Then you have a horizontal scroll and can see the whole value.
Thanks for offering a PR, but I prefer a current solution for now

[liguori]

Hi @isidorn
Your solution could be a good workaround. I opened this thread as "feature request" since the debug and inspection experience should be improved for more complex scenarios.

I checked the component source code files (debugHover.css & debugHover.ts) and i noticed that the widget sizes are hard coded as:
width= 324px;
https://github.com/Microsoft/vscode/blob/a543a0a15fb056ad64d59ff106c404c1c928b85c/src/vs/workbench/parts/debug/browser/media/debugHover.css#L19

height= item number (max 18) * 18px = max 324px; (https://github.com/Microsoft/vscode/blob/a543a0a15fb056ad64d59ff106c404c1c928b85c/src/vs/workbench/parts/debug/electron-browser/debugHover.ts#L264)

Trough 'git blame' i noticed that you are the author and for sure you should know better than everyone the ground up of this component.

I tried to "play" directly with the Developer Tools and some nice bheaviour could be reached without modify the JS/TS code for a basic horizontal resizing:

.monaco-editor .debug-hover-widget .complex-value {
	width:100%;
	min-width:324px;
	
}

.debug-hover-widget .monaco-scrollable-element {
	resize: both;
	padding-bottom: 15px;
}

I am new to the VS Code contribution (this is my first approach). How should we do for carry on this improvements. Should users vote for it?

Of course my code is just an example and this component should be modified more deeply.

Waiting for you feedback.

Regards

Gianluigi

[isidorn]

I can reopen this issue and we can treat it as a feature request. If we get more users asking for this we can discuss a potnetial pr.

[liguori]

Since you are the "core contributor" on this component, did you plan some refactoring/rengineering about it? Cause maybe we can enrich this discussion, catching some ideas.

[XVincentX]

I support this. Even though you can click the detail arrow to have a look into the single values, it's useful to have a quick overview into the debugged object.