Merge pull request #168 from CodinGame/improve-view-management

Improve view management

Author: CGNonofr

demo/index.html

@@ -21,7 +21,11 @@ <h1>Editor</h1>
           <button id="filesystem">Attach filesystem</button>
           <button id="customEditorPanel">Open custom editor panel</button>
           <button id="clearStorage">Clear storage</button>
+          <br />
+          <button id="togglePanel">Toggle Panel</button>
+          <button id="toggleAuxiliary">Toggle Secondary Panel</button>
         </div>
+        <div style="border: 1px solid var(--vscode-editorWidget-border); width: 300px; height: 800px" id="auxiliaryBar"></div>
       </div>
 
       <div id="panel"></div>

demo/src/main.ts

@@ -4,7 +4,7 @@ import { createConfiguredEditor, createModelReference } from 'vscode/monaco'
 import { registerFileSystemOverlay, HTMLFileSystemProvider } from 'vscode/service-override/files'
 import * as vscode from 'vscode'
 import { ILogService, StandaloneServices, IPreferencesService, IEditorService, IDialogService } from 'vscode/services'
-import { ConfirmResult } from 'vscode/service-override/views'
+import { ConfirmResult, Parts, isPartVisibile, setPartVisibility } from 'vscode/service-override/views'
 import { clearStorage } from './setup'
 import { CustomEditorInput } from './features/customView'
 import './features/debugger'
@@ -191,5 +191,13 @@ document.querySelector('#customEditorPanel')!.addEventListener('click', async ()
 })
 
 document.querySelector('#clearStorage')!.addEventListener('click', async () => {
-  clearStorage()
+  await clearStorage()
+})
+
+document.querySelector('#togglePanel')!.addEventListener('click', async () => {
+  setPartVisibility(Parts.PANEL_PART, !isPartVisibile(Parts.PANEL_PART))
+})
+
+document.querySelector('#toggleAuxiliary')!.addEventListener('click', async () => {
+  setPartVisibility(Parts.AUXILIARYBAR_PART, !isPartVisibile(Parts.AUXILIARYBAR_PART))
 })

demo/src/setup.ts

@@ -1,4 +1,4 @@
-import { ILogService, LogLevel, StandaloneServices, initialize as initializeMonacoService } from 'vscode/services'
+import { ILogService, IStorageService, LogLevel, StandaloneServices, getService, initialize as initializeMonacoService } from 'vscode/services'
 import { initialize as initializeVscodeExtensions } from 'vscode/extensions'
 import getModelServiceOverride from 'vscode/service-override/model'
 import getNotificationServiceOverride from 'vscode/service-override/notifications'
@@ -9,7 +9,13 @@ import getTextmateServiceOverride from 'vscode/service-override/textmate'
 import getThemeServiceOverride from 'vscode/service-override/theme'
 import getLanguagesServiceOverride from 'vscode/service-override/languages'
 import getAudioCueServiceOverride from 'vscode/service-override/audioCue'
-import getViewsServiceOverride, { isEditorPartVisible, renderSidebarPart, renderActivitybarPar, renderEditorPart, renderPanelPart, renderStatusBarPart } from 'vscode/service-override/views'
+import getViewsServiceOverride, {
+  isEditorPartVisible,
+  Parts,
+  onPartVisibilityChange,
+  isPartVisibile,
+  attachPart
+} from 'vscode/service-override/views'
 import getDebugServiceOverride from 'vscode/service-override/debug'
 import getPreferencesServiceOverride from 'vscode/service-override/preferences'
 import getSnippetServiceOverride from 'vscode/service-override/snippets'
@@ -20,7 +26,7 @@ import getSearchServiceOverride from 'vscode/service-override/search'
 import getMarkersServiceOverride from 'vscode/service-override/markers'
 import getAccessibilityServiceOverride from 'vscode/service-override/accessibility'
 import getLanguageDetectionWorkerServiceOverride from 'vscode/service-override/languageDetectionWorker'
-import getStorageServiceOverride, { IStorageItemsChangeEvent, StorageScope } from 'vscode/service-override/storage'
+import getStorageServiceOverride, { BrowserStorageService } from 'vscode/service-override/storage'
 import getExtensionServiceOverride from 'vscode/service-override/extensions'
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker'
 import TextMateWorker from 'vscode/workers/textMate.worker?worker'
@@ -50,8 +56,6 @@ window.MonacoEnvironment = {
   }
 }
 
