Merge branch 'fix-reconnect-flashes'

5 files changed, 89 insertions, 16 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 397e92724b..0e15f909c3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,8 @@ Line wrap the file at 100 chars.                                              Th
 
 
 ## [Unreleased]
+### Fixed
+- Stop GUI from glitching during the short reconnect state.
 
 
 ## [2018.6-beta1] - 2018-12-05
diff --git a/gui/packages/desktop/src/main/index.js b/gui/packages/desktop/src/main/index.js
index 5cc11a29b1..92803129bd 100644
--- a/gui/packages/desktop/src/main/index.js
+++ b/gui/packages/desktop/src/main/index.js
@@ -22,7 +22,6 @@ import type {
   Location,
   RelayList,
   Settings,
-  TunnelState,
   TunnelStateTransition,
 } from './daemon-rpc';
 
@@ -455,7 +454,7 @@ const ApplicationMain = {
 
   _setTunnelState(newState: TunnelStateTransition) {
     this._tunnelState = newState;
-    this._updateTrayIcon(newState.state);
+    this._updateTrayIcon(newState);
     this._updateLocation();
 
     if (!this._shouldSuppressNotifications()) {
@@ -649,13 +648,46 @@ const ApplicationMain = {
     }
   },
 
-  _updateTrayIcon(tunnelState: TunnelState) {
-    const iconTypes: { [TunnelState]: TrayIconType } = {
-      connected: 'secured',
-      connecting: 'securing',
-      blocked: 'securing',
-    };
-    const type = iconTypes[tunnelState] || 'unsecured';
+  _trayIconType(tunnelState: TunnelStateTransition): TrayIconType {
+    switch (tunnelState.state) {
+      case 'connected':
+        return 'secured';
+
+      case 'connecting':
+        return 'securing';
+
+      case 'blocked':
+        return 'securing';
+
+      case 'disconnecting':
+        switch (tunnelState.details) {
+          case 'reconnect':
+            return 'securing';
+
+          case 'block':
+            return 'securing';
+
+          case 'nothing':
+            return 'unsecured';
+
+          default:
+            log.error(`Invalid after disconnect action: ${(tunnelState.details: empty)}`);
+        }
+        break;
+
+      case 'disconnected':
+        return 'unsecured';
+
+      default:
+        log.error(`Invalid tunnel state: ${(tunnelState.state: empty)}`);
+    }
+
+    // Unreachable, but flow doesn't agree
+    return 'unsecured';
+  },
+
+  _updateTrayIcon(tunnelState: TunnelStateTransition) {
+    const type = this._trayIconType(tunnelState);
 
     if (this._trayIconController) {
       this._trayIconController.animateToIcon(type);
diff --git a/gui/packages/desktop/src/renderer/components/Connect.js b/gui/packages/desktop/src/renderer/components/Connect.js
index 021dbd579f..ae83f0a1f0 100644
--- a/gui/packages/desktop/src/renderer/components/Connect.js
+++ b/gui/packages/desktop/src/renderer/components/Connect.js
@@ -30,6 +30,8 @@ type Props = {
   onToggleConnectionInfo: (boolean) => void,
 };
 
+type MarkerOrSpinner = 'marker' | 'spinner';
+
 export default class Connect extends Component<Props> {
   render() {
     const error = this.checkForErrors();
@@ -89,8 +91,8 @@ export default class Connect extends Component<Props> {
     if (typeof longitude === 'number' && typeof latitude === 'number') {
       return {
         center: [longitude, latitude],
-        // do not show the marker when connecting
-        showMarker: state !== 'connecting',
+        // do not show the marker when connecting or reconnecting
+        showMarker: this._showMarkerOrSpinner() === 'marker',
         markerStyle: this._getMarkerStyle(),
         // zoom in when connected
         zoomLevel: state === 'connected' ? 'low' : 'medium',
@@ -135,6 +137,17 @@ export default class Connect extends Component<Props> {
     }
   }
 
+  _showMarkerOrSpinner(): MarkerOrSpinner {
+    const state = this.props.connection.status.state;
+    const details = this.props.connection.status.details;
+
+    if (state === 'connecting' || (state === 'disconnecting' && details === 'reconnect')) {
+      return 'spinner';
+    } else {
+      return 'marker';
+    }
+  }
+
   renderMap() {
     const tunnelState = this.props.connection.status.state;
     const details = this.props.connection.status.details;
@@ -160,14 +173,14 @@ export default class Connect extends Component<Props> {
         </View>
         <View style={styles.container}>
           {/* show spinner when connecting */}
-          {tunnelState === 'connecting' ? (
+          {this._showMarkerOrSpinner() === 'spinner' ? (
             <View style={styles.status_icon}>
               <ImageView source="icon-spinner" height={60} width={60} alt="" />
             </View>
           ) : null}
 
           <TunnelControl
-            tunnelState={this.props.connection.status.state}
+            tunnelState={this.props.connection.status}
             selectedRelayName={this.props.selectedRelayName}
             city={this.props.connection.city}
             country={this.props.connection.country}
diff --git a/gui/packages/desktop/src/renderer/components/NotificationArea.js b/gui/packages/desktop/src/renderer/components/NotificationArea.js
index 8c99c31e26..1625d63431 100644
--- a/gui/packages/desktop/src/renderer/components/NotificationArea.js
+++ b/gui/packages/desktop/src/renderer/components/NotificationArea.js
@@ -79,6 +79,16 @@ export default class NotificationArea extends Component<Props, State> {
           reason: getBlockReasonMessage(tunnelState.details),
         };
 
+      case 'disconnecting':
+        if (tunnelState.details === 'reconnect') {
+          return {
+            visible: true,
+            type: 'blocking',
+            reason: '',
+          };
+        }
+      // fallthrough
+
       default:
         if (!version.consistent) {
           return {
diff --git a/gui/packages/desktop/src/renderer/components/TunnelControl.js b/gui/packages/desktop/src/renderer/components/TunnelControl.js
index c2788501fe..6590a17818 100644
--- a/gui/packages/desktop/src/renderer/components/TunnelControl.js
+++ b/gui/packages/desktop/src/renderer/components/TunnelControl.js
@@ -6,7 +6,7 @@ import { ConnectionInfo, SecuredLabel, SecuredDisplayStyle, ImageView } from '@m
 import * as AppButton from './AppButton';
 import { colors } from '../../config';
 
-import type { TunnelState, RelayProtocol } from '../lib/daemon-rpc-proxy';
+import type { TunnelStateTransition, RelayProtocol } from '../lib/daemon-rpc-proxy';
 
 export type RelayInAddress = {
   ip: string,
@@ -20,7 +20,7 @@ export type RelayOutAddress = {
 };
 
 type TunnelControlProps = {
-  tunnelState: TunnelState,
+  tunnelState: TunnelStateTransition,
   selectedRelayName: string,
   city: ?string,
   country: ?string,
@@ -135,7 +135,23 @@ export default class TunnelControl extends Component<TunnelControlProps> {
       />
     );
 
-    switch (this.props.tunnelState) {
+    let state = this.props.tunnelState.state;
+
+    if (state === 'disconnecting') {
+      switch (this.props.tunnelState.details) {
+        case 'block':
+          state = 'blocked';
+          break;
+        case 'reconnect':
+          state = 'connecting';
+          break;
+        default:
+          state = 'disconnecting';
+          break;
+      }
+    }
+
+    switch (state) {
       case 'connecting':
         return (
           <Wrapper>