ntp4: fix positioning of notification bar

chrome/browser/resources/ntp4/new_tab.js

 // Copyright (c) 2011 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 38 matching lines @@
    */
   var bookmarksPage;
 
   /**
    * The 'dots-list' element.
    * @type {!Element|undefined}
    */
   var dotList;
 
   /**
+   * The 'notification-container' element.
+   * @type {!Element|undefined}
+   */
+  var notificationContainer;
+
+  /**
    * The left and right paging buttons.
    * @type {!Element|undefined}
    */
   var pageSwitcherStart;
   var pageSwitcherEnd;
 
   /**
    * The 'trash' element.  Note that technically this is unnecessary,
    * JavaScript creates the object for us based on the id.  But I don't want
    * to rely on the ID being the same, and JSCompiler doesn't know about it.
@@ skipping 79 matching lines @@
     }, true);
 
     tilePages = pageList.getElementsByClassName('tile-page');
     appsPages = pageList.getElementsByClassName('apps-page');
 
     pageSwitcherStart = getRequiredElement('page-switcher-start');
     ntp4.initializePageSwitcher(pageSwitcherStart);
     pageSwitcherEnd = getRequiredElement('page-switcher-end');
     ntp4.initializePageSwitcher(pageSwitcherEnd);
 
+    notificationContainer = getRequiredElement('notification-container');
+    notificationContainer.addEventListener(
+        'webkitTransitionEnd', onNotificationTransitionEnd);
+
     // Initialize the cardSlider without any cards at the moment
     var sliderFrame = getRequiredElement('card-slider-frame');
     cardSlider = new CardSlider(sliderFrame, pageList, sliderFrame.offsetWidth);
     cardSlider.initialize();
 
     // Ensure the slider is resized appropriately with the window
     window.addEventListener('resize', function() {
       cardSlider.resize(sliderFrame.offsetWidth);
       updatePageSwitchers();
     });
@@ skipping 536 matching lines @@
       linksBin.appendChild(link);
     }
 
     document.querySelector('#notification button').onclick = function(e) {
       if (opt_closeHandler)
         opt_closeHandler();
       hideNotification();
     };
 
     var timeout = opt_timeout || 10000;
-    $('notification').classList.remove('inactive');
+    notificationContainer.hidden = false;
+    notificationContainer.classList.remove('inactive');
     notificationTimeout_ = window.setTimeout(hideNotification, timeout);
   }
 
   /**
    * Hide the notification bubble.
    */
   function hideNotification() {
-    $('notification').classList.add('inactive');
+    notificationContainer.classList.add('inactive');
+  }
+
+  /**
+   * When done fading out, set hidden to true so the notification can't be
+   * tabbed to or clicked.
+   */
+  function onNotificationTransitionEnd(e) {
+    if (notificationContainer.classList.contains('inactive'));
+      notificationContainer.hidden = true;
   }
 
   function setRecentlyClosedTabs(dataItems) {
     $('recently-closed-menu-button').dataItems = dataItems;
   }
 
   function setMostVisitedPages(data, hasBlacklistedUrls) {
     mostVisitedPage.data = data;
   }
 
@@ skipping 100 matching lines @@
 var assert = ntp4.assert;
 var getAppsCallback = ntp4.getAppsCallback;
 var appsPrefChangeCallback = ntp4.appsPrefChangeCallback;
 var themeChanged = ntp4.themeChanged;
 var recentlyClosedTabs = ntp4.setRecentlyClosedTabs;
 var setMostVisitedPages = ntp4.setMostVisitedPages;
 
 document.addEventListener('DOMContentLoaded', ntp4.initialize);
 window.addEventListener('online', ntp4.updateOfflineEnabledApps);
 window.addEventListener('offline', ntp4.updateOfflineEnabledApps);