script.js

// ==UserScript==
// @name         Gemini Web UI Optimizer
// @name:zh-CN   Gemini网页版UI优化器
// @namespace    https://github.com/JayConstruct/gemini-web-optimizer
// @version      1.0.1
// @description  Optimize long text fluency and add local code folding. Note: The global folding feature is currently in Beta.
// @description:zh-CN 优化长文本流畅度，添加局部代码折叠功能。注：全局折叠功能目前为测试版(Beta)。
// @author       JayConstruct
// @license      MIT
// @match        https://gemini.google.com/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // ==========================================
    // 1. 样式注入：原生 UI 像素级匹配与细节优化
    // ==========================================
    const style = document.createElement('style');
    style.textContent = `
        * { overflow-anchor: none !important; }
        user-query, model-response { 
            content-visibility: auto !important; 
            contain: content !important; 
            transform: translateZ(0); 
            will-change: transform; 
        }

        /* 强制操作区按钮垂直居中对齐 */
        code-block .buttons {
            display: flex !important;
            align-items: center !important;
        }

        /* 🌟 局部与全局按钮的基础样式共用 */
        .custom-fold-btn, .custom-global-fold-btn { 
            background: transparent; 
            border: none; 
            color: var(--mat-sys-on-surface-variant, inherit);
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            cursor: pointer; 
            margin: 0 2px; 
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
            outline: none;
            position: relative;
            transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .custom-fold-btn:hover, .custom-global-fold-btn:hover { 
            background-color: rgba(154, 160, 166, 0.15); 
        }
        .custom-fold-btn:active, .custom-global-fold-btn:active { 
            background-color: rgba(154, 160, 166, 0.3); 
        }

        /* SVG 图标控制 */
        .custom-fold-btn svg, .custom-global-fold-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
            transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* 局部按钮的 180度旋转 */
        .custom-fold-btn.is-rotated svg {
            transform: rotate(-180deg);
        }

        /* 头部背景框底部圆角平滑过渡 */
        code-block > div > div:first-child {
            transition: border-radius 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
        }
        .code-folded > div > div:first-child {
            border-bottom-left-radius: 16px !important;
            border-bottom-right-radius: 16px !important;
        }

        /* 瞬间折叠以修复滚动锚定 Bug */
        code-block > div > div:nth-of-type(2) {
            opacity: 1;
            transition: opacity 0.15s ease-out; 
        }
        .code-folded > div > div:nth-of-type(2) {
            display: none !important; 
        }
    `;
    document.head.appendChild(style);

    // ==========================================
    // 2. 原生图标构建器
    // ==========================================
    // 局部折叠图标 (expand_more)
    const createNativeIcon = () => {
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        path.setAttribute('d', "M12 15.4l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.4z");
        svg.appendChild(path);
        return svg;
    };

    // ==========================================
    // 3. 🎯 V9.8 核心：全局折叠控制器
    // ==========================================
    let isAllFolded = false; // 全局状态
    
    // Material 语义路径
    const PATH_COLLAPSE_ALL = "M7.41 18.59L8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"; // unfold_less
    const PATH_EXPAND_ALL = "M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"; // unfold_more

    const injectGlobalButton = () => {
        if (document.querySelector('.custom-global-fold-btn')) return;

        // 查找所有 share 按钮，取第一个（通常是顶部 Header 里的那个全局 Share 按钮）
        const shareIcons = document.querySelectorAll('mat-icon[data-mat-icon-name="share"]');
        if (shareIcons.length === 0) return;

        const topShareBtn = shareIcons[0].closest('button');
        if (!topShareBtn || !topShareBtn.parentNode) return;

        // 创建全局按钮
        const globalBtn = document.createElement('button');
        globalBtn.className = 'custom-global-fold-btn';
        globalBtn.title = '折叠所有代码块';

        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.setAttribute('viewBox', '0 0 24 24');
        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        // 初始状态为全部展开，因此显示“准备折叠”的图标
        path.setAttribute('d', PATH_COLLAPSE_ALL);
        svg.appendChild(path);
        globalBtn.appendChild(svg);

        // 全局点击事件
        globalBtn.onclick = (e) => {
            e.preventDefault();
            e.stopPropagation();

            isAllFolded = !isAllFolded;

            // 1. 更新全局按钮自身的状态
            if (isAllFolded) {
                path.setAttribute('d', PATH_EXPAND_ALL);
                globalBtn.title = '展开所有代码块';
            } else {
                path.setAttribute('d', PATH_COLLAPSE_ALL);
                globalBtn.title = '折叠所有代码块';
            }

            // 2. 同步并覆盖所有局部代码块的状态
            document.querySelectorAll('code-block').forEach(block => {
                const localBtn = block.querySelector('.custom-fold-btn');
                if (isAllFolded) {
                    block.classList.add('code-folded');
                    if (localBtn) {
                        localBtn.classList.add('is-rotated');
                        localBtn.title = '展开代码';
                    }
                } else {
                    block.classList.remove('code-folded');
                    if (localBtn) {
                        localBtn.classList.remove('is-rotated');
                        localBtn.title = '收起代码';
                    }
                }
            });
        };

        // 将按钮插入到 Share 按钮的左边
        topShareBtn.parentNode.insertBefore(globalBtn, topShareBtn);
    };

    // ==========================================
    // 4. 局部按钮注入与精准滚动引擎
    // ==========================================
    const injectFoldButton = (codeBlock) => {
        if (codeBlock.querySelector('.custom-fold-btn')) return;
        const topBar = codeBlock.querySelector('div > div:first-child');
        if (!topBar) return;
        const copyBtn = topBar.querySelector('button');
        if (!copyBtn) return; 

        const foldBtn = document.createElement('button');
        foldBtn.className = 'custom-fold-btn';
        foldBtn.title = '收起代码'; 
        foldBtn.appendChild(createNativeIcon());
        
        foldBtn.onclick = (e) => {
            e.preventDefault(); e.stopPropagation(); 
            
            const rectBefore = foldBtn.getBoundingClientRect();
            const isFolded = codeBlock.classList.toggle('code-folded');
            foldBtn.classList.toggle('is-rotated');
            foldBtn.title = isFolded ? '展开代码' : '收起代码';

            requestAnimationFrame(() => {
                const rectAfter = foldBtn.getBoundingClientRect();
                const delta = rectAfter.top - rectBefore.top;

                if (Math.abs(delta) > 0) {
                    let scroller = codeBlock;
                    while (scroller && scroller !== document.body && scroller !== document.documentElement) {
                        const s = window.getComputedStyle(scroller);
                        if ((s.overflowY === 'auto' || s.overflowY === 'scroll' || s.overflowY === 'overlay') && scroller.scrollHeight > scroller.clientHeight) break;
                        scroller = scroller.parentNode;
                    }
                    if (scroller && scroller !== document.body && scroller !== document.documentElement) {
                        scroller.scrollTop += delta;
                    } else {
                        window.scrollBy(0, delta);
                    }
                }
            });
        };
        copyBtn.parentNode.insertBefore(foldBtn, copyBtn);
    };

    // ==========================================
    // 5. Fiber 调度与增量监听
    // ==========================================
    const initHighlightScheduler = () => {
        if (!window.hljs || window.hljs._isFiberOptimized) return;
        const originalHighlight = window.hljs.highlightBlock;
        let pendingBlocks = new Set();
        let streamTimeout = null;
        let isStreaming = false;

        const processPendingBlocks = (idleDeadline) => {
            while (pendingBlocks.size > 0 && (idleDeadline.timeRemaining() > 5 || idleDeadline.didTimeout)) {
                const block = pendingBlocks.values().next().value;
                pendingBlocks.delete(block);
                try { originalHighlight.call(window.hljs, block); } catch (e) {}
            }
            if (pendingBlocks.size > 0) requestIdleCallback(processPendingBlocks, { timeout: 2000 });
        };

        window.hljs.highlightBlock = function(block) {
            pendingBlocks.add(block);
            clearTimeout(streamTimeout);
            if (!isStreaming) block.classList.remove('hljs'); 
            isStreaming = true;
            streamTimeout = setTimeout(() => {
                isStreaming = false;
                if (window.requestIdleCallback) requestIdleCallback(processPendingBlocks, { timeout: 2000 });
            }, 1000); 
        };
        window.hljs._isFiberOptimized = true;
    };

    const domObserver = new MutationObserver((mutations) => {
        if (!window.hljs || !window.hljs._isFiberOptimized) initHighlightScheduler();
        
        // 尝试在动态 DOM 变化时重新挂载全局按钮（防止被 Angular 刷新掉）
        injectGlobalButton();

        for (const mutation of mutations) {
            for (const node of mutation.addedNodes) {
                if (node.nodeType === Node.ELEMENT_NODE) {
                    if (node.tagName === 'CODE-BLOCK') injectFoldButton(node);
                    else if (node.querySelectorAll) {
                        const blocks = node.querySelectorAll('code-block');
                        if (blocks.length > 0) blocks.forEach(injectFoldButton);
                    }
                }
            }
        }
    });

    setTimeout(() => {
        document.querySelectorAll('code-block').forEach(injectFoldButton);
        const chatContainer = document.querySelector('chat-container') || document.body;
        domObserver.observe(chatContainer, { childList: true, subtree: true });
        initHighlightScheduler(); 
        injectGlobalButton(); // 首次注入全局按钮
        console.log("🚀 Gemini Ultimate Tool v9.8：全局一键折叠控制引擎已上线。");
    }, 3000);
})();