NNTP: Disable tabbing to hidden elements....

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 170 matching lines @@
     var oldShownSections = shownSections;
     shownSections = mask;
 
     // Only invalidate most visited if needed.
     if ((mask & Section.THUMB) != (oldShownSections & Section.THUMB) ||
         (mask & Section.LIST) != (oldShownSections & Section.LIST)) {
       mostVisited.invalidate();
     }
 
     mostVisited.updateDisplayMode();
-    layoutRecentlyClosed();
+    renderRecentlyClosed();
     updateOptionMenu();
   }
 
   gotShownSections = true;
   onDataLoaded();
 }
 
 function saveShownSections() {
   chrome.send('setShownSections', [String(shownSections)]);
 }
@@ skipping 89 matching lines @@
     // We're probably a background tab, so don't do anything.
     return;
   }
 
   var oldLayoutMode = layoutMode;
   layoutMode = useSmallGrid() ? LayoutMode.SMALL : LayoutMode.NORMAL
 
   if (layoutMode != oldLayoutMode){
     mostVisited.invalidate();
     mostVisited.layout();
-    layoutRecentlyClosed();
+    renderRecentlyClosed();
   }
 }
 
 /**
  * Bitmask for the different UI sections.
  * This matches the Section enum in ../dom_ui/shown_sections_handler.h
  * @enum {number}
  */
 var Section = {
   THUMB: 1,
@@ skipping 10 matching lines @@
     // THUMBS and LIST are mutually exclusive.
     if (section == Section.THUMB) {
       // hide LIST
       shownSections &= ~Section.LIST;
       mostVisited.invalidate();
     } else if (section == Section.LIST) {
       // hide THUMB
       shownSections &= ~Section.THUMB;
       mostVisited.invalidate();
     } else {
-      layoutRecentlyClosed();
+      renderRecentlyClosed();
     }
 
     updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
 function hideSection(section) {
   if (section & shownSections) {
     shownSections &= ~section;
 
     if (section & Section.THUMB || section & Section.LIST) {
       mostVisited.invalidate();
     }
 
     if (section & Section.RECENT) {
-      layoutRecentlyClosed();
+      renderRecentlyClosed();
     }
 
     updateOptionMenu();
     mostVisited.updateDisplayMode();
     mostVisited.layout();
   }
 }
 
 var mostVisited = {
   addPinnedUrl_: function(data, index) {
@@ skipping 309 matching lines @@
 function layoutRecentlyClosed() {
   var recentElement = $('recently-closed');
   var recentShown = shownSections & Section.RECENT;
   var style = recentElement.style;
 
   if (!recentShown) {
     style.opacity = style.height = 0;
   } else {
     style.opacity = style.height = '';
 
-    // Show all items.
-    for (var i = 0, child; child = recentElement.children[i]; i++) {
-      child.style.display = '';
-    }
-
     // We cannot use clientWidth here since the width has a transition.
     var spacing = 20;
     var headerEl = recentElement.firstElementChild;
     var navEl = recentElement.lastElementChild;
     var navWidth = navEl.offsetWidth;
     // Subtract 10 for the padding
     var availWidth = (useSmallGrid() ? 690 : 918) - navWidth - 10;
 
     // Now go backwards and hide as many elements as needed.
     var elementsToHide = [];
     for (var el = navEl.previousElementSibling; el != headerEl;
          el = el.previousElementSibling) {
       if (el.offsetLeft + el.offsetWidth + spacing > availWidth) {
         elementsToHide.push(el);
       }
     }
 
     elementsToHide.forEach(function(el) {
-      el.style.display = 'none';
+      el.parentNode.removeChild(el);
     });
   }
 }
 
 /**
  * This function is called by the backend whenever the sync status section
  * needs to be updated to reflect recent sync state changes. The backend passes
  * the new status information in the newMessage parameter. The state includes
  * the following:
  *
@@ skipping 198 matching lines @@
   var actionLink = notificationElement.querySelector('.link');
   notificationElement.firstElementChild.textContent = text;
   actionLink.textContent = actionText;
 
   actionLink.onclick = doAction;
   actionLink.onkeydown = handleIfEnterKey(doAction);
   notificationElement.onmouseover = show;
   notificationElement.onmouseout = delayedHide;
   actionLink.onfocus = show;
   actionLink.onblur = delayedHide;
+  // Enable tabbing to the link now that it is shown.
+  actionLink.tabIndex = 0;
 
   show();
   delayedHide();
 }
 
 function hideNotification() {
   var notificationElement = $('notification');
   removeClass(notificationElement, 'show');
+  var actionLink = notificationElement.querySelector('.link');
+  // Prevent tabbing to the hidden link.
+  actionLink.tabIndex = -1;
 }
 
 function showFirstRunNotification() {
   showNotification(localStrings.getString('firstrunnotification'),
                    localStrings.getString('closefirstrunnotification'),
                    null, 30000);
   var notificationElement = $('notification');
   addClass(notification, 'first-run');
 }
 
@@ skipping 740 matching lines @@
 function fixLinkUnderline(el) {
   var span = document.createElement('span');
   span.className = 'link-color';
   while (el.hasChildNodes()) {
     span.appendChild(el.firstChild);
   }
   el.appendChild(span);
 }
 
 updateAttribution();