ATL-546: Added UI for settings.

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

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

@@ -1,3 +1,4 @@
+const debounce = require('lodash.debounce');
 import { MAIN_MENU_BAR, MenuContribution, MenuModelRegistry, SelectionService, ILogger } from '@theia/core';
 import {
     ContextMenuRenderer,
@@ -23,6 +24,7 @@ import { SearchInWorkspaceFrontendContribution } from '@theia/search-in-workspac
 import { TerminalMenus } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
 import { inject, injectable, postConstruct } from 'inversify';
 import * as React from 'react';
+import { remote } from 'electron';
 import { MainMenuManager } from '../common/main-menu-manager';
 import { BoardsService, CoreService, Port, SketchesService, ExecutableService } from '../common/protocol';
 import { ArduinoDaemon } from '../common/protocol/arduino-daemon';
@@ -42,11 +44,9 @@ import { WorkspaceService } from './theia/workspace/workspace-service';
 import { ArduinoToolbar } from './toolbar/arduino-toolbar';
 import { HostedPluginSupport } from '@theia/plugin-ext/lib/hosted/browser/hosted-plugin';
 import { FileService } from '@theia/filesystem/lib/browser/file-service';
-
-const debounce = require('lodash.debounce');
 import { OutputService } from '../common/protocol/output-service';
-import { NotificationCenter } from './notification-center';
-import { Settings } from './contributions/settings';
+import { ArduinoPreferences } from './arduino-preferences';
+import { SketchesServiceClientImpl } from '../common/protocol/sketches-service-client-impl';
 
 @injectable()
 export class ArduinoFrontendContribution implements FrontendApplicationContribution,
@@ -147,11 +147,15 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
 
     @inject(ExecutableService)
     protected executableService: ExecutableService;
+
     @inject(OutputService)
     protected readonly outputService: OutputService;
 
-    @inject(NotificationCenter)
-    protected readonly notificationCenter: NotificationCenter;
+    @inject(ArduinoPreferences)
+    protected readonly arduinoPreferences: ArduinoPreferences;
+
+    @inject(SketchesServiceClientImpl)
+    protected readonly sketchServiceClient: SketchesServiceClientImpl;
 
     protected invalidConfigPopup: Promise<void | 'No' | 'Yes' | undefined> | undefined;
 
@@ -192,7 +196,7 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
                 viewContribution.initializeLayout(app);
             }
         }
