Add Devtools

src/public/js/controls.js

@@ -115,8 +115,10 @@ function updateSearch(value) {
 function isIframeLoaded() {
     let currentTab = getCurrentTab();
     let iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
+    addRightClickToIframe(currentTab);
     updateTabDetail("Loading...", "loading.gif");
     iframe.addEventListener('load', function() {
+        addRightClickToIframe(currentTab);
         updateTabDetail(iframe.contentWindow.document.title,  iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico", currentTab);
         updateURLBar(iframe.contentWindow.location.href);
         addToHistory(iframe.contentWindow.location.href, iframe.contentWindow.document.title, iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico");

src/public/js/eruda/create.js

@@ -0,0 +1,83 @@
+function createDevTools(currentIframeID) {
+    if (currentIframeID) {
+        const iframe = document.querySelector(`[data-iframe-id="${currentIframeID}"]`);
+        const devTools = document.createElement('script');
+        devTools.src = 'https://cdn.jsdelivr.net/npm/eruda';
+        devTools.onload = () => {
+            iframe.contentWindow.eruda.init();
+            iframe.contentWindow.eruda.show();
+        };
+        iframe.contentDocument.body.appendChild(devTools); 
+    }
+    else {
+        const devTools = document.createElement('script');
+        devTools.src = 'https://cdn.jsdelivr.net/npm/eruda';
+        devTools.onload = () => {
+            eruda.init();
+            eruda.show();
+        };
+        document.body.appendChild(devTools);
+    }
+}
+
+function destroyDevTools(currentIframeID) {
+    if (currentIframeID) {
+        const iframe = document.querySelector(`[data-iframe-id="${currentIframeID}"]`);
+        const devScript = iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]');
+        iframe.contentWindow.eruda.destroy();
+        devScript.remove();
+    }
+    else {
+        const devScript = document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]');
+        eruda.destroy();
+        devScript.remove();
+    }
+}
+
+function devToolsKeybinds() {
+    console.log("DevTools keybinds enabled");
+    document.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.shiftKey && e.key === 'I') {
+            e.preventDefault();
+            const currentTab = getCurrentTab();
+            const iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
+            if (iframe) {
+                if (iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
+                    destroyDevTools(currentTab);
+                }
+                else {
+                    createDevTools(currentTab);
+                }
+            }
+            else {
+                if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
+                    destroyDevTools();
+                }
+                else {
+                    createDevTools();
+                }
+            }
+        }
+    })
+}
+
+function devTools() {
+    const currentTab = getCurrentTab();
+    const iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
+    if (iframe) {
+        if (iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
+            destroyDevTools(currentTab);
+        }
+        else {
+            createDevTools(currentTab);
+        }
+    }
+    else {
+        if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
+            destroyDevTools();
+        }
+        else {
+            createDevTools();
+        }
+    }
+}

src/public/js/eruda/rightClick.js

@@ -0,0 +1,112 @@
+function rightClick() {
+    event.preventDefault();
+    let menu = document.getElementById("rightClickMenu");
+    menu.style.display = "block";
+    menu.style.position = "absolute";
+    menu.style.visibility = "visible";
+    let x = event.clientX;
+    let y = event.clientY;
+    let w = window.innerWidth;
+    let h = window.innerHeight;
+    let menuW = menu.offsetWidth;
+    let menuH = menu.offsetHeight;
+    if (y < 86) {
+        menu.style.display = "none";
+        menu.style.position = "absolute";
+        menu.style.visibility = "hidden";
+        menu.style.left = "0px";
+        menu.style.top = "0px";
+        return;
+    }
+    if (x + menuW > w) {
+        x = w - menuW;
+    }
+    if (y + menuH > h) {
+        y = h - menuH;
+    }
+    menu.style.left = x + "px";
+    menu.style.top = y + "px"
+    return false
+}
+
+function hideRightClick() {
+    let menu = document.getElementById("rightClickMenu");
+    menu.style.display = "none";
+    menu.style.position = "absolute";
+    menu.style.visibility = "hidden";
+    menu.style.left = "0px";
+    menu.style.top = "0px";
+}
+
+function rightClickIframe(iframe) {
+    event.preventDefault();
+    let menu = document.getElementById("rightClickMenu");
+    menu.style.display = "block";
+    menu.style.position = "absolute";
+    menu.style.visibility = "visible";
+    let x = event.clientX;
+    let y = event.clientY;
+    let w = iframe.offsetWidth;
+    let h = iframe.offsetHeight;
+    let menuW = menu.offsetWidth;
+    let menuH = menu.offsetHeight;
+    if (y < 86) {
+        menu.style.display = "none";
+        menu.style.position = "absolute";
+        menu.style.visibility = "hidden";
+        menu.style.left = "0px";
+        menu.style.top = "0px";
+        return;
+    }
+    if (x + menuW > w) {
+        x = w - menuW;
+    }
+    if (y + menuH > h) {
+        y = h - menuH;
+    }
+    menu.style.left = x + "px";
+    menu.style.top = y + "px"
+    return false
+}
+
+
+function controls(iframeId) {
+    let back = document.getElementById("rcmb-back");
+    let forward = document.getElementById("rcmb-forward");
+    let reload = document.getElementById("rcmb-reload");
+    let inspect = document.getElementById("rcmb-inspect");
+
+    back.onclick = function () {
+        previousPage();
+    }
+    forward.onclick = function () {
+        nextPage();
+    }
+    reload.onclick = function () {
+        refreshPage();
+    }
+    inspect.onclick = function () {
+        if (iframeId) {
+            createDevTools(iframeId);
+        }
+        else {
+            createDevTools();
+        }
+    }
+}
+
+function addRightClickToIframe(currentIframeId) {
+    let iframe = document.querySelector(`[data-iframe-id="${currentIframeId}"]`);
+    iframe.contentDocument.oncontextmenu = function () {
+        rightClickIframe(iframe);
+    }
+    iframe.contentDocument.onclick = hideRightClick;
+    controls(currentIframeId);
+}
+
+function initRightClick() {
+    document.oncontextmenu = rightClick;
+    document.onclick = hideRightClick;
+    controls();
+    console.log("Right Click Handler Initialized");
+}

