NTP: Fix layout flicker due to login header.

Also, simplify the CSS and markup and make it RTL aware.

BUG=60072
TEST=Login to sync and your user name should show up on the NTP.

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

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

chrome/browser/resources/new_new_tab.css

@@ -29,7 +29,6 @@ body.loading #main {
 }
 
 #main,
-#login-container,
 .section,
 .maxiview {
   width: 920px;
@@ -281,11 +280,10 @@ html[anim=true][enable-section-animations=true] .section {
 }
 
 #login-container {
-  position: relative;
-}
-#login {
-  position: absolute;
-  right: 0;
+  display: none;
+  height: 0;  /* This should not take any vertical space and this simpler than
+                 position absolute which changes the width to intrinsic */
+  text-align: end;
 }
 
 .section.disabled,

chrome/browser/resources/new_new_tab.html

@@ -131,10 +131,8 @@
     <span class="link"><span class="link-color"></span></span>
   </div>
 
-  <div class="login-container" id="login-container">
-    <div id="login">
-      <span id="login-username"></span>
-    </div>
+  <div id="login-container">
+    <span id="login-username"></span>
   </div>
 
   <div class="maxiview" id="apps-maxiview">

chrome/browser/resources/new_new_tab.js

@@ -1064,9 +1064,10 @@ function initializeLogin() {
 }
 
 function updateLogin(login) {
+  $('login-container').style.display = login ? 'block' : '';
   if (login)
     $('login-username').textContent = login;
-  $('login').style.display = login ? 'block' : 'none';
+
 }
 
 var mostVisited = new MostVisited(