OOBE: Make welcome dialog an oobe dialog

I've left it a separate polymer element to make the CL as simple as possible
Before: https://screenshot.googleplex.com/O4r365FLMzJ.png
After: https://screenshot.googleplex.com/2uf0mVpH5ck.png

Bug: 999090
Test: manual
Change-Id: If815a9b5e45334cde63b615d60d72be32f9d9021
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1819299Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#699211}

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

@@ -60,7 +60,6 @@
     <oobe-welcome-dialog id="welcomeScreen" role="dialog"
         aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]"
         current-language="[[currentLanguage]]"
-        current-keyboard="[[currentKeyboard]]"
         on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
         on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
         on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"

chrome/browser/resources/chromeos/login/oobe_welcome_dialog.css

@@ -2,20 +2,9 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.vertical-margin {
-  width: calc(64px - 4px); /* = real width - button border */
-}
-
-#bottom-margin {
-  height: 32px;
-}
-
-#titleContainer {
-  height: 157px; /* 150 + baseline to block end size for 28px font */
-  margin-bottom: 93px; /* 100 - baseline to clock end size for 28px font */
-}
 
 #title {
+  align-self: center;
   color: var(--google-grey-900);
   font-family: var(--oobe-button-font-family);
   font-size: 28px;
@@ -25,6 +14,8 @@
 }
 
 .welcome-illustration {
+  align-items: center;
+  justify-content: center;
   user-select: none;
 }
 
@@ -32,7 +23,3 @@ video {
   height: 200px;
   width: 449px;
 }
-
-#buttons {
-  width: 100%;
-}

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

@@ -61,93 +61,80 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="oobe_welcome_dialog.css">
     <style include="cr-shared-style"></style>
-    <div class="layout horizontal flex">
-      <div class="vertical-margin"></div>
-      <div class="welcome-content flex layout vertical center">
-        <div class="layout vertical end-justified" id="titleContainer">
-          <h1 id="title">[[i18nDynamic(locale, 'welcomeScreenGreeting')]]</h1>
-        </div>
-        <div class="welcome-illustration">
-          <if expr="chromeos and _google_chrome">
-            <video muted hidden oobe_devices="chromebox"
-                oobe_orientations="portrait,landscape" oobe_types="intro"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_intro_2x.webm">
-            </video>
-            <video muted loop hidden oobe_devices="chromebox"
-                oobe_orientations="portrait,landscape" oobe_types="loop"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_loop_2x.webm">
-            </video>
-            <video muted hidden oobe_devices="laptop_G"
-                oobe_orientations="portrait,landscape" oobe_types="intro"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro_2x.webm">
-            </video>
-            <video muted loop hidden oobe_devices="laptop_G"
-                oobe_orientations="portrait,landscape" oobe_types="loop"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop_2x.webm">
-            </video>
-            <video muted hidden oobe_devices="laptop"
-                oobe_orientations="portrait,landscape" oobe_types="intro"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_intro_2x.webm">
-            </video>
-            <video muted loop hidden oobe_devices="laptop"
-                oobe_orientations="portrait,landscape" oobe_types="loop"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop_2x.webm">
-            </video>
-            <video muted hidden oobe_devices="tablet_G"
-                oobe_orientations="portrait,landscape" oobe_types="intro"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro_2x.webm">
-            </video>
-            <video muted loop hidden oobe_devices="tablet_G"
-                oobe_orientations="portrait,landscape" oobe_types="loop"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop_2x.webm">
-            </video>
-            <video muted hidden oobe_devices="tablet"
-                oobe_orientations="portrait,landscape" oobe_types="intro"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro_2x.webm">
-            </video>
-            <video muted loop hidden oobe_devices="tablet"
-                oobe_orientations="portrait,landscape" oobe_types="loop"
-                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop_2x.webm">
-            </video>
-          </if>
-        </div>
+    <oobe-dialog has-buttons>
+      <h1 slot="title" id="title">
+        [[i18nDynamic(locale, 'welcomeScreenGreeting')]]
+      </h1>
+      <div slot="footer" class="welcome-illustration layout vertical">
+        <if expr="chromeos and _google_chrome">
+          <video muted hidden oobe_devices="chromebox"
+              oobe_orientations="portrait,landscape" oobe_types="intro"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_intro_2x.webm">
+          </video>
+          <video muted loop hidden oobe_devices="chromebox"
+              oobe_orientations="portrait,landscape" oobe_types="loop"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/chromebox_loop_2x.webm">
+          </video>
+          <video muted hidden oobe_devices="laptop_G"
+              oobe_orientations="portrait,landscape" oobe_types="intro"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_intro_2x.webm">
+          </video>
+          <video muted loop hidden oobe_devices="laptop_G"
+              oobe_orientations="portrait,landscape" oobe_types="loop"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_G_loop_2x.webm">
+          </video>
+          <video muted hidden oobe_devices="laptop"
+              oobe_orientations="portrait,landscape" oobe_types="intro"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_intro_2x.webm">
+          </video>
+          <video muted loop hidden oobe_devices="laptop"
+              oobe_orientations="portrait,landscape" oobe_types="loop"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/laptop_loop_2x.webm">
+          </video>
+          <video muted hidden oobe_devices="tablet_G"
+              oobe_orientations="portrait,landscape" oobe_types="intro"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_intro_2x.webm">
+          </video>
+          <video muted loop hidden oobe_devices="tablet_G"
+              oobe_orientations="portrait,landscape" oobe_types="loop"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_G_loop_2x.webm">
+          </video>
+          <video muted hidden oobe_devices="tablet"
+              oobe_orientations="portrait,landscape" oobe_types="intro"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_intro_2x.webm">
+          </video>
+          <video muted loop hidden oobe_devices="tablet"
+              oobe_orientations="portrait,landscape" oobe_types="loop"
+              src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop_2x.webm">
+          </video>
+        </if>
         <div hidden="[[!debuggingLinkVisible]]">
           <a href="#" on-tap="onDebuggingLinkClicked_" id="enableDebuggingLink">
             [[i18nDynamic(locale, 'debuggingFeaturesLink')]]
           </a>
         </div>
