Cleaned code. Fixed not able to select popup buttons with keyboard https://codeberg.org/LibRedirect/browser_extension/issues/106

3 files changed, 45 insertions, 45 deletions

diff --git a/src/pages/options/index.js b/src/pages/options/index.js
index 1fba923a..2861203a 100644
--- a/src/pages/options/index.js
+++ b/src/pages/options/index.js
@@ -249,7 +249,7 @@ async function createList(frontend, networks, document, redirects, blacklist) {
 			.getElementsByClassName("checklist")[0]
 
 		if (!redirects[frontend]) {
-			checklist.innerHTML = '<div class="some-block option-block">No instances found.</div>'
+			checklist.innerHTML = '<div class="block block-option">No instances found.</div>'
 			break
 		}
 
@@ -287,8 +287,8 @@ async function createList(frontend, networks, document, redirects, blacklist) {
 			})
 
 		checklist.innerHTML = [
-			`<div class="some-block option-block">
-                <h4>${utils.camelCase(network)}</h4>
+			`<div class="block block-option">
+                <label>${utils.camelCase(network)}</label>
             </div>`,
 			...content,
 			"<br>"
diff --git a/src/pages/options/widgets/general.pug b/src/pages/options/widgets/general.pug
index 5ee6a2e3..15cbf8cd 100644
--- a/src/pages/options/widgets/general.pug
+++ b/src/pages/options/widgets/general.pug
@@ -1,28 +1,28 @@
-section(class="option-block" id="general_page")
-    div(class="some-block option-block")
+section(class="block-option" id="general_page")
+    div(class="block block-option")
         h1(data-localise="__MSG_general__") General
     hr
 
-    div(class="some-block option-block")
-        h4(data-localise="__MSG_theme__") Theme
+    div(class="block block-option")
+        label(data-localise="__MSG_theme__") Theme
         select(id="theme" aria-label="select theme")
             option(value="detect" data-localise="__MSG_auto__") Auto
             option(value="light" data-localise="__MSG_light__") Light
             option(value="dark" data-localise="__MSG_dark__") Dark
 
-    div(class="some-block option-block")
-        h4(data-localise="__MSG_fetchPublicInstances__") Fetch public instances
+    div(class="block block-option")
+        label(data-localise="__MSG_fetchPublicInstances__") Fetch public instances
         select(id="fetch-instances" aria-label="Select fetch public instances")
             option(value="github") GitHub
             option(value="codeberg") Codeberg
             option(value="disable" data-localise="__MSG_disable__") Disable
 
-    div(class="some-block option-block")
-        h4(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting
+    div(class="block block-option")
+        label(data-localise="__MSG_excludeFromRedirecting__") Excluded from redirecting
 
     form(id="custom-exceptions-instance-form")
-        div(class="some-block option-block")
-            div(class="some-block" style="padding: 0")
+        div(class="block block-option")
+            div(class="block" style="padding: 0")
                 input(id="exceptions-custom-instance" placeholder="https://www.google.com" type="url" aria-label="Add url exception input")
                 |&nbsp;
                 select(id="exceptions-custom-instance-type")
@@ -37,13 +37,13 @@ section(class="option-block" id="general_page")
 
     div(class="checklist" id="exceptions-custom-checklist")
 
-    div(class="buttons buttons-inline")
+    div(class="buttons")
         label(class="button button-inline" id="import_settings_text" for="import-settings")
             svg(xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor")
                 path(d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z")
             |&nbsp;
             x(data-localise="__MSG_importSettings__") Import Settings
-        input(class="button button-inline" id="import-settings" type="file" style="display: none")
+        input(id="import-settings" type="file" style="display: none")
         
         |&nbsp;&nbsp;
         
diff --git a/src/pages/options/widgets/services.pug b/src/pages/options/widgets/services.pug
index d2bb5ffd..a93a6902 100644
--- a/src/pages/options/widgets/services.pug
+++ b/src/pages/options/widgets/services.pug
@@ -1,67 +1,67 @@
 each val, service in services
-    section(class="option-block" id=service+"_page")
-        div(class="some-block option-block")
+    section(class="block-option" id=service+"_page")
+        div(class="block block-option")
             h1
                 a(target="_blank" href=services[service].url)=services[service].name
 
         hr
 
-        div(class="some-block option-block")
-            h4(data-localise="__MSG_enable__") Enable
+        div(class="block block-option")
+            label(data-localise="__MSG_enable__") Enable
             input(id=`${service}-enabled` type="checkbox" aria-label="Enable checkbox")
 
-        div(class="some-block option-block")
-            h4(data-localise="__MSG_showInPopup__") Show in popup
+        div(class="block block-option")
+            label(for=service data-localise="__MSG_showInPopup__") Show in popup
             input(id=service type="checkbox" aria-label="Show in popup toggle")
 
         div(id=service+"-opacity")
 
-            div(class="some-block option-block")
-                h4
+            div(class="block block-option")
+                label(for=`${service}-frontend`)
                     a(class="frontend_name" target="_blank" data-localise="__MSG_frontend__") Frontend
-                select(id=service+"-frontend" aria-label="Select frontend")
+                select(id=`${service}-frontend`)
                     each val, frontend in services[service].frontends
                         option(value=frontend)=services[service].frontends[frontend].name
 
-            div(class="some-block option-block" id=service+"-instance-div")
-                h4 Instance Type
-                select(id=service+"-instance" aria-label="Select Instance type")
+            div(class="block block-option" id=service+"-instance-div")
+                label(for=`${service}-instance`) Instance Type
+                select(id=`${service}-instance`)
                     option(value="localhost") localhost
                     option(value="public") public instances
 
-            div(class="some-block option-block")
-                h4(data-localise="__MSG_redirectType__") Redirect Type
-                select(id=service+"-redirectType" aria-label="Select redirect type")
+            div(class="block block-option")
+                label(for=`${service}-redirectType` data-localise="__MSG_redirectType__") Redirect Type
+                select(id=`${service}-redirectType`)
 
-            
-            div(id=service+"-embedFrontend-div"  class="some-block option-block")
-                h4(data-localise="__MSG_embedFrontend__") Embed Frontend
-                select(id=service+"-embedFrontend" aria-label="Select embed frontend")
+
+            div(id=`${service}-embedFrontend-div` class="block block-option")
+                label(for=`${service}-embedFrontend` data-localise="__MSG_embedFrontend__") Embed Frontend
+                select(id=`${service}-embedFrontend`)
                     each val, frontend in services[service].frontends
                         if services[service].frontends[frontend].embeddable && services[service].frontends[frontend].instanceList
                             option(value=frontend)=services[service].frontends[frontend].name
 
 
-            div(class="some-block option-block")
-                h4(data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling
-                select(id=service+"-unsupportedUrls" aria-label="Select Unsupported iframes handling")
+            div(class="block block-option")
+                label(for=`${service}-unsupportedUrls` data-localise="__MSG_unsupportedIframesHandling__") Unsupported iframes handling
+                select(id=`${service}-unsupportedUrls`)
                     option(value="bypass") bypass
                     option(value="block") block
 
             if (service == 'search')
-                div(class="some-block option-block")
-                    h4 Set LibRedirect as Default Search Engine
+                div(class="block block-option")
+                    label Set LibRedirect as Default Search Engine. For how to do in chromium browsers, click <a href="https://libredirect.github.io/docs.html#search_engine_chromium">here</a>.
 
 
             each val, frontend in services[service].frontends
                 if services[service].frontends[frontend].instanceList
                     div(id=frontend dir="ltr")
                         hr        
-                        div(dir="auto" class="some-block option-block")
-                            h4(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances
+                        div(dir="auto" class="block block-option")
+                            label(data-localise="__MSG_addYourFavoriteInstances__") Add your favorite instances
 
                         form(class="custom-instance-form")
-                            div(class="some-block option-block")
+                            div(class="block block-option")
                                 input(class="custom-instance" type="url" placeholder="https://instance.com" aria-label="Add instance input")
                                 button(class="add add-instance" type="submit" aria-label="Add the instance")
                                     svg(xmlns="https://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
@@ -69,8 +69,8 @@ each val, service in services
 
                         div(class="checklist custom-checklist")  
 
-                        div(class="ping some-block")
-                            a(class="button button-inline" id=`ping-${frontend}`)
+                        div(class="ping block")
+                            button(class="button button-inline" id=`ping-${frontend}`)
                                 svg(xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 24 24" width="20px" fill="currentColor")
                                     path(d="M10.45 15.5q.6.6 1.55.587.95-.012 1.4-.687L19 7l-8.4 5.6q-.675.45-.712 1.375-.038.925.562 1.525ZM12 4q1.475 0 2.838.412Q16.2 4.825 17.4 5.65l-1.9 1.2q-.825-.425-1.712-.637Q12.9 6 12 6 8.675 6 6.338 8.337 4 10.675 4 14q0 1.05.287 2.075Q4.575 17.1 5.1 18h13.8q.575-.95.838-1.975Q20 15 20 13.9q0-.9-.212-1.75-.213-.85-.638-1.65l1.2-1.9q.75 1.175 1.188 2.5.437 1.325.462 2.75.025 1.425-.325 2.725-.35 1.3-1.025 2.475-.275.45-.75.7-.475.25-1 .25H5.1q-.525 0-1-.25t-.75-.7q-.65-1.125-1-2.387Q2 15.4 2 14q0-2.075.788-3.888.787-1.812 2.15-3.175Q6.3 5.575 8.125 4.787 9.95 4 12 4Zm.175 7.825Z")
                                 |&nbsp;
@@ -80,4 +80,4 @@ each val, service in services
                             div(class=network)
                                 div(class="checklist")
                                     if (network == 'clearnet')
-                                        div(class="some-block option-block loading") Loading...
\ No newline at end of file
+                                        div(class="block block-option loading") Loading...
\ No newline at end of file