[Files.app] Refinement events of suggest app dialog

Major changes.
- Add animation on laading
- Add a spinner on loading
- Handle failure of widget loading
- Refine the internal states of SuggestAppDialog

BUG=240152
TEST=manual
R=hirono@chromium.org

Review URL: https://codereview.chromium.org/23717007

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@220553 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/file_manager/css/file_manager.css

@@ -1860,6 +1860,11 @@ menuitem#thumbnail-view[lead]:not([disabled]) {
 #suggest-app-dialog #webview-container {
   border-bottom: solid 2px #bbb;
   border-top: solid 2px #bbb;
+  transition: height 200ms ease;
+}
+
+#suggest-app-dialog #webview-container:not(.loaded) webview {
+  visibility: hidden;
 }
 
 #suggest-app-dialog .cr-dialog-buttons,

chrome/browser/resources/file_manager/js/cws_container_client.js

@@ -35,6 +35,19 @@ CWSContainerClient.prototype = {
   __proto__: cr.EventTarget.prototype
 };
 
+/**
+ * Events CWSContainerClient fires
+ *
+ * @enum {string}
+ * @const
+ */
+CWSContainerClient.Events = {
+  LOADED: 'CWSContainerClient.Events.LOADED',
+  LOAD_FAILED: 'CWSContainerClient.Events.LOAD_FAILED',
+  REQUEST_INSTALL: 'CWSContainerClient.Events.REQUEST_INSTALL'
+};
+Object.freeze(CWSContainerClient.Events);
+
 /**
  * Handles messages from the widget
  * @param {Event} event Message event.
@@ -47,7 +60,10 @@ CWSContainerClient.prototype.onMessage_ = function(event) {
   var data = event.data;
   switch (data['message']) {
     case 'widget_loaded':
-      // Do nothing. Waits for user action and next message.
+      this.onWidgetLoaded_();
+      break;
+    case 'widget_load_failed':
+      this.onWidgetLoadFailed_();
       break;
     case 'before_install':
       this.sendInstallRequest_(data['item_id']);
@@ -69,13 +85,29 @@ CWSContainerClient.prototype.onLoadStop_ = function(event) {
   }
 };
 
+/**
+ * Called when the widget is loaded successfully.
+ * @private
+ */
+CWSContainerClient.prototype.onWidgetLoaded_ = function() {
+  cr.dispatchSimpleEvent(this, CWSContainerClient.Events.LOADED);
+};
+
+/**
+ * Called when the widget is failed to load.
+ * @private
+ */
+CWSContainerClient.prototype.onWidgetLoadFailed_ = function() {
+  this.sendWidgetLoadFailed_();
+};
+
 /**
  * Called when receiving the 'loadabort' event from <webview>.
  * @param {Event} event Message event.
  * @private
  */
 CWSContainerClient.prototype.onLoadAbort_ = function(event) {
-  this.sendWebviewLoadAbort_();
+  this.sendWidgetLoadFailed_();
 };
 
 /**
@@ -92,11 +124,11 @@ CWSContainerClient.prototype.onInstallCompleted = function(result, itemId) {
 };
 
 /**
- * Send the abort event to the suggest-app dialog.
+ * Send the fail message to the suggest-app dialog.
  * @private
  */
-CWSContainerClient.prototype.sendWebviewLoadAbort_ = function() {
-  this.dispatchEvent(new cr.Event('webview-load-abort'));
+CWSContainerClient.prototype.sendWidgetLoadFailed_ = function() {
+  cr.dispatchSimpleEvent(this, CWSContainerClient.Events.LOAD_FAILED);
 };
 
 /**
@@ -106,7 +138,7 @@ CWSContainerClient.prototype.sendWebviewLoadAbort_ = function() {
  * @private
  */
 CWSContainerClient.prototype.sendInstallRequest_ = function(itemId) {
-  var event = new cr.Event('install-request');
+  var event = new cr.Event(CWSContainerClient.Events.REQUEST_INSTALL);
   event.itemId = itemId;
   this.dispatchEvent(event);
 };

chrome/browser/resources/file_manager/js/file_manager.js

@@ -2355,9 +2355,9 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
               tasks.init(urls, mimeTypes);
               tasks.executeDefault();
             }.bind(this),
-            // Failure callback.
-            function() {},
             // Cancelled callback.
+            function() {},
+            // Failure callback.
             showAlert);
         }.bind(this));
       }
@@ -2397,11 +2397,17 @@ var BOTTOM_MARGIN_FOR_PREVIEW_PANEL_PX = 52;
       var mime = props[0].contentMimeType;
       this.suggestAppsDialog.show(
           extension, mime,
-          function(installed) {
-            if (installed)
-              onSuccess();
-            else
-              onCancelled();
+          function(result) {
+            switch (result) {
+              case SuggestAppsDialog.Result.INSTALL_SUCCESSFUL:
+                onSuccess();
+                break;
+              case SuggestAppsDialog.Result.FAILED:
+                onFailure();
+                break;
+              default:
+                onCancelled();
+            }
           });
     }.bind(this));
   };