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..6b2b8160ca5ea8226dba5ed145071b48ca649011
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
@@ -0,0 +1,120 @@
+/* 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.
+ */
+
+/**

[Moe, 2016/02/05 17:58:39]

@tommy, not sure if this is the right way to quiet the closure compiler warning
about $(pod-row) not having "pods" and "focusPod()" properties defined.

[tommycli, 2016/02/08 18:45:19]

I think when you create podRow variable, down on line 100, you typecast it to an
object with these properties.

https://developers.google.com/closure/compiler/docs/js-for-compiler#instantia...
https://groups.google.com/forum/#!topic/closure-compiler-discuss/cf_r0oet4y4

Try that and let me know if it doesn't work. Thanks.

[Moe, 2016/02/09 00:15:34]

Done.

[Moe, 2016/02/09 00:15:34]

It worked. Thank you!

+ * A PodRow holding user pods.
+ * @constructor
+ * @extends {HTMLElement}
+ */
+function PodRow() {}
+/** Focuses a given user pod or clear focus when given null. */
+PodRow.prototype.focusPod = function() {};
+/** User Pods. */
+PodRow.prototype.pods = null;
+
+/**
+ * @fileoverview
+ * 'user-manager-tutorial' is the element that controls the tutorial steps for
+ * the user manager page.
+ *
+ * @element user-manager-tutorial
+ */
+Polymer({
+  is: 'user-manager-tutorial',
+
+  properties: {
+    /**
+     * Controls whether the tutorial is showing.
+     * @type {boolean}
+     */
+    hidden: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  /** @override */
+  attached: function() {
+    this.steps_ = ['yourChrome',
+                    'friends',

[tommycli, 2016/02/08 18:45:19]

alignment

[Moe, 2016/02/09 00:15:34]

Done.

+                    'guests',
+                    'complete',
+                    'notYou'];
+  },
+
+  /**
+   * Determines whether a given step is displaying.
+   * @param {!string} currentStep Index of the current step
+   * @param {!string} step Name of the given step
+   * @private
+   * @return {boolean}
+   */
+  isStepHidden_: function(currentStep, step) {
+    return this.steps_[currentStep] != step;
+  },
+
+  /**
+   * Navigates to the next step.
+   * @private
+   */
+  next_: function() {
+    var nextStep = this.currentStep_ + 1;
+
+    // The last tutorial step is an information bubble that ends the tutorial.
+    if (nextStep >= this.steps_.length)
+      this.endTutorial_();
+    else
+      this.currentStep_ = nextStep;
+  },
+
+  /**
+   * Handler for the link in the last step. Takes user to the create-profile
+   * page in order to add a new profile.
+   * @param {!Event} event
+   * @private
+   */
+  handleAddUser_: function(event) {
+    this.endTutorial_();
+    // Event is caught by user-manager-pages.
+    this.fire('change-page', {page: 'create-user-page'});
+  },
+
+  /**
+   * Starts the tutorial.
+   */
+  startTutorial: function() {
+    /**
+     * Current tutorial step, index in the steps array.
+     * @type {number}
+     */
+    this.currentStep_ = 0;
+    this.hidden = false;
+
+    // If there's only one pod, show the steps to the side of the pod.
+    // Otherwise, center the steps and disable interacting with the pods
+    // while the tutorial is showing.
+
+    /** @extends {PodRow} */
+    var podRow = $('pod-row');
+
+    if (podRow.pods.length == 1) {
+      this.$.yourChrome.classList.add('single-pod');
+      this.$.complete.classList.add('single-pod');
+    }
+
+    podRow.focusPod();  // No focused pods.
+    $('inner-container').classList.add('disabled');
+  },
+
+  /**
+   * Ends the tutorial.
+   * @private
+   */
+  endTutorial_: function() {
+    $('inner-container').classList.remove('disabled');
+    this.hidden = true;
+  }
+
+});