+      </div>
+      <div slot="bottom-buttons" class="layout horizontal center">
+        <oobe-welcome-secondary-button id="languageSelectionButton"
+            icon1x="oobe-welcome-dialog-20:language"
+            icon2x="oobe-welcome-dialog-40:language"
+            on-tap="onLanguageClicked_"
+            label-for-aria$="[[formatMessage_('languageButtonLabel',
+                currentLanguage)]]">
+          <div>[[currentLanguage]]</div>
+        </oobe-welcome-secondary-button>
+        <oobe-welcome-secondary-button id="accessibilitySettingsButton"
+            icon1x="oobe-welcome-dialog-20:accessibility"
+            icon2x="oobe-welcome-dialog-40:accessibility"
+            on-tap="onAccessibilityClicked_">
+          <div>[[i18nDynamic(locale, 'accessibilityLink')]]</div>
+        </oobe-welcome-secondary-button>
         <div class="flex"></div>
-        <div id="buttons" class="layout horizontal center">
-          <oobe-welcome-secondary-button id="languageSelectionButton"
-              icon1x="oobe-welcome-dialog-20:language"
-              icon2x="oobe-welcome-dialog-40:language"
-              on-tap="onLanguageClicked_"
-              label-for-aria$="[[formatMessage_('languageButtonLabel',
-                  currentLanguage)]]">
-            <div>[[currentLanguage]]</div>
-          </oobe-welcome-secondary-button>
-          <oobe-welcome-secondary-button id="accessibilitySettingsButton"
-              icon1x="oobe-welcome-dialog-20:accessibility"
-              icon2x="oobe-welcome-dialog-40:accessibility"
-              on-tap="onAccessibilityClicked_">
-            <div>[[i18nDynamic(locale, 'accessibilityLink')]]</div>
-          </oobe-welcome-secondary-button>
-          <oobe-welcome-secondary-button id="timezoneSettingsButton"
-              icon1x="oobe-welcome-32:timezone"
-              icon2x="oobe-welcome-64:timezone"
-              on-tap="onTimezoneClicked_"
-              hidden="[[!timezoneButtonVisible]]">
-            <div>[[i18nDynamic(locale, 'timezoneButtonText')]]</div>
-          </oobe-welcome-secondary-button>
-          <div class="flex"></div>
-          <oobe-next-button id="welcomeNextButton"
-              inverse on-tap="onNextClicked_">
-            <div>[[i18nDynamic(locale, 'welcomeNextButtonText')]]</div>
-          </oobe-text-button>
-        </div>
-        <div id="bottom-margin"></div>
+        <oobe-next-button id="welcomeNextButton"
+            inverse on-tap="onNextClicked_">
+          <div>[[i18nDynamic(locale, 'welcomeNextButtonText')]]</div>
+        </oobe-text-button>
       </div>
-      <div class="vertical-margin"></div>
-    </div>
+    </oobe-dialog>
   </template>
 </dom-module>