styled the sketch control.

Signed-off-by: Akos Kitta <kittaakos@typefox.io>

Author: Akos Kitta

arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -3,7 +3,7 @@ import { ContainerModule } from 'inversify';
 import { WidgetFactory } from '@theia/core/lib/browser/widget-manager';
 import { CommandContribution } from '@theia/core/lib/common/command';
 import { bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
-import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { TabBarToolbarContribution, TabBarToolbarFactory } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/ws-connection-provider';
 import { FrontendApplicationContribution, FrontendApplication as TheiaFrontendApplication } from '@theia/core/lib/browser/frontend-application'
 import { LanguageGrammarDefinitionContribution } from '@theia/monaco/lib/browser/textmate';
@@ -39,7 +39,6 @@ import { MonacoStatusBarContribution } from './theia/monaco/monaco-status-bar-co
 import {
     ApplicationShell as TheiaApplicationShell,
     ShellLayoutRestorer as TheiaShellLayoutRestorer,
-    KeybindingContribution,
     CommonFrontendContribution as TheiaCommonFrontendContribution,
     KeybindingRegistry as TheiaKeybindingRegistry
 } from '@theia/core/lib/browser';
@@ -113,6 +112,7 @@ import { KeybindingRegistry } from './theia/core/keybindings';
 import { WorkspaceCommandContribution } from './theia/workspace/workspace-commands';
 import { WorkspaceDeleteHandler as TheiaWorkspaceDeleteHandler } from '@theia/workspace/lib/browser/workspace-delete-handler';
 import { WorkspaceDeleteHandler } from './theia/workspace/workspace-delete-handler';
+import { TabBarToolbar } from './theia/core/tab-bar-toolbar';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -132,7 +132,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(CommandContribution).toService(ArduinoFrontendContribution);
     bind(MenuContribution).toService(ArduinoFrontendContribution);
     bind(TabBarToolbarContribution).toService(ArduinoFrontendContribution);
-    bind(KeybindingContribution).toService(ArduinoFrontendContribution);
     bind(FrontendApplicationContribution).toService(ArduinoFrontendContribution);
     bind(ColorContribution).toService(ArduinoFrontendContribution);
 
@@ -292,6 +291,11 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     rebind(TheiaKeybindingRegistry).to(KeybindingRegistry).inSingletonScope();
     rebind(TheiaWorkspaceCommandContribution).to(WorkspaceCommandContribution).inSingletonScope();
     rebind(TheiaWorkspaceDeleteHandler).to(WorkspaceDeleteHandler).inSingletonScope();
+    rebind(TabBarToolbarFactory).toFactory(({ container: parentContainer }) => () => {
+        const container = parentContainer.createChild();
+        container.bind(TabBarToolbar).toSelf().inSingletonScope();
+        return container.get(TabBarToolbar);
+    });
 
     // Show a disconnected status bar, when the daemon is not available
     bind(ApplicationConnectionStatusContribution).toSelf().inSingletonScope();

arduino-ide-extension/src/browser/style/main.css

@@ -146,10 +146,9 @@
     background-color: var(--theia-arduino-foreground);
 }
 
-#arduino-open-sketch-control--toolbar {
-    background-color: var(--theia-tab-inactiveBackground);
-    border: 1px solid var(--theia-arduino-toolbar-background);
-    padding: 2px 0px 2px 9px;
+#arduino-open-sketch-control--toolbar--container {
+    background-color: var(--theia-arduino-toolbar-background);
+    padding-left: 8px; /* based on pure heuristics */
 }
 
 /* Output */

arduino-ide-extension/src/browser/theia/core/tab-bar-toolbar.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { injectable } from 'inversify';
+import { LabelIcon } from '@theia/core/lib/browser/label-parser';
+import { TabBarToolbar as TheiaTabBarToolbar, TabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+
+@injectable()
+export class TabBarToolbar extends TheiaTabBarToolbar {
+
+    /**
+     * Copied over from Theia. Added an ID to the parent of the toolbar item (`--container`).
+     * CSS3 does not support parent selectors but we want to style the parent of the toolbar item.
+     */
+    protected renderItem(item: TabBarToolbarItem): React.ReactNode {
+        let innerText = '';
+        const classNames = [];
+        if (item.text) {
+            for (const labelPart of this.labelParser.parse(item.text)) {
+                if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
+                    const className = `fa fa-${labelPart.name}${labelPart.animation ? ' fa-' + labelPart.animation : ''}`;
+                    classNames.push(...className.split(' '));
+                } else {
+                    innerText = labelPart;
+                }
+            }
+        }
+        const command = this.commands.getCommand(item.command);
+        const iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon || (command && command.iconClass);
+        if (iconClass) {
+            classNames.push(iconClass);
+        }
+        const tooltip = item.tooltip || (command && command.label);
+        return <div id={`${item.id}--container`} key={item.id} className={`${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM}${command && this.commandIsEnabled(command.id) ? ' enabled' : ''}`}
+            onMouseDown={this.onMouseDownEvent} onMouseUp={this.onMouseUpEvent} onMouseOut={this.onMouseUpEvent} >
+            <div id={item.id} className={classNames.join(' ')} onClick={this.executeCommand} title={tooltip}>{innerText}</div>
+        </div>;
+    }
+
+}