Add type annotations for TrayIconManager

5 files changed, 61 insertions, 77 deletions

diff --git a/app/app.js b/app/app.js
index cab3bcb896..935c6da28c 100644
--- a/app/app.js
+++ b/app/app.js
@@ -13,7 +13,8 @@ import connectActions from './actions/connect';
 import Backend from './lib/backend';
 import mapBackendEventsToReduxActions from './lib/backend-redux-actions';
 import mapBackendEventsToRouter from './lib/backend-routing';
-import { LoginState, ConnectionState, TrayIconType } from './enums';
+import { LoginState, ConnectionState } from './enums';
+import type { TrayIconType } from './lib/tray-icon-manager';
 
 const initialState = {};
 const memoryHistory = createMemoryHistory();
@@ -38,15 +39,12 @@ if(store.getState().connect.status === ConnectionState.connecting) {
 
 /**
  * Get tray icon type based on connection state
- * @param    {ConnectionState} s - connection state
- * @return   {TrayIconType}
- *
  */
-const getIconType = (s) => {
+const getIconType = (s: string): TrayIconType => {
   switch(s) {
-  case ConnectionState.connected: return TrayIconType.secured;
-  case ConnectionState.connecting: return TrayIconType.securing;
-  default: return TrayIconType.unsecured;
+  case ConnectionState.connected: return 'secured';
+  case ConnectionState.connecting: return 'securing';
+  default: return 'unsecured';
   }
 };
 
diff --git a/app/enums.js b/app/enums.js
index 635f215693..8613b52bf8 100644
--- a/app/enums.js
+++ b/app/enums.js
@@ -18,12 +18,3 @@ export const LoginState = new Enum('none', 'connecting', 'failed', 'ok');
  * @property {string} connected     Connected
  */
 export const ConnectionState = new Enum('disconnected', 'connecting', 'connected');
-
-/**
- * Tray icon type
- * @type {TrayIconType}
- * @property {string} unsecured - Initial state (unlocked)
- * @property {string} securing  - Securing network (spinner)
- * @property {string} secured   - Connection is secured (locked)
- */
-export const TrayIconType = new Enum('unsecured', 'securing', 'secured');
diff --git a/app/lib/tray-icon-manager.js b/app/lib/tray-icon-manager.js
index eb242deb6b..73424cb7ef 100644
--- a/app/lib/tray-icon-manager.js
+++ b/app/lib/tray-icon-manager.js
@@ -1,85 +1,57 @@
-import assert from 'assert';
+// @flow
 import path from 'path';
-import { TrayIconType } from '../enums';
 import KeyframeAnimation from './keyframe-animation';
 
-/**
- * Tray icon manager
- *
- * @export
- * @class TrayIconManager
- */
+import type { Tray } from 'electron';
+
+export type TrayIconType = 'unsecured' | 'securing' | 'secured';
+
 export default class TrayIconManager {
 
-  /**
-   * Creates an instance of TrayIconManager.
-   * @param {Electron.Tray} tray
-   *
-   * @memberOf TrayIconManager
-   */
-  constructor(tray) {
-    assert(tray, 'Tray icon cannot be null');
+  _animation: ?KeyframeAnimation;
+  _iconType: TrayIconType;
 
-    const basePath = path.join(path.resolve(__dirname, '..'), 'assets/images/menubar icons');
-    let filePath = path.join(basePath, 'lock-{}.png');
-    let animation = KeyframeAnimation.fromFilePattern(filePath, [1, 9]);
+  constructor(tray: Tray, initialType: TrayIconType) {
+    const animation = this._createAnimation();
     animation.onFrame = (img) => tray.setImage(img);
-    animation.speed = 100;
+    animation.reverse = this._isReverseAnimation(initialType);
+    animation.play({ advanceTo: 'end' });
 
     this._animation = animation;
-    this._iconType = null;
+    this._iconType = initialType;
   }
 
-  /**
-   * Destroy manager
-   * @memberOf TrayIconManager
-   */
   destroy() {
     if(this._animation) {
       this._animation.stop();
       this._animation = null;
     }
-    this._iconType = null;
   }
 
-  /**
-   * Get current icon type
-   * @type {TrayIconType}
-   * @memberOf TrayIconManager
-   */
-  get iconType() {
-    return this._iconType;
+  _createAnimation(): KeyframeAnimation {
+    const basePath = path.join(path.resolve(__dirname, '..'), 'assets/images/menubar icons');
+    const filePath = path.join(basePath, 'lock-{}.png');
+    const animation = KeyframeAnimation.fromFilePattern(filePath, [1, 9]);
+    animation.speed = 100;
+    return animation;
   }
 
-  /**
-   * Set current icon type
-   * @type {TrayIconType}
-   * @memberOf TrayIconManager
-   */
-  set iconType(type) {
-    assert(TrayIconType.isValid(type), 'Invalid icon type');
+  _isReverseAnimation(type: TrayIconType): bool {
+    // unsecured & securing are treated as one
+    return type !== 'secured';
+  }
 
-    // no-op if the same type
-    if(this._iconType === type) {
-      return;
-    }
+  get iconType(): TrayIconType {
+    return this._iconType;
+  }
 
-    let options = { beginFromCurrentState: true };
-    if(this._iconType === null) {
-      options.advanceTo = 'end';
-    }
+  set iconType(type: TrayIconType) {
+    if(this._iconType === type || !this._animation) { return; }
 
-    switch(type) {
-    case TrayIconType.secured:
-      this._animation.reverse = false;
-      break;
-    case TrayIconType.securing:
-    case TrayIconType.unsecured:
-      this._animation.reverse = true;
-      break;
-    }
+    const animation = this._animation;
+    animation.reverse = this._isReverseAnimation(type);
+    animation.play({ beginFromCurrentState: true });
 
-    this._animation.play(options);
     this._iconType = type;
   }
 
diff --git a/app/main.js b/app/main.js
index 7637fc68d6..48102da00f 100644
--- a/app/main.js
+++ b/app/main.js
@@ -178,7 +178,7 @@ const createTray = () => {
   // setup NSEvent monitor to fix inconsistent window.blur
   // see https://github.com/electron/electron/issues/8689
   const { NSEventMonitor, NSEventMask } = require('nseventmonitor');
-  const trayIconManager = new TrayIconManager(tray);
+  const trayIconManager = new TrayIconManager(tray, 'unsecured');
   const macEventMonitor = new NSEventMonitor();
   const eventMask = NSEventMask.leftMouseDown | NSEventMask.rightMouseDown;
 
diff --git a/flow-libs/electron.js.flow b/flow-libs/electron.js.flow
index da5219e3a3..e1157020d5 100644
--- a/flow-libs/electron.js.flow
+++ b/flow-libs/electron.js.flow
@@ -12,7 +12,14 @@ declare module 'electron' {
     height: number;
   }
 
-  // https://github.com/electron/electron/blob/master/docs/api/native-image.md
+  declare type Rectangle = {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+  }
+
+  // http://electron.atom.io/docs/api/native-image
 
   declare class NativeImage {
     isEmpty(): boolean;
@@ -25,4 +32,20 @@ declare module 'electron' {
     createFromBuffer(buffer: Buffer, scaleFactor?: number): NativeImage,
     createFromDataURL(dataURL: string): NativeImage,
   }
+
+  // http://electron.atom.io/docs/api/tray
+
+  declare type TrayEvent = 'click' | 'double-click'
+  declare class Tray {
+    constructor(image: NativeImage | string): void;
+    getBounds(): Rectangle;
+    setHighlightMode(mode: 'selection' | 'always' | 'never'): void;
+    setImage(image: NativeImage | string): void;
+    setPressedImage(image: NativeImage | string): void;
+
+    on(event: TrayEvent, listener: Function): this;
+    once(event: TrayEvent, listener: Function): this;
+    removeEventListener(event: TrayEvent, listener: Function): this;
+  }
+
 }
\ No newline at end of file