Update gr-button to use paper button

Mostly styling updates but notable changes:
- Common color in theme.html, should be used by all buttons and links.
- CSS mixin to style gr-button passed to paper button (used in
  gr-label-score-row, gr-linked-chip)
- Some things that look like buttons but aren't exactly buttons get
  text-transform uppercase to appear like a button.
- Primary and secondary buttons are both the same color, but for now
- have not removed secondary so that it's possible to style them
  differently if we decide to.

Change-Id: Ib5ef3b0fc4883cd6dfc5c38e6d954925101d531f

polygerrit-ui/app/elements/change/gr-change-actions/gr-change-actions.js

@@ -666,7 +666,7 @@
 
     _handleActionTap(e) {
       e.preventDefault();
-      const el = Polymer.dom(e).rootTarget;
+      const el = e.currentTarget;
       const key = el.getAttribute('data-action-key');
       if (key.startsWith(ADDITIONAL_ACTION_KEY_PREFIX)) {
         this.fire(`${key}-tap`, {node: el});

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.html

@@ -107,6 +107,9 @@ limitations under the License.
         opacity: 0;
         pointer-events: none;
       }
+      .hashtagChip {
+        margin-bottom: .5em;
+      }
       #externalStyle {
         display: block;
       }
@@ -222,6 +225,7 @@ limitations under the License.
           </template>
           <template is="dom-if" if="[[!change.topic]]">
             <gr-editable-label
+                uppercase
                 label-text="Add a topic"
                 value="[[change.topic]]"
                 placeholder="[[_computeTopicPlaceholder(_topicReadOnly)]]"
@@ -240,6 +244,7 @@ limitations under the License.
           <span class="value">
             <template is="dom-repeat" items="[[change.hashtags]]">
               <gr-linked-chip
+                  class="hashtagChip"
                   text="[[item]]"
                   href="[[_computeHashtagURL(item)]]"
                   removable="[[!_hashtagReadOnly]]"
@@ -247,6 +252,7 @@ limitations under the License.
               </gr-linked-chip>
             </template>
             <gr-editable-label
+                uppercase
                 label-text="Add a hashtag"
                 value="{{_newHashtag}}"
                 placeholder="[[_computeHashtagPlaceholder(_hashtagReadOnly)]]"

polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.js

