Bring back attribution. If there is no custom attribution, fall back to the product logo.

BUG=53970
TEST=

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

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

6 files changed, 93 insertions, 38 deletions

diff --git a/chrome/browser/dom_ui/new_tab_ui.cc b/chrome/browser/dom_ui/new_tab_ui.cc
index 1183a4e..887812c 100644
--- a/chrome/browser/dom_ui/new_tab_ui.cc
+++ b/chrome/browser/dom_ui/new_tab_ui.cc
@@ -27,6 +27,7 @@
 #include "chrome/browser/dom_ui/ntp_resource_cache.h"
 #include "chrome/browser/dom_ui/shown_sections_handler.h"
 #include "chrome/browser/metrics/user_metrics.h"
+#include "chrome/browser/themes/browser_theme_provider.h"
 #include "chrome/browser/prefs/pref_service.h"
 #include "chrome/browser/profile.h"
 #include "chrome/browser/renderer_host/render_view_host.h"
@@ -40,6 +41,7 @@
 #include "chrome/common/pref_names.h"
 #include "chrome/common/url_constants.h"
 #include "grit/generated_resources.h"
+#include "grit/theme_resources.h"
 
 namespace {
 
@@ -485,7 +487,12 @@ void NewTabUI::Observe(NotificationType type,
                        const NotificationDetails& details) {
   if (NotificationType::BROWSER_THEME_CHANGED == type) {
     InitializeCSSCaches();
-    CallJavascriptFunction(L"themeChanged");
+    ListValue args;
+    args.Append(Value::CreateStringValue(
+        GetProfile()->GetThemeProvider()->HasCustomImage(
+            IDR_THEME_NTP_ATTRIBUTION) ?
+        "true" : "false"));
+    CallJavascriptFunction(L"themeChanged", args);
   } else if (NotificationType::BOOKMARK_BAR_VISIBILITY_PREF_CHANGED) {
     if (GetProfile()->GetPrefs()->GetBoolean(prefs::kShowBookmarkBar))
       CallJavascriptFunction(L"bookmarkBarAttached");
diff --git a/chrome/browser/dom_ui/ntp_resource_cache.cc b/chrome/browser/dom_ui/ntp_resource_cache.cc
index 56b1290..c2209bd 100644
--- a/chrome/browser/dom_ui/ntp_resource_cache.cc
+++ b/chrome/browser/dom_ui/ntp_resource_cache.cc
@@ -451,19 +451,17 @@ void NTPResourceCache::CreateNewTabCSS() {
   subst2.push_back(SkColorToRGBAString(color_section_border));  // $$2
   subst2.push_back(SkColorToRGBAString(color_section_text));  // $$3
   subst2.push_back(SkColorToRGBAString(color_section_link));  // $$4
-  subst2.push_back(
-      tp->HasCustomImage(IDR_THEME_NTP_ATTRIBUTION) ? "block" : "none");  // $$5
-  subst2.push_back(SkColorToRGBAString(color_link_underline));  // $$6
-  subst2.push_back(SkColorToRGBAString(color_section_link_underline));  // $$7
-  subst2.push_back(SkColorToRGBAString(color_section_header_text)); // $$8
+  subst2.push_back(SkColorToRGBAString(color_link_underline));  // $$5
+  subst2.push_back(SkColorToRGBAString(color_section_link_underline));  // $$6
+  subst2.push_back(SkColorToRGBAString(color_section_header_text)); // $$7
   subst2.push_back(SkColorToRGBAString(
-      color_section_header_text_hover)); // $$9
+      color_section_header_text_hover)); // $$8
+  subst2.push_back(SkColorToRGBAString(color_section_header_rule));  // $$9
 
-  subst3.push_back(SkColorToRGBAString(color_section_header_rule));  // $$$1
   subst3.push_back(SkColorToRGBAString(
-      color_section_header_rule_light));  // $$$2
+      color_section_header_rule_light));  // $$$1
   subst3.push_back(SkColorToRGBAString(
-      SkColorSetA(color_section_header_rule, 0)));  // $$$3
+      SkColorSetA(color_section_header_rule, 0)));  // $$$2
 
 
   // Get our template.
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 6ef25c5..2630d79 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -261,7 +261,23 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 }
 
 #attribution {
