WebUI user-manager: Replace neon-animated-pages with cr-view-manager.

Also ensure that JS type checking runs on non-ChromeOS. It was erroneously
running on ChromeOS only.

Bug: 902959
Change-Id: Ibd67a276325ac1e4461509341f6a198e27e9dabe
Reviewed-on: https://chromium-review.googlesource.com/c/1327420
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#606688}

chrome/browser/resources/BUILD.gn

@@ -20,6 +20,7 @@ if (closure_compile) {
         "md_bookmarks:closure_compile",
         "md_downloads:closure_compile",
         "md_history:closure_compile",
+        "md_user_manager:closure_compile",
         "media_router:closure_compile",
         "ntp4:closure_compile",
         "omnibox:closure_compile",
@@ -27,15 +28,12 @@ if (closure_compile) {
         "print_preview:closure_compile",
         "settings:closure_compile",
         "signin/dice_sync_confirmation:closure_compile",
+        "welcome/dice_welcome:closure_compile",
         "welcome/onboarding_welcome:closure_compile",
       ]
     }
     if (is_chromeos) {
-      deps += [
-        "chromeos:closure_compile",
-        "md_user_manager:closure_compile",
-        "welcome/dice_welcome:closure_compile",
-      ]
+      deps += [ "chromeos:closure_compile" ]
     }
     if (enable_extensions) {
       deps += [ "md_extensions:closure_compile" ]

chrome/browser/resources/md_user_manager/BUILD.gn

@@ -44,6 +44,9 @@ js_library("profile_browser_proxy") {
 }
 
 js_library("user_manager_pages") {
+  deps = [
+    "//ui/webui/resources/cr_elements/cr_view_manager:cr_view_manager",
+  ]
 }
 
 js_library("user_manager_tutorial") {

chrome/browser/resources/md_user_manager/user_manager_pages.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="/create_profile.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-in-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/animations/fade-out-animation.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animated-pages.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/web-animations.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_view_manager/cr_view_manager.html">
 
 <dom-module id="user-manager-pages">
   <template>
     <style>
-      neon-animated-pages {
+      cr-view-manager {
+        display: block;
         height: 100%;
       }
 
-      neon-animatable {
+      div.active[slot='view'],
+      div.closing[slot='view'] {
+        align-items: center;
         display: flex;
         justify-content: center;
       }
-
-      /* neon-animated-pages does not automatically hide what's under content */
-      neon-animatable:not(.iron-selected) ::slotted(*) {
-        display: none !important;
-      }
     </style>
-    <neon-animated-pages id="animatedPages" attr-for-selected="id"
-        selected="[[selectedPage_]]" entry-animation="fade-in-animation"
-        exit-animation="fade-out-animation">
-      <neon-animatable id="create-user-page" on-keydown="stopPropagation_">
+    <cr-view-manager id="animatedPages" role="main">
+      <div id="create-user-page" slot="view" on-keydown="stopPropagation_">
         <!-- Keep the page alive while visiting the Learn More page. -->
         <template is="dom-if"
             if="[[isPresentIn_(selectedPage_,
@@ -35,18 +27,18 @@
                                'supervised-learn-more-page')]]" restamp>
           <create-profile></create-profile>
         </template>
-      </neon-animatable>
-      <neon-animatable id="user-pods-page">
+      </div>
+      <div id="user-pods-page" slot="view">
           <slot></slot>
-      </neon-animatable>
-      <neon-animatable id="supervised-learn-more-page"
+      </div>
+      <div id="supervised-learn-more-page" slot="view"
           on-keydown="stopPropagation_">
         <template is="dom-if"
             if="[[isPresentIn_(selectedPage_, 'supervised-learn-more-page')]]">
           <supervised-user-learn-more></supervised-user-learn-more>
         </template>
-      </neon-animatable>
-      <neon-animatable id="supervised-create-confirm-page"
+      </div>
+      <div id="supervised-create-confirm-page" slot="view"
           on-keydown="stopPropagation_">
         <template is="dom-if"
             if="[[isPresentIn_(selectedPage_,
@@ -54,8 +46,8 @@
           <supervised-user-create-confirm profile-info="[[pageData_]]">
           </supervised-user-create-confirm>
         </template>
-      </neon-animatable>
-    </neon-animated-pages>
+      </div>
+    </cr-view-manager>
   </template>
   <script src="user_manager_pages.js"></script>
 </dom-module>

chrome/browser/resources/md_user_manager/user_manager_pages.js

@@ -12,9 +12,9 @@ Polymer({
   properties: {
     /**
      * ID of the currently selected page.
-     * @private {string}
+     * @private
      */
-    selectedPage_: {type: String, value: 'user-pods-page'},
+    selectedPage_: String,
 
     /**
      * Data passed to the currently selected page.
@@ -25,6 +25,11 @@ Polymer({
 
   listeners: {'change-page': 'onChangePage_'},
 
+  /** @override */
+  attached: function() {
+    this.setSelectedPage('user-pods-page');
+  },
+
   /**
    * Handler for the change-page event.
    * @param {Event} e The event containing ID of the page that is to be selected
@@ -43,6 +48,8 @@ Polymer({
   setSelectedPage: function(pageId, opt_pageData) {
     this.pageData_ = opt_pageData || null;
     this.selectedPage_ = pageId;
+    /** @type {CrViewManagerElement} */ (this.$.animatedPages)
+        .switchView(this.selectedPage_);
   },
 
   /**