MD User Manager: latest design change, css refactoring, accessiblity, and bug fixes

chrome/browser/resources/md_user_manager/create_profile.html

 <link rel="import" href="chrome://md-user-manager/import_supervised_user.html">
 <link rel="import" href="chrome://md-user-manager/profile_browser_proxy.html">
 <link rel="import" href="chrome://md-user-manager/shared_styles.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/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.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">
 
 <dom-module id="create-profile">
-  <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <template>
     <style include="shared-styles">
       .container {
-        color: var(--paper-grey-800);
+        color: var(--main-text-color);
         margin: 0 auto;
         width: 624px;
       }
 
       #message-container {
         background-color: var(--google-red-700);
         color: white;
         left: 0;
         overflow: hidden;
         padding: 10px 16px;
@@ skipping 18 matching lines @@
 
       #title-bar {
         border-bottom: 1px solid rgba(0, 0, 0, .12);
         font-size: 16px;
         font-weight: 500;
         padding: 104px 0 16px;
       }
 
       #nameInput,
       paper-dropdown-menu {
-        --paper-input-container: {
-          padding: 0;
-        };
         --paper-input-container-input: {
           color: inherit;
           font-size: inherit;
         };
       }
 
       #nameInput {
         margin-bottom: 24px;
         margin-top: 32px;
         width: 300px;
       }
 
-      paper-dropdown-menu {
-        margin-top: 12px;
-        width: 200px;
-      }
-
-      paper-menu {
-        --paper-menu: {
-          color: inherit;
-          padding: 0;
-        };
-        --paper-menu-selected-item: {
-          font-weight: normal;
-        }
-      }
-
-      paper-menu paper-item {
-        font-size: inherit;
-        min-height: 40px;
-      }
-
       #icons #wrapper {
         display: flex;
         flex-wrap: wrap;
         margin: -12px;
       }
 
       #icons paper-button {
         background: var(--paper-grey-300);
         border: 1px solid rgba(0, 0, 0, .12);
         margin: 12px;
         min-width: 0;
         padding: 6px 4px;
+        --paper-button-flat-keyboard-focus: {
+          outline: auto;
+        };
       }
 
       #icons paper-button[active] {
         border-color: var(--google-blue-500);
       }
 
-      #icons paper-button:focus:not([active]) {
-        outline: 1px dotted #666;
-      }
-
       #supervised-user-container {
         margin-top: 24px;
       }
 
       #supervised-user-container paper-checkbox {
+        --primary-text-color: var(--main-text-color);
         --paper-checkbox-label-spacing: 16px;
         --paper-checkbox-size: 20px;
       }
 
-      #supervised-user-container #learn-more-accounts {
+      #supervised-user-container #learn-more-custodians {
         -webkit-margin-start: 36px;
       }
 
       #supervised-user-container #learn-more {
-        display: block;
         line-height: 20px;
       }
 
-      #supervised-user-container #import-user {
+      #supervised-user-container paper-dropdown-menu {
+        margin-top: 4px;
+        width: 200px;
+      }
+
+      #supervised-user-container paper-menu {
+        --paper-menu: {
+          color: inherit;
+          padding: 0;
+        };
+        --paper-menu-selected-item: {
+          font-weight: normal;
+        };
+      }
+
+      #supervised-user-container paper-menu paper-item {
+        font-size: inherit;
+        min-height: 40px;
+      }
+
+      #supervised-user-container #import-user-link {
         -webkit-margin-start: 16px;
       }
 
+      #supervised-user-container #sign-in-howto-message {
+        margin-top: 12px;
+      }
+
       #actions {
         bottom: 16px;
         display: flex;
         position: absolute;
         right: 16px;
       }
 
       :host-context([dir='rtl']) #actions {
         left: 16px;
         right: auto;
       }
 
-      #actions paper-button {
-        border-radius: 2px;
-        font-weight: 500;
-        line-height: 32px;
-        margin: 0;
-        min-width: 52px;
-        padding: 0 16px;
-      }
-
       #actions paper-spinner {
         align-self: center;
         height: 20px;
         width: 20px;
       }
-
-      #actions #cancel {
-        color: var(--paper-grey-600);
-      }
-
-      #actions #save {
-        -webkit-margin-start: 8px;
-        background: var(--google-blue-500);
-        color: white;
-      }
-
-      #actions #save[disabled] {
-        background: rgba(66, 133, 244, .5);
-      }
     </style>
     <div id="message-container" hidden="[[!message_]]">
       <iron-icon icon="warning"></iron-icon>
       <span id="message" inner-h-t-m-l="[[message_]]"></span>
     </div>
     <div class="container">
