Merge "Make checks UI more align with Gerrit"
diff --git a/gr-checks/externs.js b/gr-checks/externs.js
index e193ad1..84a8f03 100644
--- a/gr-checks/externs.js
+++ b/gr-checks/externs.js
@@ -3,4 +3,5 @@
  * @externs
  */
 
+// eslint-disable-next-line no-unused-vars
 function moment() {}
diff --git a/gr-checks/gr-checks-view.html b/gr-checks/gr-checks-view.html
index 0048046..1ccce37 100644
--- a/gr-checks/gr-checks-view.html
+++ b/gr-checks/gr-checks-view.html
@@ -19,6 +19,25 @@
         display: table-row;
       }
 
+      gr-dropdown-list {
+        --trigger-style: {
+          color: var(--deemphasized-text-color);
+          text-transform: none;
+          font-family: var(--font-family);
+        }
+        --trigger-hover-color: rgba(0,0,0,.6);
+      }
+      @media screen and (max-width: 50em) {
+        gr-dropdown-list {
+          --native-select-style: {
+            max-width: 5.25em;
+          }
+          --dropdown-content-stype: {
+            max-width: 300px;
+          }
+        }
+      }
+
       .headerRow {
         border-bottom: 1px solid #ddd;
       }
@@ -48,7 +67,11 @@
 
       header {
         display: flex;
-        margin: 1rem 1rem 0;
+        padding: var(--spacing-s) var(--spacing-m);
+      }
+
+      header.oldPatchset {
+        background: var(--emphasis-color);
       }
 
       table {
@@ -117,7 +140,7 @@
 
     </style>
 
-    <header>
+    <header class$="[[_computeHeaderClass(_currentPatchSet, _patchSetDropdownItems)]]">
       <div class="container">
         <template is="dom-if" if="[[_patchSetDropdownItems.length]]">
           <gr-dropdown-list
diff --git a/gr-checks/gr-checks-view.js b/gr-checks/gr-checks-view.js
index 3ce8e08..f27eb11 100644
--- a/gr-checks/gr-checks-view.js
+++ b/gr-checks/gr-checks-view.js
@@ -340,14 +340,27 @@
     _isLoading(status) {
       return status === LoadingStatus.LOADING;
     },
+
     _isEmpty(status) {
       return status === LoadingStatus.EMPTY;
     },
+
     _hasResults(status) {
       return status === LoadingStatus.RESULTS;
     },
+
     _isNotConfigured(status) {
       return status === LoadingStatus.NOT_CONFIGURED;
     },
+
+    _computeHeaderClass(currentPatchSet, sortedAllPatchsets) {
+      if (!sortedAllPatchsets
+         || sortedAllPatchsets.length < 1
+          || !currentPatchSet) {
+        return '';
+      }
+      return currentPatchSet === sortedAllPatchsets[0].value ?
+        '' : 'oldPatchset';
+    },
   });
 })();
diff --git a/gr-checks/gr-checks-view_test.html b/gr-checks/gr-checks-view_test.html
index 41f405a..4fd7fdb 100644
--- a/gr-checks/gr-checks-view_test.html
+++ b/gr-checks/gr-checks-view_test.html
@@ -115,11 +115,13 @@
     let retryCheckSpy;
     let isConfiguredSpy;
     let isConfiguredResolve;
-    let getAccountSpy; let getAccountResolve;
+    let getAccountSpy;
+    let getAccountResolve;
     let fetchJSONSpy;
     let getAccountCapabilitiesSpy;
     let getAccountCapabilitiesResolve;
-    let postSpy, postResolve, postReject;
+    let postSpy;
+    let postReject;
     setup(done => {
       sandbox = sinon.sandbox.create();
 
@@ -347,8 +349,9 @@
         postReject(new Error('random error'));
         const fireStub = sandbox.stub(element, 'fire');
         Polymer.dom.flush();
-        const checksItem = element.querySelectorAll
-            ('table > tbody > gr-checks-item')[0];
+        const checksItem = element.querySelectorAll(
+            'table > tbody > gr-checks-item'
+        )[0];
         const reRun = checksItem.querySelectorAll('td')[7];
         const reRunButton = reRun.querySelector('gr-button');
         reRunButton.click();