vscode
vscode copied to clipboard
microsoft
The developer tools become a floating window
Version 1.74.0, when I open the developer tools, it becomes a floating window, which is very unfriendly for extension developers, please add at least one option to use the old layout.
Was caused by an upstream electron bug with WCO https://github.com/electron/electron/issues/34129. Believe there are plans to restore the docking feature in the near future now that the electron issue is resolved.
Workaround
I found that if you toggle OFF the window.experimental.windowControlsOverlay.enabled setting, Developer Tools docking functionality is restored AND you also still get the WCO experience (perhaps that's a separate bug?).
Suggest docking at the bottom instead of to the right if there's any visual conflict due to the aforementioned electron bug.
The setting window.experimental.windowControlsOverlay.enabled will be removed at one point, keeping the issue open to provide left and bottom dock options when WCO is enabled.
I manged to get it to dock again with @kahlkevin 's workaround but I noticed in the dev tool now it shows the HTML for the VS code app instead of the file I have open in the preview
This makes working on Windows really awful for me, I think the upstream bug is fixed.
To give some context, with WCO chromium has a bug in orienting devtools window when docked to the position where the Window controls are, basically they overlap making it harder to use the close, minimize or maximize button. Chromium always pop out the devtools window in PWA for this scenario and Electron inherited this by default. The fix added in https://github.com/electron/electron/issues/34129 does not address the aligning behavior but rather provides a workaround that calling openDevTools({mode: 'bottom'|'left'|'right'}) would be respected even in the WCO scenario rather than forcing to always detach.
Now, on our end to incorporate this fix we need to change all our openDevTools callsite with a mode otherwise we will default to detach as seen in this logic https://github.com/electron/electron/blob/2e79f34c841776a7184ba311cd937b3513e75f32/shell/browser/api/electron_api_web_contents.cc#L2676-L2693. Say we chose mode: bottom as default and user later reposition it to right or left then this new state will be persisted to Preference json file under the user data directory, in non WCO cases this saved preference will be applied next time when calling openDevTools or toggleDevTools without a mode value from the application side, that is how user's preferred position is applied. But in the WCO case, this does not take effect so we need a logic on VSCode side to read the preference value and adjust the start mode with it. I didn't want to make this change yet in core hence this issue remains open, I will tackle it in debt week.
@deepak1556
To give some context, with WCO chromium has a bug in orienting devtools window when docked to the position where the Window controls are
I see this as an issue when you dock the devtools to the right, but why is the ability to dock it at the bottom taken away? This seems to work just fine with WCO.
Say we chose mode: bottom as default and user later reposition it to right or left then this new state will be persisted to
But on Windows, a user is not able to reposition the devtools at all? This functionality seems to be truly gone, so a setting for Windows only would be a decent workaround and good improvement over what we have today.
If we decide on a setting that forces the location, I can see to do such a change.
I am good with a setting to force the bottom position only on Windows. I will see if the runtime behavior can be improved to avoid docking the devtools to the position where the controls are present as part of this issue.
The dock options are back, though setting it to dock on the right looks funny with the WCO in the way.
In the new version, if the developer tools are on the right side, the close button will be blocked, which is not as good as the old version of window.experimental.windowControlsOverlay.enabled.
@cweijan use a dock position that is not overlapping with the window controls, by default the devtools will not dock to the position were the window controls are to avoid the bug.
@deepak1556 I know, but I always put the developer tools on the right, which is where I'm most productive.
@deepak1556 @bpasero Is it possible to revert "window.experimental.windowControlsOverlay.enabled" to a VS Code new version? #188793
In order for the developer tools to be correctly positioned on the right side, I now have to go back to VS Code version 1.81 and disable updates.
@deepak1556 is there an issue where we are tracking how the WCO is overlapping the devtools?
@andreamah no we are not tracking it in the runtime, unless you have manually docked it to the overlapping position devtools by default would be undocked. The overlapping position in the runtime will not resolved anytime soon.