Extract colors from wallpaper and dynamically update login screen overlay

ui/login/account_picker/md_user_pod_row.js

Index: ui/login/account_picker/md_user_pod_row.js
diff --git a/ui/login/account_picker/md_user_pod_row.js b/ui/login/account_picker/md_user_pod_row.js
index 6d6b0b010ad8ccd3a8124f67c244b05a2d27e174..244f8043462c1ba6e7323fb8842ee3f9bd60961e 100644
--- a/ui/login/account_picker/md_user_pod_row.js
+++ b/ui/login/account_picker/md_user_pod_row.js
@@ -2811,6 +2811,8 @@ cr.define('login', function() {
     // If testing mode is enabled.
     testingModeEnabled_: false,
 
+    overlayColors_: {dmColor: undefined, scrollColor: undefined},

[jdufault, 2017/06/12 21:37:29]

expand dm acronym 

[Wenzhao (Colin) Zang, 2017/06/12 23:40:35]

Done.

+
     /** @override */
     decorate: function() {
       // Event listeners that are installed for the time period during which
@@ -3110,6 +3112,8 @@ cr.define('login', function() {
       this.lastFocusedPod_ = undefined;
       this.mainPod_ = undefined;
       this.smallPodsContainer.innerHTML = '';
+      this.topMask.innerHTML = '';
+      this.bottomMask.innerHTML = '';
 
       // Switch off animation
       Oobe.getInstance().toggleClass('flying-pods', false);
@@ -3129,6 +3133,9 @@ cr.define('login', function() {
       // 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 ==
@@ -3166,6 +3173,22 @@ cr.define('login', function() {
       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.
@@ -3677,6 +3700,11 @@ cr.define('login', 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)

[jdufault, 2017/06/12 21:37:29]

nit: {}

[Wenzhao (Colin) Zang, 2017/06/12 23:40:35]

Done.

+        this.smallPodsContainer.style.background =
+            this.overlayColors_.scrollColor;
       var pods = this.pods;
       this.mainPod_.setPodStyle(UserPod.Style.LARGE);
       for (var pod of pods) {
@@ -3765,9 +3793,10 @@ cr.define('login', function() {
      */
     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
@@ -3808,20 +3837,21 @@ cr.define('login', function() {
      * @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_.dmColor) {
+        var maskGradient = this.getMaskGradient_(this.overlayColors_.dmColor);
+        this.topMask.style.background = maskGradient;
+        this.bottomMask.style.background = maskGradient;
+      }
     },
 
     /**
@@ -4055,6 +4085,37 @@ cr.define('login', function() {
       $('signin-banner-container1').hidden = banner.textContent.length == 0;
     },
 
+    /**
+     * Sets login screen overlay colors based on colors extracted from the
+     * wallpaper.
+     * @param {string} dmColor Color for the gradient mask.
+     * @param {string} scrollColor Color for the small pods container.
+     * @param {string} backgroundColor Color for the whole background.
+     */
+    setOverlayColors: function(dmColor, 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_(dmColor);
+        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_.dmColor = dmColor;
+      this.overlayColors_.scrollColor = scrollColor;
+    },
+
+    /**
+     * Helper function to create a style string for the scroll masks.
+     * @param {string} dmColor Color for the gradient mask.
+     * @return {string} A CSS style.
+     */
+    getMaskGradient_: function(dmColor) {
+      return 'linear-gradient(' + dmColor + ', transparent)';
+    },
+
     /**
      * Whether the pod is currently focused.
      * @param {UserPod} pod Pod to check for focus.
@@ -4558,6 +4619,9 @@ cr.define('login', function() {
       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');
       }
     },