[Reland] WebUI MD Refresh: Update paper-button styling up to spec.

 - Move some styles from shared_style_css.html to paper_button_style_css.html.
 - Update paper-button styles per latest spec.
 - Collapse previously different types of buttons "primary" and "action" into a
   single button type.

Note this change is intentionally changing the shared styling for buttons. If a
certain WebUI page needs a different pre-MD refresh style, should be updated
individually to override (hopefully there are no such cases though).

Bug: 832173
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: If083bf3ad1d60623300bb9e584ae9179e815ef7d
Reviewed-on: https://chromium-review.googlesource.com/1028478Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#553689}

chrome/browser/resources/settings/change_password_page/change_password_page.html

@@ -45,7 +45,7 @@
         </div>
       </div>
       <div class="separator"></div>
-      <paper-button class="primary-button" id="changePassword"
+      <paper-button class="action-button" id="changePassword"
           on-click="changePassword_">
           $i18n{changePasswordPageButton}
       </paper-button>

chrome/browser/resources/settings/chrome_cleanup_page/chrome_cleanup_page.html

@@ -87,7 +87,7 @@
       </div>
       <template is="dom-if" if="[[showActionButton_]]">
         <div class="separator"></div>
-        <paper-button id="action-button" class="primary-button"
+        <paper-button id="action-button" class="action-button"
             on-click="proceed_">
           [[actionButtonLabel_]]
         </paper-button>

chrome/browser/resources/settings/downloads_page/smb_shares_page.html

@@ -22,7 +22,7 @@
           $i18n{requireNetworkMessage}
         </div>
       </div>
-      <paper-button class="primary-button" id="addShare"
+      <paper-button class="action-button" id="addShare"
           on-click="onAddShareTap_">
         $i18n{addSmbShare}
       </paper-button>

chrome/browser/resources/settings/incompatible_applications_page/incompatible_application_item.html

@@ -16,7 +16,7 @@
     <div class="list-item">
       <div class="start">[[applicationName]]</div>
       <div class="separator"></div>
-      <paper-button class="primary-button" on-click="onActionTap_">
+      <paper-button class="action-button" on-click="onActionTap_">
         [[getActionName_(actionType)]]
       </paper-button>
     </div>

chrome/browser/resources/settings/internet_page/internet_detail_page.html

@@ -98,13 +98,13 @@
           $i18n{networkButtonConfigure}
         </paper-button>
       </template>
-      <paper-button class="primary-button" on-click="onConnectTap_"
+      <paper-button class="action-button" on-click="onConnectTap_"
           hidden$="[[!showConnect_(networkProperties, globalPolicy)]]"
           disabled="[[!enableConnect_(networkProperties, defaultNetwork,
               globalPolicy, networkPropertiesReceived_, outOfRange_)]]">
         $i18n{networkButtonConnect}
       </paper-button>
-      <paper-button class="primary-button" on-click="onDisconnectTap_"
+      <paper-button class="action-button" on-click="onDisconnectTap_"
           hidden$="[[!showDisconnect_(networkProperties)]]">
         $i18n{networkButtonDisconnect}
       </paper-button>

chrome/browser/resources/settings/internet_page/internet_detail_page.js

@@ -246,7 +246,7 @@ Polymer({
     if (!this.didSetFocus_) {
       // Focus a button once the initial state is set.
       this.didSetFocus_ = true;
-      const button = this.$$('#titleDiv .primary-button:not([hidden])') ||
+      const button = this.$$('#titleDiv .action-button:not([hidden])') ||
           this.$$('#titleDiv paper-button:not([hidden])');
       if (button)
         button.focus();

chrome/browser/resources/settings/people_page/people_page.html

@@ -176,7 +176,7 @@
 <if expr="not chromeos">
               <template is="dom-if" if="[[showSignin_(syncStatus)]]">
                 <div class="separator"></div>
-                <paper-button class="primary-button" on-click="onSigninTap_"
+                <paper-button class="action-button" on-click="onSigninTap_"
                     disabled="[[syncStatus.setupInProgress]]">
                   $i18n{syncSignin}
                 </paper-button>

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

@@ -67,7 +67,7 @@
             pref="[[prefs.native_printing.user_native_printers_allowed]]">
         </cr-policy-pref-indicator>
       </template>
-      <paper-button class="primary-button" id="addPrinter"
+      <paper-button class="action-button" id="addPrinter"
           on-click="onAddPrinterTap_"
           disabled="[[!addPrinterButtonActive_(canAddPrinter_,
               prefs.native_printing.user_native_printers_allowed.value)]]">

chrome/browser/resources/settings/settings_menu/settings_menu.html

@@ -53,6 +53,8 @@
       #advancedButton {
         -webkit-padding-end: 0;
         background-color: unset;
+        border: none;
+        border-radius: initial;
         height: unset;
         margin-top: 8px;
         text-transform: none;

chrome/browser/resources/settings/settings_shared_css.html

