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);

[dschuyler, 2017/02/13 21:45:59]

Is there an MD color we can use here (maybe grey 200)?

[dschuyler, 2017/02/13 22:18:47]

To give more options, any of these would be ok with me:
- use a predefined color variable
- create a new color var (in settings_vars_css.html) and use it here
- add a TODO that this rgb color needs to be replaced with a var

(The goal is to define colors in just a few places so that UX updates to colors
can be applied easily).

[stevenjb, 2017/02/13 22:59:24]

TODO added. I wanted to avoid an arbitrary change from the old UI without a
design.

FWIW, I am a huge fan of using shared colors/variables. However, I am concerned
about the current overhead of having a zillion variables. I know we are working
to optimize that automatically, but I still suspect we may benefit from doing a
usage pass and create smaller shared files for less frequently used values, and
move any one-off values to where they are used.

+        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">
+        <div id="secondaryUserBanner" class="layout horizontal center"
+            hidden="[[!showSecondaryUserBanner_]]">
+          <div id="secondaryUserIcon"></div>
+          <div class="flex">$i18n{secondaryUserBannerText}</div>
+        </div>
+</if>
+<if expr="chromeos">

[dschuyler, 2017/02/13 21:51:50]

Can lines 99 and 100 be deleted?

[stevenjb, 2017/02/13 21:58:27]

In theory, yes, in practice, the blocks are unrelated (Internet happens to be
the first section, but that might change and this is unrelated) so I'd rather
make the <if> separate, although I don't feel super strongly.

         <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>