Add Active Background for Toggled Toolbar Items

Fixes [#8312](#8312)

What It Does
- Renders toolbar items with a highlighted background if in a toggled
  state.

How To Test
1. Go to View -> Sample Unclosable View
2. Click on the toolbar item (add/plus icon) to toggle and observe that a highlighted background appears behind the toolbar icon.

Signed-off-by: seantan22 <sean.a.tan@ericsson.com>

examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts

@@ -78,8 +78,8 @@ export class SampleUnclosableViewContribution extends AbstractViewContribution<S
 
 export const bindSampleUnclosableView = (bind: interfaces.Bind) => {
     bindViewContribution(bind, SampleUnclosableViewContribution);
-    bind(SampleViewUnclosableView).toSelf();
     bind(TabBarToolbarContribution).to(SampleUnclosableViewContribution).inSingletonScope();
+    bind(SampleViewUnclosableView).toSelf();
     bind(WidgetFactory).toDynamicValue(ctx => ({
         id: SampleViewUnclosableView.ID,
         createWidget: () => ctx.container.get<SampleViewUnclosableView>(SampleViewUnclosableView)

packages/core/src/browser/shell/tab-bar-toolbar.tsx

@@ -129,18 +129,30 @@ export class TabBarToolbar extends ReactWidget {
             classNames.push(iconClass);
         }
         const tooltip = item.tooltip || (command && command.label);
-<<<<<<< Updated upstream
-        return <div key={item.id} className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`}
-=======
-
-        return <div key={item.id} className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command &&
-            (this.commandIsEnabled(command.id) ? (this.commandIsToggled(command.id) ? ' enabled toggled' : ' enabled') : '')}`}
->>>>>>> Stashed changes
-            onMouseDown={this.onMouseDownEvent} onMouseUp={this.onMouseUpEvent} onMouseOut={this.onMouseUpEvent} >
-            <div id={item.id} className={classNames.join(' ')} onClick={this.executeCommand} title={tooltip}>{innerText}</div>
+        const toolbarItemClassNames = command ? this.getToolbarItemClassNames(command.id) : '';
+        return <div key={item.id}
+            className={`${toolbarItemClassNames}`}
+            onMouseDown={this.onMouseDownEvent}
+            onMouseUp={this.onMouseUpEvent}
+            onMouseOut={this.onMouseUpEvent} >
+            <div id={item.id} className={classNames.join(' ')}
+                onClick={this.executeCommand}
+                title={tooltip}>{innerText}
+            </div>
         </div>;
     }
 
+    protected getToolbarItemClassNames(commandId: string): string {
+        const classNames = [TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM];
+        if (this.commandIsEnabled(commandId)) {
+            classNames.push('enabled');
+        }
+        if (this.commandIsToggled(commandId)) {
+            classNames.push('toggled');
+        }
+        return classNames.join(' ');
+    }
+
     protected renderMore(): React.ReactNode {
         return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
             <div id='__more__' className='fa fa-ellipsis-h' onClick={this.showMoreContextMenu} title='More Actions...' />
@@ -181,6 +193,10 @@ export class TabBarToolbar extends ReactWidget {
         return this.commands.isEnabled(command, this.current);
     }
 
+    protected commandIsToggled(command: string): boolean {
+        return this.commands.isToggled(command, this.current);
+    }
+
     protected executeCommand = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
         e.stopPropagation();
@@ -189,6 +205,7 @@ export class TabBarToolbar extends ReactWidget {
         if (TabBarToolbarItem.is(item)) {
             this.commands.executeCommand(item.command, this.current);
         }
+        this.update();
     };
 
     protected onMouseDownEvent = (e: React.MouseEvent<HTMLElement>) => {

packages/core/src/browser/style/tabs.css

@@ -355,6 +355,11 @@ body.theia-editor-highlightModifiedTabs
     transform: scale(1.272019649);
 }
 
+.p-TabBar-toolbar .item.toggled {
+    border: var(--theia-border-width) var(--theia-inputOption-activeBorder) solid;
+    background-color: var(--theia-inputOption-activeBackground);
+}
+
 .p-TabBar-toolbar .item > div {
     height: 18px;
     width: 18px;