Update dev-tools.js

dev-tools.js

@@ -1731,294 +1731,6 @@ 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() {