styled the sketch control.

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

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>;
+    }
+
+}