[cros] OOBE slide animation.

Also some OOBE polishing:
*) fixed (top: 0) position for body to prevent scrolling;
*) oobe.html/login.html made structure elements.
*) 2x icons for user image screen.

BUG=129799,139169
TBR=jhawkins
(for browser_resources.grd)

Review URL: https://chromiumcodereview.appspot.com/10827169

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@151116 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/browser_resources.grd

@@ -19,17 +19,26 @@
         <structure name="IDR_ABOUT_MEMORY_HTML" file="resources\about_memory.html" flattenhtml="true" type="chrome_html" />
       </if>
       <structure name="IDR_ABOUT_VERSION_HTML" file="resources\about_version.html" flattenhtml="true" allowexternalscript="true" type="chrome_html" />
+      <if expr="pp_ifdef('chromeos')">
+        <structure name="IDR_DEMO_USER_LOGIN_HTML" file="resources\chromeos\login\demo_user_login.html" flattenhtml="true" type="chrome_html" />
+      </if>
       <structure name="IDR_DOWNLOADS_CSS" file="resources\downloads\downloads.css" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_DOWNLOADS_HTML" file="resources\downloads\downloads.html" flattenhtml="true" allowexternalscript="true" type="chrome_html" />
       <structure name="IDR_EXTENSIONS_HTML" file="resources\extensions\extensions.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_HELP_CSS" file="resources\help\help.css" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_HELP_HTML" file="resources\help\help.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_INCOGNITO_TAB_HTML" file="resources\incognito_tab.html" flattenhtml="true" type="chrome_html" />
+      <if expr="pp_ifdef('chromeos')">
+        <structure name="IDR_LOGIN_HTML" file="resources\chromeos\login\login.html" flattenhtml="true" type="chrome_html" />
+      </if>
       <structure name="IDR_NEW_INCOGNITO_TAB_THEME_CSS" file="resources\new_incognito_tab_theme.css" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_NEW_TAB_4_HTML" file="resources\ntp4\new_tab.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_NEW_TAB_4_THEME_CSS" file="resources\ntp4\new_tab_theme.css" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_NEW_TAB_SEARCH_HTML" file="resources\ntp_search\new_tab.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_NEW_TAB_SEARCH_THEME_CSS" file="resources\ntp_search\new_tab_theme.css" flattenhtml="true" type="chrome_html" />
+      <if expr="pp_ifdef('chromeos')">
+        <structure name="IDR_OOBE_HTML" file="resources\chromeos\login\oobe.html" flattenhtml="true" type="chrome_html" />
+      </if>
       <structure name="IDR_READER_OUT_OF_DATE_HTML" file="resources\reader_out_of_date.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_SSL_ERROR_HTML" file="resources\ssl_error.html" flattenhtml="true" type="chrome_html" />
       <structure name="IDR_SSL_ROAD_BLOCK_HTML" file="resources\ssl_roadblock.html" flattenhtml="true" type="chrome_html" />
@@ -198,8 +207,6 @@
         <include name="IDR_KEYBOARD_OVERLAY_CSS" file="resources\chromeos\keyboard_overlay.css" flattenhtml="true" type="BINDATA" />
         <include name="IDR_KEYBOARD_OVERLAY_HTML" file="resources\chromeos\keyboard_overlay.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
         <include name="IDR_KEYBOARD_OVERLAY_JS" file="resources\chromeos\keyboard_overlay.js" flattenhtml="true" type="BINDATA" />
-        <include name="IDR_LOGIN_HTML" file="resources\chromeos\login\login.html" flattenhtml="true" type="BINDATA" />
-        <include name="IDR_DEMO_USER_LOGIN_HTML" file="resources\chromeos\login\demo_user_login.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_MENU_HTML" file="resources\chromeos\menu.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_MOBILE_MANIFEST" file="resources\chromeos\mobile_app\manifest.json" type="BINDATA" />
         <include name="IDR_MOBILE_SETUP_PAGE_HTML" file="resources\chromeos\mobile_setup.html" flattenhtml="true" type="BINDATA" />
