Local NTP: fix <a href=""> clicks in attribution area reloading page

Fixed: 1019589
Change-Id: I11fad6d0088df2040a895457b62358aaa7ca53c9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1892096
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Gayane Petrosyan <gayane@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712256}

chrome/browser/resources/local_ntp/customize.css

@@ -677,7 +677,8 @@ html[dir=rtl] #custom-bg-attr {
   right: 16px;
 }
 
-#custom-bg-attr a {
+#attr1,
+#attr2 {
   clear: both;
   color: inherit;
   float: left;
@@ -691,16 +692,12 @@ html[dir=rtl] #custom-bg-attr {
   white-space: nowrap;
 }
 
-[dir=rtl] #custom-bg-attr a {
+[dir=rtl] #attr1,
+[dir=rtl] #attr2 {
   float: right;
 }
 
-#custom-bg-attr a[href=''] {
-  cursor: auto;
-  text-decoration: none;
-}
-
-#custom-bg-attr a ~ a {
+#custom-bg-attr #attr1 ~ #attr2 {
   font-size: 11px;
 }
 

chrome/browser/resources/local_ntp/customize.js

@@ -357,26 +357,31 @@ customize.onThemeChange = function() {
 customize.setAttribution = function(
     attributionLine1, attributionLine2, attributionActionUrl) {
   const attributionBox = $(customize.IDS.ATTRIBUTIONS);
-  const attr1 = document.createElement('a');
+  const hasActionUrl = attributionActionUrl !== '';
+
+  const attr1 = document.createElement(hasActionUrl ? 'a' : 'span');
   attr1.id = customize.IDS.ATTR1;
-  const attr2 = document.createElement('a');
+  const attr2 = document.createElement(hasActionUrl ? 'a' : 'span');
   attr2.id = customize.IDS.ATTR2;
 
   if (attributionLine1 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr1.textContent = attributionLine1;
-    attr1.href = attributionActionUrl || '';
+    if (hasActionUrl) {
+      attr1.href = attributionActionUrl;
+    }
     $(customize.IDS.ATTRIBUTIONS).appendChild(attr1);
   }
 
   if (attributionLine2 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr2.textContent = attributionLine2;
-    attr2.href = attributionActionUrl || '';
+    if (hasActionUrl) {
+      attr2.href = attributionActionUrl;
+    }
     attributionBox.appendChild(attr2);
   }
 
-  const hasActionUrl = attributionActionUrl !== '';
   if (hasActionUrl) {
     const attr = (attributionLine2 !== '' ? attr2 : attr1);
     attr.classList.add(customize.CLASSES.ATTR_LINK);

chrome/test/data/local_ntp/customize_menu_browsertest.js

@@ -351,21 +351,41 @@ test.customizeMenu.testMenu_BackgroundPreviewApplied = function() {
 
   // Select a background and check that correct styling and attributes are
   // applied to the page.
-  const image_tile = $('coll_0_img_tile_0');
-  image_tile.click();
+  const imageTile = $('coll_0_img_tile_0');
+  imageTile.click();
   assertTrue(document.body.classList.contains('alternate-logo'));
-  assertEquals(
-      image_tile.dataset.attributionLine1,
-      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1).innerText);
-  assertEquals(
-      image_tile.dataset.attributionLine2,
-      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2).innerText);
-  assertEquals(
-      image_tile.dataset.attributionActionUrl,
-      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1).href);
-  assertEquals(
-      image_tile.dataset.attributionActionUrl,
-      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2).href);
+
+  const attr1 = $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1);
+  assertEquals(attr1.tagName, 'A');
+  assertEquals(imageTile.dataset.attributionLine1, attr1.innerText);
+  assertEquals(imageTile.dataset.attributionActionUrl, attr1.href);
+
+  const attr2 = $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2);
+  assertEquals(attr2.tagName, 'A');
+  assertEquals(imageTile.dataset.attributionLine2, attr2.innerText);
+  assertEquals(imageTile.dataset.attributionActionUrl, attr2.href);
+};
+
+/** Tests that attributions without action URL render correctly. */
+test.customizeMenu.testAttributionWithoutActionUrl = function() {
+  setupFakeAsyncCollectionLoad();
+  init();
+
+  $(test.customizeMenu.IDS.EDIT_BG).click();
+
+  setupFakeAsyncImageLoad('coll_tile_0');
+  $('coll_tile_0').click();
+
+  const imageTile = $('coll_0_img_tile_3');
+  imageTile.click();
+
+  const attr1 = $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1);
+  assertEquals(attr1.tagName, 'SPAN');
+  assertFalse(attr1.hasAttribute('href'));
+  assertEquals(imageTile.dataset.attributionLine1, attr1.innerText);
+  assertEquals($(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2), null);
+  assertEquals(imageTile.dataset.attributionLine2, '');
+  assertEquals(imageTile.dataset.attributionActionUrl, '');
 };
 
 /**
@@ -1251,8 +1271,8 @@ setupFakeAsyncImageLoad = function(tile_id) {
         thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg3'
       },
       {
-        attributionActionUrl: 'https://www.google.com/',
-        attributions: ['test4', 'attribution4'],
+        attributionActionUrl: '',
+        attributions: ['test4'],
         collectionId: 'collection1',
         imageUrl: 'chrome-search://local-ntp/background4.jpg',
         thumbnailImageUrl: 'chrome-search://local-ntp/background_thumbnail.jpg4'