debugHighlightTagsTooltip to see parser tags

src/ide/views/debug.ts

@@ -0,0 +1,56 @@
+import { LRLanguage, StreamLanguage, language, syntaxTree } from "@codemirror/language";
+import { hoverTooltip } from "@codemirror/view";
+import { getStyleTags } from "@lezer/highlight";
+
+// Tooltip to show tags, useful for theme and parser development.
+export const debugHighlightTagsTooltip = hoverTooltip((view, pos, side) => {
+    let tree = syntaxTree(view.state).resolveInner(pos, side);
+    let style = getStyleTags(tree);
+    let tagList = "";
+    if (style) {
+        for (let tag of style.tags) {
+            tagList += tag.set.join(" < ") + "\n";
+        }
+    }
+
+    let lang = view.state.facet(language);
+    let parserType = (lang instanceof LRLanguage) ? "Lezer LRLanguage" :
+        (lang instanceof StreamLanguage) ? "StreamLanguage" : "Unknown";
+    let treeName = (lang instanceof LRLanguage) ? "AST   " :
+        (lang instanceof StreamLanguage) ? "Token " : "Name  ";
+
+    return {
+        pos: pos,
+        above: true,
+        arrow: true,
+        create(view) {
+            let dom = document.createElement("div");
+            // Zero size element, so tooltip quickly dismisses when mouse moves over it, force
+            // CodeMirror's getBoundingClientRect() in isInTooltip() to always return false.
+            dom.style.overflow = "visible";
+            dom.style.height = "0";
+            dom.style.width = "0";
+            // Tooltip content.
+            let inner = document.createElement("div");
+            inner.className = "cm-debug-tooltip";
+            inner.textContent = `Parser: ${parserType}\n${treeName}: ${tree.name}\nTags  : ${tagList}`;
+            inner.style.whiteSpace = "pre-wrap";
+            inner.style.fontFamily = "monospace";
+            inner.style.background = "#333";
+            inner.style.color = "white";
+            inner.style.padding = "2px 8px";
+            inner.style.borderRadius = "4px";
+            inner.style.fontSize = "12px";
+            inner.style.border = "1px solid #555";
+            inner.style.pointerEvents = "none";
+            inner.style.position = "absolute";
+            inner.style.bottom = "0";
+            inner.style.width = "max-content";
+            dom.appendChild(inner);
+            return { dom };
+        }
+    };
+}, {
+    hoverTime: 10,
+    hideOnChange: true,
+});

src/ide/views/editors.ts

@@ -19,10 +19,15 @@ import { editorTheme } from "../../themes/editorTheme";
 import { mbo } from "../../themes/mbo";
 import { current_project, lastDebugState, platform, qs, runToPC } from "../ui";
 import { isMobileDevice, ProjectView } from "./baseviews";
+import { debugHighlightTagsTooltip } from "./debug";
 import { createTextTransformFilterEffect, textTransformFilterCompartment } from "./filters";
 import { breakpointMarkers, bytes, clock, currentPcMarker, errorMarkers, offset } from "./gutter";
 import { currentPc, errorMessages, highlightLines, showValue } from "./visuals";
 
+// TODO: make this an easily toggleable debug setting.
+// Debug syntax highlighting. Useful when developing new parsers and themes.
+const debugHighlightTags = false;
+
 // helper function for editor
 function jumpToLine(ed: EditorView, i: number) {
   const line = ed.state.doc.line(i);
@@ -194,6 +199,7 @@ export class SourceEditor implements ProjectView {
         parser || [],
         theme,
         editorTheme,
+        debugHighlightTags ? debugHighlightTagsTooltip : [],
         EditorState.tabSize.of(8),
         indentUnit.of("        "),
         keymap.of([indentWithTab]),
@@ -563,6 +569,7 @@ export class DisassemblerView implements ProjectView {
         drawSelection(),
         highlightActiveLine(),
         highlightSelectionMatches(),
+        debugHighlightTags ? debugHighlightTagsTooltip : [],
         disassemblyTheme,
         cobalt,
         currentPc.field,