material design user manager with create profile flow

chrome/browser/resources/md_user_manager/user_manager_tutorial.js

Index: chrome/browser/resources/md_user_manager/user_manager_tutorial.js
diff --git a/chrome/browser/resources/md_user_manager/user_manager_tutorial.js b/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
new file mode 100644
index 0000000000000000000000000000000000000000..fc5f5bbcd0ee32f397ef4d77db07607686c0f30d
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
@@ -0,0 +1,75 @@
+/* Copyright 2016 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.
+ */
+
+Polymer({
+  is: 'user-manager-tutorial',
+
+  properties: {
+    hidden: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  ready: function() {
+    this.slides_ = ['yourChrome',
+                    'friends',
+                    'guests',
+                    'complete',
+                    'notYou'];
+  },
+
+  addUser: function(e) {
+    // Event is caught by user-manager-pages.
+    this.fire('change-page', {page: 'create-user-page'});
+  },
+
+  isSlideHidden_: function(currentStep, slide) {
+    return this.slides_[currentStep] != slide;
+  },
+
+  next_: function() {
+    var nextStep = this.currentStep_ + 1;
+
+    // The last tutorial step is an information bubble that ends the tutorial.
+    if (nextStep >= this.slides_.length)
+      this.endTutorial_();
+    else
+      this.currentStep_ = nextStep;
+  },
+
+  handleAddUser_: function(e) {
+    this.endTutorial_();
+    // Event is caught by user-manager-pages.
+    this.fire('change-page', {page: 'create-user-page'});
+  },
+
+  startTutorial: function() {
+    /**
+     * Current tutorial step, index in the slides array.
+     * @type {number}
+     */
+    this.currentStep_ = 0;
+
+    this.hidden = false;
+
+    // If there's only one pod, show the slides to the side of the pod.
+    // Otherwise, center the slides and disable interacting with the pods
+    // while the tutorial is showing.
+    if ($('pod-row').pods.length == 1) {
+      this.$.yourChrome.classList.add('single-pod');
+      this.$.complete.classList.add('single-pod');
+    }
+
+    $('pod-row').focusPod();  // No focused pods.
+    $('inner-container').classList.add('disabled');
+  },
+
+  endTutorial_: function(e) {
+    $('inner-container').classList.remove('disabled');
+    this.hidden = true;
+  }
+
+});