From b7defbdd5d214225629db488df542b9360148e88 Mon Sep 17 00:00:00 2001
From: Andrew Bonventre <andybons@chromium.org>
Date: Tue, 16 Feb 2016 16:35:19 -0500
Subject: [PATCH] Move the rest of the buttons to the common gr-button element

+ Plus some minor stylistic fixes found while migrating.

Bug: Issue 3899
Change-Id: I5e38510fdf8ad034b7fc9db1f8cac3d35cb6b3bf
---
 .../behaviors/keyboard-shortcut-behavior.html |  3 +-
 .../app/elements/gr-account-dropdown.html     |  8 +-
 polygerrit-ui/app/elements/gr-button.html     | 93 +++++++++++++++++--
 .../app/elements/gr-change-actions.html       | 48 +++-------
 .../app/elements/gr-change-star.html          |  2 +-
 .../app/elements/gr-confirm-dialog.html       | 18 +---
 .../app/elements/gr-diff-comment.html         | 19 ++--
 .../app/elements/gr-diff-preferences.html     | 27 +-----
 polygerrit-ui/app/elements/gr-diff-view.html  | 20 ++--
 polygerrit-ui/app/elements/gr-message.html    |  6 +-
 .../app/elements/gr-reply-dropdown.html       | 42 +++------
 polygerrit-ui/app/elements/gr-search-bar.html | 14 +--
 .../app/test/gr-change-actions-test.html      |  6 +-
 .../app/test/gr-confirm-dialog-test.html      |  4 +-
 .../app/test/gr-diff-preferences-test.html    |  4 +-
 .../app/test/gr-download-dialog-test.html     |  2 +-
 polygerrit-ui/app/test/gr-message-test.html   |  2 +-
 .../app/test/gr-reply-dropdown-test.html      |  6 +-
 18 files changed, 170 insertions(+), 154 deletions(-)

diff --git a/polygerrit-ui/app/behaviors/keyboard-shortcut-behavior.html b/polygerrit-ui/app/behaviors/keyboard-shortcut-behavior.html
index 17734975f2..4250ce2c8a 100644
--- a/polygerrit-ui/app/behaviors/keyboard-shortcut-behavior.html
+++ b/polygerrit-ui/app/behaviors/keyboard-shortcut-behavior.html
@@ -56,7 +56,8 @@ limitations under the License.
              target.tagName == 'TEXTAREA' ||
              target.tagName == 'SELECT' ||
              target.tagName == 'BUTTON' ||
-             target.tagName == 'A';
+             target.tagName == 'A' ||
+             target.tagName == 'GR-BUTTON';
     },
   };
 
diff --git a/polygerrit-ui/app/elements/gr-account-dropdown.html b/polygerrit-ui/app/elements/gr-account-dropdown.html
index 887cb0c67c..99850f6790 100644
--- a/polygerrit-ui/app/elements/gr-account-dropdown.html
+++ b/polygerrit-ui/app/elements/gr-account-dropdown.html
@@ -16,6 +16,7 @@ limitations under the License.
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/iron-dropdown/iron-dropdown.html">
+<link rel="import" href="gr-button.html">
 
 <dom-module id="gr-account-dropdown">
   <style>
@@ -23,8 +24,7 @@ limitations under the License.
       display: inline-block;
     }
     .dropdown-trigger {
-      color: #00e;
-      cursor: pointer;
+      text-decoration: none;
     }
     .dropdown-content {
       background-color: #fff;
@@ -58,8 +58,8 @@ limitations under the License.
     }
   </style>
   <template>
-    <button class="dropdown-trigger" id="trigger"
-        on-tap="_showDropdownTapHandler">[[account.name]]</button>
+    <gr-button link class="dropdown-trigger" id="trigger"
+        on-tap="_showDropdownTapHandler">[[account.name]]</gr-button>
     <iron-dropdown id="dropdown"
         vertical-align="top"
         vertical-offset="25"
diff --git a/polygerrit-ui/app/elements/gr-button.html b/polygerrit-ui/app/elements/gr-button.html
index 9589bc0f13..2af6a5dcb5 100644
--- a/polygerrit-ui/app/elements/gr-button.html
+++ b/polygerrit-ui/app/elements/gr-button.html
@@ -15,18 +15,24 @@ limitations under the License.
 -->
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
 
 <dom-module id="gr-button">
   <template strip-whitespace>
     <style>
       :host {
-        background: transparent;
-        border-radius: 3px;
+        background-color: #fff;
+        border: 1px solid #d1d2d3;
+        border-radius: 2px;
         box-sizing: border-box;
+        color: #333;
         cursor: pointer;
         display: inline-block;
-        font: inherit;
+        font-family: var(--font-family);
+        font-size: 13px;
+        font-weight: bold;
         outline-width: 0;
+        padding: .3em .65em;
         position: relative;
         text-align: center;
         -moz-user-select: none;
@@ -34,18 +40,60 @@ limitations under the License.
         -webkit-user-select: none;
         user-select: none;
       }
+      :host([hidden]) {
+        display: none;
+      }
       :host([primary]) {
-
+        background-color: #4d90fe;
+        border-color: #3079ed;
+        color: #fff;
       }
       :host([small]) {
-
+        font-size: 12px;
       }
       :host([link]) {
+        background-color: transparent;
+        border: none;
         color: #00f;
+        font-size: inherit;
+        font-weight: normal;
+        padding: 0;
         text-decoration: underline;
       }
+      :host([loading]),
       :host([disabled]) {
-
+        background-color: #efefef;
+        color: #aaa;
+      }
+      :host([disabled]) {
+        cursor: default;
+        pointer-events: none;
+      }
+      :host([loading]),
+      :host([loading][disabled]) {
+        cursor: wait;
+      }
+      :host(:focus),
+      :host(:hover) {
+        border-color: #666;
+      }
+      :host(:active) {
+        border-color: #d1d2d3;
+        color: #aaa;
+      }
+      :host([primary]:focus),
+      :host([primary]:hover) {
+        border-color: #00F;
+      }
+      :host([primary]:active) {
+        border-color: #0c2188;
+        color: #fff;
+      }
+      :host([primary][loading]),
+      :host([primary][disabled]) {
+        background-color: #7caeff;
+        border-color: transparent;
+        color: #fff;
       }
     </style>
     <content></content>
@@ -58,7 +106,40 @@ limitations under the License.
       is: 'gr-button',
 
       properties: {
+        disabled: {
+          type: Boolean,
+          observer: '_disabledChanged',
+          reflectToAttribute: true,
+        },
+        _enabledTabindex: {
+          type: String,
+          value: '0',
+        },
+      },
 
+      behaviors: [
+        Gerrit.KeyboardShortcutBehavior,
+      ],
+
+      hostAttributes: {
+        role: 'button',
+        tabindex: '0',
+      },
+
+      _disabledChanged: function(disabled) {
+        if (disabled) {
+          this._enabledTabindex = this.getAttribute('tabindex');
+        }
+        this.setAttribute('tabindex', disabled ? '-1' : this._enabledTabindex);
+      },
+
+      _handleKey: function(e) {
+        switch (e.keyCode) {
+          case 32:  // 'spacebar'
+          case 13:  // 'enter'
+            e.preventDefault();
+            this.click();
+        }
       },
     });
   })();
diff --git a/polygerrit-ui/app/elements/gr-change-actions.html b/polygerrit-ui/app/elements/gr-change-actions.html
index 997bfb2289..9e9b078b47 100644
--- a/polygerrit-ui/app/elements/gr-change-actions.html
+++ b/polygerrit-ui/app/elements/gr-change-actions.html
@@ -18,6 +18,7 @@ limitations under the License.
 <link rel="import" href="../bower_components/iron-input/iron-input.html">
 <link rel="import" href="../behaviors/rest-client-behavior.html">
 <link rel="import" href="gr-ajax.html">
