From bd1f8017041dc27c0bf04e3ed2612cc15f219898 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 15 Mar 2017 16:14:22 +0100 Subject: [PATCH] themes - status bar background color --- .../parts/statusbar/media/statusbarpart.css | 17 ---- .../browser/parts/statusbar/statusbarPart.ts | 14 +++- src/vs/workbench/browser/styles.ts | 28 ++++++- .../workbench/electron-browser/workbench.ts | 5 -- .../browser/media/debug.contribution.css | 8 +- .../electron-browser/debug.contribution.ts | 2 + .../debug/electron-browser/debugService.ts | 5 -- .../statusbarColorProvider.ts | 77 +++++++++++++++++++ .../services/part/common/partService.ts | 10 --- 9 files changed, 120 insertions(+), 46 deletions(-) create mode 100644 src/vs/workbench/parts/debug/electron-browser/statusbarColorProvider.ts diff --git a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css index 958b87232e1..135152cb47d 100644 --- a/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css +++ b/src/vs/workbench/browser/parts/statusbar/media/statusbarpart.css @@ -64,25 +64,8 @@ /* TODO@theme */ -.vs .monaco-workbench > .part.statusbar, -.vs-dark .monaco-workbench > .part.statusbar, -.hc-black .monaco-workbench > .part.statusbar { - color: white; -} - -.vs .monaco-workbench > .part.statusbar, -.vs-dark .monaco-workbench > .part.statusbar { - background: #007ACC; -} - .hc-black .monaco-workbench > .part.statusbar { border-top-color: #6FC3DF; - background-color: #000; -} - -.vs .monaco-workbench.no-workspace > .part.statusbar, -.vs-dark .monaco-workbench.no-workspace > .part.statusbar { - background: #68217A; } .vs .monaco-workbench > .part.statusbar > .statusbar-item a:hover:not([disabled]):not(.disabled), diff --git a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts index 242d9677d17..c65f0a4e3a2 100644 --- a/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts +++ b/src/vs/workbench/browser/parts/statusbar/statusbarPart.ts @@ -27,6 +27,8 @@ import { getCodeEditor } from 'vs/editor/common/services/codeEditorService'; import { IContextMenuService } from 'vs/platform/contextview/browser/contextView'; import { Action } from 'vs/base/common/actions'; import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND } from 'vs/workbench/browser/styles'; +import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; export class StatusbarPart extends Part implements IStatusbarService { @@ -42,7 +44,8 @@ export class StatusbarPart extends Part implements IStatusbarService { constructor( id: string, @IInstantiationService private instantiationService: IInstantiationService, - @IThemeService themeService: IThemeService + @IThemeService themeService: IThemeService, + @IWorkspaceContextService private contextService: IWorkspaceContextService ) { super(id, { hasTitle: false }, themeService); @@ -124,9 +127,18 @@ export class StatusbarPart extends Part implements IStatusbarService { return dispose; })); + this.updateStyles(); + return this.statusItemsContainer; } + protected updateStyles(): void { + const container = this.getContainer(); + + container.style('color', this.getColor(STATUS_BAR_FOREGROUND)); + container.style('background-color', this.getColor(this.contextService.hasWorkspace() ? STATUS_BAR_BACKGROUND : STATUS_BAR_NO_FOLDER_BACKGROUND)); + } + private doCreateStatusItem(alignment: StatusbarAlignment, priority: number = 0): HTMLElement { const el = document.createElement('div'); dom.addClass(el, 'statusbar-item'); diff --git a/src/vs/workbench/browser/styles.ts b/src/vs/workbench/browser/styles.ts index 761438ec81c..414038103d8 100644 --- a/src/vs/workbench/browser/styles.ts +++ b/src/vs/workbench/browser/styles.ts @@ -6,6 +6,8 @@ import nls = require('vs/nls'); import { registerColor, editorBackground } from 'vs/platform/theme/common/colorRegistry'; +// < --- Tabs --- > + export const ACTIVE_TAB_BACKGROUND = registerColor('activeTabBackground', { dark: editorBackground, light: editorBackground, @@ -18,8 +20,32 @@ export const INACTIVE_TAB_BACKGROUND = registerColor('inactiveTabBackground', { hc: '#00000000' }, nls.localize('inactiveTabBackground', "Inactive Tab background color. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group.")); + +// < --- Panels --- > + export const PANEL_BACKGROUND = registerColor('panelBackground', { dark: editorBackground, light: editorBackground, hc: editorBackground -}, nls.localize('panelBackground', "Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal.")); \ No newline at end of file +}, nls.localize('panelBackground', "Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal.")); + + +// < --- Status --- > + +export const STATUS_BAR_FOREGROUND = registerColor('statusBarForeground', { + dark: '#FFFFFF', + light: '#FFFFFF', + hc: '#FFFFFF' +}, nls.localize('statusBarForeground', "Status bar foreground color. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_BACKGROUND = registerColor('statusBarBackground', { + dark: '#007ACC', + light: '#007ACC', + hc: '#00000000' +}, nls.localize('statusBarBackground', "Standard status bar background color. The status bar is shown in the bottom of the window")); + +export const STATUS_BAR_NO_FOLDER_BACKGROUND = registerColor('statusBarNoFolderBackground', { + dark: '#68217A', + light: '#68217A', + hc: '#00000000' +}, nls.localize('statusBarNoFolderBackground', "Status bar background color when no folder is opened. The status bar is shown in the bottom of the window")); \ No newline at end of file diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 514f3f8fc1f..5d8a3918fcd 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -965,11 +965,6 @@ export class Workbench implements IPartService { this.workbench.addClass('nopanel'); } - // Apply no-workspace state as CSS class - if (!this.contextService.hasWorkspace()) { - this.workbench.addClass('no-workspace'); - } - // Apply title style if shown const titleStyle = this.getCustomTitleBarStyle(); if (titleStyle) { diff --git a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css index 56a944894a4..f9cbd4fb7e0 100644 --- a/src/vs/workbench/parts/debug/browser/media/debug.contribution.css +++ b/src/vs/workbench/parts/debug/browser/media/debug.contribution.css @@ -225,10 +225,4 @@ .hc-black .monaco-editor .debug-top-stack-frame-line { background: rgba(255, 246, 0, .8); mix-blend-mode: lighten; /* Preserves text selection's contrast */ -} - -/* TODO@theme */ - -.monaco-workbench.debugging > .part.statusbar { - background: #CC6633 !important; -} +} \ No newline at end of file diff --git a/src/vs/workbench/parts/debug/electron-browser/debug.contribution.ts b/src/vs/workbench/parts/debug/electron-browser/debug.contribution.ts index e49fadba302..39c608f935b 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debug.contribution.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debug.contribution.ts @@ -35,6 +35,7 @@ import { IViewletService } from 'vs/workbench/services/viewlet/browser/viewlet'; import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService'; import * as debugCommands from 'vs/workbench/parts/debug/electron-browser/debugCommands'; import { IQuickOpenRegistry, Extensions as QuickOpenExtensions, QuickOpenHandlerDescriptor } from 'vs/workbench/browser/quickopen'; +import { StatusBarColorProvider } from 'vs/workbench/parts/debug/electron-browser/statusbarColorProvider'; class OpenDebugViewletAction extends ToggleViewletAction { public static ID = VIEWLET_ID; @@ -107,6 +108,7 @@ registry.registerWorkbenchAction(new SyncActionDescriptor(OpenDebugViewletAction Registry.as(WorkbenchExtensions.Workbench).registerWorkbenchContribution(DebugEditorModelManager); Registry.as(WorkbenchExtensions.Workbench).registerWorkbenchContribution(DebugActionsWidget); Registry.as(WorkbenchExtensions.Workbench).registerWorkbenchContribution(DebugContentProvider); +Registry.as(WorkbenchExtensions.Workbench).registerWorkbenchContribution(StatusBarColorProvider); const debugCategory = nls.localize('debugCategory', "Debug"); registry.registerWorkbenchAction(new SyncActionDescriptor( diff --git a/src/vs/workbench/parts/debug/electron-browser/debugService.ts b/src/vs/workbench/parts/debug/electron-browser/debugService.ts index cc1bf84ff7e..6b0780d09cc 100644 --- a/src/vs/workbench/parts/debug/electron-browser/debugService.ts +++ b/src/vs/workbench/parts/debug/electron-browser/debugService.ts @@ -764,10 +764,6 @@ export class DebugService implements debug.IDebugService { this.viewletService.openViewlet(debug.VIEWLET_ID); } - // Do not change status bar to orange if we are just running without debug. - if (!configuration.noDebug) { - this.partService.addClass('debugging'); - } this.extensionService.activateByEvent(`onDebug:${configuration.type}`).done(null, errors.onUnexpectedError); this.inDebugMode.set(true); this.debugType.set(configuration.type); @@ -936,7 +932,6 @@ export class DebugService implements debug.IDebugService { this.updateStateAndEmit(session.getId(), debug.State.Inactive); if (this.model.getProcesses().length === 0) { - this.partService.removeClass('debugging'); // set breakpoints back to unverified since the session ended. const data: { [id: string]: { line: number, verified: boolean } } = {}; this.model.getBreakpoints().forEach(bp => { diff --git a/src/vs/workbench/parts/debug/electron-browser/statusbarColorProvider.ts b/src/vs/workbench/parts/debug/electron-browser/statusbarColorProvider.ts new file mode 100644 index 00000000000..5a1152af5ca --- /dev/null +++ b/src/vs/workbench/parts/debug/electron-browser/statusbarColorProvider.ts @@ -0,0 +1,77 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { localize } from 'vs/nls'; +import { registerColor } from 'vs/platform/theme/common/colorRegistry'; +import { IWorkbenchContribution } from 'vs/workbench/common/contributions'; +import { IPartService, Parts } from 'vs/workbench/services/part/common/partService'; +import { WorkbenchComponent } from 'vs/workbench/common/component'; +import { IDebugService, State } from 'vs/workbench/parts/debug/common/debug'; +import { IWorkspaceContextService } from 'vs/platform/workspace/common/workspace'; +import { STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_BACKGROUND } from 'vs/workbench/browser/styles'; + +// colors for theming + +export const STATUS_BAR_DEBUGGING_BACKGROUND = registerColor('statusBarDebuggingBackground', { + dark: '#CC6633', + light: '#CC6633', + hc: '#CC6633' +}, localize('statusBarDebuggingBackground', "Status bar background color when a program is being debugged. The status bar is shown in the bottom of the window")); + +export class StatusBarColorProvider extends WorkbenchComponent implements IWorkbenchContribution { + private static ID = 'debug.statusbarColorProvider'; + + constructor( + @IThemeService themeService: IThemeService, + @IDebugService private debugService: IDebugService, + @IWorkspaceContextService private contextService: IWorkspaceContextService, + @IPartService private partService: IPartService + ) { + super(StatusBarColorProvider.ID, themeService); + + this.registerListeners(); + } + + private registerListeners(): void { + this.toUnbind.push(this.debugService.onDidChangeState(state => this.onDidChangeState(state))); + } + + private onDidChangeState(state: State): void { + this.updateStyles(); + } + + protected updateStyles(): void { + if (this.partService.isVisible(Parts.STATUSBAR_PART)) { + const container = this.partService.getContainer(Parts.STATUSBAR_PART); + container.style.backgroundColor = this.getColor(this.getBackgroundColorKey()); + } + } + + private getBackgroundColorKey(): string { + + // no debugging + if (this.debugService.state === State.Inactive || this.isRunningWithoutDebug()) { + if (this.contextService.hasWorkspace()) { + return STATUS_BAR_BACKGROUND; + } + + return STATUS_BAR_NO_FOLDER_BACKGROUND; + } + + // debugging + return STATUS_BAR_DEBUGGING_BACKGROUND; + } + + private isRunningWithoutDebug(): boolean { + const process = this.debugService.getViewModel().focusedProcess; + + return process && process.configuration && process.configuration.noDebug; + } + + public getId(): string { + return StatusBarColorProvider.ID; + } +} \ No newline at end of file diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index e4423ffa844..43b74ab9f6a 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/src/vs/workbench/services/part/common/partService.ts @@ -107,16 +107,6 @@ export interface IPartService { */ getSideBarPosition(): Position; - /** - * Adds a class to the workbench part. - */ - addClass(clazz: string): void; - - /** - * Removes a class from the workbench part. - */ - removeClass(clazz: string): void; - /** * Returns the identifier of the element that contains the workbench. */ -- GitLab