OOBE: Add back buttons to gesture navigation screen

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

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

@@ -109,6 +109,27 @@ IN_PROC_BROWSER_TEST_F(GestureNavigationScreenTest, FlowTest) {
   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"});
+
+  CheckPageIsShown("gestureBack");
+  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-back-back-button"});
+
+  CheckPageIsShown("gestureHome");
+  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-home-back-button"});
+
+  // Go through flow all the way to screen exit.
+  CheckPageIsShown("gestureIntro");
+  test::OobeJS().TapOnPath({"gesture-navigation", "gesture-intro-next-button"});
+
+  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"});

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

@@ -57,7 +57,9 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+      <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_"
             id="gesture-home-next-button"></oobe-next-button>
       </div>
@@ -76,7 +78,9 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+      <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_"
             id="gesture-back-next-button"></oobe-next-button>
       </div>
@@ -95,7 +99,9 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+      <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_"
             id="gesture-overview-next-button"></oobe-next-button>
       </div>

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

@@ -45,7 +45,7 @@ Polymer({
   },
 
   /**
-   * This is 'on-tap' event handler for 'next' or 'get started' button.
+   * This is the 'on-tap' event handler for the 'next' or 'get started' button.
    * @private
    *
    */
@@ -70,6 +70,24 @@ Polymer({
     }
   },
 
+  /**
+   * This is the 'on-tap' event handler for the 'back' button.
+   * @private
+   */
+  onBack_() {
+    switch (this.currentPage_) {
+      case GesturePage.HOME:
+        this.setCurrentPage_(GesturePage.INTRO);
+        break;
+      case GesturePage.BACK:
+        this.setCurrentPage_(GesturePage.HOME);
+        break;
+      case GesturePage.OVERVIEW:
+        this.setCurrentPage_(GesturePage.BACK);
+        break;
+    }
+  },
+
   /**
    * Set the new page, making sure to stop the animation for the old page and
    * start the animation for the new page.