[CrOS MultiDevice] Update setup flow buttons

Update the multi-device setup flow button bar to include the
following buttons: Back, Cancel, Forward. Set the buttons
on each page to conform to the following specs (sans padding):
https://drive.google.com/file/d/1UqHV67OrdGT0_G0L98nV5IVr26OkHu9F/view.

Screenshots with this patch applied:
start screen: https://drive.google.com/open?id=1QlWKjesaBpt0ZtNQ_vONBqu1czUWiezz
start screen (OOBE): https://drive.google.com/open?id=1kh9UNYjLaSbP-zE0U89sniZSb9Sbhk8fMw
password screen: https://drive.google.com/open?id=1olKePztZ9pqxPHupVCdrwEBZ1pyfzLA_
success screen: https://drive.google.com/open?id=1zpZfnowdpOvge8nteqsjBHuUin_I9HgW

Bug: 889574
Change-Id: I7a0834b58b6f2458e5ab6641aa5b323cb5fc32fe
Tested: Manual; ./out/Default/browser_tests --gtest_filter=*MultiDevice*
Reviewed-on: https://chromium-review.googlesource.com/c/1254760Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Josh Nohle <nohle@chromium.org>
Cr-Commit-Position: refs/heads/master@{#599737}

chrome/browser/resources/chromeos/login/multidevice_setup_first_run.html

@@ -86,9 +86,9 @@
         on-setup-exited="onExitRequested_"
         forward-button-text="{{forwardButtonText_}}"
         forward-button-disabled="{{forwardButtonDisabled_}}"
-        backward-button-text="{{backwardButtonText_}}">
-      <oobe-text-button slot="backward-button">
-        <div>[[backwardButtonText_]]</div>
+        cancel-button-text="{{cancelButtonText_}}">
+      <oobe-text-button slot="cancel-button">
+        <div>[[cancelButtonText_]]</div>
       </oobe-text-button>
       <oobe-next-button id="next-button" slot="forward-button"
           disabled$="[[forwardButtonDisabled_]]">

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

@@ -75,10 +75,10 @@ cr.define('multidevice_setup', function() {
       },
 
       /**
-       * Text to be shown on the backward navigation button.
+       * Text to be shown on the cancel button.
        * @private {string|undefined}
        */
-      backwardButtonText_: {
+      cancelButtonText_: {
         type: String,
         value: '',
       },

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

@@ -9,6 +9,7 @@
   <template>
     <style include="multidevice-setup-shared">
       #backward-button,
+      #cancel-button,
       #forward-button {
         align-items: center;
         display: flex;
@@ -21,11 +22,16 @@
         on-forward-button-focus-requested="onForwardButtonFocusRequested_"
         forward-button-text="{{forwardButtonText_}}"
         forward-button-disabled="{{forwardButtonDisabled_}}"
+        cancel-button-text="{{cancelButtonText_}}"
         backward-button-text="{{backwardButtonText_}}">
       <paper-button id="backward-button"
           slot="backward-button" class="cancel-button">
         [[backwardButtonText_]]
       </paper-button>
+      <paper-button id="cancel-button"
+          slot="cancel-button" class="cancel-button">
+        [[cancelButtonText_]]
+      </paper-button>
       <paper-button id="forward-button"
           slot="forward-button" class="action-button"
           disabled$="[[forwardButtonDisabled_]]">

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

@@ -30,6 +30,15 @@ Polymer({
       value: false,
     },
 
+    /**
+     * Text to be shown on the cancel navigation button.
+     * @private {string|undefined}
+     */
+    cancelButtonText_: {
+      type: String,
+      value: '',
+    },
+
     /**
      * Text to be shown on the backward navigation button.
      * @private {string|undefined}

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

@@ -27,6 +27,9 @@ MultiDeviceSetupBrowserTest.prototype = {
 
   extraLibraries: PolymerTest.getLibraries(ROOT_PATH).concat([
     '../test_browser_proxy.js',
+    '../fake_chrome_event.js',  // Necessary for fake_quick_unlock_private.js
+    '../settings/fake_quick_unlock_private.js',
+    '../settings/test_util.js',
     'integration_test.js',
     'setup_succeeded_page_test.js',
     'start_setup_page_test.js',

ui/webui/resources/cr_components/chromeos/multidevice_setup/button_bar.html

@@ -7,15 +7,19 @@
     <style include="multidevice-setup-shared">
       :host {
         display: flex;
-        justify-content: flex-end;
       }
     </style>
-    <div class="flex"></div>
     <div id="backward"
         on-click="onBackwardButtonClicked_"
         hidden$="[[backwardButtonHidden]]">
       <slot name="backward-button"></slot>
     </div>
+    <div class="flex"></div>
+    <div id="cancel"
+        on-click="onCancelButtonClicked_"
+        hidden$="[[cancelButtonHidden]]">
+      <slot name="cancel-button"></slot>
+    </div>
     <div id="forward"
         on-click="onForwardButtonClicked_"
         hidden$="[[forwardButtonHidden]]">

ui/webui/resources/cr_components/chromeos/multidevice_setup/button_bar.js

@@ -13,13 +13,19 @@ Polymer({
     /** Whether the forward button should be hidden. */
     forwardButtonHidden: {
       type: Boolean,
-      value: false,
+      value: true,
+    },
+
+    /** Whether the cancel button should be hidden. */
+    cancelButtonHidden: {
+      type: Boolean,
+      value: true,
     },
 
     /** Whether the backward button should be hidden. */
     backwardButtonHidden: {
       type: Boolean,
-      value: false,
+      value: true,
     },
   },
 
@@ -28,6 +34,11 @@ Polymer({
     this.fire('forward-navigation-requested');
   },
 
+  /** @private */
+  onCancelButtonClicked_: function() {
+    this.fire('cancel-requested');
+  },
+
   /** @private */
   onBackwardButtonClicked_: function() {
     this.fire('backward-navigation-requested');

ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html

@@ -54,8 +54,10 @@
     </iron-pages>
     <div class="flex"></div>
     <button-bar forward-button-hidden="[[!forwardButtonText]]"
-        backward-button-hidden="[[!backwardButtonText]]">
+        backward-button-hidden="[[!backwardButtonText]]"
+        cancel-button-hidden="[[!cancelButtonText]]">
       <slot name="backward-button" slot="backward-button"></slot>
+      <slot name="cancel-button" slot="cancel-button"></slot>
       <slot name="forward-button" slot="forward-button"></slot>
     </button-bar>
   </template>

ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js

@@ -45,6 +45,16 @@ cr.define('multidevice_setup', function() {
         notify: true
       },
 
+      /**
+       * Text to be shown on the cancel button.
+       * @type {string|undefined}
+       */
+      cancelButtonText: {
+        type: String,
+        computed: 'getCancelButtonText_(visiblePage_)',
+        notify: true,
+      },
+
       /**
        * Text to be shown on the backward navigation button.
        * @type {string|undefined}
@@ -63,7 +73,7 @@ cr.define('multidevice_setup', function() {
       visiblePageName_: {
         type: String,
         value: PageName.START,
-        notify: true,  // For testing purporses only.
+        notify: true,  // For testing purposes only.
       },
 
       /**
@@ -116,6 +126,7 @@ cr.define('multidevice_setup', function() {
 
     listeners: {
       'backward-navigation-requested': 'onBackwardNavigationRequested_',
+      'cancel-requested': 'onCancelRequested_',
       'forward-navigation-requested': 'onForwardNavigationRequested_',
     },
 
@@ -149,12 +160,24 @@ cr.define('multidevice_setup', function() {
     },
 
     /** @private */
-    onBackwardNavigationRequested_: function() {
+    onCancelRequested_: function() {
       this.exitSetupFlow_();
     },
 
+    /** @private */
+    onBackwardNavigationRequested_: function() {
+      // The back button is only visible on the password page.
+      assert(this.visiblePageName_ == PageName.PASSWORD);
+
+      this.$$('password-page').clearPasswordTextInput();
+      this.visiblePageName_ = PageName.START;
+    },
+
     /** @private */
     onForwardNavigationRequested_: function() {
+      if (this.forwardButtonDisabled)
+        return;
+
       this.visiblePage_.getCanNavigateToNextPage().then((canNavigate) => {
         if (!canNavigate)
           return;
@@ -235,6 +258,17 @@ cr.define('multidevice_setup', function() {
           this.passwordPageForwardButtonDisabled_;
     },
 
+    /**
+     * @return {string|undefined} The cancel button text, which is undefined
+     *     if no button should be displayed.
+     * @private
+     */
+    getCancelButtonText_: function() {
+      if (!this.visiblePage_)
+        return undefined;
+      return this.visiblePage_.cancelButtonText;
+    },
+
     /**
      * @return {string|undefined} The backward button text, which is undefined
      *     if no button should be displayed.
@@ -244,7 +278,6 @@ cr.define('multidevice_setup', function() {
       if (!this.visiblePage_)
         return undefined;
       return this.visiblePage_.backwardButtonText;
-
     },
 
     /**

ui/webui/resources/cr_components/chromeos/multidevice_setup/password_page.js

@@ -30,11 +30,17 @@ Polymer({
     },
 
     /** Overridden from UiPageContainerBehavior. */
-    backwardButtonTextId: {
+    cancelButtonTextId: {
       type: String,
       value: 'cancel',
     },
 
+    /** Overridden from UiPageContainerBehavior. */
+    backwardButtonTextId: {
+      type: String,
+      value: 'back',
+    },
+
     /** Overridden from UiPageContainerBehavior. */
     headerId: {
       type: String,

ui/webui/resources/cr_components/chromeos/multidevice_setup/setup_failed_page.js

@@ -13,11 +13,17 @@ Polymer({
     },
 
     /** Overridden from UiPageContainerBehavior. */
-    backwardButtonTextId: {
+    cancelButtonTextId: {
       type: String,
       value: 'cancel',
     },
 
+    /** Overridden from UiPageContainerBehavior. */
+    backwardButtonTextId: {
+      type: String,
+      value: 'back',
+    },
+
     /** Overridden from UiPageContainerBehavior. */
     headerId: {
       type: String,

ui/webui/resources/cr_components/chromeos/multidevice_setup/start_setup_page.js

@@ -13,7 +13,7 @@ Polymer({
     },
 
     /** Overridden from UiPageContainerBehavior. */
-    backwardButtonTextId: {
+    cancelButtonTextId: {
       type: String,
       value: 'cancel',
     },

ui/webui/resources/cr_components/chromeos/multidevice_setup/ui_page_container_behavior.js

@@ -14,6 +14,15 @@ const UiPageContainerBehaviorImpl = {
      */
     forwardButtonTextId: String,
 
+    /**
+     * ID for cancel button label, which must be translated for display.
+     *
+     * Undefined if the visible page has no cancel button.
+     *
+     * @type {string|undefined}
+     */
+    cancelButtonTextId: String,
+
     /**
      * ID for backward button label, which must be translated for display.
      *
@@ -49,6 +58,18 @@ const UiPageContainerBehaviorImpl = {
       computed: 'computeLocalizedText_(forwardButtonTextId)',
     },
 
+    /**
+     * Translated text to display on the cancel button.
+     *
+     * Undefined if the visible page has no cancel button.
+     *
+     * @type {string|undefined}
+     */
+    cancelButtonText: {
+      type: String,
+      computed: 'computeLocalizedText_(cancelButtonTextId)',
+    },
+
     /**
      * Translated text to display on the backward-naviation button.
      *