[CrOS MultiDevice] Refactor button usage in MultiDevice setup flow.

Before this change, buttons resided directly within the top-level
<multidevice-setup> element. However, once we integrate this flow with
OOBE, special OOBE-specific buttons must be used, so it is not possible
to embed these buttons directly.

This CL adds <slot>s for both the forward and backward buttons, which
allow each implementation to pass in its own button type. For the
current flow, normal <paper-button>s are passed. A future CL will pass
OOBE-specific buttons when appropriate.

Bug: 884058
Change-Id: I062bfaa95454e51c0aa6ce19c16ef1a0bca8ab07
Reviewed-on: https://chromium-review.googlesource.com/1237533
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#595278}

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

@@ -2,13 +2,34 @@
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html">
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="post_oobe_delegate.html">
 
 <dom-module id="multidevice-setup-post-oobe">
   <template>
-    <style include="multidevice-setup-shared"></style>
+    <style include="multidevice-setup-shared">
+      #backward-button,
+      #forward-button {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        text-transform: none;
+      }
+    </style>
     <multidevice-setup delegate="[[delegate_]]"
-        on-setup-exited="onExitRequested_">
+        on-setup-exited="onExitRequested_"
+        forward-button-text="{{forwardButtonText_}}"
+        forward-button-disabled="{{forwardButtonDisabled_}}"
+        backward-button-text="{{backwardButtonText_}}">
+      <paper-button id="backward-button"
+          slot="backward-button" class="cancel-button">
+        [[backwardButtonText_]]
+      </paper-button>
+      <paper-button id="forward-button"
+          slot="forward-button" class="action-button"
+          disabled$="[[forwardButtonDisabled_]]">
+        [[forwardButtonText_]]
+      </paper-button>
     </multidevice-setup>
   </template>
   <script src="multidevice_setup_post_oobe.js">

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

