Add selected text to label picker

If no item is selected (and has no default), add 'No value selected'
text, so that the empty space doesn't look strange.

Bug: Issue 6306
Change-Id: I5c779416b7f330b2d683509a22b905ee8194557d

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.html

@@ -41,6 +41,15 @@ limitations under the License.
       .placeholder::before {
         content: ' ';
       }
+      .selectedValueText {
+        color: #666;
+        font-style: italic;
+        margin-bottom: .5em;
+        margin-left: calc(25% + .5em);
+      }
+      .selectedValueText.hidden {
+        display: none;
+      }
       iron-selector > gr-button:first-of-type {
         border-bottom-left-radius: 2px;
         border-top-left-radius: 2px;
@@ -65,6 +74,9 @@ limitations under the License.
           text-align: center;
           width: 100%;
         }
+        .selectedValueText {
+          display: none;
+        }
       }
     </style>
     <div class="labelContainer">
@@ -78,7 +90,8 @@ limitations under the License.
       <iron-selector
           attr-for-selected="value"
           selected="[[_computeLabelValue(labels, permittedLabels, label)]]"
-          hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]">
+          hidden$="[[!_computeAnyPermittedLabelValues(permittedLabels, label.name)]]"
+          on-selected-item-changed="_setSelectedValueText">
         <template is="dom-repeat"
             items="[[_computePermittedLabelValues(permittedLabels, label.name)]]"
             as="value">
@@ -96,6 +109,9 @@ limitations under the License.
           hidden$="[[_computeAnyPermittedLabelValues(permittedLabels, label.name)]]">
         You don't have permission to edit this label.
       </span>
+      <div class$="selectedValueText [[_computeHiddenClass(permittedLabels, label.name)]]">
+        <span id="selectedValueLabel">[[_selectedValueText]]</span>
+      </div>
     </div>
   </template>
   <script src="gr-label-score-row.js"></script>

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row.js

@@ -25,7 +25,10 @@
       },
       permittedLabels: Object,
       labelValues: Object,
-      _selectedValueText: String,
+      _selectedValueText: {
+        type: String,
+        value: 'No value selected',
+      },
     },
 
     get selectedItem() {
@@ -74,10 +77,22 @@
       return null;
     },
 
+    _setSelectedValueText(e) {
+      // Needed because when the selected item changes, it first changes to
+      // nothing and then to the new item.
+      if (!e.target.selectedItem) { return; }
+      this._selectedValueText = e.target.selectedItem.getAttribute('title');
+    },
+
     _computeAnyPermittedLabelValues(permittedLabels, label) {
       return permittedLabels.hasOwnProperty(label);
     },
 
+    _computeHiddenClass(permittedLabels, label) {
+      return !this._computeAnyPermittedLabelValues(permittedLabels, label) ?
+          'hidden' : '';
+    },
+
     _computePermittedLabelValues(permittedLabels, label) {
       return permittedLabels[label];
     },

polygerrit-ui/app/elements/change/gr-label-score-row/gr-label-score-row_test.html

@@ -110,6 +110,7 @@ limitations under the License.
       assert.equal(element.selectedValue, -1);
       assert.equal(element.selectedItem
           .textContent.trim(), '-1');
+      assert.equal(element.$.selectedValueLabel.textContent.trim(), 'bad');
     });
 
     test('correct item is selected', () => {
@@ -118,6 +119,7 @@ limitations under the License.
       assert.equal(
           element.$$('iron-selector').selectedItem
               .textContent.trim(), '+1');
+      assert.equal(element.$.selectedValueLabel.textContent.trim(), 'good');
     });
 
     test('do not display tooltips on touch devices', () => {
@@ -176,7 +178,7 @@ limitations under the License.
         },
         'Verified': {
           values: {
-            '0': 'No score',
+            ' 0': 'No score',
             '+1': 'good',
             '+2': 'excellent',
             '-1': 'bad',
@@ -185,11 +187,11 @@ limitations under the License.
           default_value: 0,
         },
       };
-      flushAsynchronousOperations();
       const selector = element.$$('iron-selector');
       element.set('label', {name: 'Verified', value: 0});
       flushAsynchronousOperations();
       assert.equal(selector.selected, 0); // value 0
+      assert.equal(element.$.selectedValueLabel.textContent.trim(), 'No score');
     });
 
     test('without permitted labels', () => {