i18n and re-design of settings and popup

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,36 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HttpUrlsUsage" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredUrls">
+        <list>
+          <option value="http://localhost" />
+          <option value="http://127.0.0.1" />
+          <option value="http://0.0.0.0" />
+          <option value="http://www.w3.org/" />
+          <option value="http://json-schema.org/draft" />
+          <option value="http://java.sun.com/" />
+          <option value="http://xmlns.jcp.org/" />
+          <option value="http://javafx.com/javafx/" />
+          <option value="http://javafx.com/fxml" />
+          <option value="http://maven.apache.org/xsd/" />
+          <option value="http://maven.apache.org/POM/" />
+          <option value="http://www.springframework.org/schema/" />
+          <option value="http://www.springframework.org/tags" />
+          <option value="http://www.springframework.org/security/tags" />
+          <option value="http://www.thymeleaf.org" />
+          <option value="http://www.jboss.org/j2ee/schema/" />
+          <option value="http://www.jboss.com/xml/ns/" />
+          <option value="http://www.ibm.com/webservices/xsd" />
+          <option value="http://activemq.apache.org/schema/" />
+          <option value="http://schema.cloudfoundry.org/spring/" />
+          <option value="http://schemas.xmlsoap.org/" />
+          <option value="http://cxf.apache.org/schemas/" />
+          <option value="http://primefaces.org/ui" />
+          <option value="http://tiles.apache.org/" />
+          <option value="http://" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

base/_locales/de/messages.json

@@ -0,0 +1,46 @@
+{
+  "language": {
+    "message": "Deutsch (de_DE)",
+    "description": "Current Language"
+  },
+  "settingsHeading": {
+    "message": "StammTV Helper — Einstellungen",
+    "description": "Heading on settings page"
+  },
+  "settingsFormLabelBaseURL": {
+    "message": "StammTV Basis URL",
+    "description": "Label for form input on settings page"
+  },
+  "settingsFormHelptextBaseURL": {
+    "message": "Gib die StammTV Basis URL ein, beginnend mit http:// oder https://",
+    "description": "Helptext for form input on settings page"
+  },
+  "settingsFormLabelWSSURL": {
+    "message": "StammTV WSS URL",
+    "description": "Label for form input on settings page"
+  },
+  "settingsFormHelptextWSSURL": {
+    "message": "Gib die StammTV WSS URL ein, beginnend mit wss://",
+    "description": "Helptext for form input on settings page"
+  },
+  "settingsSaveButtonCaption": {
+    "message": "💾 Speichern",
+    "description": "Button caption for form button on settings page"
+  },
+  "settingsSaveButtonCaptionSuccess": {
+    "message": "✔ gespeichert!",
+    "description": "Button caption for form button on settings page when save succeeeded"
+  },
+  "settingsSaveButtonCaptionFailure": {
+    "message": "❌ fehlgeschlagen!",
+    "description": "Button caption for form button on settings page when save failed"
+  },
+  "settingsFormInputRequired": {
+    "message": "Bitte trage die Daten ein.",
+    "description": "Shows that input on this field is required"
+  },
+  "popupSettingsButtonCaption": {
+    "message": "⚙ Einstellungen",
+    "description": "Button caption for settings quickLink in popup"
+  }
+}

base/_locales/en/messages.json

@@ -0,0 +1,46 @@
+{
+  "language": {
+    "message": "English (en_US)",
+    "description": "Current Language"
+  },
+  "settingsHeading": {
+    "message": "StammTV Helper — Settings",
+    "description": "Heading on settings page"
+  },
+  "settingsFormLabelBaseURL": {
+    "message": "StammTV Base URL",
+    "description": "Label for form input on settings page"
+  },
+  "settingsFormHelptextBaseURL": {
+    "message": "Enter the StammTV Base URL, beginning with http:// or https://",
+    "description": "Helptext for form input on settings page"
+  },
+  "settingsFormLabelWSSURL": {
+    "message": "StammTV WSS URL",
+    "description": "Label for form input on settings page"
+  },
+  "settingsFormHelptextWSSURL": {
+    "message": "Enter the StammTV WSS URL, beginning with wss://",
+    "description": "Helptext for form input on settings page"
+  },
+  "settingsSaveButtonCaption": {
+    "message": "💾 Save",
+    "description": "Button caption for form button on settings page"
+  },
+  "settingsSaveButtonCaptionSuccess": {
+    "message": "✔ saved!",
+    "description": "Button caption for form button on settings page when save succeeeded"
+  },
+  "settingsSaveButtonCaptionFailure": {
+    "message": "❌ failed!",
+    "description": "Button caption for form button on settings page when save failed"
+  },
+  "settingsFormInputRequired": {
+    "message": "Please fill in.",
+    "description": "Shows that input on this field is required"
+  },
+  "popupSettingsButtonCaption": {
+    "message": "⚙ Settings",
+    "description": "Button caption for settings quickLink in popup"
+  }
+}

