Update dev-tools.js

dev-tools.js

@@ -66,7 +66,7 @@
     }
     
     .devtools-panel.active {
-      display: block;
+      display: flex;
     }
     
     /* Console スタイル */
@@ -74,6 +74,7 @@
       white-space: pre-wrap;
       margin: 0;
       line-height: 1.4;
+      flex: 1;
     }
     
     .console-input {
@@ -86,12 +87,27 @@
     }
     
     /* Elements スタイル */
+    .elements-container {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+    }
+    
     .dom-tree {
       font-family: monospace;
+      flex: 1;
+      overflow: auto;
+      border-right: 1px solid #4fc3f7;
+      padding-right: 10px;
     }
     
     .dom-node {
       margin-left: 15px;
+      position: relative;
+    }
+    
+    .dom-node.selected {
+      background: rgba(79, 195, 247, 0.2);
     }
     
     .dom-tag {
@@ -102,6 +118,65 @@
       color: #ff7043;
     }
     
+    .css-panel {
+      flex: 1;
+      overflow: auto;
+      padding-left: 10px;
+    }
+    
+    .css-rule {
+      margin-bottom: 15px;
+      border: 1px solid #4fc3f7;
+      padding: 8px;
+    }
+    
+    .css-selector {
+      color: #4fc3f7;
+      margin-bottom: 5px;
+    }
+    
+    .css-property {
+      display: flex;
+      margin-bottom: 3px;
+    }
+    
+    .css-property-name {
+      color: #69f0ae;
+      min-width: 120px;
+    }
+    
+    .css-property-value {
+      color: #e0e0e0;
+      flex: 1;
+    }
+    
+    .css-toggle {
+      margin-left: 10px;
+      color: #ff7043;
+      cursor: pointer;
+    }
+    
+    /* Context Menu */
+    .context-menu {
+      position: absolute;
+      background: #252a33;
+      border: 1px solid #4fc3f7;
+      z-index: 10000;
+      min-width: 200px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+      display: none;
+    }
+    
+    .context-menu-item {
+      padding: 8px 15px;
+      cursor: pointer;
+    }
+    
+    .context-menu-item:hover {
+      background: #4fc3f7;
+      color: #000;
+    }
+    
     /* Storage スタイル */
     .storage-table {
       width: 100%;
@@ -129,9 +204,33 @@
       padding: 2px 5px;
       cursor: pointer;
     }
