feat: use a monaco editor for the monitor output

Closes arduino#105

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>

Author: Akos Kitta

arduino-ide-extension/package.json

@@ -93,11 +93,11 @@
     "ps-tree": "^1.2.0",
     "query-string": "^7.0.1",
     "react-disable": "^0.1.1",
-    "react-markdown": "^8.0.0",
+    "react-markdown": "^6.0.3",
     "react-perfect-scrollbar": "^1.5.8",
     "react-select": "^5.6.0",
     "react-tabs": "^3.1.2",
-    "react-window": "^1.8.6",
+    "react-virtualized": "^9.22.3",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",
     "temp": "^0.9.1",
@@ -110,7 +110,6 @@
     "@octokit/rest": "^18.12.0",
     "@types/chai": "^4.2.7",
     "@types/mocha": "^5.2.7",
-    "@types/react-window": "^1.8.5",
     "@xhmikosr/downloader": "^13.0.1",
     "chai": "^4.2.0",
     "cross-env": "^7.0.3",

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

@@ -161,7 +161,10 @@ import {
   MonitorManagerProxyFactory,
   MonitorManagerProxyPath,
 } from '../common/protocol';
-import { MonacoTextModelService as TheiaMonacoTextModelService } from '@theia/monaco/lib/browser/monaco-text-model-service';
+import {
+  MonacoEditorModelFactory,
+  MonacoTextModelService as TheiaMonacoTextModelService,
+} from '@theia/monaco/lib/browser/monaco-text-model-service';
 import { MonacoTextModelService } from './theia/monaco/monaco-text-model-service';
 import { ResponseServiceImpl } from './response-service-impl';
 import {
@@ -254,7 +257,7 @@ import {
   UserFieldsDialog,
   UserFieldsDialogProps,
 } from './dialogs/user-fields/user-fields-dialog';
-import { nls } from '@theia/core/lib/common';
+import { nls, ResourceResolver } from '@theia/core/lib/common';
 import { IDEUpdaterCommands } from './ide-updater/ide-updater-commands';
 import {
   IDEUpdater,
@@ -318,6 +321,7 @@ import {
 } from './widgets/component-list/filter-renderer';
 import { CheckForUpdates } from './contributions/check-for-updates';
 import { OutputEditorFactory } from './theia/output/output-editor-factory';
+import { OutputEditorFactory as TheiaOutputEditorFactory } from '@theia/output/lib/browser/output-editor-factory';
 import { StartupTaskProvider } from '../electron-common/startup-task';
 import { DeleteSketch } from './contributions/delete-sketch';
 import { UserFields } from './contributions/user-fields';
@@ -358,6 +362,10 @@ import { MonacoEditorMenuContribution as TheiaMonacoEditorMenuContribution } fro
 import { UpdateArduinoState } from './contributions/update-arduino-state';
 import { TerminalFrontendContribution } from './theia/terminal/terminal-frontend-contribution';
 import { TerminalFrontendContribution as TheiaTerminalFrontendContribution } from '@theia/terminal/lib/browser/terminal-frontend-contribution';
+import { MonitorResourceProvider } from './serial/monitor/monitor-resource-provider';
+import { MonitorEditorFactory } from './serial/monitor/monitor-editor-factory';
+import { MonitorEditorModelFactory } from './serial/monitor/monitor-editor-model-factory';
+import { MonitorContextMenuService } from './serial/monitor/monitor-context-menu-service';
 
 // Hack to fix copy/cut/paste issue after electron version update in Theia.
 // https://github.com/eclipse-theia/theia/issues/12487
@@ -502,9 +510,9 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(MonitorModel).toSelf().inSingletonScope();
   bindViewContribution(bind, MonitorViewContribution);
   bind(TabBarToolbarContribution).toService(MonitorViewContribution);
-  bind(WidgetFactory).toDynamicValue((context) => ({
+  bind(WidgetFactory).toDynamicValue(({ container }) => ({
     id: MonitorWidget.ID,
-    createWidget: () => context.container.get(MonitorWidget),
+    createWidget: () => container.get(MonitorWidget),
   }));
 
   bind(MonitorManagerProxyFactory).toFactory(
@@ -528,6 +536,15 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     .to(MonitorManagerProxyClientImpl)
     .inSingletonScope();
 
+  bind(MonitorResourceProvider).toSelf().inSingletonScope();
+  bind(ResourceResolver).toService(MonitorResourceProvider);
+  bind(MonitorEditorFactory).toSelf().inSingletonScope();
+  bind(MonacoEditorFactory).toService(MonitorEditorFactory);
+  bind(MonacoEditorModelFactory)
+    .to(MonitorEditorModelFactory)
+    .inSingletonScope();
+  bind(MonitorContextMenuService).toSelf().inSingletonScope();
+
   bind(WorkspaceService).toSelf().inSingletonScope();
   rebind(TheiaWorkspaceService).toService(WorkspaceService);
   bind(WorkspaceVariableContribution).toSelf().inSingletonScope();
@@ -640,8 +657,7 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
 
   // To disable the highlighting of non-unicode characters in the _Output_ view
   bind(OutputEditorFactory).toSelf().inSingletonScope();
-  // Rebind to `TheiaOutputEditorFactory` when https://github.com/eclipse-theia/theia/pull/11615 is available.
-  rebind(MonacoEditorFactory).toService(OutputEditorFactory);
+  rebind(TheiaOutputEditorFactory).toService(OutputEditorFactory);
 
   bind(ArduinoDaemon)
     .toDynamicValue((context) =>

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

@@ -58,7 +58,9 @@ type StrictPreferenceSchemaProperties<T extends object> = {
   [p in keyof T]: PreferenceSchemaProperty;
 };
 type ArduinoPreferenceSchemaProperties =
-  StrictPreferenceSchemaProperties<ArduinoConfiguration> & { 'arduino.window.zoomLevel': PreferenceSchemaProperty };
+  StrictPreferenceSchemaProperties<ArduinoConfiguration> & {
+    'arduino.window.zoomLevel': PreferenceSchemaProperty;
+  };
 
 const properties: ArduinoPreferenceSchemaProperties = {
   'arduino.language.log': {
@@ -287,6 +289,22 @@ const properties: ArduinoPreferenceSchemaProperties = {
     ),
     default: defaultMonitorWidgetDockPanel,
   },
+  'arduino.monitor.stopRenderingLineAfter': {
+    type: 'number',
+    markdownDescription: nls.localize(
+      'arduino/preferences/monitor/stopRenderingLineAfter',
+      'Performance guard: Stop rendering a line after x characters in the _Serial Monitor_ view. Defaults to 1000. Use -1 to never stop rendering.'
+    ),
+    default: 1_000,
+  },
+  'arduino.monitor.maxLineNumber': {
+    type: 'number',
+    markdownDescription: nls.localize(
+      'arduino/preferences/monitor/maxLineNumber',
+      'Performance guard: Truncates previous lines after x lines in the _Serial Monitor_ view. Defaults to 1000. Use -1 to never truncate lines.'
+    ),
+    default: 1_000,
+  },
 };
 export const ArduinoConfigSchema: PreferenceSchema = {
   type: 'object',
@@ -321,6 +339,8 @@ export interface ArduinoConfiguration {
   'arduino.sketch.inoBlueprint': string;
   'arduino.checkForUpdates': boolean;
   'arduino.monitor.dockPanel': MonitorWidgetDockPanel;
+  'arduino.monitor.stopRenderingLineAfter': number;
+  'arduino.monitor.maxLineNumber': number;
 }
 
 export const ArduinoPreferences = Symbol('ArduinoPreferences');

arduino-ide-extension/src/browser/contributions/open-sketch-external.ts

@@ -1,5 +1,6 @@
 import { injectable } from '@theia/core/shared/inversify';
 import URI from '@theia/core/lib/common/uri';
+import { CommandService } from '@theia/core/lib/common/command';
 import { ArduinoMenus } from '../menu/arduino-menus';
 import {
   SketchContribution,
@@ -14,7 +15,7 @@ import { nls } from '@theia/core/lib/common/nls';
 export class OpenSketchExternal extends SketchContribution {
   override registerCommands(registry: CommandRegistry): void {
     registry.registerCommand(OpenSketchExternal.Commands.OPEN_EXTERNAL, {
-      execute: () => this.openExternal(),
+      execute: () => this.openExternal(registry),
     });
   }
 
@@ -33,7 +34,7 @@ export class OpenSketchExternal extends SketchContribution {
     });
   }
 
-  protected async openExternal(): Promise<void> {
+  protected async openExternal(commandService: CommandService): Promise<void> {
     const uri = await this.sketchServiceClient.currentSketchFile();
     if (uri) {
       const exists = await this.fileService.exists(new URI(uri));

arduino-ide-extension/src/browser/dialogs/ide-updater/ide-updater-component.tsx

@@ -6,7 +6,6 @@ import { ProgressInfo, UpdateInfo } from '../../../common/protocol/ide-updater';
 import ProgressBar from '../../components/ProgressBar';
 
 const ReactMarkdown = React.lazy<React.ComponentType<Options>>(
-  // @ts-expect-error see above
   () => import('react-markdown')
 );
 
@@ -111,6 +110,7 @@ export const IDEUpdaterComponent = ({
               >
                 <ReactMarkdown
                   components={{
+                    // @ts-expect-error see above
                     a: ({ href, children, ...props }) => (
                       <a onClick={() => href && openExternal(href)} {...props}>
                         {children}

arduino-ide-extension/src/browser/monitor-manager-proxy-client-impl.ts

@@ -40,8 +40,8 @@ export class MonitorManagerProxyClientImpl
   // this event is triggered.
   // Ideally a frontend component is connected to this event
   // to update the UI.
-  private readonly onMessagesReceivedEmitter = new Emitter<{
-    messages: string[];
+  protected readonly onMessagesReceivedEmitter = new Emitter<{
+    message: string;
   }>();
   readonly onMessagesReceived = this.onMessagesReceivedEmitter.event;
 
@@ -92,8 +92,8 @@ export class MonitorManagerProxyClientImpl
     this.webSocket.onerror = () => opened.reject();
     this.webSocket.onmessage = (message) => {
       const parsedMessage = JSON.parse(message.data);
-      if (Array.isArray(parsedMessage))
-        this.onMessagesReceivedEmitter.fire({ messages: parsedMessage });
+      if (typeof parsedMessage === 'string')
+        this.onMessagesReceivedEmitter.fire({ message: parsedMessage });
       else if (
         parsedMessage.command ===
         Monitor.MiddlewareCommand.ON_SETTINGS_DID_CHANGE

arduino-ide-extension/src/browser/notification-center.ts

@@ -46,7 +46,7 @@ export class NotificationCenter
     new Emitter<ProgressMessage>();
   private readonly indexUpdateDidFailEmitter =
     new Emitter<IndexUpdateDidFailParams>();
-  private readonly daemonDidStartEmitter = new Emitter<string>();
+  private readonly daemonDidStartEmitter = new Emitter<number>();
   private readonly daemonDidStopEmitter = new Emitter<void>();
   private readonly configDidChangeEmitter = new Emitter<ConfigState>();
   private readonly platformDidInstallEmitter = new Emitter<{
@@ -136,7 +136,7 @@ export class NotificationCenter
     this.indexUpdateDidFailEmitter.fire(params);
   }
 
-  notifyDaemonDidStart(port: string): void {
+  notifyDaemonDidStart(port: number): void {
     this.daemonDidStartEmitter.fire(port);
   }
 

arduino-ide-extension/src/browser/serial/monitor/monitor-context-menu-service.ts

@@ -0,0 +1,16 @@
+import type { MenuPath } from '@theia/core/lib/common/menu';
+import { injectable } from '@theia/core/shared/inversify';
+import { MonacoContextMenuService } from '@theia/monaco/lib/browser/monaco-context-menu';
+
+export namespace MonitorContextMenu {
+  export const MENU_PATH: MenuPath = ['monitor_context_menu'];
+  export const TEXT_EDIT_GROUP = [...MENU_PATH, '0_text_edit_group'];
+  export const WIDGET_GROUP = [...MENU_PATH, '1_widget_group'];
+}
+
+@injectable()
+export class MonitorContextMenuService extends MonacoContextMenuService {
+  protected override menuPath(): MenuPath {
+    return MonitorContextMenu.MENU_PATH;
+  }
+}

arduino-ide-extension/src/browser/serial/monitor/monitor-editor-factory.ts

@@ -0,0 +1,87 @@
+import { inject, injectable } from '@theia/core/shared/inversify';
+import { IContextMenuService } from '@theia/monaco-editor-core/esm/vs/platform/contextview/browser/contextView';
+import { MonacoContextMenuService } from '@theia/monaco/lib/browser/monaco-context-menu';
+import {
+  EditorServiceOverrides,
+  MonacoEditor,
+} from '@theia/monaco/lib/browser/monaco-editor';
+import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
+import { ArduinoPreferences } from '../../arduino-preferences';
+import { OutputEditorFactory } from '../../theia/output/output-editor-factory';
+import { MonitorContextMenuService } from './monitor-context-menu-service';
+import { MonitorUri } from './monitor-uri';
+
+// To hide the margin in the editor https://github.com/microsoft/monaco-editor/issues/1960
+const noMargin = {
+  lineNumbers: 'off',
+  glyphMargin: false,
+  folding: false,
+  lineDecorationsWidth: 0,
+  lineNumbersMinChars: 0,
+} as const;
+@injectable()
+export class MonitorEditorFactory extends OutputEditorFactory {
+  @inject(MonitorContextMenuService)
+  private readonly monitorContextMenuService: MonacoContextMenuService;
+  @inject(ArduinoPreferences)
+  private readonly preference: ArduinoPreferences;
+
+  override readonly scheme: string = MonitorUri.scheme;
+
+  protected override createOptions(
+    model: MonacoEditorModel,
+    defaultOptions: MonacoEditor.IOptions
+  ): MonacoEditor.IOptions {
+    return {
+      ...super.createOptions(model, defaultOptions),
+      ...noMargin,
+      stopRenderingLineAfter:
+        this.preference['arduino.monitor.stopRenderingLineAfter'],
+      hideCursorInOverviewRuler: true,
+      trimAutoWhitespace: false,
+      maxTokenizationLineLength: 0,
+      cursorBlinking: 'solid',
+      cursorStyle: undefined,
+      domReadOnly: true,
+      renderLineHighlight: 'none',
+      renderValidationDecorations: 'off',
+      fixedOverflowWidgets: false,
+      acceptSuggestionOnCommitCharacter: false,
+      acceptSuggestionOnEnter: 'off',
+      autoClosingBrackets: 'never',
+      autoClosingDelete: 'never',
+      autoClosingOvertype: 'never',
+      autoClosingQuotes: 'never',
+      autoIndent: 'none',
+      unusualLineTerminators: 'off',
+      glyphMargin: false,
+      lineDecorationsWidth: 0,
+      disableLayerHinting: true,
+      disableMonospaceOptimizations: true,
+      inlineSuggest: { enabled: false },
+      quickSuggestions: false,
+      parameterHints: { enabled: false },
+      suggestOnTriggerCharacters: false,
+      snippetSuggestions: 'none',
+      tabCompletion: 'off',
+      codeLens: false,
+      lightbulb: { enabled: false },
+      folding: false,
+      matchBrackets: 'never',
+      renderLineHighlightOnlyWhenFocus: true,
+      inlayHints: { enabled: 'off' },
+    };
+  }
+
+  protected override *createOverrides(
+    model: MonacoEditorModel,
+    defaultOverrides: EditorServiceOverrides
+  ): EditorServiceOverrides {
+    yield [IContextMenuService, this.monitorContextMenuService];
+    for (const [identifier, provider] of defaultOverrides) {
+      if (identifier !== IContextMenuService) {
+        yield [identifier, provider];
+      }
+    }
+  }
+}

arduino-ide-extension/src/browser/serial/monitor/monitor-editor-model-factory.ts

@@ -0,0 +1,69 @@
+import type { CancellationToken, Resource } from '@theia/core';
+import type { SaveOptions } from '@theia/core/lib/browser';
+import { injectable } from '@theia/core/shared/inversify';
+import type { TextDocumentContentChangeEvent } from '@theia/core/shared/vscode-languageserver-protocol';
+import {
+  MonacoEditorModel,
+  TextDocumentSaveReason,
+} from '@theia/monaco/lib/browser/monaco-editor-model';
+import {
+  OutputEditorModel,
+  OutputEditorModelFactory,
+} from '@theia/output/lib/browser/output-editor-model-factory';
+import { MonitorUri } from './monitor-uri';
+
+@injectable()
+export class MonitorEditorModelFactory extends OutputEditorModelFactory {
+  override readonly scheme: string = MonitorUri.scheme;
+
+  override createModel(resource: Resource): MonacoEditorModel {
+    const model = new MonitorEditorModel(resource, this.m2p, this.p2m);
+    model.autoSave = 'off';
+    model['ignoreContentChanges'] = true;
+    return model;
+  }
+}
+
+class MonitorEditorModel extends OutputEditorModel {
+  override get readOnly(): boolean {
+    return true;
+  }
+
+  override isReadonly(): boolean {
+    return true;
+  }
+
+  // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+  protected override setDirty(dirty: boolean): void {
+    // NOOP
+  }
+
+  protected override markAsDirty(): void {
+    // NOOP
+  }
+
+  protected override async doSave(
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+    reason: TextDocumentSaveReason,
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+    token: CancellationToken,
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+    overwriteEncoding?: boolean | undefined,
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+    options?: SaveOptions | undefined
+  ): Promise<void> {
+    // NOOP
+  }
+
+  // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+  protected override async doSync(token: CancellationToken): Promise<void> {
+    // NOOP
+  }
+
+  protected override pushContentChanges(
+    // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars
+    contentChanges: TextDocumentContentChangeEvent[]
+  ): void {
+    // NOOP
+  }
+}