☰

DOM + FPS Indicator (Draggable + Minimize)

DOM/FPS индикатор: перетаскивание, двойной клик — компактный кружок, позиция и состояние сохраняются; спарклайн ms/кадр (опц.)

// ==UserScript==
// @name         DOM + FPS Indicator (Draggable + Minimize)
// @namespace    https://github.com/aket0r/
// @version      2.1b
// @description  DOM/FPS индикатор: перетаскивание, двойной клик — компактный кружок, позиция и состояние сохраняются; спарклайн ms/кадр (опц.)
// @author       aket0r
// @match        http://*/*
// @match        https://*/*
// @exclude      https://chat.openai.com/*
// @exclude      https://chatgpt.com/*
// @grant        none
// @license      MIT
// @icon         https://raw.githubusercontent.com/aket0r/dom-indicator-loading/main/DOM-indicator-loading.png
// ==/UserScript==

(() => {
  'use strict';

  // ===== Настройки =====
  const DOM_THRESHOLDS = { warn: 15000, danger: 30000 };
  const DOM_UPDATE_EVERY_MS = 1000;

  const FPS_ENABLED = true;
  const FPS_WINDOW = 60;
  const FPS_UI_UPDATE_MS = 1000;

  const SPARKLINE_ENABLED = true;
  const SPARK = {
    length: 120,
    width: 140,
    height: 28,
    padX: 4,
    padY: 3,
    clampMs: { min: 8, max: 100 }
  };

  const LS_KEY = 'dom_fps_indicator_state_v12'; // позиция/минимизация

  // ===== Ранний выход для iframes =====
  if (window.top !== window.self) return;

  // ===== Состояние UI (позиция/минимизация) =====
  const state = loadState() || { x: null, y: null, minimized: false };

  function saveState() {
    try { localStorage.setItem(LS_KEY, JSON.stringify(state)); } catch {}
  }
  function loadState() {
    try { return JSON.parse(localStorage.getItem(LS_KEY) || 'null'); } catch { return null; }
  }

  // ===== FPS-модуль =====
  const FPSMeter = (() => {
    let rafId = null;
    let last = 0;
    let samples = [];
    let lastUiUpdate = 0;
    const msBuf = [];

    function loop(ts) {
      if (!last) last = ts;
      const delta = ts - last;
      last = ts;

      if (delta > 0 && delta < 250) {
        const fps = 1000 / delta;
        samples.push(fps);
        if (samples.length > FPS_WINDOW) samples.shift();

        if (SPARKLINE_ENABLED) {
          msBuf.push(delta);
          if (msBuf.length > SPARK.length) msBuf.shift();
        }
      }

      if (FPS_ENABLED && ts - lastUiUpdate >= FPS_UI_UPDATE_MS) {
        lastUiUpdate = ts;
        updateFPSLine(getStats(), msBuf);
        if (SPARKLINE_ENABLED) drawSparkline(msBuf);
      }

      rafId = requestAnimationFrame(loop);
    }

    function getStats() {
      if (samples.length === 0) return { avg: 0, min: 0, max: 0 };
      let sum = 0, min = Infinity, max = -Infinity;
      for (const v of samples) { sum += v; if (v < min) min = v; if (v > max) max = v; }
      return { avg: sum / samples.length, min, max };
    }

    function start() {
      if (rafId != null || !FPS_ENABLED) return;
      samples = [];
      last = 0;
      lastUiUpdate = 0;
      rafId = requestAnimationFrame(loop);
    }

    document.addEventListener('visibilitychange', () => {
      if (document.visibilityState === 'visible') last = performance.now();
    });

    return { start };
  })();

  // ===== UI бейдж (перетаскиваемый + компактный режим) =====
  function initBadge() {
    console.log(`%c[${new Date().toLocaleString()}] DOM + FPS indicator loaded.`, 'color: lime;');

    let badge = document.getElementById('dom-indicator');
    if (badge) return;

    // Контейнер
    badge = document.createElement('div');
    badge.id = 'dom-indicator';
    badge.style.cssText = `
      position: fixed;
      bottom: 20px;
      right: 80px;
      background: #222;
      color: #0f0;
      font-family: monospace;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 13px;
      z-index: 2147483647;
      box-shadow: 0 0 4px rgba(0,0,0,0.4);
      user-select: none;
      pointer-events: auto;  /* ВАЖНО: кликабельно */
      line-height: 1.25;
      white-space: nowrap;
      cursor: grab;          /* перетаскивание */
    `;

    // Внутреннее содержимое
    const domLine = document.createElement('div');
    domLine.id = 'dom-line';
    domLine.textContent = 'DOM nodes: loading...';

    const fpsLine = document.createElement('div');
    fpsLine.id = 'fps-line';
    if (FPS_ENABLED) fpsLine.textContent = 'FPS: --.- (ms: --.-)';

    const spark = document.createElement('canvas');
    spark.id = 'fps-spark';
    spark.width = SPARK.width;
    spark.height = SPARK.height;
    spark.style.cssText = 'display:block;margin-top:4px;opacity:.9;';

    badge.appendChild(domLine);
    if (FPS_ENABLED) badge.appendChild(fpsLine);
    if (SPARKLINE_ENABLED) badge.appendChild(spark);
    document.body.prepend(badge);

    // Применить сохранённую позицию/режим
    if (state.x !== null && state.y !== null) {
      applyPosition(badge, state.x, state.y);
    } else {
      // дефолтная позиция — правый-низ (уже задана через bottom/right)
      clampToViewport(badge);
    }
    if (state.minimized) {
      setMinimized(badge, true);
    }

    // Обработчики перетаскивания
    makeDraggable(badge);

    // Двойной клик — переключить режим (полный/компакт)
    badge.addEventListener('dblclick', () => {
      setMinimized(badge, !state.minimized);
      saveState();
    });

    // Запуск DOM-счётчика
    setInterval(updateDOMLine, DOM_UPDATE_EVERY_MS);

    // На ресайз — не уезжаем за экран
    window.addEventListener('resize', () => clampToViewport(badge));
  }

  function setMinimized(badge, minimized) {
    state.minimized = minimized;

    const domLine = badge.querySelector('#dom-line');
    const fpsLine = badge.querySelector('#fps-line');
    const spark = badge.querySelector('#fps-spark');

    if (minimized) {
      // Компактный кружок — только число DOM
      badge.style.width = '42px';
      badge.style.height = '42px';
      badge.style.borderRadius = '999px';
      badge.style.padding = '0';
      badge.style.display = 'flex';
      badge.style.alignItems = 'center';
      badge.style.justifyContent = 'center';
      badge.style.cursor = 'grab';

      // Покажем только число (без «DOM nodes: »)
      const count = document.querySelectorAll('*').length;
      domLine.textContent = `${count}`;
      domLine.style.display = 'block';
      domLine.style.fontWeight = '700';
      domLine.style.fontSize = '14px';

      if (fpsLine) fpsLine.style.display = 'none';
      if (spark) spark.style.display = 'none';
    } else {
      // Полный режим
      badge.style.width = '';
      badge.style.height = '';
      badge.style.borderRadius = '8px';
      badge.style.padding = '6px 10px';
      badge.style.display = 'block';
      badge.style.cursor = 'grab';

      // Вернём текстовую метку
      const count = document.querySelectorAll('*').length;
      domLine.textContent = `DOM nodes: ${count}`;
      domLine.style.fontWeight = '';
      domLine.style.fontSize = '';

      if (fpsLine) fpsLine.style.display = '';
      if (spark && SPARKLINE_ENABLED) spark.style.display = 'block';
    }
  }

  function updateDOMLine() {
    const badge = document.getElementById('dom-indicator');
    const domLine = document.getElementById('dom-line');
    if (!badge || !domLine) return;

    const count = document.querySelectorAll('*').length;
    if (state.minimized) {
      domLine.textContent = `${count}`;
    } else {
      domLine.textContent = `DOM nodes: ${count}`;
    }

    if (count > DOM_THRESHOLDS.danger) {
      badge.style.color = '#f55';
      badge.style.background = '#300';
    } else if (count > DOM_THRESHOLDS.warn) {
      badge.style.color = '#ff0';
      badge.style.background = '#442';
    } else {
      badge.style.color = '#0f0';
      badge.style.background = '#222';
    }
  }

  function updateFPSLine(stats, msBuf) {
    if (!FPS_ENABLED) return;
    const el = document.getElementById('fps-line');
    const badge = document.getElementById('dom-indicator');
    if (!el || !badge) return;

    const avg = stats.avg || 0;
    const ms = avg > 0 ? (1000 / avg) : 0;
    if (!state.minimized) {
      el.textContent = `FPS: ${avg.toFixed(1)} (ms: ${ms.toFixed(1)})`;
    }

    // Лёгкая подсветка по усреднённому ms, если фон дефолтный
    const bg = badge.style.background;
    const looksDefault = !bg || bg === '#222' || bg === 'rgb(34, 34, 34)';
    if (looksDefault) {
      if (ms <= 18) {
        badge.style.background = '#1f2a1f';
        badge.style.color = '#aef1ae';
      } else if (ms <= 25) {
        badge.style.background = '#2a281f';
        badge.style.color = '#ffe9a6';
      } else {
        badge.style.background = '#2a1f1f';
        badge.style.color = '#ffb3b3';
      }
    }
  }

  // ===== Спарклайн =====
  function drawSparkline(msBuf) {
    if (!SPARKLINE_ENABLED || state.minimized) return;
    const canvas = document.getElementById('fps-spark');
    if (!canvas) return;
    const ctx = canvas.getContext('2d', { alpha: true });
    ctx.imageSmoothingEnabled = false;

    const W = canvas.width, H = canvas.height;
    const px = SPARK.padX, py = SPARK.padY;
    const plotW = W - px * 2, plotH = H - py * 2;

    ctx.clearRect(0, 0, W, H);
    if (!msBuf || msBuf.length < 2) return;

    let min = Math.min(...msBuf);
    let max = Math.max(...msBuf);
    min = Math.max(min, SPARK.clampMs.min);
    max = Math.min(Math.max(max, min + 1), SPARK.clampMs.max);

    ctx.globalAlpha = 0.15;
    ctx.fillStyle = '#ffffff';
    const ms60 = 1000 / 60, ms30 = 1000 / 30;
    const y60 = py + (plotH * (max - ms60) / (max - min));
    const y30 = py + (plotH * (max - ms30) / (max - min));
    ctx.fillRect(px, Math.max(py, Math.min(H - py - 1, y60)), plotW, 1);
    ctx.fillRect(px, Math.max(py, Math.min(H - py - 1, y30)), plotW, 1);
    ctx.globalAlpha = 1;

    const lastMs = msBuf[msBuf.length - 1];
    const stroke = lastMs <= 18 ? '#aef1ae' : lastMs <= 25 ? '#ffe9a6' : '#ffb3b3';

    ctx.lineWidth = 1;
    ctx.strokeStyle = stroke;
    ctx.beginPath();
    for (let i = 0; i < msBuf.length; i++) {
      const ms = Math.min(Math.max(msBuf[i], min), max);
      const x = px + (i / (SPARK.length - 1)) * plotW;
      const y = py + (plotH * (max - ms) / (max - min));
      if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
    }
    ctx.stroke();

    const grad = ctx.createLinearGradient(0, py, 0, H - py);
    grad.addColorStop(0, 'rgba(255,255,255,0.18)');
    grad.addColorStop(1, 'rgba(255,255,255,0.02)');
    ctx.fillStyle = grad;
    ctx.lineTo(px + plotW, H - py);
    ctx.lineTo(px, H - py);
    ctx.closePath();
    ctx.fill();
  }

  // ===== Перетаскивание =====
  function makeDraggable(el) {
    let dragging = false;
    let startX = 0, startY = 0;
    let startLeft = 0, startTop = 0;

    // Если позиция сохранена — используем left/top, а не bottom/right
    if (state.x !== null && state.y !== null) {
      el.style.left = `${state.x}px`;
      el.style.top = `${state.y}px`;
      el.style.right = 'auto';
      el.style.bottom = 'auto';
    }

    const onDown = (clientX, clientY) => {
      dragging = true;
      el.style.cursor = 'grabbing';

      const rect = el.getBoundingClientRect();
      startX = clientX;
      startY = clientY;
      startLeft = rect.left + window.scrollX;
      startTop = rect.top + window.scrollY;

      // Переключаемся на абсолютные координаты
      el.style.left = `${startLeft}px`;
      el.style.top = `${startTop}px`;
      el.style.right = 'auto';
      el.style.bottom = 'auto';

      document.addEventListener('mousemove', onMouseMove);
      document.addEventListener('mouseup', onMouseUp);
      document.addEventListener('touchmove', onTouchMove, { passive: false });
      document.addEventListener('touchend', onTouchEnd);
    };

    const onMouseDown = (e) => {
      // ЛКМ
      if (e.button !== 0) return;
      onDown(e.clientX, e.clientY);
      e.preventDefault();
    };

    const onTouchStart = (e) => {
      const t = e.touches[0];
      if (!t) return;
      onDown(t.clientX, t.clientY);
    };

    const onMove = (clientX, clientY) => {
      if (!dragging) return;
      const dx = clientX - startX;
      const dy = clientY - startY;

      const newLeft = startLeft + dx;
      const newTop = startTop + dy;

      applyPosition(el, newLeft, newTop);
    };

    const onMouseMove = (e) => {
      onMove(e.clientX, e.clientY);
      e.preventDefault();
    };

    const onTouchMove = (e) => {
      const t = e.touches[0];
      if (!t) return;
      onMove(t.clientX, t.clientY);
      e.preventDefault();
    };

    const finishDrag = () => {
      if (!dragging) return;
      dragging = false;
      el.style.cursor = 'grab';
      clampToViewport(el);
      saveState();
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
      document.removeEventListener('touchmove', onTouchMove);
      document.removeEventListener('touchend', onTouchEnd);
    };

    const onMouseUp = () => finishDrag();
    const onTouchEnd = () => finishDrag();

    el.addEventListener('mousedown', onMouseDown);
    el.addEventListener('touchstart', onTouchStart, { passive: true });
  }

  function applyPosition(el, x, y) {
    // Безопасные границы (с учётом размеров элемента)
    const rect = el.getBoundingClientRect();
    const minLeft = 0;
    const minTop = 0;
    const maxLeft = window.innerWidth - rect.width;
    const maxTop = window.innerHeight - rect.height;

    const clampedX = Math.max(minLeft, Math.min(x, maxLeft)) | 0;
    const clampedY = Math.max(minTop, Math.min(y, maxTop)) | 0;

    el.style.left = `${clampedX}px`;
    el.style.top = `${clampedY}px`;
    el.style.right = 'auto';
    el.style.bottom = 'auto';

    state.x = clampedX;
    state.y = clampedY;
  }

  function clampToViewport(el) {
    if (state.x === null || state.y === null) return;
    applyPosition(el, state.x, state.y);
    saveState();
  }

  // ===== Старт =====
  window.addEventListener('load', () => {
    setTimeout(() => {
      initBadge();
      if (FPS_ENABLED) FPSMeter.start();
    }, 200);
  });
})();