Skip to content

Commit a36fd65

Browse files
vorlievorlie
committed
Add bare bones dev options, isolate context, and add preload.js for exposing specific APIs
1 parent 266466a commit a36fd65

File tree

7 files changed

+225
-10
lines changed

7 files changed

+225
-10
lines changed

‎developer-options.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Iota's Notepad - Developer Options</title>
7+
<style>
8+
h1{
9+
margin: 0 0 20px;
10+
11+
}
12+
body {
13+
background-color: #1a1a1a;
14+
color: white;
15+
font-family: Arial, sans-serif;
16+
padding: 5px;
17+
}
18+
table {
19+
width: 100%;
20+
border-collapse: collapse;
21+
margin-top: 20px;
22+
}
23+
th, td {
24+
border: 1px solid #333;
25+
padding: 8px;
26+
text-align: left;
27+
}
28+
th {
29+
background-color: #333;
30+
}
31+
tr:nth-child(even) {
32+
background-color: #2a2a2a;
33+
}
34+
button {
35+
background-color: #444;
36+
color: white;
37+
border: none;
38+
padding: 6px 12px;
39+
margin: 2px 0;
40+
cursor: pointer;
41+
}
42+
button:hover {
43+
background-color: #555;
44+
}
45+
#modal {
46+
display: none;
47+
position: fixed;
48+
top: 50%;
49+
left: 50%;
50+
transform: translate(-50%, -50%);
51+
background-color: #222;
52+
color: white;
53+
padding: 20px;
54+
border: 1px solid #555;
55+
box-shadow: 0 0 10px black;
56+
z-index: 1000;
57+
max-width: 80%;
58+
max-height: 80%;
59+
overflow: auto;
60+
}
61+
#modal h2 {
62+
margin: 0 0 10px;
63+
}
64+
#modal pre {
65+
white-space: pre-wrap; /* Handle line breaks and long text */
66+
word-wrap: break-word; /* Break long words */
67+
}
68+
</style>
69+
</head>
70+
<body>
71+
<h1>Developer Options</h1>
72+
<button onclick="refreshStorage()">Refresh Local Storage</button>
73+
<div id="dev-tools">
74+
<table id="storage-table">
75+
<thead>
76+
<tr>
77+
<th>Key</th>
78+
<th>Actions</th>
79+
</tr>
80+
</thead>
81+
<tbody>
82+
</tbody>
83+
</table>
84+
</div>
85+
86+
<!-- Modal for displaying key-value -->
87+
<div id="modal">
88+
<h2>Key Details</h2>
89+
<p id="modal-key"><strong>Key:</strong> </p>
90+
<pre id="modal-value"></pre>
91+
<button onclick="closeModal()">Close</button>
92+
</div>
93+
94+
<script>
95+
96+
// Function to refresh the storage view
97+
function refreshStorage() {
98+
console.log("Refreshing local storage...");
99+
100+
const tableBody = document.querySelector("#storage-table tbody");
101+
tableBody.innerHTML = ""; // Clear previous rows
102+
103+
for (let i = 0; i < localStorage.length; i++) {
104+
const key = localStorage.key(i);
105+
const value = localStorage.getItem(key);
106+
107+
const row = document.createElement("tr");
108+
row.innerHTML = `
109+
<td>${key}</td>
110+
<td>
111+
<button onclick="viewKey('${key}')">View</button>
112+
<button onclick="deleteKey('${key}')">Delete</button>
113+
</td>
114+
`;
115+
tableBody.appendChild(row);
116+
}
117+
}
118+
119+
// Function to view key-value in a modal
120+
function viewKey(key) {
121+
console.log(`Viewing key: ${key}`);
122+
123+
const value = localStorage.getItem(key);
124+
const modal = document.getElementById("modal");
125+
const overlay = document.getElementById("overlay");
126+
127+
document.getElementById("modal-key").innerHTML = `<strong>Key:</strong> ${key}`;
128+
129+
// Process the value for JSON or format \n
130+
try {
131+
// Try parsing JSON and pretty-print
132+
console.log("Attempting to parse JSON value...");
133+
document.getElementById("modal-value").textContent = JSON.stringify(JSON.parse(value), null, 2);
134+
} catch {
135+
// Replace \n with actual line breaks for non-JSON
136+
console.log("Value is not JSON, replacing line breaks...");
137+
document.getElementById("modal-value").innerHTML = value.replace(/\n/g, "<br>");
138+
}
139+
140+
modal.style.display = "block";
141+
overlay.style.display = "block";
142+
}
143+
144+
// Function to close the modal
145+
function closeModal() {
146+
console.log("Closing modal...");
147+
document.getElementById("modal").style.display = "none";
148+
}
149+
150+
// Function to delete a key from local storage
151+
function deleteKey(key) {
152+
console.log(`Deleting key: ${key}`);
153+
localStorage.removeItem(key);
154+
refreshStorage();
155+
}
156+
157+
// Handle Escape key to close modal
158+
document.addEventListener("keydown", (e) => {
159+
if (e.key === "Escape") {
160+
console.log("Escape key pressed, closing modal...");
161+
closeModal();
162+
}
163+
});
164+
165+
// Initial load
166+
console.log("Loading initial local storage...");
167+
refreshStorage();
168+
</script>
169+
</body>
170+
</html>
171+

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ <h2 class="modal-h2">Settings</h2>
8888
<h2 class="modal-h2">About</h2>
8989
<p id="appVersion">Version: </p>
9090
<p id="electronVersion">Electron Version: </p>
91-
<button class="update-button" onclick="checkForUpdates()">Check for Updates</button>
91+
<button class="about-button" onclick="checkForUpdates()">Check for Updates</button>
92+
<button class="about-button" id="open-dev-options">Developer Options</button>
9293
</div>
9394
</div>
9495
</div>

