Custom TitleBar Randomly Becomes Unclickable (fix #52522) (#53209)

* hacky fix #52522

* adding issue to comments

* addressing feedback

src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css

@@ -13,19 +13,27 @@
 	align-items: center;
 	justify-content: center;
 	user-select: none;
-	-webkit-app-region: drag;
 	zoom: 1; /* prevent zooming */
 	line-height: 22px;
 	height: 22px;
 	display: flex;
 }
 
+.monaco-workbench > .part.titlebar > .titlebar-drag-region {
+	top: 0;
+	left: 0;
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	-webkit-app-region: drag;
+}
+
 .monaco-workbench > .part.titlebar > .window-title {
 	flex: 0 1 auto;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
-	-webkit-app-region: drag;
 	zoom: 1; /* prevent zooming */
 }
 

src/vs/workbench/browser/parts/titlebar/titlebarPart.ts

@@ -46,6 +46,7 @@ export class TitlebarPart extends Part implements ITitleService {
 
 	private titleContainer: Builder;
 	private title: Builder;
+	private dragRegion: Builder;
 	private windowControls: Builder;
 	private maxRestoreControl: Builder;
 	private appIcon: Builder;
@@ -250,6 +251,9 @@ export class TitlebarPart extends Part implements ITitleService {
 	createContentArea(parent: HTMLElement): HTMLElement {
 		this.titleContainer = $(parent);
 
+		// Draggable region that we can manipulate for #52522
+		this.dragRegion = $(this.titleContainer).div({ class: 'titlebar-drag-region' });
+
 		// App Icon (Windows/Linux)
 		if (!isMacintosh) {
 			this.appIcon = $(this.titleContainer).div({ class: 'window-appicon' });
@@ -502,6 +506,10 @@ export class TitlebarPart extends Part implements ITitleService {
 			let menubarToggled = this.configurationService.getValue<MenuBarVisibility>('window.menuBarVisibility') === 'toggle';
 			if (menubarToggled && this.menubarWidth) {
 				this.title.style('visibility', 'hidden');
+
+				// Hack to fix issue #52522 with layered webkit-app-region elements appearing under cursor
+				this.dragRegion.hide();
+				this.dragRegion.showDelayed(50);
 			} else {
 				this.title.style('visibility', null);
 			}