base/i18n.js

@@ -0,0 +1,8 @@
+let translatableSpans = document.querySelectorAll('.i18n-target');
+for (let t of translatableSpans) {
+    t.innerHTML = getMessage(t.attributes['data-id'].value);
+}
+
+function getMessage(id){
+    return chrome.i18n.getMessage(id);
+}

base/options/options.js

@@ -1,63 +0,0 @@
-const stammTVBaseUrl = document.getElementById('stammtv-base-url');
-const stammTVWSSUrl = document.getElementById('stammtv-wss-url');
-const saveButton = document.getElementById('save');
-
-// Saves options to chrome.storage
-function save_options() {
-    let valid = true;
-    if (stammTVBaseUrl.value.startsWith('http')) {
-        stammTVBaseUrl.classList.add('is-valid');
-        valid = valid && true;
-    } else {
-        stammTVBaseUrl.classList.add('is-invalid');
-        valid = false;
-    }
-
-    if (stammTVWSSUrl.value.startsWith('wss://')) {
-        stammTVWSSUrl.classList.add('is-valid');
-        valid = valid && true;
-    } else {
-        stammTVWSSUrl.classList.add('is-invalid');
-        valid = false;
-    }
-
-    if(valid) {
-        if(chrome && chrome.storage && chrome.storage.local) {
-            chrome.storage.local.set({
-                baseURL: stammTVBaseUrl.value,
-                wssURL: stammTVWSSUrl.value
-            }, function () {
-                // Update form controls to let user know options were saved.
-                saveButton.classList.replace('btn-primary', 'btn-success');
-                saveButton.classList.replace('btn-danger', 'btn-success');
-                saveButton.textContent = '... saved!';
-            });
-        } else {
-            console.error('Unsupported browser or no access to localStorage')
-        }
-    } else {
-        console.error('Failed to save - wrong information given.')
-        saveButton.classList.replace('btn-primary', 'btn-danger');
-        saveButton.classList.replace('btn-success', 'btn-danger');
-        saveButton.textContent = '... failed to save!';
-    }
-}
-
-// Restores select box and checkbox state using the preferences
-// stored in chrome.storage.
-function load_options() {
-    if(chrome && chrome.storage && chrome.storage.local) {
-        chrome.storage.local.get({
-            baseURL: 'Please fill in.',
-            wssURL: 'Please fill in.'
-        }, function (items) {
-            stammTVBaseUrl.value = items.baseURL;
-            stammTVWSSUrl.value = items.wssURL;
-        });
-    } else {
-        console.error('Unsupported browser or no access to localStorage')
-    }
-}
-
-document.addEventListener('DOMContentLoaded', load_options);
-saveButton.addEventListener('click', save_options);

base/popup/popup.html

@@ -1,20 +1,23 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="de">
 <head>
     <meta charset="UTF-8">
-    <title>Popup</title>
+    <title>StammTV Helper — QuickMenu</title>
+    <link rel="stylesheet" href="/style.css" />
 </head>
-<body style="min-width: 8rem; display: flex; align-items: center;">
+<body style="min-width: fit-content; margin: 0.5rem; display: flex; align-items: center; justify-content: space-evenly">
 <a href="" id="open-stammtv" target="_blank">
-    <img src="/stammtv-large.png" alt="StammTV Logo" height="128px" width="128px"/>
+    <img src="/stammtv-small.png" alt="StammTV Logo" height="48px" width="48px"/>
 </a>
-<a href="/options/options.html" id="open-settings" target="_blank" style="
+<a href="/settings/settings.html" id="open-settings" target="_blank" class="text-white" style="
     text-decoration: none;
     font-weight: 400;
     font-size: 1rem;
