From 5c56651b5e939cbfa8952476f65853156bfaaee3 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Mon, 26 Aug 2024 03:42:02 +0200 Subject: [PATCH 001/110] Simplify service worker --- src/service-worker.ts | 124 +++++++++++++++++++++++------------------- 1 file changed, 67 insertions(+), 57 deletions(-) diff --git a/src/service-worker.ts b/src/service-worker.ts index 5a10ac80d..a0f1140f8 100644 --- a/src/service-worker.ts +++ b/src/service-worker.ts @@ -12,74 +12,84 @@ async function install() { addEventListener("install", (e) => (e).waitUntil(install())) addEventListener("activate", (e) => (e).waitUntil(activate())) +async function clearCaches(exceptVersion = undefined) { + const keys = await caches.keys() + await Promise.all(keys.map((k) => k !== version && caches.delete(k))) + console.log("Cleared caches") +} + async function activate() { console.log("Activating service worker") - caches - .keys() - .then((keys) => { - // Remove all old caches - Promise.all(keys.map((key) => key !== version && caches.delete(key))) - }) - .catch(console.error) + await clearCaches(version) } -function fetchAndCache(event) { - return fetch(event.request).then((networkResponse) => { - return caches.open(version).then((cache) => { - cache.put(event.request, networkResponse.clone()) - console.log("Cached", event.request) - return networkResponse - }) - }) +async function fetchAndCache(event: ServiceWorkerFetchEvent): Promise { + let networkResponse = await fetch(event.request) + let cache = await caches.open(version) + await cache.put(event.request, networkResponse.clone()) + console.log("Cached", event.request) + return networkResponse } -const cacheFirst = async (event, attemptUpdate: boolean = false) => { - await event.respondWith( - caches.match(event.request, { ignoreSearch: true }).then((cacheResponse) => { - if (cacheResponse !== undefined) { - console.debug("Loaded from cache: ", event.request) - if (attemptUpdate) { - fetchAndCache(event) - } - return cacheResponse - } - return fetchAndCache(event) - }) - ) +async function cacheFirst(event: ServiceWorkerFetchEvent, attemptUpdate: boolean = false) { + const cacheResponse = await caches.match(event.request, { ignoreSearch: true }) + if (cacheResponse === undefined) { + return fetchAndCache(event) + } + console.debug("Loaded from cache: ", event.request) + if (attemptUpdate) { + fetchAndCache(event) + } + return cacheResponse + +} + +const neverCache: RegExp[] = [ + /\.html$/, + /service-worker/ +] +const neverCacheHost : RegExp[] = [ + /127\.0\.0\.[0-9]+/, + /\.local/, + /\.gitpod\.io/, + /localhost/ +] + +async function handleRequest(event: ServiceWorkerFetchEvent) { + const origin = new URL(self.origin) + const requestUrl = new URL(event.request.url) + if (requestUrl.pathname.endsWith("service-worker-version")) { + console.log("Sending version number...") + await event.respondWith( + new Response(JSON.stringify({ "service-worker-version": version })), + ) + return + } + if (requestUrl.pathname.endsWith("/service-worker-clear")) { + await clearCaches() + await event.respondWith( + new Response(JSON.stringify({ "cache-cleared": true })), + ) + return + } + + const shouldBeCached = + origin.host === requestUrl.host && + !neverCacheHost.some(blacklisted => origin.host.match(blacklisted)) && + !neverCache.some(blacklisted => event.request.url.match(blacklisted)) + if (!shouldBeCached) { + console.debug("Not intercepting ", requestUrl.toString(), origin.host, requestUrl.host) + // We return _without_ calling event.respondWith, which signals the browser that it'll have to handle it himself + return + } + await event.respondWith(await cacheFirst(event)) } self.addEventListener("fetch", async (e) => { // Important: this lambda must run synchronously, as the browser will otherwise handle the request - const event = e + const event: ServiceWorkerFetchEvent = e try { - const origin = new URL(self.origin) - const requestUrl = new URL(event.request.url) - if (requestUrl.pathname.endsWith("service-worker-version")) { - console.log("Sending version number...") - await event.respondWith( - new Response(JSON.stringify({ "service-worker-version": version })) - ) - return - } - if (requestUrl.pathname.endsWith("/service-worker-clear")) { - const keys = await caches.keys() - await Promise.all(keys.map((k) => caches.delete(k))) - console.log("Cleared caches") - return - } - const shouldBeCached = - origin.host === requestUrl.host && - origin.hostname !== "127.0.0.1" && - origin.hostname !== "localhost" && - !origin.hostname.endsWith(".local") && - !origin.host.endsWith(".gitpod.io") && - origin.pathname.indexOf("service-worker") < 0 - if (!shouldBeCached) { - console.debug("Not intercepting ", requestUrl.toString(), origin.host, requestUrl.host) - // We return _without_ calling event.respondWith, which signals the browser that it'll have to handle it himself - return - } - await cacheFirst(event) + await handleRequest(event) } catch (e) { console.error("CRASH IN SW:", e) await event.respondWith(fetch(event.request.url)) From 065f03691f6b6650f7bfcb54aaa89d5c218a36c8 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 27 Aug 2024 19:37:21 +0200 Subject: [PATCH 002/110] UX: Disable comparison tool if not logged in --- src/UI/Comparison/ComparisonTool.svelte | 54 +++++++++++++------------ 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/src/UI/Comparison/ComparisonTool.svelte b/src/UI/Comparison/ComparisonTool.svelte index 0a9a33d4c..4d3edc91c 100644 --- a/src/UI/Comparison/ComparisonTool.svelte +++ b/src/UI/Comparison/ComparisonTool.svelte @@ -15,6 +15,7 @@ import AccordionSingle from "../Flowbite/AccordionSingle.svelte" import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt" import { ComparisonState } from "./ComparisonState" + import LoginToggle from "../Base/LoginToggle.svelte" export let externalData: Store< | { success: { content: Record } } @@ -45,35 +46,38 @@ let enableLogin = state.featureSwitches.featureSwitchEnableLogin -{#if !$sourceUrl || !$enableLogin} - -{:else if $externalData === undefined} - -{:else if $externalData["error"] !== undefined} -
- -
-{:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0} - -{:else if !$hasDifferencesAtStart} + + + {#if !$sourceUrl || !$enableLogin} + + {:else if $externalData === undefined} + + {:else if $externalData["error"] !== undefined} +
+ +
+ {:else if $propertyKeysExternal.length === 0 && $knownImages.size + $unknownImages.length === 0} + + {:else if !$hasDifferencesAtStart} -{:else if $comparisonState !== undefined} - + {:else if $comparisonState !== undefined} + - - -{/if} + + + {/if} + From b79835074fe5f954bd4b64ecdb713ca13503495e Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 27 Aug 2024 19:38:27 +0200 Subject: [PATCH 003/110] UX: don't show bold in options that can be chosen as answer, see usertest --- public/css/index-tailwind-output.css | 20 ++++++++----------- .../TagRendering/TagRenderingQuestion.svelte | 8 ++++++-- src/index.css | 4 ++++ 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 320d427ce..a17c7a81a 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -993,10 +993,6 @@ video { margin-right: 4rem; } -.mb-4 { - margin-bottom: 1rem; -} - .mt-4 { margin-top: 1rem; } @@ -1029,6 +1025,10 @@ video { margin-right: 0.25rem; } +.mb-4 { + margin-bottom: 1rem; +} + .ml-1 { margin-left: 0.25rem; } @@ -1073,10 +1073,6 @@ video { margin-left: -1.5rem; } -.mt-12 { - margin-top: 3rem; -} - .mb-3 { margin-bottom: 0.75rem; } @@ -2043,10 +2039,6 @@ video { column-gap: 0px; } -.gap-x-4 { - column-gap: 1rem; -} - .gap-y-8 { row-gap: 2rem; } @@ -4887,6 +4879,10 @@ a.link-underline { background-color: #f2f2f2; } +.no-bold b { + font-weight: normal; +} + /************************* MISC ELEMENTS *************************/ .selected svg:not(.noselect *) path.selectable { diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte index 90203e64c..ba1a47389 100644 --- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte @@ -352,6 +352,7 @@ {/if} + {#if config.mappings?.length >= 8 || hideMappingsUnlessSearchedFor}