cros: Disable daily refresh when user selects a new wallpaper

This CL is a combination of small changes based on the meeting with PM
and UX, It includes:

1) Disable daily refresh when another wallpaper is selected.
2) Make the entire area of daily refresh thumbnail clickable.
3) Add shadow to preview top bar and selected thumbnails.
4) Adjust spacing for buttons in current wallpaper info bar.
5) Switch the colors for enabled/disabled states for the buttons.
6) Change the color of the button text.
7) Prevent restoring the previous active windows in tablet mode after
   the picker closes (i.e. continue to show the new wallpaper or home
   launcher).
8) Hide scroll bar if there's no scroll event after a timeout.

Bug: 863491
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Id0aa1913f2bb0820909d7c714805cb723426a316
Reviewed-on: https://chromium-review.googlesource.com/1137486Reviewed-by: Alexander Alekseev <alemate@chromium.org>
Commit-Queue: Wenzhao (Colin) Zang <wzang@chromium.org>
Cr-Commit-Position: refs/heads/master@{#576346}

chrome/browser/resources/chromeos/wallpaper_manager/css/wallpaper_manager.css

@@ -423,10 +423,6 @@ body.v2 {
   display: none;
 }
 
-.v2 .image-picker {
-  height: 100%;
-}
-
 .v2 #category-container {
   overflow-y: hidden;
 }
@@ -478,6 +474,7 @@ body.v2 {
 .v2 .image-picker {
   -webkit-padding-end: unset;
   -webkit-padding-start: unset;
+  height: 100%;
   padding-bottom: unset;
   padding-top: unset;
 }
@@ -505,10 +502,6 @@ body.v2 {
   box-sizing: border-box;
 }
 
-.v2 .image-picker [role=listitem].daily-refresh-item {
-  pointer-events: none;
-}
-
 .v2 .image-picker:not([disabled]) [role=listitem]:hover {
   outline: none;
   z-index: unset;
@@ -526,6 +519,7 @@ body.v2 {
 
 .v2 .image-picker [role=listitem][selected]:not(.daily-refresh-item) img {
   border-radius: 4px;
+  box-shadow: 0 4px 8px rgba(32, 33, 36, 0.17);
   transform: scale(0.8);
 }
 
@@ -541,6 +535,15 @@ body.v2 {
   top: 8px;
 }
 
+.v2 .image-picker::-webkit-scrollbar-thumb {
+  background: #888;
+  display: none;
+}
+
+.v2 .image-picker.show-scroll-bar::-webkit-scrollbar-thumb {
+  display: block;
+}
+
 .v2 #window-close-button {
   display: none;
 }
@@ -572,6 +575,7 @@ body.v2 {
   -webkit-app-region: no-drag;
   background-color: #fff;
   border-radius: 0 0 24px 24px;
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.24), 0 0 24px rgba(0, 0, 0, 0.12);
   display: flex;
   height: 48px;
   position: absolute;
@@ -675,7 +679,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
 
 .v2 .top-header-contents .more-options > div {
   background-color: #fff;
-  color: rgb(66, 133, 244);
+  color: rgb(26, 115, 232);
   display: none;
   margin-top: -8px;
   padding: 8px 24px;
@@ -697,8 +701,8 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
 
 .v2 .top-header-contents .more-options .center-button.disabled,
 .v2 .top-header-contents .more-options .center-cropped-button.disabled {
-  background-color: rgb(232,240,254);
-  color: rgb(66, 133, 244);
+  background-color: rgb(232, 240, 254);
+  color: rgb(26, 115, 232);
   pointer-events: none;
   z-index: 1;
 }
@@ -711,31 +715,26 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
   -webkit-margin-start: -24px;
 }
 
-.v2 .top-header-contents .center-button.disabled .icon,
+.v2 .top-header-contents .center-button .icon,
 .v2 #current-wallpaper-more-options #center .icon {
   background-image: url(../images/ui/center_layout.svg);
 }
 
-.v2 .top-header-contents .center-button .icon,
+.v2 .top-header-contents .center-button.disabled .icon,
 .v2 #current-wallpaper-more-options #center.disabled .icon {
   background-image: url(../images/ui/center_layout_disabled.svg);
 }
 
