PDF WebUI: replace paper-button with cr-button

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

chrome/browser/resources/pdf/elements/viewer-error-screen/viewer-error-screen.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="viewer-error-screen">
   <template>
-    <style include="paper-button-style cr-hidden-style"></style>
+    <style include="cr-hidden-style"></style>
     <cr-dialog id="dialog" no-cancel>
       <div slot="title">[[strings.errorDialogTitle]]</div>
       <div slot="body">[[strings.pageLoadFailed]]</div>
       <div slot="button-container" hidden$="[[!reloadFn]]">
-        <paper-button class="action-button" on-click="reload">
+        <cr-button class="action-button" on-click="reload">
           [[strings.pageReload]]
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>

chrome/browser/resources/pdf/elements/viewer-form-warning/viewer-form-warning.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="viewer-form-warning">
   <template>
-    <style include="paper-button-style cr-hidden-style"></style>
+    <style include="cr-hidden-style"></style>
     <cr-dialog id="dialog" no-cancel>
       <div slot="title">[[strings.annotationFormWarningTitle]]</div>
       <div slot="body">[[strings.annotationFormWarningDetail]]</div>
       <div slot="button-container">
-        <paper-button class="cancel-button" on-click="onCancel">
+        <cr-button class="cancel-button" on-click="onCancel">
           [[strings.annotationFormWarningKeepEditing]]
-        </paper-button>
-        <paper-button class="action-button" on-click="onAction">
+        </cr-button>
+        <cr-button class="action-button" on-click="onAction">
           [[strings.annotationFormWarningDiscard]]
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>

chrome/browser/resources/pdf/elements/viewer-password-screen/viewer-password-screen.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.html">
-<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 
 <dom-module id="viewer-password-screen">
   <template>
-    <style include="cr-shared-style paper-button-style">
+    <style include="cr-shared-style">
       #password {
         margin-top: var(--cr-form-field-bottom-spacing);
       }
@@ -26,9 +25,9 @@
         </cr-input>
       </div>
       <div slot="button-container">
-        <paper-button id="submit" class="action-button" on-click="submit">
+        <cr-button id="submit" class="action-button" on-click="submit">
           [[strings.passwordSubmit]]
-        </paper-button>
+        </cr-button>
       </div>
     </cr-dialog>
   </template>

chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown/viewer-toolbar-dropdown.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icon_button/cr_icon_button.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 
@@ -49,23 +49,11 @@
       }
 
       #button {
-        border-radius: 4px;
-        cursor: pointer;
-        display: inline-block;
-        height: 32px;
+        --cr-icon-button-color: currentColor;
+        --cr-icon-button-height: 32px;
+        --cr-icon-button-icon-start-offset: 4px;
+        --cr-icon-button-width: 48px;
         margin: 0;
-        min-width: 48px;
-        opacity: 0.38;
-        padding-bottom: 6px;
-        padding-inline-end: 2px;
-        padding-inline-start: 6px;
-        padding-top: 6px;
-        width: 48px;
-      }
-
-      #button:focus {
-        background-color: rgba(255, 255, 255, 0.24);
-        opacity: 1;
       }
 
       #button:hover {
@@ -89,11 +77,9 @@
         padding: 14px 28px;
       }
     </style>
-    <paper-button on-click="toggleDropdown" id="button"
-         aria-label$="{{header}}" title$="{{header}}">
-      <iron-icon icon="[[dropdownIcon]]"></iron-icon>
-      <iron-icon icon="cr:arrow-drop-down"></iron-icon>
-    </paper-button>
+    <cr-icon-button on-click="toggleDropdown" id="button"
+        iron-icon="[[dropdownIcon]],cr:arrow-drop-down" title$="[[header]]">
+    </cr-icon-button>
 
     <div id="container">
       <div id="dropdown" style="display: none">

chrome/test/data/webui/cr_elements/cr_icon_button_tests.js

@@ -77,4 +77,22 @@ suite('cr-icon-button', function() {
     button = document.body.querySelector('cr-icon-button');
     assertEquals('-1', button.getAttribute('tabindex'));
   });
