MD user manager (learn more page, user manager tutorial)

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..d4230d8eac8cab0d76fc113b23234c74ab0f6f62
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/user_manager_tutorial.js
@@ -0,0 +1,112 @@
+// 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.
+
+/**
+ * @fileoverview 'user-manager-tutorial' is the element that controls the
+ * tutorial steps for the user manager page.
+ */
+Polymer({
+  is: 'user-manager-tutorial',
+
+  behaviors: [
+    I18nBehavior,
+  ],
+
+  properties: {
+    /**
+     * True if the tutorial is currently hidden.
+     * @private {boolean}
+     */
+    hidden_: {
+      type: Boolean,
+      value: true
+    },
+
+    /**
+     * Current tutorial step ID.
+     * @type {string}
+     */
+    currentStep_: {
+      type: String,
+      value: ''
+    },
+
+    /**
+     * Enum values for the step IDs.
+     * @private {!Object<string, string>}

[Dan Beam, 2016/03/25 02:39:14]

nit: only strings can be object keys in js, so this is equivalent to:

  * @private {!Object<string>}

however, I think you should make an enum instead

(function() {

/** @enum {string} */
var TutorialSteps = {
  YOUR_CHROME: 'yourChrome',
  FRIENDS: 'friends',
  GUESTS: 'guests',
  COMPLETE: 'complete',
  NOT_YOU: 'notYou',
};

...

Polymer({
  ...
  properties: {
    steps_: {
      type: Object,
      value: TutorialSteps,
    },
  }
...
});

}());

[Moe, 2016/03/29 18:54:39]

Done.

+     */
+    steps_: {
+      readOnly: true,
+      type: Object,
+      value: {
+        YOUR_CHROME: 'yourChrome',
+        FRIENDS: 'friends',
+        GUESTS: 'guests',
+        COMPLETE: 'complete',
+        NOT_YOU: 'notYou'
+      }
+    }
+  },
+
+  /**
+   * Determines whether a given step is displaying.
+   * @param {string} currentStep Index of the current step
+   * @param {string} step Name of the given step
+   * @return {boolean}
+   * @private
+   */
+  isStepHidden_: function(currentStep, step) {
+    return currentStep != step;
+  },
+
+  /**
+   * Navigates to the next step.
+   * @param {!Event} event
+   * @private
+   */
+  onNextTap_: function(event) {
+    var element = Polymer.dom(event).rootTarget;
+    this.currentStep_ = element.dataset.next;
+  },
+
+  /**
+   * 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
+   */
+  onAddUserTap_: function(event) {
+    this.onDissmissTap_();
+    // Event is caught by user-manager-pages.
+    this.fire('change-page', {page: 'create-user-page'});
+  },
+
+  /**
+   * Starts the tutorial.
+   */
+  startTutorial: function() {
+    this.currentStep_ = this.steps_.YOUR_CHROME;
+    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.
+    var podRow = /** @type {{focusPod: !function(), pods: !Array}} */

[Dan Beam, 2016/03/25 02:39:14]

i still think this is a bummer to cast to instead of a real element's API

[Moe, 2016/03/29 18:54:39]

I agree. I did try adding a compiled_resources2.gyp target for user_pod_row and
including it as a dependency. Unfortunately it doesn't really compile with the
closure compiler (due to bad annotation and missing dependencies) and I'm afraid
fixing it might require a lot of work.

+        ($('pod-row'));
+
+    this.classList.toggle('single-pod', podRow.pods.length == 1);
+
+    podRow.focusPod();  // No focused pods.
+    $('inner-container').classList.add('disabled');
+  },
+
+  /**
+   * Ends the tutorial.
+   * @private
+   */
+  onDissmissTap_: function() {
+    $('inner-container').classList.remove('disabled');
+    this.hidden_ = true;
+  }
+});