material design user manager with create profile flow

chrome/browser/resources/md_user_manager/create_profile.html

Index: chrome/browser/resources/md_user_manager/create_profile.html
diff --git a/chrome/browser/resources/md_user_manager/create_profile.html b/chrome/browser/resources/md_user_manager/create_profile.html
new file mode 100644
index 0000000000000000000000000000000000000000..5787545c4e4b85dff1fe9300e3e3708f25f2bb35
--- /dev/null
+++ b/chrome/browser/resources/md_user_manager/create_profile.html
@@ -0,0 +1,70 @@
+<link rel="import" href="chrome://md-user-manager/profile_api.html">
+<link rel="import" href="chrome://resources/html/action_link.html">
+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+
+<dom-module id="create-profile">
+  <link rel="stylesheet" type="css" href="create_profile.css">
+  <link rel="stylesheet" href="chrome://resources/css/roboto.css">
+  <template>
+    <div class="container">
+      <div id="title-bar" i18n-content="createProfileTitle"></div>
+      <paper-input id="nameInput" value="{{profileName}}" pattern=".*\S.*"
+          auto-validate>
+      </paper-input>
+      <div id="icons">
+        <div id="wrapper">
+        <template is="dom-repeat" items="[[availableIconUrls]]">
+          <paper-button toggles on-tap="onIconTap_" data-icon-url$="[[item]]"
+              active$="{{isActiveIcon_(item, profileIconUrl)}}">

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

I think in most of these cases where you use the '$=' attribute binding, you
only need the '=' property binding. 

See
https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute...

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

you're right. except for "hidden" the rest are properties.

+            <img src="[[item]]">
+          </paper-button>
+        </template>
+        </div>
+      </div>
+      <div id="createSupervisedContainer">
+        <span hidden$="{{!signedIn_}}">
+          <paper-checkbox checked="{{isSupervised_}}"
+              disabled$="{{supervisedUserCheckboxDisabled_}}">
+            <span i18n-content="manageProfilesSupervisedSignedInLabel"></span>
+          </paper-checkbox>
+          <paper-dropdown-menu no-label-float>
+            <paper-menu selected="{{selectedEmail_}}" class="dropdown-content">
+              <template is="dom-repeat" items="[[signedInUsers_]]">
+                <paper-item>[[item.username]]</paper-item>
+              </template>
+            </paper-menu>
+          </paper-dropdown-menu>
+          <a id="learnMoreLink" is="action-link" i18n-content="learnMore"
+              on-tap="onLearnMore_"></a>
+        </span>
+        <span id="create-profile-supervised-not-signed-in"
+            i18n-values=".innerHTML:manageProfilesSupervisedNotSignedIn"

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

I think you can do i18n-content instead of innerHTML.

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

it seems like i18n-content sets the text content of the node. the error message
here can be HTML. 

+            hidden$="{{signedIn_}}">
+        </span>
+        </span>
+        <div id="messageBubble" hidden$="{{!errorMessage_}}"></div>

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

See the js page on comments on how to improve message bubble.

Also I think you can hide this with pure CSS, should be faster:
https://css-tricks.com/almanac/selectors/e/empty/

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

Done.

+      </div>
+      <div id="actions" class="layout horizontal end-justified">
+        <paper-spinner active$="[[createInProgress_]]"></paper-spinner>
+        <paper-button id="cancel-button" on-tap="onCancel_"
+            i18n-content="cancel">
+        </paper-button>
+        <paper-button id="ok-button" on-tap="onOk_"
+            i18n-content="createProfileConfirm"
+            disabled$="{{isOkDisabled_(createInProgress_, profileName, \

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

No line continuations. If it doesn't fit, it's okay to be over 80 characters.

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

Done.

+                errorMessage_)}}">
+        </paper-button>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://md-user-manager/create_profile.js"></script>
+</dom-module>