Represent kiosk apps as user pods instead of menu items.

chrome/browser/resources/chromeos/login/user_pod_row.js

 // Copyright (c) 2012 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 64 matching lines @@
     POD_INPUT: 1,     // Password input fields (and whole pods themselves).
     HEADER_BAR: 2,    // Buttons on the header bar (Shutdown, Add User).
     ACTION_BOX: 3,    // Action box buttons.
     PAD_MENU_ITEM: 4  // User pad menu items (Remove this user).
   };
 
   // Focus and tab order are organized as follows:
   //
   // (1) all user pods have tab index 1 so they are traversed first;
   // (2) when a user pod is activated, its tab index is set to -1 and its
-  //     main input field gets focus and tab index 1;
+  // main input field gets focus and tab index 1;

[xiyuan, 2014/02/12 17:35:04]

nit: why remove the indent?

[Nikita (slow), 2014/02/13 08:58:02]

Done.

   // (3) buttons on the header bar have tab index 2 so they follow user pods;
   // (4) Action box buttons have tab index 3 and follow header bar buttons;
   // (5) lastly, focus jumps to the Status Area and back to user pods.
   //
   // 'Focus' event is handled by a capture handler for the whole document
   // and in some cases 'mousedown' event handlers are used instead of 'click'
   // handlers where it's necessary to prevent 'focus' event from being fired.
 
   /**
    * Helper function to remove a class from given element.
@@ skipping 155 matching lines @@
 
     /**
      * Gets Caps Lock hint image.
      * @type {!HTMLImageElement}
      */
     get capslockHintElement() {
       return this.querySelector('.capslock-hint');
     },
 
     /**
-     * Gets user signin button.
-     * @type {!HTMLInputElement}
+     * Gets user sign in button.
+     * @type {!HTMLButtonElement}
      */
     get signinButtonElement() {
       return this.querySelector('.signin-button');
     },
 
     /**
+     * Gets launch app button.
+     * @type {!HTMLButtonElement}
+     */
+    get launchAppButtonElement() {
+      return this.querySelector('.launch-app-button');
+    },
+
+    /**
      * Gets action box area.
      * @type {!HTMLInputElement}
      */
     get actionBoxAreaElement() {
       return this.querySelector('.action-box-area');
     },
 
     /**
      * Gets user type icon area.
      * @type {!HTMLDivElement}
@@ skipping 108 matching lines @@
 
       this.updateActionBoxArea();
 
       this.passwordElement.setAttribute('aria-label', loadTimeData.getStringF(
         'passwordFieldAccessibleName', this.user_.emailAddress));
 
       this.updateUserTypeIcon();
     },
 
     updateActionBoxArea: function() {
-      this.actionBoxAreaElement.hidden = this.user_.publicAccount;
+      if (this.user_.publicAccount || this.user_.isApp) {
+        this.actionBoxAreaElement.hidden = true;
+        return;
+      }
+
+      this.actionBoxAreaElement.hidden = false;
       this.actionBoxMenuRemoveElement.hidden = !this.user_.canRemove;
 
       this.actionBoxAreaElement.setAttribute(
           'aria-label', loadTimeData.getStringF(
               'podMenuButtonAccessibleName', this.user_.emailAddress));
       this.actionBoxMenuRemoveElement.setAttribute(
           'aria-label', loadTimeData.getString(
                'podMenuRemoveItemAccessibleName'));
       this.actionBoxMenuTitleNameElement.textContent = this.user_.isOwner ?
           loadTimeData.getStringF('ownerUserPattern', this.user_.displayName) :
@@ skipping 123 matching lines @@
       this.passwordElement.hidden = forceOnlineSignin;
 
       // Move tabIndex from the whole pod to the main input.
       this.tabIndex = -1;
       this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
       this.mainInput.focus();
     },
 
     /**
      * Activates the pod.
+     * @param {Event} e Event object.
      * @return {boolean} True if activated successfully.
      */
