MD User Manager: Supervised user checkbox is always displaying

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">
@@ skipping 57 matching lines @@
           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;
       }
 
       #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(--paper-grey-800);
         --paper-checkbox-label-spacing: 16px;
         --paper-checkbox-size: 20px;
       }
 
-      #supervised-user-container #learn-more-accounts {
+      #supervised-user-container #learn-more,

[tommycli, 2016/05/02 19:10:12]

instead of this, can you use

-webkit-padding-start on #supervised-user-container? Then you wouldn't need to
apply this rule to both ids

[Moe, 2016/05/02 20:34:56]

Done.

+      #supervised-user-container #custodians {
         -webkit-margin-start: 36px;
       }
 
       #supervised-user-container #learn-more {
-        display: block;
         line-height: 20px;
       }
 
+      #supervised-user-container paper-dropdown-menu {

[tommycli, 2016/05/02 19:10:13]

What was the purpose of moving these rules to the more specific selector? Just
to be more specific? (Not saying to reverse this change, I'm just curious)

[Moe, 2016/05/02 20:34:56]

It's more for readability and personal preference. When glancing at these it,
you'd immediately know where they appear in the html rather having to search for
them and go back and forth between html and css.

+        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 {
         -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;
@@ skipping 40 matching lines @@
       <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>
-            <template is="dom-if" if="[[isSupervised_]]">
+      <div id="supervised-user-container">
+        <paper-checkbox checked="{{isSupervised_}}">
+          [[i18n('manageProfilesSupervisedSignedInLabel')]]
+        </paper-checkbox>
+        <a id="learn-more" is="action-link" on-tap="onLearnMoreTap_">
+          [[i18n('learnMore')]]
+        </a>
+        <div id="custodians">

[tommycli, 2016/05/02 19:10:13]

If you can use -webkit-padding-start, you can get rid of this div

[Moe, 2016/05/02 20:34:56]

Done. However, removing this this would require adding another div around <a> so
the dropdown would go to the next line.

+          <template is="dom-if" if="[[isSupervised_]]">
+            <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 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" is="action-link" on-tap="onImportUserTap_"
                   hidden="[[isImportUserLinkHidden_(createInProgress_,
                                                     signedInUserIndex_)]]">
                 [[i18n('importExistingSupervisedUserLink')]]
               </a>
             </template>
-          </div>
+            <div id="sign-in-howto-message"
+                hidden="[[isSignedIn_(signedInUsers_)]]"
+                inner-h-t-m-l="[[i18n('noSignedInUserMessage')]]">
+            </div>
+          </template>
         </div>
-      </template>
+      </div>
       <div id="actions">
         <paper-spinner active="[[createInProgress_]]"></paper-spinner>
         <paper-button id="cancel" on-tap="onCancelTap_" i18n-content="cancel">
         </paper-button>
         <paper-button id="save" on-tap="onSaveTap_"
             i18n-content="createProfileConfirm"
             disabled="[[isSaveDisabled_(createInProgress_, profileName_)]]">
         </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>