@@ -14,7 +14,7 @@
 (function() {
   'use strict';
 
-  const HASHTAG_ADD_MESSAGE = 'Click to add';
+  const HASHTAG_ADD_MESSAGE = 'Add Hashtag';
 
   const SubmitTypeLabel = {
     FAST_FORWARD_ONLY: 'Fast Forward Only',
@@ -209,7 +209,7 @@
     },
 
     _computeTopicPlaceholder(_topicReadOnly) {
-      return _topicReadOnly ? 'No Topic' : 'Click to add topic';
+      return _topicReadOnly ? 'No Topic' : 'Add Topic';
     },
 
     _computeHashtagPlaceholder(_hashtagReadOnly) {

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.js

@@ -67,7 +67,7 @@
     },
 
     _computeDescriptionPlaceholder(readOnly) {
-      return (readOnly ? 'No' : 'Add a') + ' patch set description';
+      return (readOnly ? 'No' : 'Add') + ' patchset description';
     },
 
     _computeDescriptionReadOnly(loggedIn, change, account) {

polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header_test.html

@@ -93,9 +93,9 @@ limitations under the License.
 
     test('_computeDescriptionPlaceholder', () => {
       assert.equal(element._computeDescriptionPlaceholder(true),
-          'No patch set description');
+          'No patchset description');
       assert.equal(element._computeDescriptionPlaceholder(false),
-          'Add a patch set description');
+          'Add patchset description');
     });
 
     test('_computePatchSetDisabled', () => {

polygerrit-ui/app/elements/change/gr-file-list/gr-file-list.html

@@ -127,7 +127,7 @@ limitations under the License.
         display: none;
       }
       label.show-hide {
-        color: #00f;
+        color: var(--color-link);
         cursor: pointer;
         display: block;
         font-size: .8em;

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html

@@ -51,19 +51,24 @@ limitations under the License.
       .selectedValueText.hidden {
         display: none;
       }
-      iron-selector > gr-button:first-of-type {
-        border-bottom-left-radius: 2px;
-        border-top-left-radius: 2px;
-      }
-      iron-selector > gr-button:last-of-type {
-        border-bottom-right-radius: 2px;
-        border-top-right-radius: 2px;
-      }
-      iron-selector > gr-button.iron-selected {
-        background-color: #ddd;
-      }
       gr-button {
         min-width: 40px;
+        --gr-button: {
+          border: 1px solid #d1d2d3;
+          border-radius: 12px;
+          box-shadow: none;
+          padding: .2em .85em;
+        }
+        --gr-button-background: #f5f5f5;
+        --gr-button-color: black;
+        --gr-button-hover-color: black;
+
+      }
+      iron-selector > gr-button.iron-selected {
+        --gr-button-background:#ddd;
+        --gr-button-color: black;
+        --gr-button-hover-background-color: #ddd;
+        --gr-button-hover-color: black;
       }
       .placeholder {
         display: inline-block;

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js

@@ -106,6 +106,8 @@
       // nothing and then to the new item.
       if (!e.target.selectedItem) { return; }
       this._selectedValueText = e.target.selectedItem.getAttribute('title');
+      // Needed to update the style of the selected button.
+      this.updateStyles();
       this.fire('labels-changed');
     },
 

polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list_test.html

@@ -86,14 +86,14 @@ limitations under the License.
 
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       assert.equal(getMessages().length, 20);
-      assert.equal(element.$.incrementMessagesBtn.innerText.trim(),
+      assert.equal(element.$.incrementMessagesBtn.innerText.toUpperCase()
-          'Show 5 more');
+          .trim(), 'SHOW 5 MORE');
       MockInteractions.tap(element.$.incrementMessagesBtn);
       flushAsynchronousOperations();
 
       assert.equal(getMessages().length, 25);
-      assert.equal(element.$.incrementMessagesBtn.innerText.trim(),
+      assert.equal(element.$.incrementMessagesBtn.innerText.toUpperCase()
-          'Show 1 more');
+          .trim(), 'SHOW 1 MORE');
       MockInteractions.tap(element.$.incrementMessagesBtn);
       flushAsynchronousOperations();
 
@@ -108,7 +108,8 @@ limitations under the License.
 
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       assert.equal(getMessages().length, 20);
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show all 6 messages');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW ALL 6 MESSAGES');
       MockInteractions.tap(element.$.oldMessagesBtn);
       flushAsynchronousOperations();
 
@@ -121,7 +122,8 @@ limitations under the License.
           .concat(_.times(11, randomMessage));
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       MockInteractions.tap(element.$.automatedMessageToggle);
       flushAsynchronousOperations();
@@ -134,12 +136,14 @@ limitations under the License.
           .concat(_.times(11, randomAutomated));
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
       MockInteractions.tap(element.$.automatedMessageToggle);
       flushAsynchronousOperations();
 
-      assert.equal(element.$.oldMessagesBtn.innerText, 'Show 1 message');
+      assert.equal(element.$.oldMessagesBtn.innerText.toUpperCase(),
+          'SHOW 1 MESSAGE');
       assert.isFalse(element.$.messageControlsContainer.hasAttribute('hidden'));
     });
 

polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.html

@@ -117,10 +117,6 @@ limitations under the License.
       .draftsContainer h3 {
         margin-top: .25em;
       }
-      .action:link,
-      .action:visited {
-        color: #00e;
-      }
       #checkingStatusLabel,
       #notLatestLabel {
         margin-left: 1em;

polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.html

@@ -67,7 +67,9 @@ limitations under the License.
       .linksTitle {
         color: var(--primary-text-color);
         display: inline-block;
+        font-family: var(--font-family-bold);
         position: relative;
+        text-transform: uppercase;
       }
       .linksTitle:hover {
         opacity: .75;
@@ -157,7 +159,9 @@ limitations under the License.
           </li>
         </template>
         <li>
-          <a class="browse linksTitle" href$="[[_computeRelativeURL('/admin/projects')]]">
+          <a
+              class="browse linksTitle"
+              href$="[[_computeRelativeURL('/admin/projects')]]">
             Browse</a>
         </li>
       </ul>

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html

@@ -85,7 +85,6 @@ limitations under the License.
         vertical-align: middle;
       }
       .dropdown-trigger {
-        color: #00e;
         cursor: pointer;
         padding: 0;
       }
@@ -111,7 +110,7 @@ limitations under the License.
         width: .3em;
       }
       .dropdown-content a:hover {
-        background-color: #00e;
+        background-color: var(--color-link);
         color: #fff;
       }
       .dropdown-content a[selected] {
@@ -125,7 +124,6 @@ limitations under the License.
         color: #000;
       }
       gr-button {
-        font: inherit;
         padding: .3em 0;
         text-decoration: none;
       }

polygerrit-ui/app/elements/diff/gr-syntax-themes/gr-theme-default.html

