Update src/addons/addons/debug-console/userscript.js

src/addons/addons/debug-console/userscript.js

@@ -24,71 +24,83 @@ export default async ({ addon }) => {
     if (window.__injectedConsole) return;
     window.__injectedConsole = true;
 
-    const style = `
-      #floatingConsole {
-        position: fixed;
-        bottom: 20px;
-        right: 20px;
-        width: 400px;
-        max-height: 60vh;
-        background: #111;
-        color: #0f0;
-        font-family: monospace;
-        font-size: 14px;
-        border: 1px solid #0f0;
-        border-radius: 8px;
-        box-shadow: 0 0 10px #0f0;
-        z-index: 999999;
-        display: flex;
-        flex-direction: column;
-        resize: both;
-        overflow: hidden;
-      }
-      #floatingConsoleHeader {
-        background: #222;
-        cursor: move;
-        padding: 5px 10px;
-        user-select: none;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-      #floatingConsoleHeader button {
-        background: transparent;
-        color: #0f0;
-        border: none;
-        font-weight: bold;
-        margin-left: 5px;
-        cursor: pointer;
-      }
-      #floatingConsoleLog {
-        flex: 1;
-        overflow-y: auto;
-        padding: 10px;
-        border-top: 1px solid #0f0;
-        border-bottom: 1px solid #0f0;
-        background: #000;
-      }
-      #floatingConsoleInput {
-        display: flex;
-        border-top: 1px solid #0f0;
-      }
-      #floatingConsoleInput input {
-        flex: 1;
-        background: #000;
-        color: #0f0;
-        border: none;
-        padding: 10px;
-        font-family: monospace;
-      }
-      #floatingConsoleInput button {
-        background: #333;
-        color: #0f0;
-        border: none;
-        padding: 10px;
-        cursor: pointer;
-      }
-    `;
+const style = `
+  #floatingConsole {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 400px;
+    max-height: 60vh;
+    background: #111;
+    color: #0f0;
+    font-family: monospace;
+    font-size: 14px;
+    border: 1px solid #0f0;
+    border-radius: 8px;
+    box-shadow: 0 0 10px #0f0;
+    z-index: 999999;
+    display: flex;
+    flex-direction: column;
+    resize: both;
+    overflow: hidden;
+  }
+  #floatingConsoleHeader {
+    background: #222;
+    cursor: move;
+    padding: 5px 10px;
+    user-select: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  #floatingConsoleHeader button {
+    background: transparent;
+    color: #0f0;
+    border: none;
+    font-weight: bold;
+    margin-left: 5px;
+    cursor: pointer;
+  }
+  #floatingConsoleLog {
+    flex: 1;
+    overflow-y: auto;
+    padding: 10px;
+    border-top: 1px solid #0f0;
+    border-bottom: 1px solid #0f0;
+    background: #000;
+  }
+  .log-info {
+    color: #0f0;
+  }
+  .log-warn {
+    color: #ff0;
+  }
+  .log-error {
+    color: #f00;
+  }
+  #floatingConsoleInput {
+    display: flex;
+    border-top: 1px solid #0f0;
+  }
+  #floatingConsoleInput textarea {
+    flex: 1;
+    background: #000;
+    color: #0f0;
+    border: none;
+    padding: 10px;
+    font-family: monospace;
+    resize: none;
+    height: 80px;
+  }
+  #floatingConsoleInput button {
+    background: #333;
+    color: #0f0;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    white-space: nowrap;
+  }
+`;
 
     const css = document.createElement("style");
     css.textContent = style;
@@ -96,42 +108,49 @@ export default async ({ addon }) => {
 
     const el = document.createElement("div");
     el.id = "floatingConsole";
-    el.innerHTML = `
-      <div id="floatingConsoleHeader">
-        <span id="consoleTitle">🖥 Console</span>
-        <div>
-          <button id="minBtn">∧</button>
-          <button id="closeBtn">×</button>
-        </div>
-      </div>
-      <div id="floatingConsoleLog">[Console Ready]</div>
-      <div id="floatingConsoleInput">
-        <input id="floatingConsoleCmd" placeholder="JavaScriptを入力..." />
-        <button id="execBtn">実行</button>
-      </div>
-    `;
+el.innerHTML = `
+  <div id="floatingConsoleHeader">
+    <span id="consoleTitle">🖥 Console</span>
+    <div>
+      <button id="minBtn">∧</button>
+      <button id="closeBtn">×</button>
+    </div>
+  </div>
+  <div id="floatingConsoleLog">[Console Ready]</div>
+  <div id="floatingConsoleInput">
+    <textarea id="floatingConsoleCmd" placeholder="JavaScriptを入力...（複数行対応）"></textarea>
+    <button id="execBtn">実行</button>
+  </div>
+`;
     document.body.appendChild(el);
 
     const logBox = el.querySelector("#floatingConsoleLog");
     const input = el.querySelector("#floatingConsoleCmd");
 
-    const log = (msg) => {
-      const div = document.createElement("div");
-      div.textContent = "> " + msg;
-      logBox.appendChild(div);
-      logBox.scrollTop = logBox.scrollHeight;
-    };
+const log = (msg, type = "info") => {
+  const div = document.createElement("div");
+  div.className = `log-${type}`;
+  div.textContent = "> " + msg;
+  logBox.appendChild(div);
+  // 区切り線を追加
+  const hr = document.createElement("hr");
+  hr.style.border = "0";
+  hr.style.borderTop = "1px solid #0f0";
+  hr.style.margin = "2px 0";
+  logBox.appendChild(hr);
+  logBox.scrollTop = logBox.scrollHeight;
+};
 
-    el.querySelector("#execBtn").onclick = () => {
-      const code = input.value;
-      input.value = "";
-      try {
-        const result = eval(code);
-        log("結果: " + result);
-      } catch (e) {
-        log("エラー: " + e);
-      }
-    };
+el.querySelector("#execBtn").onclick = () => {
+  const code = input.value;
+  input.value = "";
+  try {
+    const result = eval(code);
+    log("結果: " + result, "info");
+  } catch (e) {
+    log("エラー: " + e, "error");
+  }
+};
 
     el.querySelector("#closeBtn").onclick = () => {
       el.remove();
@@ -184,21 +203,32 @@ export default async ({ addon }) => {
       });
     })(el, header);
 
