MD Settings: CrOS: Add secondary user banner

chrome/browser/resources/settings/basic_page/basic_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="../a11y_page/a11y_page.html">
 <link rel="import" href="../appearance_page/appearance_page.html">
 <link rel="import" href="../controls/settings_idle_render.html">
 <link rel="import" href="../downloads_page/downloads_page.html">
 <link rel="import" href="../languages_page/languages_page.html">
 <link rel="import" href="../on_startup_page/on_startup_page.html">
 <link rel="import" href="../passwords_and_forms_page/passwords_and_forms_page.html">
 <link rel="import" href="../people_page/people_page.html">
 <link rel="import" href="../printing_page/printing_page.html">
@@ skipping 31 matching lines @@
         }
         @apply(--settings-actionable);
         align-items: center;
         display: flex;
         margin-bottom: 3px;
         margin-top: 12px;  /* Part of a 48px spacer (33px + 12px + 3px). */
         min-height: 32px;
         padding: 0 12px;
       }
 
+      #secondaryUserBanner {
+        @apply(--shadow-elevation-2dp);
+        background-color: white;
+        border-radius: 2px;
+        margin: 21px 0;
+      }
+
+      #secondaryUserIcon {
+        background-color: rgb(210, 210, 212);
+        background-image: url(chrome://theme/IDR_SECONDARY_USER_SETTINGS);
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 55px;
+        margin: 18px;
+        width: 58px;
+      }
+
       #toggleContainer {
         align-items: center;
         display: flex;
         font: inherit;
         justify-content: center;
         margin-bottom: 0;
         margin-top: 0;
       }
 
       #toggleSpacer {
         padding-top: 33px;  /* Part of a 48px spacer (33px + 12px + 3px). */
       }
 
       iron-icon {
         -webkit-margin-start: 16px;
       }
     </style>
     <template is="dom-if" if="[[showBasicPage_(
         currentRoute_, inSearchMode, hasExpandedSection_)]]">
       <div id="basicPage">
         <template is="dom-if" if="[[showResetProfileBanner_]]">
           <settings-reset-profile-banner on-reset-done="onResetDone_">
           </settings-reset-profile-banner>
         </template>
 <if expr="chromeos">
+        <template is="dom-if" if="[[showSecondaryUserBanner_]]">

[dschuyler, 2017/02/11 02:54:56]

Since this just contains divs, this may be lighter (faster to set up) as a
hidden on the div below rather than a template. 

When a template hides something that outweighs the contents then the template
saves set up time, but I think it's likely that the template outweighs the
contents in this case. 

[stevenjb, 2017/02/13 18:28:00]

I'm pretty sure it doesn't really matter, especially since there are other
dom-ifs here, and I kind of prefer the similarity with the code above, but
that's going away, and it probably doesn't matter... so done :)

+          <div id="secondaryUserBanner" class="layout horizontal center">
+            <div id="secondaryUserIcon"></div>
+            <div class="flex">$i18n{secondaryUserBannerText}</div>
+          </div>
+        </template>
+</if>
+<if expr="chromeos">
         <template is="dom-if" if="[[showPage(pageVisibility.internet)]]"
             restamp>
           <settings-section page-title="$i18n{internetPageTitle}"
               section="internet">
             <settings-internet-page prefs="{{prefs}}">
             </settings-internet-page>
           </settings-section>
         </template>
         <template is="dom-if" if="[[showPage(pageVisibility.bluetooth)]]"
             restamp>
@@ skipping 155 matching lines @@
                 section="reset">
               <settings-reset-page></settings-reset-page>
             </settings-section>
           </template>
         </div>
       </template>
     </div>
   </template>
   <script src="basic_page.js"></script>
 </dom-module>