NTP: Fix RTL issue with the notification

BUG=71729
TEST=Use RTL locale
     Go to NTP
     Show Most Visited
     Blacklist a thumbnail
     The notifcation should have space between the message and the "undo" link.

Review URL: http://codereview.chromium.org/6410135

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

3 files changed, 12 insertions, 13 deletions

diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index dc3ba2e..fc88c20 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -81,20 +81,21 @@ html[anim=false] *,
 }
 
 #notification {
+  -webkit-transition: opacity .15s;
   position: relative;
   background-color: hsl(52, 100%, 80%);
   border: 1px solid rgb(211, 211, 211);
   border-radius: 6px;
-  padding: 7px 15px;
-  white-space: nowrap;
-  display: table;
-  margin: 2px auto;
+  color: black;
+  display: -webkit-box;
   font-weight: bold;
+  margin: 2px auto;
   opacity: 0;
+  padding: 7px 15px;
   pointer-events: none;
-  -webkit-transition: opacity .15s;
+  white-space: nowrap;
+  width: intrinsic;
   z-index: 2;
-  color: black;
 }
 
 #notification.first-run {
@@ -141,7 +142,6 @@ html[anim=false] *,
 }
 
 #notification > * {
-  display: table-cell;
   max-width: 500px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -162,7 +162,7 @@ html[anim=false] *,
   color: rgb(0, 102, 204);
 }
 
-#notification > span > .blacklist-title {
+#notification > * > .blacklist-title {
   display: inline-block;
   max-width: 30ex;
   overflow: hidden;
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index 2e6692a..1148bc7 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -134,9 +134,8 @@ if ('mode' in hashParams) {
 
   <div id="notification-container">
     <div id="notification">
-      <span>&nbsp;</span>
-      <span class="link"><span class="link-color" id="action-link"></span>
-      </span>
+      <div>&nbsp;</div>
+      <div class="link"><div class="link-color" id="action-link"></div></div>
       <button id="notification-close"></button>
     </div>
   </div>
diff --git a/chrome/browser/resources/ntp/most_visited.js b/chrome/browser/resources/ntp/most_visited.js
index a2c56de..183ad20 100644
--- a/chrome/browser/resources/ntp/most_visited.js
+++ b/chrome/browser/resources/ntp/most_visited.js
@@ -178,8 +178,8 @@ var MostVisited = (function() {
 
         // Now change the DOM.
         var removeText = localStrings.getString('thumbnailremovednotification');
-        var notifySpan = document.querySelector('#notification > span');
-        notifySpan.textContent = removeText;
+        var notifyMessageEl = document.querySelector('#notification > *');
+        notifyMessageEl.textContent = removeText;
 
         // Focus the undo link.
         var undoLink = document.querySelector(