OOBE: Swap back and overview page order on gesture navigation screen

This change swaps the order of the back and overview pages on the
gesture navigation screen. The new order for the gesture navigation
screen is as follows:
(Intro Page) -> (Home Page) -> (Overview Page) -> (Back Page)

Bug: 976949
Change-Id: Ic621c8c5a69b3b8a5c1e2822605944a94c68d8d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2090356Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Commit-Queue: Matthew Mourgos <mmourgos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747926}

chrome/browser/chromeos/login/oobe_interactive_ui_test.cc

@@ -357,8 +357,8 @@ void HandleGestureNavigationScreen() {
     std::string button_id;
   } kPages[] = {{"gestureIntro", "gesture-intro-next-button"},
                 {"gestureHome", "gesture-home-next-button"},
-                {"gestureBack", "gesture-back-next-button"},
-                {"gestureOverview", "gesture-overview-next-button"}};
+                {"gestureOverview", "gesture-overview-next-button"},
+                {"gestureBack", "gesture-back-next-button"}};
 
   for (const auto& page : kPages) {
     SCOPED_TRACE(page.page_id);

chrome/browser/chromeos/login/screens/gesture_navigation_screen_browsertest.cc

@@ -55,7 +55,7 @@ class GestureNavigationScreenTest : public OobeBaseTest {
     // |oobe_dialogs| is a list of all pages within the gesture navigation
     // screen.
     const std::vector<std::string> oobe_dialogs = {
-        "gestureIntro", "gestureHome", "gestureBack", "gestureOverview"};
+        "gestureIntro", "gestureHome", "gestureOverview", "gestureBack"};
     bool dialog_page_exists = false;
 
     for (const std::string& current_page : oobe_dialogs) {
@@ -106,17 +106,18 @@ IN_PROC_BROWSER_TEST_F(GestureNavigationScreenTest, FlowTest) {
   CheckPageIsShown("gestureHome");
   test::OobeJS().TapOnPath({"gesture-navigation", "gesture-home-next-button"});
 
-  CheckPageIsShown("gestureBack");
-  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-back-next-button"});
-
-  // Now tap back buttons until intro screen is shown once again.
   CheckPageIsShown("gestureOverview");
   test::OobeJS().TapOnPath(
-      {"gesture-navigation", "gesture-overview-back-button"});
+      {"gesture-navigation", "gesture-overview-next-button"});
 
+  // Now tap back buttons until intro screen is shown once again.
   CheckPageIsShown("gestureBack");
   test::OobeJS().TapOnPath({"gesture-navigation", "gesture-back-back-button"});
 
+  CheckPageIsShown("gestureOverview");
+  test::OobeJS().TapOnPath(
+      {"gesture-navigation", "gesture-overview-back-button"});
+
   CheckPageIsShown("gestureHome");
   test::OobeJS().TapOnPath({"gesture-navigation", "gesture-home-back-button"});
 
@@ -127,13 +128,13 @@ IN_PROC_BROWSER_TEST_F(GestureNavigationScreenTest, FlowTest) {
   CheckPageIsShown("gestureHome");
   test::OobeJS().TapOnPath({"gesture-navigation", "gesture-home-next-button"});
 
-  CheckPageIsShown("gestureBack");
-  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-back-next-button"});
-
   CheckPageIsShown("gestureOverview");
   test::OobeJS().TapOnPath(
       {"gesture-navigation", "gesture-overview-next-button"});
 
+  CheckPageIsShown("gestureBack");
+  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-back-next-button"});
+
   WaitForScreenExit();
 }
 

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

@@ -65,45 +65,45 @@
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureBack" has-buttons
-        hidden="[[!isEqual_(currentPage_, 'gestureBack')]]"
-        title-key="gestureNavigationBackTitle"
-        subtitle-key="gestureNavigationBackDescription"
-        aria-label$="[[i18nDynamic(locale, 'gestureNavigationBackTitle')]]">
-      <img slot="oobe-icon" src="images/back.svg" width="32" height="32">
+    <oobe-dialog id="gestureOverview" has-buttons
+        hidden="[[!isEqual_(currentPage_, 'gestureOverview')]]"
+        title-key="gestureNavigationOverviewTitle"
+        subtitle-key="gestureNavigationOverviewDescription"
+        aria-label$="[[i18nDynamic(locale, 'gestureNavigationOverviewTitle')]]">
+      <img slot="oobe-icon" src="images/overview.svg" width="32" height="32">
       <div slot="footer" class="flex layout vertical center">
         <div class="gesture-animation-container">
-          <cr-lottie animation-url="gesture_go_back.json"
-                      class="gesture-animation">
+          <cr-lottie animation-url="gesture_hotseat_overview.json"
+                     class="gesture-animation">
           </cr-lottie>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal justified">
         <oobe-back-button on-tap="onBack_"
-            id="gesture-back-back-button"></oobe-back-button>
+            id="gesture-overview-back-button"></oobe-back-button>
         <oobe-next-button on-tap="onNext_"
-            id="gesture-back-next-button"></oobe-next-button>
+            id="gesture-overview-next-button"></oobe-next-button>
       </div>
     </oobe-dialog>
 
-    <oobe-dialog id="gestureOverview" has-buttons
-        hidden="[[!isEqual_(currentPage_, 'gestureOverview')]]"
-        title-key="gestureNavigationOverviewTitle"
-        subtitle-key="gestureNavigationOverviewDescription"
-        aria-label$="[[i18nDynamic(locale, 'gestureNavigationOverviewTitle')]]">
-      <img slot="oobe-icon" src="images/overview.svg" width="32" height="32">
+    <oobe-dialog id="gestureBack" has-buttons
+        hidden="[[!isEqual_(currentPage_, 'gestureBack')]]"
+        title-key="gestureNavigationBackTitle"
+        subtitle-key="gestureNavigationBackDescription"
+        aria-label$="[[i18nDynamic(locale, 'gestureNavigationBackTitle')]]">
+      <img slot="oobe-icon" src="images/back.svg" width="32" height="32">
       <div slot="footer" class="flex layout vertical center">
         <div class="gesture-animation-container">
-          <cr-lottie animation-url="gesture_hotseat_overview.json"
-                     class="gesture-animation">
+          <cr-lottie animation-url="gesture_go_back.json"
+                      class="gesture-animation">
           </cr-lottie>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal justified">
         <oobe-back-button on-tap="onBack_"
-            id="gesture-overview-back-button"></oobe-back-button>
+            id="gesture-back-back-button"></oobe-back-button>
         <oobe-next-button on-tap="onNext_"
-            id="gesture-overview-next-button"></oobe-next-button>
+            id="gesture-back-next-button"></oobe-next-button>
       </div>
     </oobe-dialog>
   </template>

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

@@ -11,8 +11,8 @@
 const GesturePage = {
   INTRO: 'gestureIntro',
   HOME: 'gestureHome',
-  BACK: 'gestureBack',
-  OVERVIEW: 'gestureOverview'
+  OVERVIEW: 'gestureOverview',
+  BACK: 'gestureBack'
 };
 
 Polymer({
@@ -55,12 +55,12 @@ Polymer({
         this.setCurrentPage_(GesturePage.HOME);
         break;
       case GesturePage.HOME:
-        this.setCurrentPage_(GesturePage.BACK);
-        break;
-      case GesturePage.BACK:
         this.setCurrentPage_(GesturePage.OVERVIEW);
         break;
       case GesturePage.OVERVIEW:
+        this.setCurrentPage_(GesturePage.BACK);
+        break;
+      case GesturePage.BACK:
         // Exiting the last page in the sequence - stop the animation, and
         // report exit. Keep the currentPage_ value so the UI does not get
         // updated until the next screen is shown.
@@ -79,11 +79,11 @@ Polymer({
       case GesturePage.HOME:
         this.setCurrentPage_(GesturePage.INTRO);
         break;
-      case GesturePage.BACK:
+      case GesturePage.OVERVIEW:
         this.setCurrentPage_(GesturePage.HOME);
         break;
-      case GesturePage.OVERVIEW:
-        this.setCurrentPage_(GesturePage.BACK);
+      case GesturePage.BACK:
+        this.setCurrentPage_(GesturePage.OVERVIEW);
         break;
     }
   },