Chrome OS OOBE: add chromebox UI video, and switched all videos to 2x.

Bug: 873824
Change-Id: I2f205fdca015150805768ed7adf5d2ff31344927
Reviewed-on: https://chromium-review.googlesource.com/1174986Reviewed-by: Wenzhao (Colin) Zang <wzang@chromium.org>
Commit-Queue: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583167}

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

@@ -28,6 +28,11 @@
   user-select: none;
 }
 
+video {
+  height: 200px;
+  width: 449px;
+}
+
 #buttons {
   width: 100%;
 }

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

@@ -69,37 +69,45 @@
         </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.webm">
+                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.webm">
+                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.webm">
+                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.webm">
+                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.webm">
+                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.webm">
+                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.webm">
+                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.webm">
+                src="../../../internal/resources/chromeos/animations/oobe-welcome/tablet_loop_2x.webm">
             </video>
           </if>
         </div>

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

@@ -58,6 +58,7 @@
   };
 
   const VIDEO_DEVICE = {
+    CHROMEBOX: 'chromebox',
     LAPTOP: 'laptop',
     TABLET: 'tablet',
     LAPTOP_G: 'laptop_G',
@@ -266,6 +267,7 @@
       timezoneButtonVisible: {
         type: Boolean,
         value: false,
+        observer: 'updateVideoMode_',
       },
 
       /**
@@ -274,7 +276,7 @@
       debuggingLinkVisible: Boolean,
 
       /**
-       * True when in tablet mode.
+       * True when in tablet mode (vs laptop).
        */
       isInTabletMode: {
         type: Boolean,
@@ -282,7 +284,7 @@
       },
 
       /**
-       * True when scree orientation is portrait.
+       * True when screen orientation is portrait (vs landscape).
        */
       isInPortraitMode: {
         type: Boolean,
@@ -291,6 +293,9 @@
     },
 
     getVideoDeviceType_: function() {
+      if (this.timezoneButtonVisible)
+        return VIDEO_DEVICE.CHROMEBOX;
+
       return this.isInTabletMode ? VIDEO_DEVICE.TABLET : VIDEO_DEVICE.LAPTOP;
     },
 
@@ -300,6 +305,11 @@
     },
 
     updateVideoMode_: function() {
+      // Depending on the order of events, this might be called before
+      // attached().
+      if (!this.welcomeVideoController_)
+        return;
+
       this.welcomeVideoController_.updateConfiguration(
           this.getVideoDeviceType_(), this.getVideoOrientationType_());
     },