debug: fix resizing window makes debug toolbar disappear (#209075)

Fixes #208895

Should work but testing on aux windows was limited due to #209073

src/vs/workbench/contrib/debug/browser/debugToolBar.ts

@@ -53,7 +53,6 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
  private activeActions: IAction[];
  private updateScheduler: RunOnceScheduler;
  private debugToolBarMenu: IMenu;
- private yCoordinate = 0;
 
  private isVisible = false;
  private isBuilt = false;
@@ -141,7 +140,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
  }
  if (e.affectsConfiguration(LayoutSettings.EDITOR_TABS_MODE) || e.affectsConfiguration(LayoutSettings.COMMAND_CENTER)) {
  this._yRange = undefined;
- this.setYCoordinate();
+ this.setCoordinates();
  }
  }));
  this._register(this.debugToolBarMenu.onDidChange(() => this.updateScheduler.schedule()));
@@ -187,9 +186,14 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
  });
  }));
 
- this._register(this.layoutService.onDidChangePartVisibility(() => this.setYCoordinate()));
+ this._register(this.layoutService.onDidChangePartVisibility(() => this.setCoordinates()));
 
  const resizeListener = this._register(new MutableDisposable());
+ const registerResizeListener = () => {
+ resizeListener.value = this._register(dom.addDisposableListener(
+ dom.getWindow(this.layoutService.activeContainer), dom.EventType.RESIZE, () => this.setCoordinates())
+ );
+ };
 
  this._register(this.layoutService.onDidChangeActiveContainer(async () => {
  this._yRange = undefined;
@@ -202,21 +206,24 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
  this.setCoordinates();
  }
 
- resizeListener.value = this._register(dom.addDisposableListener(
- dom.getWindow(this.layoutService.activeContainer), dom.EventType.RESIZE, () => this.setYCoordinate()));
+ registerResizeListener();
  }));
+
+ registerResizeListener();
  }
 
  private storePosition(): void {
  const activeWindow = dom.getWindow(this.layoutService.activeContainer);
  const isMainWindow = this.layoutService.activeContainer === this.layoutService.mainContainer;
 
- const left = this.$el.getBoundingClientRect().left / activeWindow.innerWidth;
+ const rect = this.$el.getBoundingClientRect();
+ const y = rect.top;
+ const x = rect.left / activeWindow.innerWidth;
  if (isMainWindow) {
- this.storageService.store(DEBUG_TOOLBAR_POSITION_KEY, left, StorageScope.PROFILE, StorageTarget.MACHINE);
- this.storageService.store(DEBUG_TOOLBAR_Y_KEY, this.yCoordinate, StorageScope.PROFILE, StorageTarget.MACHINE);
+ this.storageService.store(DEBUG_TOOLBAR_POSITION_KEY, x, StorageScope.PROFILE, StorageTarget.MACHINE);
+ this.storageService.store(DEBUG_TOOLBAR_Y_KEY, y, StorageScope.PROFILE, StorageTarget.MACHINE);
  } else {
- this.auxWindowCoordinates.set(activeWindow, { x: left, y: this.yCoordinate });
+ this.auxWindowCoordinates.set(activeWindow, { x, y });
  }
  }
 
@@ -271,11 +278,10 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
  this.setYCoordinate(y ?? this.yDefault);
  }
 
- private setYCoordinate(y = this.yCoordinate): void {
+ private setYCoordinate(y: number): void {
  const [yMin, yMax] = this.yRange;
  y = Math.max(yMin, Math.min(y, yMax));
  this.$el.style.top = `${y}px`;
- this.yCoordinate = y;
  }
 
  private get yDefault() {
@@ -322,7 +328,9 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
 
  private doShowInActiveContainer(): void {
  this.layoutService.activeContainer.appendChild(this.$el);
- this.trackPixelRatioListener.value = PixelRatio.getInstance(dom.getWindow(this.$el)).onDidChange(() => this.setYCoordinate());
+ this.trackPixelRatioListener.value = PixelRatio.getInstance(dom.getWindow(this.$el)).onDidChange(
+ () => this.setCoordinates()
+ );
  }
 
  private hide(): void {