@@ -60,7 +60,7 @@ limitations under the License.
         color: #219;
       }
       .gr-syntax-type {
-        color: #00f;
+        color: var(--color-link);
       }
       .gr-syntax-title {
         color: #0000C0;

polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.html

@@ -59,18 +59,21 @@ limitations under the License.
               <td class="urlCell">[[item.url]]</td>
               <td class="buttonColumn">
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleMoveUpButton"
                     class="moveUpButton">↑</gr-button>
               </td>
               <td class="buttonColumn">
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleMoveDownButton"
                     class="moveDownButton">↓</gr-button>
               </td>
               <td>
                 <gr-button
+                    link
                     data-index="[[index]]"
                     on-tap="_handleDeleteButton"
                     class="remove-button">Delete</gr-button>
@@ -99,6 +102,7 @@ limitations under the License.
             <th></th>
             <th>
               <gr-button
+                  link
                   disabled$="[[_computeAddDisabled(_newName, _newUrl)]]"
                   on-tap="_handleAddButton">Add</gr-button>
             </th>

polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.html

@@ -353,6 +353,7 @@ limitations under the License.
               id="emailEditor"
               has-unsaved-changes="{{_emailsChanged}}"></gr-email-editor>
           <gr-button
+              link
               on-tap="_handleSaveEmails"
               disabled$="[[!_emailsChanged]]">Save changes</gr-button>
         </fieldset>

polygerrit-ui/app/elements/settings/gr-watched-projects-editor/gr-watched-projects-editor.html

@@ -83,6 +83,7 @@ limitations under the License.
               </template>
               <td>
                 <gr-button
+                    link
                     data-index$="[[projectIndex]]"
                     on-tap="_handleRemoveProject">Delete</gr-button>
               </td>
@@ -106,7 +107,7 @@ limitations under the License.
                   placeholder="branch:name, or other search expression">
             </th>
             <th>
-              <gr-button on-tap="_handleAddProject">Add</gr-button>
+              <gr-button link on-tap="_handleAddProject">Add</gr-button>
             </th>
           </tr>
         </tfoot>

polygerrit-ui/app/elements/shared/gr-account-chip/gr-account-chip.html

@@ -37,14 +37,14 @@ limitations under the License.
       :host([show-avatar]) .container {
         padding-left: 0;
       }
-      gr-button.remove,
       gr-button.remove:hover,
       gr-button.remove:focus {
-        border-color: transparent;
+        --gr-button: {
           color: #333;
         }
+      }
       gr-button.remove {
-        background: #eee;
+        --gr-button: {
           border: 0;
           color: #666;
           font-size: 1.7em;
@@ -56,6 +56,13 @@ limitations under the License.
           padding: 0;
           text-decoration: none;
         }
+        --gr-button-hover-color: {
+          color: #333;
+        }
+        --gr-button-hover-background-color: {
+          color: #333;
+        }
+      }
       :host:focus {
         border-color: transparent;
         box-shadow: none;
@@ -78,6 +85,7 @@ limitations under the License.
       <gr-account-link account="[[account]]"></gr-account-link>
       <gr-button
           id="remove"
+          link
           hidden$="[[!removable]]"
           hidden
           tabindex="-1"

polygerrit-ui/app/elements/shared/gr-button/gr-button.html

@@ -18,122 +18,100 @@ limitations under the License.
 
 <link rel="import" href="../../../behaviors/gr-tooltip-behavior/gr-tooltip-behavior.html">
 <link rel="import" href="../../../behaviors/keyboard-shortcut-behavior/keyboard-shortcut-behavior.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../styles/shared-styles.html">
 
 <dom-module id="gr-button">
   <template strip-whitespace>
     <style include="shared-styles">
       :host {
-        background-color: #f5f5f5;
-        border: 1px solid #d1d2d3;
-        border-radius: 2px;
-        box-sizing: border-box;
-        color: #333;
-        cursor: pointer;
         display: inline-block;
         font-family: var(--font-family-bold);
         font-size: 12px;
-        outline-width: 0;
-        padding: .4em .85em;
         position: relative;
-        text-align: center;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        -webkit-user-select: none;
-        user-select: none;
       }
       :host([hidden]) {
         display: none;
       }
-      :host([primary]),
-      :host([secondary]) {
-        color: #fff;
-      }
-      :host([primary]) {
-        background-color: #4d90fe;
-        border-color: #3079ed;
-      }
-      :host([secondary]) {
-        background-color: #d14836;
-        border-color: transparent;
-      }
-      :host([small]) {
-        font-size: 12px;
-      }
       :host([link]) {
         background-color: transparent;
         border: none;
-        color: #00f;
+        color: var(--color-link);
         font-size: inherit;
-        font-family: var(--font-family);
+        font-family: var(--font-family-bold);
-        padding: 0;
+        text-transform: none;
-        text-decoration: underline;
       }
-      :host([loading]),
+      :host([link]) paper-button {
-      :host([disabled]) {
+        margin: 0;
+        padding: 0;
+        @apply --gr-button;
+      }
+      paper-button[raised] {
+        background-color: var(--gr-button-background, #fff);
+        color: var(--gr-button-color, --color-link);
+      }
+      /* todo (beckysiegel) switch all secondary to primary as there is no color
+        distinction anymore. */
+      :host([primary]) paper-button[raised],
+      :host([secondary]) paper-button[raised] {
+        background-color: var(--color-link);
+        color: #fff;
+      }
+      :host([link]) paper-button:hover,
+      :host([link]) paper-button:focus,
+      paper-button[raised]:hover,
+      paper-button[raised]:focus  {
+        color: var(--gr-button-hover-color, --color-button-hover);
+      }
+      :host([primary]) paper-button[raised]:hover,
+      :host([primary]) paper-button[raised]:focus,
+      :host([secondary]) paper-button[raised]:hover,
+      :host([secondary]) paper-button[raised]:focus {
+        background-color: var(--gr-button-hover-background-color, --color-button-hover);
+        color: var(--gr-button-color, #fff);
+      }
+      paper-button,
+      paper-button[raised],
+      paper-button[link] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        min-width: 0;
+        padding: .4em .85em;
+        @apply --gr-button;
+      }
+      :host([link]) paper-button {
+        --paper-button: {
+          padding: 0;
+        }
+      }
+      :host:not([down-arrow]) .downArrow {display: none; }
+      :host([down-arrow]) .downArrow {
+        border-left: .36em solid transparent;
+        border-right: .36em solid transparent;
+        border-top: .36em solid #ccc;
+        margin-left: .5em;
+        transition: border-top-color 200ms;
+      }
+      :host([down-arrow]):hover .downArrow {
+        border-top-color: #666;
+      }
+      :host([loading]) paper-button,
+      :host([disabled]) paper-button {
+        color: #aaa;
+      }
+      :host([loading]) paper-button,
+      :host([loading][disabled]) paper-button {
+        cursor: wait;
         background-color: #efefef;
         color: #aaa;
       }
-      :host([disabled]) {
-        cursor: default;
-      }
-      :host([loading]),
-      :host([loading][disabled]) {
-        cursor: wait;
-      }
-      :host:focus:not([link]),
-      :host:hover:not([link]) {
-        background-color: #f8f8f8;
-        border-color: #aaa;
-      }
-      :host(:active) {
-        border-color: #d1d2d3;
-        color: #aaa;
-      }
-      :host([primary]:focus),
-      :host([secondary]:focus),
-      :host([primary]:active),
-      :host([secondary]:active) {
-        color: #fff;
-      }
-      :host([primary]:focus) {
-        box-shadow: 0 0 1px #00f;
-        background-color: #4d90fe;
-      }
-      :host([primary]:not([disabled]):hover) {
-        background-color: #4d90fe;
-        border-color: #00F;
-      }
-      :host([primary]:active),
-      :host([secondary]:active) {
-        box-shadow: none;
-      }
-      :host([primary]:active) {
-        border-color: #0c2188;
-      }
-      :host([secondary]:focus) {
-        box-shadow: 0 0 1px #f00;
-        background-color: #d14836;
-      }
-      :host([secondary]:not([disabled]):hover) {
-        background-color: #c53727;
-        border: 1px solid #b0281a;
-      }
-      :host([secondary]:active) {
-        border-color: #941c0c;
-      }
-      :host([primary][loading]) {
-        background-color: #7caeff;
-        border-color: transparent;
-        color: #fff;
-      }
-      :host([primary][disabled]) {
-        background-color: #4d90fe;
-        color: #fff;
-        opacity: .5;
-      }
     </style>
+    <paper-button raised="[[!link]]">
       <content></content>
+      <i class="downArrow"></i>
+    </paper-button>
   </template>
   <script src="gr-button.js"></script>
 </dom-module>

polygerrit-ui/app/elements/shared/gr-button/gr-button.js

@@ -18,8 +18,13 @@
     is: 'gr-button',
 
     properties: {
+      downArrow: {
+        type: Boolean,
+        reflectToAttribute: true,
+      },
       link: {
         type: Boolean,
+        value: false,
         reflectToAttribute: true,
       },
       disabled: {

polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.html

@@ -43,9 +43,6 @@ limitations under the License.
         font: inherit;
         padding: .3em 0;
       }
-      :host([down-arrow]) .dropdown-trigger {
-        padding-right: 1.4em;
-      }
       gr-avatar {
         height: 2em;
         width: 2em;
@@ -75,7 +72,6 @@ limitations under the License.
       }
       li .itemAction:link,
       li .itemAction:visited {
-        color: #00e;
         text-decoration: none;
       }
       li .itemAction:not(.disabled):hover {
@@ -94,26 +90,13 @@ limitations under the License.
       .bold-text {
         font-family: var(--font-family-bold);
       }
-      :host:not([down-arrow]) .downArrow { display: none; }
-      :host([down-arrow]) .downArrow {
-        border-left: .36em solid transparent;
-        border-right: .36em solid transparent;
-        border-top: .36em solid #ccc;
-        height: 0;
-        position: absolute;
-        right: .3em;
-        top: calc(50% - .05em);
-        transition: border-top-color 200ms;
-        width: 0;
-      }
-      .dropdown-trigger:hover .downArrow {
-        border-top-color: #666;
-      }
     </style>
-    <gr-button link="[[link]]" class="dropdown-trigger" id="trigger"
+    <gr-button
+        link="[[link]]"
+        class="dropdown-trigger" id="trigger"
+        down-arrow="[[downArrow]]"
         on-tap="_showDropdownTapHandler">
       <content></content>
-       <i class="downArrow"></i>
     </gr-button>
     <iron-dropdown id="dropdown"
         vertical-align="top"

polygerrit-ui/app/elements/shared/gr-dropdown/gr-dropdown.js

@@ -37,6 +37,7 @@
         type: Array,
         observer: '_resetCursorStops',
       },
+      downArrow: Boolean,
       topContent: Object,
       horizontalAlign: {
         type: String,

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.html

@@ -27,6 +27,9 @@ limitations under the License.
         align-items: center;
         display: inline-flex;
       }
+      :host([uppercase]) label {
+        text-transform: uppercase;
+      }
       input,
       label {
         width: 100%;
@@ -37,14 +40,14 @@ limitations under the License.
       label {
         color: #777;
         display: inline-block;
+        font-family: var(--font-family-bold);
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       label.editable {
-        color: #00f;
+        color: var(--color-link);
         cursor: pointer;
-        text-decoration: underline;
       }
       #dropdown {
         box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;

polygerrit-ui/app/elements/shared/gr-editable-label/gr-editable-label.js

@@ -46,6 +46,11 @@
         type: Boolean,
         value: false,
       },
+      uppercase: {
+        type: Boolean,
+        reflectToAttribute: true,
+        value: false,
+      },
       _inputText: String,
       // This is used to push the iron-input element up on the page, so
       // the input is placed in approximately the same position as the

polygerrit-ui/app/elements/shared/gr-linked-chip/gr-linked-chip.html

@@ -34,14 +34,14 @@ limitations under the License.
         display: inline-flex;
         padding: 0 .5em;
       }
-      gr-button.remove,
       gr-button.remove:hover,
       gr-button.remove:focus {
-        border-color: transparent;
+        --gr-button: {
           color: #333;
         }
+      }
       gr-button.remove {
-        background: #eee;
+        --gr-button: {
           border: 0;
           color: #666;
           font-size: 1.7em;
@@ -53,6 +53,13 @@ limitations under the License.
           padding: 0;
           text-decoration: none;
         }
+        --gr-button-hover-color: {
+          color: #333;
+        }
+        --gr-button-hover-background-color: {
+          color: #333;
+        }
+      }
       .transparentBackground,
       gr-button.transparentBackground {
         background-color: transparent;
@@ -68,6 +75,7 @@ limitations under the License.
       </a>
       <gr-button
           id="remove"
+          link
           hidden$="[[!removable]]"
           hidden
           class$="remove [[_getBackgroundClass(transparentBackground)]]"

polygerrit-ui/app/styles/app-theme.html

@@ -35,6 +35,11 @@ limitations under the License.
   --iron-overlay-backdrop: {
     transition: none;
   }
+
+  /* Follow are a part of the design refresh */
+  --color-link: #2a66d9;
+  /* 12% darker */
+  --color-button-hover: #0B47BA;
 }
 @media screen and (max-width: 50em) {
   :root {

polygerrit-ui/app/styles/shared-styles.html

@@ -38,6 +38,9 @@ limitations under the License.
         margin: 0;
         padding: 0;
       }
+      a {
+        color: var(--color-link);
+      }
       input,
       textarea,
       select,