Improving count label in dashboard

As Ux proposed, we use Grey 700 to display number of changes. We also
display just the number of changes. On hover, only the section title
is underlined.

Bug: Issue 11705
Change-Id: Id99c257a5feb3bbdc77309d0b95df7376e0b609a

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

@@ -36,6 +36,18 @@ limitations under the License.
         border-collapse: collapse;
         width: 100%;
       }
+      .section-count-label {
+        color: var(--deemphasized-text-color);
+      }
+      a.section-title:hover {
+        text-decoration: none;
+      }
+      a.section-title:hover .section-count-label {
+        text-decoration: none;
+      }
+      a.section-title:hover .section-name {
+        text-decoration: underline;
+      }
     </style>
     <table id="changeList">
       <tr class="topHeader">
@@ -69,8 +81,9 @@ limitations under the License.
             <td class="star" hidden$="[[!showStar]]" hidden></td>
             <td class="cell"
                 colspan$="[[_computeColspan(changeTableColumns, labelNames)]]">
-              <a href$="[[_sectionHref(changeSection.query)]]">
+              <a href$="[[_sectionHref(changeSection.query)]]" class="section-title">
-                [[changeSection.name]]
+                <span class="section-name">[[changeSection.name]]</span>
+                <span class="section-count-label">[[changeSection.countLabel]]</span>
               </a>
             </td>
           </tr>

polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view.js

@@ -210,7 +210,8 @@
               this._showNewUserHelp = lastResultSet.length == 0;
             }
             this._results = changes.map((results, i) => ({
-              name: this._computeSectionName(res.sections[i].name, results),
+              name: res.sections[i].name,
+              countLabel: this._computeSectionCountLabel(results),
               query: res.sections[i].query,
               results,
               isOutgoing: res.sections[i].isOutgoing,
@@ -220,15 +221,14 @@
           });
     },
 
-    _computeSectionName(name, changes) {
+    _computeSectionCountLabel(changes) {
       if (!changes || !changes.length || changes.length == 0) {
-        return name;
+        return '';
       }
       const more = changes[changes.length - 1]._more_changes;
       const numChanges = changes.length;
       const andMore = more ? ' and more' : '';
-      const changeLabel = `change${numChanges > 1 ? 's' : ''}`;
+      return `(${numChanges}${andMore})`;
-      return `${name} (${numChanges} ${changeLabel}${andMore})`;
     },
 
     _computeUserHeaderClass(params) {

polygerrit-ui/app/elements/change-list/gr-dashboard-view/gr-dashboard-view_test.html

@@ -149,28 +149,24 @@ limitations under the License.
       assert.equal(element._computeTitle('not self'), 'Dashboard for not self');
     });
 
-    suite('_computeSectionName', () => {
+    suite('_computeSectionCountLabel', () => {
-      test('empty changes dont change name', () => {
+      test('empty changes dont count label', () => {
-        const name = 'Work in progress';
+        assert.equal('', element._computeSectionCountLabel([]));
-        assert.equal(name, element._computeSectionName(name, []));
       });
 
       test('1 change', () => {
-        const name = 'Work in progress';
+        assert.equal('(1)',
-        assert.equal(name + ' (1 change)',
+            element._computeSectionCountLabel(['1']));
-            element._computeSectionName(name, ['1']));
       });
 
       test('2 changes', () => {
-        const name = 'Work in progress';
+        assert.equal('(2)',
-        assert.equal(name + ' (2 changes)',
+            element._computeSectionCountLabel(['1', '2']));
-            element._computeSectionName(name, ['1', '2']));
       });
 
       test('1 change and more', () => {
-        const name = 'Work in progress';
+        assert.equal('(1 and more)',
-        assert.equal(name + ' (1 change and more)',
+            element._computeSectionCountLabel([{_more_changes: true}]));
-            element._computeSectionName(name, [{_more_changes: true}]));
       });
     });
 
@@ -305,7 +301,7 @@ limitations under the License.
 
       return element._fetchDashboardChanges({sections}, false).then(() => {
         assert.equal(element._results.length, 1);
-        assert.equal(element._results[0].name, 'test2 (1 change)');
+        assert.equal(element._results[0].name, 'test2');
       });
     });
 

polygerrit-ui/app/styles/themes/app-theme.html

@@ -30,7 +30,7 @@ html {
   --primary-text-color: black;
   --link-color: #2a66d9;
   --comment-text-color: black;
-  --deemphasized-text-color: #757575;
+  --deemphasized-text-color: #616161;
   --default-button-text-color: #2a66d9;
   --error-text-color: red;
   --primary-button-text-color: white;

polygerrit-ui/app/styles/themes/dark-theme.html

@@ -30,7 +30,7 @@ limitations under the License.
       --primary-text-color: #e8eaed;
       --link-color: #8ab4f8;
       --comment-text-color: var(--primary-text-color);
-      --deemphasized-text-color: #9aa0a6;
+      --deemphasized-text-color: #9e9e9e;
       --default-button-text-color: #8ab4f8;
       --error-text-color: red;
       --primary-button-text-color: var(--primary-text-color);
@@ -59,7 +59,7 @@ limitations under the License.
       --shell-command-background-color: #5f5f5f;
       --shell-command-decoration-background-color: #999;
       --table-header-background-color: #131416;
-      --table-subheader-background-color: #3c4043;
+      --table-subheader-background-color: rgba(158, 158, 158, 0.24);
       --tooltip-background-color: #111;
       --unresolved-comment-background-color: #385a9a;
       --view-background-color: #131416;