Start updates to to options.html
This commit is contained in:
Lesley Norton
parent
09d9b05a93
commit
66359941bf
3 changed files with 126 additions and 50 deletions
|
|
@ -3,27 +3,62 @@ body {
|
|||
color: #202023;
|
||||
}
|
||||
|
||||
h3 {
|
||||
h3:first-of-type {
|
||||
margin-block-start: 2.5rem;
|
||||
}
|
||||
|
||||
h3:first-of-type {
|
||||
margin-block-start: 1rem;
|
||||
label {
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
p,
|
||||
label {
|
||||
label > span {
|
||||
padding-block-start: 3px;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
margin-block-end: 16px;
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
p {
|
||||
color: rgb(74, 74, 79);
|
||||
}
|
||||
|
||||
.settings-group p {
|
||||
margin-inline-start: 24px;
|
||||
margin-block: 4px 8px;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
margin-inline: 0 8px;
|
||||
inline-size: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-inline: 0 auto;
|
||||
}
|
||||
|
||||
.keyboard-shortcut {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background: #202023;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
p,
|
||||
label {
|
||||
p {
|
||||
color: rgb(177, 177, 179);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,36 @@
|
|||
const NUMBER_OF_KEYBOARD_SHORTCUTS = 10;
|
||||
|
||||
async function requestPermissions() {
|
||||
const checkbox = document.querySelector("#bookmarksPermissions");
|
||||
if (checkbox.checked) {
|
||||
const granted = await browser.permissions.request({permissions: ["bookmarks"]});
|
||||
document.querySelectorAll("[data-permission-id]").forEach( async(el) => {
|
||||
const permissionId = el.dataset.permissionId;
|
||||
const permissionEnabled = await browser.permissions.contains({ permissions: [permissionId] });
|
||||
el.checked = !!permissionEnabled;
|
||||
el.addEventListener("change", async() => {
|
||||
if (el.checked) {
|
||||
const granted = await browser.permissions.request({ permissions: [permissionId] });
|
||||
if (!granted) {
|
||||
checkbox.checked = false;
|
||||
el.checked = false;
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
await browser.permissions.remove({permissions: ["bookmarks"]});
|
||||
await browser.permissions.remove({ permissions: [permissionId] });
|
||||
}
|
||||
|
||||
switch (permissionId) {
|
||||
case "bookmarks":
|
||||
browser.runtime.sendMessage({ method: "resetBookmarksContext" });
|
||||
}
|
||||
break;
|
||||
|
||||
case "nativeMessaging":
|
||||
console.log("do native messaging things");
|
||||
console.log("if disabled - remove mozilla vpn proxy configurations");
|
||||
break;
|
||||
|
||||
case "proxy":
|
||||
console.log("do proxy things...");
|
||||
console.log("if disabled - remove proxy configurations");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function enableDisableSync() {
|
||||
const checkbox = document.querySelector("#syncCheck");
|
||||
|
|
@ -26,12 +44,8 @@ async function enableDisableReplaceTab() {
|
|||
}
|
||||
|
||||
async function setupOptions() {
|
||||
const hasPermission = await browser.permissions.contains({permissions: ["bookmarks"]});
|
||||
const { syncEnabled } = await browser.storage.local.get("syncEnabled");
|
||||
const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
|
||||
if (hasPermission) {
|
||||
document.querySelector("#bookmarksPermissions").checked = true;
|
||||
}
|
||||
document.querySelector("#syncCheck").checked = !!syncEnabled;
|
||||
document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
|
||||
setupContainerShortcutSelects();
|
||||
|
|
@ -79,7 +93,6 @@ function resetOnboarding() {
|
|||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", setupOptions);
|
||||
document.querySelector("#bookmarksPermissions").addEventListener( "change", requestPermissions);
|
||||
document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
|
||||
document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
|
||||
document.querySelector("button").addEventListener("click", resetOnboarding);
|
||||
|
|
|
|||
|
|
@ -10,72 +10,100 @@
|
|||
<body>
|
||||
<form>
|
||||
<h3 data-i18n-message-id="optionalPermissions"></h3>
|
||||
<label >
|
||||
<input type="checkbox" id="bookmarksPermissions">
|
||||
<span data-i18n-message-id="enableBookMarkMenus"></span>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="bookmarks" id="bookmarksPermissions">
|
||||
<span data-i18n-message-id="enableBookMarkMenus"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="enableBookMarkMenusDescription"></em></p>
|
||||
<p data-i18n-message-id="enableBookMarkMenusDescription"></p>
|
||||
</div>
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="nativeMessaging" id="nativeMessaging">
|
||||
<span data-i18n-message-id="enableNativeMessaging"></span>
|
||||
</label>
|
||||
<p data-i18n-message-id="enableNativeMessagingDescription"></p>
|
||||
<p><em data-i18n-message-id="permissionsNote"></em></p>
|
||||
</div>
|
||||
|
||||
<div class="settings-group">
|
||||
<label class="permission">
|
||||
<input type="checkbox" data-permission-id="proxy" id="proxy">
|
||||
<span data-i18n-message-id="enableProxyPermissions"></span>
|
||||
</label>
|
||||
<p data-i18n-message-id="enableProxyPermissionsDescription"></p>
|
||||
<p><em data-i18n-message-id="permissionsNote"></em></p>
|
||||
</div>
|
||||
|
||||
<h3 data-i18n-message-id="firefoxAccountsSync"></h3>
|
||||
<div class="settings-group">
|
||||
<label>
|
||||
<input type="checkbox" id="syncCheck">
|
||||
<span data-i18n-message-id="enableSync"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="enableSyncDescription"></em></p>
|
||||
</div>
|
||||
|
||||
<h3 data-i18n-message-id="tabBehavior"></h3>
|
||||
|
||||
<div class="settings-group">
|
||||
<label>
|
||||
<input type="checkbox" id="replaceTabCheck">
|
||||
<span data-i18n-message-id="replaceTab"></span>
|
||||
</label>
|
||||
<p><em data-i18n-message-id="replaceTabDescription"></em></p>
|
||||
</div>
|
||||
|
||||
<h3 data-i18n-message-id="keyboardShortCuts"></h3>
|
||||
<p><em data-i18n-message-id="editWhichContainer"></em></p>
|
||||
<p><label>
|
||||
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="1"></span>
|
||||
<select id="open_container_0">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="2"></span>
|
||||
<select id="open_container_1">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="3"></span>
|
||||
<select id="open_container_2">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="4"></span>
|
||||
<select id="open_container_3">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="5"></span>
|
||||
<select id="open_container_4">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="6"></span>
|
||||
<select id="open_container_5">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="7"></span>
|
||||
<select id="open_container_6">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="8"></span>
|
||||
<select id="open_container_7">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="9"></span>
|
||||
<select id="open_container_8">
|
||||
</select>
|
||||
</label></p>
|
||||
<p><label>
|
||||
<p><label class="keyboard-shortcut">
|
||||
<span data-i18n-message-id="keyboardShortCut" data-i18n-placeholder="10"></span>
|
||||
<select id="open_container_9">
|
||||
</select>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue