Print Preview WebUI: replace paper-icon-button* with cr-icon-button

Bug: 736891
Change-Id: I0f0aaa2450fc430aeab26b7322447b9c00a35046
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1565244
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#650529}

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
@@ -16,7 +17,6 @@
 <link rel="import" href="chrome://resources/html/md_select_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../metrics.html">
 <link rel="import" href="../native_layer.html">
@@ -112,8 +112,8 @@
       }
 
       #cloudPrintClose {
-        --cr-icon-ripple-size: 20px;
-        --cr-icon-size: 16px;
+        --cr-icon-button-size: 20px;
+        --cr-icon-button-icon-size: 16px;
         margin-inline-start: 16px;
         min-height: 14px;
         min-width: 14px;
@@ -194,9 +194,8 @@
                 cloudPrintPromoDismissed_, cloudPrintState)]]">
           <iron-icon icon="print-preview:cloud-queue" alt=""></iron-icon>
           <div class="promo-text"></div>
-          <paper-icon-button-light id="cloudPrintClose" class="icon-clear">
-            <button on-click="onCloudPrintPromoDismissed_"></button>
-          </paper-icon-button-light>
+          <cr-icon-button id="cloudPrintClose" class="icon-clear"
+              on-click="onCloudPrintPromoDismissed_"></cr-icon-button>
         </div>
         <div class="promo" id="invitationPromo" hidden="[[!invitation_]]">
           <div inner-h-t-m-l="[[getInvitationText_(invitation_)]]"></div>

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="../data/destination.html">
@@ -13,13 +14,11 @@
         display: block;
       }
 
-      :host paper-icon-button-light {
-        --cr-paper-icon-button-margin: {
-          margin-inline-end: -2px;
-          margin-inline-start: 0;
-        };
-        --cr-icon-size: 16px;
-        --cr-icon-ripple-size: 28px;
+      :host cr-icon-button {
+        --cr-icon-button-icon-size: 16px;
+        --cr-icon-button-margin-end: -2px;
+        --cr-icon-button-margin-start: 0;
+        --cr-icon-button-size: 28px;
       }
 
       .link:not([actionable]) {
@@ -56,12 +55,10 @@
          hidden$="[[!shouldShowSystemDialogLink_]]"
          on-click="onSystemDialogClick_">
       <div class="label">$i18n{systemDialogOption}</div>
-      <paper-icon-button-light actionable class="icon-external"
-          hidden$="[[openingSystemDialog_]]">
-        <button disabled="[[systemDialogLinkDisabled_]]"
-            aria-label="$i18n{systemDialogOption}">
-        </button>
-      </paper-icon-button-light>
+      <cr-icon-button actionable class="icon-external"
+          hidden$="[[openingSystemDialog_]]"
+          disabled="[[systemDialogLinkDisabled_]]"
+          aria-label="$i18n{systemDialogOption}"></cr-icon-button>
       <div id="systemDialogThrobber" hidden$="[[!openingSystemDialog_]]"
           class="throbber"></div>
     </div>
@@ -69,12 +66,9 @@
     <div class="link" id="openPdfInPreviewLink" actionable$="[[!disabled]]"
         on-click="onOpenInPreviewClick_">
       <div class="label">$i18n{openPdfInPreviewOption}</div>
-      <paper-icon-button-light actionable class="icon-external"
-          hidden$="[[openingInPreview_]]">
-        <button disabled="[[disabled]]"
-            aria-label="$i18n{openPdfInPreviewOption}">
-        </button>
-      </paper-icon-button-light>
+      <cr-icon-button actionable class="icon-external"
+          hidden$="[[openingInPreview_]]" disabled="[[disabled]]"
+          aria-label="$i18n{openPdfInPreviewOption}"></cr-icon-button>
       <div id="openPdfInPreviewThrobber" hidden$="[[!openingInPreview_]]"
           class="throbber"></div>
     </div>

chrome/test/data/webui/print_preview/link_container_test.js

@@ -72,7 +72,7 @@ cr.define('link_container_test', function() {
       const validateLinkState = (link, disabled) => {
         assertFalse(link.hidden);
         assertEquals(!disabled, link.hasAttribute('actionable'));
-        assertEquals(disabled, link.querySelector('button').disabled);
+        assertEquals(disabled, link.querySelector('cr-icon-button').disabled);
       };
 
       validateLinkState(systemDialogLink, false);

chrome/test/data/webui/print_preview/system_dialog_browsertest.js

@@ -114,7 +114,7 @@ cr.define('system_dialog_browsertest', function() {
             assertTrue(printButton.disabled);
             assertTrue(linkContainer.disabled);
             assertFalse(link.hidden);
-            assertTrue(link.querySelector('button').disabled);
+            assertTrue(link.querySelector('cr-icon-button').disabled);
 
             // No new preview
             assertEquals(previewCalls, nativeLayer.getCallCount('getPreview'));