+<link rel="import" href="gr-button.html">
 <link rel="import" href="gr-confirm-rebase-dialog.html">
 <link rel="import" href="gr-overlay.html">
 <link rel="import" href="gr-request.html">
@@ -28,39 +29,12 @@ limitations under the License.
       :host {
         display: block;
       }
-      .primary {
-        background-color: #448aff;
-        border-color: #448aff;
-        color: #fff;
-      }
-      button:before {
+      gr-button:before {
         content: attr(data-label);
       }
-      button {
-        background-color: #f1f2f3;
-        border: 1px solid #aaa;
-        border-radius: 2px;
-        cursor: pointer;
-        font: inherit;
-        padding: .5em .75em;
-      }
-      button[loading],
-      button[disabled] {
-        opacity: .75;
-      }
-      button[loading] {
-        cursor: wait;
-      }
-      button[loading]:before {
+      gr-button[loading]:before {
         content: attr(data-loading-label);
       }
-      button[disabled] {
-        cursor: default;
-      }
-      button[loading],
-      button[loading][disabled] {
-        cursor: wait;
-      }
     </style>
     <gr-ajax id="actionsXHR"
         url="[[_computeRevisionActionsPath(changeNum, patchNum)]]"
@@ -68,21 +42,21 @@ limitations under the License.
         loading="{{_loading}}"></gr-ajax>
     <div>
       <template is="dom-repeat" items="[[_computeActionValues(actions, 'change')]]" as="action">
-        <button title$="[[action.title]]"
-            class$="[[_computeButtonClass(action.__key)]]"
+        <gr-button title$="[[action.title]]"
+            primary$="[[_computePrimary(action.__key)]]"
             hidden$="[[!action.enabled]]"
             data-action-key$="[[action.__key]]"
             data-label$="[[action.label]]"
-            on-tap="_handleActionTap"></button>
+            on-tap="_handleActionTap"></gr-button>
       </template>
       <template is="dom-repeat" items="[[_computeActionValues(_revisionActions, 'revision')]]" as="action">
-        <button title$="[[action.title]]"
-            class$="[[_computeButtonClass(action.__key)]]"
+        <gr-button title$="[[action.title]]"
+            primary$="[[_computePrimary(action.__key)]]"
             disabled$="[[!action.enabled]]"
             data-action-key$="[[action.__key]]"
             data-label$="[[action.label]]"
             data-loading-label$="[[_computeLoadingLabel(action.__key)]]"
-            on-tap="_handleActionTap"></button>
+            on-tap="_handleActionTap"></gr-button>
       </template>
     </div>
     <gr-overlay id="overlay" with-backdrop>
@@ -183,6 +157,10 @@ limitations under the License.
         }[action];
       },
 
+      _computePrimary: function(actionKey) {
+        return actionKey == 'submit';
+      },
+
       _computeButtonClass: function(action) {
         return action == 'submit' ? 'primary' : '';
       },
diff --git a/polygerrit-ui/app/elements/gr-change-star.html b/polygerrit-ui/app/elements/gr-change-star.html
index b3ff00dd62..ad377ef159 100644
--- a/polygerrit-ui/app/elements/gr-change-star.html
+++ b/polygerrit-ui/app/elements/gr-change-star.html
@@ -34,7 +34,7 @@ limitations under the License.
         outline: none;
       }
       .starButton svg {
-        fill: #aab8c2;
+        fill: #ccc;
         width: 1em;
         height: 1em;
       }
diff --git a/polygerrit-ui/app/elements/gr-confirm-dialog.html b/polygerrit-ui/app/elements/gr-confirm-dialog.html
index beea8d2e00..0ba36d685e 100644
--- a/polygerrit-ui/app/elements/gr-confirm-dialog.html
+++ b/polygerrit-ui/app/elements/gr-confirm-dialog.html
@@ -15,6 +15,7 @@ limitations under the License.
 -->
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="gr-button.html">
 
 <dom-module id="gr-confirm-dialog">
   <template>
