();
10 | chrome.runtime.onMessage = {
11 | addListener: (listener: AnyFunction) => {
12 | listeners.add(listener);
13 | },
14 | removeListener: (listener: AnyFunction) => {
15 | listeners.delete(listener);
16 | },
17 | } as any;
18 | (chrome.runtime.onMessage as any)['__listeners__'] = listeners;
19 | }
20 |
--------------------------------------------------------------------------------
/src/ui/icons/delete-icon.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 |
3 | export function DeleteIcon(): Malevic.Child {
4 | return (
5 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/theme-control.less:
--------------------------------------------------------------------------------
1 | .theme-control {
2 | align-items: center;
3 | display: flex;
4 | flex-direction: row;
5 | justify-content: center;
6 | min-height: @size-control-inner;
7 | width: 100%;
8 |
9 | &__label {
10 | font-size: @size-text-normal;
11 | line-height: @size-text-normal;
12 | text-align: left;
13 | -moz-user-select: none;
14 | user-select: none;
15 | width: 50%;
16 | }
17 | }
18 |
19 | .export-theme-button {
20 | background-color: @color-control-active;
21 | border: none;
22 | height: 1.25rem;
23 | margin-bottom: 0.25rem;
24 | margin-top: 0.625rem;
25 | width: 100%;
26 | }
27 |
--------------------------------------------------------------------------------
/src/ui/popup/main-page/help.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {HELP_URL} from '../../../utils/links';
3 | import {getLocalMessage} from '../../../utils/locales';
4 | import {ControlGroup} from '../../controls';
5 |
6 | export default function HelpGroup() {
7 | return (
8 |
9 |
10 |
11 |
12 | {getLocalMessage('help')}
13 |
14 |
15 |
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/ui/options/advanced/sync-config.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import type {ViewProps} from '../../../definitions';
3 | import {CheckButton} from '../../controls';
4 |
5 | export function SyncConfig(props: ViewProps): Malevic.Child {
6 | function syncConfig(syncSitesFixes: boolean) {
7 | props.actions.changeSettings({syncSitesFixes});
8 | props.actions.loadConfig({local: !syncSitesFixes});
9 | }
10 |
11 | return (
12 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/sepia.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {getLocalMessage} from '../../../../utils/locales';
3 | import {Slider} from '../../../controls';
4 | import {formatPercent} from './format';
5 | import ThemeControl from './theme-control';
6 |
7 | export default function Sepia(props: {value: number; onChange: (v: number) => void}) {
8 | return (
9 |
10 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/controls/style.less:
--------------------------------------------------------------------------------
1 | @import "./button/style";
2 | @import "./check-button/check-button";
3 | @import "./checkbox/style";
4 | @import "./control-group/control-group";
5 | @import "./dropdown/style";
6 | @import "./message-box/style";
7 | @import "./multi-switch/style";
8 | @import "./overlay/style";
9 | @import "./shortcut/style";
10 | @import "./tab-panel/style";
11 | @import "./select/style";
12 | @import "./slider/style";
13 | @import "./text-list/style";
14 | @import "./textbox/style";
15 | @import "./time-range-picker/style";
16 | @import "./toggle/style";
17 | @import "./updown/style";
18 |
19 | @import "./color-picker/style";
20 | @import "./color-dropdown/style";
21 | @import "./nav-button/style";
22 | @import "./reset-button/style";
23 |
24 |
--------------------------------------------------------------------------------
/src/inject/dynamic-theme/watch/index.ts:
--------------------------------------------------------------------------------
1 | import type {StyleElement} from '../style-manager';
2 | import {stopWatchingForStylePositions, watchForStylePositions} from './style-position';
3 |
4 | interface ChangedStyles {
5 | created: StyleElement[];
6 | updated: StyleElement[];
7 | removed: StyleElement[];
8 | moved: StyleElement[];
9 | }
10 |
11 | export function watchForStyleChanges(
12 | currentStyles: StyleElement[],
13 | update: (styles: ChangedStyles) => void,
14 | shadowRootDiscovered: (root: ShadowRoot) => void
15 | ): void {
16 | watchForStylePositions(currentStyles, update, shadowRootDiscovered);
17 | }
18 |
19 | export function stopWatchingForStyleChanges(): void {
20 | stopWatchingForStylePositions();
21 | }
22 |
--------------------------------------------------------------------------------
/src/ui/options/general/general-tab.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import type {ViewProps} from '../../../definitions';
3 | import {isFirefox} from '../../../utils/platform';
4 | import {ChangeBrowserTheme} from './change-browser-theme';
5 | import {DetectDarkTheme} from './detect-dark-theme';
6 | import {EnabledByDefault} from './enabled-by-default';
7 | import {EnableForPDF} from './enabled-for-pdf';
8 |
9 | export function GeneralTab(props: ViewProps): Malevic.Child {
10 | return
11 |
12 |
13 | {isFirefox ? null : }
14 | {isFirefox ? : null}
15 |
;
16 | }
17 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/contrast.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {getLocalMessage} from '../../../../utils/locales';
3 | import {Slider} from '../../../controls';
4 | import {formatPercent} from './format';
5 | import ThemeControl from './theme-control';
6 |
7 | export default function Contrast(props: {value: number; onChange: (v: number) => void}) {
8 | return (
9 |
10 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/brightness.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {getLocalMessage} from '../../../../utils/locales';
3 | import {Slider} from '../../../controls';
4 | import {formatPercent} from './format';
5 | import ThemeControl from './theme-control';
6 |
7 | export default function Brightness(props: {value: number; onChange: (v: number) => void}) {
8 | return (
9 |
10 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/grayscale.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {getLocalMessage} from '../../../../utils/locales';
3 | import {Slider} from '../../../controls';
4 | import {formatPercent} from './format';
5 | import ThemeControl from './theme-control';
6 |
7 | export default function Grayscale(props: {value: number; onChange: (v: number) => void}) {
8 | return (
9 |
10 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/popup/theme/controls/scheme.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {getLocalMessage} from '../../../../utils/locales';
3 | import {DropDown} from '../../../controls';
4 | import ThemeControl from './theme-control';
5 |
6 | export default function Scheme(props: {isDark: boolean; onChange: (dark: boolean) => void}) {
7 | return (
8 |
9 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/tests/inject/karma.conf.cjs:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is necessary because Karma does not support configutation
3 | * via ES modules. This file is a CommonJS module which wraps a regular
4 | * ES module.
5 | */
6 |
7 | 'use strict';
8 |
9 | const realConfigureKarma = import('./karma.conf.js');
10 |
11 | async function configureKarma(config, env) {
12 | return ((await realConfigureKarma).configureKarma)(config, env);
13 | }
14 |
15 | /**
16 | * @param {LocalConfig} config
17 | * @returns {void}
18 | */
19 | module.exports = async (config) =>
20 | config.set(await configureKarma(config, process.env));
21 |
22 | if (process.env.NODE_ENV === 'test') {
23 | module.exports.configureKarma = async (config, env) => configureKarma(config, env);
24 | }
25 |
--------------------------------------------------------------------------------
/src/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2019",
4 | "baseUrl": "./",
5 | "module": "ES2015",
6 | "moduleResolution": "node",
7 | "lib": [
8 | "ES2022",
9 | "Dom",
10 | "DOM.Iterable"
11 | ],
12 | "types": [
13 | "chrome"
14 | ],
15 | "allowJs": true,
16 | "downlevelIteration": true,
17 | "noImplicitAny": true,
18 | "noUnusedLocals": true,
19 | "resolveJsonModule": true,
20 | "strictNullChecks": true,
21 | "jsx": "react",
22 | "jsxFactory": "m",
23 | "noEmit": true,
24 | "paths": {
25 | "@plus/*": ["./stubs/*"]
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/ui/options/advanced/fetch-news.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import type {ViewProps} from '../../../definitions';
3 | import {CheckButton} from '../../controls';
4 |
5 | export function FetchNews(props: ViewProps): Malevic.Child {
6 | function onFetchNewsChange(checked: boolean) {
7 | props.actions.changeSettings({fetchNews: checked});
8 | }
9 |
10 | return (
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/options/general/enabled-for-pdf.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import type {ViewProps} from '../../../definitions';
3 | import {CheckButton} from '../../controls';
4 |
5 | export function EnableForPDF(props: ViewProps): Malevic.Child {
6 | function onInvertPDFChange(checked: boolean) {
7 | props.actions.changeSettings({enableForPDF: checked});
8 | }
9 |
10 | return (
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/tasks/paths.js:
--------------------------------------------------------------------------------
1 | import {dirname, join} from 'node:path';
2 | import {createRequire} from 'node:module';
3 |
4 | let rootDir = dirname(createRequire(import.meta.url).resolve('../package.json'));
5 |
6 | /**
7 | * @param {string} path
8 | * @returns {string}
9 | */
10 | export const absolutePath = (path) => {
11 | return join(rootDir, path);
12 | };
13 |
14 | /**
15 | * @param {string} dir
16 | */
17 | export function setRootDir(dir) {
18 | rootDir = dir;
19 | }
20 |
21 | export function getDestDir({debug, platform}) {
22 | const buildTypeDir = `build/${debug ? 'debug' : 'release'}`;
23 | return `${buildTypeDir}/${platform}`;
24 | }
25 |
26 | export default {
27 | getDestDir,
28 | rootDir,
29 | absolutePath,
30 | setRootDir,
31 | };
32 |
--------------------------------------------------------------------------------
/src/ui/options/advanced/sync-settings.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import type {ViewProps} from '../../../definitions';
3 | import {CheckButton} from '../../controls';
4 |
5 | export function SyncSettings(props: ViewProps): Malevic.Child {
6 | function onSyncSettingsChange(checked: boolean) {
7 | props.actions.changeSettings({syncSettings: checked});
8 | }
9 |
10 | return (
11 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/ui/stylesheet-editor/index.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 | import {sync} from 'malevic/dom';
3 | import Body from './components/body';
4 | import Connector from '../connect/connector';
5 | import type {ExtensionActions, ExtensionData} from '../../definitions';
6 |
7 | function renderBody(data: ExtensionData, actions: ExtensionActions) {
8 | sync(document.body, );
9 | }
10 |
11 | async function start() {
12 | const connector = new Connector();
13 | window.addEventListener('unload', () => connector.disconnect(), {passive: true});
14 |
15 | const data = await connector.getData();
16 | renderBody(data, connector);
17 | connector.subscribeToChanges((data) => renderBody(data, connector));
18 | }
19 |
20 | start();
21 |
--------------------------------------------------------------------------------
/src/ui/icons/keyboard-icon.tsx:
--------------------------------------------------------------------------------
1 | import {m} from 'malevic';
2 |
3 | export function KeyboardIcon(): Malevic.Child {
4 | return (
5 |