Update dev-tools.js

dev-tools.js

@@ -6,31 +6,8 @@
   let dtActiveEditElement = null;
   let dtNetworkRequests = [];
   let dtSelectedRequest = null;
-  let dtVitalsData = {
-    CLS: null,
-    FCP: null,
-    FID: null,
-    LCP: null,
-    TTFB: null
-  };
   let dtObserver = null;
   let dtRefreshElementsPanel = null;
-  let dtVitalsMeasurementStarted = false;
-
-  // Web Vitalsスクリプトを動的に読み込み
-  const loadWebVitals = () => {
-    return new Promise((resolve) => {
-      if (window.webVitals) {
-        resolve();
-        return;
-      }
-      
-      const webVitalsScript = document.createElement('script');
-      webVitalsScript.src = 'https://unpkg.com/[email protected]/dist/web-vitals.iife.js';
-      webVitalsScript.onload = resolve;
-      document.head.appendChild(webVitalsScript);
-    });
-  };
 
   // DOM変更を監視するMutationObserver (最適化版)
   const setupMutationObserver = () => {
@@ -461,69 +438,6 @@
   overflow-y: auto;
 }
 
-/* Web Vitals スタイル */
-.dt-vitals-container {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.dt-vital-card {
-  background: var(--dt-tab-bg);
-  border: 1px solid var(--dt-border-color);
-  border-radius: 5px;
-  padding: 15px;
-}
-
-.dt-vital-title {
-  font-weight: bold;
-  margin-bottom: 10px;
-  color: var(--dt-primary-color);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.dt-vital-value {
-  font-size: 24px;
-  font-weight: bold;
-  margin: 10px 0;
-}
-
-.dt-vital-good {
-  color: var(--dt-success-color);
-}
-
-.dt-vital-needs-improvement {
-  color: var(--dt-warning-color);
-}
-
-.dt-vital-poor {
-  color: var(--dt-error-color);
-}
-
-.dt-vital-description {
-  font-size: 13px;
-  color: var(--dt-text-muted);
-}
-
-.dt-vital-thresholds {
-  display: flex;
-  margin-top: 10px;
-  font-size: 12px;
-}
-
-.dt-vital-threshold {
-  flex: 1;
-  text-align: center;
-  padding: 5px;
-  border-radius: 3px;
-}
-
-.dt-vital-threshold.active {
-  background: rgba(0, 122, 204, 0.2);
-}
-
 /* DOM Tree Toggle */
 .dt-dom-toggle {
   position: absolute;
@@ -617,13 +531,11 @@
     const elementsTab = createTab('Elements', 'elements');
     const networkTab = createTab('Network', 'network');
     const storageTab = createTab('Storage', 'storage');
-    const vitalsTab = createTab('Web Vitals', 'vitals');
 
     tabs.appendChild(consoleTab);
     tabs.appendChild(elementsTab);
     tabs.appendChild(networkTab);
     tabs.appendChild(storageTab);
-    tabs.appendChild(vitalsTab);
 
     const closeBtn = document.createElement('button');
     closeBtn.className = 'dt-devtools-close';
@@ -641,13 +553,11 @@
     const elementsPanel = createElementsPanel();
     const networkPanel = createNetworkPanel();
     const storagePanel = createStoragePanel();
-    const vitalsPanel = createVitalsPanel();
 
     content.appendChild(consolePanel);
     content.appendChild(elementsPanel);
     content.appendChild(networkPanel);
     content.appendChild(storagePanel);
-    content.appendChild(vitalsPanel);
 
     container.appendChild(header);
     container.appendChild(content);
@@ -678,183 +588,6 @@
     elementsTab.click();
   };
 
-  // Web Vitalsパネル作成 (測定開始ボタンが押されるまで何もしない)
-  function createVitalsPanel() {
-    const panel = document.createElement('div');
-    panel.className = 'dt-devtools-panel';
-    panel.id = 'vitals-panel';
-
-    const container = document.createElement('div');
-    container.className = 'dt-vitals-container';
-    panel.appendChild(container);
-
-    // 測定開始ボタン
-    const startButton = document.createElement('button');
-    startButton.className = 'dt-add-btn';
-    startButton.textContent = '測定を開始';
-    startButton.onclick = startVitalsMeasurement;
-    container.appendChild(startButton);
-
-    // CLS (Cumulative Layout Shift)
-    const clsCard = document.createElement('div');
-    clsCard.className = 'dt-vital-card';
-    clsCard.innerHTML = `
-      <div class="dt-vital-title">CLS (Cumulative Layout Shift) <span class="dt-vital-description">視覚的な安定性</span></div>
-      <div class="dt-vital-value" id="dt-cls-value">-</div>
-      <div class="dt-vital-thresholds">
-        <div class="dt-vital-threshold">Good: &lt; 0.1</div>
-        <div class="dt-vital-threshold">Needs Improvement: &lt; 0.25</div>
-        <div class="dt-vital-threshold">Poor: ≥ 0.25</div>
-      </div>
-    `;
-    container.appendChild(clsCard);
-
-    // FCP (First Contentful Paint)
-    const fcpCard = document.createElement('div');
-    fcpCard.className = 'dt-vital-card';
-    fcpCard.innerHTML = `
-      <div class="dt-vital-title">FCP (First Contentful Paint) <span class="dt-vital-description">最初のコンテンツ表示</span></div>
-      <div class="dt-vital-value" id="dt-fcp-value">-</div>
-      <div class="dt-vital-thresholds">
-        <div class="dt-vital-threshold">Good: &lt; 1.8s</div>
-        <div class="dt-vital-threshold">Needs Improvement: &lt; 3s</div>
-        <div class="dt-vital-threshold">Poor: ≥ 3s</div>
-      </div>
-    `;
-    container.appendChild(fcpCard);
-
-    // FID (First Input Delay)
-    const fidCard = document.createElement('div');
-    fidCard.className = 'dt-vital-card';
-    fidCard.innerHTML = `
-      <div class="dt-vital-title">FID (First Input Delay) <span class="dt-vital-description">最初の入力遅延</span></div>
-      <div class="dt-vital-value" id="dt-fid-value">-</div>
-      <div class="dt-vital-thresholds">
-        <div class="dt-vital-threshold">Good: &lt; 100ms</div>
-        <div class="dt-vital-threshold">Needs Improvement: &lt; 300ms</div>
-        <div class="dt-vital-threshold">Poor: ≥ 300ms</div>
-      </div>
-    `;
-    container.appendChild(fidCard);
-
-    // LCP (Largest Contentful Paint)
-    const lcpCard = document.createElement('div');
-    lcpCard.className = 'dt-vital-card';
-    lcpCard.innerHTML = `
-      <div class="dt-vital-title">LCP (Largest Contentful Paint) <span class="dt-vital-description">最大のコンテンツ表示</span></div>
-      <div class="dt-vital-value" id="dt-lcp-value">-</div>
-      <div class="dt-vital-thresholds">
-        <div class="dt-vital-threshold">Good: &lt; 2.5s</div>
-        <div class="dt-vital-threshold">Needs Improvement: &lt; 4s</div>
-        <div class="dt-vital-threshold">Poor: ≥ 4s</div>
-      </div>
-    `;
-    container.appendChild(lcpCard);
-
-    // TTFB (Time to First Byte)
-    const ttfbCard = document.createElement('div');
-    ttfbCard.className = 'dt-vital-card';
-    ttfbCard.innerHTML = `
-      <div class="dt-vital-title">TTFB (Time to First Byte) <span class="dt-vital-description">最初のバイト到達時間</span></div>
-      <div class="dt-vital-value" id="dt-ttfb-value">-</div>
-      <div class="dt-vital-thresholds">
-        <div class="dt-vital-threshold">Good: &lt; 800ms</div>
-        <div class="dt-vital-threshold">Needs Improvement: &lt; 1.8s</div>
-        <div class="dt-vital-threshold">Poor: ≥ 1.8s</div>
-      </div>
-    `;
-    container.appendChild(ttfbCard);
-
-    function startVitalsMeasurement() {
-      if (dtVitalsMeasurementStarted) return;
-      dtVitalsMeasurementStarted = true;
-      
-      loadWebVitals().then(() => {
-        if (window.webVitals) {
-          try {
-            const vitals = window.webVitals;
-            if (vitals.getCLS) {
-              vitals.getCLS(updateCLS);
-              vitals.getFCP(updateFCP);
-              vitals.getFID(updateFID);
-              vitals.getLCP(updateLCP);
-              vitals.getTTFB(updateTTFB);
-            } else if (vitals.onCLS) {
-              vitals.onCLS(updateCLS);
-              vitals.onFCP(updateFCP);
-              vitals.onFID(updateFID);
-              vitals.onLCP(updateLCP);
-              vitals.onTTFB(updateTTFB);
-            }
-            startButton.textContent = '測定中...';
-            startButton.disabled = true;
-          } catch (e) {
-            console.error('Web Vitals error:', e);
-          }
-        }
-      });
-    }
-
-    function updateCLS(metric) {
-      dtVitalsData.CLS = metric.value;
-      updateVitalDisplay('cls', metric.value, 0.1, 0.25);
-    }
-
-    function updateFCP(metric) {
-      dtVitalsData.FCP = metric.value;
-      updateVitalDisplay('fcp', metric.value, 1800, 3000);
-    }
-
-    function updateFID(metric) {
-      dtVitalsData.FID = metric.value;
-      updateVitalDisplay('fid', metric.value, 100, 300);
-    }
-
-    function updateLCP(metric) {
-      dtVitalsData.LCP = metric.value;
-      updateVitalDisplay('lcp', metric.value, 2500, 4000);
-    }
-
-    function updateTTFB(metric) {
-      dtVitalsData.TTFB = metric.value;
-      updateVitalDisplay('ttfb', metric.value, 800, 1800);
-    }
-
-    function updateVitalDisplay(id, value, goodThreshold, needsImprovementThreshold) {
-      const element = document.getElementById(`dt-${id}-value`);
-      if (!element) return;
-      
-      const displayValue = id === 'ttfb' ? 
-        `${Math.round(value)}ms` : 
-        `${value.toFixed(2)}${id === 'cls' ? '' : 's'}`;
-      
-      element.textContent = displayValue;
-      
-      element.className = 'dt-vital-value';
-      if (value <= goodThreshold) {
-        element.classList.add('dt-vital-good');
-      } else if (value <= needsImprovementThreshold) {
-        element.classList.add('dt-vital-needs-improvement');
-      } else {
-        element.classList.add('dt-vital-poor');
-      }
-      
-      const thresholds = element.parentElement.querySelectorAll('.dt-vital-threshold');
-      thresholds.forEach((threshold, index) => {
-        threshold.classList.remove('active');
-        if (
-          (index === 0 && value <= goodThreshold) ||
-          (index === 1 && value > goodThreshold && value <= needsImprovementThreshold) ||
-          (index === 2 && value > needsImprovementThreshold)
-        ) {
-          threshold.classList.add('active');
-        }
-      });
-    }
-
-    return panel;
-  }
-
   // ネットワークパネル作成
   function createNetworkPanel() {
     const panel = document.createElement('div');