Update dev-tools.js

dev-tools.js

@@ -618,11 +618,20 @@
     if (!selectedElement) return;
 
     switch (action) {
-      case 'edit-html':
-        startInlineEdit(selectedDOMNode, selectedElement.outerHTML, (newValue) => {
-          selectedElement.outerHTML = newValue;
-          refreshElementsPanel();
-        });
+        case 'edit-html':
+            // document.documentElement（html要素）は編集不可
+            if (selectedElement === document.documentElement) {
+                alert('ルートHTML要素は直接編集できません');
+                return;
+            }
+            startInlineEdit(selectedDOMNode, selectedElement.outerHTML, (newValue) => {
+                try {
+                    selectedElement.outerHTML = newValue;
+                    refreshElementsPanel();
+                } catch (e) {
+                    alert('この要素は編集できません: ' + e.message);
+                }
+            });
         break;
       case 'add-attribute':
         const attrName = prompt('属性名を入力');
@@ -676,7 +685,7 @@
   }
 
   // インライン編集関数
-  function startInlineEdit(element, initialValue, callback) {
+function startInlineEdit(element, initialValue, callback) {
     if (activeEditElement) return;
     
     const originalValue = element.textContent;
@@ -695,46 +704,51 @@
     input.select();
     
     activeEditElement = {
-      element: element,
-      input: input,
-      callback: callback
+        element: element,
+        input: input,
+        callback: callback
     };
     
     const clickOutsideHandler = (e) => {
-      if (!input.contains(e.target)) {
-        finishInlineEdit();
-      }
+        if (!input.contains(e.target)) {
+            finishInlineEdit();
+        }
     };
     
     input.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') {
-        finishInlineEdit();
-      } else if (e.key === 'Escape') {
-        cancelInlineEdit();
-      }
+        if (e.key === 'Enter') {
+            finishInlineEdit();
+        } else if (e.key === 'Escape') {
+            cancelInlineEdit();
+        }
     });
     
     setTimeout(() => {
-      document.addEventListener('click', clickOutsideHandler);
+        document.addEventListener('click', clickOutsideHandler);
     }, 0);
     
     function finishInlineEdit() {
-      if (input.value !== originalValue && callback) {
-        callback(input.value);
-      }
-      cleanup();
+        try {
+            if (input.value !== originalValue && callback) {
+                callback(input.value);
+            }
+        } catch (e) {
+            alert('編集に失敗しました: ' + e.message);
+        } finally {
+            cleanup();
+        }
     }
     
     function cancelInlineEdit() {
-      cleanup();
+        cleanup();
     }
     
     function cleanup() {
-      document.removeEventListener('click', clickOutsideHandler);
-      input.remove();
-      activeEditElement = null;
+        document.removeEventListener('click', clickOutsideHandler);
+        input.remove();
+        activeEditElement = null;
     }
-  }
+}
 
   // Consoleパネル作成
   function createConsolePanel() {
@@ -918,69 +932,74 @@
     }
 
     // DOMツリー構築
-    function buildDOMTree(node, parentElement, depth = 0) {
-      if (node.nodeType === Node.ELEMENT_NODE) {
+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);
+            e.preventDefault();
+            selectedElement = node;
+            selectedDOMNode = element;
+            
+            document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
+            element.classList.add('selected');
+            
+            // HTML要素にはコンテキストメニューを表示しない
+            if (node !== document.documentElement) {
+                contextMenu.style.display = 'block';
+                contextMenu.style.left = `${e.pageX}px`;
+                contextMenu.style.top = `${e.pageY}px`;
+            }
+            
+            updateCSSPanel(node);
         };
 
+        // タグ名（HTML要素は編集不可）
         const tag = document.createElement('span');
-        tag.className = 'dom-tag editable';
+        tag.className = 'dom-tag';
         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();
-          });
-        };
+        
+        if (node !== document.documentElement) {
+            tag.classList.add('editable');
+            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);
 
+        // 属性（HTML要素は編集不可）
         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);
+            const attrSpan = document.createElement('span');
+            attrSpan.className = 'dom-attr';
+            attrSpan.textContent = ` ${attr.name}="${attr.value}"`;
+            
+            if (node !== document.documentElement) {
+                attrSpan.classList.add('editable');
+                attrSpan.onclick = (e) => {
+                    e.stopPropagation();
+                    startInlineEdit(attrSpan, attr.value, (newValue) => {
+                        node.setAttribute(attr.name, newValue);
+                        refreshElementsPanel();
+                    });
+                };
+            }
+            
+            element.appendChild(attrSpan);
         });
 
         element.appendChild(document.createTextNode('>'));