@@ -208,7 +215,6 @@
         <include name="IDR_NOTIFICATION_ICON_LINK_HTML" file="resources\chromeos\notification_icon_link.html" type="BINDATA" />
         <include name="IDR_ECHO_MANIFEST" file="resources\chromeos\echo\manifest.json" type="BINDATA" />
         <include name="IDR_OFFLINE_LOAD_HTML" file="resources\chromeos\offline_load.html" flattenhtml="true" type="BINDATA" />
-        <include name="IDR_OOBE_HTML" file="resources\chromeos\login\oobe.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_OS_CREDITS_HTML" file="resources\chromeos\about_os_credits.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_PROXY_SETTINGS_HTML" file="resources\chromeos\proxy_settings.html" flattenhtml="true" type="BINDATA" />
         <include name="IDR_SIM_UNLOCK_HTML" file="resources\chromeos\sim_unlock.html" flattenhtml="true" type="BINDATA" />

chrome/browser/chromeos/login/webui_login_display_host.cc

@@ -69,8 +69,6 @@ WebUILoginDisplayHost::WebUILoginDisplayHost(const gfx::Rect& background_bounds)
       crash_count_(0),
       restore_path_(RESTORE_UNKNOWN) {
   bool is_registered = WizardController::IsDeviceRegistered();
-  // TODO(nkostylev): Add switch to disable wallpaper transition on OOBE.
-  // Should be used on test images so that they are not slowed down.
   bool zero_delay_enabled = WizardController::IsZeroDelayEnabled();
   if (!CommandLine::ForCurrentProcess()->HasSwitch(switches::kDisableNewOobe) &&
       !zero_delay_enabled) {
@@ -96,6 +94,11 @@ WebUILoginDisplayHost::WebUILoginDisplayHost(const gfx::Rect& background_bounds)
       else if (override_type == kWebUIInitPostpone)
         initialize_webui_in_parallel_ = false;
     }
+
+    // Don't postpone WebUI initialization on first boot, otherwise we miss
+    // initial animation.
+    if (!WizardController::IsOobeCompleted())
+      initialize_webui_in_parallel_ = false;
   }
   // In case if we're not waiting for wallpaper load,
   // |initialize_webui_in_parallel_| value is ignored through the code flow.

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

@@ -9,6 +9,7 @@
 // TODO(xiyuan): Find a better to share those constants.
 /** @const */ var SCREEN_OOBE_NETWORK = 'connect';
 /** @const */ var SCREEN_OOBE_EULA = 'eula';
+/** @const */ var SCREEN_OOBE_UPDATE = 'update';
 /** @const */ var SCREEN_OOBE_ENROLLMENT = 'oauth-enrollment';
 /** @const */ var SCREEN_GAIA_SIGNIN = 'gaia-signin';
 /** @const */ var SCREEN_ACCOUNT_PICKER = 'account-picker';
@@ -24,6 +25,16 @@
 cr.define('cr.ui.login', function() {
   var Bubble = cr.ui.Bubble;
 
+  /**
+   * Groups of screens (screen IDs) that should have the same dimensions.
+   * @type Array.<Array.<string>>
+   * @const
+   */
+  var SCREEN_GROUPS = [[SCREEN_OOBE_NETWORK,
+                        SCREEN_OOBE_EULA,
+                        SCREEN_OOBE_UPDATE]
+                      ];
+
   /**
    * Constructor a display manager that manages initialization of screens,
    * transitions, error messages display.
@@ -109,7 +120,7 @@ cr.define('cr.ui.login', function() {
 
     /**
      * Appends buttons to the button strip.
-     * @param {Array} buttons Array with the buttons to append.
+     * @param {Array.<HTMLElement>} buttons Array with the buttons to append.
      * @param {string} screenId Id of the screen that buttons belong to.
      */
     appendButtons_: function(buttons, screenId) {
@@ -126,6 +137,19 @@ cr.define('cr.ui.login', function() {
       }
     },
 
+    /**
+     * Disables or enables control buttons on the specified screen.
+     * @param {HTMLElement} screen Screen which controls should be affected.
+     * @param {boolean} disabled Whether to disable controls.
+     */
+    disableButtons_: function(screen, disabled) {
+      var buttons = document.querySelectorAll(
+          '#' + screen.id + '-controls button');
+      for (var i = 0; i < buttons.length; ++i) {
+        buttons[i].disabled = disabled;
+      }
+    },
+
     /**
      * Updates a step's css classes to reflect left, current, or right position.
      * @param {number} stepIndex step index.
@@ -157,6 +181,9 @@ cr.define('cr.ui.login', function() {
       var newStep = $(nextStepId);
       var newHeader = $('header-' + nextStepId);
 
+      // Disable controls before starting animation.
+      this.disableButtons_(oldStep, true);
+
       if (oldStep.onBeforeHide)
         oldStep.onBeforeHide();
 
@@ -168,6 +195,8 @@ cr.define('cr.ui.login', function() {
       if (newStep.onAfterShow)
         newStep.onAfterShow(screenData);
 
+      this.disableButtons_(newStep, false);
+
       if (this.isOobeUI()) {
         // Start gliding animation for OOBE steps.
         if (nextStepIndex > this.currentStep_) {
@@ -190,25 +219,23 @@ cr.define('cr.ui.login', function() {
 
       if (this.currentStep_ != nextStepIndex &&
           !oldStep.classList.contains('hidden')) {
-        // TODO(nkostylev): Remove when new transitions are added back.
-        if (this.isNewOobe()) {
-          if (oldStep.classList.contains('faded') ||
-              oldStep.classList.contains('left') ||
-              oldStep.classList.contains('right')) {
-            oldStep.classList.add('hidden');
-          }
-        } else {
+        if (oldStep.classList.contains('animated') || !this.isNewOobe()) {
+          oldStep.classList.add('animation');
           oldStep.addEventListener('webkitTransitionEnd', function f(e) {
             oldStep.removeEventListener('webkitTransitionEnd', f);
             if (oldStep.classList.contains('faded') ||
                 oldStep.classList.contains('left') ||
                 oldStep.classList.contains('right')) {
+              oldStep.classList.remove('animation');
               oldStep.classList.add('hidden');
             }
           });
+        } else {
+          oldStep.classList.add('hidden');
         }
       } else {
         // First screen on OOBE launch.
+        $('inner-container').classList.remove('down');
         newHeader.classList.remove('right');
         // Report back first OOBE screen being painted.
         window.webkitRequestAnimationFrame(function() {
@@ -217,6 +244,8 @@ cr.define('cr.ui.login', function() {
       }
       this.currentStep_ = nextStepIndex;
       $('oobe').className = nextStepId;
+
+      $('step-logo').hidden = newStep.classList.contains('no-logo');
     },
 
     /**
@@ -283,14 +312,31 @@ cr.define('cr.ui.login', function() {
     },
 
     /**
-     * Updates inner container size based on the size of the current screen.
+     * Updates inner container size based on the size of the current screen and
+     * other screens in the same group.
      * Should be executed on screen change / screen size change.
      * @param {!HTMLElement} screen Screen that is being shown.
      */
     updateInnerContainerSize_: function(screen) {
-      $('inner-container').style.height = screen.offsetHeight + 'px';
-      if (this.isNewOobe())
-        $('inner-container').style.width = screen.offsetWidth + 'px';
+      var height = screen.offsetHeight;
+      var width = screen.offsetWidth;
+      for (var i = 0, screenGroup; screenGroup = SCREEN_GROUPS[i]; i++) {
+        if (screenGroup.indexOf(screen.id) != -1) {
+          // Set screen dimensions to maximum dimensions within this group.
+          for (var j = 0, screen2; screen2 = $(screenGroup[j]); j++) {
+            height = Math.max(height, screen2.offsetHeight);
+            width = Math.max(width, screen2.offsetWidth);
+          }
+          break;
+        }
+      }
+      $('inner-container').style.height = height + 'px';
+      if (this.isNewOobe()) {
+        $('inner-container').style.width = width + 'px';
+        // This requires |screen| to have |box-sizing: border-box|.
+        screen.style.width = width + 'px';
+        screen.style.height = height + 'px';
+      }
     },
 
     /**
@@ -303,7 +349,7 @@ cr.define('cr.ui.login', function() {
       for (var i = 0, screenId; screenId = this.screens_[i]; ++i) {
         var screen = $(screenId);
         if (this.isNewOobe()) {
-          buttonStrip = $(screenId + '-controls');
+          var buttonStrip = $(screenId + '-controls');
           if (buttonStrip)
             buttonStrip.innerHTML = '';
           // TODO(nkostylev): Update screen headers for new OOBE design.

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

@@ -55,6 +55,9 @@
       </div>
       <hr class="top shadow">
       <div id="inner-container">
+        <div id="step-logo">
+          <img src="chrome://theme/IDR_PRODUCT_LOGO">
+        </div>
         <include src="oobe_screen_oauth_enrollment.html">
         <include src="oobe_screen_user_image.html">
         <include src="screen_gaia_signin.html">

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

@@ -80,7 +80,7 @@
 .dropdown-container {
   background: #f7f7f7;
   border: 1px solid rgb(124, 145, 191);
-  max-height: 330px;
+  max-height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
   padding-bottom: 2px;
@@ -136,4 +136,3 @@
   top: 0;
   z-index: 5;
 }
-

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

@@ -17,6 +17,8 @@ body {
   margin: 0;
   overflow: hidden;
   padding: 0;
+  position: fixed;
+  top: 0;
 }
 
 html[oobe=old] body {
@@ -72,6 +74,7 @@ button:not(.custom-appearance) {
 #outer-container {
   -webkit-box-align: center;
   -webkit-box-pack: center;
+  -webkit-perspective: 600px;
   bottom: 41px;  /* Leave space for the header bar */
   display: -webkit-box;
   left: 0;
@@ -89,21 +92,41 @@ html[oobe=new] #oobe {
 }
 
 #inner-container {
-  /* Height/width of each step is set manually,
-     see DisplayManager.toggleStep_() */
-  height: 294px;
   position: relative;
-  width: 640px;
 }
 
 html[oobe=old] #inner-container {
+  height: 294px;
   padding: 20px;
+  width: 640px;
 }
 
 html[oobe=new] #inner-container {