@@ -35,25 +36,12 @@ limitations under the License.
         display: flex;
         justify-content: space-between;
       }
-      button {
-        background-color: #f1f2f3;
-        border: 1px solid #aaa;
-        border-radius: 2px;
-        cursor: pointer;
-        font: inherit;
-        padding: .5em .75em;
-      }
-      .confirm {
-        background-color: #448aff;
-        border-color: #448aff;
-        color: #fff;
-      }
     </style>
     <div class="header"><content select=".header"></content></div>
     <div class="mainContent"><content select=".main"></content></div>
     <div class="footer">
-      <button class="confirm" on-tap="_handleConfirmTap">[[confirmLabel]]</button>
-      <button class="cancel" on-tap="_handleCancelTap">Cancel</button>
+      <gr-button primary on-tap="_handleConfirmTap">[[confirmLabel]]</gr-button>
+      <gr-button on-tap="_handleCancelTap">Cancel</gr-button>
     </div>
   </template>
   <script>
diff --git a/polygerrit-ui/app/elements/gr-diff-comment.html b/polygerrit-ui/app/elements/gr-diff-comment.html
index 82b2ace122..c544a8d07b 100644
--- a/polygerrit-ui/app/elements/gr-diff-comment.html
+++ b/polygerrit-ui/app/elements/gr-diff-comment.html
@@ -16,6 +16,7 @@ limitations under the License.
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
+<link rel="import" href="gr-button.html">
 <link rel="import" href="gr-date-formatter.html">
 <link rel="import" href="gr-linked-text.html">
 <link rel="import" href="gr-request.html">
@@ -70,9 +71,7 @@ limitations under the License.
         padding-top: 0;
       }
       .action {
-        cursor: pointer;
         margin-right: .5em;
-        padding: .2em .6em .3em;
       }
       .danger {
         display: flex;
@@ -137,15 +136,15 @@ limitations under the License.
           content="[[comment.message]]"
           config="[[projectConfig.commentlinks]]"></gr-linked-text>
       <div class="actions" hidden$="[[!showActions]]">
-        <button class="action reply" on-tap="_handleReply">Reply</button>
-        <button class="action quote" on-tap="_handleQuote">Quote</button>
-        <button class="action done" on-tap="_handleDone">Done</button>
-        <button class="action edit" on-tap="_handleEdit">Edit</button>
-        <button class="action save" on-tap="_handleSave"
-            disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</button>
-        <button class="action cancel" on-tap="_handleCancel" hidden>Cancel</button>
+        <gr-button class="action reply" on-tap="_handleReply">Reply</gr-button>
+        <gr-button class="action quote" on-tap="_handleQuote">Quote</gr-button>
+        <gr-button class="action done" on-tap="_handleDone">Done</gr-button>
+        <gr-button class="action edit" on-tap="_handleEdit">Edit</gr-button>
+        <gr-button class="action save" on-tap="_handleSave"
+            disabled$="[[_computeSaveDisabled(_editDraft)]]">Save</gr-button>
+        <gr-button class="action cancel" on-tap="_handleCancel" hidden>Cancel</gr-button>
         <div class="danger">
-          <button class="action discard" on-tap="_handleDiscard">Discard</button>
+          <gr-button class="action discard" on-tap="_handleDiscard">Discard</gr-button>
         </div>
       </div>
     </div>
diff --git a/polygerrit-ui/app/elements/gr-diff-preferences.html b/polygerrit-ui/app/elements/gr-diff-preferences.html
index 7656403ef3..e320620fbb 100644
--- a/polygerrit-ui/app/elements/gr-diff-preferences.html
+++ b/polygerrit-ui/app/elements/gr-diff-preferences.html
@@ -16,6 +16,7 @@ limitations under the License.
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/iron-input/iron-input.html">
+<link rel="import" href="gr-button.html">
 
 <dom-module id="gr-diff-preferences">
   <template>
@@ -27,7 +28,6 @@ limitations under the License.
         opacity: .5;
         pointer-events: none;
       }
-      button,
       input,
       select {
         font: inherit;
@@ -35,19 +35,6 @@ limitations under the License.
       input[type="number"] {
         width: 4em;
       }
-      button {
-        background-color: #f1f2f3;
-        border: 1px solid #aaa;
-        border-radius: 2px;
-        cursor: pointer;
-        font: inherit;
-        padding: .2em .75em;
-      }
-      button.primary {
-        background: #448aff;
-        border: none;
-        color: #fff;
-      }
       .header,
       .actions {
         padding: 1em 1.5em;
@@ -75,11 +62,7 @@ limitations under the License.
       .actions {
         border-top: 1px solid #ddd;
         display: flex;
-      }
-      .cancel {
-        display: flex;
-        flex: 1;
-        justify-content: flex-end;
+        justify-content: space-between;
       }
     </style>
     <div class="header">
@@ -119,10 +102,8 @@ limitations under the License.
       </div>
     </div>
     <div class="actions">
-      <button class="primary" on-tap="_handleSave">Save</button>
-      <div class="cancel">
-        <button on-tap="_handleCancel">Cancel</button>
-      </div>
+      <gr-button primary on-tap="_handleSave">Save</gr-button>
+      <gr-button on-tap="_handleCancel">Cancel</gr-button>
     </div>
   </template>
   <script>
diff --git a/polygerrit-ui/app/elements/gr-diff-view.html b/polygerrit-ui/app/elements/gr-diff-view.html
index 9d30c4a0ad..1e656ac3c6 100644
--- a/polygerrit-ui/app/elements/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/gr-diff-view.html
@@ -19,6 +19,7 @@ limitations under the License.
 <link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
 <link rel="import" href="../behaviors/rest-client-behavior.html">
 <link rel="import" href="gr-ajax.html">
+<link rel="import" href="gr-button.html">
 <link rel="import" href="gr-diff.html">
 <link rel="import" href="gr-request.html">
 
@@ -33,6 +34,11 @@ limitations under the License.
         margin-top: 1em;
         padding: .75em var(--default-horizontal-margin);
       }
+      .reviewed {
+        display: inline-block;
+        margin: 0 .25em;
+        vertical-align: .15em;
+      }
       .jumpToFileContainer {
         display: inline-block;
       }
@@ -77,11 +83,10 @@ limitations under the License.
         background-color: #fff;
         color: #000;
       }
