Route JSON editor native tooltips through dialog tooltip manager

Author: Azornes

js/presets/preset_manager/json_editor_dialog.js

@@ -22,6 +22,7 @@ export class JSONEditorDialog {
     async show() {
         // Get current JSON
         const currentJSON = this.parentDialog.manager.exportToJSON();
+        let stopEditorTooltips = () => {};
         log.debug('Opening JSON editor dialog', {
             jsonLength: currentJSON.length
         });
@@ -51,6 +52,7 @@ export class JSONEditorDialog {
                 this.editor.destroy();
                 this.editor = null;
             }
+            stopEditorTooltips();
             tooltipManager.destroy();
             wrapper.close();
         });
@@ -139,6 +141,7 @@ export class JSONEditorDialog {
 
         // Add drag-and-drop functionality for JSON files
         this.setupDragAndDrop(editorContainer, validationMsg);
+        stopEditorTooltips = this.replaceNativeEditorTooltips(editorContainer, tooltipManager);
 
         content.appendChild(editorContainer);
         dialog.appendChild(content);
@@ -151,6 +154,7 @@ export class JSONEditorDialog {
                 this.editor.destroy();
                 this.editor = null;
             }
+            stopEditorTooltips();
             tooltipManager.destroy();
             wrapper.close();
         });
@@ -180,6 +184,63 @@ export class JSONEditorDialog {
         });
     }
 
