[CUPS] Modify the "Add Printer" link to a button.

chrome/browser/resources/settings/printing_page/cups_printers.html

 <link rel="import" href="chrome://resources/html/action_link.html">
 <link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.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="cups_add_printer_dialog.html">
 <link rel="import" href="cups_printers_list.html">
 <link rel="import" href="../settings_shared_css.html">
 
 <dom-module id="settings-cups-printers">
   <template>
     <style include="settings-shared action-link">
       .settings-box .start {
         color: var(--paper-grey-600);
       }
 
       .settings-box .start .secondary {
         color: var(--paper-grey-800);
         font-size: 92.31%;  /* 12px / 13px */
       }
+      
+      paper-button {

[michaelpg, 2017/05/05 22:53:38]

What does this do differently that it needs to look different than other
Settings buttons? settings_shared_css.html has styling options -- would the
primary-button class work?

[xdai1, 2017/05/06 00:02:42]

I didn't notice that there was pre-defined "primary-button" class in the code
base. However, when I tried to apply the class to the button as you suggested, I
encountered a problem that I don't know how to solve and I hope you can give me
some suggestion. 

Since this button needs to be on the right side of the page, I used
"margin-left: auto" to implement this: use this in a flex container can push a
flex item to right (see https://www.w3.org/TR/css-flexbox-1/#auto-margins). But
if I apply the class "primary-button" to the button, it inherits a property
"-webkit-margin-start" from "primary-button" which prevents "margin-left: auto"
from working here. Overriding this property seems not working. The only way to
make "margin-left: auto" work is to remove "-webkit-margin-start" from the class
"primary-button". 

[michaelpg, 2017/05/06 01:21:50]

try -webkit-margin-start: auto instead of margin-left (i would recommend that
anyway, as the RTL-friendly version)

[xdai1, 2017/05/08 17:20:42]

It worked, thanks a lot!

+        --paper-button-flat-keyboard-focus: {
+          font-weight: 500;
+        };
+        color: var(--google-blue-500);
+        font-weight: 500;
+        margin-left: auto;
+      }
 
       #message {
         display: flex;
         justify-content: center;
         position: absolute;
         top: 85%;
         width: 100%;
       }
 
       .center {
@@ skipping 10 matching lines @@
         display: flex;
         justify-content: space-around;
       }
 
       #addPrinterErrorMessage a[is='action-link'] {
         text-transform: uppercase;
       }
     </style>
 
     <div class="settings-box first">
-      <a id="addPrinter" is="action-link" on-tap="onAddPrinterTap_"
+      <paper-button id="addPrinter" on-tap="onAddPrinterTap_"
           hidden="[[!canAddPrinter_]]">
         $i18n{addCupsPrinter}
-      </a>
+      </paper-button>
       <div class="start" hidden="[[canAddPrinter_]]">
         <span>$i18n{addCupsPrinter}</span>
-        <div class="secondary">
-          $i18n{requireNetworkMessage}
-        </div>
+        <div class="secondary">$i18n{requireNetworkMessage}</div>
       </div>
     </div>
 
     <settings-cups-add-printer-dialog id="addPrinterDialog"
         on-close="onAddPrinterDialogClose_">
     </settings-cups-add-printer-dialog>
 
     <settings-cups-printers-list printers="{{printers}}"
         search-term="[[searchTerm]]">
     </settings-cups-printers-list>
 
     <div id="message">
       <div class="center" id="addPrinterDoneMessage" hidden>
         $i18n{printerAddedSuccessfulMessage}
       </div>
       <div class="center" id="addPrinterErrorMessage" hidden>
         <span>$i18n{printerAddedFailedMessage}</span>
         <a is="action-link" on-tap="onAddPrinterTap_">
           $i18n{printerAddedTryAgainMessage}
         </a>
       </div>
     </div>
   </template>
   <script src="cups_printers.js"></script>
 </dom-module>