Make tab width 2 spaces (#445)

arduino-ide-extension/src/browser/theia/messages/notification-center-component.tsx

@@ -5,46 +5,44 @@ import { NotificationCenterComponent as TheiaNotificationCenterComponent } from
 const PerfectScrollbar = require('react-perfect-scrollbar');
 
 export class NotificationCenterComponent extends TheiaNotificationCenterComponent {
-    render(): React.ReactNode {
-        const empty = this.state.notifications.length === 0;
-        const title = empty ? 'NO NEW NOTIFICATIONS' : 'NOTIFICATIONS';
-        return (
-            <div
-                className={`theia-notifications-container theia-notification-center ${
-                    this.state.visibilityState === 'center' ? 'open' : 'closed'
-                }`}
-            >
-                <div className="theia-notification-center-header">
-                    <div className="theia-notification-center-header-title">
-                        {title}
-                    </div>
-                    <div className="theia-notification-center-header-actions">
-                        <ul className="theia-notification-actions">
-                            <li
-                                className="collapse"
-                                title="Hide Notification Center"
-                                onClick={this.onHide}
-                            />
-                            <li
-                                className="clear-all"
-                                title="Clear All"
-                                onClick={this.onClearAll}
-                            />
-                        </ul>
-                    </div>
-                </div>
-                <PerfectScrollbar className="theia-notification-list-scroll-container">
-                    <div className="theia-notification-list">
-                        {this.state.notifications.map((notification) => (
-                            <NotificationComponent
-                                key={notification.messageId}
-                                notification={notification}
-                                manager={this.props.manager}
-                            />
-                        ))}
-                    </div>
-                </PerfectScrollbar>
-            </div>
-        );
-    }
+  render(): React.ReactNode {
+    const empty = this.state.notifications.length === 0;
+    const title = empty ? 'NO NEW NOTIFICATIONS' : 'NOTIFICATIONS';
+    return (
+      <div
+        className={`theia-notifications-container theia-notification-center ${
+          this.state.visibilityState === 'center' ? 'open' : 'closed'
+        }`}
+      >
+        <div className="theia-notification-center-header">
+          <div className="theia-notification-center-header-title">{title}</div>
+          <div className="theia-notification-center-header-actions">
+            <ul className="theia-notification-actions">
+              <li
+                className="collapse"
+                title="Hide Notification Center"
+                onClick={this.onHide}
+              />
+              <li
+                className="clear-all"
+                title="Clear All"
+                onClick={this.onClearAll}
+              />
+            </ul>
+          </div>
+        </div>
+        <PerfectScrollbar className="theia-notification-list-scroll-container">
+          <div className="theia-notification-list">
+            {this.state.notifications.map((notification) => (
+              <NotificationComponent
+                key={notification.messageId}
+                notification={notification}
+                manager={this.props.manager}
+              />
+            ))}
+          </div>
+        </PerfectScrollbar>
+      </div>
+    );
+  }
 }

arduino-ide-extension/src/browser/theia/messages/notification-component.tsx

@@ -2,105 +2,96 @@ import * as React from 'react';
 import { NotificationComponent as TheiaNotificationComponent } from '@theia/messages/lib/browser/notification-component';
 
 export class NotificationComponent extends TheiaNotificationComponent {
-    render(): React.ReactNode {
-        const {
-            messageId,
-            message,
-            type,
-            collapsed,
-            expandable,
-            source,
-            actions,
-        } = this.props.notification;
-        return (
-            <div key={messageId} className="theia-notification-list-item">
-                <div
-                    className={`theia-notification-list-item-content ${
-                        collapsed ? 'collapsed' : ''
-                    }`}
-                >
-                    <div className="theia-notification-list-item-content-main">
-                        <div
-                            className={`theia-notification-icon theia-notification-icon-${type}`}
-                        />
-                        <div className="theia-notification-message">
-                            <span
-                                dangerouslySetInnerHTML={{ __html: message }}
-                                onClick={this.onMessageClick}
-                            />
-                        </div>
-                        <ul className="theia-notification-actions">
-                            {expandable && (
-                                <li
-                                    className={
-                                        collapsed ? 'expand' : 'collapse'
-                                    }
-                                    title={collapsed ? 'Expand' : 'Collapse'}
-                                    data-message-id={messageId}
-                                    onClick={this.onToggleExpansion}
-                                />
-                            )}
-                            {!this.isProgress && (
-                                <li
-                                    className="clear"
-                                    title="Clear"
-                                    data-message-id={messageId}
-                                    onClick={this.onClear}
-                                />
-                            )}
-                        </ul>
-                    </div>
-                    {(source || !!actions.length) && (
-                        <div className="theia-notification-list-item-content-bottom">
-                            <div className="theia-notification-source">
-                                {source && <span>{source}</span>}
-                            </div>
-                            <div className="theia-notification-buttons">
-                                {actions &&
-                                    actions.map((action, index) => (
-                                        <button
-                                            key={messageId + `-action-${index}`}
-                                            className="theia-button"
-                                            data-message-id={messageId}
-                                            data-action={action}
-                                            onClick={this.onAction}
-                                        >
-                                            {action}
-                                        </button>
-                                    ))}
-                            </div>
-                        </div>
-                    )}
-                </div>
-                {this.renderProgressBar()}
+  render(): React.ReactNode {
+    const { messageId, message, type, collapsed, expandable, source, actions } =
+      this.props.notification;
+    return (
+      <div key={messageId} className="theia-notification-list-item">
+        <div
+          className={`theia-notification-list-item-content ${
+            collapsed ? 'collapsed' : ''
+          }`}
+        >
+          <div className="theia-notification-list-item-content-main">
+            <div
+              className={`theia-notification-icon theia-notification-icon-${type}`}
+            />
+            <div className="theia-notification-message">
+              <span
+                dangerouslySetInnerHTML={{ __html: message }}
+                onClick={this.onMessageClick}
+              />
             </div>
-        );
-    }
-
-    private renderProgressBar(): React.ReactNode {
-        if (!this.isProgress) {
-            return undefined;
-        }
-        if (!Number.isNaN(this.props.notification.progress)) {
-            return (
-                <div className="theia-notification-item-progress">
-                    <div
-                        className="theia-notification-item-progressbar"
-                        style={{
-                            width: `${this.props.notification.progress}%`,
-                        }}
-                    />
-                </div>
-            );
-        }
-        return (
-            <div className="theia-progress-bar-container">
-                <div className="theia-progress-bar" />
+            <ul className="theia-notification-actions">
+              {expandable && (
+                <li
+                  className={collapsed ? 'expand' : 'collapse'}
+                  title={collapsed ? 'Expand' : 'Collapse'}
+                  data-message-id={messageId}
+                  onClick={this.onToggleExpansion}
+                />
+              )}
+              {!this.isProgress && (
+                <li
+                  className="clear"
+                  title="Clear"
+                  data-message-id={messageId}
+                  onClick={this.onClear}
+                />
+              )}
+            </ul>
+          </div>
+          {(source || !!actions.length) && (
+            <div className="theia-notification-list-item-content-bottom">
+              <div className="theia-notification-source">
+                {source && <span>{source}</span>}
+              </div>
+              <div className="theia-notification-buttons">
+                {actions &&
+                  actions.map((action, index) => (
+                    <button
+                      key={messageId + `-action-${index}`}
+                      className="theia-button"
+                      data-message-id={messageId}
+                      data-action={action}
+                      onClick={this.onAction}
+                    >
+                      {action}
+                    </button>
+                  ))}
+              </div>
             </div>
-        );
-    }
+          )}
+        </div>
+        {this.renderProgressBar()}
+      </div>
+    );
+  }
 
-    private get isProgress(): boolean {
-        return typeof this.props.notification.progress === 'number';
+  private renderProgressBar(): React.ReactNode {
+    if (!this.isProgress) {
+      return undefined;
     }
+    if (!Number.isNaN(this.props.notification.progress)) {
+      return (
+        <div className="theia-notification-item-progress">
+          <div
+            className="theia-notification-item-progressbar"
+            style={{
+              width: `${this.props.notification.progress}%`,
+            }}
+          />
+        </div>
+      );
+    }
+    return (
+      <div className="theia-progress-bar-container">
+        <div className="theia-progress-bar" />
+      </div>
+    );
+  }
+
+  private get isProgress(): boolean {
+    return typeof this.props.notification.progress === 'number';
+  }
 }

arduino-ide-extension/src/browser/theia/messages/notification-toasts-component.tsx

@@ -3,23 +3,23 @@ import { NotificationComponent } from './notification-component';
 import { NotificationToastsComponent as TheiaNotificationToastsComponent } from '@theia/messages/lib/browser/notification-toasts-component';
 
 export class NotificationToastsComponent extends TheiaNotificationToastsComponent {
-    render(): React.ReactNode {
-        return (
-            <div
-                className={`theia-notifications-container theia-notification-toasts ${
-                    this.state.visibilityState === 'toasts' ? 'open' : 'closed'
-                }`}
-            >
-                <div className="theia-notification-list">
-                    {this.state.toasts.map((notification) => (
-                        <NotificationComponent
-                            key={notification.messageId}
-                            notification={notification}
-                            manager={this.props.manager}
-                        />
-                    ))}
-                </div>
-            </div>
-        );
-    }
+  render(): React.ReactNode {
+    return (
+      <div
+        className={`theia-notifications-container theia-notification-toasts ${
+          this.state.visibilityState === 'toasts' ? 'open' : 'closed'
+        }`}
+      >
+        <div className="theia-notification-list">
+          {this.state.toasts.map((notification) => (
+            <NotificationComponent
+              key={notification.messageId}
+              notification={notification}
+              manager={this.props.manager}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
 }

arduino-ide-extension/src/browser/theia/messages/notifications-manager.ts

@@ -1,50 +1,46 @@
 import { injectable } from 'inversify';
 import { CancellationToken } from '@theia/core/lib/common/cancellation';
 import {
-    ProgressMessage,
-    ProgressUpdate,
+  ProgressMessage,
+  ProgressUpdate,
 } from '@theia/core/lib/common/message-service-protocol';
 import { NotificationManager as TheiaNotificationManager } from '@theia/messages/lib/browser/notifications-manager';
 
 @injectable()
 export class NotificationManager extends TheiaNotificationManager {
-    async reportProgress(
-        messageId: string,
-        update: ProgressUpdate,
-        originalMessage: ProgressMessage,
-        cancellationToken: CancellationToken
-    ): Promise<void> {
-        const notification = this.find(messageId);
-        if (!notification) {
-            return;
-        }
-        if (cancellationToken.isCancellationRequested) {
-            this.clear(messageId);
-        } else {
-            notification.message =
-                originalMessage.text && update.message
-                    ? `${originalMessage.text}: ${update.message}`
-                    : originalMessage.text ||
-                      update?.message ||
-                      notification.message;
-
-            // Unlike in Theia, we allow resetting the progress monitor to NaN to enforce unknown progress.
-            const candidate = this.toPlainProgress(update);
-            notification.progress =
-                typeof candidate === 'number'
-                    ? candidate
-                    : notification.progress;
-        }
-        this.fireUpdatedEvent();
+  async reportProgress(
+    messageId: string,
+    update: ProgressUpdate,
+    originalMessage: ProgressMessage,
+    cancellationToken: CancellationToken
+  ): Promise<void> {
+    const notification = this.find(messageId);
+    if (!notification) {
+      return;
     }
+    if (cancellationToken.isCancellationRequested) {
+      this.clear(messageId);
+    } else {
+      notification.message =
+        originalMessage.text && update.message
+          ? `${originalMessage.text}: ${update.message}`
+          : originalMessage.text || update?.message || notification.message;
 
-    protected toPlainProgress(update: ProgressUpdate): number | undefined {
-        if (!update.work) {
-            return undefined;
-        }
-        if (Number.isNaN(update.work.done) || Number.isNaN(update.work.total)) {
-            return Number.NaN; // This should trigger the unknown monitor.
-        }
-        return Math.min((update.work.done / update.work.total) * 100, 100);
+      // Unlike in Theia, we allow resetting the progress monitor to NaN to enforce unknown progress.
+      const candidate = this.toPlainProgress(update);
+      notification.progress =
+        typeof candidate === 'number' ? candidate : notification.progress;
     }
+    this.fireUpdatedEvent();
+  }
+
+  protected toPlainProgress(update: ProgressUpdate): number | undefined {
+    if (!update.work) {
+      return undefined;
+    }
+    if (Number.isNaN(update.work.done) || Number.isNaN(update.work.total)) {
+      return Number.NaN; // This should trigger the unknown monitor.
+    }
+    return Math.min((update.work.done / update.work.total) * 100, 100);
+  }
 }

arduino-ide-extension/src/browser/theia/messages/notifications-renderer.tsx

@@ -7,16 +7,16 @@ import { NotificationsRenderer as TheiaNotificationsRenderer } from '@theia/mess
 
 @injectable()
 export class NotificationsRenderer extends TheiaNotificationsRenderer {
-    protected render(): void {
-        ReactDOM.render(
-            <div>
-                <NotificationToastsComponent
-                    manager={this.manager}
-                    corePreferences={this.corePreferences}
-                />
-                <NotificationCenterComponent manager={this.manager} />
-            </div>,
-            this.container
-        );
-    }
+  protected render(): void {
+    ReactDOM.render(
+      <div>
+        <NotificationToastsComponent
+          manager={this.manager}
+          corePreferences={this.corePreferences}
+        />
+        <NotificationCenterComponent manager={this.manager} />
+      </div>,
+      this.container
+    );
+  }
 }