Round of local NTP fixes:

* Add notification links and Most Visited tiles to the tab order and have delete issue a blacklist.
* Use a lighter icon for the notification X button when a theme is present.
* In RTL, move Most Visited item and notification X buttons to the left.

BUG= 238787,239072,239112,239617,239605

Review URL: https://chromiumcodereview.appspot.com/15076002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@200667 0039d316-1c4b-4281-b951-d872f2087c98

5 files changed, 91 insertions, 39 deletions

diff --git a/chrome/browser/resources/local_ntp/local_ntp.css b/chrome/browser/resources/local_ntp/local_ntp.css
index 24cf203..e5069cb 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.css
+++ b/chrome/browser/resources/local_ntp/local_ntp.css
@@ -98,12 +98,18 @@ body.fakebox-animate #fakebox {
 #cursor {
   background: #333;
   bottom: 5px;
+  left: 9px;
   position: absolute;
   top: 5px;
   visibility: hidden;
   width: 1px;
 }
 
+body.rtl #cursor {
+  left: auto;
+  right: 9px;
+}
+
 @-webkit-keyframes blink {
   0% {
     opacity: 1;
@@ -199,9 +205,11 @@ body.fakebox-focused #cursor {
 .mv-page-ready {
   border: 1px solid #c0c0c0;
   cursor: pointer;
+  outline: none;
 }
 
-.mv-page-ready:hover {
+.mv-page-ready:hover,
+.mv-page-ready:focus {
   border-color: #7f7f7f
 }
 
@@ -237,11 +245,19 @@ body.fakebox-focused #cursor {
   width: 16px;
 }
 
-.mv-x:hover {
+body.custom-theme #mv-notice-x {
+  background: transparent url(images/close_2_white.png);
+}
+
+.mv-x:hover,
+body.custom-theme #mv-notice-x:hover,
+#mv-notice-x:focus,
+body.custom-theme #mv-notice-x:focus {
   background: transparent url(images/close_2_hover.png);
 }
 
-.mv-x:active {
+.mv-x:active,
+body.custom-theme #mv-notice-x:active {
   background: transparent url(images/close_2_active.png);
 }
 
@@ -253,6 +269,11 @@ body.fakebox-focused #cursor {
   top: 2px;
 }
 
+body.rtl .mv-page .mv-x {
+  left: 2px;
+  right: auto;
+}
+
 .mv-page-ready:hover .mv-x {
   -webkit-transition-delay: 500ms;
   opacity: 1;
@@ -291,15 +312,18 @@ body.fakebox-focused #cursor {
   -webkit-margin-start: 6px;
   color: rgb(17, 85, 204);
   cursor: pointer;
+  outline: none;
   padding: 0 4px;
 }
 
-#mv-notice-links span:hover {
+#mv-notice-links span:hover,
+#mv-notice-links span:focus {
   text-decoration: underline;
 }
 
 #mv-notice-links .mv-x {
   -webkit-margin-start: 8px;
+  outline: none;
   vertical-align: top;
 }
 
diff --git a/chrome/browser/resources/local_ntp/local_ntp.html b/chrome/browser/resources/local_ntp/local_ntp.html
index 71f24c2..bc6cf239 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.html
+++ b/chrome/browser/resources/local_ntp/local_ntp.html
@@ -23,9 +23,9 @@
         <span id="mv-msg"></span>
         <!-- Links in the notification. -->
         <span id="mv-notice-links">
-          <span id="mv-undo"></span>
-          <span id="mv-restore"></span>
-          <button id="mv-notice-x" class="mv-x"></button>
+          <span id="mv-undo" tabIndex="1"></span>
+          <span id="mv-restore" tabIndex="1"></span>
+          <button id="mv-notice-x" tabIndex="1" class="mv-x"></button>
         </span>
       </div>
     </div>
