show advanced mode button in top panel

Signed-off-by: jbicker <jan.bicker@typefox.io>

arduino-ide-extension/src/browser/arduino-commands.ts

@@ -39,7 +39,7 @@ export namespace ArduinoCommands {
         id: "arduino-open-boards-dialog"
     }
 
-    export const TOGGLE_PRO_MODE: Command = {
+    export const TOGGLE_ADVANCED_MODE: Command = {
-        id: "arduino-toggle-pro-mode"
+        id: "arduino-toggle-advanced-mode"
     }
 }

arduino-ide-extension/src/browser/arduino-frontend-contribution.tsx

@@ -53,9 +53,14 @@ export namespace ArduinoMenus {
     export const TOOLS = [...MAIN_MENU_BAR, '4_tools'];
 }
 
-export const ARDUINO_PRO_MODE: boolean = (() => {
+export namespace ArduinoAdvancedMode {
-    return window.localStorage.getItem('arduino-pro-mode') === 'true';
+    export const LS_ID = 'arduino-advanced-mode';
+    export const TOGGLED: boolean = (() => {
+        const advancedModeStr = window.localStorage.getItem(LS_ID);
+        return advancedModeStr === 'true';
     })();
+}
+
 
 @injectable()
 export class ArduinoFrontendContribution implements TabBarToolbarContribution, CommandContribution, MenuContribution {
@@ -167,26 +172,22 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         registry.registerItem({
             id: ArduinoCommands.VERIFY.id,
             command: ArduinoCommands.VERIFY.id,
-            tooltip: 'Verify',
+            tooltip: 'Verify'
-            text: '$(check)'
         });
         registry.registerItem({
             id: ArduinoCommands.UPLOAD.id,
             command: ArduinoCommands.UPLOAD.id,
-            tooltip: 'Upload',
+            tooltip: 'Upload'
-            text: '$(arrow-right)'
         });
         registry.registerItem({
             id: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
             command: ArduinoCommands.SHOW_OPEN_CONTEXT_MENU.id,
-            tooltip: 'Open',
+            tooltip: 'Open'
-            text: '$(arrow-up)'
         });
         registry.registerItem({
             id: ArduinoCommands.SAVE_SKETCH.id,
             command: ArduinoCommands.SAVE_SKETCH.id,
-            tooltip: 'Save',
+            tooltip: 'Save'
-            text: '$(arrow-down)'
         });
         registry.registerItem({
             id: BoardsToolBarItem.TOOLBAR_ID,
@@ -203,7 +204,15 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
             command: MonitorViewContribution.OPEN_SERIAL_MONITOR,
             tooltip: 'Toggle Serial Monitor',
             isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
-        })
+        });
+
+        registry.registerItem({
+            id: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            command: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
+            tooltip: 'Toggle Advanced Mode',
+            text: (ArduinoAdvancedMode.TOGGLED ? '$(toggle-on)' : '$(toggle-off)'),
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right'
+        });
     }
 
     registerCommands(registry: CommandRegistry): void {
@@ -327,19 +336,20 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
                     this.boardsServiceClient.boardsConfig = boardsConfig;
                 }
             }
