Fast app reinstall: Disable install button when no app is selected

Bug: 905125
Change-Id: I76b2e9279ffadcec025a7cb730da7275de0eb367
Reviewed-on: https://chromium-review.googlesource.com/c/1335030Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Yue Cen <rsgingerrs@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608147}

chrome/browser/resources/chromeos/arc_support/recommend_app_list_view.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+let appWindow;
+let appOrigin;
+
 function generateContents(appIcon, appTitle, appPackageName) {
   const doc = document;
   const recommendAppsContainer = doc.getElementById('recommend-apps-container');
@@ -97,6 +100,8 @@ function removeRippleCircle_(e) {
 function toggleCheckStatus_(e) {
   const item = e.currentTarget.parentNode;
   item.classList.toggle('checked');
+
+  sendNumberOfSelectedApps();
 }
 
 function getSelectedPackages() {
@@ -139,3 +144,22 @@ function isConfirmKey_(e) {
   return e.keyCode === 13   // Enter
       || e.keyCode === 32;  // Space
 }
+
+/**
+ * Send the number of selected apps back to the embedding page.
+ */
+function sendNumberOfSelectedApps() {
+  if (appWindow && appOrigin) {
+    const checkedItems = document.querySelectorAll('.checked');
+    appWindow.postMessage(
+        {type: 'NUM_OF_SELECTED_APPS', numOfSelected: checkedItems.length},
+        appOrigin);
+  }
+}
+
+function onMessage_(e) {
+  appWindow = e.source;
+  appOrigin = e.origin;
+}
+
+window.addEventListener('message', onMessage_);

chrome/browser/resources/chromeos/login/screen_recommend_apps.js

@@ -59,6 +59,7 @@ login.createScreen('RecommendAppsScreen', 'recommend-apps', function() {
      */
     ensureInitialized_: function() {
       $('recommend-apps-screen').screen = this;
+      window.addEventListener('message', this.onMessage);
     },
 
     /**
@@ -77,7 +78,7 @@ login.createScreen('RecommendAppsScreen', 'recommend-apps', function() {
     },
 
     setWebview: function(contents) {
-      var appListView = this.getElement_('app-list-view');
+      const appListView = this.getElement_('app-list-view');
       appListView.src =
           'data:text/html;charset=utf-8,' + encodeURIComponent(contents);
     },
@@ -91,21 +92,26 @@ login.createScreen('RecommendAppsScreen', 'recommend-apps', function() {
       // Hide the loading throbber and show the recommend app list.
       this.setThrobberVisible(false);
 
-      var appListView = this.getElement_('app-list-view');
-      var subtitle = this.getElement_('subtitle');
+      const appListView = this.getElement_('app-list-view');
+      const subtitle = this.getElement_('subtitle');
       subtitle.innerText = loadTimeData.getStringF(
           'recommendAppsScreenDescription', appList.length);
       appListView.addEventListener('contentload', () => {
+        appListView.contentWindow.postMessage('initialMessage', '*');
+
         appListView.executeScript({file: 'recommend_app_list_view.js'}, () => {
           appList.forEach(function(app, index) {
-            var generateItemScript = 'generateContents("' + app.icon + '", "' +
+            let generateItemScript = 'generateContents("' + app.icon + '", "' +
                 app.name + '", "' + app.package_name + '");';
-            var generateContents = {code: generateItemScript};
+            const generateContents = {code: generateItemScript};
             appListView.executeScript(generateContents);
           });
-          var addScrollShadowEffectScript = 'addScrollShadowEffect();';
+          const addScrollShadowEffectScript = 'addScrollShadowEffect();';
           appListView.executeScript({code: addScrollShadowEffectScript});
 
+          const getNumOfSelectedAppsScript = 'sendNumberOfSelectedApps();';
+          appListView.executeScript({code: getNumOfSelectedAppsScript});
+
           this.onGenerateContents();
         });
       });
@@ -132,12 +138,15 @@ login.createScreen('RecommendAppsScreen', 'recommend-apps', function() {
      * Handles Install button click.
      */
     onInstall: function() {
-      var appListView = this.getElement_('app-list-view');
-      appListView.executeScript(
-          {code: 'getSelectedPackages();'}, function(result) {
-            console.log(result[0]);
-            chrome.send('recommendAppsInstall', result[0]);
-          });
+      // Only start installation if the button is not disabled.
+      if (!this.getElement_('recommend-apps-install-button').disabled) {
+        const appListView = this.getElement_('app-list-view');
+        appListView.executeScript(
+            {code: 'getSelectedPackages();'}, function(result) {
+              console.log(result[0]);
+              chrome.send('recommendAppsInstall', result[0]);
+            });
+      }
     },
 
     /**
@@ -152,6 +161,18 @@ login.createScreen('RecommendAppsScreen', 'recommend-apps', function() {
       chrome.send('recommendAppsRetry');
     },
 
+    /**
+     * Handles the message sent from the WebView.
+     */
+    onMessage: function(event) {
+      if (event.data.type && (event.data.type === 'NUM_OF_SELECTED_APPS')) {
+        const numOfSelected = event.data.numOfSelected;
+        $('recommend-apps-screen')
+            .getElement('recommend-apps-install-button')
+            .disabled = (numOfSelected === 0);
+      }
+    },
+
     /**
      * This is called to show/hide the loading UI.
      * @param {boolean} visible whether to show loading UI.