@@ -69,13 +69,6 @@
         flex-direction: column;
       }
 
-      /* Customize the disabled state of paper buttons within a settings box. */
-      .settings-box paper-button[disabled] {
-        background: none;
-        color: black;
-        opacity: 0.26;
-      }
-
       /* For "Advanced" toggle button. */
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
@@ -103,16 +96,6 @@
         -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
       }
 
-      /* There are two settings button styles, .primary-button and normal
-       * buttons. The primary is the action button (e.g. "edit", "delete")
-       * while the normal (secondary-button) is often a "Cancel" button. */
-      .primary-button:not([disabled]) {
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(51, 103, 214, .12);  /* --google-blue-700 */
-        };
-        color: var(--google-blue-500);
-      }
-
       paper-toggle-button {
         @apply --settings-actionable;
         height: var(--settings-row-min-height);

chrome/test/data/webui/settings/incompatible_applications_page_test.js

@@ -164,7 +164,7 @@ suite('incompatibleApplicationsHandler', function() {
           // visible.
           let item = incompatibleApplicationsPage.$$(
               '.incompatible-application:not([hidden])');
-          item.$$('.primary-button').click();
+          item.$$('.action-button').click();
 
           return incompatibleApplicationsBrowserProxy.whenCalled(
               'startProgramUninstallation');
@@ -190,7 +190,7 @@ suite('incompatibleApplicationsHandler', function() {
           // visible.
           let item = incompatibleApplicationsPage.$$(
               '.incompatible-application:not([hidden])');
-          item.$$('.primary-button').click();
+          item.$$('.action-button').click();
 
           return incompatibleApplicationsBrowserProxy.whenCalled('openURL');
         })

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -8,18 +8,72 @@
   <template>
     <style>
       paper-button {
+        /* Gray color to be used when disabled, either as a background or as a
+           text color depending on the type of button. */
+        --disabled-color: rgb(241, 243, 244);
+        --flat-keyboard-focus-border-color: rgba(26, 115, 232, 0.4);
+        /* Blue-ish color used either as a background or as a text color,
+           depending on the type of button. */
+        --text-or-bg-color: rgb(26, 115, 232);
+
         --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
+          background: initial;
+          border-color: var(--flat-keyboard-focus-border-color);
+          font-weight: 500;
         };
-        -webkit-padding-end: var(--cr-button-edge-spacing);
-        -webkit-padding-start: var(--cr-button-edge-spacing);
-        color: var(--paper-grey-600);
+
+        --paper-button-ink-color: var(--paper-grey-600);
+
+        border: 1px solid rgb(218, 220, 224);
+        border-radius: 4px;
+        color: var(--text-or-bg-color);
         flex-shrink: 0;
+        font-size: 12px;
         font-weight: 500;
         height: 36px;
         margin: 0;
-        min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
+        padding: 8px 16px;
         text-decoration: none;
+        text-transform: none;
+      }
+
+      paper-button:not(.action-button):hover {
+        background-color: rgba(66,133,244, 0.04);
+        border-color: rgb(210, 227, 252);
+      }
+
+      paper-button.action-button {
+        /** TODO(dpapad): Get exact value from UX. */
+        --paper-button-ink-color: rgb(26, 115, 252);
+        background: var(--text-or-bg-color) padding-box;
+        border-color: transparent;
+        color: white;
+        --paper-button-flat-keyboard-focus: {
+          background: var(--text-or-bg-color) padding-box;
+          border-color: var(--flat-keyboard-focus-border-color);
+          font-weight: 500;
+        };
+      }
+
+      paper-button[disabled] {
+        background-color: white;
+        border-color: var(--disabled-color);
+        color: rgb(128, 134, 139);
+      }
+
+      paper-button.action-button[disabled] {
+        background-color: var(--disabled-color);
+        border-color: transparent;
+      }
+
+      /* cancel-button is meant to be used within a cr-dialog */
+      paper-button.cancel-button {
+        -webkit-margin-end: 8px;
+      }
+
+      paper-button.action-button,
+      paper-button.cancel-button {
+        line-height: 154%;
       }
     </style>
   </template>

ui/webui/resources/cr_elements/shared_style_css.html

@@ -8,33 +8,6 @@
 <dom-module id="cr-shared-style">
   <template>
     <style include="cr-hidden-style cr-icons">
-      .action-button {
-        background: var(--google-blue-500);
-        color: white;
-        --paper-button-flat-keyboard-focus: {
-          background: rgb(58, 117, 215);  /* 88% of --google-blue-500 */
-        };
-      }
-
-      .action-button[disabled] {
-        opacity: .2;
-      }
-
-      .cancel-button {
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
-        };
-        -webkit-margin-end: 8px;
-        color: var(--paper-grey-600);
-      }
-
-      .action-button,
-      .cancel-button {
-        font-weight: 500;
-        line-height: 154%;
-        padding: 8px 16px;
-      }
-
       [actionable] {
         @apply --cr-actionable;
       }