Add visual tab stop ruler

- Visual ruler at the top of the editor shows tab stops.
- When 'Tab key inserts spaces' is set, the ruler shows
  the {opcodes, operands, comments} virutal tab stops.
- In all other cases, fixed tab positions are shown
  based on the currently configured tab size.
- Clicking the visual ruler at the top of the editor
  is a shortcut to opening the settings dialog.

Author: fredsa

src/ide/views/editors.ts

@@ -26,6 +26,7 @@ import { createAssetHeaderPlugin } from "./assetdecorations";
 import { ProjectView } from "./baseviews";
 import { createTextTransformFilterEffect, textTransformFilterCompartment } from "./filters";
 import { breakpointMarkers, bytes, clock, currentPcMarker, errorMarkers, gutterLineInfo, offset, statusMarkers } from "./gutter";
+import { tabStopRuler } from "./tabstopruler";
 import { currentPc, errorMessages, errorSpans, highlightLines, showValue } from "./visuals";
 
 // look ahead this many bytes when finding source lines for a PC
@@ -193,6 +194,7 @@ export class SourceEditor implements ProjectView {
         parser || [],
         theme,
         editorTheme,
+        tabStopRuler,
         lineWrap ? EditorView.lineWrapping : [],
 
         currentPc.field,

src/ide/views/tabstopruler.ts

@@ -0,0 +1,59 @@
+import { indentUnit } from "@codemirror/language";
+import { EditorState } from "@codemirror/state";
+import { EditorView, Panel, showPanel } from "@codemirror/view";
+import { AsmTabStops, tabStopsEquals } from "../../common/tabdetect";
+import { openSettings, tabStopsFacet } from "../settings";
+import { MAX_COLS, tabStopsToColumns } from "../views/tabs";
+
+function buildContent(asmTabStops: AsmTabStops, tabSize: number, useTabs: boolean): string {
+  const chars = new Array(MAX_COLS);
+  chars.fill(useTabs ? " " : "<span class='cm-highlightSpace'> </span>");
+  for (const col of tabStopsToColumns(asmTabStops, tabSize, useTabs)) {
+    chars[col] = "▾";
+  }
+  return chars.join("");
+}
+
+function rulerPanel(view: EditorView): Panel {
+  const dom = document.createElement("div");
+  dom.className = "tab-stop-ruler";
+  dom.setAttribute("aria-hidden", "true");
+  let currentAsmTabStops: AsmTabStops = {};
+  let currentTabSize = 0;
+  let currentIndent = "";
+
+  function rebuild() {
+    const asmTabStops = view.state.facet(tabStopsFacet);
+    const tabSize = view.state.facet(EditorState.tabSize);
+    const indent = view.state.facet(indentUnit);
+    if (tabStopsEquals(asmTabStops, currentAsmTabStops) && tabSize === currentTabSize && indent === currentIndent) return;
+    currentAsmTabStops = asmTabStops;
+    currentTabSize = tabSize;
+    currentIndent = indent;
+    dom.innerHTML = buildContent(asmTabStops, tabSize, indent === '\t');
+  }
+
+  function sync() {
+    const contentStyle = getComputedStyle(view.contentDOM);
+    dom.style.font = contentStyle.font;
+    const left = view.contentDOM.getBoundingClientRect().left - view.dom.getBoundingClientRect().left;
+    dom.style.marginLeft = left + "px";
+    const line = view.contentDOM.querySelector(".cm-line");
+    if (line) dom.style.paddingLeft = getComputedStyle(line).paddingLeft;
+  }
+
+  rebuild();
+  dom.addEventListener("click", openSettings);
+  sync();
+
+  return {
+    dom,
+    top: true,
+    update() {
+      rebuild();
+      sync();
+    }
+  };
+}
+
+export const tabStopRuler = showPanel.of(rulerPanel);

src/themes/editorTheme.ts

@@ -38,4 +38,10 @@ export const editorTheme = EditorView.theme({
     "& .cm-lineNumbers .cm-gutterElement": {
         color: "#99cc99",
     },
-});
+    ".tab-stop-ruler": {
+        whiteSpace: "pre",
+        overflow: "hidden",
+        userSelect: "none",
+        cursor: "pointer",
+    }
+});

src/themes/mbo.ts

@@ -43,6 +43,14 @@ export const mboTheme = EditorView.theme({
     backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20"><path stroke="%23aaaaaa45" stroke-width="1" fill="none" d="M0 10H10L7 6M10 10L7 14"/></svg>')`,
     backgroundPosition: "left 50%"
   },
+  ".cm-panels": {
+    backgroundColor: "#4e4e4e" /* color left of tab stop ruler */,
+  },
+  ".tab-stop-ruler": {
+    color: "rgba(255,255,255,0.25)",
+    backgroundColor: "#202020",
+    borderBottom: "2px solid #4e4e4e",
+  },
 }, { dark: true });
 
 export const mboHighlightStyle = HighlightStyle.define([