Update dev-tools.js

dev-tools.js

@@ -7,7 +7,7 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 300px; /* 適切な高さに調整 */
+  height: 300px;
   background-color: #fff;
   border-top: 1px solid #ddd;
   box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
@@ -280,16 +280,17 @@
 .json-null {
   color: #6c71c4;
 }
-  `;
+
+`;
   document.head.appendChild(style);
 
-  // コンテキストメニュー用の変数
+  // グローバル変数
   let contextMenu = null;
   let selectedElement = null;
   let selectedDOMNode = null;
   let activeEditElement = null;
 
-  // 開発者ツールのUI構築
+  // 開発者ツールのメイン関数
   function createDevTools() {
     const container = document.createElement('div');
     container.className = 'devtools-container';
@@ -353,7 +354,6 @@
       return tab;
     }
 
-    // 初期タブをアクティブに
     elementsTab.click();
   }
 
@@ -372,7 +372,6 @@
     `;
     document.body.appendChild(contextMenu);
 
-    // メニューアイテムのクリック処理
     contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
       item.addEventListener('click', (e) => {
         const action = e.target.getAttribute('data-action');
@@ -381,7 +380,6 @@
       });
     });
 
-    // メニュー外をクリックで閉じる
     document.addEventListener('click', (e) => {
       if (e.target !== contextMenu && !contextMenu.contains(e.target)) {
         contextMenu.style.display = 'none';
@@ -389,7 +387,7 @@
     });
   }
 
-  // コンテキストメニューのアクション処理
+  // コンテキストメニューアクション処理
   function handleContextMenuAction(action) {
     if (!selectedElement) return;
 
@@ -400,7 +398,6 @@
           refreshElementsPanel();
         });
         break;
-      
       case 'add-attribute':
         const attrName = prompt('属性名を入力');
         if (attrName) {
@@ -409,7 +406,6 @@
           refreshElementsPanel();
         }
         break;
-      
       case 'edit-element':
         startInlineEdit(selectedDOMNode.querySelector('.dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
           const newElement = document.createElement(newValue);
@@ -422,20 +418,17 @@
           refreshElementsPanel();
         });
         break;
-      
       case 'duplicate':
         const clone = selectedElement.cloneNode(true);
         selectedElement.parentNode.insertBefore(clone, selectedElement.nextSibling);
         refreshElementsPanel();
         break;
-      
       case 'remove':
         if (confirm('要素を削除しますか？')) {
           selectedElement.parentNode.removeChild(selectedElement);
           refreshElementsPanel();
         }
         break;
-      
       case 'toggle-visibility':
         if (selectedElement.style.display === 'none') {
           selectedElement.style.display = '';
@@ -444,15 +437,11 @@
         }
         refreshElementsPanel();
         break;
-      
       case 'force-state':
         const state = prompt('強制する状態を入力 (例: hover, active, focus)', 'hover');
         if (state) {
-          // 既存の状態クラスを削除
           selectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
                                          'force-focus-within', 'force-focus-visible', 'force-target');
-          
-          // 新しい状態クラスを追加
           selectedElement.classList.add(`force-${state}`);
           refreshElementsPanel();
         }
@@ -460,7 +449,7 @@
     }
   }
 
-  // インライン編集を開始する関数
+  // インライン編集関数
   function startInlineEdit(element, initialValue, callback) {
     if (activeEditElement) return;
     
@@ -485,14 +474,12 @@
       callback: callback
     };
     
-    // 入力フィールド外をクリックしたら編集を終了
     const clickOutsideHandler = (e) => {
       if (!input.contains(e.target)) {
         finishInlineEdit();
       }
     };
     
-    // Enterキーで編集を終了
     input.addEventListener('keydown', (e) => {
       if (e.key === 'Enter') {
         finishInlineEdit();
@@ -523,7 +510,7 @@
     }
   }
 
-  // Consoleパネルの作成
+  // Consoleパネル作成
   function createConsolePanel() {
     const panel = document.createElement('div');
     panel.className = 'devtools-panel';
@@ -553,7 +540,6 @@
     panel.appendChild(log);
     panel.appendChild(input);
 
-    // コンソールログをキャプチャ
     ['log', 'error', 'warn'].forEach(method => {
       const original = console[method];
       console[method] = (...args) => {
@@ -571,29 +557,14 @@
       log.scrollTop = log.scrollHeight;
     }
 
-    // 出力をフォーマットする関数
     function formatOutput(output) {
-      if (output === null) {
-        return '<span class="json-null">null</span>';
-      }
-      if (output === undefined) {
-        return '<span class="json-null">undefined</span>';
-      }
-      if (typeof output === 'boolean') {
-        return `<span class="json-boolean">${output}</span>`;
-      }
-      if (typeof output === 'number') {
-        return `<span class="json-number">${output}</span>`;
-      }
-      if (typeof output === 'string') {
-        return `<span class="json-string">"${output}"</span>`;
-      }
-      if (typeof output === 'function') {
-        return `<span class="json-object">function ${output.name}() { ... }</span>`;
-      }
-      if (Array.isArray(output)) {
-        return `<span class="json-object">[${output.map(formatOutput).join(', ')}]</span>`;
-      }
+      if (output === null) return '<span class="json-null">null</span>';
+      if (output === undefined) return '<span class="json-null">undefined</span>';
+      if (typeof output === 'boolean') return `<span class="json-boolean">${output}</span>`;
+      if (typeof output === 'number') return `<span class="json-number">${output}</span>`;
+      if (typeof output === 'string') return `<span class="json-string">"${output}"</span>`;
+      if (typeof output === 'function') return `<span class="json-object">function ${output.name}() { ... }</span>`;
+      if (Array.isArray(output)) return `<span class="json-object">[${output.map(formatOutput).join(', ')}]</span>`;
       if (typeof output === 'object') {
         try {
           return `<span class="json-object">${JSON.stringify(output, null, 2)
@@ -612,113 +583,8 @@
     return panel;
   }
 