@@ -11,6 +11,33 @@ Polymer({
   properties: {
     /** @private {!multidevice_setup.MultiDeviceSetupDelegate} */
     delegate_: Object,
+
+    /**
+     * Text to be shown on the forward navigation button.
+     * @private {string|undefined}
+     */
+    forwardButtonText: {
+      type: String,
+      value: '',
+    },
+
+    /**
+     * Whether the forward button should be disabled.
+     * @private
+     */
+    forwardButtonDisabled_: {
+      type: Boolean,
+      value: false,
+    },
+
+    /**
+     * Text to be shown on the backward navigation button.
+     * @private {string|undefined}
+     */
+    backwardButtonText_: {
+      type: String,
+      value: '',
+    },
   },
 
   /** @override */

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup_shared_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
-<!-- TODO(jordynass): Implement OOBE style and make the visible style dependent
-on the MultiDeviceSetup.uiMode property. -->
 <dom-module id="button-bar">
   <template>
     <style include="multidevice-setup-shared">
       :host {
-        @apply --layout-end-justified;
-        @apply --layout-horizontal;
-      }
-
-      paper-button {
-        @apply --layout-center-center;
-        text-transform: none;
+        display: flex;
+        justify-content: flex-end;
       }
     </style>
     <div class="flex"></div>
-    <paper-button id="backward"
+    <div id="backward"
         on-click="onBackwardButtonClicked_"
-        class="cancel-button"
-        hidden$="[[!backwardButtonText]]">
-      [[backwardButtonText]]
-    </paper-button>
-    <paper-button id="forward"
+        hidden$="[[backwardButtonHidden]]">
+      <slot name="backward-button"></slot>
+    </div>
+    <div id="forward"
         on-click="onForwardButtonClicked_"
-        class="action-button"
-        disabled$="[[forwardButtonDisabled]]"
-        hidden$="[[!forwardButtonText]]">
-      [[forwardButtonText]]
+        hidden$="[[forwardButtonHidden]]">
+      <slot name="forward-button"></slot>
     </paper-button>
   </template>
   <script src="chrome://resources/cr_components/chromeos/multidevice_setup/button_bar.js">

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

@@ -10,30 +10,16 @@ Polymer({
   is: 'button-bar',
 
   properties: {
-    /**
-     * Translated text to display on the forward-naviation button. Undefined if
-     * the visible page has no forward-navigation button.
-     * @type {string|undefined}
-     */
-    forwardButtonText: {
-      type: String,
-      value: '',
+    /** Whether the forward button should be hidden. */
+    forwardButtonHidden: {
+      type: Boolean,
+      value: false,
     },
 
-    /**
-     * 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: {
-      type: String,
-      value: '',
+    /** Whether the backward button should be hidden. */
+    backwardButtonHidden: {
+      type: Boolean,
+      value: false,
     },
   },
 

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

@@ -53,9 +53,10 @@
       </start-setup-page>
     </iron-pages>
     <div class="flex"></div>
-    <button-bar forward-button-text="[[visiblePage_.forwardButtonText]]"
-        forward-button-disabled="[[forwardButtonDisabled_]]"
-        backward-button-text="[[visiblePage_.backwardButtonText]]">
+    <button-bar forward-button-hidden="[[!forwardButtonText]]"
+        backward-button-hidden="[[!backwardButtonText]]">
+      <slot name="backward-button" slot="backward-button"></slot>
+      <slot name="forward-button" slot="backward-button"></slot>
     </button-bar>
   </template>
   <script src="chrome://resources/cr_components/chromeos/multidevice_setup/multidevice_setup.js">

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

@@ -25,6 +25,34 @@ cr.define('multidevice_setup', function() {
        */
       delegate: Object,
 
+      /**
+       * Text to be shown on the forward navigation button.
+       * @type {string|undefined}
+       */
+      forwardButtonText: {
+        type: String,
+        computed: 'getForwardButtonText_(visiblePage_)',
+        notify: true,
+      },
+
+      /** Whether the forward button should be disabled. */
+      forwardButtonDisabled: {
+        type: Boolean,
+        computed: 'shouldForwardButtonBeDisabled_(' +
+            'passwordPageForwardButtonDisabled_, visiblePageName_)',
+        notify: true
+      },
+
+      /**
+       * Text to be shown on the backward navigation button.
+       * @type {string|undefined}
+       */
+      backwardButtonText: {
+        type: String,
+        computed: 'getBackwardButtonText_(visiblePage_)',
+        notify: true,
+      },
+
       /**
        * Element name of the currently visible page.
        *
@@ -77,16 +105,6 @@ cr.define('multidevice_setup', function() {
        */
       passwordPageForwardButtonDisabled_: Boolean,
 
-      /**
-       * Whether the forward button should be disabled.
-       * @private {boolean}
-       */
-      forwardButtonDisabled_: {
-        type: Boolean,
-        computed: 'shouldForwardButtonBeDisabled_(' +
-            'passwordPageForwardButtonDisabled_, visiblePageName_)',
-      },
-
       /**
        * Interface to the MultiDeviceSetup Mojo service.
        * @private {!chromeos.multideviceSetup.mojom.MultiDeviceSetupImpl}
@@ -188,6 +206,17 @@ cr.define('multidevice_setup', function() {
       this.onForwardNavigationRequested_();
     },
 
+    /**
+     * @return {string|undefined} The forward button text, which is undefined
+     *     if no button should be displayed.
+     * @private
+     */
+    getForwardButtonText_: function() {
+      if (!this.visiblePage_)
+        return undefined;
+      return this.visiblePage_.forwardButtonText;
+    },
+
     /**
      * @return {boolean} Whether the forward button should be disabled.
      * @private
@@ -197,6 +226,18 @@ cr.define('multidevice_setup', function() {
           this.passwordPageForwardButtonDisabled_;
     },
 
+    /**
+     * @return {string|undefined} The backward button text, which is undefined
+     *     if no button should be displayed.
+     * @private
+     */
+    getBackwardButtonText_: function() {
+      if (!this.visiblePage_)
+        return undefined;
+      return this.visiblePage_.backwardButtonText;
+
+    },
+
     /**
      * @return {boolean}
      * @private