From d823d8fd81c8046df412a73064c937cc26543361 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Mon, 22 Sep 2025 23:32:09 -0300 Subject: [PATCH 01/12] extension: Add per-site configuration settings modal --- web/packages/extension/assets/css/options.css | 213 +++++++- web/packages/extension/assets/options.html | 497 +++++++++++++++++- 2 files changed, 703 insertions(+), 7 deletions(-) diff --git a/web/packages/extension/assets/css/options.css b/web/packages/extension/assets/css/options.css index e199d4c77eff..75989f593a7e 100644 --- a/web/packages/extension/assets/css/options.css +++ b/web/packages/extension/assets/css/options.css @@ -12,12 +12,217 @@ padding: 24px 32px; } -#advanced-options { - color: var(--ruffle-orange); - font-size: 28px; - margin: 8px auto 0; +hr { + border: none; + height: 1px; + background-color: #546da3; + margin: 20px 0; + width: 100%; } #reset-settings { margin: 0 auto; } + +.option-title { + border-bottom: 2px solid var(--ruffle-light-blue); + padding-bottom: 8px; + margin-block-end: 0; + font-size: 1.2em; + color: var(--ruffle-orange); +} + +.option-description { + opacity: 0.8; + margin-block: 0.2em; +} + +/* Per-site settings */ + +#per-site-list { + display: flex; + flex-direction: column; + gap: 8px; +} + +.per-site-entry { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + border-radius: 8px; + background: var(--ruffle-dark-blue); +} + +.per-site-entry .site-domain { + font-weight: bold; +} + +#site-entry-new { + align-self: flex-start; +} + +/* Modal */ + +.modal-open { + overflow: hidden; +} + +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgb(0 0 0 / 70%); + display: none; + justify-content: center; + align-items: center; + z-index: 1000; +} + +.modal-content { + background: var(--ruffle-blue); + border: 2px solid var(--ruffle-light-blue); + padding: 25px; + border-radius: 8px; + width: 90%; + max-width: 800px; + max-height: 90vh; + overflow-y: auto; + box-shadow: 0 5px 15px rgb(0 0 0 / 50%); + scrollbar-width: thin; + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; +} + +.modal-header h3 { + margin: 0; + color: var(--ruffle-orange); +} + +.modal-close-btn { + font-size: 1.5rem; + cursor: pointer; + border: none; + background: none; + color: #aaa; +} + +.modal-body { + margin-top: 20px; +} + +.modal-footer { + margin-top: 25px; + display: flex; + gap: 10px; + justify-content: flex-end; +} + +/* Modal Scrollbar */ + +:root { + --scrollbar-width: 8px; + --scrollbar-track: rgb(255 255 255 / 10%); + --scrollbar-thumb: rgb(255 255 255 / 30%); + --scrollbar-thumb-hover: rgb(255 255 255 / 50%); + --scrollbar-border-radius: 4px; +} + +/* Webkit browsers (Chrome, Safari, Edge) */ +.modal-content::-webkit-scrollbar { + width: var(--scrollbar-width); + height: var(--scrollbar-width); +} + +.modal-content::-webkit-scrollbar-track { + background: var(--scrollbar-track); + border-radius: var(--scrollbar-border-radius); +} + +.modal-content::-webkit-scrollbar-thumb { + background: var(--scrollbar-thumb); + border-radius: var(--scrollbar-border-radius); + transition: background-color 0.2s ease; +} + +.modal-content::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); +} + +.modal-content::-webkit-scrollbar-corner { + background: var(--scrollbar-track); +} + +.modal-content::-webkit-scrollbar-button { + display: none; +} + +/* Sections */ + +.settings-section > * { + margin-bottom: 20px; + padding-bottom: 15px; + border-bottom: 2px solid var(--ruffle-light-blue); +} + +.settings-section > :last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +.settings-section-title { + font-size: 1.1em; + font-weight: bold; + color: var(--ruffle-orange); + margin-bottom: 10px; +} + +/* Per-site override options */ + +.settings-option { + display: grid; + grid-template-columns: 40px 1fr; + align-items: start; + gap: 15px; + padding: 12px 0; + border-bottom: 1px solid var(--ruffle-light-blue); +} + +.settings-option-toggle { + margin: auto 0; +} + +.settings-option:last-child { + border-bottom: none; +} + +.settings-option .settings-option-control.settings-option-disabled { + pointer-events: none; + opacity: 0.5; +} + +/* Per-site override option label and description */ + +.settings-option-control { + display: flex; + flex-direction: column; + gap: 5px; +} + +.settings-option-control label { + font-weight: bold; +} + +.settings-option-control small { + font-size: 0.8em; + color: #ccc; + opacity: 0.8; +} diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 6431a4121f44..571aa18d883d 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -16,7 +16,10 @@
nightly YYYY-MM-DD
+
+

Global Settings

+
@@ -33,7 +36,9 @@
-
Advanced Options
+ +

Advanced Options

+
@@ -59,15 +64,501 @@
- +
- +
+ +

Per-Site Options

+ +

Override global options for specific websites.

+ +
+
+ example.com +
+ + +
+
+ +
+ example.com +
+ + +
+
+
+ + +
+ + + + + From 3401ed49fbe71894e10e259b9f52cb8cabb0aabd Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Tue, 23 Sep 2025 02:27:55 -0300 Subject: [PATCH 02/12] extension: Improve per-site settings with detailed descriptions and select inputs --- web/packages/extension/assets/options.html | 67 +++++++++++++--------- 1 file changed, 41 insertions(+), 26 deletions(-) diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 571aa18d883d..360e70012e3d 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -153,7 +153,7 @@

Site-Specific Settings

- HTML color for the background (null for SWF default). + HTML color for the background.
@@ -162,9 +162,9 @@

Site-Specific Settings

Controls letterbox behavior when container size doesn't match movie size.
@@ -191,11 +191,11 @@

Site-Specific Settings

Controls how Ruffle is layered with other content.
@@ -205,28 +205,43 @@

Site-Specific Settings

