Update dev-tools.js

dev-tools.js

@@ -140,6 +140,15 @@
   color: #333;
 }
 
+.dom-edit-input {
+  background: #fff;
+  border: 1px solid #4fc3f7;
+  padding: 0 2px;
+  margin: -1px 0;
+  font-family: monospace;
+  min-width: 50px;
+}
+
 .css-panel {
   flex: 1;
   overflow: auto;
@@ -278,6 +287,7 @@
   let contextMenu = null;
   let selectedElement = null;
   let selectedDOMNode = null;
+  let activeEditElement = null;
 
   // 開発者ツールのUI構築
   function createDevTools() {
@@ -385,11 +395,10 @@
 
     switch (action) {
       case 'edit-html':
-        const html = prompt('HTMLを編集', selectedElement.outerHTML);
-        if (html) {
-          selectedElement.outerHTML = html;
+        startInlineEdit(selectedDOMNode, selectedElement.outerHTML, (newValue) => {
+          selectedElement.outerHTML = newValue;
           refreshElementsPanel();
-        }
+        });
         break;
       
       case 'add-attribute':
@@ -402,9 +411,8 @@
         break;
       
       case 'edit-element':
-        const tagName = prompt('タグ名を編集', selectedElement.tagName.toLowerCase());
-        if (tagName) {
-          const newElement = document.createElement(tagName);
+        startInlineEdit(selectedDOMNode.querySelector('.dom-tag'), selectedElement.tagName.toLowerCase(), (newValue) => {
+          const newElement = document.createElement(newValue);
           Array.from(selectedElement.attributes).forEach(attr => {
             newElement.setAttribute(attr.name, attr.value);
           });
@@ -412,7 +420,7 @@
           selectedElement.parentNode.replaceChild(newElement, selectedElement);
           selectedElement = newElement;
           refreshElementsPanel();
-        }
+        });
         break;
       
       case 'duplicate':
@@ -452,6 +460,69 @@
     }
   }
 
+  // インライン編集を開始する関数
+  function startInlineEdit(element, initialValue, callback) {
+    if (activeEditElement) return;
+    
+    const originalValue = element.textContent;
+    const rect = element.getBoundingClientRect();
+    
+    const input = document.createElement('input');
+    input.className = 'dom-edit-input';
+    input.value = initialValue || originalValue;
+    input.style.position = 'absolute';
+    input.style.left = `${rect.left}px`;
+    input.style.top = `${rect.top}px`;
+    input.style.width = `${rect.width + 20}px`;
+    
+    document.body.appendChild(input);
+    input.focus();
+    input.select();
+    
+    activeEditElement = {
+      element: element,
+      input: input,
+      callback: callback
+    };
+    
+    // 入力フィールド外をクリックしたら編集を終了
+    const clickOutsideHandler = (e) => {
+      if (!input.contains(e.target)) {
+        finishInlineEdit();
+      }
+    };
+    
+    // Enterキーで編集を終了
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') {
+        finishInlineEdit();
+      } else if (e.key === 'Escape') {
+        cancelInlineEdit();
+      }
+    });
+    
+    setTimeout(() => {
+      document.addEventListener('click', clickOutsideHandler);
+    }, 0);
+    
+    function finishInlineEdit() {
+      if (input.value !== originalValue && callback) {
+        callback(input.value);
+      }
+      cleanup();
+    }
+    
+    function cancelInlineEdit() {
+      cleanup();
+    }
+    
+    function cleanup() {
+      document.removeEventListener('click', clickOutsideHandler);
+      input.remove();
+      activeEditElement = null;
+    }
+  }
+
   // Consoleパネルの作成
   function createConsolePanel() {
     const panel = document.createElement('div');
@@ -579,8 +650,21 @@
 
       // タグ名
       const tag = document.createElement('span');
-      tag.className = 'dom-tag';
+      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);
 
       // 属性
@@ -590,11 +674,10 @@
         attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
         attrSpan.onclick = (e) => {
           e.stopPropagation();
-          const newValue = prompt(`属性 ${attr.name} の値を編集`, attr.value);
-          if (newValue !== null) {
+          startInlineEdit(attrSpan, attr.value, (newValue) => {
             node.setAttribute(attr.name, newValue);
             refreshElementsPanel();
-          }
+          });
         };
         element.appendChild(attrSpan);
       });
@@ -620,15 +703,14 @@
     } 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';
+      text.className = 'dom-text editable';
       text.textContent = `"${node.textContent.trim()}"`;
       text.onclick = (e) => {
         e.stopPropagation();
-        const newText = prompt('テキストを編集', node.textContent.trim());
-        if (newText !== null) {
-          node.textContent = newText;
+        startInlineEdit(text, node.textContent.trim(), (newValue) => {
+          node.textContent = newValue;
           refreshElementsPanel();
-        }
+        });
       };
       parentElement.appendChild(text);
     }