[CrOS MultiDevice] Update UiPageContainerBehavior's button code.

This CL provides two new pieces of functionality:
(1) UiPages can disable the forward button.
(2) UiPages can prevent forward navigation, even though the button is
    enabled.

This functionality is needed for a future CL which adds a password page.
In that CL, the page's forward button needs to be disabled if no
password has been entered yet, and forward navigation needs to be
prevented if the password entered is incorrect.

Bug: 870098, 824568
Change-Id: Id887c97d4b336d6b44f4aaa567d81e0ed73f9d5d
Reviewed-on: https://chromium-review.googlesource.com/1179268
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Tommy Li <tommycli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#584902}

chrome/browser/resources/chromeos/multidevice_setup/button_bar.html

@@ -30,6 +30,7 @@ on the MultiDeviceSetup.uiMode property. -->
     <paper-button id="forward"
         on-click="onForwardButtonClicked_"
         class="action-button"
+        disabled$="[[forwardButtonDisabled]]"
         hidden$="[[!forwardButtonText]]">
       [[forwardButtonText]]
     </paper-button>

chrome/browser/resources/chromeos/multidevice_setup/button_bar.js

@@ -11,20 +11,22 @@ Polymer({
 
   properties: {
     /**
-     *  Translated text to display on the forward-naviation button.
-     *
-     *  Undefined if the visible page has no forward-navigation button.
-     *
-     *  @type {string|undefined}
+     * Translated text to display on the forward-naviation button. Undefined if
+     * the visible page has no forward-navigation button.
+     * @type {string|undefined}
      */
     forwardButtonText: String,
 
     /**
-     *  Translated text to display on the backward-naviation button.
-     *
-     *  Undefined if the visible page has no backward-navigation button.
-     *
-     *  @type {string|undefined}
+     * Whether the forward button should be disabled.
+     * @type {boolean}
+     */
+    forwardButtonDisabled: {type: Boolean, value: false},
+
+    /**
+     * Translated text to display on the backward-naviation button. undefined if
+     * the visible page has no backward-navigation button.
+     * @type {string|undefined}
      */
     backwardButtonText: String,
   },

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup.html

@@ -35,6 +35,7 @@
       </start-setup-page>
     </iron-pages>
     <button-bar forward-button-text="[[visiblePage_.forwardButtonText]]"
+        forward-button-disabled="[[visiblePage_.forwardButtonDisabled]]"
         backward-button-text="[[visiblePage_.backwardButtonText]]">
     </button-bar>
   </template>

chrome/browser/resources/chromeos/multidevice_setup/multidevice_setup.js

@@ -95,6 +95,15 @@ cr.define('multidevice_setup', function() {
 
     /** @private */
     onForwardNavigationRequested_: function() {
+      this.visiblePage_.getCanNavigateToNextPage().then((canNavigate) => {
+        if (!canNavigate)
+          return;
+        this.navigateForward_();
+      });
+    },
+
+    /** @private */
+    navigateForward_: function() {
       switch (this.visiblePageName_) {
         case PageName.FAILURE:
           this.visiblePageName_ = PageName.START;

chrome/browser/resources/chromeos/multidevice_setup/ui_page_container_behavior.js

@@ -49,6 +49,12 @@ const UiPageContainerBehaviorImpl = {
       computed: 'computeLocalizedText_(forwardButtonTextId)',
     },
 
+    /**
+     * Whether the forward button should be disabled.
+     * @type {boolean}
+     */
+    forwardButtonDisabled: {type: Boolean, value: false},
+
     /**
      * Translated text to display on the backward-naviation button.
      *
@@ -83,6 +89,19 @@ const UiPageContainerBehaviorImpl = {
     },
   },
 
+  /**
+   * Returns a promise which always resolves and returns a boolean representing
+   * whether it should be possible to navigate forward. This function is called
+   * before forward navigation is requested; if false is returned, the active
+   * page does not change.
+   * @return {!Promise}
+   */
+  getCanNavigateToNextPage: function() {
+    return new Promise((resolve) => {
+      resolve(true /* canNavigate */);
+    });
+  },
+
   /**
    * @param {string} textId Key for the localized string to appear on a
    *     button.

chrome/test/data/webui/multidevice_setup/integration_test.js

@@ -24,7 +24,6 @@ cr.define('multidevice_setup', () => {
        */
       let backwardButton;
 
-      const FAILURE = 'setup-failed-page';
       const SUCCESS = 'setup-succeeded-page';
       const START = 'start-setup-page';
 
@@ -40,27 +39,16 @@ cr.define('multidevice_setup', () => {
             multiDeviceSetupElement.$$('button-bar /deep/ #backward');
       });
 
-      // From SetupFailedPage
-
-      test('SetupFailedPage backward button closes UI', done => {
-        multiDeviceSetupElement.addEventListener('setup-exited', () => done());
-        multiDeviceSetupElement.visiblePageName_ = FAILURE;
-        backwardButton.click();
-      });
-
-      test('SetupFailedPage forward button goes to start page', () => {
-        multiDeviceSetupElement.visiblePageName_ = FAILURE;
-        forwardButton.click();
+      /** @param {string} visiblePageName */
+      function setVisiblePage(visiblePageName) {
+        multiDeviceSetupElement.visiblePageName_ = visiblePageName;
         Polymer.dom.flush();
-        assertEquals(
-            multiDeviceSetupElement.$$('iron-pages > .iron-selected').is,
-            START);
-      });
+      }
 
       // From SetupSucceededPage
 
       test('SetupSucceededPage forward button closes UI', done => {
-        multiDeviceSetupElement.visiblePageName_ = SUCCESS;
+        setVisiblePage(SUCCESS);
         multiDeviceSetupElement.addEventListener('setup-exited', () => done());
         forwardButton.click();
       });
@@ -74,7 +62,7 @@ cr.define('multidevice_setup', () => {
           done();
         });
 
-        multiDeviceSetupElement.visiblePageName_ = START;
+        setVisiblePage(START);
         multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.OOBE;
 
@@ -89,7 +77,7 @@ cr.define('multidevice_setup', () => {
               done();
             });
 
-            multiDeviceSetupElement.visiblePageName_ = START;
+            setVisiblePage(START);
             multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
                 true;
             multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.OOBE;
@@ -102,7 +90,7 @@ cr.define('multidevice_setup', () => {
       test('StartSetupPage backward button closes UI (post-OOBE)', done => {
         multiDeviceSetupElement.addEventListener('setup-exited', () => done());
 
-        multiDeviceSetupElement.visiblePageName_ = START;
+        setVisiblePage(START);
         multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed = true;
         multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;
 
@@ -120,7 +108,7 @@ cr.define('multidevice_setup', () => {
                     done();
                 });
 
-            multiDeviceSetupElement.visiblePageName_ = START;
+            setVisiblePage(START);
             multiDeviceSetupElement.multideviceSetup.shouldSetHostSucceed =
                 true;
             multiDeviceSetupElement.uiMode = multidevice_setup.UiMode.POST_OOBE;