Show "File X of Y" next to file navigation links in diff view Bug: Issue 4917 Change-Id: Ie993504fe80034da0e3d3ddee99687ba09ebc2ff

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 a1c7340..2ce29db 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

@@ -41,6 +41,9 @@
       :host {
         background-color: var(--view-background-color);
       }
+      .hidden {
+        display: none;
+      }
       gr-patch-range-select {
         display: block;
       }
@@ -214,6 +217,10 @@
           </div>
         </h3>
         <div class="navLinks desktop">
+          <span class$="fileNum [[_computeFileNumVisible(_fileNum, _formattedFiles)]]">
+            File [[_fileNum]] of [[_formattedFiles.length]]
+            <span class="separator"></span>
+          </span>
           <a class="navLink"
               href$="[[_computeNavLinkURL(_change, _path, _fileList, -1, 1)]]">
             Prev</a>

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 a8ada4a..bccf348 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

@@ -93,6 +93,10 @@
         type: String,
         observer: '_pathChanged',
       },
+      _fileNum: {
+        type: Number,
+        computed: '_computeFileNum(_path, _formattedFiles)',
+      },
       _loggedIn: {
         type: Boolean,
         value: false,
@@ -928,5 +932,19 @@
     _getRevisionInfo(change) {
       return new Gerrit.RevisionInfo(change);
     },
+
+    _computeFileNum(file, files) {
+      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';
+      }
+    },
   });
 })();

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 4daabe3..4565338 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

@@ -876,6 +876,19 @@
       assert.isTrue(callCompute({basePatchNum: 1, patchNum: 'edit'}));
     });
 
+    test('_computeFileNum', () => {
+      assert.equal(element._computeFileNum('/foo',
+          [{value: '/foo'}, {value: '/bar'}]), 1);
+      assert.equal(element._computeFileNum('/bar',
+          [{value: '/foo'}, {value: '/bar'}]), 2);
+    });
+
+    test('_computeFileNumVisible', () => {
+      assert.equal(element._computeFileNumVisible('', []), 'hidden');
+      assert.equal(element._computeFileNumVisible('/bar',
+          [{value: '/foo'}, {value: '/bar'}]), '');
+    });
+
     suite('editMode behavior', () => {
       setup(() => {
         element._loggedIn = true;