[New Tab Page] Change which elements get focused during tab ordering

chrome/browser/resources/local_ntp/local_ntp.js

 // Copyright 2013 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 The local InstantExtended NTP.
  */
 
 
@@ skipping 21 matching lines @@
   DARK: 'dark',
   DEFAULT_THEME: 'default-theme',
   DELAYED_HIDE_NOTIFICATION: 'mv-notice-delayed-hide',
   DOT: 'dot',
   FAKEBOX_DISABLE: 'fakebox-disable', // Makes fakebox non-interactive
   FAKEBOX_FOCUS: 'fakebox-focused', // Applies focus styles to the fakebox
   // Applies drag focus style to the fakebox
   FAKEBOX_DRAG_FOCUS: 'fakebox-drag-focused',
   FAVICON: 'mv-favicon',
   FAVICON_FALLBACK: 'mv-favicon-fallback',
+  FOCUSED: 'mv-focused',
   HIDE_BLACKLIST_BUTTON: 'mv-x-hide', // hides blacklist button during animation
   HIDE_FAKEBOX_AND_LOGO: 'hide-fakebox-logo',
   HIDE_NOTIFICATION: 'mv-notice-hide',
   // Vertically centers the most visited section for a non-Google provided page.
   NON_GOOGLE_PAGE: 'non-google-page',
   PAGE: 'mv-page', // page tiles
   PAGE_READY: 'mv-page-ready',  // page tile when ready
   RTL: 'rtl',  // Right-to-left language text.
   THUMBNAIL: 'mv-thumb',
   THUMBNAIL_FALLBACK: 'mv-thumb-fallback',
