Replace "Show Comments Only" button with a paper-toggle-button

Bug: Issue 8107
Change-Id: I9ea1e3b36b4f52292cf1ffc2670f725f325f0ca8

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

@@ -15,6 +15,7 @@ limitations under the License.
 -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="../../core/gr-reporting/gr-reporting.html">
 <link rel="import" href="../../shared/gr-button/gr-button.html">
 <link rel="import" href="../gr-message/gr-message.html">
@@ -70,6 +71,10 @@ limitations under the License.
         align-items: center;
         display: flex;
       }
+      paper-toggle-button {
+        --paper-toggle-button-checked-bar-color: var(--color-link);
+        --paper-toggle-button-checked-button-color: var(--color-link);
+      }
     </style>
     <div class="header">
       <h3>Messages</h3>
@@ -78,12 +83,9 @@ limitations under the License.
             id="automatedMessageToggleContainer"
             class="container"
             hidden$="[[!_hasAutomatedMessages(messages)]]">
-          <gr-button
+          <paper-toggle-button
               id="automatedMessageToggle"
-              link
+              checked="{{_hideAutomated}}"></paper-toggle-button>Only comments
-              on-tap="_handleAutomatedMessageToggleTap">
-            [[_computeAutomatedToggleText(_hideAutomated)]]
-          </gr-button>
           <span class="transparent separator"></span>
         </span>
         <gr-button

polygerrit-ui/app/elements/change/gr-messages-list/gr-messages-list.js

@@ -175,12 +175,6 @@
       this.handleExpandCollapse(!this._expanded);
     },
 
-    _handleAutomatedMessageToggleTap(e) {
-      e.preventDefault();
-
-      this._hideAutomated = !this._hideAutomated;
-    },
-
     _handleScrollTo(e) {
       this.scrollToMessage(e.detail.message.id);
     },
@@ -199,10 +193,6 @@
       return expanded ? 'Collapse all' : 'Expand all';
     },
 
-    _computeAutomatedToggleText(hideAutomated) {
-      return hideAutomated ? 'Show all messages' : 'Show comments only';
-    },
-
     /**
      * Computes message author's file comments for change's message.
      * Method uses this.messages to find next message and relies on messages

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

@@ -484,7 +484,7 @@ limitations under the License.
       assert.isFalse(!!allHiddenMessageEls.length);
     });
 
-    test('autogenerated messages hidden after hide button tap', () => {
+    test('autogenerated messages hidden after comments only toggle', () => {
       let allHiddenMessageEls = getHiddenMessages();
 
       element._hideAutomated = false;
@@ -497,16 +497,17 @@ limitations under the License.
       assert.equal(allHiddenMessageEls.length, allMessageEls.length);
     });
 
-    test('autogenerated messages not hidden after show button tap', () => {
+    test('autogenerated messages not hidden after comments only toggle',
-      let allHiddenMessageEls = getHiddenMessages();
+        () => {
+          let allHiddenMessageEls = getHiddenMessages();
 
-      element._hideAutomated = true;
+          element._hideAutomated = true;
-      MockInteractions.tap(element.$.automatedMessageToggle);
+          MockInteractions.tap(element.$.automatedMessageToggle);
-      allHiddenMessageEls = getHiddenMessages();
+          allHiddenMessageEls = getHiddenMessages();
 
-      // Autogenerated messages are now hidden.
+          // Autogenerated messages are now hidden.
-      assert.isFalse(!!allHiddenMessageEls.length);
+          assert.isFalse(!!allHiddenMessageEls.length);
-    });
+        });
 
     test('_getDelta', () => {
       let messages = [randomMessage()];