Skip to content

Commit 9a42dc2

Browse files
MotorTruck1221MotorTruck1221
authored
Merge pull request #22 from Ruby-Network/devtools
Add Devtools
2 parents 765c608 + ae6b298 commit 9a42dc2

9 files changed

Lines changed: 274 additions & 2 deletions

File tree

‎src/public/css/style.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/public/js/controls.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,10 @@ function updateSearch(value) {
115115
function isIframeLoaded() {
116116
let currentTab = getCurrentTab();
117117
let iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
118+
addRightClickToIframe(currentTab);
118119
updateTabDetail("Loading...", "loading.gif");
119120
iframe.addEventListener('load', function() {
121+
addRightClickToIframe(currentTab);
120122
updateTabDetail(iframe.contentWindow.document.title, iframe.contentWindow.document.querySelector('link[rel="icon"]') ? proxyOtherStuff(iframe.contentWindow.document.querySelector('link[rel="icon"]').href) : "favicon.ico", currentTab);
121123
updateURLBar(iframe.contentWindow.location.href);
122124
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‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
function createDevTools(currentIframeID) {
2+
if (currentIframeID) {
3+
const iframe = document.querySelector(`[data-iframe-id="${currentIframeID}"]`);
4+
const devTools = document.createElement('script');
5+
devTools.src = 'https://cdn.jsdelivr.net/npm/eruda';
6+
devTools.onload = () => {
7+
iframe.contentWindow.eruda.init();
8+
iframe.contentWindow.eruda.show();
9+
};
10+
iframe.contentDocument.body.appendChild(devTools);
11+
}
12+
else {
13+
const devTools = document.createElement('script');
14+
devTools.src = 'https://cdn.jsdelivr.net/npm/eruda';
15+
devTools.onload = () => {
16+
eruda.init();
17+
eruda.show();
18+
};
19+
document.body.appendChild(devTools);
20+
}
21+
}
22+
23+
function destroyDevTools(currentIframeID) {
24+
if (currentIframeID) {
25+
const iframe = document.querySelector(`[data-iframe-id="${currentIframeID}"]`);
26+
const devScript = iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]');
27+
iframe.contentWindow.eruda.destroy();
28+
devScript.remove();
29+
}
30+
else {
31+
const devScript = document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]');
32+
eruda.destroy();
33+
devScript.remove();
34+
}
35+
}
36+
37+
function devToolsKeybinds() {
38+
console.log("DevTools keybinds enabled");
39+
document.addEventListener('keydown', (e) => {
40+
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
41+
e.preventDefault();
42+
const currentTab = getCurrentTab();
43+
const iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
44+
if (iframe) {
45+
if (iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
46+
destroyDevTools(currentTab);
47+
}
48+
else {
49+
createDevTools(currentTab);
50+
}
51+
}
52+
else {
53+
if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
54+
destroyDevTools();
55+
}
56+
else {
57+
createDevTools();
58+
}
59+
}
60+
}
61+
})
62+
}
63+
64+
function devTools() {
65+
const currentTab = getCurrentTab();
66+
const iframe = document.querySelector(`[data-iframe-id="${currentTab}"]`);
67+
if (iframe) {
68+
if (iframe.contentDocument.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
69+
destroyDevTools(currentTab);
70+
}
71+
else {
72+
createDevTools(currentTab);
73+
}
74+
}
75+
else {
76+
if (document.querySelector('script[src="https://cdn.jsdelivr.net/npm/eruda"]')) {
77+
destroyDevTools();
78+
}
79+
else {
80+
createDevTools();
81+
}
82+
}
83+
}

‎src/public/js/eruda/rightClick.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
function rightClick() {
2+
event.preventDefault();
3+
let menu = document.getElementById("rightClickMenu");
4+
menu.style.display = "block";
5+
menu.style.position = "absolute";
6+
menu.style.visibility = "visible";
7+
let x = event.clientX;
8+
let y = event.clientY;
9+
let w = window.innerWidth;
10+
let h = window.innerHeight;
11+
let menuW = menu.offsetWidth;
12+
let menuH = menu.offsetHeight;
13+
if (y < 86) {
14+
menu.style.display = "none";
15+
menu.style.position = "absolute";
16+
menu.style.visibility = "hidden";
17+
menu.style.left = "0px";
18+
menu.style.top = "0px";
19+
return;
20+
}
21+
if (x + menuW > w) {
22+
x = w - menuW;
23+
}
24+
if (y + menuH > h) {
25+
y = h - menuH;
26+
}
27+
menu.style.left = x + "px";
28+
menu.style.top = y + "px"
29+
return false
30+
}
31+
32+
function hideRightClick() {
33+
let menu = document.getElementById("rightClickMenu");
34+
menu.style.display = "none";
35+
menu.style.position = "absolute";
36+
menu.style.visibility = "hidden";
37+
menu.style.left = "0px";
38+
menu.style.top = "0px";
39+
}
40+
41+
function rightClickIframe(iframe) {
42+
event.preventDefault();
43+
let menu = document.getElementById("rightClickMenu");
44+
menu.style.display = "block";
45+
menu.style.position = "absolute";
46+
menu.style.visibility = "visible";
47+
let x = event.clientX;
48+
let y = event.clientY;
49+
let w = iframe.offsetWidth;
50+
let h = iframe.offsetHeight;
51+
let menuW = menu.offsetWidth;
52+
let menuH = menu.offsetHeight;
53+
if (y < 86) {
54+
menu.style.display = "none";
55+
menu.style.position = "absolute";
56+
menu.style.visibility = "hidden";
57+
menu.style.left = "0px";
58+
menu.style.top = "0px";
59+
return;
60+
}
61+
if (x + menuW > w) {
62+
x = w - menuW;
63+
}
64+
if (y + menuH > h) {
65+
y = h - menuH;
66+
}
67+
menu.style.left = x + "px";
68+
menu.style.top = y + "px"
69+
return false
70+
}
71+
72+
73+
function controls(iframeId) {
74+
let back = document.getElementById("rcmb-back");
75+
let forward = document.getElementById("rcmb-forward");
76+
let reload = document.getElementById("rcmb-reload");
77+
let inspect = document.getElementById("rcmb-inspect");
78+
79+
back.onclick = function () {
80+
previousPage();
81+
}
82+
forward.onclick = function () {
83+
nextPage();
84+
}
85+
reload.onclick = function () {
86+
refreshPage();
87+
}
88+
inspect.onclick = function () {
89+
if (iframeId) {
90+
createDevTools(iframeId);
91+
}
92+
else {
93+
createDevTools();
94+
}
95+
}
96+
}
97+
98+
function addRightClickToIframe(currentIframeId) {
99+
let iframe = document.querySelector(`[data-iframe-id="${currentIframeId}"]`);
100+
iframe.contentDocument.oncontextmenu = function () {
101+
rightClickIframe(iframe);
102+
}
103+
iframe.contentDocument.onclick = hideRightClick;
104+
controls(currentIframeId);
105+
}
106+
107+
function initRightClick() {
108+
document.oncontextmenu = rightClick;
109+
document.onclick = hideRightClick;
110+
controls();
111+
console.log("Right Click Handler Initialized");
112+
}

