[NTP] Update selected tile state

When a background tile is selected apply the proper border and check
mark. Then remove this stlying when the tile is de-selected.

Bug: 850675
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ib1b05121bc6beaae5af6591e3963d59584a1f2af
Reviewed-on: https://chromium-review.googlesource.com/1110352Reviewed-by: Marc Treib <treib@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569622}

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -244,10 +244,25 @@
 }
 
 .bg-selected {
-  border: 3px solid rgb(172, 206, 247);
-  border-radius: 3px;
-  height: 111px;
-  width: 150px;
+  border-radius: 4px;
+}
+
+.selected-border {
+  border: 2px solid rgba(26, 115, 232, .4);
+  border-radius: 4px;
+  height: 113px;
+  width: 152px;
+}
+
+.selected-check {
+  background: #FFF url(../../../../ui/webui/resources/images/check_circle.svg) no-repeat center;
+  background-size: 24px 24px;
+  border-radius: 50%;
+  display: block;
+  height: 20px;
+  margin-left: 66px;
+  margin-top: 46px;
+  width: 20px;
 }
 
 .bg-sel-tile-title {

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -60,6 +60,8 @@ customBackgrounds.CLASSES = {
   COLLECTION_TITLE: 'bg-sel-tile-title',  // Title of a background image
   DONE_AVAILABLE: 'done-available',
   IMAGE_DIALOG: 'is-img-sel',
+  SELECTED_BORDER: 'selected-border',
+  SELECTED_CHECK: 'selected-check',
   SHOW_OVERLAY: 'show-overlay',
 };
 
@@ -175,6 +177,28 @@ customBackgrounds.showCollectionSelectionDialog = function() {
   };
 };
 
+/**
+ * Apply border and checkmark when a tile is selected
+ * @param {div} tile The tile to apply styling to.
+ */
+customBackgrounds.applySelectedState = function(tile) {
+  tile.classList.add(customBackgrounds.CLASSES.COLLECTION_SELECTED);
+  var selectedBorder = document.createElement('div');
+  var selectedCheck = document.createElement('div');
+  selectedBorder.classList.add(customBackgrounds.CLASSES.SELECTED_BORDER);
+  selectedCheck.classList.add(customBackgrounds.CLASSES.SELECTED_CHECK);
+  selectedBorder.appendChild(selectedCheck);
+  tile.appendChild(selectedBorder);
+};
+
+/**
+ * Remove border and checkmark when a tile is un-selected
+ * @param {div} tile The tile to remove styling from.
+ */
+customBackgrounds.removeSelectedState = function(tile) {
+  tile.classList.remove(customBackgrounds.CLASSES.COLLECTION_SELECTED);
+  tile.removeChild(tile.firstChild);
+};
 
 /**
  * Show dialog for selecting an image or toggling on daily refresh. Image
@@ -207,12 +231,12 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
     var tileInteraction = function(event) {
       var tile = event.target;
       if (selectedTile) {
-        selectedTile.classList.remove(
-            customBackgrounds.CLASSES.COLLECTION_SELECTED);
+        customBackgrounds.removeSelectedState(selectedTile);
       }
-      tile.classList.add(customBackgrounds.CLASSES.COLLECTION_SELECTED);
       selectedTile = tile;
 
+      customBackgrounds.applySelectedState(tile);
+
       // Turn toggle off when an image is selected.
       $(customBackgrounds.IDS.REFRESH_TOGGLE).children[0].checked = false;
       $(customBackgrounds.IDS.DONE)
@@ -235,8 +259,7 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
 
   dailyRefresh.onclick = function(event) {
     if (selectedTile) {
-      selectedTile.classList.remove(
-          customBackgrounds.CLASSES.COLLECTION_SELECTED);
+      customBackgrounds.removeSelectedState(selectedTile);
       selectedTile = null;
     }
     $(customBackgrounds.IDS.DONE)