Fix binding for visible file number

File numbers were added to the diff view in c5069b1cd2, but would not
appear because the binding passed the file number whereas the visibility
method expected a file path. With this change, the method is rewritten
to accept the file number and a JSDoc comment is added to prevent the
type mismatch. The CSS is also modified to hide the element until the
dependent properties have evaluated.

Bug: Issue 4917
Change-Id: I7b880e65612e3b75e80b66dfd7a258608199c49b

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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index fd68d83..22433fc 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -124,10 +124,12 @@
       .editMode .hideOnEdit {
         display: none;
       }
-      .blameLoader {
+      .blameLoader,
+      .fileNum {
         display: none;
       }
       .blameLoader.show,
+      .fileNum.show ,
       .download,
       .preferences,
       .rightControls {
@@ -230,7 +232,7 @@
           </div>
         </h3>
         <div class="navLinks desktop">
-          <span class$="fileNum [[_computeFileNumVisible(_fileNum, _formattedFiles)]]">
+          <span class$="fileNum [[_computeFileNumClass(_fileNum, _formattedFiles)]]">
             File [[_fileNum]] of [[_formattedFiles.length]]
             <span class="separator"></span>
           </span>

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

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
index cd06174..5b85c20 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
@@ -959,14 +959,16 @@
       return files.findIndex(({value}) => value === file) + 1;
     },
 
-    _computeFileNumVisible(file, files) {
-      if (!files) { return 'hidden'; }
-      const fileNum = this._computeFileNum(file, files);
-      if (!isNaN(fileNum) && isFinite(fileNum) && fileNum > 0) {
-        return '';
-      } else {
-        return 'hidden';
+    /**
+     * @param {number} fileNum
+     * @param {!Array<string>} files
+     * @return {string}
+     */
+    _computeFileNumClass(fileNum, files) {
+      if (files && fileNum > 0) {
+        return 'show';
       }
+      return '';
     },
   });
 })();

polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html

diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
index 6dff570..7c94a00 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
@@ -988,10 +988,10 @@
           [{value: '/foo'}, {value: '/bar'}]), 2);
     });
 
-    test('_computeFileNumVisible', () => {
-      assert.equal(element._computeFileNumVisible('', []), 'hidden');
-      assert.equal(element._computeFileNumVisible('/bar',
-          [{value: '/foo'}, {value: '/bar'}]), '');
+    test('_computeFileNumClass', () => {
+      assert.equal(element._computeFileNumClass(0, []), '');
+      assert.equal(element._computeFileNumClass(1,
+          [{value: '/foo'}, {value: '/bar'}]), 'show');
     });
 
     suite('editMode behavior', () => {