[ntp][doodle] Hide share button if not sent in doodle response

The share button is not sent for doodles that should not be shared.

Fixed: 1113160
Bug: 162949376
Change-Id: I833d6c536cc46fa9fa1db04149a45077a08809d2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2339759
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Commit-Queue: Alex Gough <ajgo@chromium.org>
Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Alex Gough <ajgo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#795204}

chrome/browser/resources/new_tab_page/logo.html

@@ -115,7 +115,8 @@
             hidden="[[!showAnimation_]]">
         </ntp-iframe>
         <cr-button id="shareButton" title="$i18n{shareDoodle}"
-            on-click="onShareButtonClick_">
+            on-click="onShareButtonClick_"
+            hidden="[[!imageDoodle_.shareButton]]">
           <img id="shareButtonImage"
               src="[[imageDoodle_.shareButton.iconUrl.url]]">
           </img>

chrome/browser/resources/new_tab_page/logo.js

@@ -204,8 +204,8 @@ class LogoElement extends PolymerElement {
 
   /** @private */
   onImageDoodleChange_() {
-    if (this.imageDoodle_) {
-      const shareButton = this.imageDoodle_.shareButton;
+    const shareButton = this.imageDoodle_ && this.imageDoodle_.shareButton;
+    if (shareButton) {
       const height = this.imageDoodle_.height;
       const width = this.imageDoodle_.width;
       this.updateStyles({
@@ -217,8 +217,6 @@ class LogoElement extends PolymerElement {
             `${SHARE_BUTTON_SIZE_PX / width * 100}%`,
         '--ntp-logo-share-button-x': `${shareButton.x / width * 100}%`,
         '--ntp-logo-share-button-y': `${shareButton.y / height * 100}%`,
-        '--ntp-logo-box-color':
-            skColorToRgba(this.imageDoodle_.backgroundColor),
       });
     } else {
       this.updateStyles({
@@ -227,6 +225,15 @@ class LogoElement extends PolymerElement {
         '--ntp-logo-share-button-width': null,
         '--ntp-logo-share-button-x': null,
         '--ntp-logo-share-button-y': null,
+      });
+    }
+    if (this.imageDoodle_) {
+      this.updateStyles({
+        '--ntp-logo-box-color':
+            skColorToRgba(this.imageDoodle_.backgroundColor),
+      });
+    } else {
+      this.updateStyles({
         '--ntp-logo-box-color': null,
       });
     }

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

@@ -207,7 +207,7 @@ struct ImageDoodle {
   // differs from that color we show the doodle in a box of that color.
   skia.mojom.SkColor background_color;
   // Specification of the share button.
-  DoodleShareButton share_button;
+  DoodleShareButton? share_button;
   // URLs to be pinged when an image has been shown.
   url.mojom.Url image_impression_log_url;
   url.mojom.Url? animation_impression_log_url;

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

@@ -268,12 +268,14 @@ new_tab_page::mojom::ImageDoodlePtr MakeImageDoodle(
   doodle->width = width_px;
   doodle->height = height_px;
   doodle->background_color = ParseHexColor(background_color);
-  doodle->share_button = new_tab_page::mojom::DoodleShareButton::New();
-  doodle->share_button->x = share_button_x;
-  doodle->share_button->y = share_button_y;
-  doodle->share_button->icon_url = GURL(base::StringPrintf(
-      "data:image/png;base64,%s", share_button_icon.c_str()));
-  doodle->share_button->background_color = ParseHexColor(share_button_bg);
+  if (!share_button_icon.empty()) {
+    doodle->share_button = new_tab_page::mojom::DoodleShareButton::New();
+    doodle->share_button->x = share_button_x;
+    doodle->share_button->y = share_button_y;
+    doodle->share_button->icon_url = GURL(base::StringPrintf(
+        "data:image/png;base64,%s", share_button_icon.c_str()));
+    doodle->share_button->background_color = ParseHexColor(share_button_bg);
+  }
   if (type == search_provider_logos::LogoType::ANIMATED) {
     doodle->image_impression_log_url = cta_log_url;
     doodle->animation_impression_log_url = log_url;

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

@@ -149,6 +149,22 @@ function createSuite(themeModeDoodlesEnabled) {
     });
   });
 
+  [true, false].forEach(dark => {
+    test(`hide share button in ${dark ? 'dark' : 'light'} mode`, async () => {
+      // Arrange.
+      const doodle = createImageDoodle();
+      const imageDoodle = dark ? doodle.image.dark : doodle.image.light;
+      delete imageDoodle.shareButton;
+
+      // Act.
+      const logo = await createLogo(doodle);
+      logo.dark = dark;
+
+      // Assert.
+      assertStyle($$(logo, '#shareButton'), 'display', 'none');
+    });
+  });
+
   [null, '#ff0000'].forEach(color => {
     test(`${color || 'no'} background color shows box`, async () => {
       // Arrange.