Update dev-tools.js

dev-tools.js

@@ -1696,7 +1696,27 @@ loadWebVitals().then(() => {
 
     return panel;
   }
-// この関数を createElementsPanel() の外に移動し、最初に定義する
+ // 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);
+    // この関数を createElementsPanel() の外に移動し、最初に定義する
 function refreshElementsPanel() {
   let tree = document.getElementById('dom-tree');
   
@@ -1731,115 +1751,8 @@ 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ツリー構築
+        // DOMツリー構築
     function buildDOMTree(node, parentElement, depth = 0, isRoot = false) {
       if (node.nodeType === Node.ELEMENT_NODE) {
         const element = document.createElement('div');
@@ -1984,6 +1897,92 @@ function refreshElementsPanel() {
         parentElement.appendChild(text);
       }
     }
+    // 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);
+    }
 
     // CSSプロパティ編集
     function editCSSProperty(element, propName, styleType) {