🔖 Release preparations for 0.2.0

CHANGELOG.md

@@ -4,6 +4,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [0.2.0] - 2024-12-10
+
+- Add support for Thunderbird 128
+- Require Thunderbird 128 or higher
+- Add dark theme for options page
+- Use badge instead of custom icon (see [#1](https://git.mmk2410.org/mmk2410/SpaceApper/issues/1))
+
 ## [0.1.0] - 2024-07-28
 
 - Initial commit

manifest.json

@@ -6,7 +6,7 @@
   "browser_specific_settings": {
     "gecko": {
       "id": "tb.spaceapper@mmk2410.org",
-      "strict_min_version": "115.0"
+      "strict_min_version": "128.0"
     }
   },
   "description": "Add webpages to the spaces toolbar.",
@@ -26,5 +26,5 @@
     "browser_style": false
   },
   "permissions": ["storage", "webRequest", "webRequestBlocking"],
-  "version": "0.1.0"
+  "version": "0.2"
 }

options/options.css

@@ -1,9 +1,38 @@
+:root {
+    --c-text: #000;
+    --c-background: #fff;
+    --c-btn-background: #e7e7e7;
+
+    @media (prefers-color-scheme: dark) {
+        --c-text: #fff;
+        --c-background: #27272a;
+        --c-btn-background: #555;
+    }
+}
+
 html {
+    background-color: var(--c-background);
     font-family: sans-serif;
+    box-sizing: content-box;
+    margin: 0;
+    height: 100%;
+}
+
+body {
+    box-sizing: content-box;
+    margin: 0;
+    height: 100%;
+}
+
+form {
+    box-sizing: content-box;
+    height: 100%;
+    margin: 0;
 }
 
 button {
-    background-color: #e7e7e7;
+    color: var(--c-text);
+    background-color: var(--c-btn-background);
     border-radius: 5px;
     border: none;
     padding: 5px 10px;
@@ -16,6 +45,7 @@ button {
 }
 
 #spaces {
+    color: var(--c-text);
     width: 100%;
     border-collapse: collapse;
 }
@@ -41,7 +71,9 @@ button {
 }
 
 #spaces tbody input {
+    background-color: var(--c-background);
     border: none;
+    color: var(--c-text);
     height: 100%;
     width: 100%;
     font-size: inherit;

options/options.html

@@ -13,7 +13,7 @@
                     <tr>
                         <td>Name</td>
                         <td>URL</td>
-                        <td>Icon URL</td>
+                        <td>Badge Color</td>
                         <td></td>
                     </tr>
                 </thead>

options/options.js

@@ -19,7 +19,7 @@ function buildSpaceElement(app) {
 
   tr.appendChild(buildInputRow("title", app.title));
   tr.appendChild(buildInputRow("url", app.url));
-  tr.appendChild(buildInputRow("icon", app.icon));
+  tr.appendChild(buildInputRow("badgeBackgroundColor", app.badgeBackgroundColor));
 
   const removeTd = document.createElement("td");
   const removeButton = document.createElement("button");
@@ -46,7 +46,7 @@ function addSpace() {
   const newApp = {
     title: "",
     url: "",
-    icon: "",
+    badgeBackgroundColor: "",
   };
   spaces.appendChild(buildSpaceElement(newApp));
 }
@@ -66,7 +66,7 @@ async function saveChanges(e) {
       name: hashSpaceName(space.querySelector("input[name='url']").value),
       title: space.querySelector("input[name='title']").value,
       url: space.querySelector("input[name='url']").value,
-      icon: space.querySelector("input[name='icon']").value,
+      badgeBackgroundColor: space.querySelector("input[name='badgeBackgroundColor']").value,
     };
     apps.push(app);
   });

scripts/spaces.mjs

@@ -20,7 +20,8 @@ async function createSpaces() {
     urls.push(app.url);
     await browser.spaces.create(app.name, app.url, {
       title: app.title,
-      defaultIcons: app.icon,
+      badgeText: app.title.substring(0, 2),
+      badgeBackgroundColor: app.badgeBackgroundColor
     });
   });