+  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
+                                      rgba(255,255,255,0.95));
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
+              0 4px 23px 5px rgba(0, 0, 0, 0.2),
+              0 2px 6px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
   padding: 0;
 }
 
+/* Account picker has no border and background. */
+html[oobe=new] .account-picker #inner-container {
+  background: none;
+  box-shadow: none;
+}
+
+/* Only play this animation when 'down' class is removed. */
+html[oobe=new] #inner-container:not(.down) {
+  -webkit-transition: -webkit-transform 400ms ease;
+}
+
+html[oobe=new] #inner-container.down {
+  -webkit-transform: translateY(50px) rotateX(-2.5deg);
+}
+
 #security-info a,
 #security-tpm a,
 #eula a {
@@ -138,11 +161,7 @@ hr.bottom {
 
 #header {
   -webkit-padding-start: 45px;
-  /* TODO(thakis): Move oobe.html to a structure element, then the
-   * image set should be inserted automatically. */
-  background-image: -webkit-image-set(
-      url('chrome://theme/IDR_PRODUCT_LOGO_32') 1x,
-      url('chrome://theme/IDR_PRODUCT_LOGO_32@2x') 2x);
+  background-image: url('chrome://theme/IDR_PRODUCT_LOGO_32');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 32px;
@@ -210,23 +229,16 @@ html[dir=rtl]  .header-section.left {
   right: -20px;
 }
 
-html[oobe=old] .step-logo {
+html[oobe=old] #step-logo {
   display: none;
 }
 
-.step-logo {
+#step-logo {
+  -webkit-margin-start: 17px;
   position: absolute;
   top: 15px;
 }
 
-html[dir=ltr] .step-logo {
-  left: 17px;
-}
-
-html[dir=rtl] .step-logo {
-  right: 17px;
-}
-
 html[oobe=new] #connect .step-contents {
   /* TODO(nkostylev): Update after content layout changes. */
   -webkit-margin-after: 82px;
@@ -261,48 +273,49 @@ html[oobe=new] #user-image-screen-description {
   -webkit-margin-before: 0;
 }
 
