ntp4: Make theme attribution separate from chrome logo.

now the chrome logo should always show, but the attribution only shows if the theme has one. I also moved the attribution to the right side because it looks more balanced over there (this didn't break horribly for any of the handful of themes I tested on). Leaving it on the left side, right next to the chrome logo, looks cluttered.

BUG=none
TEST=manual

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

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

chrome/browser/resources/ntp4/new_tab.css

@@ -42,6 +42,20 @@ body {
   display: -webkit-box;
 }
 
+#attribution {
+  bottom: 0;
+  position: absolute;
+  right: 0;
+  z-index: -5;
+}
+
+#attribution > span {
+  display: block;
+  font-size: 84%;
+  /* Text should be left aligned regardless of diretionality. */
+  text-align: left;
+}
+
 #footer {
   background-color: rgba(255, 255, 255, 0.8);
   bottom: 0;

chrome/browser/resources/ntp4/new_tab.html

@@ -55,11 +55,15 @@ document.documentElement.setAttribute('touchui', true);
   <div id="card-slider-frame">
     <div id="page-list">
     </div>
+    <div id="attribution">
+      <span i18n-content="attributionintro"></span>
+      <img id="attribution-img">
+    </div>
   </div>
   <div id="footer">
     <div id="footer-border"></div>
     <div id="footer-content">
-      <img id="attribution-img">
+      <img id="logo-img">
 
       <ul id="dot-list">
         <!-- This is another template node (see above). -->

chrome/browser/resources/ntp4/new_tab.js

@@ -680,22 +680,34 @@ cr.define('ntp4', function() {
     $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now();
     if (typeof hasAttribution != 'undefined')
       document.documentElement.setAttribute('hasattribution', hasAttribution);
+    updateLogo();
     updateAttribution();
   }
 
   /**
    * Sets the proper image for the logo at the bottom left.
    */
-  function updateAttribution() {
-    // Default value for standard NTP with no theme attribution or custom logo.
+  function updateLogo() {
     var imageId = 'IDR_PRODUCT_LOGO';
-    // Theme attribution always overrides custom logos.
-    if (document.documentElement.getAttribute('hasattribution') == 'true')
-      imageId = 'IDR_THEME_NTP_ATTRIBUTION';
-    else if (document.documentElement.getAttribute('customlogo') == 'true')
+    if (document.documentElement.getAttribute('customlogo') == 'true')
       imageId = 'IDR_CUSTOM_PRODUCT_LOGO';
 
-    $('attribution-img').src = 'chrome://theme/' + imageId + '?' + Date.now();
+    $('logo-img').src = 'chrome://theme/' + imageId + '?' + Date.now();
+  }
+
+  /**
+   * Attributes the attribution image at the bottom left.
+   */
+  function updateAttribution() {
+    var attribution = $('attribution');
+    if (document.documentElement.getAttribute('hasattribution') == 'true') {
+      $('attribution-img').src =
+          'chrome://theme/IDR_THEME_NTP_ATTRIBUTION?' + Date.now();
+      attribution.hidden = false;
+    } else {
+      attribution.hidden = true;
+    }
+
   }
 
   function setRecentlyClosedTabs(dataItems) {