Update dev-tools.js

dev-tools.js

@@ -717,7 +717,8 @@
   }
 
   // Elementsパネルの作成
-  function createElementsPanel() {
+// Elementsパネルの作成
+function createElementsPanel() {
     const panel = document.createElement('div');
     panel.className = 'devtools-panel';
     panel.id = 'elements-panel';
@@ -737,7 +738,7 @@
     container.appendChild(cssPanel);
     panel.appendChild(container);
 
-    // CSSパネルを更新
+    // CSSパネルを更新する関数を外部からもアクセス可能にする
     function updateCSSPanel(element) {
       const cssPanel = document.getElementById('css-panel');
       cssPanel.innerHTML = '';
@@ -827,6 +828,110 @@
       cssPanel.appendChild(computedRule);
     }
 
+    // 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); // ここでupdateCSSPanelを呼び出し
+        };
+
+        // クリックで選択
+        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); // ここでupdateCSSPanelを呼び出し
+        };
+
+        // タグ名
+        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);
+      }
+    }
+
     // CSSプロパティを編集
     function editCSSProperty(element, propName, styleType) {
       let currentValue = '';
@@ -853,7 +958,7 @@
     }, 0);
 
     return panel;
-  }
+}
 
   function refreshElementsPanel() {
     let tree = document.getElementById('dom-tree');