removed react autosizer

arduino-ide-extension/package.json

@@ -79,7 +79,6 @@
     "react-disable": "^0.1.0",
     "react-select": "^3.0.4",
     "react-tabs": "^3.1.2",
-    "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6",
     "semver": "^7.3.2",
     "string-natural-compare": "^2.0.3",
@@ -92,7 +91,6 @@
     "@types/chai": "^4.2.7",
     "@types/chai-string": "^1.4.2",
     "@types/mocha": "^5.2.7",
-    "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
     "chai": "^4.2.0",
     "chai-string": "^1.5.0",

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

@@ -191,6 +191,7 @@ export class MonitorWidget extends ReactWidget {
             monitorModel={this.monitorModel}
             monitorConnection={this.monitorConnection}
             clearConsoleEvent={this.clearOutputEmitter.event}
+            height={Math.floor(this.widgetHeight - 50)}
           />
         </div>
       </div>

arduino-ide-extension/src/browser/monitor/serial-monitor-send-output.tsx

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Event } from '@theia/core/lib/common/event';
 import { DisposableCollection } from '@theia/core/lib/common/disposable';
-import { FixedSizeList as List } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import { areEqual, FixedSizeList as List } from 'react-window';
 import { MonitorModel } from './monitor-model';
 import { MonitorConnection } from './monitor-connection';
 import dateFormat = require('dateformat');
@@ -32,29 +31,23 @@ export class SerialMonitorOutput extends React.Component<
 
   render(): React.ReactNode {
     return (
-      <div style={{ height: '100%' }}>
-        <AutoSizer>
-          {({ height, width }) => (
-            <List
-              className="serial-monitor-messages"
-              height={height}
-              itemData={
-                {
-                  lines: this.state.lines,
-                  timestamp: this.state.timestamp,
-                } as any
-              }
-              itemCount={this.state.lines.length}
-              itemSize={20}
-              width={width}
-              ref={this.listRef}
-              onItemsRendered={this.scrollToBottom}
-            >
-              {Row}
-            </List>
-          )}
-        </AutoSizer>
-      </div>
+      <List
+        className="serial-monitor-messages"
+        height={this.props.height}
+        itemData={
+          {
+            lines: this.state.lines,
+            timestamp: this.state.timestamp,
+          } as any
+        }
+        itemCount={this.state.lines.length}
+        itemSize={18}
+        width={'100%'}
+        ref={this.listRef}
+        onItemsRendered={this.scrollToBottom}
+      >
+        {Row}
+      </List>
     );
   }
 
@@ -105,7 +98,7 @@ export class SerialMonitorOutput extends React.Component<
   }).bind(this);
 }
 
-const Row = ({
+const _Row = ({
   index,
   style,
   data,
@@ -128,12 +121,14 @@ const Row = ({
     null
   );
 };
+const Row = React.memo(_Row, areEqual);
 
 export namespace SerialMonitorOutput {
   export interface Props {
     readonly monitorModel: MonitorModel;
     readonly monitorConnection: MonitorConnection;
     readonly clearConsoleEvent: Event<void>;
+    readonly height: number;
   }
 
   export interface State {