Add a note about hidden messages to experimental Change Log

Change-Id: I728dc9982d0866b767487dc0eb67e4d82185b7ba

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

@@ -291,11 +291,14 @@ class GrMessagesListExperimental extends mixinBehaviors( [
     this.scrollToMessage(e.detail.id);
   }
 
-  _isVisibleShowAllActivityToggle(messages) {
-    messages = messages || [];
+  _isVisibleShowAllActivityToggle(messages = []) {
     return messages.some(m => !isImportant(m, messages));
   }
 
+  _computeHiddenEntriesCount(messages = []) {
+    return messages.filter(m => !isImportant(m, messages)).length;
+  }
+
   /**
    * This method is for reporting stats only.
    */

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

@@ -45,6 +45,9 @@ export const htmlTemplate = html`
       align-items: center;
       display: flex;
     }
+    .hiddenEntries {
+      color: var(--deemphasized-text-color);
+    }
     gr-message:not(:last-of-type) {
       border-bottom: 1px solid var(--border-color);
     }
@@ -61,18 +64,24 @@ export const htmlTemplate = html`
     }
   </style>
   <div class="header">
-    <span
-      id="showAllActivityToggleContainer"
-      class="container"
-      hidden$="[[!_isVisibleShowAllActivityToggle(_combinedMessages)]]"
+    <template
+      is="dom-if"
+      if="[[_isVisibleShowAllActivityToggle(_combinedMessages)]]"
     >
-      <paper-toggle-button
-        id="showAllActivityToggle"
-        checked="{{_showAllActivity}}"
-      ></paper-toggle-button
-      >Show all entries
-      <span class="transparent separator"></span>
-    </span>
+      <div id="showAllActivityToggleContainer" class="container">
+        <paper-toggle-button
+          class="showAllActivityToggle"
+          checked="{{_showAllActivity}}"
+        ></paper-toggle-button>
+        <div>
+          <span>Show all entries</span>
+          <span class="hiddenEntries" hidden$="[[_showAllActivity]]">
+            ([[_computeHiddenEntriesCount(_combinedMessages)]] hidden)
+          </span>
+        </div>
+        <span class="transparent separator"></span>
+      </div>
+    </template>
     <div class="experimentMessage">
       <iron-icon icon="gr-icons:pets"></iron-icon>
       <span>You're currently viewing an experimental Change Log view.</span>

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

@@ -207,8 +207,8 @@ suite('gr-messages-list-experimental tests', () => {
     });
 
     test('showAllActivity does not appear when all msgs are important', () => {
-      assert.isOk(element.shadowRoot
-          .querySelector('#showAllActivityToggleContainer[hidden]'));
+      assert.isNotOk(element.shadowRoot
+          .querySelector('#showAllActivityToggleContainer'));
     });
 
     test('scroll to message', () => {
@@ -430,8 +430,8 @@ suite('gr-messages-list-experimental tests', () => {
     });
 
     test('hide autogenerated button is not hidden', () => {
-      assert.isNotOk(element.shadowRoot
-          .querySelector('#showAllActivityToggle[hidden]'));
+      const toggle = dom(element.root).querySelector('.showAllActivityToggle');
+      assert.isOk(toggle);
     });
 
     test('one unimportant message is hidden initially', () => {
@@ -441,7 +441,9 @@ suite('gr-messages-list-experimental tests', () => {
 
     test('unimportant messages hidden after toggle', () => {
       element._showAllActivity = true;
-      MockInteractions.tap(element.$.showAllActivityToggle);
+      const toggle = dom(element.root).querySelector('.showAllActivityToggle');
+      assert.isOk(toggle);
+      MockInteractions.tap(toggle);
       flushAsynchronousOperations();
       const displayedMsgs = dom(element.root).querySelectorAll('gr-message');
       assert.equal(displayedMsgs.length, 2);
@@ -449,7 +451,9 @@ suite('gr-messages-list-experimental tests', () => {
 
     test('unimportant messages shown after toggle', () => {
       element._showAllActivity = false;
-      MockInteractions.tap(element.$.showAllActivityToggle);
+      const toggle = dom(element.root).querySelector('.showAllActivityToggle');
+      assert.isOk(toggle);
+      MockInteractions.tap(toggle);
       flushAsynchronousOperations();
       const displayedMsgs = dom(element.root).querySelectorAll('gr-message');
       assert.equal(displayedMsgs.length, 3);