Display the index of the currently active search result in the matches counter of the findbar (issue 6993, bug 1062025)

For the `PDFFindBar` implementation, similar to the native Firefox findbar, the matches count displayed is now limited to a (hopefully) reasonable value.

*Please note:* In order to enable this feature in the `MOZCENTRAL` version, a follow-up patch will be required once this has landed in `mozilla-central`.

l10n/en-US/viewer.properties

@@ -167,6 +167,13 @@ find_highlight=Highlight all
 find_match_case_label=Match case
 find_reached_top=Reached top of document, continued from bottom
 find_reached_bottom=Reached end of document, continued from top
+# LOCALIZATION NOTE (find_matches_count): "{{current}}" and "{{total}}" will be
+# replaced by a number representing the index of the currently active find result,
+# respectively a number representing the total number of matches in the document.
+find_matches_count={{current}} of {{total}} matches
+# LOCALIZATION NOTE (find_matches_count_limit): "{{limit}}" will be replaced by
+# a numerical value.
+find_matches_count_limit=More than {{limit}} matches
 find_not_found=Phrase not found
 
 # Error panel labels

l10n/sv-SE/viewer.properties

@@ -167,6 +167,13 @@ find_highlight=Markera alla
 find_match_case_label=Matcha versal/gemen
 find_reached_top=Nådde början av dokumentet, började från slutet
 find_reached_bottom=Nådde slutet på dokumentet, började från början
+# LOCALIZATION NOTE (find_matches_count): "{{current}}" and "{{total}}" will be
+# replaced by a number representing the index of the currently active find result,
+# respectively a number representing the total number of matches in the document.
+find_matches_count={{current}} av {{total}} matchande
+# LOCALIZATION NOTE (find_matches_count_limit): "{{limit}}" will be replaced by
+# a numerical value.
+find_matches_count_limit=Fler än {{limit}} matchningar
 find_not_found=Frasen hittades inte
 
 # Error panel labels

web/app.js

@@ -54,6 +54,7 @@ const FORCE_PAGES_LOADED_TIMEOUT = 10000; // ms
 
 const DefaultExternalServices = {
   updateFindControlState(data) {},
+  updateFindMatchesCount(data) {},
   initPassiveLoading(callbacks) {},
   fallback(data, callback) {},
   reportTelemetry(data) {},
@@ -345,20 +346,22 @@ let PDFViewerApplication = {
       pdfViewer: this.pdfViewer,
       eventBus,
     });
