From 26084c8829efceccaae35bb063472797adbe47a8 Mon Sep 17 00:00:00 2001 From: Philipp Kewisch Date: Fri, 8 Nov 2024 12:07:20 +0100 Subject: [PATCH] fix: Make icon reloading work again --- src/background/spaceStorage.js | 12 +++++- src/spaces/addSpace.js | 13 +++++-- src/spaces/browse.css | 4 ++ src/spaces/common.js | 2 + src/spaces/editSpace.js | 67 ++++++++++++++++++++-------------- 5 files changed, 65 insertions(+), 33 deletions(-) diff --git a/src/background/spaceStorage.js b/src/background/spaceStorage.js index 0ce2a2f..36369bd 100644 --- 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 index ef55241..995869b 100644 --- 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 index d5baeb6..975471d 100644 --- 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 index eb2c5a9..cf04fd3 100644 --- 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 index 690f345..c0dfe9f 100644 --- 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() {