fix: Make icon reloading work again

kewisch · Nov 8, 2024 · 26084c8 · 26084c8
1 parent fe560c7
commit 26084c8
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 33 deletions.
diff --git a/src/background/spaceStorage.js b/src/background/spaceStorage.js
@@ -45,8 +45,16 @@ export default class SpaceStorage {
     return [...this.#spaces];
   }
 
+  #getIcon(spaceData) {
+    let icon = spaceData.icon;
+    if (!icon) {
+      icon = browser.runtime.getURL(spaceData.ferdiumId ? `/recipes/${spaceData.ferdiumId}/icon.svg` : "/images/addon.svg");
+    }
+    return icon;
+  }
+
   async add(spaceData, flush = true) {
-    let icon = spaceData.ferdiumId ? browser.runtime.getURL(`/recipes/${spaceData.ferdiumId}/icon.svg`) : spaceData.icon;
+    let icon = this.#getIcon(spaceData);
     let tbSpace = await messenger.spaces.create(spaceData.name, spaceData.url, { defaultIcons: icon, title: spaceData.title });
     await messenger.birdbox.updateCookieStore(spaceData.name, spaceData.container || "firefox-default");
     await messenger.birdbox.updateNotifications(spaceData.url, !!spaceData.notifications);
@@ -74,7 +82,7 @@ export default class SpaceStorage {
     this.#spaces[existingIndex] = spaceData;
     this.#spaceByName[spaceData.name] = spaceData;
 
-    let icon = spaceData.ferdiumId ? browser.runtime.getURL(`/recipes/${spaceData.ferdiumId}/icon.svg`) : spaceData.icon;
+    let icon = this.#getIcon(spaceData);
     await messenger.spaces.update(spaceId, spaceData.url, { defaultIcons: icon, title: spaceData.title });
 
     let tabs = await messenger.tabs.query({ spaceId });

diff --git a/src/spaces/addSpace.js b/src/spaces/addSpace.js
@@ -5,7 +5,7 @@
 const POPUP_WIDTH = 500;
 
 import { createSpaceItem } from "./editSpace.js";
-import { setupCustomServer, getTargetUrl } from "./common.js";
+import { setupCustomServer, getTargetUrl, DEFAULT_IMAGE } from "./common.js";
 
 function unselect() {
   document.querySelector("#add-mode .card.selected")?.classList.remove("selected");
@@ -39,11 +39,16 @@ async function clickAddSpace() {
   if (space) {
     let { teamId, targetUrl } = getTargetUrl("add", space);
 
+    let icon = space.icon;
+    if (!icon) {
+      icon = space.id ? browser.runtime.getURL(`/recipes/${space.id}/icon.svg`) : DEFAULT_IMAGE;
+    }
+
     let data = {
       name: crypto.randomUUID().replace(/-/g, "_"),
       title: document.getElementById("add-space-name").value,
       url: targetUrl,
-      icon: space.icon,
+      icon: icon,
       container: document.getElementById("add-space-container").value,
       notifications: document.getElementById("add-space-notifications").checked,
       startup: document.getElementById("add-space-startup").checked,
@@ -141,11 +146,11 @@ export async function initAddSpaces() {
   spaces.sort((a, b) => a.name.localeCompare(b.name));
 
   let customCard = cardTemplate.content.cloneNode(true);
-  customCard.querySelector("img").src = browser.runtime.getURL("/images/addon.svg");
+  customCard.querySelector("img").src = DEFAULT_IMAGE;
   customCard.querySelector(".name").textContent = messenger.i18n.getMessage("browse.customService.label");
   customCard.querySelector(".card")._spaceData = {
     name: messenger.i18n.getMessage("browse.customService.label"),
-    icon: browser.runtime.getURL("/images/addon.svg"),
+    icon: DEFAULT_IMAGE,
     config: {
       hasCustomUrl: true
     }

diff --git a/src/spaces/browse.css b/src/spaces/browse.css
@@ -128,6 +128,10 @@ html, body {
   outline: 1px solid red;
 }
 
+button:active {
+  background-color: color-mix(in srgb, currentColor, transparent 90%);
+}
+
 button.primary-button {
   padding: 5px 10px;
   background-color: AccentColor;

diff --git a/src/spaces/common.js b/src/spaces/common.js
@@ -2,6 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+export const DEFAULT_IMAGE = browser.runtime.getURL("/images/addon.svg");
+
 export function initLocalize() {
   for (let node of document.querySelectorAll("[data-l10n-id]")) {
     node.textContent = messenger.i18n.getMessage(node.dataset.l10nId);

diff --git a/src/spaces/editSpace.js b/src/spaces/editSpace.js
@@ -3,14 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import psl from "../background/libs/psl.min.js";
-import { setupCustomServer, getTargetUrl } from "./common.js";
+import { setupCustomServer, getTargetUrl, DEFAULT_IMAGE } from "./common.js";
 
 export function createSpaceItem(spaceData = {}) {
   if (!spaceData.name) {
     spaceData.name = crypto.randomUUID().replace(/-/g, "_");
   }
-  if (!spaceData.icon && !spaceData.ferdiumId) {
-    spaceData.icon = "/images/addon.svg";
+  if (!spaceData.icon) {
+    spaceData.icon = DEFAULT_IMAGE;
   }
 
   let spacesList = document.getElementById("edit-spaces-list");
@@ -36,7 +36,7 @@ function updateSpaceItem(spaceElement) {
   spaceElement.title = spaceData.title ?? "";
   spaceElement.querySelector(".name").textContent = spaceData.title ?? "";
 
-  let icon = spaceData.ferdiumId ? browser.runtime.getURL(`/recipes/${spaceData.ferdiumId}/icon.svg`) : spaceData.icon;
+  let icon = spaceData.icon || DEFAULT_IMAGE;
   spaceElement.querySelector("img").src = icon;
 }
 
@@ -147,32 +147,45 @@ async function fetchMetadata(spaceElement) {
     return;
   }
 
-  let resp = await fetch(spaceElement._spaceData.url, { cache: "no-store", signal: AbortSignal.timeout(5000) });
-
-  let data = await resp.text();
-  let parser = new DOMParser();
-  let doc = parser.parseFromString(data, "text/html");
-  let icon = doc.querySelector("link[rel~='icon']");
-  let titleElement = document.getElementById("edit-space-name");
-
-  let iconUrl = new URL(icon?.getAttribute("href") ?? "/favicon.ico", spaceElement._spaceData.url);
-  resp = await fetch(iconUrl, { cache: "no-cache", signal: AbortSignal.timeout(5000) });
-  data = await resp.blob();
-  let imageData = await new Promise((resolve, reject) => {
-    let reader = new FileReader();
-    reader.onloadend = function() {
-      if (reader.error) {
-        resolve("/images/addon.svg");
-      } else {
-        resolve(reader.result);
+  let imageData = DEFAULT_IMAGE;
+  let pageTitle = "";
+  try {
+    let resp = await fetch(spaceElement._spaceData.url, { cache: "no-store", signal: AbortSignal.timeout(5000) });
+    let data = await resp.text();
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(data, "text/html");
+    let icon = doc.querySelector("link[rel~='icon']");
+
+    pageTitle = doc.querySelector("title")?.textContent ?? "";
+
+    let iconUrl = new URL(icon?.getAttribute("href") ?? "/favicon.ico", spaceElement._spaceData.url);
+    resp = await fetch(iconUrl, { cache: "no-cache", signal: AbortSignal.timeout(5000) });
+    data = await resp.blob();
+    imageData = await new Promise((resolve, reject) => {
+      if (!resp.ok) {
+        resolve(DEFAULT_IMAGE);
+        return;
       }
-    };
 
-    reader.readAsDataURL(data);
-  });
+      let reader = new FileReader();
+      reader.onloadend = function() {
+        if (reader.error) {
+          reject(reader.error);
+        } else {
+          resolve(reader.result);
+        }
+      };
+
+      reader.readAsDataURL(data);
+    });
+  } catch (e) {
+    // Pass on any other read errors
+  }
 
+
+  let titleElement = document.getElementById("edit-space-name");
   if (!titleElement.value) {
-    titleElement.value = doc.querySelector("title")?.textContent ?? "";
+    titleElement.value = pageTitle;
     spaceElement._spaceData.title = titleElement.value;
   }
 
@@ -212,10 +225,10 @@ async function refreshIcon() {
   if (tabs.length) {
     spaceElement._spaceData.icon = tabs[0].favIconUrl;
     updateSpaceItem(spaceElement);
-    await browser.runtime.sendMessage({ action: "updateSpace", space: spaceElement._spaceData });
   } else {
     await fetchMetadata(spaceElement);
   }
+  await browser.runtime.sendMessage({ action: "updateSpace", space: spaceElement._spaceData });
 }
 
 export async function loadEditSpaces() {