@@ skipping 26 matching lines @@
   UNDO_LINK: 'mv-undo'
 };
 
 
 /**
  * Enum for keycodes.
  * @enum {number}
  * @const
  */
 var KEYCODE = {
-  DELETE: 46,
   ENTER: 13
 };
 
 
 /**
  * Enum for the state of the NTP when it is disposed.
  * @enum {number}
  * @const
  */
 var NTP_DISPOSE_STATE = {
@@ skipping 62 matching lines @@
 
 
 /**
  * The last blacklisted tile if any, which by definition should not be filler.
  * @type {?Tile}
  */
 var lastBlacklistedTile = null;
 
 
 /**
+ * The iframe element which is currently keyboard focused, or null.
+ * @type {?Element}
+ */
+var focusedIframe = null;
+
+
+/**
  * True if a page has been blacklisted and we're waiting on the
  * onmostvisitedchange callback. See onMostVisitedChange() for how this
  * is used.
  * @type {boolean}
  */
 var isBlacklisting = false;
 
 
 /**
  * Current number of tiles columns shown based on the window width, including
@@ skipping 218 matching lines @@
       '  color: ' + convertToRGBAColor(opt_themeInfo.textColorLightRgba) + ';' +
       '}' +
       '#mv-notice-x {' +
       '  -webkit-filter: drop-shadow(0 0 0 ' +
           convertToRGBAColor(opt_themeInfo.textColorRgba) + ');' +
       '}' +
       '.mv-page-ready .mv-mask {' +
       '  border: 1px solid ' +
           convertToRGBAColor(opt_themeInfo.sectionBorderColorRgba) + ';' +
       '}' +
-      '.mv-page-ready:hover .mv-mask, .mv-page-ready:focus .mv-mask {' +
+      '.mv-page-ready:hover .mv-mask, .mv-focused ~ .mv-mask {' +
       '  border-color: ' +
           convertToRGBAColor(opt_themeInfo.headerColorRgba) + ';' +
       '}';
 
     if (customStyleElement) {
       customStyleElement.textContent = themeStyle;
     } else {
       customStyleElement = document.createElement('style');
       customStyleElement.type = 'text/css';
       customStyleElement.id = IDS.CUSTOM_THEME_STYLE;
@@ skipping 254 matching lines @@
     tileElem.classList.add(CLASSES.PAGE);
 
     var navigateFunction = function(e) {
       e.preventDefault();
       ntpApiHandle.navigateContentWindow(rid, getDispositionFromEvent(e));
     };
 
     // The click handler for navigating to the page identified by the RID.
     tileElem.addEventListener('click', navigateFunction);
 
-    // Make thumbnails tab-accessible.
-    tileElem.setAttribute('tabindex', '1');
-    registerKeyHandler(tileElem, KEYCODE.ENTER, navigateFunction);
-
     // The iframe which renders the page title.
     var titleElem = document.createElement('iframe');
-    titleElem.tabIndex = '-1';
+    // Enable tab navigation on the iframe, which will move the selection to the
+    // link element (which also has a tabindex).
+    titleElem.tabIndex = '0';
 
     // Why iframes have IDs:
     //
     // On navigating back to the NTP we see several onmostvisitedchange() events
     // in series with incrementing RIDs. After the first event, a set of iframes
     // begins loading RIDs n, n+1, ..., n+k-1; after the second event, these get
     // destroyed and a new set begins loading RIDs n+k, n+k+1, ..., n+2k-1.
     // Now due to crbug.com/68841, Chrome incorrectly loads the content for the
     // first set of iframes into the most recent set of iframes.
     //
@@ skipping 32 matching lines @@
         blacklistButton, 'div', CLASSES.BLACKLIST_BUTTON_INNER);
     var blacklistFunction = generateBlacklistFunction(rid);
     blacklistButton.addEventListener('click', blacklistFunction);
     blacklistButton.title = configData.translatedStrings.removeThumbnailTooltip;
 
     // A helper mask on top of the tile that is used to create hover border
     // and/or to darken the thumbnail on focus.
     var maskElement = createAndAppendElement(
         innerElem, 'div', CLASSES.THUMBNAIL_MASK);
 
-    // When a tile is focused, have delete also blacklist the page.
-    registerKeyHandler(tileElem, KEYCODE.DELETE, blacklistFunction);
-
     // The page favicon, or a fallback.
     var favicon = createAndAppendElement(innerElem, 'div', CLASSES.FAVICON);
     if (page.faviconUrl) {
       favicon.style.backgroundImage = 'url(' + page.faviconUrl + ')';
     } else {
       favicon.classList.add(CLASSES.FAVICON_FALLBACK);
     }
     return new Tile(tileElem, innerElem, titleElem, thumbnailElem, rid);
   } else {
     return new Tile(tileElem);
   }
 }
 
 
 /**
  * Generates a function to be called when the page with the corresponding RID
  * is blacklisted.
  * @param {number} rid The RID of the page being blacklisted.
  * @return {function(Event)} A function which handles the blacklisting of the
  *     page by updating state variables and notifying Chrome.
  */
 function generateBlacklistFunction(rid) {
   return function(e) {
     // Prevent navigation when the page is being blacklisted.
-    e.stopPropagation();
+    if (e)
+      e.stopPropagation();
 
     userInitiatedMostVisitedChange = true;
     isBlacklisting = true;
     tilesContainer.classList.add(CLASSES.HIDE_BLACKLIST_BUTTON);
     lastBlacklistedTile = getTileByRid(rid);
     ntpApiHandle.deleteMostVisitedItem(rid);
   };
 }
 
 
@@ skipping 245 matching lines @@
 function getEmbeddedSearchApiHandle() {
   if (window.cideb)
     return window.cideb;
   if (window.chrome && window.chrome.embeddedSearch)
     return window.chrome.embeddedSearch;
   return null;
 }
 
 
 /**
+ * Event handler for the focus changed and blacklist messages on link elements.
+ * Used to toggle visual treatment on the tiles (depending on the message).
+ * @param {Event} event received.
+ */
+function handlePostMessage(event) {
+  if (event.data == 'linkFocused') {

[huangs, 2014/09/11 20:31:41]

Should validate event.origin.

[Mathieu, 2014/09/11 20:54:10]

Done.

+    var activeElement = document.activeElement;
+    if (activeElement.classList.contains(CLASSES.TITLE)) {
+      activeElement.classList.add(CLASSES.FOCUSED);
+      focusedIframe = activeElement;
+    }
+  } else if (event.data == 'linkBlurred') {
+    if (focusedIframe)
+      focusedIframe.classList.remove(CLASSES.FOCUSED);
+    focusedIframe = null;
+  } else if (event.data.indexOf('tileBlacklisted') == 0) {
+    var tilePosition = event.data.split(',')[1];
+    if (tilePosition)
+      generateBlacklistFunction(tiles[tilePosition].rid)();
+  }
+}
+
+
+/**
  * Prepares the New Tab Page by adding listeners, rendering the current
  * theme, the most visited pages section, and Google-specific elements for a
  * Google-provided page.
  */
 function init() {
   tilesContainer = $(IDS.TILES);
   notification = $(IDS.NOTIFICATION);
   attribution = $(IDS.ATTRIBUTION);
   ntpContents = $(IDS.NTP_CONTENTS);
 
@@ skipping 98 matching lines @@
     setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
   }
 
   if (searchboxApiHandle.rtl) {
     $(IDS.NOTIFICATION).dir = 'rtl';
     document.body.setAttribute('dir', 'rtl');
     // Add class for setting alignments based on language directionality.
     document.body.classList.add(CLASSES.RTL);
     $(IDS.TILES).dir = 'rtl';
   }
+
+  window.addEventListener('message', handlePostMessage);
 }
 
 
 /**
  * Binds event listeners.
  */
 function listen() {
   document.addEventListener('DOMContentLoaded', init);
 }
 
 return {
   init: init,
   listen: listen
 };
 }
 
 if (!window.localNTPUnitTest) {
   LocalNTP().listen();
 }