✨ find in page

README.md

@@ -47,7 +47,8 @@ electronim
 - ⌨ Keyboard [shortcuts](docs/Keyboard-shortcuts.md)
 - 🖥️ Screen sharing
 - 🌗 Light and Dark themes with system override
-- 🗕 System Tray 
+- 🗕 System Tray
+- 🔎 Find in page
 
 ## [Screenshot](docs/Screenshots.md)
 

build-config/electronim.nuspec

@@ -38,6 +38,7 @@ Improve your productivity by combining all your instant messaging applications (
 - 🖥️ Screen sharing
 - 🌗 Light and Dark themes with system override
 - 🗕 System Tray
+- 🔎 Find in page
 
 Check the GitHub repository (https://github.com/manusa/electronim) for documentation and source code.
     </description>

docs/Keyboard-shortcuts.md

@@ -4,6 +4,7 @@
 |------------------------------------------------------------|--------------------------------|
 | `F11`                                                      | Toggle full screen.            |
 | `Ctrl+r` `Cmd+r` `F5`                                      | Reload current tab.            |
+| `Ctrl+f` `Cmd+f`                                           | Find in active tab.            |
 | `Ctrl++` `Cmd++` <br /> `Ctrl+ScrollUp` `Cmd+ScrollUp`     | Zoom in.                       |
 | `Ctrl+-` `Cmd+-` <br /> `Ctrl+ScrollDown` `Cmd+ScrollDown` | Zoom out.                      |
 | `Ctrl+0` `Cmd+0`                                           | Reset zoom.                    |

esm/preact.all.mjs

@@ -13,8 +13,8 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-import {h, render} from 'preact';
-export {h, render};
+import {h, render, createRef} from 'preact';
+export {h, render, createRef};
 export {useLayoutEffect, useReducer, useState} from 'preact/hooks';
 import htm from 'htm';
 export const html = htm.bind(h);

src/__tests__/electron.js

@@ -28,8 +28,13 @@ const mockWebContentsViewInstance = () => {
       cut: jest.fn(),
       destroy: jest.fn(),
       executeJavaScript: jest.fn(async () => {}),
+      // https://www.electronjs.org/docs/latest/api/web-contents#contentsfindinpagetext-options
+      // contents.findInPage(text[, options])
+      findInPage: jest.fn(),
       focus: jest.fn(),
       getURL: jest.fn(),
+      // https://nodejs.org/api/events.html#emitterlistenerseventname
+      listeners: jest.fn(eventName => instance.listeners[eventName] || []),
       loadURL: jest.fn(url => {
         instance.webContents.loadedUrl = url;
       }),
@@ -40,9 +45,11 @@ const mockWebContentsViewInstance = () => {
       openDevTools: jest.fn(),
       paste: jest.fn(),
       reload: jest.fn(),
+      removeAllListeners: jest.fn(),
       send: jest.fn(),
       session: {},
       setWindowOpenHandler: jest.fn(),
+      stopFindInPage: jest.fn(),
       userAgent: 'Mozilla/5.0 (X11; Fedora; Linux x86_64) AppleWebKit/1337.36 (KHTML, like Gecko) ElectronIM/13.337.0 Chrome/WillBeReplacedByLatestChromium Electron/0.0.99 Safari/537.36'
     }
   };

src/base-window/__tests__/keyboard-shortcuts.test.js

@@ -28,14 +28,19 @@ describe('Main :: Global Keyboard Shortcuts module test suite', () => {
     };
   });
   test.each([
-    {key: 'Escape', shift: false, control: false, appEvent: 'appMenuClose'},
-    {key: 'Escape', shift: false, control: false, appEvent: 'closeDialog'},
-    {key: 'F11', shift: false, control: false, appEvent: 'fullscreenToggle'},
-    {key: 'Tab', shift: false, control: true, appEvent: 'tabTraverseNext'},
-    {key: 'Tab', shift: true, control: true, appEvent: 'tabTraversePrevious'}
-  ])('Key "$key" (shift: $shift, ctrl: $control) triggers "$appEvent" app event',
-    ({key, control, shift, appEvent}) => {
-      view.listeners['before-input-event'](inputEvent, {key, control, shift});
+    {key: 'Escape', shift: false, control: false, meta: false, appEvent: 'appMenuClose'},
+    {key: 'Escape', shift: false, control: false, meta: false, appEvent: 'closeDialog'},
+    {key: 'Escape', shift: false, control: false, meta: false, appEvent: 'findInPageClose'},
+    {key: 'F11', shift: false, control: false, meta: false, appEvent: 'fullscreenToggle'},
+    {key: 'Tab', shift: false, control: true, meta: false, appEvent: 'tabTraverseNext'},
+    {key: 'Tab', shift: true, control: true, meta: false, appEvent: 'tabTraversePrevious'},
+    {key: 'f', shift: false, control: true, meta: false, appEvent: 'findInPageOpen'},
+    {key: 'F', shift: false, control: true, meta: false, appEvent: 'findInPageOpen'},
+    {key: 'f', shift: false, control: false, meta: true, appEvent: 'findInPageOpen'},
+    {key: 'F', shift: false, control: false, meta: true, appEvent: 'findInPageOpen'}
+  ])('Key "$key" (shift: $shift, ctrl: $control, meta: $meta) triggers "$appEvent" app event',
+    ({key, shift, control, meta, appEvent}) => {
+      view.listeners['before-input-event'](inputEvent, {key, control, shift, meta});
       expect(electron.ipcMain.emit).toHaveBeenCalledWith(appEvent);
     });
   describe.each([1, 2, 3, 4, 5, 6, 7, 8, 9])('Key "%s"', key => {

src/base-window/keyboard-shortcuts.js

@@ -34,6 +34,7 @@ const EVENTS = new Map();
 EVENTS.set(eventKey({key: 'Escape'}), eventAction(() => {
   eventBus.emit(APP_EVENTS.appMenuClose);
   eventBus.emit(APP_EVENTS.closeDialog);
+  eventBus.emit(APP_EVENTS.findInPageClose);
 }, {preventDefault: false}));
 
 EVENTS.set(eventKey({key: 'F11'}), eventAction(() => eventBus.emit(APP_EVENTS.fullscreenToggle)));
@@ -51,6 +52,12 @@ EVENTS.set(eventKey({key: 'Tab', control: true}), eventAction(() =>
 EVENTS.set(eventKey({key: 'Tab', shift: true, control: true}), eventAction(() =>
   eventBus.emit(APP_EVENTS.tabTraversePrevious)));
 
+const findInPageOpen = eventAction(() => eventBus.emit(APP_EVENTS.findInPageOpen));
+EVENTS.set(eventKey({key: 'f', meta: true}), findInPageOpen);
+EVENTS.set(eventKey({key: 'F', meta: true}), findInPageOpen);
+EVENTS.set(eventKey({key: 'f', control: true}), findInPageOpen);
+EVENTS.set(eventKey({key: 'F', control: true}), findInPageOpen);
+
 const registerAppShortcuts = (_, webContents) => {
   webContents.on('before-input-event', (event, {type, key, shift, control, alt, meta}) => {
     if (type === 'keyUp') {

src/components/icon.mjs

@@ -44,6 +44,8 @@ Icon.expandMore = '\ue5cf';
 Icon.help = '\ue887';
 Icon.inbox = '\ue156';
 Icon.info = '\ue88e';
+Icon.keyboardArrowDown = '\ue313';
+Icon.keyboardArrowUp = '\ue316';
 Icon.lock = '\ue88d';
 Icon.lockOpen = '\ue898';
 Icon.minimize = '\ue931';

src/components/index.mjs

@@ -14,7 +14,7 @@
    limitations under the License.
  */
 export {APP_EVENTS, CLOSE_BUTTON_BEHAVIORS, ELECTRONIM_VERSION} from '../../bundles/constants.mjs';
-export {html, render, useLayoutEffect, useReducer, useState} from '../../bundles/preact.mjs';
+export {createRef, html, render, useLayoutEffect, useReducer, useState} from '../../bundles/preact.mjs';
 
 export {Card} from './card.mjs';
 export {Checkbox} from './checkbox.mjs';

src/components/text-field.mjs

@@ -33,6 +33,7 @@ export const TextField = ({
   onInput,
   onKeyDown,
   value,
+  inputProps = {},
   hasError = false
   /* eslint-disable-next-line no-warning-comments */
   // TODO disabled state
@@ -64,6 +65,7 @@ export const TextField = ({
         class='text-field__input'
         onFocus=${onFocus} onBlur=${onBlur}
         value=${value} onInput=${onInput} onKeyDown=${onKeyDown}
+        ...${inputProps}
       />
     </div>
   `;

src/constants/index.js

@@ -39,7 +39,11 @@ const APP_EVENTS = {
   dictionaryGetEnabled: 'dictionaryGetEnabled',
   dictionaryGetMisspelled: 'dictionaryGetMisspelled',
   electronimNewVersionAvailable: 'electronimNewVersionAvailable',
-  findInPageOpenWindow: 'findInPageOpenWindow',
+  findInPage: 'findInPage',
+  findInPageFound: 'findInPageFound',
+  findInPageStop: 'findInPageStop',
+  findInPageClose: 'findInPageClose',
+  findInPageOpen: 'findInPageOpen',
   fullscreenToggle: 'fullscreenToggle',
   helpOpenDialog: 'helpOpenDialog',
   notificationClick: 'notificationClick',

src/find-in-page/__tests__/find-in-page.browser.test.mjs

@@ -0,0 +1,110 @@
+/*
+   Copyright 2024 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {jest} from '@jest/globals';
+import {loadDOM} from '../../__tests__/index.mjs';
+import {getByTestId, fireEvent, waitFor} from '@testing-library/dom';
+
+describe('Find in Page :: in browser test suite', () => {
+  let onFindInPageCallback;
+  beforeEach(async () => {
+    jest.resetModules();
+    window.electron = {
+      close: jest.fn(),
+      findInPage: jest.fn(),
+      onFindInPage: jest.fn(callback => {
+        onFindInPageCallback = callback;
+      })
+    };
+    await loadDOM({meta: import.meta, path: ['..', 'index.html']});
+  });
+  describe.each([
+    {testId: 'find-previous', icon: '\ue316', title: 'Previous', expectedFunction: 'findInPage'},
+    {testId: 'find-next', icon: '\ue313', title: 'Next', expectedFunction: 'findInPage'},
+    {testId: 'close', icon: '\ue5cd', title: 'Close', expectedFunction: 'close'}
+  ])('Has Icon button $testId entry', ({testId, icon, title, expectedFunction}) => {
+    let $iconButton;
+    beforeEach(() => {
+      $iconButton = getByTestId(document, testId);
+    });
+    test(`should have icon ${icon}`, () => {
+      expect($iconButton.textContent).toBe(icon);
+    });
+    test(`should have title ${icon}`, () => {
+      expect($iconButton.getAttribute('title')).toBe(title);
+    });
+    test('click, should invoke function', () => {
+      // When
+      fireEvent.click($iconButton);
+      // Then
+      expect(window.electron[expectedFunction]).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe('Input field', () => {
+    let $input;
+    beforeEach(() => {
+      $input = document.querySelector('.input-wrapper input');
+    });
+    test('should be focused', () => {
+      expect(document.activeElement).toBe($input);
+    });
+    test('should call findInPage on Enter', () => {
+      // Given
+      $input.value = 'test';
+      // When
+      fireEvent.keyDown($input, {key: 'Enter'});
+      // Then
+      expect(window.electron.findInPage).toHaveBeenCalledTimes(1);
+      expect(window.electron.findInPage).toHaveBeenCalledWith({text: 'test'});
+    });
+    test('should close on Escape', () => {
+      // When
+      fireEvent.keyDown($input, {key: 'Escape'});
+      // Then
+      expect(window.electron.close).toHaveBeenCalledTimes(1);
+    });
+    test('should not call findInPage on other keys', () => {
+      // When
+      fireEvent.keyDown($input, {key: 'a'});
+      // Then
+      expect(window.electron.findInPage).not.toHaveBeenCalled();
+    });
+  });
+  describe('Results', () => {
+    let $results;
+    beforeEach(() => {
+      $results = document.querySelector('.results');
+    });
+    test('should be hidden when no matches', () => {
+      // Then
+      expect($results.style.visibility).toBe('hidden');
+    });
+    test('should be visible when matches', async () => {
+      // Given
+      onFindInPageCallback(null, {matches: 1});
+      // Then
+      await waitFor(() => expect($results.style.visibility).toBe('visible'));
+    });
+    test('should show active match ordinal and total matches', async () => {
+      // Given
+      onFindInPageCallback(null, {matches: 2, activeMatchOrdinal: 1});
+      // Then
+      await waitFor(() => expect($results.textContent).toBe('1/2'));
+    });
+    test('should set focus on input', () => {
+      expect(document.activeElement).toBe(document.querySelector('.input-wrapper input'));
+    });
+  });
+});

src/find-in-page/__tests__/index.html.test.mjs

@@ -0,0 +1,34 @@
+/*
+   Copyright 2024 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {jest} from '@jest/globals';
+import {loadDOM} from '../../__tests__/index.mjs';
+
+describe('Find in Page :: index.html test suite', () => {
+  beforeEach(async () => {
+    jest.resetModules();
+    window.electron = {
+      close: jest.fn(),
+      findInPage: jest.fn(),
+      onFindInPage: jest.fn()
+    };
+    await loadDOM({meta: import.meta, path: ['..', 'index.html']});
+  });
+  test('loads required styles', () => {
+    expect(Array.from(document.querySelectorAll('link[rel=stylesheet]'))
+      .map(link => link.getAttribute('href')))
+      .toEqual(['./find-in-page.browser.css']);
+  });
+});