-    activate: function() {
-      if (!this.signinButtonElement.hidden) {
+    activate: function(e) {
+      if (this.forceOnlineSignin) {
         this.showSigninUI();
       } else if (!this.passwordElement.value) {
         return false;
       } else {
         Oobe.disableSigninUI();
         chrome.send('authenticateUser',
                     [this.user.username, this.passwordElement.value]);
       }
 
       return true;
@@ skipping 156 matching lines @@
     },
 
     /**
      * Handles click event on a user pod.
      * @param {Event} e Click event.
      */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
-      if (!this.signinButtonElement.hidden && !this.isActionBoxMenuActive) {
+      if (this.forceOnlineSignin && !this.isActionBoxMenuActive) {
         this.showSigninUI();
         // Prevent default so that we don't trigger 'focus' event.
         e.preventDefault();
       }
     },
 
     /**
      * Called when the custom button is clicked.
      */
     handleCustomButtonClick_: function() {
@@ skipping 75 matching lines @@
 
     /** @override */
     decorate: function() {
       UserPod.prototype.decorate.call(this);
 
       this.classList.remove('need-password');
       this.classList.add('public-account');
 
       this.nameElement.addEventListener('keydown', (function(e) {
         if (e.keyIdentifier == 'Enter') {
-          this.parentNode.activatedPod = this;
+          this.parentNode.setActivatedPod(this, e);
           // Stop this keydown event from bubbling up to PodRow handler.
           e.stopPropagation();
           // Prevent default so that we don't trigger a 'click' event on the
           // newly focused "Enter" button.
           e.preventDefault();
         }
       }).bind(this));
 
       var learnMore = this.querySelector('.learn-more');
       learnMore.addEventListener('mousedown', stopEventPropagation);
@@ skipping 32 matching lines @@
 
     /** @override */
     reset: function(takeFocus) {
       if (!takeFocus)
         this.expanded = false;
       this.enterButtonElement.disabled = false;
       UserPod.prototype.reset.call(this, takeFocus);
     },
 
     /** @override */
-    activate: function() {
+    activate: function(e) {
       this.expanded = true;
       this.focusInput();
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
       this.parentNode.focusPod(this);
-      this.parentNode.activatedPod = this;
+      this.parentNode.setActivatedPod(this, e);
       // Prevent default so that we don't trigger 'focus' event.
       e.preventDefault();
     },
 
     /**
      * Handle mouse and keyboard events for the learn more button.
      * Triggering the button causes information about public sessions to be
      * shown.
      * @param {Event} event Mouse or keyboard event.
      */
@@ skipping 85 matching lines @@
 
     /** @override */
     reset: function(takeFocus) {
       // Always display the user's name for unfocused pods.
       if (!takeFocus)
         this.nameElement.hidden = false;
       UserPod.prototype.reset.call(this, takeFocus);
     },
 
     /** @override */
-    activate: function() {
+    activate: function(e) {
       if (this.passwordElement.hidden) {
         Oobe.launchUser(this.user.emailAddress, this.user.displayName);
       } else if (!this.passwordElement.value) {
         return false;
       } else {
         chrome.send('authenticatedLaunchUser',
                     [this.user.emailAddress,
                      this.user.displayName,
                      this.passwordElement.value]);
       }
       this.passwordElement.value = '';
       return true;
     },
 
     /** @override */
     handleClickOnPod_: function(e) {
       if (this.parentNode.disabled)
         return;
 
       Oobe.clearErrors();
       this.parentNode.lastFocusedPod_ = this;
 
       // If this is an unlocked pod, then open a browser window. Otherwise
       // just activate the pod and show the password field.
       if (!this.user.needsSignin && !this.isActionBoxMenuActive)
-        this.activate();
+        this.activate(e);
     },
 
     /** @override */
     handleRemoveUserConfirmationClick_: function(e) {
       chrome.send('removeUser', [this.user.profilePath]);
     },
   };
 
   /**
+   * Creates a user pod that represents kiosk app.
+   * @constructor
+   * @extends {UserPod}
+   */
+  var KioskAppPod = cr.ui.define(function() {
+    var node = UserPod();
+    return node;
+  });
+
+  KioskAppPod.prototype = {
+    __proto__: UserPod.prototype,
+
+    /** @override */
+    decorate: function() {
+      UserPod.prototype.decorate.call(this);
+      this.launchAppButtonElement.addEventListener('click',
+                                                   this.activate.bind(this));
+    },
+
+    /** @override */
+    update: function() {
+      this.imageElement.src = this.user.iconUrl;
+      this.imageElement.alt = this.user.label;
+      this.passwordElement.hidden = true;
+      this.signinButtonElement.hidden = true;
+      this.launchAppButtonElement.hidden = false;
+      this.signedInIndicatorElement.hidden = true;
+      this.nameElement.textContent = this.user.label;
+    },
+
+    /** @override */
+    get mainInput() {
+      return this.launchAppButtonElement;
+    },
+
+    /** @override */
+    focusInput: function() {
+      this.signinButtonElement.hidden = true;
+      this.launchAppButtonElement.hidden = false;
+      this.passwordElement.hidden = true;
+
+      // Move tabIndex from the whole pod to the main input.
+      this.tabIndex = -1;
+      this.mainInput.tabIndex = UserPodTabOrder.POD_INPUT;
+      this.mainInput.focus();
+    },
+
+    /** @override */
+    get forceOnlineSignin() {
+      return false;
+    },
+
+    /** @override */
+    activate: function(e) {
+      var diagnosticMode = e && e.ctrlKey;
+      this.launchApp_(this.user, diagnosticMode);
+      return true;
+    },
+
+    /** @override */
+    handleClickOnPod_: function(e) {
+      if (this.parentNode.disabled)
+        return;
+
+      Oobe.clearErrors();
+      this.parentNode.lastFocusedPod_ = this;
+      this.activate(e);
+    },
+
+    /**
+     * Launch the app. If |diagnosticMode| is true, ask user to confirm.
+     * @param {Object} app App data.
+     * @param {boolean} diagnosticMode Whether to run the app in diagnostic
+     *     mode.
+     */
+    launchApp_: function(app, diagnosticMode) {
+      if (!diagnosticMode) {
+        chrome.send('launchKioskApp', [app.id, false]);
+        return;
+      }
+
+      var podRow = $('pod-row');
+      if (!podRow.confirmDiagnosticMode_) {
+        podRow.confirmDiagnosticMode_ =
+            new cr.ui.dialogs.ConfirmDialog(document.body);
+        podRow.confirmDiagnosticMode_.setOkLabel(
+            loadTimeData.getString('confirmKioskAppDiagnosticModeYes'));
+        podRow.confirmDiagnosticMode_.setCancelLabel(
+            loadTimeData.getString('confirmKioskAppDiagnosticModeNo'));
+      }
+
+      podRow.confirmDiagnosticMode_.show(
+          loadTimeData.getStringF('confirmKioskAppDiagnosticModeFormat',
+                                  app.label),
+          function() {
+            chrome.send('launchKioskApp', [app.id, true]);
+          });
+    },
+  };
+
+  /**
    * Creates a new pod row element.
    * @constructor
    * @extends {HTMLDivElement}
    */
   var PodRow = cr.ui.define('podrow');
 
   PodRow.prototype = {
     __proto__: HTMLDivElement.prototype,
 
     // Whether this user pod row is shown for the first time.
     firstShown_: true,
 
     // True if inside focusPod().
     insideFocusPod_: false,
 
     // Focused pod.
     focusedPod_: undefined,
 
     // Activated pod, i.e. the pod of current login attempt.
     activatedPod_: undefined,
 
     // Pod that was most recently focused, if any.
     lastFocusedPod_: undefined,
 
     // Pods whose initial images haven't been loaded yet.
     podsWithPendingImages_: [],
 
+    // Whether pod creation is animated.
+    user_add_is_animated_: false,
+
+    // Array of apps that are shown in addition to other user pods.
+    apps_: [],
+
+    // Array of users that are shown (public/supervised/regular).
+    users_: [],
+
     /** @override */
     decorate: function() {
       // Event listeners that are installed for the time period during which
       // the element is visible.
       this.listeners_ = {
         focus: [this.handleFocus_.bind(this), true /* useCapture */],
         click: [this.handleClick_.bind(this), true],
         mousemove: [this.handleMouseMove_.bind(this), false],
         keydown: [this.handleKeyDown.bind(this), false]
       };
     },
 
     /**
      * Returns all the pods in this pod row.
      * @type {NodeList}
      */
     get pods() {
       return Array.prototype.slice.call(this.children);
     },
 
     /**
      * Return true if user pod row has only single user pod in it.
      * @type {boolean}
      */
     get isSinglePod() {
       return this.children.length == 1;
     },
 
     /**
+     * Returns pod with the given app id.
+     * @param {!string} app_id Application id to be matched.
+     * @return {Object} Pod with the given app id. null if pod hasn't been
+     *     found.
+     */
+    getPodWithAppId_: function(app_id) {
+      for (var i = 0, pod; pod = this.pods[i]; ++i) {
+        if (pod.user.isApp && pod.user.id == app_id)
+          return pod;
+      }
+      return null;
+    },
+
+    /**
      * Returns pod with the given username (null if there is no such pod).
      * @param {string} username Username to be matched.
      * @return {Object} Pod with the given username. null if pod hasn't been
-     *                  found.
+     *     found.
      */
     getPodWithUsername_: function(username) {
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (pod.user.username == username)
           return pod;
       }
       return null;
     },
 
     /**
      * True if the the pod row is disabled (handles no user interaction).
      * @type {boolean}
      */
     disabled_: false,
     get disabled() {
       return this.disabled_;
     },
     set disabled(value) {
       this.disabled_ = value;
       var controls = this.querySelectorAll('button,input');
       for (var i = 0, control; control = controls[i]; ++i) {
         control.disabled = value;
       }
     },
 
     /**
      * Creates a user pod from given email.
-     * @param {string} email User's email.
+     * @param {!Object} user User info dictionary.
      */
     createUserPod: function(user) {
       var userPod;
       if (user.isDesktopUser)
         userPod = new DesktopUserPod({user: user});
       else if (user.publicAccount)
         userPod = new PublicAccountUserPod({user: user});
+      else if (user.isApp)
+        userPod = new KioskAppPod({user: user});
       else
         userPod = new UserPod({user: user});
 
       userPod.hidden = false;
       return userPod;
     },
 
     /**
      * Add an existing user pod to this pod row.
      * @param {!Object} user User info dictionary.
      * @param {boolean} animated Whether to use init animation.
      */
     addUserPod: function(user, animated) {
       var userPod = this.createUserPod(user);
       if (animated) {
         userPod.classList.add('init');
         userPod.nameElement.classList.add('init');
       }
 
       this.appendChild(userPod);
       userPod.initialize();
     },
 
     /**
+     * Runs app with a given id from the list of loaded apps.
+     * @param {!string} app_id of an app to run.
+     * @param {boolean=} opt_diagnostic_mode Whether to run the app in
+     *     diagnostic mode.  Default is false.
+     */
+    findAndRunAppForTesting: function(app_id, opt_diagnostic_mode) {
+      var app = this.getPodWithAppId_(app_id);
+      if (app) {
+        var activationEvent = cr.doc.createEvent('Event');
+        activationEvent.initEvent('activate', true, true);
+
+        if (opt_diagnostic_mode) {
+          var fakeCtrlEnterEvent = cr.doc.createEvent('KeyboardEvent');
+          fakeCtrlEnterEvent.initKeyboardEvent('keypress', true, true, null,
+                                               'Enter', 0,
+                                               true, false, false, false);
+          activationEvent.originalEvent = fakeCtrlEnterEvent;

[xiyuan, 2014/02/12 17:35:04]

This is different from the expectation at line 1092 of KioskAppPod.activate,
where it expects the ctrlKey is on for the event itself. Might be the cause of
kiosk test failure.

[Nikita (slow), 2014/02/13 08:58:02]

Done. Yes, this one plus another JS error.

+        }
+
+        app.dispatchEvent(activationEvent);
+      }
+    },
+
+    /**
      * Removes user pod from pod row.
      * @param {string} email User's email.
      */
     removeUserPod: function(username) {
       var podToRemove = this.getPodWithUsername_(username);
       if (podToRemove == null) {
         console.warn('Attempt to remove not existing pod for ' + username +
             '.');
         return;
       }
@@ skipping 42 matching lines @@
           pod.classList.add('zoom');
       }
     },
 
     /**
      * Populates pod row with given existing users and start init animation.
      * @param {array} users Array of existing user emails.
      * @param {boolean} animated Whether to use init animation.
      */
     loadPods: function(users, animated) {
+      this.users_ = users;
+      this.user_add_is_animated_ = animated;
+
+      this.rebuildPods();
+    },
+
+    /**
+     * Rebuilds pod row using users_ and apps_ that were previously set or
+     * updated.
+     */
+    rebuildPods: function() {
       // Clear existing pods.
       this.innerHTML = '';
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
       this.lastFocusedPod_ = undefined;
 
       // Switch off animation
       Oobe.getInstance().toggleClass('flying-pods', false);
 
       // Populate the pod row.
-      for (var i = 0; i < users.length; ++i) {
-        this.addUserPod(users[i], animated);
-      }
-      for (var i = 0, pod; pod = this.pods[i]; ++i) {
+      for (var i = 0; i < this.users_.length; ++i)
+        this.addUserPod(this.users_[i], this.user_add_is_animated_);
+
+      for (var i = 0, pod; pod = this.pods[i]; ++i)
         this.podsWithPendingImages_.push(pod);
-      }
+
+      // TODO: Edge case handling when kiosk apps are not fitting.
+      for (var i = 0; i < this.apps_.length; ++i)
+        this.addUserPod(this.apps_[i], this.user_add_is_animated_);
+
       // Make sure we eventually show the pod row, even if some image is stuck.
       setTimeout(function() {
         $('pod-row').classList.remove('images-loading');
       }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS);
 
       this.placePods_();
 
       // Without timeout changes in pods positions will be animated even though
       // it happened when 'flying-pods' class was disabled.
       setTimeout(function() {
         Oobe.getInstance().toggleClass('flying-pods', true);
       }, 0);
 
       this.focusPod(this.preselectedPod);
     },
 
     /**
+     * Adds given apps to the pod row.
+     * @param {array} apps Array of apps.
+     */
+    setApps: function(apps) {
+      this.apps_ = apps;
+      this.rebuildPods();
+      chrome.send('kioskAppsLoaded');
+
+      // Check whether there's a pending kiosk app error.
+      window.setTimeout(function() {
+        chrome.send('checkKioskAppLaunchError');
+      }, 500);
+    },
+
+    /**
      * Shows a button on a user pod with an icon. Clicking on this button
      * triggers an event used by the chrome.screenlockPrivate API.
      * @param {string} username Username of pod to add button
      * @param {string} iconURL URL of the button icon
      */
     showUserPodButton: function(username, iconURL) {
       var pod = this.getPodWithUsername_(username);
       if (pod == null) {
         console.error('Unable to show user pod button for ' + username +
                       ': user pod not found.');
@@ skipping 122 matching lines @@
      * @return {boolean} Pod focus status.
      */
     isFocused: function(pod) {
       return this.focusedPod_ == pod;
     },
 
     /**
      * Focuses a given user pod or clear focus when given null.
      * @param {UserPod=} podToFocus User pod to focus (undefined clears focus).
      * @param {boolean=} opt_force If true, forces focus update even when
-     *                             podToFocus is already focused.
+     *     podToFocus is already focused.
      */
     focusPod: function(podToFocus, opt_force) {
       if (this.isFocused(podToFocus) && !opt_force) {
         this.keyboardActivated_ = false;
         return;
       }
 
       // Make sure that we don't focus pods that are not allowed to be focused.
       // TODO(nkostylev): Fix various keyboard focus related issues caused
       // by this approach. http://crbug.com/339042
@@ skipping 25 matching lines @@
       if (!this.isFocused(podToFocus))
         Oobe.clearErrors();
 
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
       if (podToFocus) {
         podToFocus.classList.remove('faded');
         podToFocus.classList.add('focused');
         podToFocus.reset(true);  // Reset and give focus.
         // focusPod() automatically loads wallpaper
-        chrome.send('focusPod', [podToFocus.user.username]);
+        if (!podToFocus.user.isApp)
+          chrome.send('focusPod', [podToFocus.user.username]);
         this.firstShown_ = false;
         this.lastFocusedPod_ = podToFocus;
       }
       this.insideFocusPod_ = false;
       this.keyboardActivated_ = false;
     },
 
     /**
      * Focuses a given user pod by index or clear focus when given null.
      * @param {int=} podToFocus index of User pod to focus.
      * @param {boolean=} opt_force If true, forces focus update even when
-     *                             podToFocus is already focused.
+     *     podToFocus is already focused.
      */
     focusPodByIndex: function(podToFocus, opt_force) {
       if (podToFocus < this.pods.length)
         this.focusPod(this.pods[podToFocus], opt_force);
     },
 
     /**
      * Resets wallpaper to the last active user's wallpaper, if any.
      */
     loadLastWallpaper: function() {
-      if (this.lastFocusedPod_)
+      if (this.lastFocusedPod_ && !this.lastFocusedPod_.user.isApp)
         chrome.send('loadWallpaper', [this.lastFocusedPod_.user.username]);
     },
 
     /**
      * Returns the currently activated pod.
      * @type {UserPod}
      */
     get activatedPod() {
       return this.activatedPod_;
     },
-    set activatedPod(pod) {
-      if (pod && pod.activate())
+
+    /**
+     * Sets currently activated pod.
+     * @param {UserPod} pod Pod to check for focus.
+     * @param {Event} e Event object.
+     */
+    setActivatedPod: function(pod, e) {
+      if (pod && pod.activate(e))
         this.activatedPod_ = pod;
     },
 
     /**
      * The pod of the signed-in user, if any; null otherwise.
      * @type {?UserPod}
      */
     get lockedPod() {
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (pod.user.signedIn)
@@ skipping 203 matching lines @@
             if (this.focusedPod_ && this.focusedPod_.nextElementSibling)
               this.focusPod(this.focusedPod_.nextElementSibling);
             else
               this.focusPod(this.firstElementChild);
 
             e.stopPropagation();
           }
           break;
         case 'Enter':
           if (this.focusedPod_) {
-            this.activatedPod = this.focusedPod_;
+            this.setActivatedPod(this.focusedPod_, e);
             e.stopPropagation();
           }
           break;
         case 'U+001B':  // Esc
           if (!this.isSinglePod)
             this.focusPod();
           break;
       }
     },
 
@@ skipping 10 matching lines @@
       if (this.focusedPod_) {
         var focusedPod = this.focusedPod_;
         var screen = this.parentNode;
         var self = this;
         focusedPod.addEventListener('webkitTransitionEnd', function f(e) {
           if (e.target == focusedPod) {
             focusedPod.removeEventListener('webkitTransitionEnd', f);
             focusedPod.reset(true);
             // Notify screen that it is ready.
             screen.onShow();
-            chrome.send('loadWallpaper', [focusedPod.user.username]);
+            if (!focusedPod.user.isApp)
+              chrome.send('loadWallpaper', [focusedPod.user.username]);
           }
         });
         // Guard timer for 1 second -- it would conver all possible animations.
         ensureTransitionEndEvent(focusedPod, 1000);
       }
     },
 
     /**
      * Called right before the pod row is shown.
      */
@@ skipping 30 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });