[NTP4] Redesign of notification promo.

chrome/browser/resources/ntp4/new_tab.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview New tab page
  * This is the main code for the new tab page used by touch-enabled Chrome
  * browsers.  For now this is still a prototype.
  */
 
@@ skipping 119 matching lines @@
       loginBubble.setArrowLocation(cr.ui.ArrowLocation.TOP_END);
       loginBubble.bubbleAlignment =
           cr.ui.BubbleAlignment.BUBBLE_EDGE_TO_ANCHOR_EDGE;
       loginBubble.deactivateToDismissDelay = 2000;
       loginBubble.setCloseButtonVisible(false);
 
       $('login-status-learn-more').href =
           localStrings.getString('login_status_url');
       $('login-status-advanced').onclick = function() {
         chrome.send('showAdvancedLoginUI');
-      }
+      };
       $('login-status-dismiss').onclick = loginBubble.hide.bind(loginBubble);
 
       var bubbleContent = $('login-status-bubble-contents');
       loginBubble.content = bubbleContent;
 
       // The anchor node won't be updated until updateLogin is called so don't
       // show the bubble yet.
       shouldShowLoginBubble = true;
     } else if (localStrings.getString('ntp4_intro_message')) {
       infoBubble = new cr.ui.Bubble;
       infoBubble.anchorNode = newTabView.mostVisitedPage.navigationDot;
       infoBubble.setArrowLocation(cr.ui.ArrowLocation.BOTTOM_START);
       infoBubble.handleCloseEvent = function() {
         this.hide();
         chrome.send('introMessageDismissed');
-      }
+      };
 
       var bubbleContent = $('ntp4-intro-bubble-contents');
       infoBubble.content = bubbleContent;
 
       var learnMoreLink = infoBubble.querySelector('a');
       learnMoreLink.href = localStrings.getString('ntp4_intro_url');
       learnMoreLink.onclick = infoBubble.hide.bind(infoBubble);
 
       infoBubble.show();
       chrome.send('introMessageSeen');
     }
 
-    var serverpromo = localStrings.getString('serverpromo');
-    if (serverpromo) {
-      showNotification(parseHtmlSubset(serverpromo), [], function() {
+    var promo = localStrings.getString('serverpromo');
+    if (promo) {
+      var tags = ['IMG'];
+      var attrs = {
+        src: function(node, value) {
+          return node.tagName == 'IMG' &&
+                 /^data\:image\/(?:png|gif|jpe?g)/.test(value);
+        },
+      };
+      showNotification(parseHtmlSubset(promo, tags, attrs), [], function() {
         chrome.send('closeNotificationPromo');
       }, 60000);
       chrome.send('notificationPromoViewed');
     }
 
     var loginContainer = getRequiredElement('login-container');
     loginContainer.addEventListener('click', function() {
       var rect = loginContainer.getBoundingClientRect();
       chrome.send('showSyncLoginUI',
                   [rect.left, rect.top, rect.width, rect.height]);
     });
     chrome.send('initializeSyncLogin');
   }
 
   /**
    * Launches the chrome web store app with the chrome-ntp-launcher
    * source.
    * @param {Event} e The click event.
    */
   function onChromeWebStoreButtonClick(e) {
     chrome.send('recordAppLaunchByURL',
                 [encodeURIComponent(this.href),
                  ntp4.APP_LAUNCH.NTP_WEBSTORE_FOOTER]);
   }
 
+  /*
+   * The number of sections to wait on.
+   * @type {number}
+   */
+  var sectionsToWaitFor = 2;
+
+  /**
+   * Queued callbacks which lie in wait for all sections to be ready.
+   * @type {array}
+   */
+  var readyCallbacks = [];
+
+  /**
+   * Fired as each section of pages becomes ready.
+   * @param {Event} e Each page's synthetic DOM event.
+   */
+  document.addEventListener('sectionready', function(e) {
+    if (--sectionsToWaitFor <= 0) {
+      while (readyCallbacks.length) {
+        readyCallbacks.shift()();
+      }
+    }
+  });
+
+  /**
+   * This is used to simulate a fire-once event (i.e. $(document).ready() in
+   * jQuery or Y.on('domready') in YUI. If all sections are ready, the callback
+   * is fired right away. If all pages are not ready yet, the function is queued
+   * for later execution.
+   * @param {function} callback The work to be done when ready.
+   */
+  function doWhenAllSectionsReady(callback) {
+    assert(typeof callback == 'function');
+    if (sectionsToWaitFor > 0)
+      readyCallbacks.push(callback);
+    else
+      window.setTimeout(callback, 0);  // Do soon after, but asynchronously.
+  }
+
   /**
    * Fills in an invisible div with the 'Most Visited' string so that
    * its length may be measured and the nav dots sized accordingly.
    */
   function measureNavDots() {
     var measuringDiv = $('fontMeasuringDiv');
     measuringDiv.textContent = localStrings.getString('mostvisited');
     var pxWidth = Math.max(measuringDiv.clientWidth * 1.15, 80);
 
     var styleElement = document.createElement('style');
@@ skipping 35 matching lines @@
       attribution.hidden = false;
     } else {
       attribution.hidden = true;
     }
   }
 
   /**
    * Timeout ID.
    * @type {number}
    */
-  var notificationTimeout_ = 0;
+  var notificationTimeout = 0;
 
   /**
    * Shows the notification bubble.
    * @param {string|Node} message The notification message or node to use as
    *     message.
    * @param {Array.<{text: string, action: function()}>} links An array of
    *     records describing the links in the notification. Each record should
    *     have a 'text' attribute (the display string) and an 'action' attribute
    *     (a function to run when the link is activated).
    * @param {Function} opt_closeHandler The callback invoked if the user
    *     manually dismisses the notification.
    */
   function showNotification(message, links, opt_closeHandler, opt_timeout) {
-    window.clearTimeout(notificationTimeout_);
+    window.clearTimeout(notificationTimeout);
 
     var span = document.querySelector('#notification > span');
     if (typeof message == 'string') {
       span.textContent = message;
     } else {
       span.textContent = '';  // Remove all children.
       span.appendChild(message);
     }
 
     var linksBin = $('notificationLinks');
     linksBin.textContent = '';
     for (var i = 0; i < links.length; i++) {
       var link = linksBin.ownerDocument.createElement('div');
       link.textContent = links[i].text;
       link.action = links[i].action;
       link.onclick = function() {
         this.action();
         hideNotification();
-      }
+      };
       link.setAttribute('role', 'button');
       link.setAttribute('tabindex', 0);
       link.className = 'link-button';
       linksBin.appendChild(link);
     }
 
-    document.querySelector('#notification button').onclick = function(e) {
+    function closeFunc(e) {
       if (opt_closeHandler)
         opt_closeHandler();
       hideNotification();
-    };
+    }
+
+    document.querySelector('#notification button').onclick = closeFunc;
+    document.addEventListener('dragstart', closeFunc);
+
+    notificationContainer.hidden = false;
+    showNotificationOnCurrentPage();
+
+    newTabView.cardSlider.frame.addEventListener(
+        'cardSlider:card_change_ended', onCardChangeEnded);
 
     var timeout = opt_timeout || 10000;
-    notificationContainer.hidden = false;
-    notificationContainer.classList.remove('inactive');
-    notificationTimeout_ = window.setTimeout(hideNotification, timeout);
+    notificationTimeout = window.setTimeout(hideNotification, timeout);
   }
 
   /**
    * Hide the notification bubble.
    */
   function hideNotification() {
     notificationContainer.classList.add('inactive');
+
+    newTabView.cardSlider.frame.removeEventListener(
+        'cardSlider:card_change_ended', onCardChangeEnded);
+  }
+
+  /**
+   * Happens when 1 or more consecutive card changes end.
+   * @param {Event} e The cardSlider:card_change_ended event.
+   */
+  function onCardChangeEnded(e) {
+    // If we ended on the same page as we started, ignore.
+    if (newTabView.cardSlider.currentCardValue.notification)
+      return;
+
+    // Hide the notification the old page.
+    notificationContainer.classList.add('card-changed');
+
+    showNotificationOnCurrentPage();
+  }
+
+  /**
+   * Move and show the notification on the current page.
+   */
+  function showNotificationOnCurrentPage() {
+    var page = newTabView.cardSlider.currentCardValue;
+    doWhenAllSectionsReady(function() {
+      if (page != newTabView.cardSlider.currentCardValue)
+        return;
+
+      // NOTE: This moves the notification to inside of the current page.
+      page.notification = notificationContainer;
+
+      // Reveal the notification and instruct it to hide itself if ignored.
+      notificationContainer.classList.remove('inactive');
+
+      // Gives the browser time to apply this rule before we remove it (causing
+      // a transition).
+      window.setTimeout(function() {
+        notificationContainer.classList.remove('card-changed');
+      }, 0);
+    });
   }
 
   /**
    * When done fading out, set hidden to true so the notification can't be
    * tabbed to or clicked.
+   * @param {Event} e The webkitTransitionEnd event.
    */
   function onNotificationTransitionEnd(e) {
-    if (notificationContainer.classList.contains('inactive'));
+    if (notificationContainer.classList.contains('inactive'))
       notificationContainer.hidden = true;
   }
 
   function setRecentlyClosedTabs(dataItems) {
     $('recently-closed-menu-button').dataItems = dataItems;
   }
 
   function setMostVisitedPages(data, hasBlacklistedUrls) {
     newTabView.mostVisitedPage.data = data;
+    cr.dispatchSimpleEvent(document, 'sectionready', true, true);
   }
 
   /**
    * Set the dominant color for a node. This will be called in response to
    * getFaviconDominantColor. The node represented by |id| better have a setter
    * for stripeColor.
    * @param {string} id The ID of a node.
    * @param {string} color The color represented as a CSS string.
    */
   function setStripeColor(id, color) {
@@ skipping 111 matching lines @@
 // TODO(estade): update the content handlers to use ntp namespace instead of
 // making these global.
 var getAppsCallback = ntp4.getAppsCallback;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var themeChanged = ntp4.themeChanged;
 var recentlyClosedTabs = ntp4.setRecentlyClosedTabs;
 var setMostVisitedPages = ntp4.setMostVisitedPages;
 var updateLogin = ntp4.updateLogin;
 
 document.addEventListener('DOMContentLoaded', ntp4.onLoad);