File Manager WebUI: replace paper-button with cr-button

Bug: 967793
Change-Id: I670edee44a43173c31fa0f53b4ee00d7947897b0
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1649067Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#668494}

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -280,7 +280,7 @@ body[type='open-multi-file'].check-select .dialog-header {
   flex: auto;
 }
 
-.dialog-header paper-button,
+.dialog-header cr-button,
 .dialog-header button {
   border-radius: 2px;
   height: 32px;
@@ -333,7 +333,7 @@ body.check-select .dialog-header
   width: 16px;
 }
 
-.dialog-header paper-button {
+.dialog-header cr-button {
   line-height: 32px;
   padding: 0 8px;
 }
@@ -575,18 +575,23 @@ html[dir='rtl'] #cloud-import-details {
   width: 0;
 }
 
-#cloud-import-details paper-button {
+#cloud-import-details cr-button {
+  --ink-color: white;
   align-self: flex-end;
+  border: none;
+  box-shadow: none;
   color: white;
   font-weight: 500;
   margin-top: 20px;
+  padding: 0;
+  text-transform: uppercase;
 }
 
-#cloud-import-details paper-button.import {
+#cloud-import-details cr-button.import {
   background-color: rgb(51, 103, 214);
 }
 
-#cloud-import-details paper-button.cancel {
+#cloud-import-details cr-button.cancel {
   background-color: rgb(219, 68, 55);
 }
 
@@ -601,8 +606,16 @@ body.check-select #files-selected-label {
 }
 
 #cancel-selection-button {
+  --ink-color: currentColor;
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+  color: currentColor;
   display: flex;
-  text-transform: none;
+}
+
+#cancel-selection-button:focus:not([tabindex='-1']):not(:active) {
+  background-color: rgba(153, 153, 153, .2);
 }
 
 #cancel-selection-button > span {
@@ -780,15 +793,15 @@ html[dir='rtl'] #search-box .clear {
               0 2px 4px -1px rgba(0, 0, 0, 0.4);
 }
 
-.dialog-footer paper-button,
+.dialog-footer cr-button,
 .dialog-footer button {
   height: 32px;
   margin: 0 4px;
   min-width: 92px;
 }
 
-.dialog-footer paper-button[disabled],
-.dialog-footer paper-button[disabled]:hover,
+.dialog-footer cr-button[disabled],
+.dialog-footer cr-button[disabled]:hover,
 .dialog-footer button[disabled],
 .dialog-footer button[disabled]:hover {
   background-color: rgb(234, 234, 234);
@@ -837,7 +850,7 @@ html[dir='rtl'] #search-box .clear {
 .dialog-footer .primary:focus:not(:active),
 .dialog-footer .secondary:focus:not(:active),
 .dialog-footer select:focus:not(:active),
-#cloud-import-details paper-button.keyboard-focus {
+html.focus-outline-visible #cloud-import-details cr-button:focus {
   box-shadow: 0 0 0 2px rgba(51, 103, 214, 0.5);
 }
 

ui/file_manager/file_manager/foreground/elements/elements_bundle.html

@@ -3,9 +3,9 @@
   -- found in the LICENSE file.
   -->
 
+<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_input/cr_input.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-progress/paper-progress.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-ripple/paper-ripple.html">
 <link rel="import" href="files_ripple.html">

ui/file_manager/file_manager/foreground/elements/files_quick_view.css

@@ -43,8 +43,9 @@ dialog::backdrop {
   max-width: 100%;
 }
 
-paper-button:focus:not(:active) {
+cr-button:focus:not(:active) {
   box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
+  font-weight: bold;
 }
 
 #audio-artwork {
@@ -150,13 +151,17 @@ paper-button:focus:not(:active) {
   };
 }
 