diff --git a/chrome/browser/resources/local_ntp/local_ntp.js b/chrome/browser/resources/local_ntp/local_ntp.js
index 66edfa1..4b1267f 100644
--- a/chrome/browser/resources/local_ntp/local_ntp.js
+++ b/chrome/browser/resources/local_ntp/local_ntp.js
@@ -47,6 +47,7 @@ var CLASSES = {
   PAGE: 'mv-page', // page tiles
   PAGE_READY: 'mv-page-ready',  // page tile when ready
   ROW: 'mv-row',  // tile row
+  RTL: 'rtl',  // sets element alignments for an RTL language
   SEARCH: 'search',
   SELECTED: 'selected', // a selected suggestion (if any)
   SUGGESTION: 'suggestion',
@@ -83,6 +84,20 @@ var IDS = {
   UNDO_LINK: 'mv-undo'
 };
 
+
+/**
+ * Enum for keycodes.
+ * @enum {number}
+ * @const
+ */
+var KEYCODE = {
+  DELETE: 46,
+  DOWN_ARROW: 40,
+  ENTER: 13,
+  ESC: 27,
+  UP_ARROW: 38
+};
+
 // =============================================================================
 //  NTP implementation
 // =============================================================================
@@ -423,13 +438,20 @@ function createTile(page, position) {
     var rid = page.rid;
     tileElement.classList.add(CLASSES.PAGE);
 
-    // The click handler for navigating to the page identified by the RID.
-    tileElement.addEventListener('click', function() {
+    var navigateFunction = function() {
       ntpApiHandle.navigateContentWindow(rid);
-    });
+    };
+
+    // The click handler for navigating to the page identified by the RID.
+    tileElement.addEventListener('click', navigateFunction);
+
+    // Make thumbnails tab-accessible.
+    tileElement.setAttribute('tabindex', '1');
+    registerKeyHandler(tileElement, KEYCODE.ENTER, navigateFunction);
 
     // The iframe which renders the page title.
     var titleElement = document.createElement('iframe');
+    titleElement.tabIndex = '-1';
     var usingCustomTheme = document.body.classList.contains(
         CLASSES.CUSTOM_THEME);
 
@@ -445,6 +467,7 @@ function createTile(page, position) {
 
     // The iframe which renders either a thumbnail or domain element.
     var thumbnailElement = document.createElement('iframe');
+    thumbnailElement.tabIndex = '-1';
     thumbnailElement.src = getMostVisitedIframeUrl(
         MOST_VISITED_THUMBNAIL_IFRAME, rid, MOST_VISITED_COLOR,
         MOST_VISITED_FONT_FAMILY, MOST_VISITED_FONT_SIZE, false, position);
@@ -459,9 +482,13 @@ function createTile(page, position) {
     // The button used to blacklist this page.
     var blacklistButton = createAndAppendElement(
         tileElement, 'div', CLASSES.BLACKLIST_BUTTON);
-    blacklistButton.addEventListener('click', generateBlacklistFunction(rid));
+    var blacklistFunction = generateBlacklistFunction(rid);
+    blacklistButton.addEventListener('click', blacklistFunction);
     blacklistButton.title = templateData.removeThumbnailTooltip;
 
+    // When a tile is focused, have delete also blacklist the page.
+    registerKeyHandler(tileElement, KEYCODE.DELETE, blacklistFunction);
+
     // The page favicon, if any.
     var faviconUrl = page.faviconUrl;
     if (faviconUrl) {
@@ -778,29 +805,6 @@ var VERBATIM_SEARCH_TYPE = 'search-what-you-typed';
 
 
 /**
- * "Up" arrow keycode.
- * @type {number}
- * @const
- */
-var KEY_UP_ARROW = 38;
-
-
-/**
- * "Down" arrow keycode.
- * @type {number}
- * @const
- */
-var KEY_DOWN_ARROW = 40;
-
-
-/**
- * "Esc" keycode.
- * @type {number}
- * @const
- */
-var KEY_ESC = 27;
-
-/**
  * Pixels of padding inside a suggestion div for displaying its icon.
  * @type {number}
  * @const
@@ -928,6 +932,7 @@ IframePool.prototype = {
       iframe.id = IDS.SUGGESTION_TEXT_PREFIX + i;
       iframe.src = 'chrome-search://suggestion/result.html';
       iframe.style.top = OFF_SCREEN;
+      iframe.tabIndex = '-1';
       iframe.addEventListener('mouseover', function(e) {
         if (activeBox)
           activeBox.hover(e.currentTarget.id);
@@ -1488,15 +1493,15 @@ function setSuggestionStyles() {
  */
 function handleKeyPress(e) {
   switch (e.keyCode) {
-    case KEY_UP_ARROW:
+    case KEYCODE.UP_ARROW:
       if (activeBox)
         activeBox.selectPrevious();
       break;
-    case KEY_DOWN_ARROW:
+    case KEYCODE.DOWN_ARROW:
       if (activeBox)
         activeBox.selectNext();
       break;
-    case KEY_ESC:
+    case KEYCODE.ESC:
       if (activeBox && activeBox.hasSelectedSuggestion())
         activeBox.clearSelection();
       else
@@ -1591,6 +1596,19 @@ function removeChildren(node) {
 
 
 /**
+ * @param {!Element} element The element to register the handler for.
+ * @param {number} keycode The keycode of the key to register.
+ * @param {!Function} handler The key handler to register.
+ */
+function registerKeyHandler(element, keycode, handler) {
+  element.addEventListener('keydown', function(event) {
+    if (event.keyCode == keycode)
+      handler(event);
+  });
+}
+
+
+/**
  * @return {Object} the handle to the embeddedSearch API.
  */
 function getEmbeddedSearchApiHandle() {
@@ -1653,9 +1671,11 @@ function init() {
   notificationMessage.textContent = templateData.thumbnailRemovedNotification;
   var undoLink = $(IDS.UNDO_LINK);
   undoLink.addEventListener('click', onUndo);
+  registerKeyHandler(undoLink, KEYCODE.ENTER, onUndo);
   undoLink.textContent = templateData.undoThumbnailRemove;
   var restoreAllLink = $(IDS.RESTORE_ALL_LINK);
   restoreAllLink.addEventListener('click', onRestoreAll);
+  registerKeyHandler(restoreAllLink, KEYCODE.ENTER, onUndo);
   restoreAllLink.textContent = templateData.restoreThumbnailsShort;
   attribution.textContent = templateData.attributionIntro;
 
@@ -1702,9 +1722,13 @@ function init() {
     searchboxApiHandle.onkeycapturechange = function() {
       setFakeboxFocus(searchboxApiHandle.isKeyCaptureEnabled);
     };
+  }
 
-    // Set the cursor alignment based on language directionality.
-    $(IDS.CURSOR).style[searchboxApiHandle.rtl ? 'right' : 'left'] = '9px';
+  if (searchboxApiHandle.rtl) {
+    $(IDS.NOTIFICATION).dir = 'rtl';
+    // Add class for setting alignments based on language directionality.
+    document.body.classList.add('rtl');
+    $(IDS.TILES).dir = 'rtl';
   }
 }
 
diff --git a/chrome/browser/resources/local_ntp/most_visited_util.js b/chrome/browser/resources/local_ntp/most_visited_util.js
index e9a97e6..3b9589e 100644
--- a/chrome/browser/resources/local_ntp/most_visited_util.js
+++ b/chrome/browser/resources/local_ntp/most_visited_util.js
@@ -57,6 +57,9 @@ function createMostVisitedLink(params, href, title, text) {
     link.ping = '/log.html?pos=' + params.pos;
   link.title = title;
   link.target = '_top';
+  // Exclude links from the tab order.  The tabIndex is added to the thumbnail
+  // parent container instead.
+  link.tabIndex = '-1';
   if (text)
     link.textContent = text;
   return link;
diff --git a/chrome/browser/search/local_ntp_source.cc b/chrome/browser/search/local_ntp_source.cc
index c86e10b..98e0f88 100644
--- a/chrome/browser/search/local_ntp_source.cc
+++ b/chrome/browser/search/local_ntp_source.cc
@@ -38,6 +38,7 @@ const struct Resource{
   { "images/close_2.png", IDR_CLOSE_2, "image/png" },
   { "images/close_2_hover.png", IDR_CLOSE_2_H, "image/png" },
   { "images/close_2_active.png", IDR_CLOSE_2_P, "image/png" },
+  { "images/close_2_white.png", IDR_CLOSE_2_MASK, "image/png" },
   { "images/page_icon.png", IDR_LOCAL_OMNIBOX_POPUP_IMAGES_PAGE_ICON_PNG,
     "image/png" },
   { "images/2x/page_icon.png",