Move the experiment message into the middle

We have to show the container of the showAllActivity toggle even if the
toggle itself is hidden. Otherwise the flex layout would push the
experiment message from the middle to the left.

Change-Id: I3a15849763f31b82c34c3f8558f801ef62acd588

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

@@ -64,11 +64,11 @@ export const htmlTemplate = html`
     }
   </style>
   <div class="header">
-    <template
-      is="dom-if"
-      if="[[_isVisibleShowAllActivityToggle(_combinedMessages)]]"
-    >
-      <div id="showAllActivityToggleContainer" class="container">
+    <div id="showAllActivityToggleContainer" class="container">
+      <template
+        is="dom-if"
+        if="[[_isVisibleShowAllActivityToggle(_combinedMessages)]]"
+      >
         <paper-toggle-button
           class="showAllActivityToggle"
           checked="{{_showAllActivity}}"
@@ -80,8 +80,8 @@ export const htmlTemplate = html`
           </span>
         </div>
         <span class="transparent separator"></span>
-      </div>
-    </template>
+      </template>
+    </div>
     <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,10 @@ suite('gr-messages-list-experimental tests', () => {
     });
 
     test('showAllActivity does not appear when all msgs are important', () => {
-      assert.isNotOk(element.shadowRoot
+      assert.isOk(element.shadowRoot
           .querySelector('#showAllActivityToggleContainer'));
+      assert.isNotOk(element.shadowRoot
+          .querySelector('.showAllActivityToggle'));
     });
 
     test('scroll to message', () => {