Improved serial monitor dropdowns

Signed-off-by: jbicker <[email protected]>

Author: jbicker

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

@@ -1,4 +1,4 @@
-import { ReactWidget, Message } from "@theia/core/lib/browser";
+import { ReactWidget, Message, Widget } from "@theia/core/lib/browser";
 import { postConstruct, injectable, inject } from "inversify";
 import * as React from 'react';
 import Select, { components } from 'react-select';
@@ -116,6 +116,8 @@ export class MonitorWidget extends ReactWidget {
     protected baudRate: number;
     protected _lineEnding: string;
 
+    protected widgetHeight: number;
+
     constructor(
         @inject(MonitorServiceClientImpl) protected readonly serviceClient: MonitorServiceClientImpl,
         @inject(MonitorConnection) protected readonly connection: MonitorConnection,
@@ -135,6 +137,8 @@ export class MonitorWidget extends ReactWidget {
         this.tempData = '';
         this._lineEnding = '\n';
 
+        this.scrollOptions = undefined;
+
         this.toDisposeOnDetach.push(serviceClient.onRead(({ data, connectionId }) => {
             this.tempData += data;
             if (this.tempData.endsWith('\n')) {
@@ -170,7 +174,7 @@ export class MonitorWidget extends ReactWidget {
         this.clear();
         this.connect();
         this.toDisposeOnDetach.push(this.boardsServiceClient.onBoardsChanged(async states => {
-            const currentConnectionConfig = this.connection.connectionConfig;      
+            const currentConnectionConfig = this.connection.connectionConfig;
             const connectedBoard = states.newState.boards
                 .filter(AttachedSerialBoard.is)
                 .find(board => {
@@ -195,6 +199,12 @@ export class MonitorWidget extends ReactWidget {
         this.connection.disconnect();
     }
 
+    protected onResize(msg: Widget.ResizeMessage) {
+        super.onResize(msg);
+        this.widgetHeight = msg.height;
+        this.update();
+    }
+
     protected async connect() {
         const config = await this.getConnectionConfig();
         if (config) {
@@ -297,7 +307,8 @@ export class MonitorWidget extends ReactWidget {
         const selectStyles: Styles = {
             control: (provided, state) => ({
                 ...provided,
-                width: 200
+                width: 200,
+                border: 'none'
             }),
             dropdownIndicator: (p, s) => ({
                 ...p,
@@ -337,6 +348,7 @@ export class MonitorWidget extends ReactWidget {
             components={{ DropdownIndicator }}
             theme={theme}
             styles={selectStyles}
+            maxMenuHeight={this.widgetHeight - 40}
             classNamePrefix='sms'
             className='serial-monitor-select'
             id={id}

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

@@ -79,15 +79,38 @@
     border: var(--theia-border-color1) var(--theia-border-width) solid;
 }
 
+.serial-monitor-select .sms__control--is-focused {
+    border-color: var(--theia-border-color2) !important;
+    box-shadow: none !important;
+}
+
+.sms__control--is-focused:hover {
+    border-color: var(--theia-border-color2) !important;
+}
+
 .serial-monitor-select .sms__option--is-selected {
     background-color: var(--theia-ui-button-color-secondary-hover);
     color: var(--theia-content-font-color0);
 }
 
-.serial-monitor-select  .sms__option--is-focused {
+.serial-monitor-select .sms__option--is-focused {
     background-color: var(--theia-ui-button-color-secondary-hover);
 }
 
-.serial-monitor-select  .sms__menu {
+.serial-monitor-select .sms__menu {
     background-color: var(--theia-layout-color1);
+    border: 1px solid var(--theia-border-color2);
+    border-top: none;
+    box-shadow: none;
+}
+
+.serial-monitor-select .sms__control.sms__control--menu-is-open {
+    border: 1px solid;
+    border-color: var(--theia-border-color2) !important;
+    border-bottom: none;
+}
+
+.sms__menu-list {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
 }