oobe: Use show() to show pages in gesture navigation screen

Oobe dialog elements have show() method that focuses the default element
in the dialog, and updates the dialog scroll. Use it in gesture
navigation dialog to show pages (which are oobe dialogs).

This fixes the issue where the scroll background is show on the intro
page (as the scroll is calculated using obsolete bounds).
Upadating scroll also made the animation pages scrollable, so this tweaks
the animation positioning in the screen.

While here, mark next buttons with focus-on-show class, so they get
focused when a screen page is shown.

BUG=1058885

Change-Id: I23c44cb03afd713c35aa0a83f9fc59081a8a7b41
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2092948
Commit-Queue: Toni Baržić <tbarzic@chromium.org>
Reviewed-by: Matthew Mourgos <mmourgos@chromium.org>
Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748561}

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

@@ -13,7 +13,8 @@
   height: 225px;
   overflow: hidden;
   position: relative;
-  top: 10%;
+  top: 50%;
+  transform: translate(0, -50%);
   width: 300px;
 }
 
@@ -32,4 +33,4 @@
 .gesture-list-item-text {
   flex: 1 1 auto;
   margin: auto;
-}
\ No newline at end of file
+}

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

@@ -11,7 +11,7 @@
     <link rel="stylesheet" href="oobe_flex_layout.css">
     <link rel="stylesheet" href="gesture_navigation.css">
 
-    <oobe-dialog id="gestureIntro" has-buttons class="step hidden animated"
+    <oobe-dialog id="gestureIntro" has-buttons class="step hidden"
         hidden="[[!isEqual_(currentPage_, 'gestureIntro')]]"
         title-key="gestureNavigationIntroTitle"
         aria-label$="[[i18nDynamic(locale, 'gestureNavigationIntroTitle')]]">
@@ -38,13 +38,13 @@
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal end-justified">
         <oobe-text-button inverse on-tap="onNext_"
-            id="gesture-intro-next-button"
+            id="gesture-intro-next-button" class="focus-on-show"
             text-key="gestureNavigationIntroNextButton">
         </oobe-text-button>
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureHome" has-buttons
+    <oobe-dialog id="gestureHome" has-buttons  class="step hidden"
         hidden="[[!isEqual_(currentPage_, 'gestureHome')]]"
         title-key="gestureNavigationHomeTitle"
         subtitle-key="gestureNavigationHomeDescription"
@@ -60,12 +60,12 @@
       <div slot="bottom-buttons" class="flex layout horizontal justified">
         <oobe-back-button on-tap="onBack_"
             id="gesture-home-back-button"></oobe-back-button>
-        <oobe-next-button on-tap="onNext_"
+        <oobe-next-button on-tap="onNext_" class="focus-on-show"
             id="gesture-home-next-button"></oobe-next-button>
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureOverview" has-buttons
+    <oobe-dialog id="gestureOverview" has-buttons class="step hidden"
         hidden="[[!isEqual_(currentPage_, 'gestureOverview')]]"
         title-key="gestureNavigationOverviewTitle"
         subtitle-key="gestureNavigationOverviewDescription"
@@ -81,12 +81,12 @@
       <div slot="bottom-buttons" class="flex layout horizontal justified">
         <oobe-back-button on-tap="onBack_"
             id="gesture-overview-back-button"></oobe-back-button>
-        <oobe-next-button on-tap="onNext_"
+        <oobe-next-button on-tap="onNext_" class="focus-on-show"
             id="gesture-overview-next-button"></oobe-next-button>
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureBack" has-buttons
+    <oobe-dialog id="gestureBack" has-buttons class="step hidden"
         hidden="[[!isEqual_(currentPage_, 'gestureBack')]]"
         title-key="gestureNavigationBackTitle"
         subtitle-key="gestureNavigationBackDescription"
@@ -102,9 +102,9 @@
       <div slot="bottom-buttons" class="flex layout horizontal justified">
         <oobe-back-button on-tap="onBack_"
             id="gesture-back-back-button"></oobe-back-button>
-        <oobe-next-button on-tap="onNext_"
+        <oobe-next-button on-tap="onNext_" class="focus-on-show"
             id="gesture-back-next-button"></oobe-next-button>
       </div>
     </oobe-dialog>
   </template>
-</dom-module>
\ No newline at end of file
+</dom-module>

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

@@ -44,6 +44,13 @@ Polymer({
     });
   },
 
+  focus() {
+    let current = this.$[this.currentPage_];
+    if (current) {
+      current.show();
+    }
+  },
+
   /**
    * This is the 'on-tap' event handler for the 'next' or 'get started' button.
    * @private
@@ -98,6 +105,10 @@ Polymer({
     this.setPlayCurrentScreenAnimation(false);
     this.currentPage_ = newPage;
     this.setPlayCurrentScreenAnimation(true);
+
+    let screen = this.$[this.currentPage_];
+    assert(screen);
+    screen.show();
   },
 
   /**
@@ -121,4 +132,4 @@ Polymer({
     }
   },
 });
-})();
\ No newline at end of file
+})();