Adds the first run banner....

chrome/browser/resources/new_new_tab.js

 
 // Helpers
 
 function $(id) {
   return document.getElementById(id);
 }
 
 // TODO(arv): Remove these when classList is available in HTML5.
 // https://bugs.webkit.org/show_bug.cgi?id=20709
 function hasClass(el, name) {
@@ skipping 52 matching lines @@
     args.unshift.apply(args, boundArgs);
     return fn.apply(selfObj, args);
   }
 }
 
 var loading = true;
 var mostVisitedData = [];
 var gotMostVisited = false;
 var gotShownSections = false;
 
-function mostVisitedPages(data) {
+function mostVisitedPages(data, firstRun) {
   logEvent('received most visited pages');
 
   // We append the class name with the "filler" so that we can style fillers
   // differently.
   var maxItems = 8;
   data.length = Math.min(maxItems, data.length);
   var len = data.length;
   for (var i = len; i < maxItems; i++) {
     data[i] = {filler: true};
   }
 
   mostVisitedData = data;
   renderMostVisited(data);
 
   gotMostVisited = true;
   onDataLoaded();
+
+  // Only show the first run notification if first run.
+  if (firstRun) {
+    showFirstRunNotification();
+  }
 }
 
 function downloadsList(data) {
   logEvent('received downloads');
 
   // We should only show complete downloads.
   data = data.filter(function(d) {
     d.type = 'download';
     d.timestamp = d.started;
     return d.state == 'COMPLETE';
@@ skipping 694 matching lines @@
     // Make sure we do not use a timer during load since it slows down the UI.
     f();
   } else {
     // The duration of all transitions are 500ms
     window.setTimeout(f, 500);
   }
 }
 
 // Notification
 
-function showNotification(text, actionText, f) {
+
+var notificationTimeout;
+
+function showNotification(text, actionText, opt_f) {
   var notificationElement = $('notification');
+
+  function show() {
+    window.clearTimeout(notificationTimeout);
+    addClass(notificationElement, 'show');
+  }
+
+  function delayedHide() {
+    notificationTimeout = window.setTimeout(hideNotification, 10000);
+  }
+
+  function doAction() {
+    if (opt_f) {
+      opt_f();
+    }
+    hideNotification();
+  }
+
+  // Remove any possible first-run trails.
+  removeClass(notification, 'first-run');
+
   var actionLink = notificationElement.querySelector('.link');
   notificationElement.firstElementChild.textContent = text;
+  actionLink.textContent = actionText;
 
-  actionLink.textContent = actionText;
-  actionLink.onclick = function() {
-    f();
-    removeClass(notificationElement, 'show');
-    // Since we have a :hover rule to not hide the notification banner when the
-    // mouse is over we need force it to hide. We remove the hide class after
-    // a short timeout to allow the banner to be shown again.
-    addClass(notificationElement, 'hide');
-    afterTransition(function() {
-      removeClass(notificationElement, 'hide');
-    })
-  };
-  addClass(notificationElement, 'show');
-  window.setTimeout(function() {
-    removeClass(notificationElement, 'show');
-  }, 10000);
+  actionLink.onclick = doAction;
+  actionLink.onkeydown = handleIfEnterKey(doAction);
+  notificationElement.onmouseover = show;
+  notificationElement.onmouseout = delayedHide;
+  actionLink.onfocus = show;
+  actionLink.onblur = delayedHide;
+
+  show();
+  delayedHide();
 }
 
+function hideNotification() {
+  var notificationElement = $('notification');
+  removeClass(notificationElement, 'show');
+}
+
+function showFirstRunNotification() {
+  showNotification(localStrings.getString('firstrunnotification'),
+                   localStrings.getString('closefirstrunnotification'));
+  var notificationElement = $('notification');
+  addClass(notification, 'first-run');
+}
+
+
 /**
  * This handles the option menu.
  * @param {Element} button The button element.
  * @param {Element} menu The menu element.
  * @constructor
  */
 function OptionMenu(button, menu) {
   this.button = button;
   this.menu = menu;
   this.button.onmousedown = bind(this.handleMouseDown, this);
@@ skipping 521 matching lines @@
     el.addEventListener('dragover', bind(this.handleDragOver, this));
     el.addEventListener('dragleave', bind(this.handleDragLeave, this));
     el.addEventListener('drop', bind(this.handleDrop, this));
     el.addEventListener('dragend', bind(this.handleDragEnd, this));
     el.addEventListener('drag', bind(this.handleDrag, this));
     el.addEventListener('mousedown', bind(this.handleMouseDown, this));
   }
 };
 
 dnd.init();