Revert "WebUI MD Refresh: Update paper-button styling up to spec."

This reverts commit bf799ef8.

Reason for revert:
Breaks CrSettingsIncompatibleApplicationsPageTest test in official builds.

Google internal failing bot:
https://uberchromegw.corp.google.com/i/official.desktop.continuous/builders/win%20trunk/builds/83282

Externally visible Clang ToT official bot:
https://ci.chromium.org/buildbot/chromium.clang/ToTWin64/1359

Original change's description:
> 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: I8558db8ffd121ad09b100f8ba6ab4d843022f73f
> Reviewed-on: https://chromium-review.googlesource.com/1013330
> Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
> Reviewed-by: Scott Chen <scottchen@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#553382}

TBR=dpapad@chromium.org,scottchen@chromium.org

Change-Id: I0489c01e20af79b61db0e9ce1fdc2f292c178c98
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Bug: 832173
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Reviewed-on: https://chromium-review.googlesource.com/1028371Reviewed-by: Reid Kleckner <rnk@chromium.org>
Commit-Queue: Reid Kleckner <rnk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#553600}

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

@@ -45,7 +45,7 @@
         </div>
       </div>
       <div class="separator"></div>
-      <paper-button class="action-button" id="changePassword"
+      <paper-button class="primary-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="action-button"
+        <paper-button id="action-button" class="primary-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="action-button" id="addShare"
+      <paper-button class="primary-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="action-button" on-click="onActionTap_">
+      <paper-button class="primary-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="action-button" on-click="onConnectTap_"
+      <paper-button class="primary-button" on-click="onConnectTap_"
           hidden$="[[!showConnect_(networkProperties, globalPolicy)]]"
           disabled="[[!enableConnect_(networkProperties, defaultNetwork,
               globalPolicy, networkPropertiesReceived_, outOfRange_)]]">
         $i18n{networkButtonConnect}
       </paper-button>
-      <paper-button class="action-button" on-click="onDisconnectTap_"
+      <paper-button class="primary-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 .action-button:not([hidden])') ||
+      const button = this.$$('#titleDiv .primary-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="action-button" on-click="onSigninTap_"
+                <paper-button class="primary-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="action-button" id="addPrinter"
+      <paper-button class="primary-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,8 +53,6 @@
       #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,6 +69,13 @@
         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);
@@ -96,6 +103,16 @@
         -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);

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -8,72 +8,18 @@
   <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: initial;
-          border-color: var(--flat-keyboard-focus-border-color);
-          font-weight: 500;
+          background: rgba(0, 0, 0, .12);
         };
-
-        --paper-button-ink-color: var(--paper-grey-600);
-
-        border: 1px solid rgb(218, 220, 224);
-        border-radius: 4px;
-        color: var(--text-or-bg-color);
+        -webkit-padding-end: var(--cr-button-edge-spacing);
+        -webkit-padding-start: var(--cr-button-edge-spacing);
+        color: var(--paper-grey-600);
         flex-shrink: 0;
-        font-size: 12px;
         font-weight: 500;
         height: 36px;
         margin: 0;
-        padding: 8px 16px;
+        min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
         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,6 +8,33 @@
 <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;
       }