‎src/public/js/keyBinds.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,9 @@ passwordKeybinds();
66

77
// keybind located in ./controls.js
88
historySidebarKeybinds();
9+
10+
// keybind located in ./eruda/create.js
11+
devToolsKeybinds();
12+
13+
//keybind located in ./eruda/rightClick.js
14+
initRightClick();

‎src/public/js/tabs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ function handoffToTABS(url) {
9595
let tabId = chromeTabs.activeTabEl.getAttribute('data-tab-id');
9696
iframe.setAttribute('data-iframe-id', tabId);
9797
document.body.appendChild(iframe);
98+
addRightClickToIframe(tabId);
9899
isIframeLoaded();
99100
function resetOmniBox() {
100101
document.getElementById("uv-form").style.marginTop = "20px";

‎src/public/sass/style.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -481,6 +481,61 @@
481481
}
482482
}
483483

484+
#rightClickMenu {
485+
display: none;
486+
visibility: hidden;
487+
background: var(--text-bg-color);
488+
//height: 200px;
489+
width: 150px;
490+
z-index: 9999;
491+
border-radius: 5px;
492+
border: 1px solid var(--border-color);
493+
display: flex;
494+
align-items: left;
495+
justify-content: top;
496+
flex-direction: column;
497+
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
498+
#rcmb-back {
499+
margin-top: 5px;
500+
}
501+
.rcmb {
502+
width: 100%;
503+
height: 30px;
504+
border: none;
505+
background: var(--text-bg-color);
506+
color: var(--text-color);
507+
text-align: left;
508+
padding-left: 5px;
509+
outline: none;
510+
&:hover {
511+
cursor: pointer;
512+
background: var(--text-color);
513+
color: var(--text-bg-color);
514+
transition: 0.3s;
515+
}
516+
&:active {
517+
opacity: 0.5;
518+
}
519+
}
520+
.rcmb-separator {
521+
width: 100%;
522+
border-top: 1px solid var(--border-color);
523+
margin-top: 2px;
524+
margin-bottom: 10px;
525+
}
526+
#rcmb-inspect {
527+
margin-bottom: 5px;
528+
#rcmb-inspect-info {
529+
font-size: 10px;
530+
opacity: 0.5;
531+
position: relative;
532+
bottom: 12px;
533+
left: 68px;
534+
width: 0;
535+
}
536+
}
537+
}
538+
484539
#games-container {
485540
position: absolute;
486541
z-index: 9999;

‎src/views/components/rightClickMenu.erb‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div id="rightClickMenu">
2+
<button class="rcmb" id="rcmb-back" type="button" name="back">Back</button>
3+
<button class="rcmb" id="rcmb-forward" type="button" name="forward">Forward</button>
4+
<button class="rcmb" id="rcmb-reload" type="button" name="reload">Reload</button>
5+
<div class="rcmb-separator"></div>
6+
<button class="rcmb" id="rcmb-inspect" type="button" name="inspect">
7+
Inspect
8+
<div id="rcmb-inspect-info">CTRL+SHIFT+I</div>
9+
</button>
10+
</div>

‎src/views/index.erb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
12 => '<script src="js/games.js" defer></script>',
1515
13 => '<script src="js/omnibox.js" defer></script>',
1616
14 => '<script src="js/updates.js" defer></script>',
17-
15 => '<script src="js/keyBinds.js" defer></script>',
17+
15 => '<script src="js/eruda/create.js" defer></script>',
18+
16 => '<script src="js/eruda/rightClick.js" defer></script>',
19+
17 => '<script src="js/keyBinds.js" defer></script>',
1820
})
1921
%>
2022
<div class="chrome-tabs" style="--tab-content-margin: 9px">
@@ -96,3 +98,4 @@
9698
<% showComponent("games") %>
9799
<% showComponent("credit") %>
98100
<% showComponent("history") %>
101+
<% showComponent("rightClickMenu") %>

0 commit comments

Comments
 (0)