+    /**
+     * Routes JSONEditor/Ace title tooltips through the dialog tooltip manager.
+     * Ace recreates controls while editing, so new and updated title attributes
+     * must be handled continuously to avoid native and managed tooltips overlapping.
+     *
+     * @param {HTMLElement} container - JSONEditor root element
+     * @param {TooltipManager} tooltipManager - Dialog tooltip manager
+     * @returns {Function} Cleanup callback
+     */
+    replaceNativeEditorTooltips(container, tooltipManager) {
+        const attachedElements = new WeakSet();
+
+        const replaceTitle = (element) => {
+            const tooltipText = element?.getAttribute?.('title');
+            if (!tooltipText) return;
+
+            element.dataset.tooltipText = tooltipText;
+            element.removeAttribute('title');
+
+            if (!attachedElements.has(element)) {
+                tooltipManager.attach(element);
+                attachedElements.add(element);
+            }
+        };
+
+        const replaceTitlesInTree = (root) => {
+            replaceTitle(root);
+            root?.querySelectorAll?.('[title]').forEach(replaceTitle);
+        };
+
+        replaceTitlesInTree(container);
+
+        if (typeof MutationObserver === 'undefined') {
+            return () => {};
+        }
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes') {
+                    replaceTitle(mutation.target);
+                    return;
+                }
+
+                mutation.addedNodes.forEach(replaceTitlesInTree);
+            });
+        });
+
+        observer.observe(container, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['title']
+        });
+
+        return () => observer.disconnect();
+    }
+
     /**
      * Sets up drag-and-drop functionality for JSON files
      * @param {HTMLElement} container - Container element to attach drag-and-drop
@@ -296,16 +357,25 @@ export class JSONEditorDialog {
      * @returns {HTMLElement} Info element
      */
     createInfoMessage() {
-        const infoDiv = document.createElement('div');
-        infoDiv.className = 'resolution-master-json-editor-info';
-        infoDiv.innerHTML = `
-            💡 <strong>Direct JSON editing</strong><br>
+        const infoDetails = document.createElement('details');
+        infoDetails.className = 'resolution-master-json-editor-info';
+
+        const summary = document.createElement('summary');
+        summary.className = 'resolution-master-json-editor-info-summary';
+        summary.innerHTML = '💡 <strong>Direct JSON editing</strong>';
+
+        const content = document.createElement('div');
+        content.className = 'resolution-master-json-editor-info-content';
+        content.innerHTML = `
             Edit the JSON below to modify custom presets and hidden built-in presets.<br>
             You can also drag & drop a .json file onto the editor to load it.<br>
             Changes will replace current configuration when you click "Apply Changes".
         `;
-        
-        return infoDiv;
+
+        infoDetails.appendChild(summary);
+        infoDetails.appendChild(content);
+
+        return infoDetails;
     }
 
     /**

js/styles/json-editor-dialog.css

@@ -7,8 +7,14 @@
 
 /* Dialog Container - Component-specific sizing */
 .resolution-master-json-editor-dialog {
-    width: 90vw;
-    height: 90vh;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 0;
+    transform: none;
     display: flex;
     flex-direction: column;
     z-index: var(--z-json-editor);
@@ -21,18 +27,67 @@
 
 /* Info Message */
 .resolution-master-json-editor-info {
-    padding: var(--spacing-12) var(--spacing-20);
     background: var(--bg-primary-10);
     border-bottom: 1px solid var(--bg-primary-30);
     color: var(--color-primary);
     font-size: var(--font-md);
+}
+
+.resolution-master-json-editor-info-summary {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-8);
+    padding: var(--spacing-6) var(--spacing-20);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+}
+
+.resolution-master-json-editor-info-summary::-webkit-details-marker {
+    display: none;
+}
+
+.resolution-master-json-editor-info-summary::before {
+    content: '▶';
+    font-size: var(--font-sm);
+    transition: transform 0.15s ease;
+}
+
+.resolution-master-json-editor-info[open] > .resolution-master-json-editor-info-summary::before {
+    transform: rotate(90deg);
+}
+
+.resolution-master-json-editor-info-summary::after {
+    content: 'Show instructions';
+    margin-left: auto;
+    color: var(--color-gray-300);
+    font-size: var(--font-sm);
+}
+
+.resolution-master-json-editor-info[open] > .resolution-master-json-editor-info-summary::after {
+    content: 'Hide instructions';
+}
+
+.resolution-master-json-editor-info-summary:hover {
+    background: var(--bg-primary-10);
+}
+
+.resolution-master-json-editor-info-summary:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+
+.resolution-master-json-editor-info-content {
+    padding: var(--spacing-4) var(--spacing-20) var(--spacing-12);
+    border-top: 1px solid var(--bg-primary-30);
     line-height: 1.5;
 }
 
 /* Content Area */
 .resolution-master-json-editor-content {
     flex: 1;
-    padding: var(--spacing-20);
+    min-height: 0;
+    padding: 0;
     overflow: hidden;
     display: flex;
     flex-direction: column;
@@ -41,9 +96,10 @@
 /* Editor Container */
 .resolution-master-json-editor-container {
     flex: 1;
+    min-height: 0;
     display: flex;
     border: 1px solid var(--color-gray-700);
-    border-radius: var(--radius-lg);
+    border-radius: 0;
     overflow: hidden;
     background: var(--color-bg-dark-3);
     transition: all 0.2s ease;
@@ -121,6 +177,14 @@
     color: var(--color-gray-100);
 }
 
+/* Keep validation text vertically centered with balanced spacing. */
+.resolution-master-json-editor-validation {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--spacing-5) var(--spacing-20);
+}
+
 /* Validation States - border colors for container */
 .resolution-master-json-editor-container.valid {
     color: var(--color-success);

tests/js/json_editor_tooltips.test.mjs

@@ -0,0 +1,102 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { JSONEditorDialog } from "../../js/presets/preset_manager/json_editor_dialog.js";
+
+class MockElement {
+    constructor(title = null) {
+        this.attributes = new Map();
+        this.children = [];
+        this.dataset = {};
+        if (title) this.attributes.set("title", title);
+    }
+
+    getAttribute(name) {
+        return this.attributes.get(name) ?? null;
+    }
+
+    setAttribute(name, value) {
+        this.attributes.set(name, value);
+    }
+
+    removeAttribute(name) {
+        this.attributes.delete(name);
+    }
+
+    appendChild(child) {
+        this.children.push(child);
+    }
+
+    querySelectorAll(selector) {
+        assert.equal(selector, "[title]");
+        return this.children.flatMap((child) => [
+            ...(child.getAttribute("title") ? [child] : []),
+            ...child.querySelectorAll(selector)
+        ]);
+    }
+}
+
+test("JSON editor routes native and dynamically created title tooltips through one manager", () => {
+    const originalMutationObserver = globalThis.MutationObserver;
+    let observerInstance;
+
+    class MockMutationObserver {
+        constructor(callback) {
+            this.callback = callback;
+            this.disconnected = false;
+            observerInstance = this;
+        }
+
+        observe(target, options) {
+            this.target = target;
+            this.options = options;
+        }
+
+        disconnect() {
+            this.disconnected = true;
+        }
+    }
+
+    globalThis.MutationObserver = MockMutationObserver;
+
+    try {
+        const container = new MockElement();
+        const foldControl = new MockElement("Fold code");
+        container.appendChild(foldControl);
+
+        const attached = [];
+        const tooltipManager = {
+            attach(element) {
+                attached.push(element);
+            }
+        };
+
+        const dialog = new JSONEditorDialog(null);
+        const cleanup = dialog.replaceNativeEditorTooltips(container, tooltipManager);
+
+        assert.equal(foldControl.getAttribute("title"), null);
+        assert.equal(foldControl.dataset.tooltipText, "Fold code");
+        assert.deepEqual(attached, [foldControl]);
+        assert.deepEqual(observerInstance.options.attributeFilter, ["title"]);
+
+        foldControl.setAttribute("title", "Unfold code");
+        observerInstance.callback([{ type: "attributes", target: foldControl }]);
+
+        assert.equal(foldControl.getAttribute("title"), null);
+        assert.equal(foldControl.dataset.tooltipText, "Unfold code");
+        assert.deepEqual(attached, [foldControl]);
+
+        const dynamicControl = new MockElement("Compact data");
+        container.appendChild(dynamicControl);
+        observerInstance.callback([{ type: "childList", addedNodes: [dynamicControl] }]);
+
+        assert.equal(dynamicControl.getAttribute("title"), null);
+        assert.equal(dynamicControl.dataset.tooltipText, "Compact data");
+        assert.deepEqual(attached, [foldControl, dynamicControl]);
+
+        cleanup();
+        assert.equal(observerInstance.disconnected, true);
+    } finally {
+        globalThis.MutationObserver = originalMutationObserver;
+    }
+});