+    
+    .editable {
+      cursor: pointer;
+      padding: 2px 5px;
+      border: 1px dashed transparent;
+    }
+    
+    .editable:hover {
+      border-color: #4fc3f7;
+    }
+    
+    .add-btn {
+      background: #69f0ae;
+      color: #000;
+      border: none;
+      padding: 5px 10px;
+      margin-top: 10px;
+      cursor: pointer;
+    }
   `;
   document.head.appendChild(style);
 
+  // コンテキストメニュー用の変数
+  let contextMenu = null;
+  let selectedElement = null;
+  let selectedDOMNode = null;
+
   // 開発者ツールのUI構築
   function createDevTools() {
     const container = document.createElement('div');
@@ -179,6 +278,9 @@
 
     document.body.appendChild(container);
 
+    // コンテキストメニュー作成
+    createContextMenu();
+
     // タブ切り替え機能
     function createTab(name, panelId) {
       const tab = document.createElement('div');
@@ -194,7 +296,112 @@
     }
 
     // 初期タブをアクティブに
-    consoleTab.click();
+    elementsTab.click();
+  }
+
+  // コンテキストメニュー作成
+  function createContextMenu() {
+    contextMenu = document.createElement('div');
+    contextMenu.className = 'context-menu';
+    contextMenu.innerHTML = `
+      <div class="context-menu-item" data-action="edit-html">HTMLとして編集</div>
+      <div class="context-menu-item" data-action="add-attribute">属性を追加</div>
+      <div class="context-menu-item" data-action="edit-element">要素を編集</div>
+      <div class="context-menu-item" data-action="duplicate">要素を複製</div>
+      <div class="context-menu-item" data-action="remove">要素を削除</div>
+      <div class="context-menu-item" data-action="toggle-visibility">要素を非表示</div>
+      <div class="context-menu-item" data-action="force-state">状態を強制</div>
+    `;
+    document.body.appendChild(contextMenu);
+
+    // メニューアイテムのクリック処理
+    contextMenu.querySelectorAll('.context-menu-item').forEach(item => {
+      item.addEventListener('click', (e) => {
+        const action = e.target.getAttribute('data-action');
+        handleContextMenuAction(action);
+        contextMenu.style.display = 'none';
+      });
+    });
+
+    // メニュー外をクリックで閉じる
+    document.addEventListener('click', (e) => {
+      if (e.target !== contextMenu && !contextMenu.contains(e.target)) {
+        contextMenu.style.display = 'none';
+      }
+    });
+  }
+
+  // コンテキストメニューのアクション処理
+  function handleContextMenuAction(action) {
+    if (!selectedElement) return;
+
+    switch (action) {
+      case 'edit-html':
+        const html = prompt('HTMLを編集', selectedElement.outerHTML);
+        if (html) {
+          selectedElement.outerHTML = html;
+          refreshElementsPanel();
+        }
+        break;
+      
+      case 'add-attribute':
+        const attrName = prompt('属性名を入力');
+        if (attrName) {
+          const attrValue = prompt('属性値を入力');
+          selectedElement.setAttribute(attrName, attrValue || '');
+          refreshElementsPanel();
+        }
+        break;
+      
+      case 'edit-element':
+        const tagName = prompt('タグ名を編集', selectedElement.tagName.toLowerCase());
+        if (tagName) {
+          const newElement = document.createElement(tagName);
+          Array.from(selectedElement.attributes).forEach(attr => {
+            newElement.setAttribute(attr.name, attr.value);
+          });
+          newElement.innerHTML = selectedElement.innerHTML;
+          selectedElement.parentNode.replaceChild(newElement, selectedElement);
+          selectedElement = newElement;
+          refreshElementsPanel();
+        }
+        break;
+      
+      case 'duplicate':
+        const clone = selectedElement.cloneNode(true);
+        selectedElement.parentNode.insertBefore(clone, selectedElement.nextSibling);
+        refreshElementsPanel();
+        break;
+      
+      case 'remove':
+        if (confirm('要素を削除しますか？')) {
+          selectedElement.parentNode.removeChild(selectedElement);
+          refreshElementsPanel();
+        }
+        break;
+      
+      case 'toggle-visibility':
+        if (selectedElement.style.display === 'none') {
+          selectedElement.style.display = '';
+        } else {
+          selectedElement.style.display = 'none';
+        }
+        refreshElementsPanel();
+        break;
+      
+      case 'force-state':
+        const state = prompt('強制する状態を入力 (例: hover, active, focus)', 'hover');
+        if (state) {
+          // 既存の状態クラスを削除
+          selectedElement.classList.remove('force-hover', 'force-active', 'force-focus', 
+                                         'force-focus-within', 'force-focus-visible', 'force-target');
+          
+          // 新しい状態クラスを追加
+          selectedElement.classList.add(`force-${state}`);
+          refreshElementsPanel();
+        }
+        break;
+    }
   }
 
   // Consoleパネルの作成
@@ -254,11 +461,20 @@
     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';
 
-    panel.appendChild(tree);
+    const cssPanel = document.createElement('div');
+    cssPanel.className = 'css-panel';
+    cssPanel.id = 'css-panel';
+
+    container.appendChild(tree);
+    container.appendChild(cssPanel);
+    panel.appendChild(container);
 
     // DOMツリーを構築
     function buildDOMTree(node, parentElement, depth = 0) {
@@ -266,6 +482,38 @@
         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`;
+          
+          // CSSパネルを更新
+          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);
+        };
 
         // タグ名
         const tag = document.createElement('span');
@@ -308,12 +556,142 @@
       }
     }
 
+    // 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) {
+      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ツリー構築
-    buildDOMTree(document.documentElement, tree);
+    refreshElementsPanel();
 
     return panel;
   }
 
