Extract colors from wallpaper and dynamically update login screen overlay

ui/login/account_picker/md_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 2793 matching lines @@
 
     // Array of users that are shown (public/supervised/regular).
     users_: [],
 
     // If we're in Touch View mode.
     touchViewEnabled_: false,
 
     // If testing mode is enabled.
     testingModeEnabled_: false,
 
+    overlayColors_: {maskColor: undefined, scrollColor: undefined},
+
     /** @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 279 matching lines @@
     rebuildPods: function() {
       var emptyPodRow = this.pods.length == 0;
 
       // Clear existing pods.
       this.innerHTML = '';
       this.focusedPod_ = undefined;
       this.activatedPod_ = undefined;
       this.lastFocusedPod_ = undefined;
       this.mainPod_ = undefined;
       this.smallPodsContainer.innerHTML = '';
+      this.topMask.innerHTML = '';
+      this.bottomMask.innerHTML = '';
 
       // Switch off animation
       Oobe.getInstance().toggleClass('flying-pods', false);
 
       for (var i = 0; i < this.users_.length; ++i)
         this.addUserPod(this.users_[i]);
 
       for (var i = 0, pod; pod = this.pods[i]; ++i)
         this.podsWithPendingImages_.push(pod);
 
       // TODO(nkostylev): Edge case handling when kiosk apps are not fitting.
       if (this.shouldShowApps_) {
         for (var i = 0; i < this.apps_.length; ++i)
           this.addUserPod(this.apps_[i]);
       }
 
       // Make sure we eventually show the pod row, even if some image is stuck.
       setTimeout(function() {
         $('pod-row').classList.remove('images-loading');
+        this.smallPodsContainer.classList.remove('images-loading');
+        this.topMask.classList.remove('images-loading');
+        this.bottomMask.classList.remove('images-loading');
       }, POD_ROW_IMAGES_LOAD_TIMEOUT_MS);
 
       var isAccountPicker = $('login-header-bar').signinUIState ==
           SIGNIN_UI_STATE.ACCOUNT_PICKER;
 
       // Immediately recalculate pods layout only when current UI is account
       // picker. Otherwise postpone it.
       if (isAccountPicker) {
         this.placePods_();
         this.maybePreselectPod();
@@ skipping 18 matching lines @@
 
     /**
      * Gets the container of small pods.
      * @type {!HTMLDivElement}
      */
     get smallPodsContainer() {
       return document.querySelector('.small-pod-container');
     },
 
     /**
+     * Gets the gradient mask at the top.
+     * @type {!HTMLDivElement}
+     */
+    get topMask() {
+      return document.querySelector('.small-pod-container-mask');
+    },
+
+    /**
+     * Gets the gradient mask at the bottom.
+     * @type {!HTMLDivElement}
+     */
+    get bottomMask() {
+      return document.querySelector('.small-pod-container-mask.rotate');
+    },
+
+    /**
      * 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() {
@@ skipping 490 matching lines @@
 
     /**
      * Called when the LANDSCAPE_MODE_LIMIT or PORTRAIT_MODE_LIMIT is exceeded
      * and the scrollable container is shown.
      * @private
      */
     placePodsOnScrollableContainer_: function() {
       this.smallPodsContainer.hidden = false;
       // Add a dark overlay.
       this.smallPodsContainer.classList.add('scroll');
+      // If wallpaper color extraction results are not available, use the
+      // default value in CSS rules.
+      if (this.overlayColors_.scrollColor) {
+        this.smallPodsContainer.style.background =
+            this.overlayColors_.scrollColor;
+      }
       var pods = this.pods;
       this.mainPod_.setPodStyle(UserPod.Style.LARGE);
       for (var pod of pods) {
         if (pod != this.mainPod_) {
           // All pods except the main one must be set to the extra small style.
           pod.setPodStyle(UserPod.Style.EXTRA_SMALL);
         }
       }
 
       var SCROLL_LEFT_PADDING = this.isPortraitMode_() ? 46 : 72;
@@ skipping 68 matching lines @@
 
     /**
      * Called each time before pod placement to ensure we start with the
      * initial state, which is ready to place only one user pod. The styles
      * of elements necessary for other placement methods must be set
      * explicitly each time.
      * @private
      */
     handleBeforePodPlacement_: function() {
       this.smallPodsContainer.hidden = true;
-      document.querySelector('.small-pod-container-mask').hidden = true;
-      document.querySelector('.small-pod-container-mask.rotate').hidden = true;
+      this.topMask.hidden = true;
+      this.bottomMask.hidden = true;
       this.smallPodsContainer.classList.remove('scroll');
+      this.smallPodsContainer.style.background = 'unset';
       var pods = this.pods;
       for (var pod of pods) {
         // There is a chance that one of the pods has a bottom padding, so
         // reset all of them to be safe. This is because if the pod was at
         // the last position in the scrollable container, a bottom padding
         // was added to ensure a symmetric layout.
         pod.style.paddingBottom = cr.ui.toCssPx(0);
       }
       this.clearPodsAnimation_();
       this.hideEmptyArea_();
@@ skipping 20 matching lines @@
      */
     isScreenShrinked_: function() {
       return this.screenSize.height <= Oobe.getInstance().clientAreaSize.height;
     },
 
     /**
      * Called when scroll bar is shown and we need a mask for the header bar.
      * @private
      */
     showScrollMask_: function() {
-      var topMask = document.querySelector('.small-pod-container-mask');
-      topMask.hidden = false;
-      topMask.style.left = this.smallPodsContainer.style.left;
-      topMask.style.width = this.smallPodsContainer.style.width;
-      // The bottom mask is a rotation of the top mask.
-      var bottomMask =
-          document.querySelector('.small-pod-container-mask.rotate');
-      bottomMask.hidden = false;
-      bottomMask.style.left = this.smallPodsContainer.style.left;
-      bottomMask.style.width = this.smallPodsContainer.style.width;
+      this.topMask.hidden = false;
+      this.topMask.style.left = this.smallPodsContainer.style.left;
+      this.topMask.style.width = this.smallPodsContainer.style.width;
+      this.bottomMask.hidden = false;
+      this.bottomMask.style.left = this.smallPodsContainer.style.left;
+      this.bottomMask.style.width = this.smallPodsContainer.style.width;
       // The bottom mask should overlap with the header bar, and its z-index
       // is chosen to ensure it does not block users from using the header bar.
-      bottomMask.style.top =
+      this.bottomMask.style.top =
           cr.ui.toCssPx(this.screenSize.height - SCROLL_MASK_HEIGHT);
+      if (this.overlayColors_.maskColor) {
+        var maskGradient = this.getMaskGradient_(this.overlayColors_.maskColor);
+        this.topMask.style.background = maskGradient;
+        this.bottomMask.style.background = maskGradient;
+      }
     },
 
     /**
      * Called after pod placement and before showing the pod row. Updates
      * elements whose style may depend on the pod placement outcome.
      * @private
      */
     handleAfterPodPlacement_: function() {
       var pods = this.pods;
       for (var pod of pods) {
@@ skipping 214 matching lines @@
      * @param {string} message Text to be displayed or empty to hide the banner.
      */
     showBannerMessage: function(message) {
       var banner = $('signin-banner');
       banner.textContent = message;
       banner.classList.toggle('message-set', !!message);
       $('signin-banner-container1').hidden = banner.textContent.length == 0;
     },
 
     /**
+     * Sets login screen overlay colors based on colors extracted from the
+     * wallpaper.
+     * @param {string} maskColor Color for the gradient mask.
+     * @param {string} scrollColor Color for the small pods container.
+     * @param {string} backgroundColor Color for the whole background.
+     */
+    setOverlayColors: function(maskColor, scrollColor, backgroundColor) {
+      $('login-shield').style.backgroundColor = backgroundColor;
+      if (this.smallPodsContainer.classList.contains('scroll'))
+        this.smallPodsContainer.style.backgroundColor = scrollColor;
+      if (!this.topMask.hidden) {
+        var maskGradient = this.getMaskGradient_(maskColor);
+        this.topMask.style.background = maskGradient;
+        this.bottomMask.style.background = maskGradient;
+      }
+      // Save the colors because the scrollable container and the masks may
+      // become visible later.
+      this.overlayColors_.maskColor = maskColor;
+      this.overlayColors_.scrollColor = scrollColor;
+    },
+
+    /**
+     * Helper function to create a style string for the scroll masks.
+     * @param {string} maskColor Color for the gradient mask.
+     * @return {string} A CSS style.
+     */
+    getMaskGradient_: function(maskColor) {
+      return 'linear-gradient(' + maskColor + ', transparent)';
+    },
+
+    /**
      * Whether the pod is currently focused.
      * @param {UserPod} pod Pod to check for focus.
      * @return {boolean} Pod focus status.
      */
     isFocused: function(pod) {
       return this.focusedPod_ == pod;
     },
 
     /**
      * Focuses a given user pod or clear focus when given null.
@@ skipping 482 matching lines @@
      */
     handlePodImageLoad: function(pod) {
       var index = this.podsWithPendingImages_.indexOf(pod);
       if (index == -1) {
         return;
       }
 
       this.podsWithPendingImages_.splice(index, 1);
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
+        this.smallPodsContainer.classList.remove('images-loading');
+        this.topMask.classList.remove('images-loading');
+        this.bottomMask.classList.remove('images-loading');
       }
     },
 
     /**
      * Preselects pod, if needed.
      */
     maybePreselectPod: function() {
       var pod = this.preselectedPod;
       this.focusPod(pod);
 
       // Hide user-type-bubble in case all user pods are disabled and we focus
       // first pod.
       if (pod && pod.multiProfilesPolicyApplied) {
         pod.userTypeBubbleElement.classList.remove('bubble-shown');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });