Styled the input.

Do not render the widget after a close request.

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

Author: Akos Kitta

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

@@ -34,6 +34,11 @@ export class MonitorWidget extends ReactWidget {
      * Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
      */
     protected focusNode: HTMLElement | undefined;
+    /**
+     * Guard against re-rendering the view after the close was requested.
+     * See: https://github.com/eclipse-theia/theia/issues/6704
+     */
+    protected closing = false;
     protected readonly clearOutputEmitter = new Emitter<void>();
 
     constructor() {
@@ -67,13 +72,20 @@ export class MonitorWidget extends ReactWidget {
     }
 
     onCloseRequest(msg: Message): void {
+        this.closing = true;
         this.monitorConnection.autoConnect = false;
         if (this.monitorConnection.connected) {
             this.monitorConnection.disconnect();
         }
         super.onCloseRequest(msg);
     }
 
+    protected onUpdateRequest(msg: Message): void {
+        if (!this.closing) {
+            super.onUpdateRequest(msg);
+        }
+    }
+
     protected onResize(msg: Widget.ResizeMessage): void {
         super.onResize(msg);
         this.widgetHeight = msg.height;
@@ -195,7 +207,7 @@ export class SerialMonitorSendInput extends React.Component<SerialMonitorSendInp
         return <input
             ref={this.setRef}
             type='text'
-            className={this.props.monitorConfig ? '' : 'not-connected'}
+            className={this.props.monitorConfig ? '' : 'warning'}
             placeholder={this.placeholder}
             value={this.state.text}
             onChange={this.onChange}

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

@@ -14,7 +14,7 @@
 .arduino-select__option--is-selected {
     background-color: var(--theia-accent-color3) !important;
     color: var(--theia-content-font-color0) !important;
-    border-color: var(--theia-accent-color3)  !important;
+    border-color: var(--theia-accent-color3) !important;
 }
 
 .arduino-select__option--is-focused {

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

@@ -4,3 +4,40 @@
 @import './editor.css';
 @import './monitor.css';
 @import './arduino-select.css';
+
+input:focus {
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+    opacity: 1 !important;
+    outline-color: var(--theia-accent-color3);
+}
+
+input.warning:focus {
+    outline-width: 1px;
+    outline-style: solid;
+    outline-offset: -1px;
+    opacity: 1 !important;
+    color: var(--theia-warn-font-color0);
+    background-color: var(--theia-warn-color0);
+}
+
+input.warning {
+    background-color: var(--theia-warn-color0);
+}
+
+input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: var(--theia-warn-font-color0);
+    background-color: var(--theia-warn-color0);
+    opacity: 1; /* Firefox */
+}
+
+input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: var(--theia-warn-font-color0);
+    background-color: var(--theia-warn-color0);
+}
+
+input.warning::-ms-input-placeholder { /* Microsoft Edge */
+    color: var(--theia-warn-font-color0);
+    background-color: var(--theia-warn-color0);
+}

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

@@ -33,10 +33,6 @@
     border-color: var(--theia-accent-color3);
 }
 
-.serial-monitor .head .send > input.not-connected {
-    background-color: var(--theia-warn-color0);
-}
-
 .serial-monitor .head .config {
     display: flex;
 }