-        this.boardsServiceClientImpl.onBoardsConfigChanged(async ({ selectedBoard }) => {
+        const start = async ({ selectedBoard }: BoardsConfig.Config) => {
             if (selectedBoard) {
                 const { name, fqbn } = selectedBoard;
                 if (fqbn) {
@@ -200,20 +204,22 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
                     this.startLanguageServer(fqbn, name);
                 }
             }
+        };
+        this.boardsServiceClientImpl.onBoardsConfigChanged(start);
+        this.arduinoPreferences.onPreferenceChanged(event => {
+            if (event.preferenceName === 'arduino.language.log' && event.newValue !== event.oldValue) {
+                start(this.boardsServiceClientImpl.boardsConfig);
+            }
         });
-        this.notificationCenter.onConfigChanged(({ config }) => {
-            if (config) {
-                this.invalidConfigPopup = undefined;
-            } else {
-                if (!this.invalidConfigPopup) {
-                    this.invalidConfigPopup = this.messageService.error(`Your CLI configuration is invalid. Do you want to correct it now?`, 'No', 'Yes')
-                        .then(answer => {
-                            if (answer === 'Yes') {
-                                this.commandRegistry.executeCommand(Settings.Commands.OPEN_CLI_CONFIG.id)
-                            }
-                            this.invalidConfigPopup = undefined;
-                        });
-                }
+        this.arduinoPreferences.ready.then(() => {
+            const webContents = remote.getCurrentWebContents();
+            const zoomLevel = this.arduinoPreferences.get('arduino.window.zoomLevel');
+            webContents.setZoomLevel(zoomLevel);
+        });
+        this.arduinoPreferences.onPreferenceChanged(event => {
+            if (event.preferenceName === 'arduino.window.zoomLevel' && typeof event.newValue === 'number' && event.newValue !== event.oldValue) {
+                const webContents = remote.getCurrentWebContents();
+                webContents.setZoomLevel(event.newValue || 0);
             }
         });
     }
@@ -221,6 +227,14 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
     protected startLanguageServer = debounce((fqbn: string, name: string | undefined) => this.doStartLanguageServer(fqbn, name));
     protected async doStartLanguageServer(fqbn: string, name: string | undefined): Promise<void> {
         this.logger.info(`Starting language server: ${fqbn}`);
+        const log = this.arduinoPreferences.get('arduino.language.log');
+        let currentSketchPath: string | undefined = undefined;
+        if (log) {
+            const currentSketch = await this.sketchServiceClient.currentSketch();
+            if (currentSketch) {
+                currentSketchPath = await this.fileSystem.fsPath(new URI(currentSketch.uri));
+            }
+        }
         const { clangdUri, cliUri, lsUri } = await this.executableService.list();
         const [clangdPath, cliPath, lsPath] = await Promise.all([
             this.fileSystem.fsPath(new URI(clangdUri)),
@@ -231,6 +245,7 @@ export class ArduinoFrontendContribution implements FrontendApplicationContribut
             lsPath,
             cliPath,
             clangdPath,
+            log: currentSketchPath ? currentSketchPath : log,
             board: {
                 fqbn,
                 name: name ? `"${name}"` : undefined

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

@@ -136,6 +136,8 @@ import { DebugFrontendApplicationContribution as TheiaDebugFrontendApplicationCo
 import { BoardSelection } from './contributions/board-selection';
 import { OpenRecentSketch } from './contributions/open-recent-sketch';
 import { Help } from './contributions/help';
+import { bindArduinoPreferences } from './arduino-preferences'
+import { SettingsService, SettingsDialog, SettingsWidget, SettingsDialogProps } from './settings';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -375,4 +377,16 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     // To remove the `Run` menu item from the application menu.
     bind(DebugFrontendApplicationContribution).toSelf().inSingletonScope();
     rebind(TheiaDebugFrontendApplicationContribution).toService(DebugFrontendApplicationContribution);
+
+    // Preferences
+    bindArduinoPreferences(bind);
+
+    // Settings wrapper for the preferences and the CLI config.
+    bind(SettingsService).toSelf().inSingletonScope();
+    // Settings dialog and widget
+    bind(SettingsWidget).toSelf().inSingletonScope();
+    bind(SettingsDialog).toSelf().inSingletonScope();
+    bind(SettingsDialogProps).toConstantValue({
+        title: 'Preferences'
+    });
 });

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

@@ -0,0 +1,73 @@
+import { interfaces } from 'inversify';
+import {
+    createPreferenceProxy,
+    PreferenceProxy,
+    PreferenceService,
+    PreferenceContribution,
+    PreferenceSchema
+} from '@theia/core/lib/browser/preferences';
+
+export const ArduinoConfigSchema: PreferenceSchema = {
+    'type': 'object',
+    'properties': {
+        'arduino.language.log': {
+            'type': 'boolean',
+            'description': "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default.",
+            'default': false
+        },
+        'arduino.compile.verbose': {
+            'type': 'boolean',
+            'description': 'True for verbose compile output.',
+            'default': true
+        },
+        'arduino.upload.verbose': {
+            'type': 'boolean',
+            'description': 'True for verbose upload output.',
+            'default': true
+        },
+        'arduino.upload.verify': {
+            'type': 'boolean',
+            'default': false
+        },
+        'arduino.window.autoScale': {
+            'type': 'boolean',
+            'description': 'True if the user interface automatically scales with the font size.',
+            'default': true
+        },
+        'arduino.window.zoomLevel': {
+            'type': 'number',
+            'description': 'Adjust the zoom level of the window. The original size is 0 and each increment above (e.g. 1) or below (e.g. -1) represents zooming 20% larger or smaller. You can also enter decimals to adjust the zoom level with a finer granularity.',
+            'default': 0
+        },
+        'arduino.ide.autoUpdate': {
+            'type': 'boolean',
+            'description': 'True to enable automatic update checks. The IDE will check for updates automatically and periodically.',
+            'default': true
+        }
+    }
+};
+
+export interface ArduinoConfiguration {
+    'arduino.language.log': boolean;
+    'arduino.compile.verbose': boolean;
+    'arduino.upload.verbose': boolean;
+    'arduino.upload.verify': boolean;
+    'arduino.window.autoScale': boolean;
+    'arduino.window.zoomLevel': number;
+    'arduino.ide.autoUpdate': boolean;
+}
+
+export const ArduinoPreferences = Symbol('ArduinoPreferences');
+export type ArduinoPreferences = PreferenceProxy<ArduinoConfiguration>;
+
+export function createArduinoPreferences(preferences: PreferenceService): ArduinoPreferences {
+    return createPreferenceProxy(preferences, ArduinoConfigSchema);
+}
+
+export function bindArduinoPreferences(bind: interfaces.Bind): void {
+    bind(ArduinoPreferences).toDynamicValue(ctx => {
+        const preferences = ctx.container.get<PreferenceService>(PreferenceService);
+        return createArduinoPreferences(preferences);
+    });
+    bind(PreferenceContribution).toConstantValue({ schema: ArduinoConfigSchema });
+}

arduino-ide-extension/src/browser/boards/boards-service-provider.ts

@@ -57,6 +57,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
      * See: https://arduino.slack.com/archives/CJJHJCJSJ/p1568645417013000?thread_ts=1568640504.009400&cid=CJJHJCJSJ
      */
     protected latestValidBoardsConfig: RecursiveRequired<BoardsConfig.Config> | undefined = undefined;
+    protected latestBoardsConfig: BoardsConfig.Config | undefined = undefined;
     protected _boardsConfig: BoardsConfig.Config = {};
     protected _attachedBoards: Board[] = []; // This does not contain the `Unknown` boards. They're visible from the available ports only.
     protected _availablePorts: Port[] = [];
@@ -187,6 +188,7 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     protected doSetBoardsConfig(config: BoardsConfig.Config): void {
         this.logger.info('Board config changed: ', JSON.stringify(config));
         this._boardsConfig = config;
+        this.latestBoardsConfig = this._boardsConfig;
         if (this.canUploadTo(this._boardsConfig)) {
             this.latestValidBoardsConfig = this._boardsConfig;
         }
@@ -384,7 +386,10 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
             const key = this.getLastSelectedBoardOnPortKey(selectedPort);
             await this.storageService.setData(key, selectedBoard);
         }
-        await this.storageService.setData('latest-valid-boards-config', this.latestValidBoardsConfig);
+        await Promise.all([
+            this.storageService.setData('latest-valid-boards-config', this.latestValidBoardsConfig),
+            this.storageService.setData('latest-boards-config', this.latestBoardsConfig)
+        ]);
     }
 
     protected getLastSelectedBoardOnPortKey(port: Port | string): string {
@@ -393,15 +398,21 @@ export class BoardsServiceProvider implements FrontendApplicationContribution {
     }
 
     protected async loadState(): Promise<void> {
-        const storedValidBoardsConfig = await this.storageService.getData<RecursiveRequired<BoardsConfig.Config>>('latest-valid-boards-config');
-        if (storedValidBoardsConfig) {
-            this.latestValidBoardsConfig = storedValidBoardsConfig;
+        const storedLatestValidBoardsConfig = await this.storageService.getData<RecursiveRequired<BoardsConfig.Config>>('latest-valid-boards-config');
+        if (storedLatestValidBoardsConfig) {
+            this.latestValidBoardsConfig = storedLatestValidBoardsConfig;
             if (this.canUploadTo(this.latestValidBoardsConfig)) {
                 this.boardsConfig = this.latestValidBoardsConfig;
             }
+        } else {
+            // If we could not restore the latest valid config, try to restore something, the board at least.
+            const storedLatestBoardsConfig = await this.storageService.getData<BoardsConfig.Config | undefined>('latest-boards-config');
+            if (storedLatestBoardsConfig) {
+                this.latestBoardsConfig = storedLatestBoardsConfig;
+                this.boardsConfig = this.latestBoardsConfig;
+            }
         }
     }
-
 }
 
 /**

arduino-ide-extension/src/browser/contributions/burn-bootloader.ts

@@ -47,15 +47,19 @@ export class BurnBootloader extends SketchContribution {
         try {
             const { boardsConfig } = this.boardsServiceClientImpl;
             const port = boardsConfig.selectedPort?.address;
-            const [fqbn, { selectedProgrammer: programmer }] = await Promise.all([
+            const [fqbn, { selectedProgrammer: programmer }, verify, verbose] = await Promise.all([
                 this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn),
-                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn)
+                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
+                this.preferences.get('arduino.upload.verify'),
+                this.preferences.get('arduino.upload.verbose')
             ]);
             this.outputChannelManager.getChannel('Arduino: bootloader').clear();
             await this.coreService.burnBootloader({
                 fqbn,
                 programmer,
-                port
+                port,
+                verify,
+                verbose
             });
             this.messageService.info('Done burning bootloader.', { timeout: 1000 });
         } catch (e) {

arduino-ide-extension/src/browser/contributions/contribution.ts

@@ -10,11 +10,13 @@ import { open, OpenerService } from '@theia/core/lib/browser/opener-service';
 import { MenuModelRegistry, MenuContribution } from '@theia/core/lib/common/menu';
 import { KeybindingRegistry, KeybindingContribution } from '@theia/core/lib/browser/keybinding';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser/frontend-application';
 import { Command, CommandRegistry, CommandContribution, CommandService } from '@theia/core/lib/common/command';
 import { EditorMode } from '../editor-mode';
+import { SettingsService } from '../settings';
 import { SketchesServiceClientImpl } from '../../common/protocol/sketches-service-client-impl';
 import { SketchesService, ConfigService, FileSystemExt, Sketch } from '../../common/protocol';
-import { FrontendApplicationContribution, FrontendApplication } from '@theia/core/lib/browser';
+import { ArduinoPreferences } from '../arduino-preferences';
 
 export { Command, CommandRegistry, MenuModelRegistry, KeybindingRegistry, TabBarToolbarRegistry, URI, Sketch, open };
 
@@ -39,6 +41,9 @@ export abstract class Contribution implements CommandContribution, MenuContribut
     @inject(LabelProvider)
     protected readonly labelProvider: LabelProvider;
 
+    @inject(SettingsService)
+    protected readonly settingsService: SettingsService;
+
     onStart(app: FrontendApplication): MaybePromise<void> {
     }
 
@@ -77,6 +82,9 @@ export abstract class SketchContribution extends Contribution {
     @inject(SketchesServiceClientImpl)
     protected readonly sketchServiceClient: SketchesServiceClientImpl;
 
+    @inject(ArduinoPreferences)
+    protected readonly preferences: ArduinoPreferences;
+
 }
 
 export namespace Contribution {

arduino-ide-extension/src/browser/contributions/edit-contributions.ts

@@ -3,7 +3,6 @@ import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribu
 import { ClipboardService } from '@theia/core/lib/browser/clipboard-service';
 import { PreferenceService } from '@theia/core/lib/browser/preferences/preference-service';
 import { MonacoEditorService } from '@theia/monaco/lib/browser/monaco-editor-service';
-import { EDITOR_FONT_DEFAULTS } from '@theia/editor/lib/browser/editor-preferences';
 import { Contribution, Command, MenuModelRegistry, KeybindingRegistry, CommandRegistry } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
 
@@ -31,10 +30,28 @@ export class EditContributions extends Contribution {
         registry.registerCommand(EditContributions.Commands.FIND_PREVIOUS, { execute: () => this.run('editor.action.nextMatchFindAction') });
         registry.registerCommand(EditContributions.Commands.USE_FOR_FIND, { execute: () => this.run('editor.action.previousSelectionMatchFindAction') });
         registry.registerCommand(EditContributions.Commands.INCREASE_FONT_SIZE, {
-            execute: () => this.preferences.set('editor.fontSize', this.preferences.get('editor.fontSize', EDITOR_FONT_DEFAULTS.fontSize) + 1)
+            execute: async () => {
+                const settings = await this.settingsService.settings();
+                if (settings.autoScaleInterface) {
+                    settings.interfaceScale = settings.interfaceScale + 1;
+                } else {
+                    settings.editorFontSize = settings.editorFontSize + 1;
+                }
+                await this.settingsService.update(settings);
+                await this.settingsService.save();
+            }
         });
         registry.registerCommand(EditContributions.Commands.DECREASE_FONT_SIZE, {
-            execute: () => this.preferences.set('editor.fontSize', this.preferences.get('editor.fontSize', EDITOR_FONT_DEFAULTS.fontSize) - 1)
+            execute: async () => {
+                const settings = await this.settingsService.settings();
+                if (settings.autoScaleInterface) {
+                    settings.interfaceScale = settings.interfaceScale - 1;
+                } else {
+                    settings.editorFontSize = settings.editorFontSize - 1;
+                }
+                await this.settingsService.update(settings);
+                await this.settingsService.save();
+            }
         });
         /* Tools */registry.registerCommand(EditContributions.Commands.AUTO_FORMAT, { execute: () => this.run('editor.action.formatDocument') });
         registry.registerCommand(EditContributions.Commands.COPY_FOR_FORUM, {

arduino-ide-extension/src/browser/contributions/settings.ts

@@ -1,27 +1,49 @@
-import { injectable } from 'inversify';
-import { CommonCommands } from '@theia/core/lib/browser/common-frontend-contribution';
-import { URI, Command, MenuModelRegistry, CommandRegistry, SketchContribution, open } from './contribution';
+import { inject, injectable } from 'inversify';
+import { Command, MenuModelRegistry, CommandRegistry, SketchContribution, KeybindingRegistry } from './contribution';
 import { ArduinoMenus } from '../menu/arduino-menus';
+import { Settings as Preferences, SettingsDialog } from '../settings';
 
 @injectable()
 export class Settings extends SketchContribution {
 
+    @inject(SettingsDialog)
+    protected readonly settingsDialog: SettingsDialog;
+
+    protected settingsOpened = false;
+
     registerCommands(registry: CommandRegistry): void {
-        registry.registerCommand(Settings.Commands.OPEN_CLI_CONFIG, {
-            execute: () => this.configService.getCliConfigFileUri().then(uri => open(this.openerService, new URI(uri)))
+        registry.registerCommand(Settings.Commands.OPEN, {
+            execute: async () => {
+                let settings: Preferences | undefined = undefined;
+                try {
+                    this.settingsOpened = true;
+                    settings = await this.settingsDialog.open();
+                } finally {
+                    this.settingsOpened = false;
+                }
+                if (settings) {
+                    await this.settingsService.update(settings);
+                    await this.settingsService.save();
+                } else {
+                    await this.settingsService.reset();
+                }
+            },
+            isEnabled: () => !this.settingsOpened
         });
     }
 
     registerMenus(registry: MenuModelRegistry): void {
         registry.registerMenuAction(ArduinoMenus.FILE__SETTINGS_GROUP, {
-            commandId: CommonCommands.OPEN_PREFERENCES.id,
+            commandId: Settings.Commands.OPEN.id,
             label: 'Preferences...',
             order: '0'
         });
-        registry.registerMenuAction(ArduinoMenus.FILE__SETTINGS_GROUP, {
-            commandId: Settings.Commands.OPEN_CLI_CONFIG.id,
-            label: 'Open CLI Configuration',
-            order: '1',
+    }
+
+    registerKeybindings(registry: KeybindingRegistry): void {
+        registry.registerKeybinding({
+            command: Settings.Commands.OPEN.id,
+            keybinding: 'CtrlCmd+,',
         });
     }
 
@@ -29,9 +51,9 @@ export class Settings extends SketchContribution {
 
 export namespace Settings {
     export namespace Commands {
-        export const OPEN_CLI_CONFIG: Command = {
-            id: 'arduino-open-cli-config',
-            label: 'Open CLI Configuration',
+        export const OPEN: Command = {
+            id: 'arduino-settings-open',
+            label: 'Open Preferences...',
             category: 'Arduino'
         }
     }

arduino-ide-extension/src/browser/contributions/upload-sketch.ts

@@ -88,9 +88,11 @@ export class UploadSketch extends SketchContribution {
         }
         try {
             const { boardsConfig } = this.boardsServiceClientImpl;
-            const [fqbn, { selectedProgrammer }] = await Promise.all([
+            const [fqbn, { selectedProgrammer }, verify, verbose] = await Promise.all([
                 this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn),
-                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn)
+                this.boardsDataStore.getData(boardsConfig.selectedBoard?.fqbn),
+                this.preferences.get('arduino.upload.verify'),
+                this.preferences.get('arduino.upload.verbose')
             ]);
 
             let options: CoreService.Upload.Options | undefined = undefined;
@@ -106,14 +108,18 @@ export class UploadSketch extends SketchContribution {
                     fqbn,
                     optimizeForDebug,
                     programmer,
-                    port
+                    port,
+                    verbose,
+                    verify
                 };
             } else {
                 options = {
                     sketchUri,
                     fqbn,
                     optimizeForDebug,
-                    port
+                    port,
+                    verbose,
+                    verify
                 };
             }
             this.outputChannelManager.getChannel('Arduino: upload').clear();

arduino-ide-extension/src/browser/contributions/verify-sketch.ts

@@ -64,11 +64,13 @@ export class VerifySketch extends SketchContribution {
         try {
             const { boardsConfig } = this.boardsServiceClientImpl;
             const fqbn = await this.boardsDataStore.appendConfigToFqbn(boardsConfig.selectedBoard?.fqbn);
+            const verbose = this.preferences.get('arduino.compile.verbose');
             this.outputChannelManager.getChannel('Arduino: compile').clear();
             await this.coreService.compile({
                 sketchUri: uri,
                 fqbn,
-                optimizeForDebug: this.editorMode.compileForDebug
+                optimizeForDebug: this.editorMode.compileForDebug,
+                verbose
             });
             this.messageService.info('Done compiling.', { timeout: 1000 });
         } catch (e) {

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

@@ -0,0 +1,603 @@
+import * as React from 'react';
+import { injectable, inject, postConstruct } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import URI from '@theia/core/lib/common/uri';
+import { Emitter } from '@theia/core/lib/common/event';
+import { Deferred } from '@theia/core/lib/common/promise-util';
+import { deepClone } from '@theia/core/lib/common/objects';
+import { FileService } from '@theia/filesystem/lib/browser/file-service';
+import { ThemeService } from '@theia/core/lib/browser/theming';
+import { MaybePromise } from '@theia/core/lib/common/types';
+import { WindowService } from '@theia/core/lib/browser/window/window-service';
+import { FileDialogService } from '@theia/filesystem/lib/browser/file-dialog/file-dialog-service';
+import { DisposableCollection } from '@theia/core/lib/common/disposable';
+import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { AbstractDialog, DialogProps, PreferenceService, PreferenceScope, DialogError, ReactWidget } from '@theia/core/lib/browser';
+import { Index } from '../common/types';
+import { ConfigService, FileSystemExt } from '../common/protocol';
+
+export interface Settings extends Index {
+    editorFontSize: number; // `editor.fontSize`
+    themeId: string; // `workbench.colorTheme`
+    autoSave: 'on' | 'off'; // `editor.autoSave`
+
+    autoScaleInterface: boolean; // `arduino.window.autoScale`
+    interfaceScale: number; // `arduino.window.zoomLevel` https://github.com/eclipse-theia/theia/issues/8751
+    checkForUpdates?: boolean; // `arduino.ide.autoUpdate`
+    verboseOnCompile: boolean; // `arduino.compile.verbose`
+    verboseOnUpload: boolean; // `arduino.upload.verbose`
+    verifyAfterUpload: boolean; // `arduino.upload.verify`
+    enableLsLogs: boolean; // `arduino.language.log`
+
+    sketchbookPath: string; // CLI
+    additionalUrls: string[]; // CLI
+}
+export namespace Settings {
+
+    export function belongsToCli<K extends keyof Settings>(key: K): boolean {
+        return key === 'sketchbookPath' || key === 'additionalUrls';
+    }
+
+}
+export type SettingsKey = keyof Settings;
+
+@injectable()
+export class SettingsService {
+
+    @inject(FileService)
+    protected readonly fileService: FileService;
+
+    @inject(FileSystemExt)
+    protected readonly fileSystemExt: FileSystemExt;
+
+    @inject(ConfigService)
+    protected readonly configService: ConfigService;
+
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
+    @inject(FrontendApplicationStateService)
+    protected readonly appStateService: FrontendApplicationStateService;
+
+    protected readonly onDidChangeEmitter = new Emitter<Readonly<Settings>>();
+    readonly onDidChange = this.onDidChangeEmitter.event;
+
+    protected ready = new Deferred<void>();
+    protected _settings: Settings;
+
+    @postConstruct()
+    protected async init(): Promise<void> {
+        await this.appStateService.reachedState('ready'); // Hack for https://github.com/eclipse-theia/theia/issues/8993
+        const settings = await this.loadSettings();
+        this._settings = deepClone(settings);
+        this.ready.resolve();
+    }
+
+    protected async loadSettings(): Promise<Settings> {
+        await this.preferenceService.ready;
+        const [
+            editorFontSize,
+            themeId,
+            autoSave,
+            autoScaleInterface,
+            interfaceScale,
+            // checkForUpdates,
+            verboseOnCompile,
+            verboseOnUpload,
+            verifyAfterUpload,
+            enableLsLogs,
+            cliConfig
+        ] = await Promise.all([
+            this.preferenceService.get<number>('editor.fontSize', 12),
+            this.preferenceService.get<string>('workbench.colorTheme', 'arduino-theme'),
+            this.preferenceService.get<'on' | 'off'>('editor.autoSave', 'on'),
+            this.preferenceService.get<boolean>('arduino.window.autoScale', true),
+            this.preferenceService.get<number>('arduino.window.zoomLevel', 0),
+            // this.preferenceService.get<string>('arduino.ide.autoUpdate', true),
+            this.preferenceService.get<boolean>('arduino.compile.verbose', true),
+            this.preferenceService.get<boolean>('arduino.upload.verbose', true),
+            this.preferenceService.get<boolean>('arduino.upload.verify', true),
+            this.preferenceService.get<boolean>('arduino.language.log', true),
+            this.configService.getConfiguration()
+        ]);
+        const { additionalUrls, sketchDirUri } = cliConfig;
+        const sketchbookPath = await this.fileService.fsPath(new URI(sketchDirUri));
+        return {
+            editorFontSize,
+            themeId,
+            autoSave,
+            autoScaleInterface,
+            interfaceScale,
+            // checkForUpdates,
+            verboseOnCompile,
+            verboseOnUpload,
+            verifyAfterUpload,
+            enableLsLogs,
+            additionalUrls,
+            sketchbookPath
+        };
+    }
+
+    async settings(): Promise<Settings> {
+        await this.ready.promise;
+        return this._settings;
+    }
+
+    async update(settings: Settings, fireDidChange: boolean = false): Promise<void> {
+        await this.ready.promise;
+        for (const key of Object.keys(settings)) {
+            this._settings[key] = settings[key];
+        }
+        if (fireDidChange) {
+            this.onDidChangeEmitter.fire(this._settings);
+        }
+    }
+
+    async reset(): Promise<void> {
+        const settings = await this.loadSettings();
+        return this.update(settings, true);
+    }
+
+    async validate(settings: MaybePromise<Settings> = this.settings()): Promise<string | true> {
+        try {
+            const { sketchbookPath, editorFontSize, themeId } = await settings;
+            const sketchbookDir = await this.fileSystemExt.getUri(sketchbookPath);
+            if (!await this.fileService.exists(new URI(sketchbookDir))) {
+                return `Invalid sketchbook location: ${sketchbookPath}`;
+            }
+            if (editorFontSize <= 0) {
+                return `Invalid editor font size. It must be a positive integer.`;
+            }
+            if (!ThemeService.get().getThemes().find(({ id }) => id === themeId)) {
+                return `Invalid theme.`;
+            }
+            return true;
+        } catch (err) {
+            if (err instanceof Error) {
+                return err.message;
+            }
+            return String(err);
+        }
+    }
+
+    async save(): Promise<string | true> {
+        await this.ready.promise;
+        const {
+            editorFontSize,
+            themeId,
+            autoSave,
+            autoScaleInterface,
+            interfaceScale,
+            // checkForUpdates,
+            verboseOnCompile,
+            verboseOnUpload,
+            verifyAfterUpload,
+            enableLsLogs,
+            sketchbookPath,
+            additionalUrls
+        } = this._settings;
+        const [config, sketchDirUri] = await Promise.all([
+            this.configService.getConfiguration(),
+            this.fileSystemExt.getUri(sketchbookPath)
+        ]);
+        (config as any).additionalUrls = additionalUrls;
+        (config as any).sketchDirUri = sketchDirUri;
+
+        await Promise.all([
+            this.preferenceService.set('editor.fontSize', editorFontSize, PreferenceScope.User),
+            this.preferenceService.set('workbench.colorTheme', themeId, PreferenceScope.User),
+            this.preferenceService.set('editor.autoSave', autoSave, PreferenceScope.User),
+            this.preferenceService.set('arduino.window.autoScale', autoScaleInterface, PreferenceScope.User),
+            this.preferenceService.set('arduino.window.zoomLevel', interfaceScale, PreferenceScope.User),
+            // this.preferenceService.set('arduino.ide.autoUpdate', checkForUpdates, PreferenceScope.User),
+            this.preferenceService.set('arduino.compile.verbose', verboseOnCompile, PreferenceScope.User),
+            this.preferenceService.set('arduino.upload.verbose', verboseOnUpload, PreferenceScope.User),
+            this.preferenceService.set('arduino.upload.verify', verifyAfterUpload, PreferenceScope.User),
+            this.preferenceService.set('arduino.language.log', enableLsLogs, PreferenceScope.User),
+            this.configService.setConfiguration(config)
+        ]);
+        this.onDidChangeEmitter.fire(this._settings);
+        return true;
+    }
+
+}
+
+export class SettingsComponent extends React.Component<SettingsComponent.Props, SettingsComponent.State> {
+
+    readonly toDispose = new DisposableCollection();
+
+    constructor(props: SettingsComponent.Props) {
+        super(props);
+    }
+
+    componentDidUpdate(_: SettingsComponent.Props, prevState: SettingsComponent.State): void {
+        if (this.state && prevState && JSON.stringify(this.state) !== JSON.stringify(prevState)) {
+            this.props.settingsService.update(this.state, true);
+        }
+    }
+
+    componentDidMount(): void {
+        this.props.settingsService.settings().then(settings => this.setState(settings));
+        this.toDispose.push(this.props.settingsService.onDidChange(settings => this.setState(settings)));
+    }
+
+    componentWillUnmount(): void {
+        this.toDispose.dispose();
+    }
+
+    render(): React.ReactNode {
+        if (!this.state) {
+            return <div />;
+        }
+        return <div className='content noselect'>
+            Sketchbook location:
+            <div className='flex-line'>
+                <input
+                    className='theia-input stretch'
+                    type='text'
+                    value={this.state.sketchbookPath}
+                    onChange={this.sketchpathDidChange} />
+                <button className='theia-button shrink' onClick={this.browseSketchbookDidClick}>Browse</button>
+            </div>
+            <div className='flex-line'>
+                <div className='column'>
+                    <div className='flex-line'>Editor font size:</div>
+                    <div className='flex-line'>Interface scale:</div>
+                    <div className='flex-line'>Theme:</div>
+                    <div className='flex-line'>Show verbose output during:</div>
+                </div>
+                <div className='column'>
+                    <div className='flex-line'>
+                        <input
+                            className='theia-input small'
+                            type='number'
+                            step={1}
+                            pattern='[0-9]+'
+                            onKeyDown={this.numbersOnlyKeyDown}
+                            value={this.state.editorFontSize}
+                            onChange={this.editorFontSizeDidChange} />
+                    </div>
+                    <div className='flex-line'>
+                        <label className='flex-line'>
+                            <input
+                                type='checkbox'
+                                checked={this.state.autoScaleInterface}
+                                onChange={this.autoScaleInterfaceDidChange} />
+                            Automatic
+                        </label>
+                        <input
+                            className='theia-input small with-margin'
+                            type='number'
+                            step={20}
+                            pattern='[0-9]+'
+                            onKeyDown={this.noopKeyDown}
+                            value={100 + this.state.interfaceScale * 20}
+                            onChange={this.interfaceScaleDidChange} />
+                        %
+                    </div>
+                    <div className='flex-line'>
+                        <select
+                            className='theia-select'
+                            value={ThemeService.get().getCurrentTheme().label}
+                            onChange={this.themeDidChange}>
+                            {ThemeService.get().getThemes().map(({ id, label }) => <option key={id} value={label}>{label}</option>)}
+                        </select>
+                    </div>
+                    <div className='flex-line'>
+                        <label className='flex-line'>
+                            <input
+                                type='checkbox'
+                                checked={this.state.verboseOnCompile}
+                                onChange={this.verboseOnCompileDidChange} />
+                            compile
+                        </label>
+                        <label className='flex-line'>
+                            <input
+                                type='checkbox'
+                                checked={this.state.verboseOnUpload}
+                                onChange={this.verboseOnUploadDidChange} />
+                            upload
+                        </label>
+                    </div>
+                </div>
+            </div>
+            <label className='flex-line'>
+                <input
+                    type='checkbox'
+                    checked={this.state.verifyAfterUpload}
+                    onChange={this.verifyAfterUploadDidChange} />
+                Verify code after upload
+            </label>
+            <label className='flex-line'>
+                <input
+                    type='checkbox'
+                    checked={this.state.checkForUpdates}
+                    onChange={this.checkForUpdatesDidChange}
+                    disabled={true} />
+                Check for updates on startup
+            </label>
+            <label className='flex-line'>
+                <input
+                    type='checkbox'
+                    checked={this.state.autoSave === 'on'}
+                    onChange={this.autoSaveDidChange} />
+                Auto save
+            </label>
+            <label className='flex-line'>
+                <input
+                    type='checkbox'
+                    checked={this.state.enableLsLogs}
+                    onChange={this.enableLsLogsDidChange} />
+                Enable language server logging
+            </label>
+            <div className='flex-line'>
+                Additional boards manager URLs:
+                <input
+                    className='theia-input stretch with-margin'
+                    type='text'
+                    value={this.state.additionalUrls.join(',')}
+                    onChange={this.additionalUrlsDidChange} />
+                <i className='fa fa-window-restore theia-button shrink' onClick={this.editAdditionalUrlDidClick} />
+            </div>
+        </div>;
+    }
+
+    protected noopKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.returnValue = false;
+    }
+
+    protected numbersOnlyKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        const key = Number(event.key)
+        if (isNaN(key) || event.key === null || event.key === ' ') {
+            event.nativeEvent.preventDefault();
+            event.nativeEvent.returnValue = false;
+            return;
+        }
+    }
+
+    protected browseSketchbookDidClick = async () => {
+        const uri = await this.props.fileDialogService.showOpenDialog({
+            title: 'Select new sketchbook location',
+            openLabel: 'Chose',
+            canSelectFiles: false,
+            canSelectMany: false,
+            canSelectFolders: true
+        });
+        if (uri) {
+            const sketchbookPath = await this.props.fileService.fsPath(uri);
+            this.setState({ sketchbookPath });
+        }
+    };
+
+    protected editAdditionalUrlDidClick = async () => {
+        const additionalUrls = await new AdditionalUrlsDialog(this.state.additionalUrls, this.props.windowService).open();
+        if (additionalUrls) {
+            this.setState({ additionalUrls });
+        }
+    };
+
+    protected editorFontSizeDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        if (value) {
+            this.setState({ editorFontSize: parseInt(value, 10) });
+        }
+    };
+
+    protected additionalUrlsDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ additionalUrls: event.target.value.split(',').map(url => url.trim()) });
+    };
+
+    protected autoScaleInterfaceDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ autoScaleInterface: event.target.checked });
+    };
+
+    protected enableLsLogsDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ enableLsLogs: event.target.checked });
+    };
+
+    protected interfaceScaleDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        const percentage = parseInt(value, 10);
+        if (isNaN(percentage)) {
+            return;
+        }
+        let interfaceScale = (percentage - 100) / 20;
+        if (!isNaN(interfaceScale)) {
+            this.setState({ interfaceScale });
+        }
+    };
+
+    protected verifyAfterUploadDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ verifyAfterUpload: event.target.checked });
+    };
+
+    protected checkForUpdatesDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ checkForUpdates: event.target.checked });
+    };
+
+    protected autoSaveDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ autoSave: event.target.checked ? 'on' : 'off' });
+    };
+
+    protected themeDidChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const { selectedIndex } = event.target.options;
+        const theme = ThemeService.get().getThemes()[selectedIndex];
+        if (theme) {
+            this.setState({ themeId: theme.id });
+        }
+    };
+
+    protected verboseOnCompileDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ verboseOnCompile: event.target.checked });
+    };
+
+    protected verboseOnUploadDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        this.setState({ verboseOnUpload: event.target.checked });
+    };
+
+    protected sketchpathDidChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const sketchbookPath = event.target.value;
+        if (sketchbookPath) {
+            this.setState({ sketchbookPath });
+        }
+    };
+
+}
+export namespace SettingsComponent {
+    export interface Props {
+        readonly settingsService: SettingsService;
+        readonly fileService: FileService;
+        readonly fileDialogService: FileDialogService;
+        readonly windowService: WindowService;
+    }
+    export interface State extends Settings { }
+}
+
+@injectable()
+export class SettingsWidget extends ReactWidget {
+
+    @inject(SettingsService)
+    protected readonly settingsService: SettingsService;
+
+    @inject(FileService)
+    protected readonly fileService: FileService;
+
+    @inject(FileDialogService)
+    protected readonly fileDialogService: FileDialogService;
+
+    @inject(WindowService)
+    protected readonly windowService: WindowService;
+
+    protected render(): React.ReactNode {
+        return <SettingsComponent
+            settingsService={this.settingsService}
+            fileService={this.fileService}
+            fileDialogService={this.fileDialogService}
+            windowService={this.windowService} />;
+    }
+
+}
+
+@injectable()
+export class SettingsDialogProps extends DialogProps {
+}
+
+@injectable()
+export class SettingsDialog extends AbstractDialog<Promise<Settings>> {
+
+    @inject(SettingsService)
+    protected readonly settingsService: SettingsService;
+
+    @inject(SettingsWidget)
+    protected readonly widget: SettingsWidget;
+
+    constructor(@inject(SettingsDialogProps) protected readonly props: SettingsDialogProps) {
+        super(props);
+        this.contentNode.classList.add('arduino-settings-dialog');
+        this.appendCloseButton('CANCEL');
+        this.appendAcceptButton('OK');
+    }
+
+    @postConstruct()
+    protected init(): void {
+        this.toDispose.push(this.settingsService.onDidChange(this.validate.bind(this)));
+    }
+
+    protected async isValid(settings: Promise<Settings>): Promise<DialogError> {
+        const result = await this.settingsService.validate(settings);
+        if (typeof result === 'string') {
+            return result;
+        }
+        return '';
+    }
+
+    get value(): Promise<Settings> {
+        return this.settingsService.settings();
+    }
+
+    protected onAfterAttach(msg: Message): void {
+        if (this.widget.isAttached) {
+            Widget.detach(this.widget);
+        }
+        Widget.attach(this.widget, this.contentNode);
+        this.toDisposeOnDetach.push(this.settingsService.onDidChange(() => this.update()));
+        super.onAfterAttach(msg);
+        this.update();
+    }
+
+    protected onUpdateRequest(msg: Message) {
+        super.onUpdateRequest(msg);
+        this.widget.update();
+    }
+
+    protected onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        this.widget.activate();
+    }
+
+}
+
+
+export class AdditionalUrlsDialog extends AbstractDialog<string[]> {
+
+    protected readonly textArea: HTMLTextAreaElement;
+
+    constructor(urls: string[], windowService: WindowService) {
+        super({ title: 'Additional Boards Manager URLs' });
+
+        this.contentNode.classList.add('additional-urls-dialog');
+
+        const description = document.createElement('div');
+        description.textContent = 'Enter additional URLs, one for each row';
+        description.style.marginBottom = '5px';
+        this.contentNode.appendChild(description);
+
+        this.textArea = document.createElement('textarea');
+        this.textArea.className = 'theia-input';
+        this.textArea.setAttribute('style', 'flex: 0;');
+        this.textArea.value = urls.filter(url => url.trim()).filter(url => !!url).join('\n');
+        this.textArea.wrap = 'soft';
+        this.textArea.cols = 90;
+        this.textArea.rows = 5;
+        this.contentNode.appendChild(this.textArea);
+
+        const anchor = document.createElement('div');
+        anchor.classList.add('link');
+        anchor.textContent = 'Click for a list of unofficial board support URLs';
+        anchor.style.marginTop = '5px';
+        anchor.style.cursor = 'pointer';
+        this.addEventListener(
+            anchor,
+            'click',
+            () => windowService.openNewWindow('https://github.com/arduino/Arduino/wiki/Unofficial-list-of-3rd-party-boards-support-urls', { external: true })
+        );
+        this.contentNode.appendChild(anchor);
+
+        this.appendAcceptButton('OK');
+        this.appendCloseButton('Cancel');
+    }
+
+    get value(): string[] {
+        return this.textArea.value.split('\n').map(url => url.trim());
+    }
+
+    protected onAfterAttach(message: Message): void {
+        super.onAfterAttach(message);
+        this.addUpdateListener(this.textArea, 'input');
+    }
+
+    protected onActivateRequest(message: Message): void {
+        super.onActivateRequest(message);
+        this.textArea.focus();
+    }
+
+    protected handleEnter(event: KeyboardEvent): boolean | void {
+        if (event.target instanceof HTMLInputElement) {
+            return super.handleEnter(event);
+        }
+        return false;
+    }
+
+}

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

