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

chrome/browser/resources/md_user_manager/user_manager_tutorial.html

 <link rel="import" href="chrome://md-user-manager/shared_styles.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/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="user-manager-tutorial">
-  <link rel="import" type="css" href="chrome://resources/css/action_link.css">
   <template>
     <style include="shared-styles">
       .tutorial-slide {
         -webkit-transition: opacity 200ms ease-in-out;
         background-color: white;
         border-radius: 2px;
         bottom: 0;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
         height: 408px;
         left: 0;
@@ skipping 61 matching lines @@
         line-height: 20px;
       }
 
       .slide-buttons {
         bottom: 20px;
         position: absolute;
         text-align: center;
         width: 100%;
       }
 
-      .slide-buttons [is='action-link'] {
-        width: 100%;
-      }
-
       .slide-buttons button {
         bottom: 0;
         height: 35px;
         padding: 0 15px;
         width: 138px;
       }
 
       .arrow-down {
         border-left: 15px solid transparent;
         border-right: 15px solid transparent;
@@ skipping 60 matching lines @@
         left: 5px;
         right: auto;
       }
     </style>
     <template is="dom-if" if="[[!hidden_]]">
       <template is="dom-if"
           if="[[!isStepHidden_(currentStep_, steps_.YOUR_CHROME)]]">
         <div class="tutorial-slide" id="[[steps_.YOUR_CHROME]]">
           <div class="slide-image"></div>
           <div class="slide-contents">
-            <div class="slide-title">[[i18n('slideYourChromeTitle')]]</div>
-            <div class="slide-text">[[i18n('slideYourChromeText')]]</div>
+            <div class="slide-title">$i18n{slideYourChromeTitle}</div>
+            <div class="slide-text">$i18n{slideYourChromeText}</div>
           </div>
           <div class="slide-buttons">
             <paper-button on-tap="onNextTap_" data-next$="[[steps_.GUESTS]]">
-              [[i18n('tutorialNext')]]
+              $i18n{tutorialNext}
             </paper-button>
           </div>
         </div>
       </template>
       <template is="dom-if"
           if="[[!isStepHidden_(currentStep_, steps_.GUESTS)]]">
         <div class="tutorial-slide" id="[[steps_.GUESTS]]">
           <div class="slide-image"></div>
           <div class="slide-contents">
-            <div class="slide-title">[[i18n('slideGuestsTitle')]]</div>
-            <div class="slide-text">[[i18n('slideGuestsText')]]</div>
+            <div class="slide-title">$i18n{slideGuestsTitle}</div>
+            <div class="slide-text">$i18n{slideGuestsText}</div>
           </div>
           <div class="slide-buttons">
             <paper-button on-tap="onNextTap_" data-next$="[[steps_.FRIENDS]]">
-              [[i18n('tutorialNext')]]
+              $i18n{tutorialNext}
             </paper-button>
           </div>
           <div class="arrow-down"></div>
         </div>
       </template>
       <template is="dom-if"
           if="[[!isStepHidden_(currentStep_, steps_.FRIENDS)]]">
         <div class="tutorial-slide" id="[[steps_.FRIENDS]]">
           <div class="slide-image"></div>
           <div class="slide-contents">
-            <div class="slide-title">[[i18n('slideFriendsTitle')]]</div>
-            <div class="slide-text">[[i18n('slideFriendsText')]]</div>
+            <div class="slide-title">$i18n{slideFriendsTitle}</div>
+            <div class="slide-text">$i18n{slideFriendsText}</div>
           </div>
           <div class="slide-buttons">
             <paper-button on-tap="onNextTap_" data-next$="[[steps_.COMPLETE]]">
-              [[i18n('tutorialNext')]]
+              $i18n{tutorialNext}
             </paper-button>
           </div>
           <div class="arrow-down"></div>
         </div>
       </template>
       <template is="dom-if"
           if="[[!isStepHidden_(currentStep_, steps_.COMPLETE)]]">
         <div class="tutorial-slide" id="[[steps_.COMPLETE]]">
           <div class="slide-image"></div>
           <div class="slide-contents">
-            <div class="slide-title">[[i18n('slideCompleteTitle')]]</div>
-            <div class="slide-text">[[i18n('slideCompleteText')]]</div>
+            <div class="slide-title">$i18n{slideCompleteTitle}</div>
+            <div class="slide-text">$i18n{slideCompleteText}</div>
           </div>
           <div class="slide-buttons">
             <paper-button on-tap="onNextTap_" data-next$="[[steps_.NOT_YOU]]">
-              [[i18n('tutorialDone')]]
+              $i18n{tutorialDone}
             </paper-button>
           </div>
         </div>
       </template>
       <template is="dom-if" if="[[!isStepHidden_(currentStep_, 'notYou')]]">
         <div class="tutorial-slide" id="notYou">
           <iron-icon id="dismiss" icon="close" on-tap="onDissmissTap_">
           </iron-icon>
           <div class="slide-buttons">
             <div class="slide-text">
-              [[i18n('slideCompleteUserNotFound')]]
+              $i18n{slideCompleteUserNotFound}
             </div>
             <div id="slide-add-user">
               <a id="addUser" is="action-link" on-tap="onAddUserTap_">
-                [[i18n('slideCompleteAddUser')]]
+                $i18n{slideCompleteAddUser}
               </a>
             </div>
           </div>
           <div class="arrow-down"></div>
         </div>
       </template>
     </template>
   </template>
   <script src="chrome://md-user-manager/user_manager_tutorial.js"></script>
 </dom-module>