PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_row.js

Index: ui/login/account_picker/user_pod_row.js
diff --git a/ui/login/account_picker/user_pod_row.js b/ui/login/account_picker/user_pod_row.js
index 3fb9aa0169baa32a2a950262864b153e3c5d25ce..30976e10dcc3b25f8d352a06120f1732cca0df4d 100644
--- a/ui/login/account_picker/user_pod_row.js
+++ b/ui/login/account_picker/user_pod_row.js
@@ -2092,6 +2092,11 @@ cr.define('login', function() {
       languageAndInput.addEventListener('click',
                                         this.transitionToAdvanced_.bind(this));
 
+      var monitoringLearnMore = this.querySelector('.monitoring-learn-more');
+      monitoringLearnMore.tabIndex = UserPodTabOrder.POD_INPUT;
+      monitoringLearnMore.addEventListener(
+          'click', this.onMonitoringLearnMoreClicked_.bind(this));
+
       this.enterButtonElement.addEventListener('click', (function(e) {
         this.enterButtonElement.disabled = true;
         var locale = this.querySelector('.language-select').value;
@@ -2243,6 +2248,43 @@ cr.define('login', function() {
     },
 
     /**
+     * Show a dialog when user clicks on learn more (monitoring) button.
+     */
+    onMonitoringLearnMoreClicked_: function() {
+      var dialogContainer = document.createElement('div');

[xiyuan, 2016/11/23 00:23:07]

nit: Cache the container div to avoid creating it every time when we show the
dialog?

[Ivan Šandrk, 2016/11/23 10:42:11]

Done.

+      dialogContainer.classList.add('monitoring-dialog-container');
+      document.querySelector('#scroll-container').appendChild(dialogContainer);
+      // Public Session POD in advanced view has a different size so add a dummy
+      // parent element to enable different CSS settings.
+      if (this.classList.contains('advanced')) {
+        dialogContainer.classList.add('advanced');
+      }
+      var html = '';
+      var infoItems = ['publicAccountMonitoringInfoItem1',
+                       'publicAccountMonitoringInfoItem2',
+                       'publicAccountMonitoringInfoItem3',
+                       'publicAccountMonitoringInfoItem4'];
+      for (item of infoItems) {
+        html += '<p class="cr-dialog-item">';
+        html += loadTimeData.getString(item);
+        html += '</p>';
+      }
+      var title = loadTimeData.getString('publicAccountMonitoringInfo');
+      this.dialog_ = new cr.ui.dialogs.BaseDialog(dialogContainer);
+      this.dialog_.showHtml(title, html, undefined,
+                            this.onMonitoringDialogClosed_.bind(this));
+      document.querySelector('#pod-row').disabled = true;

[xiyuan, 2016/11/23 00:23:07]

nit: replace 
  document.querySelector('#pod-row')
with
  this.parentNode

[Ivan Šandrk, 2016/11/23 10:42:11]

Done.

+    },
+
+    /**
+     * Cleanup after the monitoring warning dialog is closed.
+     */
+    onMonitoringDialogClosed_: function() {
+      document.querySelector('#pod-row').disabled = false;

[xiyuan, 2016/11/23 00:23:07]

nit: document.querySelector('#pod-row') -> this.parentNode

[Ivan Šandrk, 2016/11/23 10:42:11]

Done.

+      this.dialog_ = undefined;
+    },
+
+    /**
      * Retrieves the list of keyboard layouts available for the currently
      * selected locale.
      */