-  margin: 10px 0;
+  position: fixed;
+  right: 5px;
+  bottom: 5px;
+  text-align: end;
+}
+
+html[dir=rtl] #attribution {
+  left: 5px;
+  right: auto;
+}
+
+#attribution.obscured {
+  opacity: 0.3;
+}
+
+html[hasattribution=false] #attribution > div {
+  display: none;
 }
 
 .sync-button {
@@ -303,6 +319,12 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   top: 4px;
 }
 
+html[dir=rtl] .section > h2 > .disclosure {
+  left: auto;
+  right: -15px;
+  -webkit-transform: rotate(180deg);
+}
+
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
@@ -317,7 +339,7 @@ html[dir=rtl] #option-menu > [command=hide]:before {
 }
 
 .section > h2 span {
-  padding-right: 5px;
+  -webkit-padding-end: 5px;
   position: relative;
   z-index: 2;
 }
@@ -331,6 +353,11 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   z-index: 3;
 }
 
+html[dir=rtl] .section > h2 .settings-wrapper {
+  left: 0;
+  right: auto;
+}
+
 .section > h2 .settings {
   position: absolute;
   left: 5px;
diff --git a/chrome/browser/resources/new_new_tab.html b/chrome/browser/resources/new_new_tab.html
index e324d47..2080c71 100644
--- a/chrome/browser/resources/new_new_tab.html
+++ b/chrome/browser/resources/new_new_tab.html
@@ -117,8 +117,12 @@ if ('mode' in hashParams) {
 <body class="loading"
       i18n-values=".style.fontFamily:fontfamily;.style.fontSize:fontsize">
 
-<div id="main">
+<div id="attribution" class="attribution">
+  <div i18n-content="attributionintro"></div>
+  <img id="attribution-img">
+</div>
 
+<div id="main">
   <menu id="option-menu">
     <div command="clear-all-blacklisted"
          i18n-content="restorethumbnails"></div>
@@ -171,11 +175,6 @@ if ('mode' in hashParams) {
       </div>
     </div>
   </div>
-
-  <div id="attribution" class="attribution">
-    <div i18n-content="attributionintro"></div>
-    <img id="attribution-img">
-  </div>
 </div>  <!-- main -->
 
 <div class="window-menu" id="window-tooltip"></div>
diff --git a/chrome/browser/resources/new_new_tab.js b/chrome/browser/resources/new_new_tab.js
index 2637b44..92daf99 100644
--- a/chrome/browser/resources/new_new_tab.js
+++ b/chrome/browser/resources/new_new_tab.js
@@ -226,6 +226,8 @@ function layoutSections() {
     if (section == expandedSection)
       y += expandedSectionHeight;
   }
+
+  updateAttributionDisplay(y);
 }
 
 function updateMask(maxiview, visibleHeightPx) {
@@ -469,14 +471,36 @@ function formatTabsText(numTabs) {
 
 // Theme related
 
-function themeChanged() {
+function themeChanged(hasAttribution) {
+  document.documentElement.setAttribute('hasattribution', hasAttribution);
   $('themecss').href = 'chrome://theme/css/newtab.css?' + Date.now();
   updateAttribution();
 }
 
 function updateAttribution() {
-  $('attribution-img').src = 'chrome://theme/IDR_THEME_NTP_ATTRIBUTION?' +
-      Date.now();
+  var imageId =
+      document.documentElement.getAttribute('hasattribution') == 'true' ?
+      'IDR_THEME_NTP_ATTRIBUTION' : 'IDR_PRODUCT_LOGO';
+  $('attribution-img').src = 'chrome://theme/' + imageId + '?' + Date.now();
+}
+
+// If the content overlaps with the attribution, we bump its opacity down.
+function updateAttributionDisplay(contentBottom) {
+  var attribution = $('attribution');
+  var main = $('main');
+  var rtl = document.documentElement.dir == 'rtl';
+  var contentRect = main.getBoundingClientRect();
+  var attributionRect = attribution.getBoundingClientRect();
+
+  if (contentBottom > attribution.offsetTop) {
+    if ((!rtl && contentRect.right > attributionRect.left) ||
+        (rtl && attributionRect.right > contentRect.left)) {
+      attribution.classList.add('obscured');
+      return;
+    }
+  }
+
+  attribution.classList.remove('obscured');
 }
 
 function bookmarkBarAttached() {
@@ -623,7 +647,10 @@ OptionMenu.prototype = {
   positionMenu_: function() {
     var rect = this.button.getBoundingClientRect();
     this.menu.style.top = rect.bottom + 'px';
-    this.menu.style.right = (document.body.clientWidth - rect.right) + 'px'
+    if (document.documentElement.dir == 'rtl')
+      this.menu.style.left = rect.left + 'px';
+    else
+      this.menu.style.right = (document.body.clientWidth - rect.right) + 'px'
   },
 
   hide: function() {
diff --git a/chrome/browser/resources/new_tab_theme.css b/chrome/browser/resources/new_tab_theme.css
index 0a911f6..237274e 100644
--- a/chrome/browser/resources/new_tab_theme.css
+++ b/chrome/browser/resources/new_tab_theme.css
@@ -28,7 +28,7 @@ body {
 }
 
 #notification.first-run .link {
-   color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
+   color: $$5; /* COLOR_NTP_LINK_UNDERLINE */
 }
 
 #notification.first-run .link-color {
@@ -75,7 +75,7 @@ body {
 }
 
 .miniview > span {
-  color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
+  color: $$5; /* COLOR_NTP_LINK_UNDERLINE */
   text-decoration: underline;
 }
 
@@ -85,9 +85,7 @@ body {
 }
 
 #attribution {
-  display: $$5;
   color: $9; /* COLOR_NTP_LINK */
-  text-align: end;
 }
 
 #tip-line {
@@ -101,36 +99,35 @@ body {
 :link,
 :visited,
 .link {
-  color: $$6; /* COLOR_NTP_LINK_UNDERLINE */
+  color: $$5; /* COLOR_NTP_LINK_UNDERLINE */
+}
+
+.section > h2 {
+  color: $$7; /* COLOR_NTP_SECTION_HEADER_TEXT */
 }
 
 .section:not(.hidden) > h2 {
-  color: $$9;
+  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */
 }
 
 .section.hidden:not([noexpand]) > h2:hover {
-  color: $$9;
+  color: $$8; /* COLOR_NTP_SECTION_HEADER_TEXT_HOVER */
 }
 
 .section > h2 .back {
   background-image:
       -webkit-gradient(radial, 50% -1753, 1750, 50% -1753, 1770,
-                       from($$$1), to($$$3));
-  border-top: 1px solid $$$1; /* COLOR_NTP_SECTION_HEADER_RULE */
+                       from($$9), to($$$2));
+  border-top: 1px solid $$9; /* COLOR_NTP_SECTION_HEADER_RULE */
 }
 
 .section.hidden > h2 .back {
   background: none;
-  border-color-top: $$$2; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
+  border-color-top: $$$1; /* COLOR_NTP_SECTION_HEADER_RULE_LIGHT */
 }
 
 .section.hidden:hover > h2 .back {
-  border-color-top: $$$1; /* COLOR_NTP_SECTION_HEADER_RULE */
-}
-
-.section > h2 > .settings {
-  background-color: $2; /* COLOR_NTP_BACKGROUND */
-  border-color: $2; /* COLOR_NTP_BACKGROUND */
+  border-color-top: $$9; /* COLOR_NTP_SECTION_HEADER_RULE */
 }
 
 .app a {