- + Equivalent to Stage.scaleMode (e.g., "showAll", "noBorder", "exactFit", "noScale").
-
- -
- - - Equivalent to Stage.align (e.g., "TL", "TR", "BL", "BR", "T", "B", "L", "R"). -
-
+
+ +
+ + + Equivalent to Stage.align. Choose how content is anchored in the container. +
+
-
- -
- - - Equivalent to Stage.quality (e.g., "low", "medium", "high", "best"). -
-
+
+ +
+ + + Equivalent to Stage.quality (e.g., "low", "medium", "high", "best"). +
+
From f1aa35ebf48fa3200cc967ff9c8c22c75b5caae4 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Thu, 25 Sep 2025 05:15:24 -0300 Subject: [PATCH 03/12] extension: Add missing per-site configuration options --- web/packages/extension/assets/options.html | 137 ++++++++++++++++++--- 1 file changed, 123 insertions(+), 14 deletions(-) diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 360e70012e3d..381ba7a0bb6f 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -181,6 +181,27 @@

Site-Specific Settings

Show unmute overlay when player is muted.
+ +
+ +
+ + + Whether or not to show a splash screen before the SWF has loaded with Ruffle (backwards-compatibility). +
+
+ +
+ +
+ + + Values that may be passed to and loaded by the movie. +
+
@@ -242,7 +263,20 @@

Site-Specific Settings

Equivalent to Stage.quality (e.g., "low", "medium", "high", "best").
- + +
+ +
+ + + Defines the scrolling behavior of Flash content on the web page. +
+
+
Performance
@@ -319,6 +353,46 @@

Site-Specific Settings

Console logging level for this site.
+ +
+ +
+ + + The URL at which Ruffle can load its extra files (i.e. '.wasm'). +
+
+ +
+ +
+ + + Enable polyfills on the page for legacy Flash content. +
+
+ +
+ +
+ + + List of font URLs separated by comma to load. +
+
+ + +
@@ -385,6 +459,54 @@

Site-Specific Settings

Prefer real Adobe Flash Player if available.
+ + + + + + + +
+ +
+ + + List of origins separated by comma to which credentials can be sent. +
+
+ +
+ +
+ + + Mapping of gamepad buttons to ActionScript key codes. +
+
+ + +
@@ -500,19 +622,6 @@

Site-Specific Settings

