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

chrome/browser/resources/md_user_manager/user_manager_tutorial.html

Index: chrome/browser/resources/md_user_manager/user_manager_tutorial.html
diff --git a/chrome/browser/resources/md_user_manager/user_manager_tutorial.html b/chrome/browser/resources/md_user_manager/user_manager_tutorial.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f3ade69892cedc0894b02b9382e231c67e0e12c
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/user_manager_tutorial.html
@@ -0,0 +1,81 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+
+<dom-module id="user-manager-tutorial">
+  <link rel="import" type="css"
+      href="chrome://md-user-manager/user_manager_tutorial.css">
+  <template>
+    <div hidden$="{{hidden}}">

[Dan Beam, 2016/02/25 17:22:07]

you should probably use dom-if for large amounts of hidden UI

[Moe, 2016/03/02 18:25:52]

I like your suggestion. But when I use dom-if i run into this problem that i18n
content don't get processed when an element is inside a dom-if that evaluates to
false which seems like an expected side effect. If the element isn't attached to
the DOM we can't expect i18n content to be scanned and processed. How do you
solve that problem?

I'm having the same problem with create_profile.html which I noticed now and I'm
reverting in this patch.

+      <div class="tutorial-slide" id="yourChrome"
+          hidden$="{{isStepHidden_(currentStep_, 'yourChrome')}}">
+        <div class="slide-image"></div>
+        <div class="slide-contents">
+          <div class="slide-title" i18n-content="slideYourChromeTitle"></div>
+          <div class="slide-text" i18n-content="slideYourChromeText"></div>
+        </div>
+        <div class="slide-buttons">
+          <paper-button on-tap="next_" i18n-content="tutorialNext">
+          </paper-button>
+        </div>
+      </div>
+
+      <div class="tutorial-slide" id="guests"
+          hidden$="{{isStepHidden_(currentStep_, 'guests')}}">
+        <div class="slide-image"></div>
+        <div class="slide-contents">
+          <div class="slide-title" i18n-content="slideGuestsTitle"></div>
+          <div class="slide-text" i18n-content="slideGuestsText"></div>
+        </div>
+        <div class="slide-buttons">
+          <paper-button on-tap="next_" i18n-content="tutorialNext">
+          </paper-button>
+        </div>
+        <div class="arrow-down"></div>
+      </div>
+
+      <div class="tutorial-slide" id="friends"
+          hidden$="{{isStepHidden_(currentStep_, 'friends')}}">
+        <div class="slide-image"></div>
+        <div class="slide-contents">
+          <div class="slide-title" i18n-content="slideFriendsTitle"></div>
+          <div class="slide-text" i18n-content="slideFriendsText"></div>
+        </div>
+        <div class="slide-buttons">
+          <paper-button on-tap="next_" i18n-content="tutorialNext">
+          </paper-button>
+        </div>
+        <div class="arrow-down"></div>
+      </div>
+
+      <div class="tutorial-slide" id="complete"
+          hidden$="{{isStepHidden_(currentStep_, 'complete')}}">
+        <div class="slide-image"></div>
+        <div class="slide-contents">
+          <div class="slide-title" i18n-content="slideCompleteTitle"></div>
+          <div class="slide-text" i18n-content="slideCompleteText"></div>
+        </div>
+        <div class="slide-buttons">
+          <paper-button on-tap="next_" i18n-content="tutorialDone">
+          </paper-button>
+        </div>
+      </div>
+
+      <div class="tutorial-slide" id="notYou"
+          hidden$="{{isStepHidden_(currentStep_, 'notYou')}}">
+        <paper-button id="dismiss-bubble-button" on-tap="endTutorial_">
+          <img src="chrome://theme/IDR_CLOSE_1">
+        </paper-button>
+        <div class="slide-buttons">
+          <div class="slide-text" i18n-content="slideCompleteUserNotFound">
+          </div>
+          <div id="slide-add-user">
+            <a is="action-link" on-tap="handleAddUser_"

[Dan Beam, 2016/02/25 17:22:07]

nit: everywhere else (downloads, settings, history) we've been doing something
along the lines of:

<element id=blah on-tap="onBlahTap_">

as in: on<ID><action>_

[Moe, 2016/03/02 18:25:52]

+1. Done.

+                i18n-content="slideCompleteAddUser"></a>
+          </div>
+        </div>
+        <div class="arrow-down"></div>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://md-user-manager/user_manager_tutorial.js"></script>
+</dom-module>