Improve notebook colors and UX (#3914)

This was reviewed / worked on with Smitha and will be signed off on by PM via mail.
1 thing left (make run button look better when not selected) will be one in separate review.

Changes
- Add top/bottom padding to editor so it's not cramped
- Added an (on by default) setting `notebook.overrideEditorTheming`. This controls whether new colors etc. are used for notebook editors or if users should see vanilla UI like in standard editor. Settings under this flag are:
  - When unselected, editor has same color as toolbar. On selection it goes back to regular editor view so colors work "right"
  - In standard light/dark themes we now use a filled in background color instead of border box.
This commit is contained in:
Kevin Cunnane
2019-02-05 17:51:42 -08:00
committed by GitHub
parent 0e54393d5a
commit a2c7377134
6 changed files with 209 additions and 111 deletions

View File

@@ -24,7 +24,7 @@ import { Memento } from 'vs/workbench/common/memento';
import { IStorageService } from 'vs/platform/storage/common/storage';
import { IExtensionService } from 'vs/workbench/services/extensions/common/extensions';
import { IExtensionManagementService, IExtensionIdentifier } from 'vs/platform/extensionManagement/common/extensionManagement';
import { Disposable } from 'vs/base/common/lifecycle';
import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
import { getIdFromLocalExtensionId } from 'vs/platform/extensionManagement/common/extensionManagementUtil';
import { Deferred } from 'sql/base/common/promise';
import { SqlSessionManager } from 'sql/workbench/services/notebook/common/sqlSessionManager';
@@ -35,6 +35,11 @@ import { NotebookEditorVisibleContext } from 'sql/workbench/services/notebook/co
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
import { NotebookEditor } from 'sql/parts/notebook/notebookEditor';
import { IEditorGroupsService } from 'vs/workbench/services/group/common/editorGroupsService';
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { registerNotebookThemes } from 'sql/parts/notebook/notebookStyles';
const OVERRIDE_EDITOR_THEMING_SETTING = 'notebook.overrideEditorTheming';
export interface NotebookProviderProperties {
provider: string;
@@ -89,6 +94,8 @@ export class NotebookService extends Disposable implements INotebookService {
private _registrationComplete = new Deferred<void>();
private _isRegistrationComplete = false;
private notebookEditorVisible: IContextKey<boolean>;
private _themeParticipant: IDisposable;
private _overrideEditorThemeSetting: boolean;
constructor(
@IStorageService private _storageService: IStorageService,
@@ -97,7 +104,9 @@ export class NotebookService extends Disposable implements INotebookService {
@IInstantiationService private _instantiationService: IInstantiationService,
@IContextKeyService private _contextKeyService: IContextKeyService,
@IEditorService private readonly _editorService: IEditorService,
@IEditorGroupsService private readonly _editorGroupsService: IEditorGroupsService
@IEditorGroupsService private readonly _editorGroupsService: IEditorGroupsService,
@IConfigurationService private readonly _configurationService: IConfigurationService,
@IThemeService private readonly _themeService: IThemeService
) {
super();
this._register(notebookRegistry.onNewRegistration(this.updateRegisteredProviders, this));
@@ -114,9 +123,17 @@ export class NotebookService extends Disposable implements INotebookService {
this._register(extensionManagementService.onDidUninstallExtension(({ identifier }) => this.removeContributedProvidersFromCache(identifier, extensionService)));
}
this.hookContextKeyListeners();
this.hookNotebookThemesAndConfigListener();
}
private hookContextKeyListeners() {
public dispose(): void {
super.dispose();
if (this._themeParticipant) {
this._themeParticipant.dispose();
}
}
private hookContextKeyListeners(): void {
const updateEditorContextKeys = () => {
const visibleEditors = this._editorService.visibleControls;
this.notebookEditorVisible.set(visibleEditors.some(control => control.getId() === NotebookEditor.ID));
@@ -132,6 +149,30 @@ export class NotebookService extends Disposable implements INotebookService {
}
}
private hookNotebookThemesAndConfigListener(): void {
if(this._configurationService) {
this.updateNotebookThemes();
this._register(this._configurationService.onDidChangeConfiguration(e => {
if (e.affectsConfiguration(OVERRIDE_EDITOR_THEMING_SETTING)) {
this.updateNotebookThemes();
}
}));
}
}
private updateNotebookThemes() {
let overrideEditorSetting = this._configurationService.getValue<boolean>(OVERRIDE_EDITOR_THEMING_SETTING);
if (overrideEditorSetting !== this._overrideEditorThemeSetting) {
// Re-add the participant since this will trigger update of theming rules, can't just
// update something and ask to change
if (this._themeParticipant) {
this._themeParticipant.dispose();
}
this._overrideEditorThemeSetting = overrideEditorSetting;
this._themeParticipant = registerNotebookThemes(overrideEditorSetting);
}
}
private updateRegisteredProviders(p: { id: string; registration: NotebookProviderRegistration; }) {
let registration = p.registration;