Navi: Allow users to preview NTP backgrounds

https://i.imgur.com/BAXJzRC.png

Bug: 924176
Change-Id: I4328752370dafa3c00d178b0b28a3320e26b071d
Reviewed-on: https://chromium-review.googlesource.com/c/1490053
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636627}

chrome/browser/resources/welcome/onboarding_welcome/ntp_background/ntp_background_proxy.js

@@ -18,6 +18,12 @@ cr.define('nux', function() {
     /** @return {!Promise<!Array<!nux.NtpBackgroundData>>} */
     getBackgrounds() {}
 
+    /**
+     * @param {string} url
+     * @return {!Promise<void>}
+     */
+    preloadImage(url) {}
+
     /** @param {number} id */
     setBackground(id) {}
   }
@@ -29,6 +35,16 @@ cr.define('nux', function() {
       return cr.sendWithPromise('getBackgrounds');
     }
 
+    /** @override */
+    preloadImage(url) {
+      return new Promise((resolve, reject) => {
+        const preloadedImage = new Image();
+        preloadedImage.onerror = reject;
+        preloadedImage.onload = resolve;
+        preloadedImage.src = url;
+      });
+    }
+
     /** @override */
     setBackground(id) {
       chrome.send('setBackground', [id]);

chrome/browser/resources/welcome/onboarding_welcome/ntp_background/nux_ntp_background.html

@@ -20,6 +20,41 @@
         text-align: center;
       }
 
+      #backgroundPreview {
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        bottom: 0;
+        left: 0;
+        opacity: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        transition: background 300ms, opacity 400ms;
+      }
+
+      #backgroundPreview.active {
+        opacity: 1;
+      }
+
+      #backgroundPreview::before {
+        /* Copied from browser/resources/local_ntp/custom_backgrounds.js */
+        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+        /* Pseudo element needs some content (even an empty string) to be
+         * displayed. */
+        content: '';
+        display: block;
+        height: 100%;
+        width: 100%;
+      }
+
+      .content {
+        /* Put a non-static position on the content so that it can have a
+         * higher stacking level than its previous sibling,
+         * the #backgroundPreview element. */
+        position: relative;
+      }
+
       .ntp-background-logo {
         content: -webkit-image-set(
             url(chrome://welcome/images/ntp_background_1x.png) 1x,
@@ -37,6 +72,11 @@
         margin: 0;
         margin-bottom: 46px;
         outline: none;
+        transition: color 400ms;
+      }
+
+      #backgroundPreview.active + .content h1 {
+        color: white;
       }
 
       .ntp-backgrounds-grid {
@@ -116,6 +156,11 @@
         margin-top: 56px;
       }
 
+      .skip-button-container {
+        background: white;
+        border-radius: 4px;
+      }
+
       iron-icon[icon='cr:chevron-right'] {
         height: 20px;
         margin-inline-end: -10px;
@@ -127,35 +172,47 @@
         transform: scaleX(-1);
       }
     </style>
-    <div class="ntp-background-logo"></div>
-    <h1 tabindex="-1">$i18n{ntpBackgroundDescription}</h1>
-
-    <div class="ntp-backgrounds-grid">
-      <template is="dom-repeat" items="[[backgrounds_]]">
-        <button
-            active$="[[isSelectedBackground_(item, selectedBackground_)]]"
-            aria-pressed$="[[getAriaPressedValue_(item, selectedBackground_)]]"
-            class="ntp-background-grid-button"
-            on-click="onBackgroundClick_"
-            on-keyup="onBackgroundKeyUp_"
-            on-pointerdown="onBackgroundPointerDown_">
-          <div class$="ntp-background-thumbnail [[item.thumbnailClass]]"></div>
-          <div class="ntp-background-title">[[item.title]]</div>
-        </button>
-      </template>
+    <div
+        id="backgroundPreview"
+        on-transitionend="onBackgroundPreviewTransitionEnd_">
     </div>
 
-    <div class="button-bar">
-      <paper-button on-click="onSkipClicked_">
-        $i18n{skip}
-      </paper-button>
-      <step-indicator model="[[indicatorModel]]"></step-indicator>
-      <paper-button class="action-button"
-          disabled$="[[!hasValidSelectedBackground_(selectedBackground_)]]"
-          on-click="onNextClicked_">
-        $i18n{next}
-        <iron-icon icon="cr:chevron-right"></iron-icon>
-      </paper-button>
+    <div class="content">
+      <div class="ntp-background-logo"></div>
+      <h1 tabindex="-1">$i18n{ntpBackgroundDescription}</h1>
+
+      <div class="ntp-backgrounds-grid">
+        <template is="dom-repeat" items="[[backgrounds_]]">
+          <button
+              active$="[[isSelectedBackground_(item, selectedBackground_)]]"
+              aria-pressed$="[[getAriaPressedValue_(item,
+                                                    selectedBackground_)]]"
+              class="ntp-background-grid-button"
+              on-click="onBackgroundClick_"
+              on-keyup="onBackgroundKeyUp_"
+              on-pointerdown="onBackgroundPointerDown_">
+            <div
+                class$="ntp-background-thumbnail [[item.thumbnailClass]]">
+            </div>
+            <div class="ntp-background-title">[[item.title]]</div>
+          </button>
+        </template>
+      </div>
+
+      <div class="button-bar">
+        <div class="skip-button-container">
+          <paper-button on-click="onSkipClicked_">
+            $i18n{skip}
+          </paper-button>
+        </div>
+        <step-indicator model="[[indicatorModel]]"></step-indicator>
+        <paper-button class="action-button"
+            disabled$="[[!hasValidSelectedBackground_(selectedBackground_)]]"
+            on-click="onNextClicked_">
+          $i18n{next}
+          <iron-icon icon="cr:chevron-right"></iron-icon>
+        </paper-button>
+      </div>
     </div>
   </template>
 

chrome/browser/resources/welcome/onboarding_welcome/ntp_background/nux_ntp_background.js

@@ -17,7 +17,10 @@ Polymer({
     indicatorModel: Object,
 
     /** @private {?nux.NtpBackgroundData} */
-    selectedBackground_: Object,
+    selectedBackground_: {
+      observer: 'onSelectedBackgroundChange_',
+      type: Object,
+    },
   },
 
   /** @private {?Array<!nux.NtpBackgroundData>} */
@@ -38,13 +41,17 @@ Polymer({
       thumbnailClass: '',
       title: this.i18n('ntpBackgroundDefault'),
     };
-    this.selectedBackground_ = defaultBackground;
-    this.ntpBackgroundProxy_.getBackgrounds().then((backgrounds) => {
-      this.backgrounds_ = [
-        defaultBackground,
-        ...backgrounds,
-      ];
-    });
+    if (!this.selectedBackground_) {
+      this.selectedBackground_ = defaultBackground;
+    }
+    if (!this.backgrounds_) {
+      this.ntpBackgroundProxy_.getBackgrounds().then((backgrounds) => {
+        this.backgrounds_ = [
+          defaultBackground,
+          ...backgrounds,
+        ];
+      });
+    }
   },
 
   /**
@@ -71,6 +78,33 @@ Polymer({
     return background == this.selectedBackground_;
   },
 
+  /** @private */
+  onSelectedBackgroundChange_: function() {
+    const id = this.selectedBackground_.id;
+
+    if (id > -1) {
+      const imageUrl = this.selectedBackground_.imageUrl;
+      this.ntpBackgroundProxy_.preloadImage(imageUrl).then(() => {
+        if (this.selectedBackground_.id === id) {
+          this.$.backgroundPreview.classList.add('active');
+          this.$.backgroundPreview.style.backgroundImage = `url(${imageUrl})`;
+        }
+      });
+    } else {
+      this.$.backgroundPreview.classList.remove('active');
+    }
+  },
+
+  /** @private */
+  onBackgroundPreviewTransitionEnd_: function() {
+    // Whenever the #backgroundPreview transitions to a non-active, hidden
+    // state, remove the background image. This way, when the element
+    // transitions back to active, the previous background is not displayed.
+    if (!this.$.backgroundPreview.classList.contains('active')) {
+      this.$.backgroundPreview.style.backgroundImage = '';
+    }
+  },
+
   /**
    * @param {!{model: !{item: !nux.NtpBackgroundData}}} e
    * @private

chrome/browser/ui/webui/welcome/nux/ntp_background_handler.cc

@@ -54,6 +54,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
   base::ListValue list_value;
   std::array<GURL, kOnboardingNtpBackgroundsCount> onboardingNtpBackgrounds =
       GetOnboardingNtpBackgrounds();
+  const std::string kUrlPrefix = "preview-background.jpg?";
 
   auto element = std::make_unique<base::DictionaryValue>();
   int id = static_cast<int>(NtpBackgrounds::kEarth);
@@ -61,7 +62,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
   element->SetString("title",
                      l10n_util::GetStringUTF8(
                          IDS_ONBOARDING_WELCOME_NTP_BACKGROUND_EARTH_TITLE));
-  element->SetString("imageUrl", onboardingNtpBackgrounds[id].spec());
+  element->SetString("imageUrl", kUrlPrefix + std::to_string(id));
   element->SetString("thumbnailClass", "earth");
   list_value.Append(std::move(element));
 
@@ -71,7 +72,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
   element->SetString(
       "title", l10n_util::GetStringUTF8(
                    IDS_ONBOARDING_WELCOME_NTP_BACKGROUND_CITYSCAPE_TITLE));
-  element->SetString("imageUrl", onboardingNtpBackgrounds[id].spec());
+  element->SetString("imageUrl", kUrlPrefix + std::to_string(id));
   element->SetString("thumbnailClass", "cityscape");
   list_value.Append(std::move(element));
 
@@ -81,7 +82,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
   element->SetString(
       "title", l10n_util::GetStringUTF8(
                    IDS_ONBOARDING_WELCOME_NTP_BACKGROUND_LANDSCAPE_TITLE));
-  element->SetString("imageUrl", onboardingNtpBackgrounds[id].spec());
+  element->SetString("imageUrl", kUrlPrefix + std::to_string(id));
   element->SetString("thumbnailClass", "landscape");
   list_value.Append(std::move(element));
 
@@ -91,7 +92,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
   element->SetString("title",
                      l10n_util::GetStringUTF8(
                          IDS_ONBOARDING_WELCOME_NTP_BACKGROUND_ART_TITLE));
-  element->SetString("imageUrl", onboardingNtpBackgrounds[id].spec());
+  element->SetString("imageUrl", kUrlPrefix + std::to_string(id));
   element->SetString("thumbnailClass", "art");
   list_value.Append(std::move(element));
 
@@ -102,7 +103,7 @@ void NtpBackgroundHandler::HandleGetBackgrounds(const base::ListValue* args) {
       "title",
       l10n_util::GetStringUTF8(
           IDS_ONBOARDING_WELCOME_NTP_BACKGROUND_GEOMETRIC_SHAPES_TITLE));
-  element->SetString("imageUrl", onboardingNtpBackgrounds[id].spec());
+  element->SetString("imageUrl", kUrlPrefix + std::to_string(id));
   element->SetString("thumbnailClass", "geometric-shapes");
   list_value.Append(std::move(element));
 

chrome/test/data/webui/welcome/nux_ntp_background_test.js

@@ -8,15 +8,17 @@ cr.define('onboarding_ntp_background_test', function() {
     let backgrounds = [
       {
         id: 0,
-        title: 'Cat',
-        imageUrl: 'some/cute/photo/of/a/cat',
-        thumbnailClass: 'cat',
+        title: 'Art',
+        /* Image URLs are set to actual static images to prevent requesting
+         * an external image. */
+        imageUrl: '../images/ntp_thumbnails/art.jpg',
+        thumbnailClass: 'art',
       },
       {
         id: 1,
-        title: 'Venice',
-        imageUrl: 'some/scenic/photo/of/a/beach',
-        thumbnailClass: 'venice',
+        title: 'Cityscape',
+        imageUrl: '../images/ntp_thumbnails/cityscape.jpg',
+        thumbnailClass: 'cityscape',
       },
     ];
 
@@ -66,6 +68,29 @@ cr.define('onboarding_ntp_background_test', function() {
       }
     });
 
+    test('test previewing a background and going back to default', function() {
+      const options = testElement.shadowRoot.querySelectorAll(
+          '.ntp-background-grid-button');
+
+      options[1].click();
+      return testNtpBackgroundProxy.whenCalled('preloadImage').then(() => {
+        assertEquals(
+            testElement.$.backgroundPreview.style.backgroundImage,
+            `url("${backgrounds[0].imageUrl}")`);
+        assertTrue(
+            testElement.$.backgroundPreview.classList.contains('active'));
+
+        // go back to the default option, and pretend all CSS transitions
+        // have completed
+        options[0].click();
+        testElement.$.backgroundPreview.dispatchEvent(
+            new Event('transitionend'));
+        assertEquals(testElement.$.backgroundPreview.style.backgroundImage, '');
+        assertFalse(
+            testElement.$.backgroundPreview.classList.contains('active'));
+      });
+    });
+
     test('test disabling and enabling of the next button', function() {
       const nextButton = testElement.shadowRoot.querySelector('.action-button');
       assertTrue(nextButton.disabled);

chrome/test/data/webui/welcome/test_ntp_background_proxy.js

@@ -7,6 +7,7 @@ class TestNtpBackgroundProxy extends TestBrowserProxy {
   constructor() {
     super([
       'getBackgrounds',
+      'preloadImage',
       'setBackground',
     ]);
 
@@ -20,6 +21,12 @@ class TestNtpBackgroundProxy extends TestBrowserProxy {
     return Promise.resolve(this.backgroundsList_);
   }
 
+  /** @override */
+  preloadImage(url) {
+    this.methodCalled('preloadImage');
+    return Promise.resolve();
+  }
+
   /** @override */
   setBackground(id) {
     this.methodCalled('setBackground', id);