WebUI: move paper-button styling to shared location.

This allows WebUI sections outside of settings/ to reuse the same styles.

Bug: 740758
Change-Id: Iefbdff0b219a3ced28b02098a0f05bbe25f83357
Reviewed-on: https://chromium-review.googlesource.com/571189
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#487289}

chrome/browser/resources/md_extensions/pack_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.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="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 

chrome/browser/resources/md_extensions/shortcut_input.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://extensions/shortcut_util.html">

chrome/browser/resources/md_extensions/toolbar.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">

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

-<link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/util.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-spinner/paper-spinner.html">
@@ -42,7 +44,7 @@
       #show-files-button {
         --paper-button-ink-color: white;
         /* Left-align the text of the button with the rest of the card's text */
-        -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
         color: var(--google-blue-700);
         text-transform: inherit;
       }

chrome/browser/resources/settings/controls/controlled_button.html

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_indicator.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="pref_control_behavior.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -13,8 +14,8 @@
     <style include="settings-shared">
       :host {
         --justify-margin: 8px;
-        -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
-        -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-end: calc(var(--cr-button-edge-spacing) * -1);
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
         align-items: center;
         display: flex;
       }

chrome/browser/resources/settings/settings_shared_css.html

+<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="settings_icons_css.html">
 <link rel="import" href="settings_vars_css.html">
@@ -5,7 +7,7 @@
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
-    <style include="settings-icons cr-shared-style">
+    <style include="settings-icons paper-button-style cr-shared-style">
       /* Prevent action-links from being selected to avoid accidental
        * selection when trying to click it. */
       a[is=action-link] {
@@ -38,25 +40,7 @@
         -webkit-margin-start: var(--cr-icon-ripple-margin);
       }
 
-      /* See notes in .primary-button.
-       * TODO(dschuyler): Remove unnecessary .secondary-button references. */
-      paper-button {
-        --paper-button: {
-          -webkit-padding-end: var(--settings-button-edge-spacing);
-          -webkit-padding-start: var(--settings-button-edge-spacing);
-          color: var(--paper-grey-600);
-          font-weight: 500;
-          min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
-          text-decoration: none;
-        };
-        --paper-button-flat-keyboard-focus: {
-          background: rgba(0, 0, 0, .12);
-        };
-        flex-shrink: 0;
-        height: 36px;
-        margin: 0;
-      }
-
+      /* For "Advanced" toggle button. */
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
@@ -64,7 +48,7 @@
       /* If a button is at the end of the row, shift it to overlap the end of
        * the row. */
       .settings-box paper-button:last-of-type {
-        -webkit-margin-end: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-end: calc(var(--cr-button-edge-spacing) * -1);
       }
 
       /* Special case for buttons inside of toggle-buttons. */
@@ -79,7 +63,7 @@
 
       /* Adjust the margin between the separator and the first button. */
       .settings-box .separator + paper-button {
-        -webkit-margin-start: calc(var(--settings-button-edge-spacing) * -1);
+        -webkit-margin-start: calc(var(--cr-button-edge-spacing) * -1);
       }
 
       /* There are two settings button styles, .primary-button and normal

chrome/browser/resources/settings/settings_vars_css.html

@@ -13,7 +13,6 @@
      * UX design (bettes@). */
 
     --settings-actionable: var(--cr-actionable);
-    --settings-button-edge-spacing: 12px;
 
     --settings-box-row-padding: 20px;
     --settings-box-row-indent: calc(

ui/webui/resources/cr_elements/paper_button_style_css.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+<!-- Common paper-button styling for Material Design WebUI. -->
+<dom-module id="paper-button-style">
+  <template>
+    <style>
+      paper-button {
+        --paper-button: {
+          -webkit-padding-end: var(--cr-button-edge-spacing);
+          -webkit-padding-start: var(--cr-button-edge-spacing);
+          color: var(--paper-grey-600);
+          font-weight: 500;
+          min-width: 1em;  /* A tighter fit than 5.14em for short buttons. */
+          text-decoration: none;
+        };
+        --paper-button-flat-keyboard-focus: {
+          background: rgba(0, 0, 0, .12);
+        };
+        flex-shrink: 0;
+        height: 36px;
+        margin: 0;
+      }
+    </style>
+  </template>
+</dom-module>

ui/webui/resources/cr_elements/shared_vars_css.html

 <link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <!-- Common css variables for Material Design WebUI. -->
@@ -8,6 +9,8 @@
       cursor: pointer;
     };
 
+    --cr-button-edge-spacing: 12px;
+
     /* Spacing between policy (controlledBy) indicator and control. */
     --cr-controlled-by-spacing: 24px;
 

ui/webui/resources/cr_elements_resources.grdp

@@ -176,6 +176,9 @@
              file="../../webui/resources/cr_elements/cr_icons_css.html"
              flattenhtml="true"
              type="chrome_html" />
+  <structure name="IDR_CR_ELEMENTS_PAPER_BUTTON_STYLE_CSS_HTML"
+             file="../../webui/resources/cr_elements/paper_button_style_css.html"
+             type="chrome_html" />
   <structure name="IDR_CR_ELEMENTS_CR_SHARED_VARS_CSS_HTML"
              file="../../webui/resources/cr_elements/shared_vars_css.html"
              type="chrome_html" />