feat: can dock the monitor widget to the "right"

Added a new preference (`arduino.monitor.dockArea`) to specify the area
of the application shell where the _Serial Monitor_ widget resides.
The possible values are `"bottom"` and `"right"`. The default value is
`"bottom"`.

The dock area is per application and not per workspace or window.
However, advanced users can create the `./.vscode/settings.json` and
configure per sketch preference.

Signed-off-by: dankeboy36 <dankeboy36@gmail.com>

Author: dankeboy36

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

@@ -8,6 +8,8 @@ import {
 } from '@theia/core/lib/browser/preferences';
 import { nls } from '@theia/core/lib/common';
 import { CompilerWarningLiterals, CompilerWarnings } from '../common/protocol';
+import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
+import { serialMonitorWidgetLabel } from '../common/nls';
 
 export enum UpdateChannel {
   Stable = 'stable',
@@ -40,6 +42,12 @@ export namespace ErrorRevealStrategy {
   export const Default: ErrorRevealStrategy = 'centerIfOutsideViewport';
 }
 
+export type MonitorWidgetDockArea = Extract<ApplicationShell.Area, 'bottom' | 'right'>;
+export const defaultMonitorWidgetDockArea: MonitorWidgetDockArea = 'bottom';
+export function isMonitorWidgetDockArea(arg: unknown): arg is MonitorWidgetDockArea {
+  return arg === 'bottom' || arg === 'right';
+}
+
 export const ArduinoConfigSchema: PreferenceSchema = {
   type: 'object',
   properties: {
@@ -258,6 +266,17 @@ export const ArduinoConfigSchema: PreferenceSchema = {
       ),
       default: undefined,
     },
+    'arduino.monitor.dockArea': {
+      type: 'string',
+      enum: ['bottom', 'right'],
+      markdownDescription: nls.localize(
+        'arduino/preferences/monitor/dockArea',
+        'The area of the application shell where the _{0}_ widget will reside. It is either "bottom" or "right". It defaults to "{1}".',
+        serialMonitorWidgetLabel,
+        defaultMonitorWidgetDockArea
+      ),
+      default: defaultMonitorWidgetDockArea,
+    },
   },
 };
 
@@ -288,6 +307,7 @@ export interface ArduinoConfiguration {
   'arduino.cli.daemon.debug': boolean;
   'arduino.sketch.inoBlueprint': string;
   'arduino.checkForUpdates': boolean;
+  'arduino.monitor.dockArea': MonitorWidgetDockArea;
 }
 
 export const ArduinoPreferences = Symbol('ArduinoPreferences');

arduino-ide-extension/src/browser/serial/monitor/monitor-view-contribution.tsx

@@ -1,6 +1,10 @@
 import * as React from '@theia/core/shared/react';
