Skip to content

Commit

Permalink
✨ find in page (#459)
Browse files Browse the repository at this point in the history
* ✨ find in page (global keyboard shortcuts)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page (main)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page (webpack)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page (constants)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page (components)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page (tab-manager)

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page

Signed-off-by: Marc Nuri <[email protected]>

* ✨ find in page

Signed-off-by: Marc Nuri <[email protected]>

---------

Signed-off-by: Marc Nuri <[email protected]>
  • Loading branch information
manusa authored Dec 8, 2024
1 parent cb094f0 commit eeb5300
Show file tree
Hide file tree
Showing 29 changed files with 825 additions and 61 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
1 change: 1 addition & 0 deletions build-config/electronim.nuspec
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions docs/Keyboard-shortcuts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
4 changes: 2 additions & 2 deletions esm/preact.all.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 7 additions & 0 deletions src/__tests__/electron.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}),
Expand All @@ -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'
}
};
Expand Down
21 changes: 13 additions & 8 deletions src/base-window/__tests__/keyboard-shortcuts.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
7 changes: 7 additions & 0 deletions src/base-window/keyboard-shortcuts.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)));
Expand All @@ -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') {
Expand Down
2 changes: 2 additions & 0 deletions src/components/icon.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion src/components/index.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 2 additions & 0 deletions src/components/text-field.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export const TextField = ({
onInput,
onKeyDown,
value,
inputProps = {},
hasError = false
/* eslint-disable-next-line no-warning-comments */
// TODO disabled state
Expand Down Expand Up @@ -64,6 +65,7 @@ export const TextField = ({
class='text-field__input'
onFocus=${onFocus} onBlur=${onBlur}
value=${value} onInput=${onInput} onKeyDown=${onKeyDown}
...${inputProps}
/>
</div>
`;
Expand Down
6 changes: 5 additions & 1 deletion src/constants/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
110 changes: 110 additions & 0 deletions src/find-in-page/__tests__/find-in-page.browser.test.mjs
Original file line number Diff line number Diff line change
@@ -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'));
});
});
});
34 changes: 34 additions & 0 deletions src/find-in-page/__tests__/index.html.test.mjs
Original file line number Diff line number Diff line change
@@ -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']);
});
});
Loading

0 comments on commit eeb5300

Please sign in to comment.