Userscript
@@ -657,8 +673,8 @@
transform: scale(0.9);
}
- .header :global(label) {
- font-size: 1.25rem !important;
+ .header :global(button:nth-of-type(4)) {
+ --toggle-font-size: 1.25rem;
}
.error,
@@ -673,13 +689,15 @@
text-align: center;
}
- .error :global(button) {
+ .error :global(button),
+ .warn :global(button:has(svg)) {
position: absolute;
right: 0.5rem;
top: 0;
}
- .error :global(button svg) {
+ .error :global(button svg),
+ .warn :global(button svg) {
transform: scale(0.5);
}
diff --git a/src/ext/background/main.js b/src/ext/background/main.js
index e0530cae..87b3cb5b 100644
--- a/src/ext/background/main.js
+++ b/src/ext/background/main.js
@@ -78,8 +78,8 @@ async function setBadgeCount() {
"global_active",
"toolbar_badge_count",
]);
- if (settings.global_active === false) return clearBadge();
- if (settings.toolbar_badge_count === false) return clearBadge();
+ if (settings["global_active"] === false) return clearBadge();
+ if (settings["toolbar_badge_count"] === false) return clearBadge();
const currentTab = await browser.tabs.getCurrent();
// no active tabs exist (user closed all windows)
@@ -297,6 +297,9 @@ async function handleMessage(request, sender, sendResponse) {
// send request to swift layer to provide code for page url
const message = { name: "REQ_USERSCRIPTS", url, isTop };
const response = await sendNativeMessage(message);
+ if (import.meta.env.MODE === "development") {
+ console.debug("REQ_USERSCRIPTS", message, response);
+ }
// if request failed, send error to content script for logging
if (response.error) return sendResponse(response);
// sort files
diff --git a/src/ext/content-scripts/entry-userscripts.js b/src/ext/content-scripts/entry-userscripts.js
index ab620622..94ca0633 100644
--- a/src/ext/content-scripts/entry-userscripts.js
+++ b/src/ext/content-scripts/entry-userscripts.js
@@ -139,6 +139,9 @@ async function injection() {
const response = await browser.runtime.sendMessage({
name: "REQ_USERSCRIPTS",
});
+ if (import.meta.env.MODE === "development") {
+ console.debug("REQ_USERSCRIPTS", response);
+ }
// cancel injection if errors detected
if (!response || response.error) {
console.error(response?.error || "REQ_USERSCRIPTS returned undefined");
diff --git a/src/ext/extension-page/App.svelte b/src/ext/extension-page/App.svelte
index a457e035..b7e5974b 100644
--- a/src/ext/extension-page/App.svelte
+++ b/src/ext/extension-page/App.svelte
@@ -1,10 +1,11 @@
-
+
{#if $state.includes("init")}
@@ -88,7 +83,11 @@
notifications.remove(item.id)} {item} />
{/each}
-{#if $state.includes("settings")}{/if}
+{#if $state.includes("settings")}
+ state.remove("settings")} let:navRegister>
+
+
+{/if}
diff --git a/src/ext/extension-page/Components/Editor/CodeMirror.svelte b/src/ext/extension-page/Components/Editor/CodeMirror.svelte
index e0c39081..2eebb3d4 100644
--- a/src/ext/extension-page/Components/Editor/CodeMirror.svelte
+++ b/src/ext/extension-page/Components/Editor/CodeMirror.svelte
@@ -65,10 +65,13 @@
// update settings when changed
$: if (instance) {
- instance.setOption("autoCloseBrackets", $settings.autoCloseBrackets);
- instance.setOption("showInvisibles", $settings.showInvisibles);
- instance.setOption("tabSize", parseInt($settings.tabSize, 10));
- instance.setOption("indentUnit", parseInt($settings.tabSize, 10));
+ instance.setOption("autoCloseBrackets", $settings["editor_close_brackets"]);
+ instance.setOption("showInvisibles", $settings["editor_show_whitespace"]);
+ instance.setOption("tabSize", parseInt($settings["editor_tab_size"], 10));
+ instance.setOption(
+ "indentUnit",
+ parseInt($settings["editor_tab_size"], 10),
+ );
}
// store cursor position and disable on save
@@ -100,20 +103,20 @@
}
// track lint settings and update accordingly
- $: if (instance && $settings.lint) {
+ $: if (instance && $settings["editor_javascript_lint"]) {
toggleLint("enable");
- } else if (instance && !$settings.lint) {
+ } else if (instance && !$settings["editor_javascript_lint"]) {
toggleLint("disable");
}
export function init() {
// do lint settings check
- const lint = $settings.lint ? lintOptions : false;
+ const lint = $settings["editor_javascript_lint"] ? lintOptions : false;
// create codemirror instance
instance = CodeMirror.fromTextArea(textarea, {
mode: "javascript",
- autoCloseBrackets: $settings.autoCloseBrackets,
+ autoCloseBrackets: $settings["editor_close_brackets"],
continueComments: true,
foldGutter: true,
lineNumbers: true,
@@ -121,9 +124,9 @@
matchBrackets: true,
smartIndent: true,
styleActiveLine: true,
- indentUnit: parseInt($settings.tabSize, 10),
- showInvisibles: $settings.showInvisibles,
- tabSize: parseInt($settings.tabSize, 10),
+ indentUnit: parseInt($settings["editor_tab_size"], 10),
+ showInvisibles: $settings["editor_show_whitespace"],
+ tabSize: parseInt($settings["editor_tab_size"], 10),
highlightSelectionMatches: false,
lint,
hintOptions: {
@@ -192,7 +195,7 @@
});
if (
// check if setting is enabled
- $settings.autoHint &&
+ $settings["editor_auto_hint"] &&
// ensure hinting not active already
!cm.state.completionActive &&
// not first position on the line
@@ -406,10 +409,10 @@
{#if instance}
{/if}
+
+
diff --git a/src/ext/extension-page/Components/Editor/Editor.svelte b/src/ext/extension-page/Components/Editor/Editor.svelte
index 5d831d39..362d7ed9 100644
--- a/src/ext/extension-page/Components/Editor/Editor.svelte
+++ b/src/ext/extension-page/Components/Editor/Editor.svelte
@@ -307,6 +307,7 @@
.editor__header__buttons {
display: flex;
+ margin-right: 1rem;
}
:global(.editor__header__buttons > button:nth-of-type(2)) {
diff --git a/src/ext/extension-page/Components/Editor/EditorSearch.svelte b/src/ext/extension-page/Components/Editor/EditorSearch.svelte
index cc1f70db..ad132f0e 100644
--- a/src/ext/extension-page/Components/Editor/EditorSearch.svelte
+++ b/src/ext/extension-page/Components/Editor/EditorSearch.svelte
@@ -168,9 +168,9 @@
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex;
- padding: 0.25rem 0;
+ padding: 0.25rem;
position: absolute;
- right: 0.5rem;
+ right: 1.5rem;
top: 0;
z-index: 4;
}
@@ -197,10 +197,6 @@
flex-shrink: 0;
}
- :global(button:nth-of-type(3)) {
- margin-right: 0.25rem;
- }
-
:global(div.editor__search button svg) {
width: 45%;
}
diff --git a/src/ext/extension-page/Components/ModalWrapper.svelte b/src/ext/extension-page/Components/ModalWrapper.svelte
new file mode 100644
index 00000000..826d5141
--- /dev/null
+++ b/src/ext/extension-page/Components/ModalWrapper.svelte
@@ -0,0 +1,149 @@
+
+
+
+
+
+
+
+
+ {#if nav}
+
+ {/if}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/ext/extension-page/Components/Settings.svelte b/src/ext/extension-page/Components/Settings.svelte
index 0d759d11..084472ae 100644
--- a/src/ext/extension-page/Components/Settings.svelte
+++ b/src/ext/extension-page/Components/Settings.svelte
@@ -1,341 +1,648 @@
-
-
-
-
state.remove("settings")}>
-
-
-
-
Editor Settings
-
state.remove("settings")}
- />
-
-
-
Auto Close Brackets
-
- update("autoCloseBrackets", !$settings.autoCloseBrackets)}
- />
-
-
-
Auto Hint
-
update("autoHint", !$settings.autoHint)}
- />
-
-
-
Hide Descriptions
-
update("descriptions", !$settings.descriptions)}
- />
-
-
-
Javascript Linter
-
update("lint", !$settings.lint)}
- />
-
-
-
Show Invisibles
-
update("showInvisibles", !$settings.showInvisibles)}
- />
-
-
-
Tab Size
-
+
+ {#each groups as group}
+
+
+
{gl(`settings_section_${group}`)}
+ {#if indicators.resetting}
+
+ {/if}
+ {#each groupItems(group) as item}
+ {@const ariaAttributes = {
+ "aria-labelledby": `${item.name}_label`,
+ "aria-describedby": `${item.name}_desc`,
+ }}
+
+
+ {gl(`settings_${item.name}`)}
+
+ {#if item.nodeType === "Toggle"}
+
+ settings.updateSingleSetting(item.name, !$settings[item.name])}
+ />
+ {/if}
+ {#if item.nodeType === "select"}
+
+ {/if}
+ {#if indicators.resetting && !indicators.saving[item.name] && !item.protect && (item.name !== "global_exclude_match" || !gemFocused)}
+
+ {/if}
+ {#if item.nodeType === "textarea" && item.name === "global_exclude_match"}
+ {#if indicators.saving[item.name]}
+
+ {@html iconLoader}
+ {gl(`settings_${item.name}_saving`)}
+ {/if}
+ {#if gemFocused}
+
+
+ {/if}
+
+
+
+ {#each gemParsed.items as p}
+
+ {p.start}{#if p.warn || p.error}{p.value}{:else}{p.value}{/if}{p.separ}
+ {/each}
+
+
+
+ {gl(`settings_${item.name}_refer`)}
+
+
+ {/if}
+
+ {gl(`settings_${item.name}_desc`)}
+
+
+ {/each}
-
-
-
-
Enable Injection
-
update("active", !$settings.active)}
- />
-
-
-
Show Toolbar Count
-
update("showCount", !$settings.showCount)}
- />
-
-
-
Save Location
-
-
-
-
-
-
Global exclude match patterns
-
- {#if blacklistSaving}{@html iconLoader}{/if}
+ {/each}
+
+
+
{gl(`settings_section_native`)}
+
+
+
{gl("settings_scripts_directory")}
+ {#if indicators.loading.changeSaveLocation}
+
+
{@html iconLoader}
+ {/if}
+
+
+
{gl("settings_scripts_directory_desc")}
+
+
+
+
+
{gl(`settings_section_tools`)}
+
+
+ {:else}
+
+
+
+
+
+
+ {/if}
+
{gl("settings_scripts_tools_desc")}
-
-
Information
-
- Userscripts Safari Version {$settings.version} ({$settings.build})
-
- You can review the documentation, report bugs and get more information about
- this extension by visiting
-
-
- If you enjoy using this extension, please consider
-
- on the App Store or
-
-
+
+
+
+ {gl(`settings_section_about`)}
+
+ Userscripts {import.meta.env.BROWSER ?? ""}
+ v{$settings["version"]}
+ ({$settings["build"]})
+
+ {gl("settings_about_text1")}
+
+
+
+
+ {gl("settings_about_text2")}
+
+
+
diff --git a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
index 99dacae0..df85340e 100644
--- a/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
+++ b/src/ext/extension-page/Components/Sidebar/Sidebar.svelte
@@ -21,7 +21,7 @@
// disable buttons accordingly
$: disabled = !$state.includes("ready");
- $: list = sortBy($items, $settings.sortOrder).filter(
+ $: list = sortBy($items, $settings["editor_list_sort"]).filter(
(a) => a.visible !== false,
);
@@ -175,19 +175,23 @@
}
-