+.step {
+  position: absolute;
+}
+
 html[oobe=old] .step {
   min-height: 294px;
   opacity: 1;
-  position: absolute;
   width: 640px;
 }
 
 html[oobe=new] .step {
-  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
-                                      rgba(255,255,255,0.95));
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
-              0 4px 23px 5px rgba(0, 0, 0, 0.2),
-              0 2px 6px rgba(0, 0, 0, 0.15);
-  position: absolute;
+  box-sizing: border-box;
+}
+
+html[oobe=new] .step.animated {
+  -webkit-transition: -webkit-transform 400ms ease,
+                      opacity 400ms ease,
+                      visibility 400ms ease;
 }
 
 html[oobe=old][dir=ltr] .step {
-  /* TODO(nkostylev): Change to new transitions. */
   -webkit-transition: left 200ms, opacity 200ms, visibility 200ms ease-in-out;
   left: 0;
 }
 
 html[oobe=old][dir=rtl] .step {
-  /* TODO(nkostylev): Change to new transitions. */
   -webkit-transition: right 200ms, opacity 200ms, visibility 200ms ease-in-out;
   right: 0;
 }
 
-.step.right {
+html[oobe=old] .step.right {
   left: 100px;
 }
 
-.step.left {
+html[oobe=old] .step.left {
   left: -50px;
 }
 
-html[dir=rtl] .step.right {
+html[oobe=old][dir=rtl] .step.right {
   right: 100px;
 }
 
-html[dir=rtl] .step.left {
+html[oobe=old][dir=rtl] .step.left {
   right: -50px;
 }
 
@@ -318,12 +331,20 @@ html[oobe=old] .right {
   opacity: 0;
 }
 
-html[oobe=new] .faded,
-html[oobe=new] .left,
-html[oobe=new] .right {
+html[oobe=new] .step.faded,
+html[oobe=new] .step.left,
+html[oobe=new] .step.right {
   opacity: 0;
 }
 
+html[oobe=new] .step.right {
+  -webkit-transform: translateX(50px);
+}
+
+html[oobe=new] .step.left {
+  -webkit-transform: translateX(-50px)
+}
+
 #footer {
   -webkit-box-align: center;
   display: -webkit-box;
@@ -409,41 +430,37 @@ html[oobe=old] #connect {
 }
 
 /* Padding for header and buttons. */
-/* TODO(nkostylev): Extract common style for OOBE steps. */
 html[oobe=new] #connect {
-  min-height: 304px;
+  min-height: 395px;
   padding: 70px 17px 21px;
-  width: 688px;
 }
 
 html[oobe=new] #eula {
-  min-height: 304px;
+  min-height: 395px;
   padding: 70px 17px 21px;
-  width: 688px;
 }
 
 html[oobe=new] #update {
-  min-height: 284px;
+  min-height: 423px;
   padding: 70px 17px 69px;    /* Screen has no controls. */
-  width: 688px;
 }
 
 html[oobe=new] #gaia-signin {
-  height: 470px;
+  height: 609px;
   padding: 70px 17px 69px;    /* Screen has no controls. */
-  width: 688px;
+  width: 722px;
 }
 
 html[oobe=new] #user-image {