-      <div id="title-bar" i18n-content="createProfileTitle"></div>
+      <div id="title-bar">$i18n{createProfileTitle}</div>
       <paper-input id="nameInput" value="{{profileName_}}" pattern=".*\S.*"
           no-label-float 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_)]]">
             <img src="[[item]]">
           </paper-button>
         </template>
         </div>
       </div>
-      <template is="dom-if" if="[[isSignedIn_(signedInUsers_)]]">
-        <div id="supervised-user-container">
-          <paper-checkbox checked="{{isSupervised_}}">
-            [[i18n('manageProfilesSupervisedSignedInLabel')]]
-          </paper-checkbox>
-          <div id="learn-more-accounts">
-            <a id="learn-more" is="action-link" on-tap="onLearnMoreTap_">
-              [[i18n('learnMore')]]
-            </a>
+      <div id="supervised-user-container">
+        <paper-checkbox checked="{{isSupervised_}}">
+          $i18n{manageProfilesSupervisedSignedInLabel}
+        </paper-checkbox>
+        <div id="learn-more-custodians">
+          <a id="learn-more" is="action-link" on-tap="onLearnMoreTap_">
+            $i18n{learnMore}
+          </a>
+          <div id="custodians">
             <template is="dom-if" if="[[isSupervised_]]">
-              <paper-dropdown-menu no-label-float>
-                <paper-menu class="dropdown-content"
-                    selected="{{signedInUserIndex_}}"
-                    attr-for-selected="data-user-index">
-                  <paper-item data-user-index$="[[NO_USER_SELECTED]]">
-                    [[i18n('selectAnAccount')]]
-                  </paper-item>
-                  <template is="dom-repeat" items="[[signedInUsers_]]">
-                    <paper-item data-user-index$="[[index]]">
-                      [[item.username]]
+              <template is="dom-if" if="[[isSignedIn_(signedInUsers_)]]">
+                <paper-dropdown-menu no-label-float>
+                  <paper-menu class="dropdown-content"
+                      selected="{{signedInUserIndex_}}"
+                      attr-for-selected="data-user-index">
+                    <paper-item data-user-index$="[[NO_USER_SELECTED]]">
+                      $i18n{selectAnAccount}
                     </paper-item>
-                  </template>
-                </paper-menu>
-              </paper-dropdown-menu>
-              <a id="import-user" is="action-link" on-tap="onImportUserTap_"
-                  hidden="[[isImportUserLinkHidden_(createInProgress_,
-                                                    signedInUserIndex_)]]">
-                [[i18n('importExistingSupervisedUserLink')]]
-              </a>
+                    <template is="dom-repeat" items="[[signedInUsers_]]">
+                      <paper-item data-user-index$="[[index]]">
+                        [[item.username]]
+                      </paper-item>
+                    </template>
+                  </paper-menu>
+                </paper-dropdown-menu>
+                <a id="import-user-link" is="action-link"
+                    on-tap="onImportUserLinkTap_"
+                    hidden="[[isImportUserLinkHidden_(createInProgress_,
+                                                      signedInUserIndex_)]]">
+                  $i18n{importExistingSupervisedUserLink}
+                </a>
+              </template>
+              <div id="sign-in-howto-message"
+                  hidden="[[isSignedIn_(signedInUsers_)]]"
+                  inner-h-t-m-l="[[i18n('noSignedInUserMessage')]]">
+              </div>
             </template>
           </div>
         </div>
-      </template>
+      </div>
       <div id="actions">
         <paper-spinner active="[[createInProgress_]]"></paper-spinner>
-        <paper-button id="cancel" on-tap="onCancelTap_" i18n-content="cancel">
+        <paper-button id="cancel" class="action secondary"
+            on-tap="onCancelTap_">
+          $i18n{cancel}
         </paper-button>
-        <paper-button id="save" on-tap="onSaveTap_"
-            i18n-content="createProfileConfirm"
+        <paper-button id="save" class="action primary" on-tap="onSaveTap_"
             disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]">
+          $i18n{createProfileConfirm}
         </paper-button>
       </div>
       <import-supervised-user id="importUserPopup"></import-supervised-user>
     </div>
   </template>
   <script src="chrome://md-user-manager/create_profile.js"></script>
 </dom-module>