-paper-button,
+cr-button,
 files-icon-button {
+  --ink-color: currentColor;
+  border: none;
   border-radius: 2px;
+  color: currentColor;
   height: 32px;
   margin: 0 8px;
   min-width: 32px;
   padding: 0;
+  text-transform: uppercase;
 }
 
 iron-icon {

ui/file_manager/file_manager/foreground/elements/files_quick_view.html

@@ -4,8 +4,8 @@
 -->
 
 <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/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="files_icon_button.html">
 <link rel="import" href="files_metadata_box.html">
 <link rel="import" href="files_safe_media.html">
@@ -18,15 +18,15 @@
     <dialog id="dialog" on-close="onDialogClose_">
       <div id="toolbar">
         <div class="buttons-group">
-           <paper-button on-tap="close" aria-label="$i18n{QUICK_VIEW_CLOSE_BUTTON_LABEL}" tabindex="0" has-tooltip>
+           <cr-button on-click="close" aria-label="$i18n{QUICK_VIEW_CLOSE_BUTTON_LABEL}" has-tooltip>
              <iron-icon icon="files:arrow-back"></iron-icon>
-           </paper-button>
+           </cr-button>
         </div>
         <div id="file-path">[[filePath]]</div>
         <div class="buttons-group">
-           <paper-button id="open-button" on-tap="onOpenInNewButtonTap" hidden$="[[!hasTask]]" aria-label="$i18n{QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL}" tabindex="0">
+           <cr-button id="open-button" on-click="onOpenInNewButtonTap" hidden$="[[!hasTask]]" aria-label="$i18n{QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL}">
              <span>$i18n{QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL}</span>
-           </paper-button>
+           </cr-button>
            <files-icon-button toggles id="metadata-button" on-tap="onMetadataButtonTap_" active="{{metadataBoxActive}}" aria-label="$i18n{QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL}" tabindex="0" has-tooltip>
            </files-icon-button>
         </div>

ui/file_manager/file_manager/foreground/js/import_controller.js

@@ -573,13 +573,13 @@ importer.RuntimeCommandWidget = class {
 
     /** @private @const {!HTMLElement} */
     this.importButton_ =
-        queryRequiredElement('#cloud-import-details paper-button.import');
+        queryRequiredElement('#cloud-import-details cr-button.import');
     this.importButton_.onclick =
         this.onButtonClicked_.bind(this, importer.ClickSource.IMPORT);
 
     /** @private @const {!HTMLElement} */
     this.cancelButton_ =
-        queryRequiredElement('#cloud-import-details paper-button.cancel');
+        queryRequiredElement('#cloud-import-details cr-button.cancel');
     this.cancelButton_.onclick =
         this.onButtonClicked_.bind(this, importer.ClickSource.CANCEL);
 

ui/file_manager/file_manager/main.html

@@ -360,11 +360,11 @@
     <div class="dialog-header" role="contentinfo">
       <div id="location-breadcrumbs" class="breadcrumbs"></div>
       <div id="cancel-selection-button-wrapper">
-        <paper-button id="cancel-selection-button" class="menu-button" tabindex="8"
+        <cr-button id="cancel-selection-button" class="menu-button" tabindex="8"
               aria-label="$i18n{CANCEL_SELECTION_BUTTON_LABEL}" has-tooltip>
           <span class="icon-arrow-back"></span>
           <span id="cancel-selection-label">$i18n{CANCEL_SELECTION_BUTTON_LABEL}</span>
-        </paper-button>
+        </cr-button>
       </div>
       <div id="files-selected-label"></div>
       <div class="spacer"></div>
@@ -475,12 +475,12 @@
           <div class="content"></div>
         </div>
         <div class="progress"><div class="value"></div></div>
-        <paper-button class="import" tabindex="16">
+        <cr-button class="import" tabindex="16">
           <span>$i18n{CLOUD_IMPORT_COMMAND}</span>
-        </paper-button>
-        <paper-button class="cancel" tabindex="16">
+        </cr-button>
+        <cr-button class="cancel" tabindex="16">
           <span>$i18n{CLOUD_IMPORT_CANCEL_COMMAND}</span>
-        </paper-button>
+        </cr-button>
       </div>
     </div>
 

ui/file_manager/file_manager/test/scripts/create_test_main.py

@@ -243,6 +243,8 @@ for filename, substitutions in (
   buf = buf.replace('chrome://resources/polymer/v1_0/', '../../cc/')
   buf = buf.replace('<link rel="import" href="chrome://resources/cr_elements/'
                     'cr_input/cr_input.html">', '')
+  buf = buf.replace('<link rel="import" href="chrome://resources/cr_elements/'
+                    'cr_button/cr_button.html">', '')
   buf = buf.replace('src="files_', 'src="' + elements_path('files_'))
   for old, new in substitutions:
     buf = buf.replace(old, new)