style(GUI): use a OS dialog to show the "exit while flashing" warning (#1070)

For better OS integration purposes.

This commit also fixes a bug where the dialog would be shown for some
milliseconds even if the application is not flashing.

Change-Type: minor
Changelog-Entry: Use a OS dialog to show the "exit while flashing" warning.
Signed-off-by: Juan Cruz Viotti <jviotti@openmailbox.org>

lib/gui/app.js

@@ -62,6 +62,7 @@ const app = angular.module('Etcher', [
   require('./os/window-progress/window-progress'),
   require('./os/open-external/open-external'),
   require('./os/dropzone/dropzone'),
+  require('./os/dialog/dialog'),
 
   // Utils
   require('./utils/manifest-bind/manifest-bind')
@@ -149,26 +150,24 @@ app.run(($timeout, DriveScannerService, DrivesModel, ErrorService, DriveSelector
   DriveScannerService.start();
 });
 
-app.run(($window, WarningModalService, ErrorService, FlashStateModel) => {
+app.run(($window, WarningModalService, ErrorService, FlashStateModel, OSDialogService) => {
   let popupExists = false;
 
   $window.addEventListener('beforeunload', (event) => {
-
-    // Don't close window while flashing
-    if (FlashStateModel.isFlashing()) {
-      event.returnValue = false;
-    }
-
-    if (popupExists) {
+    if (!FlashStateModel.isFlashing() || popupExists) {
       return;
     }
 
+    // Don't close window while flashing
+    event.returnValue = false;
+
     // Don't open any more popups
     popupExists = true;
 
-    WarningModalService.display({
+    return OSDialogService.showWarning({
       confirmationLabel: 'Yes, quit',
       rejectionLabel: 'Cancel',
+      title: 'Are you sure you want to close Etcher?',
       description: messages.warning.exitWhileFlashing()
     }).then((confirmed) => {
       if (confirmed) {

lib/gui/os/dialog/services/dialog.js

@@ -22,6 +22,13 @@ const imageStream = require('../../../../image-stream');
 
 module.exports = function($q, SupportedFormatsModel) {
 
+  /**
+   * @summary Current renderer BrowserWindow instance
+   * @type {Object}
+   * @private
+   */
+  const currentWindow = electron.remote.getCurrentWindow();
+
   /**
    * @summary Open an image selection dialog
    * @function
@@ -40,7 +47,6 @@ module.exports = function($q, SupportedFormatsModel) {
    */
   this.selectImage = () => {
     return $q((resolve, reject) => {
-      const currentWindow = electron.remote.getCurrentWindow();
       electron.remote.dialog.showOpenDialog(currentWindow, {
 
         // This variable is set when running in GNU/Linux from
@@ -81,6 +87,50 @@ module.exports = function($q, SupportedFormatsModel) {
     });
   };
 
+  /**
+   * @summary Open a warning dialog
+   * @function
+   * @public
+   *
+   * @param {Object} options - options
+   * @param {String} options.title - dialog title
+   * @param {String} options.description - dialog description
+   * @param {String} options.confirmationLabel - confirmation label
+   * @param {String} options.rejectionLabel - rejection label
+   * @fulfil {Boolean} - whether the dialog was confirmed or not
+   * @returns {Promise};
+   *
+   * @example
+   * OSDialogService.showWarning({
+   *   title: 'This is a warning',
+   *   description: 'Are you sure you want to continue?',
+   *   confirmationLabel: 'Yes, continue',
+   *   rejectionLabel: 'Cancel'
+   * }).then((confirmed) => {
+   *   if (confirmed) {
+   *     console.log('The dialog was confirmed');
+   *   }
+   * });
+   */
+  this.showWarning = (options) => {
+    return $q((resolve) => {
+      electron.remote.dialog.showMessageBox(currentWindow, {
+        type: 'warning',
+        buttons: [
+          options.confirmationLabel,
+          options.rejectionLabel
+        ],
+        defaultId: 1,
+        cancelId: 1,
+        title: 'Attention',
+        message: options.title,
+        detail: options.description
+      }, (response) => {
+        return resolve(response === 0);
+      });
+    });
+  };
+
   /**
    * @summary Show error dialog for an Error instance
    * @function

lib/shared/messages.js

@@ -49,9 +49,8 @@ module.exports = {
     ].join(' ')),
 
     exitWhileFlashing: _.template([
-      'You are currently flashing a drive. Closing Etcher may leave',
-      'your drive in an unusable state.\n\n',
-      'Are you sure you want to close Etcher?'
+      'You are currently flashing a drive.',
+      'Closing Etcher may leave your drive in an unusable state.'
     ].join(' '))
 
   },