Base directory/URL for resolving relative paths in SWF.
- -
- -
- - - How scrolling Flash content affects the web page. -
-
From 65b5a20e885c349f650f88e46f7df884f2c620f5 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Fri, 26 Sep 2025 02:37:39 -0300 Subject: [PATCH 04/12] extension: Improve label discovery in getElement --- web/packages/extension/src/common.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web/packages/extension/src/common.ts b/web/packages/extension/src/common.ts index 4dec1094742b..29f1f7cb3b72 100644 --- a/web/packages/extension/src/common.ts +++ b/web/packages/extension/src/common.ts @@ -111,7 +111,13 @@ class SelectOption implements OptionElement { } function getElement(option: Element): OptionElement { - const label = option.getElementsByTagName("label")[0]!; + const element = option.querySelector( + "input, select", + )!; + + const label = option.querySelector( + `label[for="${element.id}"]`, + )!; const [input] = option.getElementsByTagName("input"); if (input) { From 4e5351337f7788d4aba1921e8e98e25a77df429f Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Fri, 26 Sep 2025 02:50:25 -0300 Subject: [PATCH 05/12] extension: Improve getElement elements discovery and validation --- web/packages/extension/src/common.ts | 33 ++++++++++++++++------------ 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/web/packages/extension/src/common.ts b/web/packages/extension/src/common.ts index 29f1f7cb3b72..9c9550aea8da 100644 --- a/web/packages/extension/src/common.ts +++ b/web/packages/extension/src/common.ts @@ -113,26 +113,31 @@ class SelectOption implements OptionElement { function getElement(option: Element): OptionElement { const element = option.querySelector( "input, select", - )!; + ); + + if (!element) { + throw new Error( + "No input or select element found inside the option container.", + ); + } const label = option.querySelector( `label[for="${element.id}"]`, - )!; - - const [input] = option.getElementsByTagName("input"); - if (input) { - if (input.type === "checkbox") { - return new CheckboxOption(input, label); - } + ); - if (input.type === "number") { - return new NumberOption(input, label); - } + if (!label) { + throw new Error(`No label found with for="${element.id}"`); } - const [select] = option.getElementsByTagName("select"); - if (select) { - return new SelectOption(select, label); + if (element instanceof HTMLInputElement) { + switch (element.type) { + case "checkbox": + return new CheckboxOption(element, label); + case "number": + return new NumberOption(element, label); + } + } else if (element instanceof HTMLSelectElement) { + return new SelectOption(element, label); } throw new Error("Unknown option element"); From eee073c8d0b5450e6d16cc28f5611c2c429c11a9 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Sat, 27 Sep 2025 01:12:55 -0300 Subject: [PATCH 06/12] extension: New form styles --- web/packages/extension/assets/css/form.css | 95 ++++++++++++++++++++++ web/packages/extension/assets/options.html | 1 + 2 files changed, 96 insertions(+) create mode 100644 web/packages/extension/assets/css/form.css diff --git a/web/packages/extension/assets/css/form.css b/web/packages/extension/assets/css/form.css new file mode 100644 index 000000000000..b5499e39bf5f --- /dev/null +++ b/web/packages/extension/assets/css/form.css @@ -0,0 +1,95 @@ +.form-element { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 5px; +} + +.form-element .form-label { + font-weight: bold; +} + +.form-element .form-group { + display: flex; + flex-direction: column; + gap: 5px; +} + +.form-type-number { + width: 60px; +} + +.form-type-text { + width: 124px; +} + +/* Switch - Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW */ + +.form-type-switch { + position: relative; +} + +.form-type-switch input { + margin: 1px 0 0; + cursor: pointer; + opacity: 0; + position: absolute; + z-index: 1; + top: 0; + left: 0; + background: red; + width: 40px; + height: 20px; +} + +.form-type-switch, +.form-type-switch .slider, +.form-type-switch .slider:before { + height: 20px; +} + +.form-type-switch input:checked + .slider:before { + background-color: var(--ruffle-orange); + content: ""; + padding-left: 6px; +} + +.form-type-switch input:checked + .slider:after { + left: 21px; +} + +.form-type-switch .slider { + position: relative; + padding-left: 46px; +} + +.form-type-switch .slider:before, .form-type-switch .slider:after { + position: absolute; + border-radius: 10px; + transition: background-color 0.3s, left 0.3s; +} + +.form-type-switch .slider:before { + content: ""; + color: #fff; + box-sizing: border-box; + padding-left: 23px; + font-size: 12px; + line-height: 20px; + background-color: #888; + left: 0; + top: 0; + height: 20px; + width: 40px; + border-radius: 10px; +} + +.form-type-switch .slider:after { + content: ""; + letter-spacing: 20px; + background: #fff; + left: 1px; + top: 1px; + height: 18px; + width: 18px; +} diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 381ba7a0bb6f..202010db8671 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -7,6 +7,7 @@ Ruffle Settings + From fcda2c0c0bf766cdf33f10769f41d33b1e1b3054 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Sat, 27 Sep 2025 01:13:29 -0300 Subject: [PATCH 07/12] extension: Remove inline JS --- web/packages/extension/assets/options.html | 49 -------------------- web/packages/extension/src/options.ts | 52 ++++++++++++++++++++++ 2 files changed, 52 insertions(+), 49 deletions(-) diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 202010db8671..e889c7c5eaf7 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -635,55 +635,6 @@

Site-Specific Settings

- - diff --git a/web/packages/extension/src/options.ts b/web/packages/extension/src/options.ts index 4257116dc35c..2955f9913486 100644 --- a/web/packages/extension/src/options.ts +++ b/web/packages/extension/src/options.ts @@ -30,5 +30,57 @@ window.addEventListener("DOMContentLoaded", async () => { } }); } + + const modal = document.getElementById("site-settings-modal")!; + const addNewBtn = document.getElementById("site-entry-new")!; + const closeBtns = document.querySelectorAll( + ".modal-close-btn, #modal-cancel-btn", + ); + + const openModal = () => { + modal.style.display = "flex"; + document.body.classList.add("modal-open"); + }; + + const closeModal = () => { + modal.style.display = "none"; + document.body.classList.remove("modal-open"); + }; + + addNewBtn.addEventListener("click", openModal); + + closeBtns.forEach((btn) => btn.addEventListener("click", closeModal)); + + document.querySelectorAll(".edit-site-btn").forEach((btn) => { + btn.addEventListener("click", openModal); + }); + + document.querySelectorAll(".settings-option").forEach((option) => { + const switchEl = option.querySelector( + ".settings-option-toggle", + )!; + const controlId = switchEl.dataset["optionId"]; + const controlContainer = document.getElementById( + `control-${controlId}`, + ); + + if (!controlContainer) { + console.warn(`Element with id control-${controlId} not found.`); + return; + } + + const toggleControl = () => { + if (switchEl.checked) { + controlContainer.classList.remove("settings-option-disabled"); + } else { + controlContainer.classList.add("settings-option-disabled"); + } + }; + + switchEl.addEventListener("change", toggleControl); + + toggleControl(); + }); + bindOptions(); }); From 107fcc496f2da456618e7f124ad81066e8349df6 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Sat, 27 Sep 2025 01:15:24 -0300 Subject: [PATCH 08/12] extension: Refactor options layout with the new form styles --- web/packages/extension/assets/options.html | 73 +++++++++++++--------- 1 file changed, 44 insertions(+), 29 deletions(-) diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index e889c7c5eaf7..9771a2a5843b 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -18,59 +18,74 @@
nightly YYYY-MM-DD
-
+

Global Settings

-
- - +
+ +
+ +
+
-
- - +
+ +
+ +
+
-
- - +
+ +
+ +
+
-
- - +
+ +
+ +
+
-

Advanced Options

+

Advanced Options

-
- - +
+ +
+ +
+
-
- -
-
- -
-
- - +
+ +
-
- - +
+ +

Per-Site Options

From e19cf15d0a926ea5f109311d2741efee386a1245 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Sat, 27 Sep 2025 01:16:42 -0300 Subject: [PATCH 09/12] extension: Dynamic setting generation --- web/packages/extension/assets/css/options.css | 32 +- web/packages/extension/assets/options.html | 525 +------------- web/packages/extension/src/options.ts | 662 ++++++++++++++++++ 3 files changed, 710 insertions(+), 509 deletions(-) diff --git a/web/packages/extension/assets/css/options.css b/web/packages/extension/assets/css/options.css index 75989f593a7e..fc05b429e37b 100644 --- a/web/packages/extension/assets/css/options.css +++ b/web/packages/extension/assets/css/options.css @@ -21,24 +21,30 @@ hr { } #reset-settings { - margin: 0 auto; + display: block; + margin-left: auto; + margin-right: auto; } .option-title { border-bottom: 2px solid var(--ruffle-light-blue); padding-bottom: 8px; - margin-block-end: 0; + margin-block-end: 10px; font-size: 1.2em; color: var(--ruffle-orange); } .option-description { opacity: 0.8; - margin-block: 0.2em; + margin-block: 15px; + margin-left: 5px; } /* Per-site settings */ +.per-site { +} + #per-site-list { display: flex; flex-direction: column; @@ -59,7 +65,8 @@ hr { } #site-entry-new { - align-self: flex-start; + display: block; + margin: 10px 0 10px auto; } /* Modal */ @@ -167,9 +174,7 @@ hr { /* Sections */ .settings-section > * { - margin-bottom: 20px; padding-bottom: 15px; - border-bottom: 2px solid var(--ruffle-light-blue); } .settings-section > :last-child { @@ -192,7 +197,6 @@ hr { grid-template-columns: 40px 1fr; align-items: start; gap: 15px; - padding: 12px 0; border-bottom: 1px solid var(--ruffle-light-blue); } @@ -217,12 +221,18 @@ hr { gap: 5px; } -.settings-option-control label { - font-weight: bold; -} - .settings-option-control small { font-size: 0.8em; color: #ccc; opacity: 0.8; } + +.settings-row { + display: flex; + justify-content: space-between; + align-items: center; +} + +.settings-row label { + font-weight: bold; +} diff --git a/web/packages/extension/assets/options.html b/web/packages/extension/assets/options.html index 9771a2a5843b..e5da4af34303 100644 --- a/web/packages/extension/assets/options.html +++ b/web/packages/extension/assets/options.html @@ -92,25 +92,27 @@

Per-Site Options

Override global options for specific websites.

-
-
- example.com -
- - +
+
+
+ example.com +
+ + +
-
-
- example.com -
- - +
+ example.com +
+ + +
-
- + +
@@ -127,7 +129,7 @@

Site-Specific Settings

- +
@@ -136,516 +138,43 @@

Site-Specific Settings

Enable the switch to override the global setting for this site.

-
+
Basic Playback
- -
- -
- - - Controls the auto-play behaviour of Ruffle. -
-
- -
- -
- - - Allow movie to interact with page through JavaScript. -
-
- -
- -
- - - HTML color for the background. -
-
- -
- -
- - - Controls letterbox behavior when container size doesn't match movie size. -
-
- -
- -
- - - Show unmute overlay when player is muted. -
-
- -
- -
- - - Whether or not to show a splash screen before the SWF has loaded with Ruffle (backwards-compatibility). -
-
- -
- -
- - - Values that may be passed to and loaded by the movie. -
-
-
-
Display Settings
- -
- -
- - - Controls how Ruffle is layered with other content. -
-
- -
- -
- - - Equivalent to Stage.scaleMode (e.g., "showAll", "noBorder", "exactFit", "noScale"). -
-
- -
- -
- - - Equivalent to Stage.align. Choose how content is anchored in the container. -
-
- -
- -
- - - Equivalent to Stage.quality (e.g., "low", "medium", "high", "best"). -
-
- -
- -
- - - Defines the scrolling behavior of Flash content on the web page. -
-
+
+
Display
-
+
Performance
- -
- -
- - - Preferred render backend for this site. -
-
- -
- -
- - - Lock player's frame rate (overrides movie's frame rate). -
-
- -
- -
- - - Maximum time a script can run before being disabled. -
-
-
+
Player Configuration
- -
- -
- - - Flash player version to report to the movie. -
-
- -
- -
- - - Runtime environment to emulate. -
-
- -
- -
- - - Console logging level for this site. -
-
- -
- -
- - - The URL at which Ruffle can load its extra files (i.e. '.wasm'). -
-
- -
- -
- - - Enable polyfills on the page for legacy Flash content. -
-
- -
- -
- - - List of font URLs separated by comma to load. -
-
- - -
-
+
Security & Features
- -
- -
- - - Which flash networking APIs may be accessed. -
-
- -
- -
- - - Handling mode for links opening new websites. -
-
- -
- -
- - - Auto-upgrade embedded HTTP URLs to HTTPS. -
-
- -
- -
- - - Enable Ruffle's built-in compatibility rules. -
-
- -
- -
- - - Prefer real Adobe Flash Player if available. -
-
- - - - - - - -
- -
- - - List of origins separated by comma to which credentials can be sent. -
-
- -
- -
- - - Mapping of gamepad buttons to ActionScript key codes. -
-
- - -
-
+
User Interface
- -
- -
- - - Show context menu when right-clicking or long-pressing. -
-
- -
- -
- - - Add SWF download option to context menu. -
-
- -
- -
- - - Equivalent to Stage.showMenu. -
-
- -
- -
- - - Show splash screen before SWF loads. -
-
-
+
Fullscreen & Scaling
- -
- -
- - - Allow Stage's displayState to be changed. -
-
- -
- -
- - - Prevent movies from changing stage alignment. -
-
- -
- -
- - - Prevent movies from changing stage scale mode. -
-
- -
- -
- - - Controls orientation on mobile in fullscreen mode. -
-
-
+
Miscellaneous
- -
- -
- - - Base directory/URL for resolving relative paths in SWF. -
-
- - +
diff --git a/web/packages/extension/src/options.ts b/web/packages/extension/src/options.ts index 2955f9913486..4af4dad00158 100644 --- a/web/packages/extension/src/options.ts +++ b/web/packages/extension/src/options.ts @@ -2,7 +2,669 @@ import * as utils from "./utils"; import { bindOptions, resetOptions } from "./common"; import { buildInfo } from "ruffle-core"; +type SettingForm = { + id: string; + type: "text" | "number" | "select" | "switch"; + + min?: number; + max?: number; + step?: number; + + placeholder?: string | number; + + label: string; + description: string; + options?: SelectOption[]; +}; + +type SelectOption = { + text: string; + value: string; + defaultSelected?: boolean; +}; + +type SettingGroup = { + settingsBasicPlayback: SettingForm[]; + settingsDisplay: SettingForm[]; + settingsPerformance: SettingForm[]; + settingsPlayerConfiguration: SettingForm[]; + settingsSecurityFeatures: SettingForm[]; + settingsUserInterface: SettingForm[]; + settingsFullscreenScaling: SettingForm[]; + settingMiscellaneous: SettingForm[]; +}; + +const settingData: SettingGroup = { + settingsBasicPlayback: [ + { + id: "autoplay", + type: "select", + label: "Autoplay", + description: "Controls the auto-play behaviour of Ruffle.", + options: [ + { value: "auto", text: "Auto" }, + { value: "on", text: "On" }, + { value: "off", text: "Off" }, + ], + }, + { + id: "allowScriptAccess", + type: "select", + label: "Allow Script Access", + description: + "Allow movie to interact with page through JavaScript.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "backgroundColor", + type: "text", + placeholder: "#FFFFFF", + label: "Background Color", + description: "HTML color for the background.", + }, + { + id: "letterbox", + type: "select", + label: "Letterbox", + description: + "Controls letterbox behavior when container size doesn't match movie size.", + options: [ + { + value: "off", + text: "Off - The content will never be letterboxed.", + }, + { + value: "fullscreen", + text: "Fullscreen - The content will only be letterboxed if the content is running fullscreen.", + }, + { + value: "on", + text: "On - The content will always be letterboxed.", + }, + ], + }, + { + id: "unmuteOverlay", + type: "select", + label: "Unmute Overlay", + description: "Show unmute overlay when player is muted.", + options: [ + { value: "visible", text: "Visible" }, + { value: "hidden", text: "Hidden" }, + ], + }, + { + id: "preloader", + type: "select", + label: "Preloader", + description: + "Whether or not to show a splash screen before the SWF has loaded.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "parameters", + type: "text", + placeholder: "key1=value1&key2=value2", + label: "Parameters Flashvars", + description: + "Values that may be passed to and loaded by the movie.", + }, + ], + settingsDisplay: [ + { + id: "wmode", + type: "select", + label: "Window Mode", + description: "Controls how Ruffle is layered with other content.", + options: [ + { value: "window", text: "Window - Default browser layering" }, + { + value: "opaque", + text: "Opaque - Layers with HTML, opaque background", + }, + { + value: "transparent", + text: "Transparent - Layers with HTML, transparent background", + }, + { + value: "direct", + text: "Direct - Hardware acceleration same as Opaque", + }, + { value: "gpu", text: "GPU - Direct rendering same as Opaque" }, + ], + }, + { + id: "scale", + type: "select", + label: "Scale Mode", + description: + "Equivalent to Stage.scaleMode (e.g., showAll, noBorder, exactFit, noScale).", + options: [ + { + value: "exactFit", + text: "Exact Fit - Stretches to fill container, aspect ratio not preserved", + }, + { + value: "noBorder", + text: "No Border - Fills container, preserves aspect ratio, edges may be cropped", + }, + { + value: "noScale", + text: "No Scale - No scaling, content uses container size may be clipped", + }, + { + value: "showAll", + text: "Show All - Scales to fit container, preserves aspect ratio letterboxed if needed", + }, + ], + }, + { + id: "salign", + type: "select", + label: "Stage Alignment", + description: + "Equivalent to Stage.align. Choose how content is anchored in the container.", + options: [ + { value: "C", text: "Center" }, + { value: "T", text: "Top" }, + { value: "B", text: "Bottom" }, + { value: "L", text: "Left" }, + { value: "R", text: "Right" }, + { value: "TL", text: "Top Left" }, + { value: "TR", text: "Top Right" }, + { value: "BL", text: "Bottom Left" }, + { value: "BR", text: "Bottom Right" }, + ], + }, + { + // TODO: Select + id: "quality", + type: "text", + label: "Quality", + description: + "Equivalent to Stage.quality (e.g., low, medium, high, best).", + }, + { + id: "scrollingBehavior", + type: "select", + label: "Scrolling Behavior", + description: + "Defines the scrolling behavior of Flash content on the web page.", + options: [ + { + value: "smart", + text: "Smart - Scroll the page only when the Flash content hasn't handled the scroll.", + }, + { value: "never", text: "Never - Never scroll the page." }, + { value: "always", text: "Always - Always scroll the page." }, + ], + }, + ], + settingsPerformance: [ + { + id: "preferredRenderer", + type: "select", + label: "Preferred Renderer", + description: "Preferred render backend for this site.", + options: [ + { value: "Automatic", text: "Automatic" }, + { value: "webgpu", text: "WebGPU" }, + { value: "wgpu-webgl", text: "wgpu via WebGL" }, + { value: "webgl", text: "WebGL" }, + { value: "canvas", text: "Canvas" }, + ], + }, + { + id: "frameRate", + type: "number", + min: 1, + max: 120, + step: 1, + label: "Frame Rate Override", + description: + "Lock player's frame rate overrides movies frame rate.", + }, + { + id: "maxExecutionDuration", + type: "number", + min: 1, + max: 15, + step: 1, + placeholder: 15, + label: "Max Script Execution seconds", + description: "Maximum time a script can run before being disabled.", + }, + ], + settingsPlayerConfiguration: [ + { + id: "playerVersion", + type: "number", + min: 1, + max: 32, + step: 1, + label: "Player Version", + description: "Flash player version to report to the movie.", + }, + { + id: "playerRuntime", + type: "select", + label: "Player Runtime", + description: "Runtime environment to emulate.", + options: [ + { value: "flashPlayer", text: "Flash Player" }, + { value: "air", text: "Adobe AIR" }, + ], + }, + { + id: "logLevel", + type: "select", + label: "Log Level", + description: "Console logging level for this site.", + options: [ + { value: "error", text: "Error" }, + { value: "warn", text: "Warning" }, + { value: "info", text: "Info" }, + { value: "debug", text: "Debug" }, + { value: "trace", text: "Trace" }, + ], + }, + { + id: "publicPath", + type: "text", + placeholder: "/path/to/ruffle/", + label: "Public Path", + description: + "The URL at which Ruffle can load its extra files i.e. .wasm.", + }, + { + id: "polyfills", + type: "select", + label: "Polyfills", + description: + "Enable polyfills on the page for legacy Flash content.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "fontSources", + type: "text", + placeholder: "/path/to/font.swf,/path/to/font2.swf", + label: "Font Sources", + description: "List of font URLs separated by comma to load.", + }, + // TODO: Add via dynamic inputs dynamic + /* { + id: 'defaultFonts', + type: 'text', + label: '...', + description: 'Names of fonts to use for each default Flash device font.', + }, */ + ], + settingsSecurityFeatures: [ + { + id: "allowNetworking", + type: "select", + label: "Network Access Mode", + description: "Which flash networking APIs may be accessed.", + options: [ + { value: "all", text: "All" }, + { value: "internal", text: "Internal" }, + { value: "none", text: "None" }, + ], + }, + { + id: "openUrlMode", + type: "select", + label: "Open URL Mode", + description: "Handling mode for links opening new websites.", + options: [ + { value: "allow", text: "Allow" }, + { value: "confirm", text: "Confirm" }, + { value: "deny", text: "Deny" }, + ], + }, + { + id: "upgradeToHttps", + type: "select", + label: "Upgrade to HTTPS", + description: "Auto-upgrade embedded HTTP URLs to HTTPS.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "compatibilityRules", + type: "select", + label: "Compatibility Rules", + description: "Enable Ruffle's built-in compatibility rules.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "favorFlash", + type: "select", + label: "Favor Flash Player", + description: "Prefer real Adobe Flash Player if available.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + // I am not sure if this can be done via UI + /* { + id: 'openInNewTab', + type: 'text', + placeholder: '...', + label: 'Open in New Tab', + description: 'Function to open content in a new tab.', + }, */ + // TODO: Add more inputs dynamic or use Array? e.g. [{'port': 80, 'host': '0.0.0.0'..}] + /* { + id: 'credentialsocketProxyAllowList', + type: 'text', + placeholder: '...', + label: 'Socket Proxy', + description: 'Array of SocketProxy objects for socket connections.', + }, */ + { + id: "credentialAllowList", + type: "text", + placeholder: "https://example.org,https://example2.org", + label: "Credential Allow List", + description: + "List of origins separated by comma to which credentials can be sent.", + }, + { + id: "gamepadButtonMapping", + type: "text", + placeholder: "dpad-up:38,dpad-down:40", + label: "Gamepad Button Mapping", + description: + "Mapping of gamepad buttons to ActionScript key codes.", + }, + /* { I am not sure if this can be done via UI without adding more inputs and validations + id: 'urlRewriteRules', + type: 'text', + label: 'URL Rewrite Rules', + description: 'Set of rules that rewrite URLs in network requests and links.', + }, */ + ], + settingsUserInterface: [ + { + id: "contextMenu", + type: "select", + label: "Context Menu", + description: + "Show context menu when right-clicking or long-pressing.", + options: [ + { value: "on", text: "On" }, + { value: "rightClickOnly", text: "Right Click Only" }, + { value: "off", text: "Off" }, + ], + }, + { + id: "showSwfDownload", + type: "select", + label: "Show SWF Download", + description: "Add SWF download option to context menu.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "menu", + type: "select", + label: "Built-in Menu Items", + description: "Equivalent to Stage.showMenu.", + options: [ + { value: "true", text: "Visible" }, + { value: "false", text: "Hidden" }, + ], + }, + { + id: "splashScreen", + type: "select", + label: "Splash Screen", + description: "Show splash screen before SWF loads.", + options: [ + { value: "true", text: "Show" }, + { value: "false", text: "Hide" }, + ], + }, + ], + settingsFullscreenScaling: [ + { + id: "allowFullscreen", + type: "select", + label: "Allow Fullscreen", + description: "Allow Stage's displayState to be changed.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "forceAlign", + type: "select", + label: "Force Alignment", + description: "Prevent movies from changing stage alignment.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "forceScale", + type: "select", + label: "Force Scale", + description: "Prevent movies from changing stage scale mode.", + options: [ + { value: "true", text: "Enabled" }, + { value: "false", text: "Disabled" }, + ], + }, + { + id: "fullScreenAspectRatio", + type: "text", + label: "Fullscreen Aspect Ratio", + description: "Controls orientation on mobile in fullscreen mode.", + options: [], + }, + ], + settingMiscellaneous: [ + { + id: "base", + type: "text", + label: "Base URL", + description: + "Base directory/URL for resolving relative paths in SWF.", + options: [], + }, + ], +}; + +/* const template: string = ` +
+ + +
+
+
+ + {description} +
+ +
+
+
+ `; */ + +function addElement(settingForm: SettingForm): HTMLElement { + const settingsOption = document.createElement("div"); + settingsOption.classList.add("settings-option"); + + const settingsOptionToggle = document.createElement("input"); + settingsOptionToggle.classList.add("settings-option-toggle"); + settingsOptionToggle.type = "checkbox"; + settingsOptionToggle.dataset["optionId"] = settingForm.id; + + settingsOption.appendChild(settingsOptionToggle); + + const settingsOptionControl = document.createElement("div"); + settingsOptionControl.classList.add("settings-option-control"); + settingsOptionControl.id = `control-${settingForm.id}`; + + settingsOption.appendChild(settingsOptionControl); + + const formElement = document.createElement("div"); + formElement.classList.add("form-element"); + + settingsOptionControl.appendChild(formElement); + + const formGroup = document.createElement("div"); + formGroup.classList.add("form-group"); + + formElement.appendChild(formGroup); + + const formLabel = document.createElement("label"); + formLabel.classList.add("form-label"); + formLabel.htmlFor = `setting-${settingForm.id}`; + formLabel.innerText = settingForm.label; + + formGroup.appendChild(formLabel); + + if (settingForm.description) { + const smallDescription = document.createElement("small"); + smallDescription.innerText = settingForm.description; + + formGroup.appendChild(smallDescription); + } + + switch (settingForm.type) { + case "text": + { + const formTypeInput = document.createElement("input"); + formTypeInput.id = `setting-${settingForm.id}`; + formTypeInput.classList.add("form-type-text"); + + if (settingForm.placeholder) { + formTypeInput.placeholder = + settingForm.placeholder.toString(); + } + + formElement.appendChild(formTypeInput); + } + break; + case "number": + { + const formTypeNumber = document.createElement("input"); + formTypeNumber.id = `setting-${settingForm.id}`; + formTypeNumber.classList.add("form-type-number"); + + if (settingForm.placeholder) { + formTypeNumber.placeholder = + settingForm.placeholder.toString(); + } + + formElement.appendChild(formTypeNumber); + } + break; + case "select": + { + const formTypeSelect = document.createElement("select"); + formTypeSelect.id = `setting-${settingForm.id}`; + formTypeSelect.classList.add("form-type-select"); + + if (settingForm.options) { + for (const opt of settingForm.options) { + formTypeSelect.add( + new Option( + opt.text, + opt.value, + opt.defaultSelected, + ), + ); + } + } + + formElement.appendChild(formTypeSelect); + } + break; + case "switch": + break; + } + + return settingsOption; +} + +function addSettingGroup( + targetGroup: HTMLElement, + settingsForm: SettingForm[], +) { + const htmlElements: HTMLElement[] = []; + + for (const settingForm of settingsForm) { + htmlElements.push(addElement(settingForm)); + } + + console.log(...htmlElements); + + targetGroup.append(...htmlElements); +} + window.addEventListener("DOMContentLoaded", async () => { + addSettingGroup( + document.getElementById("settings-basic-playback")!, + settingData.settingsBasicPlayback, + ); + + addSettingGroup( + document.getElementById("settings-display")!, + settingData.settingsDisplay, + ); + + addSettingGroup( + document.getElementById("settings-performance")!, + settingData.settingsPerformance, + ); + + addSettingGroup( + document.getElementById("settings-player-configuration")!, + settingData.settingsPlayerConfiguration, + ); + + addSettingGroup( + document.getElementById("settings-security-features")!, + settingData.settingsSecurityFeatures, + ); + + addSettingGroup( + document.getElementById("settings-user-interface")!, + settingData.settingsUserInterface, + ); + + addSettingGroup( + document.getElementById("settings-fullscreen-scaling")!, + settingData.settingsFullscreenScaling, + ); + + addSettingGroup( + document.getElementById("settings-miscellaneous")!, + settingData.settingMiscellaneous, + ); + const data = await utils.storage.sync.get({ responseHeadersUnsupported: false, }); From 8369bd34d810d5a132b4689ef76e2a3cedb7bfcc Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Sat, 27 Sep 2025 02:19:30 -0300 Subject: [PATCH 10/12] extension: Refactor CSS --- web/packages/extension/assets/css/form.css | 117 +++++++++--------- web/packages/extension/assets/css/options.css | 3 - 2 files changed, 60 insertions(+), 60 deletions(-) diff --git a/web/packages/extension/assets/css/form.css b/web/packages/extension/assets/css/form.css index b5499e39bf5f..e0fbd2c386e0 100644 --- a/web/packages/extension/assets/css/form.css +++ b/web/packages/extension/assets/css/form.css @@ -1,95 +1,98 @@ .form-element { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 5px; + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 5px; } .form-element .form-label { - font-weight: bold; + font-weight: bold; } .form-element .form-group { - display: flex; - flex-direction: column; - gap: 5px; + display: flex; + flex-direction: column; + gap: 5px; } .form-type-number { - width: 60px; + width: 60px; } .form-type-text { - width: 124px; + width: 124px; } /* Switch - Based on "Pure CSS Slider Checkboxes": https://codepen.io/Qvcool/pen/bdzVYW */ .form-type-switch { - position: relative; + position: relative; } .form-type-switch input { - margin: 1px 0 0; - cursor: pointer; - opacity: 0; - position: absolute; - z-index: 1; - top: 0; - left: 0; - background: red; - width: 40px; - height: 20px; + margin: 1px 0 0; + cursor: pointer; + opacity: 0; + position: absolute; + z-index: 1; + top: 0; + left: 0; + background: red; + width: 40px; + height: 20px; } .form-type-switch, .form-type-switch .slider, -.form-type-switch .slider:before { - height: 20px; +.form-type-switch .slider::before { + height: 20px; } -.form-type-switch input:checked + .slider:before { - background-color: var(--ruffle-orange); - content: ""; - padding-left: 6px; +.form-type-switch .slider { + position: relative; + padding-left: 46px; } -.form-type-switch input:checked + .slider:after { - left: 21px; +.form-type-switch .slider::before, +.form-type-switch .slider::after { + position: absolute; + border-radius: 10px; + transition: + background-color 0.3s, + left 0.3s; } -.form-type-switch .slider { - position: relative; - padding-left: 46px; +.form-type-switch .slider::before { + content: ""; + color: #fff; + box-sizing: border-box; + padding-left: 23px; + font-size: 12px; + line-height: 20px; + background-color: #888; + left: 0; + top: 0; + height: 20px; + width: 40px; + border-radius: 10px; } -.form-type-switch .slider:before, .form-type-switch .slider:after { - position: absolute; - border-radius: 10px; - transition: background-color 0.3s, left 0.3s; +.form-type-switch .slider::after { + content: ""; + letter-spacing: 20px; + background: #fff; + left: 1px; + top: 1px; + height: 18px; + width: 18px; } -.form-type-switch .slider:before { - content: ""; - color: #fff; - box-sizing: border-box; - padding-left: 23px; - font-size: 12px; - line-height: 20px; - background-color: #888; - left: 0; - top: 0; - height: 20px; - width: 40px; - border-radius: 10px; +.form-type-switch input:checked + .slider::before { + background-color: var(--ruffle-orange); + content: ""; + padding-left: 6px; } -.form-type-switch .slider:after { - content: ""; - letter-spacing: 20px; - background: #fff; - left: 1px; - top: 1px; - height: 18px; - width: 18px; +.form-type-switch input:checked + .slider::after { + left: 21px; } diff --git a/web/packages/extension/assets/css/options.css b/web/packages/extension/assets/css/options.css index fc05b429e37b..ebeea6d659d6 100644 --- a/web/packages/extension/assets/css/options.css +++ b/web/packages/extension/assets/css/options.css @@ -42,9 +42,6 @@ hr { /* Per-site settings */ -.per-site { -} - #per-site-list { display: flex; flex-direction: column; From 8f1c83d8b5aa9bf88235f37961cb1ac502cf19b4 Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Thu, 2 Oct 2025 05:48:05 -0300 Subject: [PATCH 11/12] extension: Implement switch input element creation --- web/packages/extension/src/options.ts | 119 +++++++------------------- 1 file changed, 33 insertions(+), 86 deletions(-) diff --git a/web/packages/extension/src/options.ts b/web/packages/extension/src/options.ts index 4af4dad00158..5331cfbb44af 100644 --- a/web/packages/extension/src/options.ts +++ b/web/packages/extension/src/options.ts @@ -13,7 +13,7 @@ type SettingForm = { placeholder?: string | number; label: string; - description: string; + description?: string; options?: SelectOption[]; }; @@ -49,14 +49,10 @@ const settingData: SettingGroup = { }, { id: "allowScriptAccess", - type: "select", + type: "switch", label: "Allow Script Access", description: "Allow movie to interact with page through JavaScript.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "backgroundColor", @@ -88,13 +84,9 @@ const settingData: SettingGroup = { }, { id: "unmuteOverlay", - type: "select", + type: "switch", label: "Unmute Overlay", - description: "Show unmute overlay when player is muted.", - options: [ - { value: "visible", text: "Visible" }, - { value: "hidden", text: "Hidden" }, - ], + description: "Show unmute overlay when player is muted.", // TODO: Update with better description to match switch }, { id: "preloader", @@ -102,10 +94,6 @@ const settingData: SettingGroup = { label: "Preloader", description: "Whether or not to show a splash screen before the SWF has loaded.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "parameters", @@ -284,14 +272,10 @@ const settingData: SettingGroup = { }, { id: "polyfills", - type: "select", + type: "switch", label: "Polyfills", description: "Enable polyfills on the page for legacy Flash content.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "fontSources", @@ -333,33 +317,21 @@ const settingData: SettingGroup = { }, { id: "upgradeToHttps", - type: "select", + type: "switch", label: "Upgrade to HTTPS", description: "Auto-upgrade embedded HTTP URLs to HTTPS.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "compatibilityRules", - type: "select", + type: "switch", label: "Compatibility Rules", description: "Enable Ruffle's built-in compatibility rules.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "favorFlash", - type: "select", + type: "switch", label: "Favor Flash Player", description: "Prefer real Adobe Flash Player if available.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, // I am not sure if this can be done via UI /* { @@ -415,72 +387,47 @@ const settingData: SettingGroup = { }, { id: "showSwfDownload", - type: "select", + type: "switch", label: "Show SWF Download", description: "Add SWF download option to context menu.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "menu", - type: "select", + type: "switch", label: "Built-in Menu Items", - description: "Equivalent to Stage.showMenu.", - options: [ - { value: "true", text: "Visible" }, - { value: "false", text: "Hidden" }, - ], + description: "Equivalent to Stage.showMenu.", // TODO: Update with better description to match switch }, { id: "splashScreen", - type: "select", + type: "switch", label: "Splash Screen", - description: "Show splash screen before SWF loads.", - options: [ - { value: "true", text: "Show" }, - { value: "false", text: "Hide" }, - ], + description: "Show splash screen before SWF loads.", // TODO: Update with better description to match switch }, ], settingsFullscreenScaling: [ { id: "allowFullscreen", - type: "select", + type: "switch", label: "Allow Fullscreen", description: "Allow Stage's displayState to be changed.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "forceAlign", - type: "select", + type: "switch", label: "Force Alignment", description: "Prevent movies from changing stage alignment.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "forceScale", - type: "select", + type: "switch", label: "Force Scale", description: "Prevent movies from changing stage scale mode.", - options: [ - { value: "true", text: "Enabled" }, - { value: "false", text: "Disabled" }, - ], }, { id: "fullScreenAspectRatio", type: "text", label: "Fullscreen Aspect Ratio", description: "Controls orientation on mobile in fullscreen mode.", - options: [], }, ], settingMiscellaneous: [ @@ -490,27 +437,10 @@ const settingData: SettingGroup = { label: "Base URL", description: "Base directory/URL for resolving relative paths in SWF.", - options: [], }, ], }; -/* const template: string = ` -
- - -
-
-
- - {description} -
- -
-
-
- `; */ - function addElement(settingForm: SettingForm): HTMLElement { const settingsOption = document.createElement("div"); settingsOption.classList.add("settings-option"); @@ -603,6 +533,23 @@ function addElement(settingForm: SettingForm): HTMLElement { } break; case "switch": + { + const formTypeSwitch = document.createElement("div"); + formTypeSwitch.classList.add("form-type-switch"); + + const formTypeSwitchCheckbox = document.createElement("input"); + formTypeSwitchCheckbox.id = `setting-${settingForm.id}`; + formTypeSwitchCheckbox.type = "checkbox"; + + formTypeSwitch.appendChild(formTypeSwitchCheckbox); + + const formTypeSwitchSlider = document.createElement("div"); + formTypeSwitchSlider.classList.add("slider"); + + formTypeSwitch.appendChild(formTypeSwitchSlider); + + formElement.appendChild(formTypeSwitch); + } break; } From 7171b736e2f84c0058a81aed9683457557e2312e Mon Sep 17 00:00:00 2001 From: Anthony <29609366+anthony-hyo@users.noreply.github.com> Date: Thu, 2 Oct 2025 05:49:13 -0300 Subject: [PATCH 12/12] extension: Implement unwrapped label --- web/packages/extension/src/options.ts | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/web/packages/extension/src/options.ts b/web/packages/extension/src/options.ts index 5331cfbb44af..fac83bbf73c3 100644 --- a/web/packages/extension/src/options.ts +++ b/web/packages/extension/src/options.ts @@ -463,10 +463,16 @@ function addElement(settingForm: SettingForm): HTMLElement { settingsOptionControl.appendChild(formElement); - const formGroup = document.createElement("div"); - formGroup.classList.add("form-group"); + // formGroup wraps label (and description) + // if a description exists; otherwise use formElement directly. + let formGroup = formElement; - formElement.appendChild(formGroup); + if (settingForm.description) { + formGroup = document.createElement("div"); + formGroup.classList.add("form-group"); + + formElement.appendChild(formGroup); + } const formLabel = document.createElement("label"); formLabel.classList.add("form-label"); @@ -488,6 +494,7 @@ function addElement(settingForm: SettingForm): HTMLElement { const formTypeInput = document.createElement("input"); formTypeInput.id = `setting-${settingForm.id}`; formTypeInput.classList.add("form-type-text"); + formTypeInput.type = "text"; if (settingForm.placeholder) { formTypeInput.placeholder = @@ -502,6 +509,7 @@ function addElement(settingForm: SettingForm): HTMLElement { const formTypeNumber = document.createElement("input"); formTypeNumber.id = `setting-${settingForm.id}`; formTypeNumber.classList.add("form-type-number"); + formTypeNumber.type = "number"; if (settingForm.placeholder) { formTypeNumber.placeholder =