Hide/unhide items on the status bar

+ This commit adds a new context menu in the status bar, allowing users
  to hide/unhide the visibility of an item.

  Signed-off-by: Duc Nguyen <[email protected]>

packages/core/src/browser/keybinding.ts

@@ -23,7 +23,7 @@ import { KeyCode, KeySequence, Key } from './keyboard/keys';
 import { KeyboardLayoutService } from './keyboard/keyboard-layout-service';
 import { ContributionProvider } from '../common/contribution-provider';
 import { ILogger } from '../common/logger';
-import { StatusBarAlignment, StatusBar } from './status-bar/status-bar';
+// import { StatusBarAlignment, StatusBar } from './status-bar/status-bar';
 import { ContextKeyService } from './context-key-service';
 import { CorePreferences } from './core-preferences';
 import * as common from '../common/keybinding';
@@ -117,8 +117,8 @@ export class KeybindingRegistry {
     @inject(ContributionProvider) @named(KeybindingContribution)
     protected readonly contributions: ContributionProvider<KeybindingContribution>;
 
-    @inject(StatusBar)
-    protected readonly statusBar: StatusBar;
+    // @inject(StatusBar)
+    // protected readonly statusBar: StatusBar;
 
     @inject(ILogger)
     protected readonly logger: ILogger;
@@ -533,18 +533,20 @@ export class KeybindingRegistry {
             /* Accumulate the keysequence */
             event.preventDefault();
             event.stopPropagation();
-
+            /*
             this.statusBar.setElement('keybinding-status', {
                 text: `(${this.acceleratorForSequence(this.keySequence, '+')}) was pressed, waiting for more keys`,
                 alignment: StatusBarAlignment.LEFT,
                 priority: 2
             });
+            */
+
         } else {
             if (match && match.kind === 'full') {
                 this.executeKeyBinding(match.binding, event);
             }
             this.keySequence = [];
-            this.statusBar.removeElement('keybinding-status');
+            // this.statusBar.removeElement('keybinding-status');
         }
     }
 

packages/core/src/browser/status-bar/status-bar.tsx

@@ -17,10 +17,17 @@
 import * as React from 'react';
 import { injectable, inject } from 'inversify';
 import Octicon, { getIconByName } from '@primer/octicons-react';
-import { CommandService } from '../../common';
+import {
+    CommandRegistry,
+    CommandService,
+    MenuAction,
+    MenuPath,
+    MenuModelRegistry
+} from '../../common';
 import { ReactWidget } from '../widgets/react-widget';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { LabelParser, LabelIcon } from '../label-parser';
+import { ContextMenuRenderer } from '../context-menu-renderer';
 
 export interface StatusBarEntry {
     /**
@@ -43,6 +50,7 @@ export interface StatusBarEntry {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     arguments?: any[];
     priority?: number;
+    canHide?: boolean;
     onclick?: (e: MouseEvent) => void;
 }
 
@@ -74,16 +82,22 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     protected backgroundColor: string | undefined;
     protected color: string | undefined;
     protected entries: Map<string, StatusBarEntry> = new Map();
+    protected hidden: Set<string>;
+    protected readonly contextMenuPath: MenuPath = ['statusbar_context_menu'];
 
     constructor(
         @inject(CommandService) protected readonly commands: CommandService,
         @inject(LabelParser) protected readonly entryService: LabelParser,
-        @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService
+        @inject(FrontendApplicationStateService) protected readonly applicationStateService: FrontendApplicationStateService,
+        @inject(CommandRegistry) protected readonly commandRegistry: CommandRegistry,
+        @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer,
+        @inject(MenuModelRegistry) protected readonly menuRegistry: MenuModelRegistry
     ) {
         super();
         delete this.scrollOptions;
         this.id = 'theia-statusBar';
         this.addClass('noselect');
+        this.hidden = new Set();
     }
 
     protected get ready(): Promise<void> {
@@ -93,15 +107,56 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
     async setElement(id: string, entry: StatusBarEntry): Promise<void> {
         await this.ready;
         this.entries.set(id, entry);
+        this.registerEntryCommand(id, entry);
+        this.refreshEntry(id);
         this.update();
     }
 
     async removeElement(id: string): Promise<void> {
         await this.ready;
         this.entries.delete(id);
+        this.unregisterEntry(id);
         this.update();
     }
 
+    async toggleItemVisibility(id: string): Promise<void> {
+        await this.ready;
+        // eslint-disable-next-line no-unused-expressions
+        this.hidden.has(id) ? this.hidden.delete(id) : this.hidden.add(id);
+        this.refreshEntry(id);
+        this.update();
+    }
+
+    protected registerEntryCommand(id: string, toRegister: StatusBarEntry): void {
+        const commandId = this.toggleVisibilityCommandId(id);
+        console.error(`ID: ${id} has command id ${commandId}`);
+        this.commandRegistry.registerCommand({ id: commandId }, {
+            execute: () => this.toggleItemVisibility(id),
+            isEnabled: () => toRegister.canHide === undefined ? true : toRegister.canHide
+        });
+    }
+
+    protected unregisterEntry(id: string): void {
+        const commandId = this.toggleVisibilityCommandId(id);
+        this.commandRegistry.unregisterCommand(commandId);
+        this.menuRegistry.unregisterMenuAction(commandId);
+    }
+
+    protected toggleVisibilityCommandId(id: string): string {
+        return `${this.id}:toggle-statusbar-visibility-${id}`;
+    }
+
+    protected refreshEntry(id: string): void {
+        const entry = this.entries.get(id);
+        const commandId = this.toggleVisibilityCommandId(id);
+        this.menuRegistry.unregisterMenuAction(commandId);
+        const entryAction: MenuAction = {
+            commandId,
+            label: entry?.tooltip
+        };
+        this.menuRegistry.registerMenuAction([...this.contextMenuPath, '1_items'], entryAction);
+    }
+
     async setBackgroundColor(color?: string): Promise<void> {
         await this.ready;
         this.internalSetBackgroundColor(color);
@@ -123,6 +178,20 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
         this.color = color;
     }
 
+    protected renderContextMenu = (e: React.MouseEvent<HTMLElement>) => {
+        console.log('Enter context menu');
+        e.preventDefault();
+        if (e.button === 2) {
+            this.contextMenuRenderer.render({
+                menuPath: this.contextMenuPath,
+                anchor: {
+                    x: e.clientX,
+                    y: e.clientY
+                },
+            });
+        }
+    };
+
     protected render(): JSX.Element {
         const leftEntries: JSX.Element[] = [];
         const rightEntries: JSX.Element[] = [];
@@ -132,17 +201,22 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
             return rp - lp;
         });
         elements.forEach(([id, entry]) => {
+            if (this.hidden.has(id)) {
+                return;
+            }
             if (entry.alignment === StatusBarAlignment.LEFT) {
                 leftEntries.push(this.renderElement(id, entry));
             } else {
                 rightEntries.push(this.renderElement(id, entry));
             }
         });
 
-        return <React.Fragment>
-            <div className='area left'>{leftEntries}</div>
-            <div className='area right'>{rightEntries}</div>
-        </React.Fragment>;
+        return <React.Fragment >
+            <div onContextMenu={this.renderContextMenu}>
+                <div className='area left'>{leftEntries}</div>
+                <div className='area right'>{rightEntries}</div>
+            </div>
+        </React.Fragment >;
     }
 
     protected onclick(entry: StatusBarEntry): () => void {