Update dev-tools.js

dev-tools.js

@@ -1731,7 +1731,294 @@ function refreshElementsPanel() {
     }
   }
 }
+ // Elementsパネル作成
+  function createElementsPanel() {
+    const panel = document.createElement('div');
+    panel.className = 'devtools-panel';
+    panel.id = 'elements-panel';
+
+    const container = document.createElement('div');
+    container.className = 'elements-container';
+
+    const tree = document.createElement('div');
+    tree.className = 'dom-tree';
+    tree.id = 'dom-tree';
+
+    const cssPanel = document.createElement('div');
+    cssPanel.className = 'css-panel';
+    cssPanel.id = 'css-panel';
+
+    container.appendChild(tree);
+    container.appendChild(cssPanel);
+    panel.appendChild(container);
+
+    // 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';
+        
+        const selector = document.createElement('div');
+        selector.className = 'css-selector';
+        selector.textContent = 'インラインスタイル';
+        inlineRule.appendChild(selector);
+        
+        for (let i = 0; i < element.style.length; i++) {
+          const propName = element.style[i];
+          const propValue = element.style[propName];
+          
+          const propDiv = document.createElement('div');
+          propDiv.className = 'css-property';
+          
+          const nameSpan = document.createElement('span');
+          nameSpan.className = 'css-property-name editable';
+          nameSpan.textContent = propName;
+          nameSpan.onclick = () => editCSSProperty(element, propName, 'style');
+          
+          const valueSpan = document.createElement('span');
+          valueSpan.className = 'css-property-value editable';
+          valueSpan.textContent = propValue;
+          valueSpan.onclick = () => editCSSProperty(element, propName, 'style');
+          
+          const toggleSpan = document.createElement('span');
+          toggleSpan.className = 'css-toggle';
+          toggleSpan.textContent = '×';
+          toggleSpan.title = 'プロパティを無効化';
+          toggleSpan.onclick = () => {
+            element.style[propName] = '';
+            updateCSSPanel(element);
+          };
+          
+          propDiv.appendChild(nameSpan);
+          propDiv.appendChild(valueSpan);
+          propDiv.appendChild(toggleSpan);
+          inlineRule.appendChild(propDiv);
+        }
+        
+        cssPanel.appendChild(inlineRule);
+      }
+      
+      const computedStyles = window.getComputedStyle(element);
+      const computedRule = document.createElement('div');
+      computedRule.className = 'css-rule';
+      
+      const computedSelector = document.createElement('div');
+      computedSelector.className = 'css-selector';
+      computedSelector.textContent = '計算されたスタイル';
+      computedRule.appendChild(computedSelector);
+      
+      const importantProps = [
+        'display', 'position', 'width', 'height', 'margin', 'padding', 
+        'color', 'background', 'border', 'font', 'flex', 'grid'
+      ];
+      
+      importantProps.forEach(prop => {
+        const value = computedStyles[prop];
+        
+        const propDiv = document.createElement('div');
+        propDiv.className = 'css-property';
+        
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'css-property-name';
+        nameSpan.textContent = prop;
+        
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'css-property-value';
+        valueSpan.textContent = value;
+        
+        propDiv.appendChild(nameSpan);
+        propDiv.appendChild(valueSpan);
+        computedRule.appendChild(propDiv);
+      });
+      
+      cssPanel.appendChild(computedRule);
+    }
+
+    // DOMツリー構築
+    function buildDOMTree(node, parentElement, depth = 0, isRoot = false) {
+      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');
+          
+          // HTML要素にはコンテキストメニューを表示しない
+          if (node !== document.documentElement) {
+            contextMenu.style.display = 'block';
+            contextMenu.style.left = `${e.pageX}px`;
+            contextMenu.style.top = `${e.pageY}px`;
+          }
+          
+          updateCSSPanel(node);
+        };
+
+        // 左クリックで選択
+        element.onclick = (e) => {
+          if (e.target.classList.contains('dom-toggle')) return;
+          
+          e.stopPropagation();
+          selectedElement = node;
+          selectedDOMNode = element;
+          
+          document.querySelectorAll('.dom-node').forEach(el => el.classList.remove('selected'));
+          element.classList.add('selected');
+          
+          updateCSSPanel(node);
+        };
+
+        // 子要素がある場合はトグルボタンを追加
+        const hasChildren = node.childNodes.length > 0 && 
+                          !(node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE && !node.childNodes[0].textContent.trim());
+        
+        if (hasChildren) {
+          const toggle = document.createElement('div');
+          toggle.className = 'dom-toggle';
+          toggle.onclick = (e) => {
+            e.stopPropagation();
+            const children = element.querySelector('.dom-children');
+            if (children) {
+              if (children.style.maxHeight === '0px') {
+                children.style.maxHeight = children.scrollHeight + 'px';
+                toggle.classList.remove('collapsed');
+              } else {
+                children.style.maxHeight = '0px';
+                toggle.classList.add('collapsed');
+              }
+            }
+          };
+          element.appendChild(toggle);
+        }
+
+        // タグ名（HTML要素は編集不可）
+        const tag = document.createElement('span');
+        tag.className = 'dom-tag';
+        tag.textContent = `<${node.tagName.toLowerCase()}`;
+        
+        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';
+          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('>'));
+
+        if (hasChildren) {
+          const childrenContainer = document.createElement('div');
+          childrenContainer.className = 'dom-children';
+          childrenContainer.style.maxHeight = isRoot ? 'none' : '0px';
+          
+          node.childNodes.forEach(child => {
+            buildDOMTree(child, childrenContainer, depth + 1);
+          });
+
+          if (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>`;
+            childrenContainer.appendChild(closeTag);
+          }
+          
+          element.appendChild(childrenContainer);
+        }
+
+        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 = '';
+      
+      if (styleType === 'style') {
+        currentValue = element.style[propName];
+      }
+      
+      const newValue = prompt(`${propName} の新しい値を入力`, currentValue);
+      
+      if (newValue !== null) {
+        if (styleType === 'style') {
+          element.style[propName] = newValue;
+        }
+        
+        updateCSSPanel(element);
+        refreshElementsPanel();
+      }
+    }
+
+    // DOM変更を監視
+    observer.observe(document.documentElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      characterData: true
+    });
+
+    setTimeout(() => {
+      refreshElementsPanel();
+    }, 0);
+
+    return panel;
+  }
   // 開発者ツール表示/非表示
   function toggleDevTools() {
     const container = document.getElementById('devtools-container');