MD Settings: CrOS: Add secondary user banner

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

Index: chrome/browser/resources/settings/basic_page/basic_page.html
diff --git a/chrome/browser/resources/settings/basic_page/basic_page.html b/chrome/browser/resources/settings/basic_page/basic_page.html
index 7f75d71b7d58e539d7d42e9eeaf640a40abc13d1..0b6aa24084daa6970c4db7f8f1c7f53eee88ce6c 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.html
+++ b/chrome/browser/resources/settings/basic_page/basic_page.html
@@ -49,6 +49,23 @@
         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;
@@ -74,6 +91,13 @@
           </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}"