Skip to content

Commit b4c8f07

Browse files
alexanderbyalexanderby
committed
Separate Settings page
1 parent 5051b2f commit b4c8f07

7 files changed

Lines changed: 87 additions & 0 deletions

File tree

‎src/background/messenger.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default class Messenger {
4545
const allowedSenderURL = [
4646
chrome.runtime.getURL('/ui/popup/index.html'),
4747
chrome.runtime.getURL('/ui/devtools/index.html'),
48+
chrome.runtime.getURL('/ui/options/index.html'),
4849
chrome.runtime.getURL('/ui/stylesheet-editor/index.html'),
4950
];
5051
if (allowedSenderURL.includes(sender.url!)) {

‎src/ui/options/components/body.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import {m} from 'malevic';
2+
export default function Body(): Malevic.Child {
3+
return (
4+
<body>
5+
<header>
6+
<img id="logo" src="../assets/images/darkreader-type.svg" alt="Dark Reader" />
7+
<h1 id="title">Settings</h1>
8+
</header>
9+
</body>
10+
);
11+
}

‎src/ui/options/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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 {DevToolsData, ExtensionData} from '../../definitions';
6+
7+
declare const __CHROMIUM_MV3__: boolean;
8+
9+
function renderBody(data: ExtensionData, devToolsData: DevToolsData, actions: Connector) {
10+
sync(document.body, <Body data={data} devtools={devToolsData} actions={actions} />);
11+
}
12+
13+
async function start(): Promise<void> {
14+
const connector = new Connector();
15+
window.addEventListener('unload', () => connector.disconnect(), {passive: true});
16+
17+
let [data, devToolsData] = await Promise.all([
18+
connector.getData(),
19+
connector.getDevToolsData(),
20+
]);
21+
renderBody(data, devToolsData, connector);
22+
connector.subscribeToChanges(async (data_) => {
23+
data = data_;
24+
devToolsData = await connector.getDevToolsData();
25+
renderBody(data, devToolsData, connector);
26+
});
27+
}
28+
29+
start();
30+
31+
if (__CHROMIUM_MV3__) {
32+
// See getExtensionPageTabMV3() for explanation of what it is
33+
chrome.runtime.onMessage.addListener((message, _, sendResponse) => {
34+
if (message === 'getExtensionPageTabMV3_ping') {
35+
sendResponse('getExtensionPageTabMV3_pong');
36+
}
37+
});
38+
}

‎src/ui/options/style.less‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@import "../theme";
2+
@import "../shared";
3+
4+
#logo {
5+
display: inline-block;
6+
font-size: @size-text-large;
7+
height: @size-control-inner;
8+
width: 15rem;
9+
}
10+
11+
#title {
12+
align-items: stretch;
13+
display: inline-flex;
14+
flex-direction: row;
15+
font-size: @size-control-inner * 4 / 3;
16+
font-weight: 100;
17+
line-height: @size-control-inner;
18+
height: @size-control-inner;
19+
margin: 0 0 0 @indent-small;
20+
text-transform: uppercase;
21+
transform: translateY(-0.0625rem);
22+
}

‎tasks/bundle-css.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ const cssEntries = [
2020
src: 'src/ui/devtools/style.less',
2121
dest: 'ui/devtools/style.css',
2222
},
23+
{
24+
src: 'src/ui/options/style.less',
25+
dest: 'ui/options/style.css',
26+
},
2327
{
2428
src: 'src/ui/popup/style.less',
2529
dest: 'ui/popup/style.css',

‎tasks/bundle-html.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,12 @@ const copyEntries = [
6363
args: [true, true, true],
6464
reloadType: reload.UI,
6565
},
66+
{
67+
title: 'Dark Reader settings',
68+
dest: 'ui/options/index.html',
69+
args: [false, true, false],
70+
reloadType: reload.UI,
71+
},
6672
{
6773
title: 'Dark Reader developer tools',
6874
dest: 'ui/devtools/index.html',

‎tasks/bundle-js.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,11 @@ const jsEntries = [
5757
dest: 'ui/devtools/index.js',
5858
reloadType: reload.UI,
5959
},
60+
{
61+
src: 'src/ui/options/index.tsx',
62+
dest: 'ui/options/index.js',
63+
reloadType: reload.UI,
64+
},
6065
{
6166
src: 'src/ui/popup/index.tsx',
6267
dest: 'ui/popup/index.js',

0 commit comments

Comments
 (0)