PS - Adjusting Public Session login pod for expanded whitelisting

ui/login/account_picker/user_pod_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
@@ skipping 2074 matching lines @@
 
       var keyboardSelect = this.querySelector('.keyboard-select');
       keyboardSelect.tabIndex = UserPodTabOrder.POD_INPUT;
       keyboardSelect.loadedLocale = null;
 
       var languageAndInput = this.querySelector('.language-and-input');
       languageAndInput.tabIndex = UserPodTabOrder.POD_INPUT;
       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;
         var keyboardSelect = this.querySelector('.keyboard-select');
         // The contents of |keyboardSelect| is updated asynchronously. If its
         // locale does not match |locale|, it has not updated yet and the
         // currently selected keyboard layout may not be applicable to |locale|.
         // Do not return any keyboard layout in this case and let the backend
         // choose a suitable layout.
         var keyboardLayout =
@@ skipping 131 matching lines @@
                                                       observer);
           pod.classList.remove('transitioning-to-advanced');
           pod.querySelector('.language-select').focus();
         });
         // Guard timer set to animation duration + 20ms.
         ensureTransitionEndEvent(languageAndInputSection, 380);
       }, 0);
     },
 
     /**
+     * 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.
      */
     getPublicSessionKeyboardLayouts_: function() {
       var selectedLocale = this.querySelector('.language-select').value;
       if (selectedLocale ==
           this.querySelector('.keyboard-select').loadedLocale) {
         // If the list of keyboard layouts was loaded for the currently selected
         // locale, it is already up to date.
         return;
@@ skipping 1425 matching lines @@
        if (pod && pod.multiProfilesPolicyApplied) {
          pod.userTypeBubbleElement.classList.remove('bubble-shown');
        }
      }
   };
 
   return {
     PodRow: PodRow
   };
 });