‎index.js‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
const { app, BrowserWindow, Menu } = require('electron');
1+
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
22

33
let mainWindow;
4+
let devWindow;
45

56
app.on('ready', () => {
67
mainWindow = new BrowserWindow({
78
width: 800,
89
height: 600,
910
webPreferences: {
10-
nodeIntegration: true,
11+
contextIsolation: true,
12+
nodeIntegration: false,
13+
preload: __dirname + '/preload.js',
1114
},
1215
menuBarVisible: false,
1316
titleBarStyle: 'hidden',
1417
...(process.platform !== 'darwin' ? { titleBarOverlay: true } : {})
1518
});
1619

1720
mainWindow.setTitleBarOverlay({
18-
color: 'rgba(0, 0, 0, 0)', // 49, 50, 68
19-
symbolColor: 'rgba(205, 214, 244, 1)', // 205, 214, 244
21+
color: 'rgba(0, 0, 0, 0)', // Transparent background
22+
symbolColor: 'rgba(205, 214, 244, 1)', // Symbol color
2023
height: 48
2124
});
2225
mainWindow.setMinimumSize(950, 600);
@@ -25,10 +28,39 @@ app.on('ready', () => {
2528

2629
mainWindow.loadFile('index.html');
2730

31+
mainWindow.on('closed', () => {
32+
app.quit();
33+
});
34+
35+
ipcMain.on('open-dev-window', () => {
36+
createDevWindow();
37+
});
2838
});
2939

3040
app.on('window-all-closed', () => {
31-
if (process.platform !== 'darwin') app.quit();
41+
if (process.platform !== 'darwin') app.quit();
3242
});
3343

3444
if (require('electron-squirrel-startup')) app.quit();
45+
46+
function createDevWindow() {
47+
if (devWindow) {
48+
devWindow.focus();
49+
return;
50+
}
51+
52+
devWindow = new BrowserWindow({
53+
width: 800,
54+
height: 600,
55+
webPreferences: {
56+
nodeIntegration: true,
57+
},
58+
title: "Iota's Notepad - Developer Options"
59+
});
60+
61+
devWindow.loadFile('developer-options.html');
62+
63+
devWindow.on('closed', () => {
64+
devWindow = null;
65+
});
66+
}

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "iotas-notepad",
3-
"version": "1.1.3",
3+
"version": "1.1.4",
44
"main": "index.js",
55
"scripts": {
66
"electron": "electron .",

‎preload.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const { contextBridge, ipcRenderer } = require('electron');
2+
3+
// Expose only specific APIs to the renderer
4+
contextBridge.exposeInMainWorld('electron', {
5+
openDevWindow: () => ipcRenderer.send('open-dev-window'),
6+
});
7+

‎src/globals.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -505,7 +505,7 @@ body {
505505
margin-bottom: 10px;
506506
}
507507

508-
.settings-button, .update-button{
508+
.settings-button, .about-button{
509509
background-color: var(--button-bg-color);
510510
color: var(--button-color);
511511
border: 1px solid var(--button-border-color);
@@ -528,7 +528,7 @@ body {
528528
width: 45%; /* Set fixed width for sections */
529529
}
530530

531-
.button:hover, .settings-button:hover, .update-button:hover {
531+
.button:hover, .settings-button:hover, .about-button:hover {
532532
background-color: var(--button-bg-color-hover);
533533
}
534534

‎src/script.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
let saveTimeout;
22

3-
const version = "1.1.3";
3+
const version = "1.1.4";
44
const electronVersion = "33.2.1";
55

66
const defaultThemes = {
@@ -60,6 +60,10 @@ const defaultThemes = {
6060
}
6161
};
6262

63+
document.getElementById('open-dev-options').addEventListener('click', () => {
64+
window.electron.openDevWindow();
65+
});
66+
6367
document.addEventListener("DOMContentLoaded", () => {
6468
loadNotes();
6569
displayReleases();

0 commit comments

Comments
 (0)