-
Notifications
You must be signed in to change notification settings - Fork 0
/
UBConsole.min.js
6 lines (5 loc) · 16.8 KB
/
UBConsole.min.js
1
2
3
4
5
6
/*
Copyright (c) Elijah Bantugan 2023
MIT License
*/
(()=>{const vmNm=window.location.href.toString().length*(4*Math.random()+1).toFixed(),consoleStyles='\n @import url("https://fonts.googleapis.com/css?family=Roboto");\n @import url("https://fonts.googleapis.com/css?family=Google%20Sans");\n @import url("https://fonts.googleapis.com/css?family=Raleway");\n .csub-fl-container {\n position: fixed;\n z-index: 999999999999999999;\n left: 0%;\n bottom: 0%;\n height: calc(25% + 50px);\n width: 100%;\n background-color: #202124;\n font-family: monospace;\n }\n .csub-fl-navbar {\n position: absolute;\n top: 0%;\n left: 0%;\n width: 100%;\n height: 50px;\n background-color: #333436;\n overflow-y: scroll;\n }\n \n .csub-fl-child {\n position: absolute;\n top: 50px;\n left: 0%;\n height: calc(100% - 17.5%);\n width: 100%;\n font-size: 14px;\n overflow-y: scroll;\n padding-left: 15px;\n }\n\n .node - div {\n background - color: #ffcccc;\n border: 1px solid #000;\n width: 100px;\n height: 50px;\n }\n \n .node - span {\n background - color: #ccffcc;\n border: 1px solid #000;\n width: 50px;\n height: 25px;\n }\n\n .tag {\n color: rgb(10, 114, 148) !important;\n }\n .attrName {\n color: lightblue !important;\n }\n .attr-value {\n color: orange !important;\n }\n .dt-identify {\n color: gray;\n }\n\n .ubc-domtree-ele, .ubc-domtree-ele-gray {\n cursor: default;\n }\n .ubc-domtree-ele:hover {\n background-color: gray;\n }\n .ubc-domtree-ele-gray:hover {\n background-color: rgb(10, 114, 148, 0.4) !important;\n }\n .csub-fl-sg {\n position: absolute;\n top: 60%;\n right: 0.5%;\n transform: translate(0%, -50%);\n cursor: pointer;\n }\n .ubc-domtree-editing {\n }\n .csub-fl-t5 {\n position: absolute;\n top: 50%;\n width: 100%;\n transform: translate(0%, -50%);\n height: 100%;\n }\n .csub-fl-navbar-btnop {\n margin-left: 15px;\n background: transparent;\n color: white;\n font-family: \'Roboto\', serif;\n border: none;\n height: 100%;\n cursor: pointer;\n color: lightgray\n }\n .csub-fl-navbar-btnop:hover {\n background-color: rgb(128, 128, 128, 0.5);\n color: white;\n }\n .csub-fl-navbar-btnop-selected {\n background-color: black;\n }\n .csub-fl-hidden {\n display: none;\n }\n .csub-ct-msg {\n display: flex;\n justify-content: space-between;\n margin-top: 10px;\n color: lightgray;\n }\n .csub-ct-from {\n margin-right: 10px;\n color: gray;\n }\n .dftnmsg-url, .dftmsg-status, .dftmsg-type, .dftmsg-time, .dftmsg-headers {\n color: white;\n border-right: 1px solid gray;\n padding-right: 8px;\n }\n\n .csub-fl-dft-nwmsg:nth-child(even) {\n border-bottom: 1px solid rgb(128, 128, 128, 0.7);\n }\n .csub-fl-dft-nwmsg:nth-child(odd) {\n border-bottom: 1px solid rgb(211, 211, 211, 0.7);\n }\n\n .csub-fl-dft-nwmsg {\n height: 30px;\n line-height: 30px;\n }\n\n #csub-fl-inputco {\n font-family: monospace;\n color: white;\n background: transparent;\n border: none;\n width: 90%;\n outline: 0;\n }\n ',styleSheet=document.createElement("style");styleSheet.innerHTML=consoleStyles,document.head.appendChild(styleSheet);const consoleEle=document.createElement("div");consoleEle.classList.add("csub-fl-container"),consoleEle.style.display="block",document.body.appendChild(consoleEle);const navbar=document.createElement("div");navbar.classList.add("csub-fl-navbar"),navbar.innerHTML='\n <div class="csub-fl-t5">\n <button class="csub-fl-navbar-btnop csub-fl-navbar-btnop-selected" id="csub-fl-elementsbtn">Elements</button>\n <button class="csub-fl-navbar-btnop" id="csub-fl-consolebtn">Console</button>\n <button class="csub-fl-navbar-btnop" id="csub-fl-elementsbtn">Sources</button>\n <button class="csub-fl-navbar-btnop" id="csub-fl-networkbtn">Network</button>\n </div>\n ',consoleEle.appendChild(navbar),document.getElementById("csub-fl-elementsbtn").addEventListener("click",(()=>openPannel("elements"))),document.getElementById("csub-fl-consolebtn").addEventListener("click",(()=>openPannel("console"))),document.getElementById("csub-fl-networkbtn").addEventListener("click",(()=>openPannel("network")));const domTree=document.createElement("div");domTree.classList.add("csub-fl-domtree"),domTree.classList.add("csub-fl-child"),consoleEle.appendChild(domTree);const consoleTab=document.createElement("div");consoleTab.classList.add("csub-fl-cto"),consoleTab.classList.add("csub-fl-child"),consoleTab.classList.add("csub-fl-hidden"),consoleTab.innerHTML='\n <div id="csub-fl-inputcodiv">\n <span style="color: rgb(0, 119, 255);">></span> <input id="csub-fl-inputco">\n </div>\n ',consoleEle.appendChild(consoleTab),document.getElementById("csub-fl-inputco").addEventListener("keyup",(e=>{if(13==e.keyCode||"Enter"===e.key){const value=document.getElementById("csub-fl-inputco").value;if(""==value.replaceAll(/ /g,""))return;try{const func=eval(value),m=document.createElement("div");m.classList.add("csub-ct-msg"),m.innerHTML=`\n ${isJSON(func)?JSON.stringify(func):func}\n <span class="csub-ct-from">VM${vmNm}:1</span>`,consoleTab.insertBefore(m,document.getElementById("csub-fl-inputcodiv")),scrollBottom(consoleTab)}catch(e){const n=document.createElement("div");n.classList.add("csub-ct-msg"),n.style.color="red",n.innerHTML=`\n ${e}\n <span class="csub-ct-from">VM${vmNm}:1</span>`,consoleTab.insertBefore(n,document.getElementById("csub-fl-inputcodiv")),scrollBottom(consoleTab)}finally{document.getElementById("csub-fl-inputco").value=""}}}));const networkTab=document.createElement("div");networkTab.classList.add("csub-fl-nwt"),networkTab.classList.add("csub-fl-child"),networkTab.classList.add("csub-fl-hidden"),consoleEle.appendChild(networkTab);const settingsGear=document.createElement("div");function scrollBottom(e){var n;(n=e).scrollTop=n.scrollHeight}function isJSON(e){return"[object Object]"==e.toString()}function visualizeDOM(){const e=createNodeElement(document.querySelector("html"),0),n=document.createElement("div");n.innerText="<!DOCTYPE html>",n.classList.add("dt-identify"),domTree.appendChild(n),domTree.appendChild(e),document.querySelectorAll(".ubc-domtree-ele").forEach((e=>{e.addEventListener("click",(n=>{2==n.detail&&(console.log("Double clicked dom element",e),n.preventDefault(),console.log(e.contentEditable),"true"==e.contentEditable?e.contentEditable=!1:e.contentEditable=!0,e.classList.toggle("ubc-domtree-editing"),e.focus())})),e.addEventListener("keydown",(n=>{"Enter"==n.key&&(n.preventDefault(),e.contentEditable="False",e.classList.toggle("ubc-domtree-editing"))}))})),document.querySelectorAll(".ubc-domtree-ele-gray").forEach((e=>{e.addEventListener("click",(n=>{2==n.detail&&(console.log("Double clicked dom element",e),n.preventDefault(),console.log(e.contentEditable),"true"==e.contentEditable?e.contentEditable=!1:e.contentEditable=!0,e.classList.toggle("ubc-domtree-editing"),e.focus())})),e.addEventListener("keydown",(n=>{"Enter"==n.key&&(n.preventDefault(),e.contentEditable="False",e.classList.toggle("ubc-domtree-editing"))}))}))}function createNodeElement(e,n){const t=document.createElement("div");t.style.paddingLeft=10*n+"px";var s=`<span class="ubc-domtree-ele"><span class="tag"><${e.nodeName.toLowerCase()}</span>`;const o=e.attributes;for(let e=0;e<o.length;e++){const n=o[e];s+=` <span class="attrName">${n.nodeName}="</span><span class="attr-value">${n.nodeValue}</span><span class="attrName">"</span>`}if(0===e.childNodes.length)s+='<span class="ubc-domtree-ele"><span class="tag">/></span></span>',t.innerHTML=s;else{s+='<span class="tag">></span>';const o=document.createElement("span");if(o.innerHTML=s,t.appendChild(o),e.childNodes.length>0)for(let s=0;s<e.childNodes.length;s++){const o=e.childNodes[s];if(o.nodeType===Node.ELEMENT_NODE){const e=createNodeElement(o,n+1);t.appendChild(e)}else if(o.nodeType===Node.TEXT_NODE){const e=document.createElement("span");e.style.color="lightgray";const n=document.createElement("span");n.classList.add("ubc-domtree-ele-gray"),e.textContent=o.textContent,n.appendChild(e),t.appendChild(n)}}const c=`<span class="tag"></${e.nodeName.toLowerCase()}></span>`,l=document.createElement("span");l.innerHTML=c+"</span>";const a=t.lastChild;a&&a.nodeType===Node.TEXT_NODE&&/^\s*$/.test(a.textContent)&&t.removeChild(a),t.appendChild(l)}return n>0&&t.appendChild(document.createElement("br")),t}settingsGear.classList.add("csub-fl-sg"),settingsGear.innerHTML='\n <svg height="25px" width="25px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000">\n\n<g id="SVGRepo_bgCarrier" stroke-width="0"/>\n\n<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>\n\n<g id="SVGRepo_iconCarrier"> <path style="fill:#000000;" d="M501.801,313.316V198.684h-52.94c-4.002-13.486-9.367-26.387-15.958-38.527l37.434-37.434 l-81.059-81.058l-37.434,37.434c-12.14-6.592-25.041-11.956-38.527-15.958V10.199H198.684v52.94 c-13.486,4.002-26.387,9.367-38.527,15.958l-37.434-37.433l-81.058,81.058l37.434,37.434c-6.592,12.14-11.956,25.041-15.958,38.527 H10.199v114.634h52.94c4.002,13.486,9.367,26.387,15.958,38.527l-37.433,37.433l81.058,81.058l37.434-37.434 c12.14,6.592,25.041,11.956,38.527,15.958v52.941h114.634v-52.94c13.486-4.002,26.387-9.367,38.527-15.958l37.434,37.434 l81.058-81.058l-37.434-37.434c6.592-12.14,11.956-25.041,15.958-38.527h52.94V313.316z M256,348.038 c-50.831,0-92.038-41.207-92.038-92.038s41.207-92.038,92.038-92.038s92.038,41.207,92.038,92.038S306.831,348.038,256,348.038z"/> <path d="M313.316,512H198.684c-5.633,0-10.199-4.566-10.199-10.199v-45.473c-9.042-3.045-17.876-6.704-26.398-10.931l-32.153,32.153 c-3.982,3.983-10.441,3.983-14.424,0L34.451,396.49c-3.983-3.983-3.983-10.441,0-14.424l32.153-32.153 c-4.229-8.52-7.886-17.355-10.932-26.398H10.199C4.566,323.516,0,318.95,0,313.317V198.684c0-5.633,4.566-10.199,10.199-10.199 h45.473c3.045-9.043,6.704-17.876,10.932-26.398l-32.153-32.153c-3.983-3.983-3.983-10.441,0-14.424l81.059-81.059 c3.982-3.983,10.441-3.983,14.424,0l32.153,32.153c8.521-4.229,17.356-7.886,26.398-10.932V10.199 C188.484,4.566,193.051,0,198.684,0h114.634c5.633,0,10.199,4.566,10.199,10.199v45.473c9.042,3.045,17.876,6.704,26.398,10.932 l32.153-32.153c3.982-3.983,10.441-3.983,14.424,0l81.059,81.059c3.983,3.983,3.983,10.441,0,14.424l-32.153,32.153 c4.229,8.52,7.886,17.354,10.931,26.398h45.472c5.633,0,10.199,4.566,10.199,10.199v114.634c0,5.633-4.566,10.199-10.199,10.199 h-45.473c-3.045,9.044-6.704,17.877-10.931,26.398l32.153,32.153c3.983,3.983,3.983,10.441,0,14.424L396.49,477.55 c-3.982,3.983-10.441,3.983-14.424,0l-32.153-32.153c-8.521,4.229-17.356,7.886-26.398,10.931v45.472 C323.516,507.434,318.949,512,313.316,512z M208.883,491.602h94.236v-42.741c0-4.515,2.969-8.493,7.298-9.778 c12.688-3.766,24.989-8.861,36.563-15.144c3.969-2.155,8.883-1.443,12.079,1.751l30.222,30.222l66.634-66.634l-30.222-30.222 c-3.193-3.194-3.906-8.109-1.751-12.079c6.283-11.57,11.377-23.871,15.144-36.563c1.285-4.329,5.263-7.298,9.778-7.298h42.739 v-94.236h-42.741c-4.515,0-8.493-2.969-9.778-7.298c-3.767-12.691-8.861-24.992-15.144-36.563c-2.155-3.97-1.443-8.885,1.751-12.079 l30.222-30.222l-66.634-66.634l-30.222,30.222c-3.194,3.194-8.107,3.906-12.079,1.751c-11.573-6.284-23.874-11.378-36.563-15.144 c-4.329-1.285-7.298-5.263-7.298-9.778V20.398h-94.236v42.741c0,4.515-2.969,8.493-7.298,9.778 c-12.688,3.766-24.989,8.861-36.563,15.144c-3.97,2.154-8.885,1.442-12.079-1.751l-30.222-30.222l-66.634,66.634l30.222,30.222 c3.193,3.194,3.906,8.109,1.751,12.079c-6.283,11.572-11.378,23.873-15.144,36.563c-1.285,4.329-5.263,7.298-9.778,7.298H20.398 v94.236h42.741c4.515,0,8.493,2.969,9.778,7.298c3.766,12.689,8.861,24.99,15.144,36.563c2.155,3.97,1.443,8.885-1.751,12.079 l-30.222,30.222l66.634,66.634l30.222-30.222c3.195-3.193,8.109-3.905,12.079-1.751c11.573,6.284,23.874,11.378,36.563,15.144 c4.329,1.285,7.298,5.263,7.298,9.778v42.738H208.883z M256,358.237c-56.373,0-102.237-45.863-102.237-102.237 S199.627,153.763,256,153.763S358.237,199.627,358.237,256S312.373,358.237,256,358.237z M256,174.162 c-45.125,0-81.838,36.713-81.838,81.838c0,45.125,36.713,81.838,81.838,81.838c45.126,0,81.838-36.713,81.838-81.838 S301.126,174.162,256,174.162z"/> <path d="M256,394.954c-5.633,0-10.199-4.566-10.199-10.199c0-5.633,4.566-10.199,10.199-10.199 c50.206,0,95.15-31.792,111.838-79.111c1.873-5.312,7.697-8.099,13.011-6.226c5.312,1.874,8.099,7.698,6.226,13.011 C367.515,357.69,314.84,394.954,256,394.954z"/> <path d="M384.62,272.319c-0.16,0-0.321-0.003-0.483-0.011c-5.627-0.262-9.975-5.036-9.713-10.664 c0.088-1.875,0.132-3.774,0.132-5.643c0-5.633,4.566-10.199,10.199-10.199c5.633,0,10.199,4.566,10.199,10.199 c0,2.186-0.052,4.404-0.154,6.595C394.545,268.06,390.034,272.319,384.62,272.319z"/> </g>\n\n</svg>',navbar.appendChild(settingsGear),console.log=function(){const e=(new Error).stack.split("\n")[2].trim(),n=e.slice(e.lastIndexOf("/")+1);for(var t,s=arguments,o="",c=0;c<s.length;c++){const e=s[c];t=isJSON(e),o+=JSON.stringify(e)}const l=document.createElement("div");l.classList.add("csub-ct-msg"),l.innerHTML=`\n ${t?o:o.substring(1,o.length-1)} \n <a class="csub-ct-from" href="${window.location.href.replace(window.location.href.slice(window.location.href.lastIndexOf("/")+1),"")}/${n.replaceAll(":","").replace(/[0-9]/g,"")}" target="_blank">${n}</a>`,consoleTab.insertBefore(l,document.getElementById("csub-fl-inputcodiv")),scrollBottom(consoleTab)},console.warn=function(e){const n=(new Error).stack.split("\n")[2].trim(),t=n.slice(n.lastIndexOf("/")+1),s=document.createElement("div");s.classList.add("csub-ct-msg"),s.innerHTML=`\n ${e} \n <span class="csub-ct-from">${t}</span>`,consoleTab.appendChild(s)},Object.prototype.scrollBottom=function(){var e;(e=this).scrollTop=e.scrollHeight},document.addEventListener("keyup",(e=>{if("\\"==e.key)switch(consoleEle.style.display){case"none":consoleEle.style.display="block";break;case"block":consoleEle.style.display="none"}})),visualizeDOM();const originalFetch=fetch,proxied=XMLHttpRequest.prototype.open;function openPannel(e){switch(document.querySelectorAll(".csub-fl-child").forEach((e=>e.classList.add("csub-fl-hidden"))),document.querySelectorAll(".csub-fl-navbar-btnop-selected").forEach((e=>e.classList.remove("csub-fl-navbar-btnop-selected"))),e){case"elements":domTree.classList.remove("csub-fl-hidden"),document.getElementById("csub-fl-elementsbtn").classList.add("csub-fl-navbar-btnop-selected");break;case"console":consoleTab.classList.remove("csub-fl-hidden"),document.getElementById("csub-fl-consolebtn").classList.add("csub-fl-navbar-btnop-selected");break;case"network":networkTab.classList.remove("csub-fl-hidden"),document.getElementById("csub-fl-networkbtn").classList.add("csub-fl-navbar-btnop-selected")}}XMLHttpRequest.prototype.open=function(){return console.log(arguments),proxied.apply(this,[].slice.call(arguments))},fetch=(...e)=>{console.log("Fetch request initiated with args:",...e);const n=document.createElement("div");n.classList.add("csub-fl-dft-nwmsg"),n.innerHTML=`\n <span class="dftnmsg-url">${e[0]}</span>\n <span class="dftmsg-status">(pending)</span>\n <span class="dftmsg-type">fetch</span>\n <span class="dftmsg-time">(pending)</span>\n <span class="dftmsg-headers">${JSON.stringify(e[1])}</span>\n `,networkTab.appendChild(n),networkTab.scrollBottom(n);var t=new Date;return originalFetch(...e).then((s=>{const o=((new Date).getTime()-t.getTime())/1e3;return n.innerHTML=`\n <span class="dftnmsg-url">${e[0]}</span>\n <span class="dftmsg-status">${s.status}</span>\n <span class="dftmsg-type">fetch</span>\n <span class="dftmsg-time">${1e3*o}ms</span>\n <span class="dftmsg-headers">${JSON.stringify(e[1])}</span>\n `,networkTab.scrollBottom(n),s})).catch((s=>{const o=((new Date).getTime()-t.getTime())/1e3;throw n.innerHTML=`\n <span style="color: red">(failed)</span>\n <span class="dftnmsg-url" style="color: red">${e[0]}</span>\n <span class="dftmsg-status" style="color: red">unknown</span>\n <span class="dftmsg-type" style="color: red">fetch</span>\n <span class="dftmsg-time" style="color: red">${1e3*o}ms</span>\n <span class="dftmsg-headers" style="color: red">${JSON.stringify(e[1])}</span>\n `,s}))}})();