Add find result count/index to demo

Part of #148109

demo/client.ts

@@ -94,7 +94,8 @@ const terminalContainer = document.getElementById('terminal-container');
 const actionElements = {
   find: <HTMLInputElement>document.querySelector('#find'),
   findNext: <HTMLInputElement>document.querySelector('#find-next'),
-  findPrevious: <HTMLInputElement>document.querySelector('#find-previous')
+  findPrevious: <HTMLInputElement>document.querySelector('#find-previous'),
+  findResults: document.querySelector('#find-results')
 };
 const paddingElement = <HTMLInputElement>document.getElementById('padding');
 
@@ -398,9 +399,12 @@ function initAddons(term: TerminalType): void {
     if (!addon.canChange) {
       checkbox.disabled = true;
     }
-    if(name === 'unicode11' && checkbox.checked) {
+    if (name === 'unicode11' && checkbox.checked) {
       term.unicode.activeVersion = '11';
     }
+    if (name === 'search' && checkbox.checked) {
+      addon.instance.onDidChangeResults(e => updateFindResults(e));
+    }
     addDomListener(checkbox, 'change', () => {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
@@ -411,6 +415,8 @@ function initAddons(term: TerminalType): void {
           }, 0);
         } else if (name === 'unicode11') {
           term.unicode.activeVersion = '11';
+        } else if (name === 'search') {
+          addon.instance.onDidChangeResults(e => updateFindResults(e));
         }
       } else {
         if (name === 'webgl') {
@@ -439,6 +445,16 @@ function initAddons(term: TerminalType): void {
   container.appendChild(fragment);
 }
 
+function updateFindResults(e: { resultIndex: number, resultCount: number } | undefined) {
+  let content: string;
+  if (e === undefined) {
+    content = 'undefined';
+  } else {
+    content = `index: ${e.resultIndex}, count: ${e.resultCount}`;
+  }
+  actionElements.findResults.textContent = content;
+}
+
 function addDomListener(element: HTMLElement, type: string, handler: (...args: any[]) => any): void {
   element.addEventListener(type, handler);
   term._core.register({ dispose: () => element.removeEventListener(type, handler) });

demo/index.html

@@ -40,6 +40,7 @@
           <div style= "display:flex; flex-direction:column;">
             <label>Find next <input id="find-next"/></label>
             <label>Find previous <input id="find-previous"/></label>
+            <div>Results: <span id="find-results"></span></div>
             <label><input type="checkbox" id="regex"/>Use regex</label>
             <label><input type="checkbox" id="case-sensitive"/>Case sensitive</label>
             <label><input type="checkbox" id="whole-word"/>Whole word</label>