Add support for "searching" on mobile

As of gerrit 3.0, users on mobile cannot switch back to GWTUI to search on mobile.
This change will fix this by allowing users to use a mobile search bar
in PolyGerrit.

Bug: Issue 6053
Change-Id: I968fb1b483a6adc8b98ce9ef97aa2ea7cd888f91

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

@@ -148,6 +148,9 @@ limitations under the License.
         background-color: var(--view-background-color);
         box-shadow: 0 1px 5px rgba(0, 0, 0, .3);
       }
+      #mobileSearch {
+        display: none;
+      }
       @media screen and (max-width: 50em) {
         .bigTitle {
           font-size: var(--font-size-large);
@@ -159,6 +162,9 @@ limitations under the License.
         .links > li.hideOnMobile {
           display: none;
         }
+        #mobileSearch {
+          display: inline-flex;
+        }
         .accountContainer {
           margin-left: .5em !important;
         }
@@ -196,6 +202,7 @@ limitations under the License.
             class="hideOnMobile"
             name="header-browse-source"></gr-endpoint-decorator>
         <div class="accountContainer" id="accountContainer">
+          <iron-icon id="mobileSearch" icon="gr-icons:search" on-tap='_onMobileSearchTap'></iron-icon>
           <div class$="[[_computeIsInvisible(_registerURL)]]">
             <a
                 class="registerButton"

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

@@ -323,5 +323,10 @@
     _generateSettingsLink() {
       return this.getBaseUrl() + '/settings/';
     },
+
+    _onMobileSearchTap(e) {
+      e.preventDefault();
+      this.fire('mobile-search', null, {bubbles: false});
+    },
   });
 })();

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

@@ -62,6 +62,7 @@ limitations under the License.
 <link rel="import" href="./core/gr-navigation/gr-navigation.html">
 <link rel="import" href="./core/gr-reporting/gr-reporting.html">
 <link rel="import" href="./core/gr-router/gr-router.html">
+<link rel="import" href="./core/gr-smart-search/gr-smart-search.html">
 <link rel="import" href="./diff/gr-diff-view/gr-diff-view.html">
 <link rel="import" href="./edit/gr-editor-view/gr-editor-view.html">
 <link rel="import" href="./plugins/gr-endpoint-decorator/gr-endpoint-decorator.html">
@@ -155,10 +156,16 @@ limitations under the License.
       <gr-main-header
           id="mainHeader"
           search-query="{{params.query}}"
-          class$="[[_computeShadowClass(_isShadowDom)]]">
+          class$="[[_computeShadowClass(_isShadowDom)]]"
+          on-mobile-search="_mobileSearchToggle">
       </gr-main-header>
     </gr-fixed-panel>
     <main>
+      <gr-smart-search
+          id="search"
+          search-query="{{params.query}}"
+          hidden="[[!mobileSearch]]">
+      </gr-smart-search>
       <template is="dom-if" if="[[_showChangeListView]]" restamp="true">
         <gr-change-list-view
             params="[[params]]"

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

@@ -92,6 +92,11 @@
         value: 'https://bugs.chromium.org/p/gerrit/issues/entry' +
           '?template=PolyGerrit%20Issue',
       },
+      // Used to allow searching on mobile
+      mobileSearch: {
+        type: Boolean,
+        value: false,
+      },
     },
 
     listeners: {
@@ -449,5 +454,9 @@
       this.$.reporting.reportRpcTiming(e.detail.anonymizedUrl,
           e.detail.elapsed);
     },
+
+    _mobileSearchToggle(e) {
+      this.mobileSearch = !this.mobileSearch;
+    },
   });
 })();