PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_template.html

 <dom-module id="user-pod-template-shared-styles">
   <template>
     <link rel="stylesheet" href="user_pod_template.css">
   </template>
 </dom-module>
 
 <style is="custom-style" include="user-pod-template-shared-styles"></style>
 
 <iron-iconset-svg name="user-pod" size="24">
   <svg>
     <defs>
       <!--
       Inlined from Polymer's iron-icons to avoid importing everything.
       See http://goo.gl/Y1OdAq for instructions on adding additional icons.
       -->
       <g id="arrow-forward"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></g>
+      <g id="close"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></g>
     </defs>
   </svg>
 </iron-iconset-svg>
 
 <div id="user-pod-template" class="pod disabled" hidden>
   <div class="user-image-pane">
     <div class="user-image-container">
       <img class="user-image" alt>
     </div>
     <div class="signed-in-indicator" i18n-content="signedIn"></div>
@@ skipping 127 matching lines @@
 </div>
 
 <!-- Extra elements that are appended to above "user-pod-template" for public
      account user pod. Note that only the children of the template div are
      appended. -->
 <div id="public-account-user-pod-extras-template" hidden>
   <div class="expanded-pane">
     <div class="expanded-pane-contents">
       <div class="side-container">
         <div class="expanded-pane-name"></div>
-        <div class="reminder" i18n-content="publicAccountReminder"></div>
-        <div class="language-and-input-section">
-          <div class="select-with-label">
-            <label class="language-select-label"
-                   i18n-content="publicSessionSelectLanguage">
-            </label>
-            <div class="select-container">
-              <select class="language-select"></select>
+        <div class="expanded-pane-container">
+          <div class="expanded-pane-learn-more-container">
+            <div class="expanded-pane-learn-more"></div>
+          </div>
+          <div class="info"></div>
+          <div class="monitoring-container">
+            <span class="monitoring-warning"
+                  i18n-content="publicAccountMonitoringWarning"></span>
+            <a class="monitoring-learn-more" href="#" role="button"
+               i18n-content="publicAccountLearnMore"></a>
+            <div class="monitoring-overlay" hidden></div>
+            <paper-dialog class="monitoring-dialog" role="dialog" tabindex="-1"

[xiyuan, 2016/11/21 19:38:35]

Can we re-use existing dialogs (e.g. one of cr.ui.dialogs)? 

If not, is it possible to make it a generic dialog tool that other part of the
login screen can use in the future?

If that is also not feasible, could we move this out of the template DOM since
we don't want a copy of this dialog for each cloned pod element.

[Ivan Šandrk, 2016/11/21 21:48:42]

Do you know of any existing dialogs that just have an exit button (on the top
right)? No ok or cancel.

[xiyuan, 2016/11/22 14:32:45]

We can extend cr.ui.dialogs to support this. Or make css rules to hide the
buttons.

+                          aria-hidden="true">
+              <div class="monitoring-dialog-title"
+                   i18n-content="publicAccountMonitoringInfo"></div>
+              <div class="buttons">
+                <paper-icon-button class="monitoring-dialog-button"
+                    icon="user-pod:close" dialog-confirm></paper-icon-button>
+              </div>
+              <div class="monitoring-dialog-content">
+                <p class="monitoring-dialog-item"
+                   i18n-content="publicAccountMonitoringInfoItem1"></p>
+                <p class="monitoring-dialog-item"
+                   i18n-content="publicAccountMonitoringInfoItem2"></p>
+                <p class="monitoring-dialog-item"
+                   i18n-content="publicAccountMonitoringInfoItem3"></p>
+                <p class="monitoring-dialog-item"
+                   i18n-content="publicAccountMonitoringInfoItem4"></p>
+              </div>
+            </paper-dialog>
+          </div>
+          <div class="reminder" i18n-content="publicAccountReminder"></div>
+          <div class="language-and-input-section">
+            <div class="select-with-label">
+              <label class="language-select-label"
+                     i18n-content="publicSessionSelectLanguage">
+              </label>
+              <div class="select-container">
+                <select class="language-select"></select>
+              </div>
             </div>
-          </div>
-          <div class="select-with-label">
-            <label class="keyboard-select-label"
-                   i18n-content="publicSessionSelectKeyboard">
-            </label>
-            <div class="select-container">
-              <select class="keyboard-select"></select>
+            <div class="select-with-label">
+              <label class="keyboard-select-label"
+                     i18n-content="publicSessionSelectKeyboard">
+              </label>
+              <div class="select-container">
+                <select class="keyboard-select"></select>
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class="horizontal-line"></div>
       <div class="bottom-container">
-        <div class="expanded-pane-learn-more-container">
-          <div class="expanded-pane-learn-more"></div>
-        </div>
-        <div class="info"></div>
+        <paper-button raised class="enter-button"
+                i18n-content="publicAccountEnter"
+                i18n-values="aria-label:publicAccountEnterAccessibleName">
+        </paper-button>
         <div class="language-and-input-container">
           <a class="language-and-input" href="#" role="button"
              i18n-content="publicSessionLanguageAndInput"></a>
         </div>
-        <button class="enter-button"
-                i18n-content="publicAccountEnter"
-                i18n-values="aria-label:publicAccountEnterAccessibleName">
-        </button>
       </div>
     </div>
   </div>
 </div>