Print Preview Componentization: promo close button fixes

Make sure the promo close button is in the tab order, and shows the
correct image when focused with the keyboard.

Bug: 866420
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Id8054203f5917fc72f187c33a826d29817fd3b18
Reviewed-on: https://chromium-review.googlesource.com/1147254
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577579}

chrome/browser/resources/print_preview/new/destination_dialog.html

@@ -85,27 +85,33 @@
         width: 24px;
       }
 
-      :host #cloudprintPromo .close-button {
+      :host #cloudprintPromo button {
         -webkit-margin-start: 12px;
+        background-color: #f5f5f5;
         background-image: -webkit-image-set(
           url(chrome://theme/IDR_CLOSE_DIALOG) 1x,
           url(chrome://theme/IDR_CLOSE_DIALOG@2x) 2x);
         background-repeat: no-repeat;
         background-size: 14px;
-        height: 14px;
-        width: 14px;
+        border: none;
+        box-shadow: none;
+        min-height: 14px;
+        min-width: 14px;
+        outline: none;
+        padding: 0;
       }
 
-      :host #cloudprintPromo .close-button:hover {
+      :host #cloudprintPromo button:active {
         background-image: -webkit-image-set(
-          url(chrome://theme/IDR_CLOSE_DIALOG_H) 1x,
-          url(chrome://theme/IDR_CLOSE_DIALOG_H@2x) 2x);
+          url(chrome://theme/IDR_CLOSE_DIALOG_P) 1x,
+          url(chrome://theme/IDR_CLOSE_DIALOG_P@2x) 2x);
       }
 
-      :host #cloudprintPromo .close-button:active {
+      :host #cloudprintPromo button:focus,
+      :host #cloudprintPromo button:hover {
         background-image: -webkit-image-set(
-          url(chrome://theme/IDR_CLOSE_DIALOG_P) 1x,
-          url(chrome://theme/IDR_CLOSE_DIALOG_P@2x) 2x);
+          url(chrome://theme/IDR_CLOSE_DIALOG_H) 1x,
+          url(chrome://theme/IDR_CLOSE_DIALOG_H@2x) 2x);
       }
 
       :host #invitationPromo {
@@ -176,7 +182,7 @@
             hidden$="[[!showCloudPrintPromo]]">
           <img src="../images/cloud.png" class="icon" alt="">
           <div class="promo-text"></div>
-          <div class="close-button"></div>
+          <button on-click="onCloudPrintPromoDismissed_"></button>
         </div>
         <div class="promo" id="invitationPromo" hidden="[[!invitation_]]">
           <div inner-h-t-m-l="[[getInvitationText_(invitation_)]]"></div>

chrome/browser/resources/print_preview/new/destination_dialog.js

@@ -100,9 +100,6 @@ Polymer({
   attached: function() {
     this.tracker_.add(
         assert(this.$$('.sign-in')), 'click', this.onSignInClick_.bind(this));
-    this.tracker_.add(
-        assert(this.$$('#cloudprintPromo > .close-button')), 'click',
-        this.onCloudPrintPromoDismissed_.bind(this));
   },
 
   /**