Convert debugHighlightTags to developer setting

src/ide/settings.ts

@@ -2,6 +2,7 @@ import { closeBrackets, deleteBracketPair } from "@codemirror/autocomplete";
 import { indentUnit } from "@codemirror/language";
 import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { EditorView, highlightSpecialChars, highlightTrailingWhitespace, highlightWhitespace, keymap } from "@codemirror/view";
+import { debugHighlightTagsTooltip } from "./views/debug";
 import { insertTabKeymap, spacesSpacesKeymap } from "./views/tabs";
 
 declare var bootbox;
@@ -13,6 +14,7 @@ export const highlightTrailingWhitespaceCompartment = new Compartment();
 export const tabSizeCompartment = new Compartment();
 export const closeBracketsCompartment = new Compartment();
 export const tabsToSpacesCompartment = new Compartment();
+export const debugHighlightTagsCompartment = new Compartment();
 
 export interface EditorSettings {
   tabSize: number;
@@ -21,6 +23,7 @@ export interface EditorSettings {
   highlightWhitespace: boolean;
   highlightTrailingWhitespace: boolean;
   closeBrackets: boolean;
+  debugHighlightTags: boolean;
 }
 
 const SETTINGS_KEY = "8bitworkshop/editorSettings";
@@ -32,6 +35,7 @@ const defaultSettings: EditorSettings = {
   highlightWhitespace: true,
   highlightTrailingWhitespace: true,
   closeBrackets: true,
+  debugHighlightTags: false,
 };
 
 export function loadSettings(): EditorSettings {
@@ -55,6 +59,7 @@ const compartmentValues: [Compartment, (s: EditorSettings) => Extension][] = [
   [highlightWhitespaceCompartment, s => s.highlightWhitespace ? highlightWhitespace() : []],
   [highlightTrailingWhitespaceCompartment, s => s.highlightTrailingWhitespace ? highlightTrailingWhitespace() : []],
   [closeBracketsCompartment, s => s.closeBrackets ? [closeBrackets(), keymap.of([{ key: "Backspace", run: deleteBracketPair }])] : []],
+  [debugHighlightTagsCompartment, s => s.debugHighlightTags ? debugHighlightTagsTooltip : []],
 ];
 
 export function settingsExtensions(settings: EditorSettings): Extension[] {
@@ -84,12 +89,16 @@ export function openSettings() {
   bootbox.dialog({
     title: "Settings",
     message: `<form id="settingsForm" onsubmit="return false">
+       <h5>Editor preferences</h5>
        <div class="form-group"><label>Tab size: <input type="number" id="setting_tabSize" min="1" max="40" value="${settings.tabSize}" style="width:4em"></label></div>
        <div class="checkbox"><label><input type="checkbox" id="setting_tabsToSpaces" ${settings.tabsToSpaces ? 'checked' : ''}> Insert spaces when pressing TAB</label></div>
        <div class="checkbox"><label><input type="checkbox" id="setting_highlightSpecialChars" ${settings.highlightSpecialChars ? 'checked' : ''}> Highlight special characters</label></div>
        <div class="checkbox"><label><input type="checkbox" id="setting_highlightWhitespace" ${settings.highlightWhitespace ? 'checked' : ''}> Highlight whitespace</label></div>
        <div class="checkbox"><label><input type="checkbox" id="setting_highlightTrailingWhitespace" ${settings.highlightTrailingWhitespace ? 'checked' : ''}> Highlight unwanted trailing whitespace</label></div>
        <div class="checkbox"><label><input type="checkbox" id="setting_closeBrackets" ${settings.closeBrackets ? 'checked' : ''}> Automatically add and remove closing brackets</label></div>
+       <hr>
+       <h5>8bitworkshop IDE internal settings</h5>
+       <div class="checkbox"><label><input type="checkbox" id="setting_debugHighlightTags" ${settings.debugHighlightTags ? 'checked' : ''}> Debug editor syntax highlighting tags</label></div>
       </form>`,
     buttons: {
       cancel: {
@@ -106,6 +115,7 @@ export function openSettings() {
           settings.highlightWhitespace = $('#setting_highlightWhitespace').is(':checked');
           settings.highlightTrailingWhitespace = $('#setting_highlightTrailingWhitespace').is(':checked');
           settings.closeBrackets = $('#setting_closeBrackets').is(':checked');
+          settings.debugHighlightTags = $('#setting_debugHighlightTags').is(':checked');
           saveSettings(settings);
           applySettingsToAll(settings);
         }

src/ide/views/editors.ts

@@ -24,18 +24,10 @@ import { loadSettings, registerEditor, settingsExtensions } from "../settings";
 import { clearBreakpoint, current_project, lastDebugState, platform, qs, runToPC } from "../ui";
 import { createAssetHeaderPlugin } from "./assetdecorations";
 import { isMobileDevice, ProjectView } from "./baseviews";
-import { debugHighlightTagsTooltip } from "./debug";
 import { createTextTransformFilterEffect, textTransformFilterCompartment } from "./filters";
 import { breakpointMarkers, bytes, clock, currentPcMarker, errorMarkers, offset, statusMarkers } from "./gutter";
 import { currentPc, errorMessages, errorSpans, 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;
-
-
-/////
-
 // look ahead this many bytes when finding source lines for a PC
 export const PC_LINE_LOOKAHEAD = 64;
 
@@ -186,7 +178,6 @@ export class SourceEditor implements ProjectView {
         parser || [],
         theme,
         editorTheme,
-        debugHighlightTags ? debugHighlightTagsTooltip : [],
         lineWrap ? EditorView.lineWrapping : [],
 
         currentPc.field,
@@ -616,7 +607,6 @@ export class DisassemblerView implements ProjectView {
         drawSelection(),
         highlightActiveLine(),
         highlightSelectionMatches(),
-        debugHighlightTags ? debugHighlightTagsTooltip : [],
         disassemblyTheme,
         cobalt,
         currentPc.field,