-    // console.* フック
-    const hookConsole = (name) => {
-      const original = console[name];
-      console[name] = function (...args) {
-        original.apply(console, args);
-        log("[" + name + "] " + args.join(" "));
-      };
-    };
-    ["log", "warn", "error"].forEach(hookConsole);
+// consoleフックもタイプ別に変更
+const hookConsole = (name) => {
+  const original = console[name];
+  console[name] = function (...args) {
+    original.apply(console, args);
+    let type = "info";
+    if (name === "warn") type = "warn";
+    if (name === "error") type = "error";
+    log(`[${name}] ` + args.join(" "), type);
+  };
+};
+["log", "warn", "error"].forEach(hookConsole);
+
+// window.onerrorのログ
+window.onerror = (msg, src, line, col, err) => {
+  log(`[onerror] ${msg} @ ${line}:${col}`, "error");
+};
+window.addEventListener("unhandledrejection", (e) => {
+  log(`[unhandledrejection] ${e.reason}`, "error");
+});
+    input.addEventListener("keydown", (e) => {
+  if (e.key === "Enter" && e.ctrlKey && e.shiftKey) {
+    e.preventDefault(); // 改行を防ぐ（必要なら外してもOK）
+    el.querySelector("#execBtn").click();
+  }
+});
 
-    window.onerror = (msg, src, line, col, err) => {
-      log("[onerror] " + msg + " @ " + line + ":" + col);
-    };
-    window.addEventListener("unhandledrejection", (e) => {
-      log("[unhandledrejection] " + e.reason);
-    });
   }
 };