[webui][ntp] Add minimal support for third-party themes with backgrounds

Third party theme background images are served via
chrome[-search]://theme/IDR_THEME_NTP_BACKGROUND?<theme-id>. The WebUI
NTP embeds the background image via a chrome-untrusted:// iframe since
most background images are fetched from the web. This means to use the
common WebUI NTP background image machinery the theme image has to be
available to a chrome-untrusted:// iframe. Therefore, this CL adds support
for serving the theme data source on the chrome-untrusted scheme.

With that, this CL sets the background image URL to
chrome-untrusted://theme/IDR_THEME_NTP_BACKGROUND?<theme-id> if a
theme with a third-party background image is set. Furthermore, this CL
adds white pills around the shortcut titles as the local NTP does it.

Bug: 1081441
Change-Id: Ia26546c395fabbcee17062ebec17956042cd85f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2197661
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: Nasko Oskov <nasko@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#768523}

chrome/browser/resources/new_tab_page/app.html

@@ -220,7 +220,8 @@
       theme="[[theme_.searchBox]]" hidden$="[[!realboxEnabled_]]">
   </ntp-realbox>
   <ntp-most-visited id="mostVisited" dark$="[[theme_.isDark]]"
-      use-white-add-icon$="[[theme_.shortcutUseWhiteAddIcon]]">
+      use-white-add-icon$="[[theme_.shortcutUseWhiteAddIcon]]"
+      use-title-pill$="[[theme_.shortcutUseTitlePill]]">
   </ntp-most-visited>
   <dom-if if="[[lazyRender_]]">
     <template>

chrome/browser/resources/new_tab_page/most_visited.html