-      button {
-        background: none;
-        border: none;
+      gr-button {
         font: inherit;
         padding: .3em 0;
+        text-decoration: none;
       }
     </style>
     <gr-ajax id="changeDetailXHR"
@@ -100,13 +105,16 @@ limitations under the License.
     <h3>
       <a href$="[[_computeChangePath(_changeNum)]]">[[_changeNum]]</a><span>:</span>
       <span>[[_change.subject]]</span> —
-      <input id="reviewed" type="checkbox" on-change="_handleReviewedChange"
+      <input id="reviewed"
+          class="reviewed"
+          type="checkbox"
+          on-change="_handleReviewedChange"
           hidden$="[[!_loggedIn]]" hidden>
       <div class="jumpToFileContainer">
-        <button class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
+        <gr-button link class="dropdown-trigger" id="trigger" on-tap="_showDropdownTapHandler">
           <span>[[_path]]</span>
           <span class="downArrow">&#9660;</span>
-        </button>
+        </gr-button>
         <iron-dropdown id="dropdown" vertical-align="top" vertical-offset="25">
           <div class="dropdown-content">
             <template is="dom-repeat" items="[[_fileList]]" as="path">
diff --git a/polygerrit-ui/app/elements/gr-message.html b/polygerrit-ui/app/elements/gr-message.html
index fe94c3c069..056546fadd 100644
--- a/polygerrit-ui/app/elements/gr-message.html
+++ b/polygerrit-ui/app/elements/gr-message.html
@@ -16,6 +16,7 @@ limitations under the License.
 
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="gr-account-link.html">
+<link rel="import" href="gr-button.html">
 <link rel="import" href="gr-comment-list.html">
 <link rel="import" href="gr-date-formatter.html">
 <link rel="import" href="gr-linked-text.html">
@@ -91,9 +92,6 @@ limitations under the License.
       .replyContainer {
         padding: .5em 0 1em;
       }
-      .reply {
-        padding: .2em .6em .3em;
-      }
     </style>
     <div class$="[[_computeClass(expanded, showAvatar)]]">
       <gr-avatar account="[[message.author]]" image-size="100"></gr-avatar>
@@ -115,7 +113,7 @@ limitations under the License.
         </a>
       </div>
       <div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
-        <button class="reply" on-tap="_handleReplyTap">Reply</button>
+        <gr-button small on-tap="_handleReplyTap">Reply</gr-button>
       </div>
     </div>
   </template>
diff --git a/polygerrit-ui/app/elements/gr-reply-dropdown.html b/polygerrit-ui/app/elements/gr-reply-dropdown.html
index 9562f7f7f8..6f5d6b94d2 100644
--- a/polygerrit-ui/app/elements/gr-reply-dropdown.html
+++ b/polygerrit-ui/app/elements/gr-reply-dropdown.html
@@ -20,6 +20,7 @@ limitations under the License.
 <link rel="import" href="../bower_components/iron-selector/iron-selector.html">
 <link rel="import" href="../behaviors/rest-client-behavior.html">
 <link rel="import" href="gr-ajax.html">
+<link rel="import" href="gr-button.html">
 <link rel="import" href="gr-request.html">
 
 <dom-module id="gr-reply-dropdown">
@@ -38,14 +39,6 @@ limitations under the License.
       box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       width: 40em;
     }