src/public/js/keyBinds.js

@@ -6,3 +6,9 @@ passwordKeybinds();
 
 // keybind located in ./controls.js 
 historySidebarKeybinds();
+
+// keybind located in ./eruda/create.js
+devToolsKeybinds();
+
+//keybind located in ./eruda/rightClick.js
+initRightClick();

src/public/js/tabs.js

@@ -95,6 +95,7 @@ function handoffToTABS(url) {
     let tabId = chromeTabs.activeTabEl.getAttribute('data-tab-id');
     iframe.setAttribute('data-iframe-id', tabId);
     document.body.appendChild(iframe);
+    addRightClickToIframe(tabId);
     isIframeLoaded();
     function resetOmniBox() {
         document.getElementById("uv-form").style.marginTop = "20px";

src/public/sass/style.scss

@@ -481,6 +481,61 @@
     }
 }
 
+#rightClickMenu {
+    display: none;
+    visibility: hidden;
+    background: var(--text-bg-color);
+    //height: 200px;
+    width: 150px;
+    z-index: 9999;
+    border-radius: 5px;
+    border: 1px solid var(--border-color);
+    display: flex;
+    align-items: left;
+    justify-content: top;
+    flex-direction: column;
+    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
+    #rcmb-back {
+        margin-top: 5px;
+    }
+    .rcmb {
+        width: 100%;
+        height: 30px;
+        border: none;
+        background: var(--text-bg-color);
+        color: var(--text-color);
+        text-align: left;
+        padding-left: 5px;
+        outline: none;
+        &:hover {
+            cursor: pointer;
+            background: var(--text-color);
+            color: var(--text-bg-color);
+            transition: 0.3s;
+        }
+        &:active {
+            opacity: 0.5;
+        }
+    }
+    .rcmb-separator {
+        width: 100%;
+        border-top: 1px solid var(--border-color);
+        margin-top: 2px;
+        margin-bottom: 10px;
+    }
+    #rcmb-inspect {
+        margin-bottom: 5px;
+        #rcmb-inspect-info {
+            font-size: 10px;
+            opacity: 0.5;
+            position: relative;
+            bottom: 12px;
+            left: 68px;
+            width: 0;
+        }
+    }
+}
+
 #games-container {
     position: absolute;
     z-index: 9999;

src/views/components/rightClickMenu.erb

@@ -0,0 +1,10 @@
+<div id="rightClickMenu">
+  <button class="rcmb" id="rcmb-back" type="button" name="back">Back</button>
+  <button class="rcmb" id="rcmb-forward" type="button" name="forward">Forward</button>
+  <button class="rcmb" id="rcmb-reload" type="button" name="reload">Reload</button>
+  <div class="rcmb-separator"></div>
+  <button class="rcmb" id="rcmb-inspect" type="button" name="inspect">
+    Inspect
+    <div id="rcmb-inspect-info">CTRL+SHIFT+I</div>
+  </button>
+</div>

src/views/index.erb

@@ -14,7 +14,9 @@
     12 => '<script src="js/games.js" defer></script>',
     13 => '<script src="js/omnibox.js" defer></script>',
     14 => '<script src="js/updates.js" defer></script>',
-    15 => '<script src="js/keyBinds.js" defer></script>',
+    15 => '<script src="js/eruda/create.js" defer></script>',
+    16 => '<script src="js/eruda/rightClick.js" defer></script>',
+    17 => '<script src="js/keyBinds.js" defer></script>',
   })
 %>
 <div class="chrome-tabs" style="--tab-content-margin: 9px">
@@ -96,3 +98,4 @@
 <% showComponent("games") %>
 <% showComponent("credit") %>
 <% showComponent("history") %>
+<% showComponent("rightClickMenu") %>