-        });
+        })
-        registry.registerCommand(ArduinoCommands.TOGGLE_PRO_MODE, {
+        registry.registerCommand(ArduinoCommands.TOGGLE_ADVANCED_MODE, {
             execute: () => {
-                const oldModeState = ARDUINO_PRO_MODE;
+                const oldModeState = ArduinoAdvancedMode.TOGGLED;
-                window.localStorage.setItem('arduino-pro-mode', oldModeState ? 'false' : 'true');
+                window.localStorage.setItem(ArduinoAdvancedMode.LS_ID, oldModeState ? 'false' : 'true');
                 registry.executeCommand('reset.layout');
             },
-            isToggled: () => ARDUINO_PRO_MODE
+            isVisible: widget => ArduinoToolbar.is(widget) && widget.side === 'right',
-        });
+            isToggled: () => ArduinoAdvancedMode.TOGGLED
+        })
     }
 
     registerMenus(registry: MenuModelRegistry) {
-        if (!ARDUINO_PRO_MODE) {
+        if (!ArduinoAdvancedMode.TOGGLED) {
             registry.unregisterMenuAction(FileSystemCommands.UPLOAD);
             registry.unregisterMenuAction(FileDownloadCommands.DOWNLOAD);
 
@@ -376,7 +386,7 @@ export class ArduinoFrontendContribution implements TabBarToolbarContribution, C
         registry.registerSubmenu(ArduinoMenus.TOOLS, 'Tools');
 
         registry.registerMenuAction(CommonMenus.HELP, {
-            commandId: ArduinoCommands.TOGGLE_PRO_MODE.id,
+            commandId: ArduinoCommands.TOGGLE_ADVANCED_MODE.id,
             label: 'Advanced Mode'
         })
     }

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

@@ -8,7 +8,7 @@ import { WebSocketConnectionProvider } from '@theia/core/lib/browser/messaging/w
 import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application'
 import { LanguageGrammarDefinitionContribution } from '@theia/monaco/lib/browser/textmate';
 import { LibraryListWidget } from './library/library-list-widget';
-import { ArduinoFrontendContribution, ARDUINO_PRO_MODE } from './arduino-frontend-contribution';
+import { ArduinoFrontendContribution, ArduinoAdvancedMode } from './arduino-frontend-contribution';
 import { ArduinoLanguageGrammarContribution } from './language/arduino-language-grammar-contribution';
 import { LibraryService, LibraryServicePath } from '../common/protocol/library-service';
 import { BoardsService, BoardsServicePath, BoardsServiceClient } from '../common/protocol/boards-service';
@@ -188,7 +188,7 @@ export default new ContainerModule((bind: interfaces.Bind, unbind: interfaces.Un
     themeService.register(...ArduinoTheme.themes);
 
     // customizing default theia
-    if (!ARDUINO_PRO_MODE) {
+    if (!ArduinoAdvancedMode.TOGGLED) {
         unbind(OutlineViewContribution);
         bind(OutlineViewContribution).to(SilentOutlineViewContribution).inSingletonScope();
         unbind(ProblemContribution);

arduino-ide-extension/src/browser/customization/custom-common-frontend-contribution.ts

@@ -1,12 +1,12 @@
 import { injectable } from "inversify";
 import { CommonFrontendContribution, CommonMenus, CommonCommands } from "@theia/core/lib/browser";
 import { MenuModelRegistry } from "@theia/core";
-import { ARDUINO_PRO_MODE } from "../arduino-frontend-contribution";
+import { ArduinoAdvancedMode } from "../arduino-frontend-contribution";
 
 @injectable()
 export class CustomCommonFrontendContribution extends CommonFrontendContribution {
     registerMenus(registry: MenuModelRegistry): void {
-        if (!ARDUINO_PRO_MODE) {
+        if (!ArduinoAdvancedMode.TOGGLED) {
             registry.registerSubmenu(CommonMenus.FILE, 'File');
             registry.registerSubmenu(CommonMenus.EDIT, 'Edit');
 

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

@@ -111,6 +111,15 @@
     color: var(--theia-ui-font-color3);
 }
 
+.p-TabBar-toolbar .item > div#arduino-toggle-advanced-mode {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    color: var(--theia-ui-font-color3);
+}
+
 .monaco-editor .margin {
     border-right: 2px solid var(--theia-border-color1);
     box-sizing: border-box;

arduino-ide-extension/src/browser/toolbar/arduino-toolbar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TabBarToolbar, TabBarToolbarRegistry, TabBarToolbarItem, ReactTabBarToolbarItem } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { CommandRegistry } from '@theia/core/lib/common/command';
 import { ReactWidget } from '@theia/core/lib/browser';
-import { LabelParser } from '@theia/core/lib/browser/label-parser';
+import { LabelParser, LabelIcon } from '@theia/core/lib/browser/label-parser';
 
 export const ARDUINO_TOOLBAR_ITEM_CLASS = 'arduino-tool-item';
 
@@ -11,6 +11,7 @@ export namespace ArduinoToolbarComponent {
         side: 'left' | 'right',
         items: (TabBarToolbarItem | ReactTabBarToolbarItem)[],
         commands: CommandRegistry,
+        labelParser: LabelParser,
         commandIsEnabled: (id: string) => boolean,
         executeCommand: (e: React.MouseEvent<HTMLElement>) => void
     }
@@ -27,6 +28,16 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
 
     protected renderItem = (item: TabBarToolbarItem) => {
         let innerText = '';
+        let className = `${item.id} arduino-tool-icon`;
+        if (item.text) {
+            for (const labelPart of this.props.labelParser.parse(item.text)) {
+                if (typeof labelPart !== 'string' && LabelIcon.is(labelPart)) {
+                    className += ` fa fa-${labelPart.name}`;
+                } else {
+                    innerText = labelPart;
+                }
+            }
+        }
         const command = this.props.commands.getCommand(item.command);
         const cls = `${ARDUINO_TOOLBAR_ITEM_CLASS} ${TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM} ${command && this.props.commandIsEnabled(command.id) ? ' enabled' : ''}`
         return <div key={item.id}
@@ -34,7 +45,7 @@ export class ArduinoToolbarComponent extends React.Component<ArduinoToolbarCompo
             <div
                 key={item.id + '-icon'}
                 id={item.id}
-                className={`${item.id} arduino-tool-icon`}
+                className={className}
                 onClick={this.props.executeCommand}
                 onMouseOver={() => this.setState({ tooltip: item.tooltip || '' })}
                 onMouseOut={() => this.setState({ tooltip: '' })}
@@ -105,6 +116,7 @@ export class ArduinoToolbar extends ReactWidget {
         return <ArduinoToolbarComponent
             key='arduino-toolbar-component'
             side={this.side}
+            labelParser={this.labelParser}
             items={[...this.items.values()]}
             commands={this.commands}
             commandIsEnabled={this.doCommandIsEnabled}