@@ -6,6 +6,7 @@
 @import './status-bar.css';
 @import './terminal.css';
 @import './editor.css';
+@import './settings-dialog.css';
 
 .theia-input.warning:focus {
     outline-width: 1px;

arduino-ide-extension/src/browser/style/settings-dialog.css

@@ -0,0 +1,43 @@
+.arduino-settings-dialog {
+    width: 740px;
+}
+
+.arduino-settings-dialog .content {
+    padding: 5px;
+}
+
+.arduino-settings-dialog .flex-line {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.arduino-settings-dialog .with-margin {
+    margin-left: 5px;
+}
+
+.arduino-settings-dialog .theia-select {
+    background: var(--theia-input-background) !important;
+}
+
+.arduino-settings-dialog .column > div {
+    height: 26px;
+    vertical-align: middle;
+}
+
+.arduino-settings-dialog .flex-line .theia-button.shrink {
+    min-width: unset;
+}
+
+.arduino-settings-dialog .theia-input.stretch {
+    width: 100% !important;
+}
+
+.arduino-settings-dialog .theia-input.small {
+    max-width: 40px;
+    width: 40px;
+}
+
+.additional-urls-dialog .link:hover {
+    color: var(--theia-textLink-activeForeground);
+}

arduino-ide-extension/src/browser/theia/editor/editor-manager.ts

@@ -24,13 +24,7 @@ export class EditorManager extends TheiaEditorManager {
     }
 
     protected async isReadOnly(uri: URI): Promise<boolean> {
-        const [config, configFileUri] = await Promise.all([
-            this.configService.getConfiguration(),
-            this.configService.getCliConfigFileUri()
-        ]);
-        if (new URI(configFileUri).toString(true) === uri.toString(true)) {
-            return false;
-        }
+        const config = await this.configService.getConfiguration();
         return new URI(config.dataDirUri).isEqualOrParent(uri)
     }
 

arduino-ide-extension/src/browser/theia/preferences/preferences-contribution.ts

@@ -15,11 +15,7 @@ export class PreferencesContribution extends TheiaPreferencesContribution {
     }
 
     registerKeybindings(registry: KeybindingRegistry): void {
-        // https://github.com/eclipse-theia/theia/issues/8202
-        registry.registerKeybinding({
-            command: CommonCommands.OPEN_PREFERENCES.id,
-            keybinding: 'CtrlCmd+,',
-        });
+        registry.unregisterKeybinding(CommonCommands.OPEN_PREFERENCES.id);
     }
 
 }