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 19 matching lines @@
   var MAX_NUMBER_OF_COLUMNS = 6;
 
   /**
    * Maximal number of rows if sign-in banner is displayed alonside.
    * @type {number}
    * @const
    */
   var MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER = 2;
 
   /**
-   * Variables used for pod placement processing.
-   * Width and height should be synced with computed CSS sizes of pods.
+   * Variables used for pod placement processing. Width and height should be
+   * synced with computed CSS sizes of pods.
    */
   var POD_WIDTH = 180;
   var POD_HEIGHT = 217;
   var POD_ROW_PADDING = 10;
 
   /**
    * Whether to preselect the first pod automatically on login screen.
    * @type {boolean}
    * @const
    */
@@ skipping 23 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;
   // (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 77 matching lines @@
 
     /**
      * Gets the locked user indicator box.
      * @type {!HTMLInputElement}
      */
     get lockedIndicatorElement() {
       return this.querySelector('.locked-indicator');
     },
 
     /**
-     * Gets the custom button. This button is normally hidden, but can be
-     * shown using the chrome.screenlockPrivate API.
+     * Gets the custom button. This button is normally hidden, but can be shown
+     * using the chrome.screenlockPrivate API.
      * @type {!HTMLInputElement}
      */
     get customButton() {
       return this.querySelector('.custom-button');
     },
 
     /**
      * Updates the user pod element.
      */
     update: function() {
       this.imageElement.src = 'chrome://userimage/' + this.user.username +
           '?id=' + UserPod.userImageSalt_[this.user.username];
 
       this.nameElement.textContent = this.user_.displayName;
       this.signedInIndicatorElement.hidden = !this.user_.signedIn;
 
       var forceOnlineSignin = this.forceOnlineSignin;
       this.passwordElement.hidden = forceOnlineSignin;
       this.signinButtonElement.hidden = !forceOnlineSignin;
 
       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 125 matching lines @@
       // 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.
      * @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 128 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;
       // 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.
+     * 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.
      */
     handleLearnMoreEvent: function(event) {
       switch (event.type) {
         // Show informaton on left click. Let any other clicks propagate.
         case 'click':
           if (event.button != 0)
             return;
           break;
         // Show informaton when <Return> or <Space> is pressed. Let any other
@@ skipping 77 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 AppUserPod = cr.ui.define(function() {
+    var node = UserPod();
+    return node;
+  });
+
+  AppUserPod.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.originalEvent && e.originalEvent.ctrlKey;
+      this.launchApp_(this.user, diagnosticMode);
+      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(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;
+      }
+
+      if (!this.confirmDiagnosticMode_) {
+        this.confirmDiagnosticMode_ =
+            new cr.ui.dialogs.ConfirmDialog(document.body);
+        this.confirmDiagnosticMode_.setOkLabel(
+            loadTimeData.getString('confirmKioskAppDiagnosticModeYes'));
+        this.confirmDiagnosticMode_.setCancelLabel(
+            loadTimeData.getString('confirmKioskAppDiagnosticModeNo'));
+      }
+
+      this.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]
       };
@@ skipping 12 matching lines @@
      * @type {boolean}
      */
     get isSinglePod() {
       return this.children.length == 1;
     },
 
     /**
      * 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.

[xiyuan, 2014/02/10 21:15:56]

nit: should 4-space indent from @ at previous line

[Nikita (slow), 2014/02/12 17:19:25]

Done.

      */
     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 AppUserPod({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.
@@ skipping 66 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.

[xiyuan, 2014/02/10 21:15:56]

nit: 4-space indent from @

[Nikita (slow), 2014/02/12 17:19:25]

Done.

      */
     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.

[xiyuan, 2014/02/10 21:15:56]

nit: 4-space indent from @

[Nikita (slow), 2014/02/12 17:19:25]

Done.

      */
     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() {
@@ skipping 308 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });