Bug 1036299 - Show enhanced content image when the tile is unhovered [r=adw]

Place an image above the usual thumbnail to hide on hover. Have DirectoryLinksProvider keep a cache of enhanced links/images to use on history tiles.

--HG--
extra : rebase_source : e4d1ddafebf13c1723a79d889a7ca3039396bc0d

browser/base/content/newtab/grid.js

@@ -161,6 +161,7 @@ let gGrid = {
     site.innerHTML =
       '<a class="newtab-link">' +
       '  <span class="newtab-thumbnail"/>' +
+      '  <span class="newtab-thumbnail enhanced-content"/>' +
       '  <span class="newtab-title"/>' +
       '</a>' +
       '<input type="button" title="' + newTabString("pin") + '"' +

browser/base/content/newtab/sites.js

@@ -153,12 +153,24 @@ Site.prototype = {
    * Refreshes the thumbnail for the site.
    */
   refreshThumbnail: function Site_refreshThumbnail() {
+    let link = DirectoryLinksProvider.getEnhancedLink(this.link) || this.link;
+
     let thumbnail = this._querySelector(".newtab-thumbnail");
-    if (this.link.bgColor) {
-      thumbnail.style.backgroundColor = this.link.bgColor;
+    if (link.bgColor) {
+      thumbnail.style.backgroundColor = link.bgColor;
     }
-    let uri = this.link.imageURI || PageThumbs.getThumbnailURL(this.url);
+
+    let uri = link.imageURI || PageThumbs.getThumbnailURL(this.url);
     thumbnail.style.backgroundImage = 'url("' + uri + '")';
+
+    if (link.enhancedImageURI) {
+      let enhanced = this._querySelector(".enhanced-content");
+      enhanced.style.backgroundImage = 'url("' + link.enhancedImageURI + '")';
+
+      if (this.link.type != link.type) {
+        this.node.setAttribute("type", "enhanced");
+      }
+    }
   },
 
   /**

browser/themes/shared/newtab/newTab.inc.css

@@ -124,7 +124,12 @@
   transition: opacity 100ms ease-out;
 }
 
+.newtab-thumbnail.enhanced-content:hover {
+  opacity: 0;
+}
+
 .newtab-site[type=affiliate] .newtab-thumbnail,
+.newtab-site[type=enhanced] .newtab-thumbnail,
 .newtab-site[type=organic] .newtab-thumbnail,
 .newtab-site[type=sponsored] .newtab-thumbnail {
   background-position: center center;

toolkit/modules/DirectoryLinksProvider.jsm

@@ -70,6 +70,11 @@ let DirectoryLinksProvider = {
   // download default interval is 24 hours in milliseconds
   _downloadIntervalMS: 86400000,
 
+  /**
+   * A mapping from eTLD+1 to an enhanced link objects
+   */
+  _enhancedLinks: new Map(),
+
   get _observedPrefs() Object.freeze({
     linksURL: PREF_DIRECTORY_SOURCE,
     matchOSLocale: PREF_MATCH_OS_LOCALE,
@@ -146,6 +151,14 @@ let DirectoryLinksProvider = {
     }
   },
 
+  /**
+   * Get the eTLD+1 / base domain from a url spec
+   */
+  _extractSite: function DirectoryLinksProvider_extractSite(url) {
+    let linkURI = Services.io.newURI(url, null, null);
+    return Services.eTLD.getBaseDomain(linkURI);
+  },
+
   _fetchAndCacheLinks: function DirectoryLinksProvider_fetchAndCacheLinks(uri) {
     let deferred = Promise.defer();
     let xmlHttp = new XMLHttpRequest();
@@ -305,14 +318,31 @@ let DirectoryLinksProvider = {
     return Promise.resolve();
   },
 
+  /**
+   * Get the enhanced link object for a link (whether history or directory)
+   */
+  getEnhancedLink: function DirectoryLinksProvider_getEnhancedLink(link) {
+    // Use the provided link if it's already enhanced
+    return link.enhancedImageURI && link ||
+           this._enhancedLinks.get(this._extractSite(link.url));
+  },
+
   /**
    * Gets the current set of directory links.
    * @param aCallback The function that the array of links is passed to.
    */
   getLinks: function DirectoryLinksProvider_getLinks(aCallback) {
     this._readDirectoryLinksFile().then(rawLinks => {
+      // Reset the cache of enhanced images for this new set of links
+      this._enhancedLinks.clear();
+
       // all directory links have a frecency of DIRECTORY_FRECENCY
       aCallback(rawLinks.map((link, position) => {
+        // Stash the enhanced image for the site
+        if (link.enhancedImageURI) {
+          this._enhancedLinks.set(this._extractSite(link.url), link);
+        }
+
         link.directoryIndex = position;
         link.frecency = DIRECTORY_FRECENCY;
         link.lastVisitDate = rawLinks.length - position;

toolkit/modules/tests/xpcshell/test_DirectoryLinksProvider.js

@@ -466,3 +466,52 @@ add_task(function test_DirectoryLinksProvider_getLinksFromCorruptedFile() {
 
   yield promiseCleanDirectoryLinksProvider();
 });
+
+add_task(function test_DirectoryLinksProvider_getEnhancedLink() {
+  let data = {"en-US": [
+    {url: "http://example.net", enhancedImageURI: "net1"},
+    {url: "http://example.com", enhancedImageURI: "com1"},
+    {url: "http://example.com", enhancedImageURI: "com2"},
+  ]};
+  let dataURI = 'data:application/json,' + JSON.stringify(data);
+  yield promiseSetupDirectoryLinksProvider({linksURL: dataURI});
+
+  let links = yield fetchData();
+  do_check_eq(links.length, 3);
+
+  function checkEnhanced(url, image) {
+    let enhanced = DirectoryLinksProvider.getEnhancedLink({url: url});
+    do_check_eq(enhanced && enhanced.enhancedImageURI, image);
+  }
+
+  // Get the expected image for the same site
+  checkEnhanced("http://example.net/", "net1");
+  checkEnhanced("http://sub.example.net/", "net1");
+  checkEnhanced("http://example.net/path", "net1");
+  checkEnhanced("https://www.example.net/", "net1");
+
+  // Get the image of the last entry
+  checkEnhanced("http://example.com", "com2");
+
+  // Get the inline enhanced image
+  let inline = DirectoryLinksProvider.getEnhancedLink({
+    url: "http://example.com/echo",
+    enhancedImageURI: "echo",
+  });
+  do_check_eq(inline.enhancedImageURI, "echo");
+  do_check_eq(inline.url, "http://example.com/echo");
+
+  // Undefined for not enhanced
+  checkEnhanced("http://example.org", undefined);
+
+  // Make sure old data is not cached
+  data = {"en-US": [
+    {url: "http://example.com", enhancedImageURI: "fresh"},
+  ]};
+  dataURI = 'data:application/json,' + JSON.stringify(data);
+  yield promiseSetupDirectoryLinksProvider({linksURL: dataURI});
+  links = yield fetchData();
+  do_check_eq(links.length, 1);
+  checkEnhanced("http://example.net", undefined);
+  checkEnhanced("http://example.com", "fresh");
+});