-    width: 6rem;
+    width: max-content;
-    color: black;
+">
-">⚙ Settings</a>
+    <span class="i18n-target" data-id="popupSettingsButtonCaption">⚙ Settings</span>
+</a>
+<script src="/i18n.js"></script>
 <script src="popup.js"></script>
 </body>
 </html>

base/popup/popup.js

@@ -1,7 +1,18 @@
 function restore_options() {
     chrome.storage.local.get('baseURL', function (result) {
+        if(result && result.baseURL.startsWith('http')) {
             document.getElementById('open-stammtv').href = result.baseURL;
+        } else {
+            openSettings();
+        }
     });
 }
 
+function openSettings() {
+    chrome.tabs.create({
+        active: true,
+        url: 'settings/settings.html'
+    }, null);
+}
+
 document.addEventListener('DOMContentLoaded', restore_options);

base/script.js

@@ -11,7 +11,9 @@ chrome.storage.local.get('firstRun', function (result) {
         chrome.storage.local.get(['baseURL', 'wssURL'], function (items) {
             if (items.wssURL !== undefined && items.wssURL.startsWith('wss://')) {
                 WEBSOCKET_URL = items.wssURL;
-                handleValidityCheckResult(true)
+                init();
+            } else {
+                openSettings();
             }
         });
     }
@@ -20,19 +22,11 @@ chrome.storage.local.get('firstRun', function (result) {
 function openSettings() {
     chrome.tabs.create({
         active: true,
-        url: 'options/options.html'
+        url: 'settings/settings.html'
     }, null);
 }
 
-function handleValidityCheckResult(validSettings) {
+function init() {
-    if (validSettings) {
-        addContextMenuItem();
-    } else {
-        openSettings();
-    }
-}
-
-function addContextMenuItem() {
     chrome.contextMenus.removeAll(function() {
         chrome.contextMenus.create({
             title: "Zu StammTV Playlist hinzufügen...",

base/settings/settings.html

@@ -1,43 +1,50 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <title>Options for StammTV Chrome Extension</title>
+    <title>StammTV Helper — Dashboard</title>
+    <meta charset="UTF-8"/>
     <link rel="icon" type="image/x-icon" href="../stammtv-bitty.png">
-    <link rel="stylesheet" href="options.css"/>
+    <link rel="stylesheet" href="/style.css"/>
 </head>
 <body style="width: 80%; margin: 0 auto">
 <div style="display: grid">
-    <h1 class="mb-5 text-center">StammTV Extension Settings <img src="../stammtv-large.png" alt="StammTV Logo"/></h1>
+    <h1 class="mb-5 text-center"><span class="i18n-target"
+                                       data-id="settingsHeading">StammTV Helper — Settings</span> <img
+            src="/stammtv-large.png" alt="StammTV Logo"/></h1>
 
     <form>
         <div class="form-group row mb-3">
-            <label for="stammtv-base-url" class="col-sm-2 col-form-label">StammTV Base URL</label>
+            <label for="stammtv-base-url" class="col-sm-2 col-form-label">
+                <span class="i18n-target" data-id="settingsFormLabelBaseURL">StammTV Base URL</span>
+            </label>
             <div class="col-sm-10">
                 <input id="stammtv-base-url" type="url" class="form-control dark"
                        placeholder="https://..." aria-label="Add" required>
                 <small class="form-text text-white" id="stammtv-base-url-small">
-                    Enter the StammTV Base URL, beginning with http:// or https://
+                    <span class="i18n-target" data-id="settingsFormHelptextBaseURL">Enter the StammTV Base URL, beginning with http:// or https://</span>
                 </small>
             </div>
 
         </div>
         <div class="form-group row mb-3">
-            <label for="stammtv-wss-url" class="col-sm-2 col-form-label">StammTV WSS URL</label>
+            <label for="stammtv-wss-url" class="col-sm-2 col-form-label">
+                <span class="i18n-target" data-id="settingsFormLabelWSSURL">StammTV WSS URL</span>
+            </label>
             <div class="col-sm-10">
                 <input id="stammtv-wss-url" type="url" class="form-control dark"
                        placeholder="wss://..." aria-label="Add" required>
                 <small class="form-text text-white" id="stammtv-wss-url-small">
-                    Enter the StammTV WSS URL, beginning with wss://
+                    <span class="i18n-target" data-id="settingsFormHelptextWSSURL">Enter the StammTV WSS URL, beginning with wss://</span>
                 </small>
             </div>
         </div>
-        <div id="status" style="color: #259025"></div>
         <button class="btn btn-primary" type="button" id="save" title="Submit and save">
-            Save
+            <span class="i18n-target" data-id="settingsSaveButtonCaption">💾 Save</span>
         </button>
     </form>
 </div>
 
-<script src="options.js"></script>
+<script src="/i18n.js"></script>
+<script src="settings.js"></script>
 </body>
 </html>

base/settings/settings.js

@@ -0,0 +1,70 @@
+const stammTVBaseUrl = document.getElementById('stammtv-base-url');
+const stammTVWSSUrl = document.getElementById('stammtv-wss-url');
+const saveButton = document.getElementById('save');
+
+function validateAndSave() {
+    let valid = true;
+    if (stammTVBaseUrl.value.startsWith('http://') || stammTVBaseUrl.value.startsWith('https://')) {
+        stammTVBaseUrl.classList.remove('is-invalid');
+        stammTVBaseUrl.classList.add('is-valid');
+        valid = valid && true;
+    } else {
+        stammTVBaseUrl.classList.remove('is-valid');
+        stammTVBaseUrl.classList.add('is-invalid');
+        valid = false;
+    }
+
+    if (stammTVWSSUrl.value.startsWith('wss://')) {
+        stammTVWSSUrl.classList.remove('is-invalid');
+        stammTVWSSUrl.classList.add('is-valid');
+        valid = valid && true;
+    } else {
+        stammTVWSSUrl.classList.remove('is-valid');
+        stammTVWSSUrl.classList.add('is-invalid');
+        valid = false;
+    }
+    if (valid) {
+        save();
+    } else {
+        console.log('Failed to save settings - form validation was not successful.')
+        saveButton.classList.replace('btn-primary', 'btn-danger');
+        saveButton.classList.replace('btn-success', 'btn-danger');
+        saveButton.textContent = getMessage('settingsSaveButtonCaptionFailure');
+    }
+}
+
+// Saves options to chrome.storage
+function save() {
+    if (chrome && chrome.storage && chrome.storage.local) {
+        chrome.storage.local.set({
+            baseURL: stammTVBaseUrl.value,
+            wssURL: stammTVWSSUrl.value
+        }, function () {
+            // Update form controls to let user know options were saved.
+            saveButton.classList.replace('btn-primary', 'btn-success');
+            saveButton.classList.replace('btn-danger', 'btn-success');
+            saveButton.textContent = getMessage('settingsSaveButtonCaptionSuccess');
+        });
+    } else {
+        console.error('Unsupported browser or no access to localStorage')
+    }
+}
+
+// Restores select box and checkbox state using the preferences
+// stored in chrome.storage.
+function load() {
+    if (chrome && chrome.storage && chrome.storage.local) {
+        chrome.storage.local.get({
+            baseURL: getMessage("settingsFormInputRequired"),
+            wssURL: getMessage("settingsFormInputRequired")
+        }, function (items) {
+            stammTVBaseUrl.value = items.baseURL;
+            stammTVWSSUrl.value = items.wssURL;
+        });
+    } else {
+        console.error('Unsupported browser or no access to localStorage')
+    }
+}
+
+document.addEventListener('DOMContentLoaded', load);
+saveButton.addEventListener('click', validateAndSave);

chrome/manifest.json

@@ -6,7 +6,7 @@
   "background": {
     "service_worker": "script.js"
   },
-  "options_page": "options/options.html",
+  "options_page": "settings/settings.html",
   "permissions": [
     "storage",
     "contextMenus"
@@ -18,5 +18,6 @@
     "16": "stammtv-bitty.png",
     "48": "stammtv-small.png",
     "128": "stammtv-large.png"
-  }
+  },
+  "default_locale": "en"
 }

firefox/manifest.json

@@ -10,7 +10,7 @@
     "persistent": true
   },
   "options_ui":{
-    "page": "options/options.html",
+    "page": "settings/settings.html",
     "open_in_tab": true
   },
   "permissions": [