[NTP] Remove focus ring when done button is disabled

Remove focus ring on custom background dialog's done button when it is
disabled.

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

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -418,20 +418,21 @@ html[dir=rtl] #bg-sel-footer-cancel {
   0 3px 6px 2px rgba(60, 64, 67, 0.15);
 }
 
-#bg-sel-footer-done.done-available:active {
-  box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
-      0 3px 6px 2px rgba(66, 133, 244, 0.15);
+#bg-sel-footer-done:not(:disabled) {
+  background-color: rgb(26, 115, 232);
+  color: white;
+  outline: initial;
 }
 
-#bg-sel-footer-done.done-available:hover {
+#bg-sel-footer-done:hover:not(:disabled) {
   background-color: rgb(41, 123, 231);
   box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
       0 1px 3px 1px rgba(66, 133, 244, 0.15);
 }
 
-#bg-sel-footer-done.done-available {
-  background-color: rgb(26, 115, 232);
-  color: white;
+#bg-sel-footer-done:active:not(:disabled) {
+  box-shadow: 0 1px 2px 0 rgba(66, 133, 244, 0.3),
+      0 3px 6px 2px rgba(66, 133, 244, 0.15);
 }
 
 #bg-sel-footer-toggle-text {

chrome/browser/resources/local_ntp/custom_backgrounds.js

@@ -278,8 +278,7 @@ customBackgrounds.clearAttribution = function() {
 };
 
 customBackgrounds.unselectTile = function() {
-  $(customBackgrounds.IDS.DONE)
-      .classList.remove(customBackgrounds.CLASSES.DONE_AVAILABLE);
+  $(customBackgrounds.IDS.DONE).disabled = true;
   customBackgrounds.selectedTile = null;
   $(customBackgrounds.IDS.DONE).tabIndex = -1;
 };
@@ -683,8 +682,7 @@ customBackgrounds.showImageSelectionDialog = function(dialogTitle) {
 
       // Turn toggle off when an image is selected.
       $(customBackgrounds.IDS.REFRESH_TOGGLE).children[0].checked = false;
-      $(customBackgrounds.IDS.DONE)
-          .classList.add(customBackgrounds.CLASSES.DONE_AVAILABLE);
+      $(customBackgrounds.IDS.DONE).disabled = false;
       ntpApiHandle.logEvent(BACKGROUND_CUSTOMIZATION_LOG_TYPE
                                 .NTP_CUSTOMIZE_CHROME_BACKGROUND_SELECT_IMAGE);
     };
@@ -1011,6 +1009,8 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
   $(customBackgrounds.IDS.DONE)
       .setAttribute('aria-label', configData.translatedStrings.selectionDone);
 
+  $(customBackgrounds.IDS.DONE).disabled = true;
+
   // Interactions with the "Upload an image" option.
   var uploadImageInteraction = function(event) {
     window.chrome.embeddedSearch.newTabPage.selectLocalBackgroundImage();
@@ -1176,8 +1176,7 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
 
   // Interactions with the done button on the background picker dialog.
   var doneInteraction = function(event) {
-    if (!$(customBackgrounds.IDS.DONE)
-             .classList.contains(customBackgrounds.CLASSES.DONE_AVAILABLE)) {
+    if ($(customBackgrounds.IDS.DONE).disabled) {
       return;
     }
     customBackgrounds.setBackground(
@@ -1199,8 +1198,7 @@ customBackgrounds.initCustomBackgrounds = function(showErrorNotification) {
       customBackgrounds.removeSelectedState(customBackgrounds.selectedTile);
       customBackgrounds.selectedTile = null;
     }
-    $(customBackgrounds.IDS.DONE)
-        .classList.add(customBackgrounds.CLASSES.DONE_AVAILABLE);
+    $(customBackgrounds.IDS.DONE).disabled = false;
   };
 
   // On any arrow key event in the tiles area, focus the first tile.