From f5e777073e7dedd0a9a27f36eb6733b794e8ecd5 Mon Sep 17 00:00:00 2001 From: Sandeep Somavarapu Date: Tue, 31 Oct 2023 08:14:29 +0100 Subject: [PATCH] support debug toolbar on title bar --- src/vs/workbench/browser/layout.ts | 2 +- .../browser/parts/titlebar/titlebarPart.ts | 10 ++-- .../browser/workbench.contribution.ts | 14 ++--- .../contrib/debug/browser/debugToolBar.ts | 57 ++++++++++++++----- .../debug/browser/media/debugToolBar.css | 4 +- .../services/layout/browser/layoutService.ts | 8 +++ 6 files changed, 66 insertions(+), 29 deletions(-) diff --git a/src/vs/workbench/browser/layout.ts b/src/vs/workbench/browser/layout.ts index 19553fffaa9..d602ee381da 100644 --- a/src/vs/workbench/browser/layout.ts +++ b/src/vs/workbench/browser/layout.ts @@ -1185,7 +1185,7 @@ export abstract class Layout extends Disposable implements IWorkbenchLayoutServi } // with the command center enabled, we should always show - if (this.configurationService.getValue('window.commandCenter')) { + if (this.configurationService.getValue(LayoutSettings.COMMAND_CENTER)) { return true; } diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 501b72806f4..07533e0e039 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -24,7 +24,7 @@ import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menuba import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; import { Emitter, Event } from 'vs/base/common/event'; import { IStorageService } from 'vs/platform/storage/common/storage'; -import { Parts, IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; +import { Parts, IWorkbenchLayoutService, LayoutSettings } from 'vs/workbench/services/layout/browser/layoutService'; import { createActionViewItem } from 'vs/platform/actions/browser/menuEntryActionViewItem'; import { Action2, MenuId, registerAction2 } from 'vs/platform/actions/common/actions'; import { ContextKeyExpr, IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; @@ -43,8 +43,6 @@ import { HoverPosition } from 'vs/base/browser/ui/hover/hoverWidget'; export class TitlebarPart extends Part implements ITitleService { - private static readonly configCommandCenter = 'window.commandCenter'; - declare readonly _serviceBrand: undefined; //#region IView @@ -134,7 +132,7 @@ export class TitlebarPart extends Part implements ITitleService { } get isCommandCenterVisible() { - return this.configurationService.getValue(TitlebarPart.configCommandCenter); + return this.configurationService.getValue(LayoutSettings.COMMAND_CENTER); } private registerListeners(): void { @@ -169,7 +167,7 @@ export class TitlebarPart extends Part implements ITitleService { this._onDidChange.fire(undefined); } - if (event.affectsConfiguration(TitlebarPart.configCommandCenter)) { + if (event.affectsConfiguration(LayoutSettings.COMMAND_CENTER)) { this.updateTitle(); this._onDidChangeCommandCenterVisibility.fire(); this._onDidChange.fire(undefined); @@ -475,7 +473,7 @@ class ToogleConfigAction extends Action2 { registerAction2(class ToogleCommandCenter extends ToogleConfigAction { constructor() { - super('window.commandCenter', localize('toggle.commandCenter', 'Command Center'), 1); + super(LayoutSettings.COMMAND_CENTER, localize('toggle.commandCenter', 'Command Center'), 1); } }); diff --git a/src/vs/workbench/browser/workbench.contribution.ts b/src/vs/workbench/browser/workbench.contribution.ts index 8e1e052f18c..bc5cc382e16 100644 --- a/src/vs/workbench/browser/workbench.contribution.ts +++ b/src/vs/workbench/browser/workbench.contribution.ts @@ -11,7 +11,7 @@ import { ConfigurationMigrationWorkbenchContribution, DynamicWorkbenchConfigurat import { isStandalone } from 'vs/base/browser/browser'; import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions'; import { LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle'; -import { ActivityBarPosition, LayoutSettings } from 'vs/workbench/services/layout/browser/layoutService'; +import { ActivityBarPosition, EditorTabsMode, LayoutSettings } from 'vs/workbench/services/layout/browser/layoutService'; const registry = Registry.as(ConfigurationExtensions.Configuration); @@ -38,9 +38,9 @@ const registry = Registry.as(ConfigurationExtensions.Con description: localize('tabScrollbarHeight', "Controls the height of the scrollbars used for tabs and breadcrumbs in the editor title area."), default: 'default', }, - 'workbench.editor.showTabs': { + [LayoutSettings.EDITOR_TABS_MODE]: { 'type': 'string', - 'enum': ['multiple', 'single', 'none'], + 'enum': [EditorTabsMode.MULTIPLE, EditorTabsMode.SINGLE, EditorTabsMode.NONE], 'enumDescriptions': [ localize('workbench.editor.showTabs.multiple', "Each editor is displayed as a tab in the editor title area."), localize('workbench.editor.showTabs.single', "The active editor is displayed as a single large tab in the editor title area."), @@ -622,7 +622,7 @@ const registry = Registry.as(ConfigurationExtensions.Con 'default': isMacintosh ? ' \u2014 ' : ' - ', 'markdownDescription': localize("window.titleSeparator", "Separator used by {0}.", '`#window.title#`') }, - 'window.commandCenter': { + [LayoutSettings.COMMAND_CENTER]: { type: 'boolean', default: true, markdownDescription: isWeb ? @@ -796,11 +796,11 @@ Registry.as(Extensions.ConfigurationMigration) return [['workbench.editor.doubleClickTabToToggleEditorGroupSizes', { value: value }]]; } }, { - key: 'workbench.editor.showTabs', migrateFn: (value: any) => { + key: LayoutSettings.EDITOR_TABS_MODE, migrateFn: (value: any) => { if (typeof value === 'boolean') { - value = value ? 'multiple' : 'single'; + value = value ? EditorTabsMode.MULTIPLE : EditorTabsMode.SINGLE; } - return [['workbench.editor.showTabs', { value: value }]]; + return [[LayoutSettings.EDITOR_TABS_MODE, { value }]]; } }, { key: 'zenMode.hideTabs', migrateFn: (value: any) => { diff --git a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts index 83372ce9637..f19c54d885e 100644 --- a/src/vs/workbench/contrib/debug/browser/debugToolBar.ts +++ b/src/vs/workbench/contrib/debug/browser/debugToolBar.ts @@ -36,7 +36,7 @@ import { debugToolBarBackground, debugToolBarBorder } from 'vs/workbench/contrib import { CONTINUE_ID, CONTINUE_LABEL, DISCONNECT_AND_SUSPEND_ID, DISCONNECT_AND_SUSPEND_LABEL, DISCONNECT_ID, DISCONNECT_LABEL, FOCUS_SESSION_ID, FOCUS_SESSION_LABEL, PAUSE_ID, PAUSE_LABEL, RESTART_LABEL, RESTART_SESSION_ID, REVERSE_CONTINUE_ID, STEP_BACK_ID, STEP_INTO_ID, STEP_INTO_LABEL, STEP_OUT_ID, STEP_OUT_LABEL, STEP_OVER_ID, STEP_OVER_LABEL, STOP_ID, STOP_LABEL } from 'vs/workbench/contrib/debug/browser/debugCommands'; import * as icons from 'vs/workbench/contrib/debug/browser/debugIcons'; import { CONTEXT_DEBUG_STATE, CONTEXT_FOCUSED_SESSION_IS_ATTACH, CONTEXT_IN_DEBUG_MODE, CONTEXT_MULTI_SESSION_DEBUG, CONTEXT_STEP_BACK_SUPPORTED, CONTEXT_SUSPEND_DEBUGGEE_SUPPORTED, CONTEXT_TERMINATE_DEBUGGEE_SUPPORTED, IDebugConfiguration, IDebugService, State, VIEWLET_ID } from 'vs/workbench/contrib/debug/common/debug'; -import { IWorkbenchLayoutService } from 'vs/workbench/services/layout/browser/layoutService'; +import { EditorTabsMode, IWorkbenchLayoutService, LayoutSettings, Parts } from 'vs/workbench/services/layout/browser/layoutService'; import { Codicon } from 'vs/base/common/codicons'; const DEBUG_TOOLBAR_POSITION_KEY = 'debug.actionswidgetposition'; @@ -73,6 +73,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { this.$el = dom.$('div.debug-toolbar'); this.$el.style.top = `${layoutService.mainContainerOffset.top}px`; + this.setHeight(); this.dragArea = dom.append(this.$el, dom.$('div.drag-area' + ThemeIcon.asCSSSelector(icons.debugGripper))); @@ -132,6 +133,11 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { if (e.affectsConfiguration('debug.toolBarLocation')) { this.updateScheduler.schedule(); } + if (e.affectsConfiguration(LayoutSettings.EDITOR_TABS_MODE) || e.affectsConfiguration(LayoutSettings.COMMAND_CENTER)) { + this._yRange = undefined; + this.setHeight(); + this.setYCoordinate(); + } })); this._register(this.debugToolBarMenu.onDidChange(() => this.updateScheduler.schedule())); this._register(this.actionBar.actionRunner.onDidRun((e: IRunEvent) => { @@ -163,7 +169,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { // Prevent default to stop editor selecting text #8524 mouseMoveEvent.preventDefault(); // Reduce x by width of drag handle to reduce jarring #16604 - this.setCoordinates(mouseMoveEvent.posx - 14, mouseMoveEvent.posy - (this.layoutService.mainContainerOffset.top)); + this.setCoordinates(mouseMoveEvent.posx - 14, mouseMoveEvent.posy); }); const mouseUpListener = dom.addDisposableGenericMouseUpListener(window, (e: MouseEvent) => { @@ -208,12 +214,6 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { } } - private setYCoordinate(y = this.yCoordinate): void { - const titlebarOffset = this.layoutService.mainContainerOffset.top; - this.$el.style.top = `${titlebarOffset + y}px`; - this.yCoordinate = y; - } - private setCoordinates(x?: number, y?: number): void { if (!this.isVisible) { return; @@ -230,12 +230,43 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution { if (y === undefined) { y = this.storageService.getNumber(DEBUG_TOOLBAR_Y_KEY, StorageScope.PROFILE, 0); } - const titleAreaHeight = 35; - if ((y < titleAreaHeight / 2) || (y > titleAreaHeight + titleAreaHeight / 2)) { - const moveToTop = y < titleAreaHeight; - this.setYCoordinate(moveToTop ? 0 : titleAreaHeight); - this.storageService.store(DEBUG_TOOLBAR_Y_KEY, moveToTop ? 0 : 2 * titleAreaHeight, StorageScope.PROFILE, StorageTarget.MACHINE); + + this.setYCoordinate(y); + } + + private setYCoordinate(y = this.yCoordinate): void { + const [yMin, yMax] = this.yRange; + y = Math.max(yMin, Math.min(y, yMax)); + this.$el.style.top = `${y}px`; + this.yCoordinate = y; + this.storageService.store(DEBUG_TOOLBAR_Y_KEY, y, StorageScope.PROFILE, StorageTarget.MACHINE); + } + + private _yRange: [number, number] | undefined; + private get yRange(): [number, number] { + if (!this._yRange) { + const isTitleBarVisible = this.layoutService.isVisible(Parts.TITLEBAR_PART); + const yMin = isTitleBarVisible ? 0 : this.layoutService.mainContainerOffset.top; + let yMax = 0; + + if (isTitleBarVisible) { + if (this.configurationService.getValue(LayoutSettings.COMMAND_CENTER) === true) { + yMax += 35; + } else { + yMax += 28; + } + } + + if (this.configurationService.getValue(LayoutSettings.EDITOR_TABS_MODE) !== EditorTabsMode.NONE) { + yMax += 35; + } + this._yRange = [yMin, yMax]; } + return this._yRange; + } + + private setHeight(): void { + this.$el.style.height = `${this.configurationService.getValue(LayoutSettings.EDITOR_TABS_MODE) === EditorTabsMode.NONE && this.configurationService.getValue(LayoutSettings.COMMAND_CENTER) !== true ? 26 : 32}px`; } private show(): void { diff --git a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css index f32eaab62f8..64260286436 100644 --- a/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css +++ b/src/vs/workbench/contrib/debug/browser/media/debugToolBar.css @@ -5,11 +5,11 @@ .monaco-workbench .debug-toolbar { position: absolute; - z-index: 39; - height: 32px; + z-index: 3000; display: flex; padding-left: 7px; border-radius: 4px; + -webkit-app-region: no-drag; } .monaco-workbench .debug-toolbar .monaco-action-bar .action-item { diff --git a/src/vs/workbench/services/layout/browser/layoutService.ts b/src/vs/workbench/services/layout/browser/layoutService.ts index 7c44a06d34a..5c05a72e79f 100644 --- a/src/vs/workbench/services/layout/browser/layoutService.ts +++ b/src/vs/workbench/services/layout/browser/layoutService.ts @@ -25,6 +25,8 @@ export const enum Parts { export const enum LayoutSettings { ACTIVITY_BAR_LOCATION = 'workbench.activityBar.location', + EDITOR_TABS_MODE = 'workbench.editor.showTabs', + COMMAND_CENTER = 'window.commandCenter', } export const enum ActivityBarPosition { @@ -33,6 +35,12 @@ export const enum ActivityBarPosition { HIDDEN = 'hidden' } +export const enum EditorTabsMode { + MULTIPLE = 'multiple', + SINGLE = 'single', + NONE = 'none' +} + export const enum Position { LEFT, RIGHT,