Add possibility to divide chrome users into groups of equal size, and change ...

chrome/browser/resources/new_new_tab.js

 // Copyright (c) 2010 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.
 
 // To avoid creating tons of unnecessary nodes. We assume we cannot fit more
 // than this many items in the miniview.
 var MAX_MINIVIEW_ITEMS = 15;
 
 // Extra spacing at the top of the layout.
 var LAYOUT_SPACING_TOP = 25;
@@ skipping 771 matching lines @@
     }
     el.textContent = newMessage.linktext;
     content.appendChild(el);
     fixLinkUnderline(el);
   }
 
   layoutSections();
 }
 
 /**
- * Invoked when the link in the sync status section is clicked.
+ * Invoked when the link in the sync promo or sync status section is clicked.
  */
 function syncSectionLinkClicked(e) {
   chrome.send('SyncLinkClicked');
   e.preventDefault();
 }
 
 /**
  * Invoked when link to start sync in the promo message is clicked, and Chrome
  * has already been synced to an account.
  */
@@ skipping 107 matching lines @@
 var notificationTimeout;
 
 /*
  * Displays a message (either a string or a document fragment) in the
  * notification slot at the top of the NTP.
  * @param {string|Node} message String or node to use as message.
  * @param {string} actionText The text to show as a link next to the message.
  * @param {function=} opt_f Function to call when the user clicks the action
  *                          link.
  * @param {number=} opt_delay The time in milliseconds before hiding the
- * i                          notification.
+ *                            notification.
+ * @param {bool=} close If true, show a close link next to the notification.

[arv (Not doing code reviews), 2011/01/24 18:15:11]

boolean

[Miranda Callahan, 2011/01/24 18:39:22]

Done.

  */
-function showNotification(message, actionText, opt_f, opt_delay) {
+function showNotification(message, actionText, opt_f, opt_delay, opt_close) {

[arv (Not doing code reviews), 2011/01/24 18:15:11]

I think we should create a component for this soon...

Can you add?

// TODO(arv): Create a notification component.

[Miranda Callahan, 2011/01/24 18:39:22]

Done.

   var notificationElement = $('notification');
   var f = opt_f || function() {};
   var delay = opt_delay || 10000;
 
   function show() {
     window.clearTimeout(notificationTimeout);
     notificationElement.classList.add('show');
     document.body.classList.add('notification-shown');
   }
 
   function delayedHide() {
     notificationTimeout = window.setTimeout(hideNotification, delay);
   }
 
   function doAction() {
     f();
     hideNotification();
   }
 
+  function closeNotification() {
+    chrome.send('closePromo');
+    hideNotification();
+  }
+
   // Remove classList entries from previous notifications.
   notification.classList.remove('first-run');
   notification.classList.remove('promo');
 
   var messageContainer = notificationElement.firstElementChild;
-  var actionLink = notificationElement.querySelector('.link-color');
+  var actionLink = notificationElement.querySelector('#actionlink');
+
+  if (opt_close) {
+    var closeLink = notificationElement.querySelector('#closelink');
+    closeLink.textContent =
+        localStrings.getString('closefirstrunnotification');
+    closeLink.onclick = closeNotification;
+    closeLink.onkeydown = handleIfEnterKey(closeNotification);
+    closeLink.tabIndex = 1;
+  }
 
   if (typeof message == 'string') {
     messageContainer.textContent = message;
   } else {
     messageContainer.textContent = '';  // Remove all children.
     messageContainer.appendChild(message);
   }
 
   actionLink.textContent = actionText;
 
@@ skipping 10 matching lines @@
   delayedHide();
 }
 
 /**
  * Hides the notifier.
  */
 function hideNotification() {
   var notificationElement = $('notification');
   notificationElement.classList.remove('show');
   document.body.classList.remove('notification-shown');
-  var actionLink = notificationElement.querySelector('.link-color');
+  var actionLink = notificationElement.querySelector('#actionlink');
+  var closeLink = notificationElement.querySelector('#closelink');
   // Prevent tabbing to the hidden link.
   actionLink.tabIndex = -1;
+  closeLink.tabIndex = -1;
   // Setting tabIndex to -1 only prevents future tabbing to it. If, however, the
   // user switches window or a tab and then moves back to this tab the element
   // may gain focus. We therefore make sure that we blur the element so that the
   // element focus is not restored when coming back to this window.
   actionLink.blur();
+  closeLink.blur();
 }
 
 function showFirstRunNotification() {
   showNotification(localStrings.getString('firstrunnotification'),
                    localStrings.getString('closefirstrunnotification'),
                    null, 30000);
   var notificationElement = $('notification');
   notification.classList.add('first-run');
 }
 
 function showPromoNotification() {
   showNotification(parseHtmlSubset(localStrings.getString('serverpromo')),
-                   localStrings.getString('closefirstrunnotification'),
-                   function () { chrome.send('closePromo'); },
-                   60000);
+                   localStrings.getString('syncpromotext'),
+                   function () { chrome.send('SyncLinkClicked'); },
+                   60000,
+                   true);
   var notificationElement = $('notification');
   notification.classList.add('promo');
 }
 
 $('main').addEventListener('click', function(e) {
   var p = e.target;
   while (p && p.tagName != 'H2') {
     // In case the user clicks on a button we do not want to expand/collapse a
     // section.
     if (p.tagName == 'BUTTON')
@@ skipping 371 matching lines @@
   var promoLink = document.querySelector('#apps-promo-text1 a');
   promoLink.id = 'apps-promo-link';
   promoLink.href = localStrings.getString('web_store_url');
 
   $('apps-promo-hide').addEventListener('click', function() {
     chrome.send('hideAppsPromo', []);
     document.documentElement.classList.remove('apps-promo-visible');
     layoutSections();
   });
 });