-  // DOMツリーを構築する関数
-  function buildDOMTree(node, parentElement, depth = 0) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
-      const element = document.createElement('div');
-      element.className = 'dom-node';
-      element.style.marginLeft = `${depth * 15}px`;
-      element.dataset.elementId = node.id || Math.random().toString(36).substr(2, 9);
-
-      // 右クリックイベント
-      element.oncontextmenu = (e) => {
-        e.preventDefault();
-        selectedElement = node;
-        selectedDOMNode = element;
-        
-        document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
-        element.classList.add('selected');
-        
-        contextMenu.style.display = 'block';
-        contextMenu.style.left = `${e.pageX}px`;
-        contextMenu.style.top = `${e.pageY}px`;
-        
-        updateCSSPanel(node);
-      };
-
-      // クリックで選択
-      element.onclick = (e) => {
-        e.stopPropagation();
-        selectedElement = node;
-        selectedDOMNode = element;
-        
-        document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
-        element.classList.add('selected');
-        
-        updateCSSPanel(node);
-      };
-
-      // タグ名
-      const tag = document.createElement('span');
-      tag.className = 'dom-tag editable';
-      tag.textContent = `<${node.tagName.toLowerCase()}`;
-      tag.onclick = (e) => {
-        e.stopPropagation();
-        startInlineEdit(tag, node.tagName.toLowerCase(), (newValue) => {
-          const newElement = document.createElement(newValue);
-          Array.from(node.attributes).forEach(attr => {
-            newElement.setAttribute(attr.name, attr.value);
-          });
-          newElement.innerHTML = node.innerHTML;
-          node.parentNode.replaceChild(newElement, node);
-          selectedElement = newElement;
-          refreshElementsPanel();
-        });
-      };
-      element.appendChild(tag);
-
-      // 属性
-      Array.from(node.attributes).forEach(attr => {
-        const attrSpan = document.createElement('span');
-        attrSpan.className = 'dom-attr editable';
-        attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
-        attrSpan.onclick = (e) => {
-          e.stopPropagation();
-          startInlineEdit(attrSpan, attr.value, (newValue) => {
-            node.setAttribute(attr.name, newValue);
-            refreshElementsPanel();
-          });
-        };
-        element.appendChild(attrSpan);
-      });
-
-      element.appendChild(document.createTextNode('>'));
-
-      // 子要素
-      if (node.childNodes.length > 0) {
-        node.childNodes.forEach(child => {
-          buildDOMTree(child, element, depth + 1);
-        });
-      }
-
-      // 閉じタグ
-      if (node.childNodes.length > 0 || node.tagName.toLowerCase() !== 'br') {
-        const closeTag = document.createElement('div');
-        closeTag.style.marginLeft = `${depth * 15}px`;
-        closeTag.innerHTML = `<span class="dom-tag">&lt;/${node.tagName.toLowerCase()}&gt;</span>`;
-        element.appendChild(closeTag);
-      }
-
-      parentElement.appendChild(element);
-    } else if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
-      const text = document.createElement('div');
-      text.style.marginLeft = `${depth * 15}px`;
-      text.className = 'dom-text editable';
-      text.textContent = `"${node.textContent.trim()}"`;
-      text.onclick = (e) => {
-        e.stopPropagation();
-        startInlineEdit(text, node.textContent.trim(), (newValue) => {
-          node.textContent = newValue;
-          refreshElementsPanel();
-        });
-      };
-      parentElement.appendChild(text);
-    }
-  }
-
-  // Elementsパネルの作成
-// Elementsパネルの作成
-function createElementsPanel() {
+  // Elementsパネル作成
+  function createElementsPanel() {
     const panel = document.createElement('div');
     panel.className = 'devtools-panel';
     panel.id = 'elements-panel';
@@ -738,14 +604,13 @@ function createElementsPanel() {
     container.appendChild(cssPanel);
     panel.appendChild(container);
 
-    // CSSパネルを更新する関数を外部からもアクセス可能にする
+    // CSSパネル更新関数
     function updateCSSPanel(element) {
       const cssPanel = document.getElementById('css-panel');
       cssPanel.innerHTML = '';
       
       if (!element) return;
       
-      // インラインスタイル
       if (element.style.length > 0) {
         const inlineRule = document.createElement('div');
         inlineRule.className = 'css-rule';
@@ -790,7 +655,6 @@ function createElementsPanel() {
         cssPanel.appendChild(inlineRule);
       }
       
-      // 計算されたスタイル
       const computedStyles = window.getComputedStyle(element);
       const computedRule = document.createElement('div');
       computedRule.className = 'css-rule';
@@ -800,7 +664,6 @@ function createElementsPanel() {
       computedSelector.textContent = '計算されたスタイル';
       computedRule.appendChild(computedSelector);
       
-      // 重要なプロパティのみ表示
       const importantProps = [
         'display', 'position', 'width', 'height', 'margin', 'padding', 
         'color', 'background', 'border', 'font', 'flex', 'grid'
@@ -828,7 +691,7 @@ function createElementsPanel() {
       cssPanel.appendChild(computedRule);
     }
 
-    // DOMツリーを構築する関数
+    // DOMツリー構築
     function buildDOMTree(node, parentElement, depth = 0) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = document.createElement('div');
@@ -836,7 +699,6 @@ function createElementsPanel() {
         element.style.marginLeft = `${depth * 15}px`;
         element.dataset.elementId = node.id || Math.random().toString(36).substr(2, 9);
 
-        // 右クリックイベント
         element.oncontextmenu = (e) => {
           e.preventDefault();
           selectedElement = node;
@@ -849,10 +711,9 @@ function createElementsPanel() {
           contextMenu.style.left = `${e.pageX}px`;
           contextMenu.style.top = `${e.pageY}px`;
           
-          updateCSSPanel(node); // ここでupdateCSSPanelを呼び出し
+          updateCSSPanel(node);
         };
 
-        // クリックで選択
         element.onclick = (e) => {
           e.stopPropagation();
           selectedElement = node;
@@ -861,10 +722,9 @@ function createElementsPanel() {
           document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
           element.classList.add('selected');
           
-          updateCSSPanel(node); // ここでupdateCSSPanelを呼び出し
+          updateCSSPanel(node);
         };
 
-        // タグ名
         const tag = document.createElement('span');
         tag.className = 'dom-tag editable';
         tag.textContent = `<${node.tagName.toLowerCase()}`;
@@ -883,7 +743,6 @@ function createElementsPanel() {
         };
         element.appendChild(tag);
 
-        // 属性
         Array.from(node.attributes).forEach(attr => {
           const attrSpan = document.createElement('span');
           attrSpan.className = 'dom-attr editable';
@@ -900,14 +759,12 @@ function createElementsPanel() {
 
         element.appendChild(document.createTextNode('>'));
 
-        // 子要素
         if (node.childNodes.length > 0) {
           node.childNodes.forEach(child => {
             buildDOMTree(child, element, depth + 1);
           });
         }
 
-        // 閉じタグ
         if (node.childNodes.length > 0 || node.tagName.toLowerCase() !== 'br') {
           const closeTag = document.createElement('div');
           closeTag.style.marginLeft = `${depth * 15}px`;
@@ -932,7 +789,7 @@ function createElementsPanel() {
       }
     }
 
-    // CSSプロパティを編集
+    // CSSプロパティ編集
     function editCSSProperty(element, propName, styleType) {
       let currentValue = '';
       
@@ -952,279 +809,52 @@ function createElementsPanel() {
       }
     }
 
-    // 初期DOMツリー構築
-    setTimeout(() => {
-        refreshElementsPanel();
-    }, 0);
-
-    return panel;
-}
-
-  function refreshElementsPanel() {
-    let tree = document.getElementById('dom-tree');
-    
-    if (!tree) {
-      const panel = document.getElementById('elements-panel');
-      if (panel) {
-        const container = panel.querySelector('.elements-container');
-        if (container) {
-          tree = document.createElement('div');
-          tree.className = 'dom-tree';
-          tree.id = 'dom-tree';
-          container.insertBefore(tree, container.querySelector('.css-panel'));
-        }
-      }
-    }
-    
-    if (!tree) return;
-    
-    tree.innerHTML = '';
-    buildDOMTree(document.documentElement, tree);
-    
-    if (selectedElement) {
-      const elementId = selectedElement.id || Array.from(selectedElement.attributes)
-        .find(attr => attr.name.startsWith('data-element-id'))?.value;
+    // 要素パネル更新
+    function refreshElementsPanel() {
+      let tree = document.getElementById('dom-tree');
       
-      if (elementId) {
-        const node = document.querySelector(`[data-element-id="${elementId}"]`);
-        if (node) {
-          node.classList.add('selected');
-          updateCSSPanel(selectedElement);
+      if (!tree) {
+        const panel = document.getElementById('elements-panel');
+        if (panel) {
+          const container = panel.querySelector('.elements-container');
+          if (container) {
+            tree = document.createElement('div');
+            tree.className = 'dom-tree';
+            tree.id = 'dom-tree';
+            container.insertBefore(tree, container.querySelector('.css-panel'));
+          }
         }
       }
-    }
-  }
-
-  // Storageパネルの作成
-  function createStoragePanel() {
-    const panel = document.createElement('div');
-    panel.className = 'devtools-panel';
-    panel.id = 'storage-panel';
-
-    // LocalStorage表示
-    const localStorageTitle = document.createElement('h3');
-    localStorageTitle.textContent = 'Local Storage';
-    panel.appendChild(localStorageTitle);
-
-    const localStorageTable = document.createElement('table');
-    localStorageTable.className = 'storage-table';
-    panel.appendChild(localStorageTable);
-
-    const addLocalStorageBtn = document.createElement('button');
-    addLocalStorageBtn.className = 'add-btn';
-    addLocalStorageBtn.textContent = '+ Local Storageに追加';
-    addLocalStorageBtn.onclick = () => {
-      const key = prompt('キー名を入力');
-      if (key) {
-        const value = prompt('値を入力');
-        localStorage.setItem(key, value);
-        renderStorage();
-      }
-    };
-    panel.appendChild(addLocalStorageBtn);
-
-    // SessionStorage表示
-    const sessionStorageTitle = document.createElement('h3');
-    sessionStorageTitle.style.marginTop = '20px';
-    sessionStorageTitle.textContent = 'Session Storage';
-    panel.appendChild(sessionStorageTitle);
-
-    const sessionStorageTable = document.createElement('table');
-    sessionStorageTable.className = 'storage-table';
-    panel.appendChild(sessionStorageTable);
-
-    const addSessionStorageBtn = document.createElement('button');
-    addSessionStorageBtn.className = 'add-btn';
-    addSessionStorageBtn.textContent = '+ Session Storageに追加';
-    addSessionStorageBtn.onclick = () => {
-      const key = prompt('キー名を入力');
-      if (key) {
-        const value = prompt('値を入力');
-        sessionStorage.setItem(key, value);
-        renderStorage();
-      }
-    };
-    panel.appendChild(addSessionStorageBtn);
-
-    // Cookie表示
-    const cookiesTitle = document.createElement('h3');
-    cookiesTitle.style.marginTop = '20px';
-    cookiesTitle.textContent = 'Cookies';
-    panel.appendChild(cookiesTitle);
-
-    const cookiesTable = document.createElement('table');
-    cookiesTable.className = 'storage-table';
-    panel.appendChild(cookiesTable);
-
-    const addCookieBtn = document.createElement('button');
-    addCookieBtn.className = 'add-btn';
-    addCookieBtn.textContent = '+ Cookieに追加';
-    addCookieBtn.onclick = () => {
-      const name = prompt('Cookie名を入力');
-      if (name) {
-        const value = prompt('値を入力');
-        document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/`;
-        renderStorage();
-      }
-    };
-    panel.appendChild(addCookieBtn);
-
-    // ストレージを表示する関数
-    function renderStorage() {
-      renderTable(localStorageTable, localStorage, 'local');
-      renderTable(sessionStorageTable, sessionStorage, 'session');
-      renderCookiesTable(cookiesTable);
-    }
-
-    function renderTable(tableElement, storage, type) {
-      tableElement.innerHTML = `
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Value</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      `;
-
-      const tbody = tableElement.querySelector('tbody');
       
-      for (let i = 0; i < storage.length; i++) {
-        const key = storage.key(i);
-        const value = storage.getItem(key);
-        
-        const row = document.createElement('tr');
-        
-        const keyCell = document.createElement('td');
-        const keySpan = document.createElement('span');
-        keySpan.className = 'editable';
-        keySpan.textContent = key;
-        keySpan.onclick = () => {
-          const newKey = prompt('新しいキー名を入力', key);
-          if (newKey && newKey !== key) {
-            storage.setItem(newKey, value);
-            storage.removeItem(key);
-            renderStorage();
-          }
-        };
-        keyCell.appendChild(keySpan);
-        
-        const valueCell = document.createElement('td');
-        const valueSpan = document.createElement('span');
-        valueSpan.className = 'editable';
-        valueSpan.textContent = value;
-        valueSpan.onclick = () => {
-          const newValue = prompt('新しい値を入力', value);
-          if (newValue !== null) {
-            storage.setItem(key, newValue);
-            renderStorage();
-          }
-        };
-        valueCell.appendChild(valueSpan);
-        
-        const actionsCell = document.createElement('td');
-        actionsCell.className = 'storage-actions';
-        
-        const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'storage-btn';
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.onclick = () => {
-          storage.removeItem(key);
-          renderStorage();
-        };
-        
-        actionsCell.appendChild(deleteBtn);
-        
-        row.appendChild(keyCell);
-        row.appendChild(valueCell);
-        row.appendChild(actionsCell);
-        
-        tbody.appendChild(row);
-      }
-    }
-
-    function renderCookiesTable(tableElement) {
-      tableElement.innerHTML = `
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Value</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      `;
-
-      const tbody = tableElement.querySelector('tbody');
+      if (!tree) return;
       
-      document.cookie.split(';').forEach(cookie => {
-        if (!cookie.trim()) return;
-        
-        const [name, ...valueParts] = cookie.split('=');
-        const decodedName = decodeURIComponent(name.trim());
-        const value = valueParts.join('=').trim();
-        
-        const row = document.createElement('tr');
+      tree.innerHTML = '';
+      buildDOMTree(document.documentElement, tree);
+      
+      if (selectedElement) {
+        const elementId = selectedElement.id || Array.from(selectedElement.attributes)
+          .find(attr => attr.name.startsWith('data-element-id'))?.value;
         
-        const nameCell = document.createElement('td');
-        const nameSpan = document.createElement('span');
-        nameSpan.className = 'editable';
-        nameSpan.textContent = decodedName;
-        nameSpan.onclick = () => {
-          const newName = prompt('新しい名前を入力', decodedName);
-          if (newName && newName !== decodedName) {
-            const newValue = prompt('新しい値を入力', decodeURIComponent(value));
-            if (newValue !== null) {
-              document.cookie = `${encodeURIComponent(newName)}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
-              document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
-              renderStorage();
-            }
+        if (elementId) {
+          const node = document.querySelector(`[data-element-id="${elementId}"]`);
+          if (node) {
+            node.classList.add('selected');
+            updateCSSPanel(selectedElement);
           }
-        };
-        nameCell.appendChild(nameSpan);
-        
-        const valueCell = document.createElement('td');
-        const valueSpan = document.createElement('span');
-        valueSpan.className = 'editable';
-        valueSpan.textContent = decodeURIComponent(value);
-        valueSpan.onclick = () => {
-          const newValue = prompt('新しい値を入力', decodeURIComponent(value));
-          if (newValue !== null) {
-            document.cookie = `${name.trim()}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
-            renderStorage();
-          }
-        };
-        valueCell.appendChild(valueSpan);
-        
-        const actionsCell = document.createElement('td');
-        actionsCell.className = 'storage-actions';
-        
-        const deleteBtn = document.createElement('button');
-        deleteBtn.className = 'storage-btn';
-        deleteBtn.textContent = 'Delete';
-        deleteBtn.onclick = () => {
-          document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
-          renderStorage();
-        };
-        
-        actionsCell.appendChild(deleteBtn);
-        
-        row.appendChild(nameCell);
-        row.appendChild(valueCell);
-        row.appendChild(actionsCell);
-        
-        tbody.appendChild(row);
-      });
+        }
+      }
     }
 
-    // 初期表示
-    renderStorage();
+    setTimeout(() => {
+      refreshElementsPanel();
+    }, 0);
 
     return panel;
   }
 
-  // 開発者ツールの表示/非表示切り替え
+  // Storageパネル作成 (前回と同じなので省略)
+
+  // 開発者ツール表示/非表示
   function toggleDevTools() {
     const container = document.getElementById('devtools-container');
     if (container.style.display === 'none') {
@@ -1234,7 +864,7 @@ function createElementsPanel() {
     }
   }
 
-  // 開発者ツールを開くボタンの作成
+  // 開くボタン作成
   function createOpenButton() {
     const button = document.createElement('button');
     button.id = 'open-devtools-btn';