Use message passing for showing toast objects

This switches the process of showing a toast message in the UI to be
done based on a core-signal being fired instead of based on variables
changing.

Author: jpevarnek

src/generic_ui/polymer/cloud-install.ts

@@ -2,6 +2,7 @@
 /// <reference path='../../../../third_party/typings/browser.d.ts' />
 /// <reference path='../../../../third_party/polymer/polymer.d.ts' />
 
+import translator = require('../scripts/translator');
 import uproxy_core_api = require('../../interfaces/uproxy_core_api');
 import ui_constants = require('../../interfaces/ui');
 import user = require('../scripts/user');
@@ -129,10 +130,20 @@ Polymer({
       providerName: DEFAULT_PROVIDER
     }).then(() => {
       this.closeOverlays();
-      ui.toastMessage = ui.i18n_t('CLOUD_INSTALL_CANCEL_SUCCESS');
+      this.fire('core-signal', {
+        name: 'show-toast',
+        data: {
+          toastMessage: translator.i18n_t('CLOUD_INSTALL_CANCEL_SUCCESS')
+        }
+      });
     }).catch((e: Error) => {
       this.$.cancelingOverlay.close();
-      ui.toastMessage = ui.i18n_t('CLOUD_INSTALL_CANCEL_FAILURE');
+      this.fire('core-signal', {
+        name: 'show-toast',
+        data: {
+          toastMessage: translator.i18n_t('CLOUD_INSTALL_CANCEL_FAILURE')
+        }
+      });
     });
   },
   select: function(e: Event, d: Object, input: HTMLInputElement) {

src/generic_ui/polymer/contact.ts

@@ -138,7 +138,12 @@ Polymer({
         userId: this.contact.userId
       });
     }).then(() => {
-      this.ui.toastMessage = translator.i18n_t('REMOVE_CLOUD_SERVER_SUCCESS');
+      this.fire('core-signal', {
+        name: 'show-toast',
+        data: {
+          toastMessage: translator.i18n_t('REMOVE_CLOUD_SERVER_SUCCESS')
+        }
+      });
     }).catch((e: Error) => {
       if (!e) {
         return;
@@ -174,7 +179,12 @@ Polymer({
   },
   destroyCloudServerIfNeeded: function() {
     if (this.contact.status === this.UserStatus.CLOUD_INSTANCE_CREATED_BY_LOCAL) {
-      this.ui.toastMessage = translator.i18n_t('REMOVING_UPROXY_CLOUD_STATUS');
+      this.fire('core-signal', {
+        name: 'show-toast',
+        data: {
+          toastMessage: translator.i18n_t('REMOVING_UPROXY_CLOUD_STATUS')
+        }
+      });
       return ui_context.core.cloudUpdate({
         operation: uproxy_core_api.CloudOperationType.CLOUD_DESTROY,
         providerName: DEFAULT_PROVIDER

src/generic_ui/polymer/instance.ts

@@ -5,6 +5,7 @@ import social = require('../../interfaces/social');
 import ui_constants = require('../../interfaces/ui');
 import net = require('../../lib/net/net.types');
 import uproxy_core_api = require('../../interfaces/uproxy_core_api');
+import translator = require('../scripts/translator');
 import user_interface = require('../scripts/ui');
 
 // generic_ui/scripts/ui.ts: UserInterface
@@ -37,8 +38,13 @@ Polymer({
   },
   start: function() {
     if (!this.instance.isOnline) {
-      this.ui.toastMessage = ui.i18n_t('FRIEND_OFFLINE',
-                                       { name: this.user.name });
+      this.fire('core-signal', {
+        name: 'show-toast',
+        data: {
+          toastMessage: translator.i18n_t('FRIEND_OFFLINE',
+                                          { name: this.user.name })
+        }
+      });
       return;
     }
 

src/generic_ui/polymer/root.html

@@ -289,9 +289,10 @@
 
     <core-signals on-core-signal-close-settings="{{ closeSettings }}"></core-signals>
 
-    <!-- Required for cases where an open-dialog signal is sent from the UI via ui.fireSignal -->
     <core-signals on-core-signal-open-dialog="{{ openDialog }}"></core-signals>
 
+    <core-signals on-core-signal-show-toast="{{ showToast }}"></core-signal>
+
     <div id='browserElementContainer' hidden?='{{ui_constants.View.BROWSER_ERROR !== ui.view}}'></div>
 
     <uproxy-copypaste id='copypaste' hidden?='{{ ui_constants.View.COPYPASTE !== ui.view }}'>

src/generic_ui/polymer/root.ts

@@ -179,21 +179,14 @@ Polymer({
   restartProxying: function() {
     this.ui.restartProxying();
   },
-  toastMessageChanged: function(oldVal :string, newVal :string) {
-    if (newVal) {
-      this.toastMessage = newVal;
-      this.unableToShare = ui.unableToShare;
-      this.unableToGet = ui.unableToGet;
-      this.$.toast.show();
-
-      // clear the message so we can pick up on other changes
-      ui.toastMessage = null;
-      ui.unableToShare = false;
-      ui.unableToGet = false;
-    }
+  showToast: function(e: Event, detail: { toastMessage: string, unableToGet?: boolean, unableToShare?: boolean }) {
+    this.toastMessage = detail.toastMessage;
+    this.unableToGet = detail.unableToGet || false;
+    this.unableToShare = detail.unableToShare || false;
+    this.$.toast.show();
   },
   openTroubleshoot: function() {
-    if (this.ui.unableToGet) {
+    if (this.unableToGet) {
       this.troubleshootTitle = ui.i18n_t('UNABLE_TO_GET');
     } else {
       this.troubleshootTitle = ui.i18n_t('UNABLE_TO_SHARE');
@@ -250,7 +243,6 @@ Polymer({
   },
   observe: {
     '$.mainPanel.selected': 'drawerToggled',
-    'ui.toastMessage': 'toastMessageChanged',
     'ui.view': 'viewChanged',
     // Use an observer on model.contacts.shareAccessContacts.trustedUproxy
     // so that we can detect any time elements are added or removed from this

src/generic_ui/scripts/background_ui.ts

@@ -69,14 +69,25 @@ export class BackgroundUi {
   }
 
   /* actual BackgroundUi methods */
-  public fireSignal(signalName: string, data?: Object): void {
+  public fireSignal = (signalName: string, data?: Object): void => {
     this.doInPanel_('fire-signal', { name: signalName, data: data });
   }
 
-  public openDialog(data: ui.DialogDescription): Promise<any> {
+  public openDialog = (data: ui.DialogDescription): Promise<any> => {
     return this.doInPanel_('open-dialog', data, true);
   }
 
+  public showToast = (
+      message: string,
+      unableToGet: boolean = false,
+      unableToShare: boolean = false): void => {
+    return this.fireSignal('show-toast', {
+      message: message,
+      unableToGet: unableToGet,
+      unableToShare: unableToShare
+    });
+  }
+
   private wrapPromise_ = (promise: Promise<any>, promiseId: number) => {
     promise.then((data) => {
       this.panelConnector_.send('promise-response', {

src/generic_ui/scripts/ui.ts

@@ -102,8 +102,6 @@ export class UserInterface implements ui_constants.UiApi {
   /* Getting and sharing */
   public gettingStatus :string = null;
   public sharingStatus :string = null;
-  public unableToGet :boolean = false;
-  public unableToShare :boolean = false;
   public isSharingDisabled :boolean = false;
   public proxyingId: string; // ID of the most recent failed proxying attempt.
   private userCancelledGetAttempt_ :boolean = false;
@@ -123,8 +121,6 @@ export class UserInterface implements ui_constants.UiApi {
   public portControlSupport = uproxy_core_api.PortControlSupport.PENDING;
   public availableVersion :string = null;
 
-  public toastMessage :string = null;
-
   // Please note that this value is updated periodically so may not reflect current reality.
   private isConnectedToCellular_ :boolean = false;
 
@@ -267,10 +263,8 @@ export class UserInterface implements ui_constants.UiApi {
         (info:uproxy_core_api.FailedToGetOrGive) => {
       console.error('proxying attempt ' + info.proxyingId + ' failed (giving)');
 
-      this.toastMessage = this.i18n_t('UNABLE_TO_SHARE_WITH', {
-        name: info.name
-      });
-      this.unableToShare = true;
+      let toastMessage = translator_module.i18n_t('UNABLE_TO_SHARE_WITH', { name: info.name });
+      this.backgroundUi.showToast(toastMessage, false, true);
       this.proxyingId = info.proxyingId;
     });
 
@@ -291,10 +285,8 @@ export class UserInterface implements ui_constants.UiApi {
           if (user.status === social.UserStatus.CLOUD_INSTANCE_CREATED_BY_LOCAL) {
             this.restartServer_('digitalocean');
           } else {
-            this.toastMessage = this.i18n_t('UNABLE_TO_GET_FROM', {
-              name: info.name
-            });
-            this.unableToGet = true;
+            let toastMessage = translator_module.i18n_t('UNABLE_TO_GET_FROM', { name: info.name });
+            this.backgroundUi.showToast(toastMessage, true, false);
           }
         }
       }
@@ -350,12 +342,12 @@ export class UserInterface implements ui_constants.UiApi {
       this.i18n_t('CANCEL'),
       this.i18n_t('RESTART_SERVER')
     ).then(() => {
-      this.toastMessage = this.i18n_t('RESTARTING_SERVER');
+      this.backgroundUi.showToast(translator_module.i18n_t('RESTARTING_SERVER'));
       return this.core.cloudUpdate({
         operation: uproxy_core_api.CloudOperationType.CLOUD_REBOOT,
         providerName: providerName
       }).then(() => {
-        this.toastMessage = this.i18n_t('RESTART_SUCCESS');
+        this.backgroundUi.showToast(translator_module.i18n_t('RESTART_SUCCESS'));
       }).catch((e: Error) => {
         this.showDialog(this.i18n_t('RESTART_FAILURE_TITLE'), this.i18n_t('RESTART_FAILURE_TEXT'));
       });