-  min-height: 352px;
+  min-height: 443px;
   padding: 70px 17px 21px;
-  width: 688px;
+  width: 702px;
 }
 
 html[oobe=new] #oauth-enrollment {
-  min-height: 518px;
+  min-height: 609px;
   padding: 70px 17px 21px;
-  width: 688px;
+  width: 722px;
 }
 
 #logging {
@@ -699,8 +716,18 @@ html[camera=webrtc] .camera.live.online #take-photo {
 
 .step-controls {
   -webkit-box-pack: end;
+  -webkit-padding-end: 34px;  /* Double the padding of .step */
+  bottom: 21px;
+  box-sizing: border-box;
   display: -webkit-box;
-  height: 28px
+  height: 28px;
+  position: absolute;
+  width: 100%;
+}
+
+.animation .step-controls button {
+  /* Don't grey out disabled buttons during animation. */
+  color: buttontext !important;
 }
 
 html[oobe=old] .step-controls {

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

@@ -57,7 +57,10 @@
         <div id="header-sections"></div>
       </div>
       <hr class="top shadow">
-      <div id="inner-container">
+      <div id="inner-container" class="down">
+        <div id="step-logo">
+          <img src="chrome://theme/IDR_PRODUCT_LOGO">
+        </div>
         <include src="oobe_screen_network.html">
         <include src="oobe_screen_eula.html">
         <include src="oobe_screen_update.html">

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

-<div class="step right hidden" id="eula">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
+<div class="step right hidden animated" id="eula">
   <div class="step-contents">
     <div id="eulas" class="eula-columns one-column">
       <div id="cros-eula">
@@ -28,4 +25,3 @@
     </a>
   </div>
 </div>
-

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

-<div class="step hidden" id="connect">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
+<div class="step hidden animated" id="connect">
   <div class="step-contents">
     <div class="control-with-label">
       <label for="language-select" i18n-content="selectLanguage"

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

 <div id="oauth-enrollment" class="step right hidden">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
   <div id="oauth-enroll-container" class="step-contents">
     <div id="oauth-enroll-step-signin">
       <div id="oauth-enroll-signin-frame-container">

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

-<div class="step right hidden" id="update">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
+<div class="step right hidden animated" id="update">
   <div class="step-contents">
     <div id="update-cancel-hint" hidden>
       <p i18n-content="cancelUpdateHint"></p>

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

 <div class="step right hidden" id="user-image">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
   <div class="step-contents">
     <div id="user-image-screen-curtain">
       <p id="user-image-screen-description"
@@ -12,8 +9,7 @@
           aria-labelledby="user-image-screen-description">
       </grid>
       <div id="user-image-preview">
-        <img id="user-image-preview-img" alt=""
-             src="chrome://theme/IDR_LOGIN_DEFAULT_USER">
+        <img id="user-image-preview-img" alt="">
         <div class="user-image-stream-area">
           <div class="perspective-box">
             <div id="user-image-stream-crop">

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

-<div id="account-picker" class="step faded hidden">
+<div id="account-picker" class="step faded hidden no-logo">
   <podrow id="pod-row"></podrow>
 </div>

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

 <div id="error-message" class="step faded hidden show-offline-message">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
   <div class="step-contents">
     <div id="error-message-screen-title">
       <span id="error-message-title" i18n-content="offlineMessageTitle"

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

 <div class="step right hidden" id="gaia-signin">
-  <div class="step-logo">
-    <img src="chrome://theme/IDR_PRODUCT_LOGO">
-  </div>
   <div class="step-contents">
     <div id="gaia-signin-aria-label" aria-live="polite"></div>
     <div>