Show an error dialog if Chrome Web Store widget fails to load

BUG=477106

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

Cr-Commit-Position: refs/heads/master@{#330106}

components/chrome_apps/webstore_widget/app/main.js

@@ -40,7 +40,8 @@ var defaultStrings = {
   'LINK_TO_WEBSTORE': '[LOCALIZE ME] Learn more...',
   'INSTALLATION_FAILED_MESSAGE': '[LOCALIZE ME] Installation failed!',
   'OK_BUTTON': '[LOCALIZE ME] OK',
-  'TITLE_PRINTER_PROVIDERS': '[LOCALIZE ME] Select app for your printer'
+  'TITLE_PRINTER_PROVIDERS': '[LOCALIZE ME] Select app for your printer',
+  'DEFAULT_ERROR_MESSAGE': '[LOCALIZE ME] Failure'
 };
 
 /**
@@ -121,7 +122,7 @@ function createPlatformDelegate(strings) {
 function initializeTopbarButtons() {
   $('close-button').addEventListener('click', function(e) {
     e.preventDefault();
-    chrome.app.window.current().close();
+    closeAppWindow();
   });
 
   $('close-button').addEventListener('mousedown', function(e) {
@@ -138,6 +139,27 @@ function initializeTopbarButtons() {
   });
 }
 
+/**
+ * @param {!CWSWidgetContainer.Result} result The result reported by the widget.
+ */
+function showWidgetResult(result) {
+  // TODO(tbarzic): Add some UI to show on success.
+  if (result != CWSWidgetContainer.Result.FAILED) {
+    closeAppWindow();
+    return;
+  }
+
+  var dialog = new CWSWidgetContainerErrorDialog($('widget-container-root'));
+  dialog.show(getString('DEFAULT_ERROR_MESSAGE'),
+              closeAppWindow,
+              closeAppWindow);
+}
+
+/** Closes the current app window. */
+function closeAppWindow() {
+  chrome.app.window.current().close();
+}
+
 window.addEventListener('DOMContentLoaded', function() {
   initializeTopbarButtons();
 
@@ -176,12 +198,15 @@ window.addEventListener('DOMContentLoaded', function() {
         })
         /** @param {!CWSWidgetContainer.ResolveReason} reason */
         .then(function(reason) {
-          chrome.app.window.current().close();
+          if (reason != CWSWidgetContainer.ResolveReason.DONE)
+            return;
+
+          var result = widgetContainer.finalizeAndGetResult();
+          showWidgetResult(result.result);
         })
         /** @param {*} error */
         .catch(function(error) {
-          // TODO(tbarzic): Add error UI.
-          console.error(error);
+          showWidgetResult(CWSWidgetContainer.Result.FAILED);
         });
   });
 });

components/chrome_apps/webstore_widget/cws_widget/cws_widget_container.js

@@ -369,6 +369,8 @@ CWSWidgetContainer.prototype.ready = function() {
       return;
     }
 
+    this.spinnerLayerController_.setVisible(true);
+
     this.metricsRecorder_.recordShowDialog();
     this.metricsRecorder_.startLoad();
 
@@ -379,6 +381,7 @@ CWSWidgetContainer.prototype.ready = function() {
       this.accessToken_ = accessToken;
       resolve();
     }.bind(this), function(error) {
+      this.spinnerLayerController_.setVisible(false);
       this.state_ = CWSWidgetContainer.State.UNINITIALIZED;
       reject('Failed to get Web Store access token: ' + error);
     }.bind(this));
@@ -823,8 +826,7 @@ CWSWidgetContainer.SpinnerLayerController.prototype.setVisible =
   this.visible_ = visible;
 
   // Spinner should be shown during transition.
-  if (!this.spinnerLayer_.classList.contains('cws-widget-show-spinner'))
-    this.spinnerLayer_.classList.add('cws-widget-show-spinner');
+  this.spinnerLayer_.classList.toggle('cws-widget-show-spinner', true);
 
   if (this.visible_) {
     this.spinnerLayer_.focus();