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);
     },
 
     /**

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

@@ -517,6 +517,10 @@ WallpaperManager.prototype.toggleSurpriseMe = function() {
  * do not depend on the download should be initialized here.
  */
 WallpaperManager.prototype.preDownloadDomInit_ = function() {
+  this.document_.defaultView.addEventListener(
+      'resize', this.onResize_.bind(this));
+  this.document_.defaultView.addEventListener(
+      'keydown', this.onKeyDown_.bind(this));
   if (this.useNewWallpaperPicker_) {
     $('minimize-button').addEventListener('click', function() {
       chrome.app.window.current().minimize();
@@ -530,24 +534,32 @@ WallpaperManager.prototype.preDownloadDomInit_ = function() {
       // Clear the check mark (if any). Do not try to locate the new wallpaper
       // in the picker to avoid changing the selected category abruptly.
       this.wallpaperGrid_.selectedItem = null;
+      this.disableDailyRefresh_();
     });
+    var imagePicker = this.document_.body.querySelector('.image-picker');
+    imagePicker.addEventListener('scroll', function() {
+      var scrollTimer;
+      return () => {
+        imagePicker.classList.add('show-scroll-bar');
+        window.clearTimeout(scrollTimer);
+        scrollTimer = window.setTimeout(() => {
+          imagePicker.classList.remove('show-scroll-bar');
+        }, 500);
+      };
+    }());
   } else {
     $('window-close-button').addEventListener('click', function() {
       window.close();
     });
+    $('learn-more').href = LearnMoreURL;
+    $('close-error').addEventListener('click', function() {
+      $('error-container').hidden = true;
+    });
+    $('close-wallpaper-selection').addEventListener('click', function() {
+      $('wallpaper-selection-container').hidden = true;
+      $('set-wallpaper-layout').disabled = true;
+    });
   }
-  this.document_.defaultView.addEventListener(
-      'resize', this.onResize_.bind(this));
-  this.document_.defaultView.addEventListener(
-      'keydown', this.onKeyDown_.bind(this));
-  $('learn-more').href = LearnMoreURL;
-  $('close-error').addEventListener('click', function() {
-    $('error-container').hidden = true;
-  });
-  $('close-wallpaper-selection').addEventListener('click', function() {
-    $('wallpaper-selection-container').hidden = true;
-    $('set-wallpaper-layout').disabled = true;
-  });
 };
 
 /**
@@ -885,19 +897,22 @@ WallpaperManager.prototype.decorateCurrentWallpaperInfoBar_ = function() {
               0.4;
           visibleItemList[0].style.marginTop = topMargin + 'px';
           visibleItemList[1].style.marginTop = topMargin / 2 + 'px';
-
-          // Make sure that all the texts are centered.
-          for (var item of visibleItemList) {
-            var totalPadding = $('current-wallpaper-more-options').offsetWidth -
-                (item.querySelector('.icon').offsetWidth +
-                 item.querySelector('.text').offsetWidth);
-            item.querySelector('.icon').style.WebkitMarginStart =
-                totalPadding / 2 + 'px';
-          }
+        }
+        // Add necessary padding and make sure all the texts are centered. Clear
+        // the existing padding first.
+        for (var item of visibleItemList) {
+          item.style.paddingLeft = item.style.paddingRight = '0px';
+        }
+        var totalWidth = $('current-wallpaper-more-options').offsetWidth;
+        for (var item of visibleItemList) {
+          var padding = 15 +
+              (totalWidth -
+               (item.querySelector('.icon').offsetWidth +
+                item.querySelector('.text').offsetWidth)) /
+                  2;
+          item.style.paddingLeft = item.style.paddingRight = padding + 'px';
         }
 
-        $('current-wallpaper-more-options')
-            .classList.toggle('online-wallpaper', isOnlineWallpaper);
         // Clear the existing contents (needed if the wallpaper changes while
         // the picker is open).
         $('current-wallpaper-description').innerHTML = '';
@@ -1046,6 +1061,10 @@ WallpaperManager.prototype.onWallpaperChanged_ = function(
   $('wallpaper-set-by-message').textContent = '';
   $('wallpaper-grid').classList.remove('small');
 
+  // Disables daily refresh if user selects a non-daily wallpaper.
+  if (activeItem && activeItem.source !== Constants.WallpaperSourceEnum.Daily)
+    this.disableDailyRefresh_();
+
   if (activeItem) {
     WallpaperUtil.saveWallpaperInfo(
         currentWallpaperURL, activeItem.layout, activeItem.source, '');
@@ -2183,7 +2202,7 @@ WallpaperManager.prototype.toggleLayoutButtonStates_ = function(layout) {
 
 /**
  * Fetches the info related to the daily refresh feature and updates the UI for
- * the sliders. Only used by the new wallpaper picker.
+ * the items. Only used by the new wallpaper picker.
  * @private
  */
 WallpaperManager.prototype.initializeDailyRefreshStates_ = function() {
@@ -2204,7 +2223,7 @@ WallpaperManager.prototype.initializeDailyRefreshStates_ = function() {
       };
     }
 
-    this.updateDailyRefreshSliderStates_(this.dailyRefreshInfo_);
+    this.updateDailyRefreshItemStates_(this.dailyRefreshInfo_);
     this.decorateCurrentWallpaperInfoBar_();
   };
 