-    button {
-      background-color: #f1f2f3;
-      border: 1px solid #aaa;
-      border-radius: 2px;
-      cursor: pointer;
-      font: inherit;
-      padding: .2em .5em;
-    }
     section {
       border-top: 1px solid #ddd;
       padding: .5em .75em;
@@ -73,25 +66,18 @@ limitations under the License.
     iron-selector {
       display: inline-flex;
     }
-    iron-selector > button {
-      background-color: #fff;
-      border: 1px solid #ddd;
-      border-left: none;
-      padding: .25em 0;
-      cursor: pointer;
-      width: 3em;
-      text-align: center;
+    iron-selector > gr-button {
+      margin-right: .25em;
     }
-    iron-selector > button:first-of-type {
+    iron-selector > gr-button:first-of-type {
       border-top-left-radius: 2px;
       border-bottom-left-radius: 2px;
-      border-left: 1px solid #ddd;
     }
-    iron-selector > button:last-of-type {
+    iron-selector > gr-button:last-of-type {
       border-top-right-radius: 2px;
       border-bottom-right-radius: 2px;
     }
-    iron-selector > button.iron-selected {
+    iron-selector > gr-button.iron-selected {
       background-color: #ddd;
     }
     .draftsContainer h3 {
@@ -99,22 +85,18 @@ limitations under the License.
     }
     .actionsContainer {
       display: flex;
+      justify-content: space-between;
     }
     .action:link,
     .action:visited {
       color: #00e;
     }
-    .danger {
-      display: flex;
-      flex: 1;
-      justify-content: flex-end;
-    }
   </style>
   <template>
     <gr-ajax id="draftsXHR"
         url="[[_computeDraftsURL(changeNum)]]"
         last-response="{{_drafts}}"></gr-ajax>
-    <button id="trigger" on-tap="_showPopupTapHandler">Reply</button>
+    <gr-button id="trigger" on-tap="_showPopupTapHandler">Reply</gr-button>
     <iron-dropdown id="dropdown"
         vertical-align="top"
         vertical-offset="25"
@@ -139,7 +121,7 @@ limitations under the License.
                 <template is="dom-repeat"
                     items="[[_computePermittedLabelValues(permittedLabels, label)]]"
                     as="value">
-                  <button data-value$="[[value]]">[[value]]</button>
+                  <gr-button data-value$="[[value]]">[[value]]</gr-button>
                 </template>
               </iron-selector>
             </div>
@@ -153,10 +135,8 @@ limitations under the License.
               patch-num="[[patchNum]]"></gr-comment-list>
         </section>
         <section class="actionsContainer">
-          <button class="action send" on-tap="_sendTapHandler">Send</button>
-          <div class="danger">
-            <button class="action cancel" on-tap="_cancelTapHandler">Cancel</button>
-          </div>
+          <gr-button primary class="action send" on-tap="_sendTapHandler">Send</gr-button>
+          <gr-button class="action cancel" on-tap="_cancelTapHandler">Cancel</gr-button>
         </section>
       </div>
     </iron-dropdown>
diff --git a/polygerrit-ui/app/elements/gr-search-bar.html b/polygerrit-ui/app/elements/gr-search-bar.html
index a2380543f1..44d1b31d10 100644
--- a/polygerrit-ui/app/elements/gr-search-bar.html
+++ b/polygerrit-ui/app/elements/gr-search-bar.html
@@ -17,6 +17,7 @@ limitations under the License.
 <link rel="import" href="../bower_components/polymer/polymer.html">
 <link rel="import" href="../bower_components/iron-input/iron-input.html">
 <link rel="import" href="../behaviors/keyboard-shortcut-behavior.html">
+<link rel="import" href="gr-button.html">
 
 <dom-module id="gr-search-bar">
   <template>
@@ -28,17 +29,16 @@ limitations under the License.
         display: flex;
         margin-left: 3em;
       }
-      input,
-      button {
-        border: 1px solid #aaa;
-        font: inherit;
-        padding: .2em .5em;
+      input {
+        border: 1px solid #d1d2d3;
+        outline: none;
       }
       input {
         flex: 1;
+        font: inherit;
         border-radius: 2px 0 0 2px;
       }
-      button {
+      gr-button {
         background-color: #f1f2f3;
         border-radius: 0 2px 2px 0;
         border-left-width: 0;
@@ -46,7 +46,7 @@ limitations under the License.
     </style>
     <form>
       <input is="iron-input" id="searchInput" bind-value="{{_inputVal}}">
-      <button type="submit" id="searchButton">Search</button>
+      <gr-button id="searchButton">Search</gr-button>
     </form>
   </template>
   <script>
diff --git a/polygerrit-ui/app/test/gr-change-actions-test.html b/polygerrit-ui/app/test/gr-change-actions-test.html
index 3fc5ef12a7..e510e341bd 100644
--- a/polygerrit-ui/app/test/gr-change-actions-test.html
+++ b/polygerrit-ui/app/test/gr-change-actions-test.html
@@ -98,7 +98,7 @@ limitations under the License.
 
     test('submit and rebase buttons show', function(done) {
       element.async(function() {
-        var buttonEls = Polymer.dom(element.root).querySelectorAll('button');
+        var buttonEls = Polymer.dom(element.root).querySelectorAll('gr-button');
         assert.equal(buttonEls.length, 2);
         assert.isFalse(element.hidden);
         done();
@@ -107,7 +107,7 @@ limitations under the License.
 
     test('submit change', function(done) {
       element.async(function() {
-        var submitButton = element.$$('button[data-action-key="submit"]');
+        var submitButton = element.$$('gr-button[data-action-key="submit"]');
         assert.ok(submitButton);
         MockInteractions.tap(submitButton);
         server.respond();
@@ -121,7 +121,7 @@ limitations under the License.
 
     test('rebase change', function(done) {
       element.async(function() {
-        var rebaseButton = element.$$('button[data-action-key="rebase"]');
+        var rebaseButton = element.$$('gr-button[data-action-key="rebase"]');
         MockInteractions.tap(rebaseButton);
 
         element.$.confirmRebase.base = '1234';
diff --git a/polygerrit-ui/app/test/gr-confirm-dialog-test.html b/polygerrit-ui/app/test/gr-confirm-dialog-test.html
index b61bb17479..d19118ed48 100644
--- a/polygerrit-ui/app/test/gr-confirm-dialog-test.html
+++ b/polygerrit-ui/app/test/gr-confirm-dialog-test.html
@@ -45,8 +45,8 @@ limitations under the License.
       element.addEventListener('confirm', handler);
       element.addEventListener('cancel', handler);
 
-      MockInteractions.tap(element.$$('.confirm'));
-      MockInteractions.tap(element.$$('.cancel'));
+      MockInteractions.tap(element.$$('gr-button[primary]'));
+      MockInteractions.tap(element.$$('gr-button:not([primary])'));
     });
 
   });
diff --git a/polygerrit-ui/app/test/gr-diff-preferences-test.html b/polygerrit-ui/app/test/gr-diff-preferences-test.html
index c6898347e1..9256f2fc93 100644
--- a/polygerrit-ui/app/test/gr-diff-preferences-test.html
+++ b/polygerrit-ui/app/test/gr-diff-preferences-test.html
@@ -68,8 +68,8 @@ limitations under the License.
       Promise.all([savePromise, cancelPromise]).then(function() {
         done();
       });
-      MockInteractions.tap(element.$$('button.primary'));
-      MockInteractions.tap(element.$$('.cancel button'));
+      MockInteractions.tap(element.$$('gr-button[primary]'));
+      MockInteractions.tap(element.$$('gr-button:not([primary])'));
     });
   });
 </script>
diff --git a/polygerrit-ui/app/test/gr-download-dialog-test.html b/polygerrit-ui/app/test/gr-download-dialog-test.html
index 0f674e5438..fe2637190a 100644
--- a/polygerrit-ui/app/test/gr-download-dialog-test.html
+++ b/polygerrit-ui/app/test/gr-download-dialog-test.html
@@ -98,7 +98,7 @@ limitations under the License.
       element.addEventListener('close', function() {
         done();
       });
-      MockInteractions.tap(element.$$('.closeButtonContainer a'));
+      MockInteractions.tap(element.$$('.closeButtonContainer gr-button'));
     });
 
     test('tab selection', function() {
diff --git a/polygerrit-ui/app/test/gr-message-test.html b/polygerrit-ui/app/test/gr-message-test.html
index 1bc65f6146..503da1bb94 100644
--- a/polygerrit-ui/app/test/gr-message-test.html
+++ b/polygerrit-ui/app/test/gr-message-test.html
@@ -57,7 +57,7 @@ limitations under the License.
         assert.deepEqual(e.detail.message, element.message);
         done();
       });
-      MockInteractions.tap(element.$$('button.reply'));
+      MockInteractions.tap(element.$$('.replyContainer gr-button'));
     });
 
   });
diff --git a/polygerrit-ui/app/test/gr-reply-dropdown-test.html b/polygerrit-ui/app/test/gr-reply-dropdown-test.html
index ca6e541ed9..47fe03ddee 100644
--- a/polygerrit-ui/app/test/gr-reply-dropdown-test.html
+++ b/polygerrit-ui/app/test/gr-reply-dropdown-test.html
@@ -126,9 +126,11 @@ limitations under the License.
         }
         element.draft = 'I wholeheartedly disapprove';
         MockInteractions.tap(element.$$(
-            'iron-selector[data-label="Code-Review"] > button[data-value="-1"]'));
+            'iron-selector[data-label="Code-Review"] > ' +
+            'gr-button[data-value="-1"]'));
         MockInteractions.tap(element.$$(
-            'iron-selector[data-label="Verified"] > button[data-value="-1"]'));
+            'iron-selector[data-label="Verified"] > ' +
+            'gr-button[data-value="-1"]'));
 
         // This is needed on non-Blink engines most likely due to the ways in
         // which the dom-repeat elements are stamped.