-.v2 .top-header-contents .center-cropped-button.disabled .icon,
+.v2 .top-header-contents .center-cropped-button .icon,
 .v2 #current-wallpaper-more-options #center-cropped .icon {
   background-image: url(../images/ui/center_cropped_layout.svg);
 }
 
-.v2 .top-header-contents .center-cropped-button .icon,
+.v2 .top-header-contents .center-cropped-button.disabled .icon,
 .v2 #current-wallpaper-more-options #center-cropped.disabled .icon {
   background-image: url(../images/ui/center_cropped_layout_disabled.svg);
 }
 
-.v2 #current-wallpaper-more-options .disabled {
-  color: rgb(128, 134, 139);
-  pointer-events: none;
-}
-
 .v2 .top-header-contents #confirm-preview-wallpaper {
   -webkit-margin-start: 96px;
 }
@@ -825,6 +824,10 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
   pointer-events: none;
 }
 
+.v2 .image-picker-offline img.slide-show {
+  -webkit-filter: grayscale(1);
+}
+
 .v2 .daily-refresh-slider::before {
   background-color: #fff;
   border-radius: 50%;
@@ -837,16 +840,16 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
   width: 16px;
 }
 
-.v2 .daily-refresh-slider.checked  {
-  background-color: rgb(66, 133, 244, 0.6);
+.v2 .daily-refresh-item.checked .daily-refresh-slider  {
+  background-color: rgb(26, 115, 232, 0.6);
 }
 
-.v2 .daily-refresh-slider.checked::before {
-  background-color: rgb(66, 133, 244);
+.v2 .daily-refresh-item.checked .daily-refresh-slider::before {
+  background-color: rgb(26, 115, 232);
   transform: translateX(16px);
 }
 
-.v2 .daily-refresh-slider .ripple-circle {
+.v2 .daily-refresh-item .daily-refresh-slider .ripple-circle {
   background: #000;
   border-radius: 50%;
   height: 36px;
@@ -858,22 +861,22 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
   width: 36px;
 }
 
-.v2 .daily-refresh-slider.checked .ripple-circle {
+.v2 .daily-refresh-item.checked .daily-refresh-slider .ripple-circle {
   background-color: rgb(30, 144, 255);
   left: 4px;
 }
 
-.v2 .daily-refresh-slider.ripple-animation .ripple-circle {
+.v2 .daily-refresh-item.ripple-animation .daily-refresh-slider .ripple-circle {
   animation: ripple 240ms;
   animation-delay: 120ms;
 }
 
-.v2 .daily-refresh-slider:focus:not(.ripple-animation) .ripple-circle {
+.v2 .daily-refresh-item:not(.ripple-animation) .daily-refresh-slider:focus .ripple-circle {
   transform: scale(1);
 }
 
 .v2 .daily-refresh-label {
-  color: rgb(66, 133, 244);
+  color: rgb(26, 115, 232);
   font-family: 'Roboto';
   font-size: 13px;
   font-weight: 500;
@@ -941,7 +944,7 @@ html[dir='rtl'] .v2 .top-header-contents .more-options {
 }
 
 .v2 #current-wallpaper-more-options {
-  color: rgb(66, 133, 244);
+  color: rgb(26, 115, 232);
   display: flex;
   flex-direction: column;
   font-size: 12px;
@@ -955,16 +958,25 @@ html[dir='rtl'] .v2 #current-wallpaper-more-options {
 
 .v2 #current-wallpaper-more-options > div {
   display: flex;
-  padding: 8px 4px;
+  padding: 8px 0;
+}
+
+.v2 #current-wallpaper-more-options #center,
+.v2 #current-wallpaper-more-options #center-cropped {
+  color: rgb(128, 134, 139);
+}
+
+.v2 #current-wallpaper-more-options #center.disabled,
+.v2 #current-wallpaper-more-options #center-cropped.disabled {
+  color: rgb(26, 115, 232);
+  pointer-events: none;
 }
 
 .v2 #current-wallpaper-more-options .text {
-  -webkit-margin-end: 16px;
   padding-top: 1px;
 }
 
 .v2 #current-wallpaper-more-options .icon {
-  -webkit-margin-start: 16px;
   -webkit-padding-end: 8px;
   background-repeat: no-repeat;
   height: 16px;

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#1A73E8" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
+  <path fill="#80868B" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
 </svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_cropped_layout_disabled.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#80868B" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
+  <path fill="#1A73E8" fill-rule="evenodd" d="M2,11 L14,11 L14,5 L2,5 L2,11 Z M1,12 L15,12 L15,4 L1,4 L1,12 Z M10,3 L12,3 L12,1 L10,1 L10,3 Z M10,15 L12,15 L12,13 L10,13 L10,15 Z M13,15 C14.1,15 15,14.1 15,13 L13,13 L13,15 Z M7,15 L9,15 L9,13 L7,13 L7,15 Z M4,3 L6,3 L6,1 L4,1 L4,3 Z M3,15 L3,13 L1,13 C1,14.1 1.9,15 3,15 L3,15 Z M13,1 L13,3 L15,3 C15,1.9 14.1,1 13,1 L13,1 Z M7,3 L9,3 L9,1 L7,1 L7,3 Z M4,15 L6,15 L6,13 L4,13 L4,15 Z M1,3 L3,3 L3,1 C1.9,1 1,1.9 1,3 L1,3 Z"/>
 </svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#1A73E8" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
+  <path fill="#80868B" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
 </svg>

chrome/browser/resources/chromeos/wallpaper_manager/images/ui/center_layout_disabled.svg

 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill="#80868B" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
+  <path fill="#1A73E8" fill-rule="evenodd" d="M5,9 L9,9 L9,5 L5,5 L5,9 Z M4,10 L10,10 L10,4 L4,4 L4,10 Z M9,2 L11,2 L11,0 L9,0 L9,2 Z M9,14 L11,14 L11,12 L9,12 L9,14 Z M12,11 L14,11 L14,9 L12,9 L12,11 Z M12,5 L14,5 L14,3 L12,3 L12,5 Z M12,14 C13.1,14 14,13.1 14,12 L12,12 L12,14 Z M12,8 L14,8 L14,6 L12,6 L12,8 Z M6,14 L8,14 L8,12 L6,12 L6,14 Z M3,2 L5,2 L5,0 L3,0 L3,2 Z M0,11 L2,11 L2,9 L0,9 L0,11 Z M2,14 L2,12 L0,12 C0,13.1 0.9,14 2,14 L2,14 Z M12,0 L12,2 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M6,2 L8,2 L8,0 L6,0 L6,2 Z M0,5 L2,5 L2,3 L0,3 L0,5 Z M3,14 L5,14 L5,12 L3,12 L3,14 Z M0,8 L2,8 L2,6 L0,6 L0,8 Z M2,2 L2,0 C0.9,0 0,0.9 0,2 L2,2 Z" transform="translate(1 1)"/>
 </svg>

chrome/browser/resources/chromeos/wallpaper_manager/js/event_page.js

@@ -368,14 +368,19 @@ chrome.app.runtime.onLaunched.addListener(function() {
           alphaEnabled: true
         };
 
-    chrome.app.window.create('main.html', options, function(w) {
-      wallpaperPickerWindow = w;
+    chrome.app.window.create('main.html', options, function(window) {
+      wallpaperPickerWindow = window;
       chrome.wallpaperPrivate.minimizeInactiveWindows();
-      w.onClosed.addListener(function() {
+      window.onClosed.addListener(function() {
         wallpaperPickerWindow = null;
-        chrome.wallpaperPrivate.restoreMinimizedWindows();
         // In case the app exits unexpectedly during preview.
         chrome.wallpaperPrivate.cancelPreviewWallpaper(() => {});
+        // If the app exits during preview, do not restore the previously active
+        // windows. Continue to show the new wallpaper.
+        if (!window.contentWindow.document.body.classList.contains(
+                'preview-mode')) {
+          chrome.wallpaperPrivate.restoreMinimizedWindows();
+        }
       });
       if (useNewWallpaperPicker) {
         // By design, the new wallpaper picker should never be shown on top of
@@ -384,7 +389,7 @@ chrome.app.runtime.onLaunched.addListener(function() {
             'focus', function() {
               chrome.wallpaperPrivate.minimizeInactiveWindows();
             });
-        w.onMinimized.addListener(function() {
+        window.onMinimized.addListener(function() {
           chrome.wallpaperPrivate.restoreMinimizedWindows();
         });
       }
@@ -664,10 +669,15 @@ chrome.wallpaperPrivate.onWallpaperChangedBy3rdParty.addListener(function(
       fileName, layout, Constants.WallpaperSourceEnum.ThirdParty, appName);
 
   getWallpaperPickerInfo((useNewWallpaperPicker, highResolutionSuffix) => {
+    // Surprise me/daily refresh should be auto-disabled if wallpaper is changed
+    // by third-party apps.
     if (!useNewWallpaperPicker) {
       SurpriseWallpaper.getInstance().disable();
       return;
     }
+    WallpaperUtil.saveDailyRefreshInfo(
+        {enabled: false, collectionId: null, resumeToken: null});
+
     if (wallpaperPickerWindow) {
       var event = new CustomEvent(
           Constants.WallpaperChangedBy3rdParty,

chrome/browser/resources/chromeos/wallpaper_manager/js/wallpaper_images_grid.js

@@ -97,6 +97,9 @@ cr.define('wallpapers', function() {
           if (e.keyCode == 13)
             this.parentNode.selectedItem = this.dataItem;
         });
+        this.addEventListener('mousedown', e => {
+          e.preventDefault();
+        });
       }
 
       imageEl.classList.add('thumbnail');
@@ -705,10 +708,9 @@ cr.define('wallpapers', function() {
       if (!this.dailyRefreshItem.querySelector('.daily-refresh-banner')) {
         var dailyRefreshBanner = document.querySelector('.daily-refresh-banner')
                                      .cloneNode(true /*deep=*/);
-        wallpaperManager.decorateDailyRefreshSlider(
-            this.collectionId,
-            dailyRefreshBanner.querySelector('.daily-refresh-slider'));
         this.dailyRefreshItem.appendChild(dailyRefreshBanner);
+        wallpaperManager.decorateDailyRefreshItem(
+            this.collectionId, this.dailyRefreshItem);
       }
 
       slideShowImage.style.opacity =
@@ -728,17 +730,12 @@ cr.define('wallpapers', function() {
       var images = this.dailyRefreshImages;
       if (images.length <= index)
         return;
-      images[index].style.opacity = 1;
-
-      if (images.length > 1) {
-        var previousIndex = (index - 1) % images.length;
-        if (previousIndex < 0)
-          previousIndex += images.length;
-        images[previousIndex].style.opacity = 0;
-        var nextIndex = (index + 1) % images.length;
-        this.dailyRefreshTimer_ =
-            window.setTimeout(this.showNextImage_.bind(this, nextIndex), 3000);
+      for (var i = 0; i < images.length; ++i) {
+        images[i].style.opacity = i === index ? 1 : 0;
       }
+      var nextIndex = (index + 1) % images.length;
+      this.dailyRefreshTimer_ =
+          window.setTimeout(this.showNextImage_.bind(this, nextIndex), 3000);
     },
 
     /**