Font index

ui/src/debug/DebugView.svelte

@@ -8,6 +8,7 @@
     import type Debugger from '@core/Debugger';
 
     import slideH from '../svelte/slideH';
+    import FontIndex from './FontIndex.svelte';
     import Popup from '../components/Popup.svelte';
     import PageSelectionPopup from './PageSelectionPopup.svelte';
     import Checkbox from '../components/Checkbox.svelte';
@@ -21,6 +22,7 @@
     let pinnedPage: number;
     let onlyRelevantItems = true;
     let groupingEnabled = true;
+    let showFonts = false;
 
     $: canNext = $debugStage + 1 < stageNames.length;
     $: canPrev = $debugStage > 0;
@@ -110,6 +112,11 @@
         {/each}
     </ul>
 
+    <!-- Fonts Index -->
+    <div class="fixed left-0 top-40 z-50">
+        <FontIndex bind:showFonts fontMap={debug.fontMap} />
+    </div>
+
     <!-- Items -->
     {#if visiblePages.find((page) => page.itemGroups.length > 0)}
         <ItemTable

ui/src/debug/FontIndex.svelte

@@ -0,0 +1,28 @@
+<script>
+    import { scale } from 'svelte/transition';
+    import { linear } from 'svelte/easing';
+
+    import slideH from '../svelte/slideH';
+    import FontTooltip from './FontTooltip.svelte';
+
+    export let showFonts = false;
+    export let fontMap: Map<string, object>;
+</script>
+
+<div class="flex items-start">
+    {#if showFonts}
+        <div class="py-2 px-2 bg-gray-200 rounded-br">
+            <div class=" overflow-y-scroll " style="max-height: 65vh" transition:slideH={{ duration: 400 }}>
+                {#each [...fontMap.keys()] as fontName}
+                    <FontTooltip {fontMap} {fontName} />
+                {/each}
+            </div>
+        </div>
+    {/if}
+    <div
+        class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-blue-600"
+        style="font-family: AmericanTypewriter, verdana"
+        on:click={() => (showFonts = !showFonts)}>
+        F
+    </div>
+</div>

ui/src/debug/FontTooltip.svelte

@@ -7,10 +7,12 @@
 </script>
 
 <div class="pb-1 rounded shadow bg-gray-300 min-w-max">
-    <div class="py-1 px-2 bg-gray-400 font-semibold rounded-t">{fontName}</div>
+    <div class="bg-gray-400 py-1 px-2 rounded-t grid gap-x-2" style="grid-template-columns: 1fr 2.5fr">
+        <div class="font-semibold">{fontName}</div>
+        <div class="">{font['name']}</div>
+    </div>
+
     <div class="px-2 grid gap-x-2 text-sm" style="grid-template-columns: 1fr 2.5fr">
-        <div>Name:</div>
-        <div>{font['name']}</div>
         <div>Type:</div>
         <div>{font['type']}</div>
         <div>MimeType:</div>

ui/src/debug/ItemTable.svelte

@@ -185,7 +185,7 @@
         @apply whitespace-nowrap;
         position: -webkit-sticky;
         position: sticky;
-        top: 2.4em;
+        top: 2.7em;
         z-index: 2;
     }