oobe: Migrate gesture-navigation-element to MultiStepBehavior

Bug: 1156672
Change-Id: I0f56c3ec6674e2040c509ef92793ae7ad6b602f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2595034Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Commit-Queue: Danila Kuzmin <dkuzmin@google.com>
Cr-Commit-Position: refs/heads/master@{#838133}

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

-/* Copyright 2020 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file. */
-
-.gesture-animation {
-  height: 300px;
-  margin-top: -75px;
-  position: absolute;
-  width: 300px;
-}
-
-.gesture-animation-container {
-  height: 225px;
-  overflow: hidden;
-  position: relative;
-  top: 50%;
-  transform: translate(0, -50%);
-  width: 300px;
-}
-
-.gesture-list-item {
-  display: flex;
-  height: 46px;
-  padding-bottom: 4px;
-}
-
-.gesture-list-item-icon {
-  align-self: flex-start;
-  height: 24px;
-  margin: auto;
-  width: 24px;
-}
-
-.gesture-list-item-text {
-  flex: 1 1 auto;
-  margin: auto;
-  padding-inline-start: 16px;
-}

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

@@ -12,11 +12,39 @@
 
 <dom-module id="gesture-navigation-element">
   <template>
-    <style include="oobe-common"></style>
-    <link rel="stylesheet" href="gesture_navigation.css">
+    <style include="oobe-common">
+      .gesture-animation {
+        height: 300px;
+        width: 300px;
+      }
 
-    <oobe-dialog id="gestureIntro" has-buttons class="step hidden"
-        hidden="[[!isEqual_(currentPage_, 'gestureIntro')]]"
+      .gesture-animation-container {
+        height: 300px;
+        margin-top: -22px;
+        overflow: hidden;
+        width: 300px;
+      }
+
+      .gesture-list-item {
+        display: flex;
+        height: 46px;
+        padding-bottom: 4px;
+      }
+
+      .gesture-list-item-icon {
+        align-self: flex-start;
+        height: 24px;
+        margin: auto;
+        width: 24px;
+      }
+
+      .gesture-list-item-text {
+        flex: 1 1 auto;
+        margin: auto;
+        padding-inline-start: 16px;
+      }
+    </style>
+    <oobe-dialog id="gestureIntro" has-buttons for-step="gestureIntro"
         title-key="gestureNavigationIntroTitle"
         aria-label$="[[i18nDynamic(locale, 'gestureNavigationIntroTitle')]]">
       <img slot="oobe-icon" src="images/gestures.svg" width="32" height="32">
@@ -48,8 +76,7 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureHome" has-buttons  class="step hidden"
-        hidden="[[!isEqual_(currentPage_, 'gestureHome')]]"
+    <oobe-dialog id="gestureHome" has-buttons for-step="gestureHome"
         title-key="gestureNavigationHomeTitle"
         subtitle-key="gestureNavigationHomeDescription"
         aria-label$="[[i18nDynamic(locale, 'gestureNavigationHomeTitle')]]">
@@ -71,8 +98,7 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureOverview" has-buttons class="step hidden"
-        hidden="[[!isEqual_(currentPage_, 'gestureOverview')]]"
+    <oobe-dialog id="gestureOverview" has-buttons for-step="gestureOverview"
         title-key="gestureNavigationOverviewTitle"
         subtitle-key="gestureNavigationOverviewDescription"
         aria-label$="[[i18nDynamic(locale, 'gestureNavigationOverviewTitle')]]">
@@ -94,8 +120,7 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureBack" has-buttons class="step hidden"
-        hidden="[[!isEqual_(currentPage_, 'gestureBack')]]"
+    <oobe-dialog id="gestureBack" has-buttons for-step="gestureBack"
         title-key="gestureNavigationBackTitle"
         subtitle-key="gestureNavigationBackDescription"
         aria-label$="[[i18nDynamic(locale, 'gestureNavigationBackTitle')]]">

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

@@ -18,11 +18,12 @@ const GesturePage = {
 Polymer({
   is: 'gesture-navigation-element',
 
-  behaviors: [OobeI18nBehavior, OobeDialogHostBehavior, LoginScreenBehavior],
+  behaviors: [OobeI18nBehavior, LoginScreenBehavior, MultiStepBehavior],
 
-  properties: {
-    /** @private */
-    currentPage_: {type: String, value: GesturePage.INTRO},
+  UI_STEPS: GesturePage,
+
+  defaultUIStep() {
+    return GesturePage.INTRO;
   },
 
   /** @override */
@@ -33,27 +34,13 @@ Polymer({
     });
   },
 
-  /**
-   * Called before the screen is shown.
-   */
-  onBeforeShow() {
-    this.currentPage_ = GesturePage.INTRO;
-  },
-
-  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
    *
    */
   onNext_() {
-    switch (this.currentPage_) {
+    switch (this.uiStep) {
       case GesturePage.INTRO:
         this.setCurrentPage_(GesturePage.HOME);
         break;
@@ -78,7 +65,7 @@ Polymer({
    * @private
    */
   onBack_() {
-    switch (this.currentPage_) {
+    switch (this.uiStep) {
       case GesturePage.HOME:
         this.setCurrentPage_(GesturePage.INTRO);
         break;
@@ -99,21 +86,9 @@ Polymer({
    */
   setCurrentPage_(newPage) {
     this.setPlayCurrentScreenAnimation(false);
-    this.currentPage_ = newPage;
+    this.setUIStep(newPage);
     chrome.send('handleGesturePageChange', [newPage]);
     this.setPlayCurrentScreenAnimation(true);
-
-    let screen = this.$[this.currentPage_];
-    assert(screen);
-    screen.show();
-  },
-
-  /**
-   * Comparison function for the current page.
-   * @private
-   */
-  isEqual_(currentPage_, page_) {
-    return currentPage_ == page_;
   },
 
   /**
@@ -122,8 +97,7 @@ Polymer({
    * @private
    */
   setPlayCurrentScreenAnimation(enabled) {
-    var animation =
-        this.$[this.currentPage_].querySelector('.gesture-animation');
+    var animation = this.$[this.uiStep].querySelector('.gesture-animation');
     if (animation) {
       animation.setPlay(enabled);
     }