[CrOS Multidevice] Styling main WebUI elements.

Additional styling work, mostly related to spatial blocking.

Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I1c71588ec9cac565594645f4a123ef1895589728
Reviewed-on: https://chromium-review.googlesource.com/1073948
Commit-Queue: Jordy Greenblatt <jordynass@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#562100}

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

@@ -5,14 +5,18 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.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="iron-flex paper-button-style cr-shared-style">
       :host {
-        @apply(--layout-horizontal)
+        @apply(--layout-end-justified);
+        @apply(--layout-horizontal);
       }
 
       paper-button {
+        @apply(--layout-center-center);
         text-transform: none;
       }
     </style>

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

@@ -1,6 +1,7 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="button_bar.html">
 <link rel="import" href="fake_mojo_service.html">
@@ -16,11 +17,11 @@
       :host {
         @apply(--layout-vertical);
         @apply(--layout-start-justified);
-        padding: 60px 64px 32px 64px;
+        padding: 60px 32px 32px 32px;
       }
 
       button-bar {
-        margin-top: 50px;
+        margin-top: 40px;
       }
     </style>
     <iron-pages attr-for-selected="is"

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

@@ -1,23 +1,41 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="multidevice_setup_shared_css.html">
 <link rel="import" href="ui_page.html">
 <link rel="import" href="ui_page_container_behavior.html">
 
 <dom-module id="start-setup-page">
   <template>
-    <style include="multidevice-setup-shared"></style>
+    <style include="iron-flex multidevice-setup-shared">
+      #device-selection-container {
+        @apply(--layout-horizontal);
+        @apply(--layout-center);
+        border-bottom: 1px solid rgb(232, 234, 237);
+        border-top: 1px solid rgb(232, 234, 237);
+        color: rgb(33, 33, 36);
+        font-family: Roboto-Regular, Roboto, sans-serif;
+        font-size: 13px;
+        padding: 8px 8px 8px 0;
+      }
+
+      /* TODO(jordynass): Switch this to the new standard WebUI select format.
+       * It should be available in M69. */
+      #deviceDropdown {
+        background-color: rgb(42, 49, 70, .1);
+        border-radius: 4px;
+        height: 32px;
+        width: 240px;
+      }
+    </style>
     <ui-page header-text="[[headerText]]" icon-name="google-g">
       <span slot="message" inner-h-t-m-l="[[messageHtml]]"></span>
-      <div slot="additional-content">
-        <p class="page-content-text">
-          [[getDeviceSelectionHeader_(devices)]]
-        </p>
+      <div id="device-selection-container" slot="additional-content">
+        [[getDeviceSelectionHeader_(devices)]]
+        <div class="flex"></div>
         <div hidden$="[[!doesDeviceListHaveOneElement_(devices)]]">
-          <p class="page-content-text">
-            [[getFirstDeviceNameInList_(devices)]]
-          </p>
+          [[getFirstDeviceNameInList_(devices)]]
         </div>
         <div hidden$="[[!doesDeviceListHaveMultipleElements_(devices)]]">
           <select id="deviceDropdown"

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

@@ -8,37 +8,45 @@
 <dom-module id="ui-page">
   <template>
     <style include="iron-flex iron-flex-alignment multidevice-setup-shared">
-      iron-icon {
-        height: 32px;
-        width: 32px;
-      }
-
-      #header-container {
-        height: 64px;
+      #ui-page-container {
+        padding-left: 32px;
+        padding-right: 32px;
       }
 
       h1 {
         color: rgb(33, 33, 36);
         font-size: 28px;
         margin: 0;
-        padding: 0;
+        padding-top: 36px;
       }
 
       #message-container {
+        height: 72px;
+        padding-top: 14px;
+      }
+
+      #additional-content-container {
         height: 50px;
       }
+
+      #banner {
+        background-color: rgb(0, 100, 120);
+        font-size: 36px;
+        height: 236px;
+        margin-top: 8px;
+      }
     </style>
-    <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
-    <div id="header-container"
-        class="layout vertical end-justified">
+    <div id="ui-page-container">
+      <iron-icon icon="[[computeIconIdentifier_(iconName)]]"></iron-icon>
       <h1>[[headerText]]</h1>
+      <div id="message-container" class="page-content-text">
+        <slot name="message"></slot>
+      </div>
+      <div id="additional-content-container">
+        <slot name="additional-content"></slot>
+      </div>
+      <div id="banner">SETUP ILLUSTRATIONS/ANIMATIONS GO HERE!</div>
     </div>
-    <div id="message-container"
-        class="layout vertical end-justified page-content-text">
-      <slot name="message"></slot>
-    </div>
-    <slot name="additional-content"></slot>
-    <slot name="page-specific-image"></slot>
   </template>
   <script src="ui_page.js"></script>
 </dom-module>