Panel Toggle + Network Intrusion Height Slider のソースコード

Panel Toggle + Network Intrusion Height Slider

Toggle panels + add height slider to NETWORK INTRUSION panel
右端で折り返す
// ==UserScript==
// @name         Panel Toggle + Network Intrusion Height Slider
// @namespace    http://tampermonkey.net/
// @version      4.1
// @description  Toggle panels + add height slider to NETWORK INTRUSION panel
// @match        *://*/*
// @grant        none
// @run-at      document-idle
// ==/UserScript==

(function() {
    'use strict';

    function init() {
        document.querySelectorAll('.panel').forEach(panel => {
            if (panel.dataset.combinedInit) return;
            panel.dataset.combinedInit = "true";

            const headers = panel.querySelectorAll('h2');
            if (!headers.length) return;

            const header = headers[0];

            // === FIND FIRST DIV AFTER HEADER ===
            let content = null;
            let foundHeader = false;

            for (const el of panel.children) {
                if (el === header) {
                    foundHeader = true;
                    continue;
                }
                if (foundHeader && el.tagName === 'DIV') {
                    content = el;
                    break;
                }
            }

            if (!content) return;

            // === HEADER BASE STYLE ===
            header.style.display = 'flex';
            header.style.justifyContent = 'space-between';
            header.style.alignItems = 'center';

            const controls = document.createElement('div');
            controls.style.display = 'flex';
            controls.style.alignItems = 'center';
            controls.style.gap = '8px';

            const arrow = document.createElement('span');
            arrow.textContent = '▶';
            arrow.style.cursor = 'pointer';
            arrow.style.userSelect = 'none';
            arrow.style.transition = 'transform 0.2s ease';

            let open = true;

            arrow.onclick = () => {
                open = !open;
                content.style.display = open ? '' : 'none';
                arrow.style.transform = open ? 'rotate(90deg)' : 'rotate(0deg)';
            };

            arrow.style.transform = 'rotate(90deg)';
            controls.appendChild(arrow);

            const isNetworkIntrusion = [...headers]
                .some(h => h.textContent.includes('NETWORK INTRUSION'));

            if (isNetworkIntrusion) {
                content.style.overflow = 'auto';

                const slider = document.createElement('input');
                slider.type = 'range';
                slider.min = 100;
                slider.max = 1000;
                slider.value = 400;
                slider.style.cursor = 'pointer';

                const label = document.createElement('span');
                label.textContent = '400px';
                label.style.fontSize = '11px';
                label.style.opacity = '0.7';

                function updateHeight(val) {
                    content.style.maxHeight = val + 'px';
                    label.textContent = val + 'px';
                }

                slider.oninput = () => {
                    updateHeight(slider.value);
                };

                updateHeight(slider.value);

                controls.appendChild(slider);
                controls.appendChild(label);
            }

            header.appendChild(controls);
        });
    }

    const observer = new MutationObserver(init);
    observer.observe(document.body, { childList: true, subtree: true });

    init();

})();