-    this.findController.onUpdateResultsCount = (matchCount) => {
+    this.findController.onUpdateResultsCount = (matchesCount) => {
       if (this.supportsIntegratedFind) {
-        return;
+        this.externalServices.updateFindMatchesCount(matchesCount);
+      } else {
+        this.findBar.updateResultsCount(matchesCount);
       }
-      this.findBar.updateResultsCount(matchCount);
     };
-    this.findController.onUpdateState = (state, previous, matchCount) => {
+    this.findController.onUpdateState = (state, previous, matchesCount) => {
       if (this.supportsIntegratedFind) {
         this.externalServices.updateFindControlState({
           result: state,
           findPrevious: previous,
+          matchesCount,
         });
       } else {
-        this.findBar.updateUIState(state, previous, matchCount);
+        this.findBar.updateUIState(state, previous, matchesCount);
       }
     };
 

web/firefoxcom.js

@@ -209,6 +209,10 @@ PDFViewerApplication.externalServices = {
     FirefoxCom.request('updateFindControlState', data);
   },
 
+  updateFindMatchesCount(data) {
+    // FirefoxCom.request('updateFindMatchesCount', data);
+  },
+
   initPassiveLoading(callbacks) {
     let pdfDataRangeTransport;
 

web/pdf_find_bar.js

@@ -16,6 +16,8 @@
 import { FindState } from './pdf_find_controller';
 import { NullL10n } from './ui_utils';
 
+const MATCHES_COUNT_LIMIT = 1000;
+
 /**
  * Creates a "search bar" given a set of DOM elements that act as controls
  * for searching or for setting search preferences in the UI. This object
@@ -102,7 +104,7 @@ class PDFFindBar {
     });
   }
 
-  updateUIState(state, previous, matchCount) {
+  updateUIState(state, previous, matchesCount) {
     let notFound = false;
     let findMsg = '';
     let status = '';
@@ -143,26 +145,34 @@ class PDFFindBar {
       this._adjustWidth();
     });
 
-    this.updateResultsCount(matchCount);
+    this.updateResultsCount(matchesCount);
   }
 
-  updateResultsCount(matchCount) {
+  updateResultsCount({ current, total, }) {
     if (!this.findResultsCount) {
       return; // No UI control is provided.
     }
+    let matchesCountMsg = '';
 
-    if (!matchCount) {
-      // If there are no matches, hide and reset the counter.
-      this.findResultsCount.classList.add('hidden');
-      this.findResultsCount.textContent = '';
-    } else {
-      // Update and show the match counter.
-      this.findResultsCount.textContent = matchCount.toLocaleString();
-      this.findResultsCount.classList.remove('hidden');
+    if (total) {
+      if (total > MATCHES_COUNT_LIMIT) {
+        matchesCountMsg = this.l10n.get('find_matches_count_limit', {
+          limit: MATCHES_COUNT_LIMIT.toLocaleString(),
+        }, 'More than {{limit}} matches');
+      } else {
+        matchesCountMsg = this.l10n.get('find_matches_count', {
+          current: current.toLocaleString(),
+          total: total.toLocaleString(),
+        }, '{{current}} of {{total}} matches');
+      }
     }
-    // Since `updateResultsCount` may be called from `PDFFindController`,
-    // ensure that the width of the findbar is always updated correctly.
-    this._adjustWidth();
+    Promise.resolve(matchesCountMsg).then((msg) => {
+      this.findResultsCount.textContent = msg;
+      this.findResultsCount.classList[!total ? 'add' : 'remove']('hidden');
+      // Since `updateResultsCount` may be called from `PDFFindController`,
+      // ensure that the width of the findbar is always updated correctly.
+      this._adjustWidth();
+    });
   }
 
   open() {

web/pdf_find_controller.js

@@ -68,7 +68,7 @@ class PDFFindController {
     this.pageContents = []; // Stores the text for each page.
     this.pageMatches = [];
     this.pageMatchesLength = null;
-    this.matchCount = 0;
+    this.matchesCountTotal = 0;
     this.selected = { // Currently selected match.
       pageIdx: -1,
       matchIdx: -1,
@@ -269,8 +269,9 @@ class PDFFindController {
     }
 
     // Update the match count.
-    if (this.pageMatches[pageIndex].length > 0) {
-      this.matchCount += this.pageMatches[pageIndex].length;
+    const pageMatchesCount = this.pageMatches[pageIndex].length;
+    if (pageMatchesCount > 0) {
+      this.matchesCountTotal += pageMatchesCount;
       this._updateUIResultsCount();
     }
   }
@@ -338,7 +339,7 @@ class PDFFindController {
       this.hadMatch = false;
       this.resumePageIdx = null;
       this.pageMatches = [];
-      this.matchCount = 0;
+      this.matchesCountTotal = 0;
       this.pageMatchesLength = null;
 
       for (let i = 0; i < numPages; i++) {
@@ -475,16 +476,32 @@ class PDFFindController {
     }
   }
 
-  _updateUIResultsCount() {
-    if (this.onUpdateResultsCount) {
-      this.onUpdateResultsCount(this.matchCount);
+  _requestMatchesCount() {
+    const { pageIdx, matchIdx, } = this.selected;
+    let current = 0;
+    if (matchIdx !== -1) {
+      for (let i = 0; i < pageIdx; i++) {
+        current += (this.pageMatches[i] && this.pageMatches[i].length) || 0;
+      }
+      current += matchIdx + 1;
     }
+    return { current, total: this.matchesCountTotal, };
+  }
+
+  _updateUIResultsCount() {
+    if (!this.onUpdateResultsCount) {
+      return;
+    }
+    const matchesCount = this._requestMatchesCount();
+    this.onUpdateResultsCount(matchesCount);
   }
 
   _updateUIState(state, previous) {
-    if (this.onUpdateState) {
-      this.onUpdateState(state, previous, this.matchCount);
+    if (!this.onUpdateState) {
+      return;
     }
+    const matchesCount = this._requestMatchesCount();
+    this.onUpdateState(state, previous, matchesCount);
   }
 }
 

web/viewer.html

@@ -109,10 +109,10 @@ See https://github.com/adobe-type-tools/cmap-resources
             <label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
             <input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
             <label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
-            <span id="findResultsCount" class="toolbarLabel hidden"></span>
           </div>
 
           <div id="findbarMessageContainer">
+            <span id="findResultsCount" class="toolbarLabel hidden"></span>
             <span id="findMsg" class="toolbarLabel"></span>
           </div>
         </div>  <!-- findbar -->