-const onStorageChange = new monaco.Emitter<IStorageItemsChangeEvent>()
-
 // Override services
 await initializeMonacoService({
   ...getExtensionServiceOverride(toWorkerConfig(ExtensionHostWorker)),
@@ -78,33 +82,32 @@ await initializeMonacoService({
   ...getMarkersServiceOverride(),
   ...getAccessibilityServiceOverride(),
   ...getLanguageDetectionWorkerServiceOverride(),
-  ...getStorageServiceOverride({
-    read (scope) {
-      return new Map(Object.entries(JSON.parse(localStorage.getItem(`storage-${scope}`) ?? '{}')))
-    },
-    async write (scope, data) {
-      localStorage.setItem(`storage-${scope}`, JSON.stringify(Object.fromEntries(data.entries())))
-    },
-    onDidChange: onStorageChange.event
-  })
+  ...getStorageServiceOverride()
 })
 StandaloneServices.get(ILogService).setLevel(LogLevel.Off)
 
-export function clearStorage (): void {
-  const allKeys = new Set([StorageScope.APPLICATION, StorageScope.PROFILE, StorageScope.WORKSPACE].flatMap(scope => Object.keys(JSON.parse(localStorage.getItem(`storage-${scope}`) ?? '{}'))))
-  localStorage.removeItem(`storage-${StorageScope.APPLICATION}`)
-  localStorage.removeItem(`storage-${StorageScope.PROFILE}`)
-  localStorage.removeItem(`storage-${StorageScope.WORKSPACE}`)
-  onStorageChange.fire({
-    deleted: allKeys,
-    changed: new Map()
-  })
+export async function clearStorage (): Promise<void> {
+  await (await getService(IStorageService) as BrowserStorageService).clear()
 }
 
 await initializeVscodeExtensions()
 
-renderSidebarPart(document.querySelector<HTMLDivElement>('#sidebar')!)
-renderActivitybarPar(document.querySelector<HTMLDivElement>('#activityBar')!)
-renderPanelPart(document.querySelector<HTMLDivElement>('#panel')!)
-renderEditorPart(document.querySelector<HTMLDivElement>('#editors')!)
-renderStatusBarPart(document.querySelector<HTMLDivElement>('#statusBar')!)
+for (const { part, element } of [
+  { part: Parts.SIDEBAR_PART, element: '#sidebar' },
+  { part: Parts.ACTIVITYBAR_PART, element: '#activityBar' },
+  { part: Parts.PANEL_PART, element: '#panel' },
+  { part: Parts.EDITOR_PART, element: '#editors' },
+  { part: Parts.STATUSBAR_PART, element: '#statusBar' },
+  { part: Parts.AUXILIARYBAR_PART, element: '#auxiliaryBar' }
+]) {
+  const el = document.querySelector<HTMLDivElement>(element)!
+  attachPart(part, el)
+
+  if (!isPartVisibile(part)) {
+    el.style.display = 'none'
+  }
+
+  onPartVisibilityChange(part, visible => {
+    el.style.display = visible ? 'block' : 'none'
+  })
+}

src/lifecycle.ts

@@ -0,0 +1,66 @@
+import { Registry } from 'vs/platform/registry/common/platform'
+import { IWorkbenchContributionsRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/contributions'
+import { ILifecycleService, LifecyclePhase } from 'vs/workbench/services/lifecycle/common/lifecycle'
+import { IInstantiationService, ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'
+import { Barrier, RunOnceScheduler, runWhenIdle } from 'vs/base/common/async'
+import { Emitter } from 'vs/base/common/event'
+
+const renderWorkbenchEmitter = new Emitter<ServicesAccessor>()
+export const onRenderWorkbench = renderWorkbenchEmitter.event
+
+export const serviceInitializedBarrier = new Barrier()
+
+interface ServiceInitializeParticipant {
+  (accessor: ServicesAccessor): Promise<void>
+}
+const serviceInitializePreParticipants: ServiceInitializeParticipant[] = []
+const serviceInitializeParticipants: ServiceInitializeParticipant[] = []
+const serviceInitializePostParticipants: ServiceInitializeParticipant[] = []
+export function registerServiceInitializePreParticipant (participant: ServiceInitializeParticipant): void {
+  serviceInitializePreParticipants.push(participant)
+}
+export function registerServiceInitializeParticipant (participant: ServiceInitializeParticipant): void {
+  serviceInitializeParticipants.push(participant)
+}
+export function registerServiceInitializePostParticipant (participant: ServiceInitializeParticipant): void {
+  serviceInitializePostParticipants.push(participant)
+}
+
+export async function startup (instantiationService: IInstantiationService): Promise<void> {
+  await instantiationService.invokeFunction(async accessor => {
+    await Promise.all(serviceInitializePreParticipants.map(participant => participant(accessor)))
+  })
+
+  await instantiationService.invokeFunction(async accessor => {
+    const lifecycleService = accessor.get(ILifecycleService)
+
+    await Promise.all(serviceInitializeParticipants.map(participant => participant(accessor)))
+
+    // Signal to lifecycle that services are set
+    lifecycleService.phase = LifecyclePhase.Ready
+  })
+
+  await instantiationService.invokeFunction(async accessor => {
+    await Promise.all(serviceInitializePostParticipants.map(participant => participant(accessor)))
+  })
+
+  serviceInitializedBarrier.open()
+
+  instantiationService.invokeFunction(accessor => {
+    const lifecycleService = accessor.get(ILifecycleService)
+
+    Registry.as<IWorkbenchContributionsRegistry>(WorkbenchExtensions.Workbench).start(accessor)
+
+    renderWorkbenchEmitter.fire(accessor)
+
+    lifecycleService.phase = LifecyclePhase.Restored
+
+    // Set lifecycle phase to `Eventually` after a short delay and when idle (min 2.5sec, max 5sec)
+    const eventuallyPhaseScheduler = new RunOnceScheduler(() => {
+      runWhenIdle(() => {
+        lifecycleService.phase = LifecyclePhase.Eventually
+      }, 2500)
+    }, 2500)
+    eventuallyPhaseScheduler.schedule()
+  })
+}

src/service-override/configuration.ts

@@ -35,7 +35,7 @@ import 'vs/workbench/api/common/configurationExtensionPoint'
 import { IBrowserWorkbenchEnvironmentService } from 'vs/workbench/services/environment/browser/environmentService'
 import getFileServiceOverride from './files'
 import { memoizedConstructor, unsupported } from '../tools'
-import { registerServiceInitializePreParticipant } from '../services'
+import { registerServiceInitializePreParticipant } from '../lifecycle'
 
 async function updateUserConfiguration (configurationJson: string): Promise<void> {
   const userDataProfilesService = StandaloneServices.get(IUserDataProfilesService)