+  // Elementsパネルをリフレッシュ
+  function refreshElementsPanel() {
+    const tree = document.getElementById('dom-tree');
+    tree.innerHTML = '';
+    buildDOMTree(document.documentElement, tree);
+    
+    if (selectedElement) {
+      const elementId = selectedElement.id || Array.from(selectedElement.attributes)
+        .find(attr => attr.name.startsWith('data-element-id'))?.value;
+      
+      if (elementId) {
+        const node = document.querySelector(`[data-element-id="${elementId}"]`);
+        if (node) {
+          node.classList.add('selected');
+          updateCSSPanel(selectedElement);
+        }
+      }
+    }
+  }
+
   // Storageパネルの作成
   function createStoragePanel() {
     const panel = document.createElement('div');
@@ -329,6 +707,19 @@
     localStorageTable.className = 'storage-table';
     panel.appendChild(localStorageTable);
 
+    const addLocalStorageBtn = document.createElement('button');
+    addLocalStorageBtn.className = 'add-btn';
+    addLocalStorageBtn.textContent = '+ Local Storageに追加';
+    addLocalStorageBtn.onclick = () => {
+      const key = prompt('キー名を入力');
+      if (key) {
+        const value = prompt('値を入力');
+        localStorage.setItem(key, value);
+        renderStorage();
+      }
+    };
+    panel.appendChild(addLocalStorageBtn);
+
     // SessionStorage表示
     const sessionStorageTitle = document.createElement('h3');
     sessionStorageTitle.style.marginTop = '20px';
@@ -339,6 +730,19 @@
     sessionStorageTable.className = 'storage-table';
     panel.appendChild(sessionStorageTable);
 
+    const addSessionStorageBtn = document.createElement('button');
+    addSessionStorageBtn.className = 'add-btn';
+    addSessionStorageBtn.textContent = '+ Session Storageに追加';
+    addSessionStorageBtn.onclick = () => {
+      const key = prompt('キー名を入力');
+      if (key) {
+        const value = prompt('値を入力');
+        sessionStorage.setItem(key, value);
+        renderStorage();
+      }
+    };
+    panel.appendChild(addSessionStorageBtn);
+
     // Cookie表示
     const cookiesTitle = document.createElement('h3');
     cookiesTitle.style.marginTop = '20px';
@@ -349,14 +753,27 @@
     cookiesTable.className = 'storage-table';
     panel.appendChild(cookiesTable);
 
+    const addCookieBtn = document.createElement('button');
+    addCookieBtn.className = 'add-btn';
+    addCookieBtn.textContent = '+ Cookieに追加';
+    addCookieBtn.onclick = () => {
+      const name = prompt('Cookie名を入力');
+      if (name) {
+        const value = prompt('値を入力');
+        document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/`;
+        renderStorage();
+      }
+    };
+    panel.appendChild(addCookieBtn);
+
     // ストレージを表示する関数
     function renderStorage() {
-      renderTable(localStorageTable, localStorage);
-      renderTable(sessionStorageTable, sessionStorage);
+      renderTable(localStorageTable, localStorage, 'local');
+      renderTable(sessionStorageTable, sessionStorage, 'session');
       renderCookiesTable(cookiesTable);
     }
 
-    function renderTable(tableElement, storage) {
+    function renderTable(tableElement, storage, type) {
       tableElement.innerHTML = `
         <thead>
           <tr>
@@ -377,24 +794,34 @@
         const row = document.createElement('tr');
         
         const keyCell = document.createElement('td');
-        keyCell.textContent = key;
+        const keySpan = document.createElement('span');
+        keySpan.className = 'editable';
+        keySpan.textContent = key;
+        keySpan.onclick = () => {
+          const newKey = prompt('新しいキー名を入力', key);
+          if (newKey && newKey !== key) {
+            storage.setItem(newKey, value);
+            storage.removeItem(key);
+            renderStorage();
+          }
+        };
+        keyCell.appendChild(keySpan);
         
         const valueCell = document.createElement('td');
-        valueCell.textContent = value;
-        
-        const actionsCell = document.createElement('td');
-        actionsCell.className = 'storage-actions';
-        
-        const editBtn = document.createElement('button');
-        editBtn.className = 'storage-btn';
-        editBtn.textContent = 'Edit';
-        editBtn.onclick = () => {
-          const newValue = prompt('Enter new value:', value);
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'editable';
+        valueSpan.textContent = value;
+        valueSpan.onclick = () => {
+          const newValue = prompt('新しい値を入力', value);
           if (newValue !== null) {
             storage.setItem(key, newValue);
             renderStorage();
           }
         };
+        valueCell.appendChild(valueSpan);
+        
+        const actionsCell = document.createElement('td');
+        actionsCell.className = 'storage-actions';
         
         const deleteBtn = document.createElement('button');
         deleteBtn.className = 'storage-btn';
@@ -404,7 +831,6 @@
           renderStorage();
         };
         
-        actionsCell.appendChild(editBtn);
         actionsCell.appendChild(deleteBtn);
         
         row.appendChild(keyCell);
@@ -433,15 +859,40 @@
         if (!cookie.trim()) return;
         
         const [name, ...valueParts] = cookie.split('=');
+        const decodedName = decodeURIComponent(name.trim());
         const value = valueParts.join('=').trim();
         
         const row = document.createElement('tr');
         
         const nameCell = document.createElement('td');
-        nameCell.textContent = name.trim();
+        const nameSpan = document.createElement('span');
+        nameSpan.className = 'editable';
+        nameSpan.textContent = decodedName;
+        nameSpan.onclick = () => {
+          const newName = prompt('新しい名前を入力', decodedName);
+          if (newName && newName !== decodedName) {
+            const newValue = prompt('新しい値を入力', decodeURIComponent(value));
+            if (newValue !== null) {
+              document.cookie = `${encodeURIComponent(newName)}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
+              document.cookie = `${name.trim()}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
+              renderStorage();
+            }
+          }
+        };
+        nameCell.appendChild(nameSpan);
         
         const valueCell = document.createElement('td');
-        valueCell.textContent = decodeURIComponent(value);
+        const valueSpan = document.createElement('span');
+        valueSpan.className = 'editable';
+        valueSpan.textContent = decodeURIComponent(value);
+        valueSpan.onclick = () => {
+          const newValue = prompt('新しい値を入力', decodeURIComponent(value));
+          if (newValue !== null) {
+            document.cookie = `${name.trim()}=${encodeURIComponent(newValue)}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
+            renderStorage();
+          }
+        };
+        valueCell.appendChild(valueSpan);
         
         const actionsCell = document.createElement('td');
         actionsCell.className = 'storage-actions';
@@ -499,13 +950,12 @@
 
     document.body.appendChild(button);
   }
+
+  // 初期化
   document.addEventListener('DOMContentLoaded', function() {
-    // 初期化
     createDevTools();
     createOpenButton();
-
-    // 初期メッセージ
     console.log('開発者ツールが初期化されました');
     console.log('このコンソールでJavaScriptを実行できます');
-  })
+  });
 })();