@@ -98,15 +98,32 @@
   }
 
   .tile-title {
+    align-items: center;
+    border-radius: 12px;
     color: var(--ntp-theme-text-color);
+    display: flex;
+    height: 24px;
+    margin-top: 7px;
+    padding: 0 8px;
+    width: 88px;
+  }
+
+  :host([use-title-pill]) .tile-title {
+    background-color: white;
+  }
+
+  .tile-title span {
     font-weight: 400;
-    margin-top:  16px;
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
     text-shadow: var(--ntp-theme-text-shadow);
     white-space: nowrap;
-    width: 88px;
+    width: 100%;
+  }
+
+  :host([use-title-pill]) .tile-title span {
+    text-shadow: none;
   }
 
   .title-rtl {
@@ -173,7 +190,7 @@
           <img src$="[[getFaviconUrl_(item.url)]]" draggable="false"></img>
         </div>
         <div class$="tile-title [[getTileTitleDirectionClass_(item)]]">
-          [[item.title]]
+          <span>[[item.title]]</span>
         </div>
       </a>
     </template>
@@ -183,7 +200,9 @@
     <div class="tile-icon">
       <div id="addShortcutIcon" draggable="false"></div>
     </div>
-    <div class="tile-title">$i18n{addLinkTitle}</div>
+    <div class="tile-title">
+      <span>$i18n{addLinkTitle}</span>
+    </div>
   </cr-button>
   <cr-dialog id="dialog" on-close="onDialogClose_">
     <div slot="title">[[dialogTitle_]]</div>

chrome/browser/resources/new_tab_page/most_visited.js

@@ -86,6 +86,12 @@ class MostVisitedElement extends PolymerElement {
         reflectToAttribute: true,
       },
 
+      /* If true wraps the tile titles in white pills. */
+      useTitlePill: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
+
       /** @private */
       columnCount_: {
         type: Number,

chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom

@@ -131,6 +131,8 @@ struct Theme {
   skia.mojom.SkColor shortcut_text_color;
   // True if |shortcut_background_color| is dark.
   bool shortcut_use_white_add_icon;
+  // True if the shortcuts titles should be wrapped in a pill.
+  bool shortcut_use_title_pill;
   // True if the theme is dark (e.g. NTP background color is dark).
   bool is_dark;
   // Color of Google logo. If not set show the logo multi-colored.

chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.cc

@@ -13,6 +13,7 @@
 #include "base/metrics/histogram_macros.h"
 #include "base/metrics/user_metrics.h"
 #include "base/metrics/user_metrics_action.h"
+#include "base/strings/strcat.h"
 #include "base/strings/string_piece.h"
 #include "base/strings/utf_string_conversions.h"
 #include "chrome/browser/autocomplete/chrome_autocomplete_provider_client.h"
@@ -97,7 +98,9 @@ new_tab_page::mojom::ThemePtr MakeTheme(const NtpTheme& ntp_theme) {
   theme->shortcut_text_color = ntp_theme.text_color;
   theme->shortcut_use_white_add_icon =
       color_utils::IsDark(ntp_theme.shortcut_color);
-  theme->is_dark = !color_utils::IsDark(ntp_theme.text_color);
+  theme->shortcut_use_title_pill = ntp_theme.has_theme_image;
+  theme->is_dark =
+      ntp_theme.has_theme_image || !color_utils::IsDark(ntp_theme.text_color);
   if (ntp_theme.logo_alternate) {
     theme->logo_color = ntp_theme.logo_color;
   }
@@ -111,6 +114,10 @@ new_tab_page::mojom::ThemePtr MakeTheme(const NtpTheme& ntp_theme) {
     } else {
       theme->background_image_url = ntp_theme.custom_background_url;
     }
+  } else if (ntp_theme.has_theme_image) {
+    theme->background_image_url =
+        GURL(base::StrCat({"chrome-untrusted://theme/IDR_THEME_NTP_BACKGROUND?",
+                           ntp_theme.theme_id}));
   }
   if (!ntp_theme.custom_background_attribution_line_1.empty()) {
     theme->background_image_attribution_1 =

chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc

@@ -16,6 +16,7 @@
 #include "chrome/browser/ui/webui/favicon_source.h"
 #include "chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.h"
 #include "chrome/browser/ui/webui/new_tab_page/untrusted_source.h"
+#include "chrome/browser/ui/webui/theme_source.h"
 #include "chrome/browser/ui/webui/webui_util.h"
 #include "chrome/common/url_constants.h"
 #include "chrome/grit/browser_resources.h"
@@ -229,6 +230,9 @@ NewTabPageUI::NewTabPageUI(content::WebUI* web_ui)
                     profile_, chrome::FaviconUrlFormat::kFavicon2));
   content::URLDataSource::Add(profile_,
                               std::make_unique<UntrustedSource>(profile_));
+  content::URLDataSource::Add(
+      profile_,
+      std::make_unique<ThemeSource>(profile_, /*serve_untrusted=*/true));
 
   web_ui->AddRequestableScheme(content::kChromeUIUntrustedScheme);
 

chrome/browser/ui/webui/theme_source.cc

@@ -72,12 +72,17 @@ void ProcessResourceOnUiThread(int resource_id,
 ////////////////////////////////////////////////////////////////////////////////
 // ThemeSource, public:
 
-ThemeSource::ThemeSource(Profile* profile) : profile_(profile) {}
+ThemeSource::ThemeSource(Profile* profile)
+    : profile_(profile), serve_untrusted_(false) {}
+
+ThemeSource::ThemeSource(Profile* profile, bool serve_untrusted)
+    : profile_(profile), serve_untrusted_(serve_untrusted) {}
 
 ThemeSource::~ThemeSource() = default;
 
 std::string ThemeSource::GetSource() {
-  return chrome::kChromeUIThemeHost;
+  return serve_untrusted_ ? chrome::kChromeUIUntrustedThemeURL
+                          : chrome::kChromeUIThemeHost;
 }
 
 void ThemeSource::StartDataRequest(

chrome/browser/ui/webui/theme_source.h

@@ -18,6 +18,7 @@ class Profile;
 class ThemeSource : public content::URLDataSource {
  public:
   explicit ThemeSource(Profile* profile);
+  ThemeSource(Profile* profile, bool serve_untrusted);
   ~ThemeSource() override;
 
   // content::URLDataSource implementation.
@@ -50,6 +51,9 @@ class ThemeSource : public content::URLDataSource {
   // The profile this object was initialized with.
   Profile* profile_;
 
+  // Whether this source services chrome-unstrusted://theme.
+  bool serve_untrusted_;
+
   DISALLOW_COPY_AND_ASSIGN(ThemeSource);
 };
 

chrome/common/webui_url_constants.cc

@@ -157,6 +157,7 @@ const char kChromeUITermsHost[] = "terms";
 const char kChromeUITermsURL[] = "chrome://terms/";
 const char kChromeUIThemeHost[] = "theme";
 const char kChromeUIThemeURL[] = "chrome://theme/";
+const char kChromeUIUntrustedThemeURL[] = "chrome-untrusted://theme/";
 const char kChromeUIThumbnailHost2[] = "thumb2";
 const char kChromeUIThumbnailHost[] = "thumb";
 const char kChromeUIThumbnailListHost[] = "thumbnails";

chrome/common/webui_url_constants.h

@@ -165,6 +165,7 @@ extern const char kChromeUITermsHost[];
 extern const char kChromeUITermsURL[];
 extern const char kChromeUIThemeHost[];
 extern const char kChromeUIThemeURL[];
+extern const char kChromeUIUntrustedThemeURL[];
 extern const char kChromeUIThumbnailHost2[];
 extern const char kChromeUIThumbnailHost[];
 extern const char kChromeUIThumbnailListHost[];

chrome/test/data/webui/new_tab_page/app_test.js

@@ -293,4 +293,13 @@ suite('NewTabPageAppTest', () => {
     await testProxy.callbackRouterRemote.$.flushForTesting();
     assertTrue(app.$.mostVisited.hasAttribute('use-white-add-icon'));
   });
+
+  test('theme updates use title pill', async () => {
+    const theme = createTheme();
+    theme.shortcutUseTitlePill = true;
+    testProxy.callbackRouterRemote.setTheme(theme);
+    assertFalse(app.$.mostVisited.hasAttribute('use-title-pill'));
+    await testProxy.callbackRouterRemote.$.flushForTesting();
+    assertTrue(app.$.mostVisited.hasAttribute('use-title-pill'));
+  });
 });

chrome/test/data/webui/new_tab_page/most_visited_test.js

@@ -4,7 +4,7 @@
 
 import {BrowserProxy} from 'chrome://new-tab-page/new_tab_page.js';
 import {isMac} from 'chrome://resources/js/cr.m.js';
-import {assertStyle, createTestProxy, keydown} from 'chrome://test/new_tab_page/test_support.js';
+import {assertNotStyle, assertStyle, createTestProxy, keydown} from 'chrome://test/new_tab_page/test_support.js';
 import {eventToPromise, flushTasks} from 'chrome://test/test_util.m.js';
 
 suite('NewTabPageMostVisitedTest', () => {
@@ -724,6 +724,23 @@ suite('NewTabPageMostVisitedTest', () => {
         'rgb(255, 255, 255)');
   });
 
+  test('add title pill', () => {
+    mostVisited.style.setProperty('--ntp-theme-text-shadow', '1px 2px');
+    queryAll('.tile-title').forEach(tile => {
+      assertStyle(tile, 'background-color', 'rgba(0, 0, 0, 0)');
+    });
+    queryAll('.tile-title span').forEach(tile => {
+      assertNotStyle(tile, 'text-shadow', 'none');
+    });
+    mostVisited.toggleAttribute('use-title-pill', true);
+    queryAll('.tile-title').forEach(tile => {
+      assertStyle(tile, 'background-color', 'rgb(255, 255, 255)');
+    });
+    queryAll('.tile-title span').forEach(tile => {
+      assertStyle(tile, 'text-shadow', 'none');
+    });
+  });
+
   test('rendering tiles logs event', async () => {
     // Arrange.
     testProxy.setResultFor('now', 123);

chrome/test/data/webui/new_tab_page/test_support.js

@@ -95,5 +95,6 @@ export function createTheme() {
     dailyRefreshCollectionId: '',
     searchBox: searchBox,
     shortcutUseWhiteAddIcon: false,
+    shortcutUseTitlePill: false,
   };
 }