@@ -2213,58 +2232,50 @@ WallpaperManager.prototype.initializeDailyRefreshStates_ = function() {
 };
 
 /**
- * Updates the UI of all the daily refresh sliders based on the info.
+ * Updates the UI of all the daily refresh items based on the info.
  * @param {Object} dailyRefreshInfo The daily refresh info.
  * @private
  */
-WallpaperManager.prototype.updateDailyRefreshSliderStates_ = function(
+WallpaperManager.prototype.updateDailyRefreshItemStates_ = function(
     dailyRefreshInfo) {
-  if (!this.dailyRefreshSliderMap_ || !dailyRefreshInfo)
+  if (!this.dailyRefreshItemMap_ || !dailyRefreshInfo)
     return;
 
-  Object.entries(this.dailyRefreshSliderMap_)
-      .forEach(([collectionId, dailyRefreshSlider]) => {
+  Object.entries(this.dailyRefreshItemMap_)
+      .forEach(([collectionId, dailyRefreshItem]) => {
         var enabled = dailyRefreshInfo.enabled &&
             dailyRefreshInfo.collectionId === collectionId;
-        dailyRefreshSlider.classList.toggle('checked', enabled);
-        dailyRefreshSlider.setAttribute('aria-checked', enabled);
+        dailyRefreshItem.classList.toggle('checked', enabled);
+        dailyRefreshItem.querySelector('.daily-refresh-slider')
+            .setAttribute('aria-checked', enabled);
       });
 };
 
 /**
- * Decorates the UI and registers event listener for the slider.
- * @param {string} collectionId The collection id that this slider is associated
+ * Decorates the UI and registers event listener for the item.
+ * @param {string} collectionId The collection id that this item is associated
  *     with.
- * @param {Object} dailyRefreshSlider The daily refresh slider.
+ * @param {Object} dailyRefreshItem The daily refresh item.
  */
-WallpaperManager.prototype.decorateDailyRefreshSlider = function(
-    collectionId, dailyRefreshSlider) {
-  if (!this.dailyRefreshSliderMap_)
-    this.dailyRefreshSliderMap_ = {};
-
-  this.dailyRefreshSliderMap_[collectionId] = dailyRefreshSlider;
-  this.updateDailyRefreshSliderStates_(this.dailyRefreshInfo_);
-  dailyRefreshSlider.addEventListener('click', () => {
-    var isSliderEnabled = dailyRefreshSlider.classList.contains('checked');
+WallpaperManager.prototype.decorateDailyRefreshItem = function(
+    collectionId, dailyRefreshItem) {
+  if (!this.dailyRefreshItemMap_)
+    this.dailyRefreshItemMap_ = {};
+
+  this.dailyRefreshItemMap_[collectionId] = dailyRefreshItem;
+  this.updateDailyRefreshItemStates_(this.dailyRefreshInfo_);
+  dailyRefreshItem.addEventListener('click', () => {
+    var isItemEnabled = dailyRefreshItem.classList.contains('checked');
     var isCollectionEnabled =
         collectionId === this.dailyRefreshInfo_.collectionId;
-    if (isSliderEnabled !== isCollectionEnabled) {
+    if (isItemEnabled !== isCollectionEnabled) {
       console.error(
           'There is a mismatch between the enabled daily refresh collection ' +
-          'and the slider state. This should never happen.');
+          'and the item state. This should never happen.');
       return;
     }
-    if (isSliderEnabled) {
-      // Disable daily refresh. The current value of the collection id and
-      // resume token can be discarded.
-      this.dailyRefreshInfo_ = {
-        enabled: false,
-        collectionId: null,
-        resumeToken: null
-      };
-      WallpaperUtil.saveDailyRefreshInfo(this.dailyRefreshInfo_);
-      this.updateDailyRefreshSliderStates_(this.dailyRefreshInfo_);
-      this.decorateCurrentWallpaperInfoBar_();
+    if (isItemEnabled) {
+      this.disableDailyRefresh_();
     } else {
       // Enable daily refresh but do not overwrite |dailyRefreshInfo_| yet
       // (since it's still possible to revert). The resume token is left empty
@@ -2277,21 +2288,21 @@ WallpaperManager.prototype.decorateDailyRefreshSlider = function(
       this.setDailyRefreshWallpaper_();
     }
     var toggleRippleAnimation = enabled => {
-      dailyRefreshSlider.classList.toggle('ripple-animation', enabled);
+      dailyRefreshItem.classList.toggle('ripple-animation', enabled);
     };
     toggleRippleAnimation(true);
     window.setTimeout(() => {
       toggleRippleAnimation(false);
     }, 360);
   });
-  dailyRefreshSlider.addEventListener('keypress', e => {
+  dailyRefreshItem.addEventListener('keypress', e => {
     if (e.keyCode == 13)
-      dailyRefreshSlider.click();
+      dailyRefreshItem.click();
   });
-  dailyRefreshSlider.addEventListener('mousedown', e => {
+  dailyRefreshItem.addEventListener('mousedown', e => {
     e.preventDefault();
   });
-  dailyRefreshSlider.setAttribute('aria-label', str('surpriseMeLabel'));
+  dailyRefreshItem.setAttribute('aria-label', str('surpriseMeLabel'));
 };
 
 /**
@@ -2303,7 +2314,7 @@ WallpaperManager.prototype.setDailyRefreshWallpaper_ = function() {
   if (!this.pendingDailyRefreshInfo_)
     return;
   // There should be immediate UI update even though the info hasn't been saved.
-  this.updateDailyRefreshSliderStates_(this.pendingDailyRefreshInfo_);
+  this.updateDailyRefreshItemStates_(this.pendingDailyRefreshInfo_);
   this.updateSpinnerVisibility_(true);
 
   var retryCount = 0;
@@ -2315,7 +2326,7 @@ WallpaperManager.prototype.setDailyRefreshWallpaper_ = function() {
           var failureCallback = () => {
             this.pendingDailyRefreshInfo_ = null;
             // Restore the original states.
-            this.updateDailyRefreshSliderStates_(this.dailyRefreshInfo_);
+            this.updateDailyRefreshItemStates_(this.dailyRefreshInfo_);
             this.updateSpinnerVisibility_(false);
           };
           if (chrome.runtime.lastError) {
@@ -2406,6 +2417,7 @@ WallpaperManager.prototype.setDailyRefreshWallpaper_ = function() {
  * @param {Object} button The button object.
  * @param {function} eventListener The function to be called when the button is
  *     clicked or the Enter key is pressed.
+ * @private
  */
 WallpaperManager.prototype.addEventToButton_ = function(button, eventListener) {
   // Replace the button with a clone to clear all previous event listeners.
@@ -2427,4 +2439,23 @@ WallpaperManager.prototype.addEventToButton_ = function(button, eventListener) {
   });
 };
 
+/**
+ * Helper function to disable daily refresh on the new wallpaper picker.
+ * Discards the current values of collection id and resume token. No-op if it's
+ * already disabled.
+ * @private
+ */
+WallpaperManager.prototype.disableDailyRefresh_ = function() {
+  if (!this.dailyRefreshInfo_ || !this.dailyRefreshInfo_.enabled)
+    return;
+  this.dailyRefreshInfo_ = {
+    enabled: false,
+    collectionId: null,
+    resumeToken: null
+  };
+  WallpaperUtil.saveDailyRefreshInfo(this.dailyRefreshInfo_);
+  this.updateDailyRefreshItemStates_(this.dailyRefreshInfo_);
+  this.decorateCurrentWallpaperInfoBar_();
+};
+
 })();