Local NTP: rework custom background attribution links

Fixed: 1010869
Change-Id: I04e05c34e6a2ad163bf61d48ec66736a15972e5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1846712Reviewed-by: Kyle Milka <kmilka@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703896}

chrome/browser/resources/local_ntp/customize.css

@@ -665,8 +665,7 @@ html[dir=rtl] .selected-check {
   color: white;
   font-weight: 500;
   left: 16px;
-  max-width: 80%;
-  padding: 8px 8px 8px 8px;
+  padding: 8px;
   position: fixed;
   text-shadow: 0 0 16px rgba(0, 0, 0, .3);
   z-index: -1;
@@ -678,18 +677,30 @@ html[dir=rtl] #custom-bg-attr {
   right: 16px;
 }
 
-.attr-common {
+#custom-bg-attr a {
+  clear: both;
+  color: inherit;
+  float: left;
   font-size: 13px;
   height: 20px;
   line-height: 20px;
+  max-width: 50vw;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: middle;
   white-space: nowrap;
-  width: -webkit-fill-available;
 }
 
-.attr-common.attr-small {
+[dir=rtl] #custom-bg-attr a {
+  float: right;
+}
+
+#custom-bg-attr a[href=''] {
+  cursor: auto;
+  text-decoration: none;
+}
+
+#custom-bg-attr a ~ a {
   font-size: 11px;
 }
 
@@ -697,11 +708,6 @@ html[dir=rtl] #custom-bg-attr {
   background: rgba(var(--GG900-rgb), .1);
 }
 
-.attr-link {
-  display: inline-block;
-  text-decoration: underline;
-}
-
 #link-icon {
   background: url(icons/link.svg);
   background-size: 10px 10px;

chrome/browser/resources/local_ntp/customize.js

@@ -163,7 +163,6 @@ customize.IDS = {
  */
 customize.CLASSES = {
   ATTR_SMALL: 'attr-small',
-  ATTR_COMMON: 'attr-common',
   ATTR_LINK: 'attr-link',
   COLLECTION_DIALOG: 'is-col-sel',
   COLLECTION_SELECTED: 'bg-selected',  // Highlight selected tile
@@ -358,25 +357,27 @@ customize.onThemeChange = function() {
 customize.setAttribution = function(
     attributionLine1, attributionLine2, attributionActionUrl) {
   const attributionBox = $(customize.IDS.ATTRIBUTIONS);
-  const attr1 = document.createElement('span');
+  const attr1 = document.createElement('a');
   attr1.id = customize.IDS.ATTR1;
-  const attr2 = document.createElement('span');
+  const attr2 = document.createElement('a');
   attr2.id = customize.IDS.ATTR2;
 
   if (attributionLine1 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr1.textContent = attributionLine1;
-    attr1.classList.add(customize.CLASSES.ATTR_COMMON);
+    attr1.href = attributionActionUrl || '';
     $(customize.IDS.ATTRIBUTIONS).appendChild(attr1);
   }
+
   if (attributionLine2 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr2.textContent = attributionLine2;
-    attr2.classList.add(customize.CLASSES.ATTR_SMALL);
-    attr2.classList.add(customize.CLASSES.ATTR_COMMON);
+    attr2.href = attributionActionUrl || '';
     attributionBox.appendChild(attr2);
   }
-  if (attributionActionUrl !== '') {
+
+  const hasActionUrl = attributionActionUrl !== '';
+  if (hasActionUrl) {
     const attr = (attributionLine2 !== '' ? attr2 : attr1);
     attr.classList.add(customize.CLASSES.ATTR_LINK);
 
@@ -388,24 +389,18 @@ customize.setAttribution = function(
     }
     attr.insertBefore(linkIcon, attr.firstChild);
 
-    attributionBox.classList.add(customize.CLASSES.ATTR_LINK);
-    attributionBox.href = attributionActionUrl;
-    attributionBox.onclick = function() {
-      ntpApiHandle.logEvent(
-          customize.LOG_TYPE.NTP_CUSTOMIZE_ATTRIBUTION_CLICKED);
+    attributionBox.onclick = e => {
+      if (attr1.contains(e.target) || attr2.contains(e.target)) {
+        ntpApiHandle.logEvent(
+            customize.LOG_TYPE.NTP_CUSTOMIZE_ATTRIBUTION_CLICKED);
+      }
     };
-    attributionBox.style.cursor = 'pointer';
   }
+  attributionBox.classList.toggle(customize.CLASSES.ATTR_LINK, hasActionUrl);
 };
 
 customize.clearAttribution = function() {
-  const attributions = $(customize.IDS.ATTRIBUTIONS);
-  attributions.removeAttribute('href');
-  attributions.className = '';
-  attributions.style.cursor = 'default';
-  while (attributions.firstChild) {
-    attributions.removeChild(attributions.firstChild);
-  }
+  $(customize.IDS.ATTRIBUTIONS).innerHTML = '';
 };
 
 customize.unselectTile = function() {

chrome/browser/resources/local_ntp/local_ntp.html

@@ -121,7 +121,7 @@
       <span id="edit-bg-text">$i18n{customizeButton}</span>
     </div>
 
-    <a id="custom-bg-attr"></a>
+    <div id="custom-bg-attr"></div>
   </div>
 
   <dialog div id="edit-bg-dialog">

chrome/test/data/local_ntp/customize_menu_browsertest.js

@@ -348,7 +348,6 @@ test.customizeMenu.testMenu_BackgroundPreviewApplied = function() {
   assertFalse(document.body.classList.contains('alternate-logo'));
   assertEquals(null, $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1));
   assertEquals(null, $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2));
-  assertEquals('', $(test.customizeMenu.IDS.CUSTOM_BG_ATTR).href);
 
   // Select a background and check that correct styling and attributes are
   // applied to the page.
@@ -363,7 +362,10 @@ test.customizeMenu.testMenu_BackgroundPreviewApplied = function() {
       $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2).innerText);
   assertEquals(
       image_tile.dataset.attributionActionUrl,
-      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR).href);
+      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE1).href);
+  assertEquals(
+      image_tile.dataset.attributionActionUrl,
+      $(test.customizeMenu.IDS.CUSTOM_BG_ATTR_LINE2).href);
 };
 
 /**

chrome/test/data/local_ntp/local_ntp_browsertest.html

@@ -114,7 +114,7 @@
         <span id="edit-bg-text">$i18n{customizeButton}</span>
       </div>
 
-      <a id="custom-bg-attr"></a>
+      <div id="custom-bg-attr"></div>
     </div>
 
     <dialog div id="edit-bg-dialog" class="customize-dialog">