Improve window movement with Command Center enabled

[dlschmidt]

The problem:

I've recently found out if the VSCode window is quite small, it is very difficult to move the window.

As shown in this picture, only some small areas can be used to move the window. This is even worse if Layout Controls are enabled aswell.

One solution:

This could be improved by allowing the command center to be draggable as well. Also, this would fit better with the Command Center replacing the window bar.

I think this can be implemented, because no action is done when currently dragging the command center.

Version:

Version: 1.70.0 (user setup)
Commit: da76f93
Date: 2022-08-04T04:38:16.462Z
Electron: 18.3.5
Chromium: 100.0.4896.160
Node.js: 16.13.2
V8: 10.0.139.17-electron.0
OS: Windows_NT x64 10.0.19043

[gjsjohnmurray]

Related to #152578

[jrieken]

I think this can be implemented, because no action is done when currently dragging the command center

Unfortunately not. Once you mark a region as "window-drag-region" it won't receive any event anymore, e.g. clicking the CC won't work anymore. This is an electron/os limitation. Tho, note that you can drag the area above/below the CC to drag the window as well

[bpasero]

This maybe the reason why Slack opens their "command center" on mouse down (we open on mouse up I think). As you can see below, I can still move the Window when clicking and dragging there:

[dlschmidt]

It would be really good if you could take the behaviour from Slack and adopt it a little bit. Maybe detect whether the window is been dragged and close the CC again? After a short period of 500ms for example.

But of course only if it works at all.

[trusktr]

I ran into this. Especially when the window is small, there is essentially no area left to drag the window with.

I think this can be implemented, because no action is done when currently dragging the command center

Unfortunately not.

Is it not possible to set the window position with BrowserWindow.setPosition on every pointermove while pointerdown?

[jrieken]

This maybe the reason why Slack opens their "command center" on mouse down (we open on mouse up I think). As you can see below, I can still move the Window when clicking and dragging there:

This is how it works: we declare the title bar element as draggable region, via -webkit-app-region: drag. This "style" marks it a window drag region and electron/chromium do the right thing. Now the fun starts:

• windows - elements inside a drag region do not emit events and we need to "clear" sub-regions via -webkit-app-region: no-drag;. Otherwise you cannot click any button inside the title bar part
• linux - same as windows
• mac - looks like elements inside drag regions still emit events

My guess is that slack doesn't always use the no-drag-tweak , e.g on mac you can drag while the click still happens (and while commands execute). Slack on windows doesn't support that, e.g you cannot drag its windows on the input thing.

I'll prepare a change that enables this for mac but I have nothing to offer for windows users...

[jrieken]

@deepak1556 Do you think there is a chance to tweak electron to behave on windows/linux as it does on mac (see comment about drag/no-drag above)?

[sbatten]

A recent change to the title bar should provide more draggable space to the title bar on Windows and Linux. There should be a bit more space around the command center. Though, due to the holidays, this is not yet available in Insiders and won't be in stable until end of January.

[sbatten]

@jrieken with the changes to use better flex layout in the titlebar, I would say we could tweak padding further if we want, but the situation is as improved as we can take it. Thus I propose we close this one out.

[joyceerhl]

You can still get unlucky with a couple of dead zones as shown in the gif below but the adaptive resizing of the menu bar is a significant improvement

[sbatten]

@jrieken joyce's report is due to padding on the CC, I think we can remove that padding as we have margin on the center content

[jrieken]

Yeah, looks like there is margin around the title-container and padding for the CC container. Let's nuke the latter

[dlschmidt]

Please re-open this issue because I don't have the permission for this.