+
+  test('ripple is a circle with background icon or single iron-icon', () => {
+    const ripple = button.getRipple();
+    assertEquals(undefined, button.ironIcon);
+    assertTrue(ripple.classList.contains('circle'));
+    button.ironIcon = 'icon';
+    assertTrue(ripple.classList.contains('circle'));
+    button.ironIcon = 'icon,icon';
+    assertFalse(ripple.classList.contains('circle'));
+  });
+
+  test('multiple iron icons', () => {
+    button.ironIcon = 'icon1,icon2';
+    const elements = button.shadowRoot.querySelectorAll('iron-icon');
+    assertEquals(2, elements.length);
+    assertEquals('icon1', elements[0].icon);
+    assertEquals('icon2', elements[1].icon);
+  });
 });

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.html

@@ -9,26 +9,28 @@
     <style>
       :host {
         --cr-icon-button-color: var(--google-grey-refresh-700);
-        --cr-icon-button-icon-padding:  calc((var(--cr-icon-button-size) -
-            var(--cr-icon-button-icon-size)) / 2);
+        --cr-icon-button-icon-start-offset: 0;
         --cr-icon-button-icon-size: 20px;
         --cr-icon-button-size: 36px;
+        --cr-icon-button-height: var(--cr-icon-button-size);
+        --cr-icon-button-width: var(--cr-icon-button-size);
         /* Copied from paper-fab.html. Prevents square touch highlight. */
         -webkit-tap-highlight-color: transparent;
         background-position: center;
         background-repeat: no-repeat;
         background-size: var(--cr-icon-button-icon-size);
+        border-radius: 4px;
         color: var(--cr-icon-button-color);
         cursor: pointer;
         display: inline-flex;
-        height: var(--cr-icon-button-size);
+        height: var(--cr-icon-button-height);
         margin-inline-end: var(--cr-icon-button-margin-end,
             var(--cr-icon-ripple-margin));
         margin-inline-start: var(--cr-icon-button-margin-start);
         outline: none;
         user-select: none;
         vertical-align: middle;
-        width: var(--cr-icon-button-size);
+        width: var(--cr-icon-button-width);
       }
 
       :host([disabled]) {
@@ -59,17 +61,20 @@
       }
 
       #icon {
+        align-items: center;
+        border-radius: 4px;
         display: flex;
-        height: var(--cr-icon-button-size);
+        height: 100%;
+        justify-content: center;
+        padding-inline-start: var(--cr-icon-button-icon-start-offset);
         /* The |_rippleContainer| must be position relative. */
         position: relative;
-        width: var(--cr-icon-button-size);
+        width: 100%;
       }
 
       iron-icon {
         --iron-icon-height: var(--cr-icon-button-icon-size);
         --iron-icon-width: var(--cr-icon-button-icon-size);
-        padding: var(--cr-icon-button-icon-padding);
       }
     </style>
     <div id="icon"></div>

ui/webui/resources/cr_elements/cr_icon_button/cr_icon_button.js

@@ -102,18 +102,20 @@ Polymer({
 
   /** @private */
   onIronIconChanged_: function() {
-    let ironIconElement = this.$$('iron-icon');
-    if (this.ironIcon) {
-      if (!ironIconElement) {
-        ironIconElement = document.createElement('iron-icon');
-        this.$.icon.appendChild(ironIconElement);
-      }
-      ironIconElement.icon = this.ironIcon;
+    this.shadowRoot.querySelectorAll('iron-icon').forEach(el => el.remove());
+    if (!this.ironIcon) {
       return;
     }
-
-    if (ironIconElement) {
-      ironIconElement.remove();
+    const icons = (this.ironIcon || '').split(',');
+    icons.forEach(icon => {
+      const element = document.createElement('iron-icon');
+      element.icon = icon;
+      this.$.icon.appendChild(element);
+    });
+    if (icons.length > 1) {
+      this.getRipple().classList.remove('circle');
+    } else {
+      this.getRipple().classList.add('circle');
     }
   },
 
@@ -158,7 +160,9 @@ Polymer({
     const ripple = Polymer.PaperRippleBehavior._createRipple();
     ripple.id = 'ink';
     ripple.setAttribute('recenters', '');
-    ripple.classList.add('circle');
+    if (!(this.ironIcon || '').includes(',')) {
+      ripple.classList.add('circle');
+    }
     return ripple;
   },
 });