[NTP] Enlarge link icon size when there is only one line attribution

Link icon will be enlarged when there is only one line of attribution.
The size of the link icon will still correspond to the text size when
there are two lines of attribution.

Screencast:
https://screencast.googleplex.com/cast/NTQwNTYzNTc2NDAyNzM5Mnw1ZjlmZGVjNC04Yg

Bug: 878917
Change-Id: I351569a1c260b4e5d0524c44bebdcdc8f67a4522
Reviewed-on: https://chromium-review.googlesource.com/1197425Reviewed-by: Kristi Park <kristipark@chromium.org>
Commit-Queue: Weilun Shi <sweilun@chromium.org>
Cr-Commit-Position: refs/heads/master@{#587884}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -611,7 +611,13 @@ html[dir=rtl] #custom-bg-attr {
   width: 10px;
 }
 
+#link-icon.single-attr {
+  background-size: 16px 16px;
+  height: 18px;
+  width: 16px;
+}
+
 html[dir=rtl] #link-icon {
-  margin-right: auto;
   margin-left: 8px;
-}
+  margin-right: auto;
+}
\ No newline at end of file

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -125,6 +125,7 @@ customBackgrounds.CLASSES = {
   SELECTED_BORDER: 'selected-border',
   SELECTED_CHECK: 'selected-check',
   SELECTED_CIRCLE: 'selected-circle',
+  SINGLE_ATTR: 'single-attr'
 };
 
 /**
@@ -236,24 +237,27 @@ customBackgrounds.setAttribution = function(
   var attributionBox = $(customBackgrounds.IDS.ATTRIBUTIONS);
   var attr1 = document.createElement('div');
   var attr2 = document.createElement('div');
-  if (attributionLine1 != '') {
+  if (attributionLine1 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr1.textContent = attributionLine1;
     attr1.classList.add(customBackgrounds.CLASSES.ATTR_1);
     $(customBackgrounds.IDS.ATTRIBUTIONS).appendChild(attr1);
   }
-  if (attributionLine2 != '') {
+  if (attributionLine2 !== '') {
     // Shouldn't be changed from textContent for security assurances.
     attr2.textContent = attributionLine2;
     attr2.classList.add(customBackgrounds.CLASSES.ATTR_2);
     attributionBox.appendChild(attr2);
   }
-  if (attributionActionUrl != '') {
-    var attr = (attributionLine2 != '' ? attr2 : attr1);
+  if (attributionActionUrl !== '') {
+    var attr = (attributionLine2 !== '' ? attr2 : attr1);
     attr.classList.add(customBackgrounds.CLASSES.ATTR_LINK);
 
     var linkIcon = document.createElement('div');
     linkIcon.id = customBackgrounds.IDS.LINK_ICON;
+    // Enlarge link-icon when there is only one line of attribution
+    if (attributionLine2 === '')
+      linkIcon.classList.add(customBackgrounds.CLASSES.SINGLE_ATTR);
     attr.insertBefore(linkIcon, attr.firstChild);
 
     attributionBox.classList.add(customBackgrounds.CLASSES.ATTR_LINK);