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

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

Index: chrome/browser/resources/settings/printing_page/cups_printers.html
diff --git a/chrome/browser/resources/settings/printing_page/cups_printers.html b/chrome/browser/resources/settings/printing_page/cups_printers.html
index 83949a7796423c5d78a7b613713aa1e3ebdc893d..9a0f8bbb616126b2327a440b24079d28ec2ff52e 100644
--- a/chrome/browser/resources/settings/printing_page/cups_printers.html
+++ b/chrome/browser/resources/settings/printing_page/cups_printers.html
@@ -3,6 +3,7 @@
 <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">
@@ -18,6 +19,15 @@
         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;
@@ -48,15 +58,13 @@
     </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>