Update dev-tools.js

dev-tools.js

@@ -231,6 +231,7 @@
   let selectedElement = null;
   let selectedDOMNode = null;
 
+  // 開発者ツールのUI構築
   // 開発者ツールのUI構築
   function createDevTools() {
     const container = document.createElement('div');
@@ -454,7 +455,81 @@
 
     return panel;
   }
+  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';
+      tag.textContent = `<${node.tagName.toLowerCase()}`;
+      element.appendChild(tag);
+
+      // 属性
+      Array.from(node.attributes).forEach(attr => {
+        const attrSpan = document.createElement('span');
+        attrSpan.className = 'dom-attr';
+        attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
+        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.style.color = '#e0e0e0';
+      text.textContent = `"${node.textContent.trim()}"`;
+      parentElement.appendChild(text);
+    }
+  }
   // Elementsパネルの作成
   function createElementsPanel() {
     const panel = document.createElement('div');
@@ -476,86 +551,6 @@
     container.appendChild(cssPanel);
     panel.appendChild(container);
 
-    // 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`;
-          
-          // CSSパネルを更新
-          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';
-        tag.textContent = `<${node.tagName.toLowerCase()}`;
-        element.appendChild(tag);
-
-        // 属性
-        Array.from(node.attributes).forEach(attr => {
-          const attrSpan = document.createElement('span');
-          attrSpan.className = 'dom-attr';
-          attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
-          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.style.color = '#e0e0e0';
-        text.textContent = `"${node.textContent.trim()}"`;
-        parentElement.appendChild(text);
-      }
-    }
-
     // CSSパネルを更新
     function updateCSSPanel(element) {
       const cssPanel = document.getElementById('css-panel');
@@ -674,44 +669,40 @@
     return panel;
   }
 
-// refreshElementsPanel関数を以下のように修正
-function refreshElementsPanel() {
+  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'));
-            }
+      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;
-        
-        if (elementId) {
-            const node = document.querySelector(`[data-element-id="${elementId}"]`);
-            if (node) {
-                node.classList.add('selected');
-                updateCSSPanel(selectedElement);
-            }
+      const elementId = selectedElement.id || Array.from(selectedElement.attributes)
+        .find(attr => attr.name.startsWith('data-element-id'))?.value;
+      
+      if (elementId) {
+        const node = document.querySelector(`[data-element-id="${elementId}"]`);
+        if (node) {
+          node.classList.add('selected');
+          updateCSSPanel(selectedElement);
         }
+      }
     }
-}
-
+  }
   // Storageパネルの作成
   function createStoragePanel() {
     const panel = document.createElement('div');