Improved offline behaviour of status bar.

Statusbar gets an additional css class now to indicate that theia is offline. Introduced also additional theme variables for that case. Co-authored-by: Anton Kosyakov <anton.kosyakov@typefox.io> Signed-off-by: Jan Bicker <jan.bicker@typefox.io>
jencii · Dec 27, 2019 · a401812 · a401812
1 parent 6b478ee
commit a401812
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -1444,6 +1444,39 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                     hc: 'editorGutter.addedBackground'
                 }, description: 'Background color of success widgets (like alerts or notifications).'
             },
+            // Statusbar
+            {
+                id: 'statusBar.offlineBackground',
+                defaults: {
+                    dark: 'editorWarning.foreground',
+                    light: 'editorWarning.foreground',
+                    hc: 'editorWarning.foreground'
+                }, description: 'Background of hovered statusbar item in case the theia server is offlline.'
+            },
+            {
+                id: 'statusBar.offlineForeground',
+                defaults: {
+                    dark: 'editor.background',
+                    light: 'editor.background',
+                    hc: 'editor.background'
+                }, description: 'Background of hovered statusbar item in case the theia server is offlline.'
+            },
+            {
+                id: 'statusBarItem.offlineHoverBackground',
+                defaults: {
+                    dark: Color.lighten('statusBar.offlineBackground', 0.4),
+                    light: Color.lighten('statusBar.offlineBackground', 0.4),
+                    hc: Color.lighten('statusBar.offlineBackground', 0.4)
+                }, description: 'Background of hovered statusbar item in case the theia server is offlline.'
+            },
+            {
+                id: 'statusBarItem.offlineActiveBackground',
+                defaults: {
+                    dark: Color.lighten('statusBar.offlineBackground', 0.6),
+                    light: Color.lighten('statusBar.offlineBackground', 0.6),
+                    hc: Color.lighten('statusBar.offlineBackground', 0.6)
+                }, description: 'Background of active statusbar item in case the theia server is offlline.'
+            },
             // Buttons
             {
                 id: 'secondaryButton.foreground',

diff --git a/packages/core/src/browser/connection-status-service.ts b/packages/core/src/browser/connection-status-service.ts
@@ -20,7 +20,7 @@ import { Event, Emitter } from '../common/event';
 import { DefaultFrontendApplicationContribution } from './frontend-application';
 import { StatusBar, StatusBarAlignment } from './status-bar/status-bar';
 import { WebSocketConnectionProvider } from './messaging/ws-connection-provider';
-import { Disposable } from '../common';
+import { Disposable, DisposableCollection } from '../common';
 
 /**
  * Service for listening on backend connection changes.
@@ -173,6 +173,8 @@ export class FrontendConnectionStatusService extends AbstractConnectionStatusSer
 @injectable()
 export class ApplicationConnectionStatusContribution extends DefaultFrontendApplicationContribution {
 
+    protected readonly toDisposeOnOnline = new DisposableCollection();
+
     constructor(
         @inject(ConnectionStatusService) protected readonly connectionStatusService: ConnectionStatusService,
         @inject(StatusBar) protected readonly statusBar: StatusBar,
@@ -198,9 +200,7 @@ export class ApplicationConnectionStatusContribution extends DefaultFrontendAppl
     private statusbarId = 'connection-status';
 
     protected handleOnline(): void {
-        this.statusBar.setBackgroundColor(undefined);
-        this.statusBar.setColor(undefined);
-        this.statusBar.removeElement(this.statusbarId);
+        this.toDisposeOnOnline.dispose();
     }
 
     protected handleOffline(): void {
@@ -210,7 +210,8 @@ export class ApplicationConnectionStatusContribution extends DefaultFrontendAppl
             tooltip: 'Cannot connect to backend.',
             priority: 5000
         });
-        this.statusBar.setBackgroundColor('var(--theia-editorWarning-foreground)');
-        this.statusBar.setColor('var(--theia-statusBar-foreground)');
+        this.toDisposeOnOnline.push(Disposable.create(() => this.statusBar.removeElement(this.statusbarId)));
+        document.body.classList.add('theia-mod-offline');
+        this.toDisposeOnOnline.push(Disposable.create(() => document.body.classList.remove('theia-mod-offline')));
     }
 }
diff --git a/packages/core/src/browser/style/status-bar.css b/packages/core/src/browser/style/status-bar.css
@@ -26,7 +26,7 @@
     border-top: var(--theia-border-width) solid var(--theia-statusBar-border);
 }
 
-body.theia-no-open-workspace #theia-statusBar{
+body.theia-no-open-workspace #theia-statusBar {
     background: var(--theia-statusBar-noFolderBackground);
     color: var(--theia-statusBar-noFolderForeground);
     border-top: var(--theia-border-width) solid var(--theia-statusBar-noFolderBorder);
@@ -72,6 +72,22 @@ body.theia-no-open-workspace #theia-statusBar{
     background-color: var(--theia-statusBarItem-activeBackground);
 }
 
+.theia-mod-offline #theia-statusBar {
+    background-color: var(--theia-statusBar-offlineBackground) !important;
+}
+
+.theia-mod-offline #theia-statusBar .area .element {
+    color: var(--theia-statusBar-offlineForeground) !important;
+}
+
+.theia-mod-offline #theia-statusBar .area .element.hasCommand:hover {
+    background-color: var(--theia-statusBarItem-offlineHoverBackground) !important;
+}
+
+.theia-mod-offline #theia-statusBar .area .element.hasCommand:active {
+    background-color: var(--theia-statusBarItem-offlineActiveBackground) !important;
+}
+
 #theia-statusBar .area.left .element {
     margin-right: var(--theia-ui-padding);
 }