-import { injectable, inject } from '@theia/core/shared/inversify';
-import { AbstractViewContribution, codicon } from '@theia/core/lib/browser';
+import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
+import {
+  AbstractViewContribution,
+  ApplicationShell,
+  codicon
+} from '@theia/core/lib/browser';
 import { MonitorWidget } from './monitor-widget';
 import { MenuModelRegistry, Command, CommandRegistry } from '@theia/core';
 import {
@@ -13,6 +17,12 @@ import { nls } from '@theia/core/lib/common';
 import { Event } from '@theia/core/lib/common/event';
 import { MonitorModel } from '../../monitor-model';
 import { MonitorManagerProxyClient } from '../../../common/protocol';
+import {
+  ArduinoPreferences,
+  defaultMonitorWidgetDockArea,
+  isMonitorWidgetDockArea
+} from '../../arduino-preferences';
+import { serialMonitorWidgetLabel } from '../../../common/nls';
 
 export namespace SerialMonitor {
   export namespace Commands {
@@ -50,31 +60,59 @@ export class MonitorViewContribution
   static readonly TOGGLE_SERIAL_MONITOR_TOOLBAR =
     MonitorWidget.ID + ':toggle-toolbar';
   static readonly RESET_SERIAL_MONITOR = MonitorWidget.ID + ':reset';
+  
+  @inject(MonitorModel)
+  private readonly model: MonitorModel;
+  @inject(MonitorManagerProxyClient)
+  private readonly monitorManagerProxy: MonitorManagerProxyClient;
+  @inject(ArduinoPreferences)
+  private readonly arduinoPreferences: ArduinoPreferences;
 
-  constructor(
-    @inject(MonitorModel)
-    protected readonly model: MonitorModel,
+  private _area: ApplicationShell.Area;
 
-    @inject(MonitorManagerProxyClient)
-    protected readonly monitorManagerProxy: MonitorManagerProxyClient
-  ) {
+  constructor() {
     super({
       widgetId: MonitorWidget.ID,
-      widgetName: MonitorWidget.LABEL,
+      widgetName: serialMonitorWidgetLabel,
       defaultWidgetOptions: {
-        area: 'bottom',
+        area: defaultMonitorWidgetDockArea,
       },
       toggleCommandId: MonitorViewContribution.TOGGLE_SERIAL_MONITOR,
       toggleKeybinding: 'CtrlCmd+Shift+M',
     });
+    this._area = defaultMonitorWidgetDockArea;
+  }
+
+  @postConstruct()
+  protected init(): void {
+    this._area = this.arduinoPreferences['arduino.monitor.dockArea'] ?? defaultMonitorWidgetDockArea;
     this.monitorManagerProxy.onMonitorShouldReset(() => this.reset());
+    this.arduinoPreferences.onPreferenceChanged((event) => {
+      if (event.preferenceName === 'arduino.monitor.dockArea' && isMonitorWidgetDockArea(event.newValue) && event.newValue !== this._area) { 
+        this._area = event.newValue;
+        const widget = this.tryGetWidget();
+        // reopen at the new position if opened
+        if (widget) {
+          widget.close();
+          this.openView({ activate: true, reveal: true });
+        }
+      }
+    })
+  }
+
+  override get defaultViewOptions(): ApplicationShell.WidgetOptions {
+    const viewOptions = super.defaultViewOptions;
+    return {
+      ...viewOptions,
+      area: this._area
+    };
   }
 
   override registerMenus(menus: MenuModelRegistry): void {
     if (this.toggleCommand) {
       menus.registerMenuAction(ArduinoMenus.TOOLS__MAIN_GROUP, {
         commandId: this.toggleCommand.id,
-        label: MonitorWidget.LABEL,
+        label: serialMonitorWidgetLabel,
         order: '5',
       });
     }

arduino-ide-extension/src/browser/serial/monitor/monitor-widget.tsx

@@ -27,13 +27,10 @@ import {
 } from '../../../common/protocol';
 import { MonitorModel } from '../../monitor-model';
 import { FrontendApplicationStateService } from '@theia/core/lib/browser/frontend-application-state';
+import { serialMonitorWidgetLabel } from '../../../common/nls';
 
 @injectable()
 export class MonitorWidget extends ReactWidget {
-  static readonly LABEL = nls.localize(
-    'arduino/common/serialMonitor',
-    'Serial Monitor'
-  );
   static readonly ID = 'serial-monitor';
 
   protected settings: MonitorSettings = {};
@@ -65,7 +62,7 @@ export class MonitorWidget extends ReactWidget {
   constructor() {
     super();
     this.id = MonitorWidget.ID;
-    this.title.label = MonitorWidget.LABEL;
+    this.title.label = serialMonitorWidgetLabel;
     this.title.iconClass = 'monitor-tab-icon';
     this.title.closable = true;
     this.scrollOptions = undefined;

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

@@ -20,7 +20,7 @@
 
 .serial-monitor .head {
     display: flex;
-    padding: 0px 5px 5px 0px;
+    padding: 0px 5px 5px 5px;
     height: 27px;
     background-color: var(--theia-activityBar-background);
 }

arduino-ide-extension/src/common/nls.ts

@@ -19,3 +19,8 @@ export const InstallManually = nls.localize(
   'arduino/common/installManually',
   'Install Manually'
 );
+
+export const serialMonitorWidgetLabel = nls.localize(
+  'arduino/common/serialMonitor',
+  'Serial Monitor'
+);

i18n/en.json

@@ -381,6 +381,9 @@
       "language.log": "True if the Arduino Language Server should generate log files into the sketch folder. Otherwise, false. It's false by default.",
       "language.realTimeDiagnostics": "If true, the language server provides real-time diagnostics when typing in the editor. It's false by default.",
       "manualProxy": "Manual proxy configuration",
+      "monitor": {
+        "dockArea": "The area of the application shell where the _{0}_ widget will reside. It is either \"bottom\" or \"right\". It defaults to \"{1}\"."
+      },
       "network": "Network",
       "newSketchbookLocation": "Select new sketchbook location",
       "noCliConfig": "Could not load the CLI configuration",