PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_template.html

Index: ui/login/account_picker/user_pod_template.html
diff --git a/ui/login/account_picker/user_pod_template.html b/ui/login/account_picker/user_pod_template.html
index 21d58b71f2b375a1343a7f54810a0e9df11d05dc..379dad148433274edf5713f5832655a437a08949 100644
--- a/ui/login/account_picker/user_pod_template.html
+++ b/ui/login/account_picker/user_pod_template.html
@@ -14,6 +14,7 @@
       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>
@@ -161,39 +162,68 @@
     <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>
+        <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="select-with-label">
-            <label class="keyboard-select-label"
-                   i18n-content="publicSessionSelectKeyboard">
-            </label>
-            <div class="select-container">
-              <select class="keyboard-select"></select>
+          <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 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>