pinokiod 3.48.0 → 3.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/kernel/environment.js +6 -0
  2. package/package.json +1 -1
  3. package/server/index.js +37 -13
  4. package/server/public/common.js +85 -8
  5. package/server/public/style.css +15 -27
  6. package/server/public/urldropdown.css +174 -0
  7. package/server/public/urldropdown.js +396 -0
  8. package/server/public/window_storage.js +30 -0
  9. package/server/views/app.ejs +19 -27
  10. package/server/views/columns.ejs +59 -30
  11. package/server/views/connect.ejs +21 -1
  12. package/server/views/container.ejs +21 -1
  13. package/server/views/download.ejs +2 -0
  14. package/server/views/index.ejs +20 -1
  15. package/server/views/init/index.ejs +4 -0
  16. package/server/views/net.ejs +21 -1
  17. package/server/views/network.ejs +21 -1
  18. package/server/views/review.ejs +8 -0
  19. package/server/views/rows.ejs +61 -16
  20. package/server/views/screenshots.ejs +21 -1
  21. package/server/views/settings.ejs +22 -2
  22. package/server/views/setup.ejs +2 -0
  23. package/server/views/tools.ejs +21 -1
package/server/views/columns.ejs CHANGED
@@ -13,6 +13,18 @@ body {
13
13
  display: grid;
14
14
  grid-template-columns: var(--col0, 1fr) 6px var(--col1, 1fr);
15
15
  gap: 0px;
16
+ position: relative;
17
+ }
18
+ #dragger {
19
+ -webkit-app-region: drag;
20
+ cursor: drag;
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ right: 0;
25
+ height: 20px;
26
+ width: 100%;
27
+ z-index: 1000000000000;
16
28
  }
17
29
  body iframe {
18
30
  border: none;
@@ -54,8 +66,10 @@ body.resizing {
54
66
  .gutter:hover::before, body.resizing .gutter::before { background: #9e9e9e; }
55
67
  .gutter:focus { outline: none; box-shadow: inset 0 0 0 2px #90caf9; }
56
68
  </style>
69
+ <script src="/window_storage.js"></script>
57
70
  </head>
58
71
  <body class='<%=theme%>'>
72
+ <div id='dragger'></div>
59
73
  <iframe id='col0' data-src="<%=src%>"></iframe>
60
74
  <div id="gutter" class="gutter" tabindex="0" role="separator" aria-orientation="vertical" aria-label="Resize panels" aria-valuemin="120" aria-valuemax="0" aria-valuenow="0"></div>
61
75
  <iframe id='col1' data-src="<%=src%>"></iframe>
@@ -81,7 +95,6 @@ body.resizing {
81
95
  const urlKeyFor = (paneName) => `paneUrl:${paneName}`;
82
96
 
83
97
  function setColumns(leftPx) {
84
- console.log("setColumns", leftPx)
85
98
  document.body.style.gridTemplateColumns = `${leftPx}px ${GUTTER}px 1fr`;
86
99
  }
87
100
 
@@ -103,12 +116,11 @@ body.resizing {
103
116
  const total = computeTotal();
104
117
  if (total > 0) {
105
118
  const ratio = clamp(leftPx / total, 0, 1);
106
- try { sessionStorage.setItem(splitKey, String(ratio)); } catch (_) {}
119
+ windowStorage.setItem(splitKey, String(ratio));
107
120
  }
108
121
  }
109
122
 
110
123
  function applyFromRatio(ratio) {
111
- console.log("applyFromRatio", ratio)
112
124
  const total = computeTotal();
113
125
  let leftPx = clamp(Math.round(total * ratio), MIN, total - MIN);
114
126
  setColumns(leftPx);
@@ -118,7 +130,7 @@ body.resizing {
118
130
  // --- Per-window URL persistence for each pane ---
119
131
  function restorePaneURL(pane, key) {
120
132
  try {
121
- const saved = sessionStorage.getItem(key);
133
+ const saved = windowStorage.getItem(key);
122
134
  const fallback = pane.getAttribute('data-src') || pane.getAttribute('src') || '';
123
135
  const target = (saved && typeof saved === 'string') ? saved : fallback;
124
136
  if (target && pane.src !== target) pane.src = target;
@@ -130,7 +142,7 @@ body.resizing {
130
142
  const cw = pane.contentWindow;
131
143
  if (!cw) return;
132
144
  const notify = () => {
133
- try { sessionStorage.setItem(key, cw.location.href); } catch (_) {}
145
+ windowStorage.setItem(key, cw.location.href);
134
146
  };
135
147
  // Hook SPA navigations
136
148
  const _ps = cw.history.pushState;
@@ -143,7 +155,7 @@ body.resizing {
143
155
  else notify();
144
156
  } catch (err) {
145
157
  // Cross-origin: fall back to saving src only
146
- try { sessionStorage.setItem(key, pane.src); } catch (_) {}
158
+ windowStorage.setItem(key, pane.src);
147
159
  }
148
160
  }
149
161
  function onPaneLoadFactory(pane, key) {
@@ -170,7 +182,7 @@ body.resizing {
170
182
  let overlay = null;
171
183
 
172
184
  function refreshLayout (splitKey) {
173
- let val = sessionStorage.getItem(splitKey)
185
+ let val = windowStorage.getItem(splitKey)
174
186
  let id = splitKey.replace("splitRatio:", "")
175
187
  if (val === "1" || val === "0") {
176
188
  if (val === "1") {
@@ -180,8 +192,23 @@ body.resizing {
180
192
  }
181
193
  const el = document.querySelector(`iframe[name='${id_to_hide}']`)
182
194
  el.remove()
183
- document.body.className = "single"
184
- document.querySelector("#gutter").remove()
195
+ if (document.querySelector("#gutter")) {
196
+ document.querySelector("#gutter").remove()
197
+ }
198
+ let existing_iframe = document.querySelector("iframe")
199
+ if (existing_iframe) {
200
+ document.body.className = "single"
201
+ } else {
202
+ if (window.parent) {
203
+ // if all child iframes have been removed, remove self
204
+ window.parent.postMessage({
205
+ e: "close"
206
+ }, "*")
207
+ } else {
208
+ // if this is the top window, everything has been removed, so just redirect to home
209
+ location.href = "/"
210
+ }
211
+ }
185
212
  }
186
213
  }
187
214
 
@@ -262,25 +289,21 @@ body.resizing {
262
289
 
263
290
  // Initialize from saved ratio if available and set ARIA
264
291
  try {
265
- const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
266
- console.log({ saved })
292
+ const saved = parseFloat(windowStorage.getItem(splitKey) || '');
267
293
  if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
268
- console.log("> 1")
269
294
  applyFromRatio(saved);
270
295
  } else {
271
- console.log("> 2")
272
296
  updateAria(left.getBoundingClientRect().width, computeTotal());
273
297
  refreshLayout(splitKey)
274
298
  }
275
299
  } catch (_) {
276
- console.log("> 3")
277
300
  updateAria(left.getBoundingClientRect().width, computeTotal());
278
301
  }
279
302
 
280
303
  // Re-apply on window resize to keep ratio
281
304
  window.addEventListener('resize', () => {
282
305
  try {
283
- const saved = parseFloat(sessionStorage.getItem(splitKey) || '');
306
+ const saved = parseFloat(windowStorage.getItem(splitKey) || '');
284
307
  if (!Number.isNaN(saved) && saved > 0 && saved < 1) {
285
308
  applyFromRatio(saved);
286
309
  } else {
@@ -299,32 +322,27 @@ body.resizing {
299
322
 
300
323
  let sourceFrameId = null;
301
324
 
302
- if (event.source === col0.contentWindow) {
325
+ if (col0 && event.source === col0.contentWindow) {
303
326
  sourceFrameId = 'col0';
304
- } else if (event.source === col1.contentWindow) {
327
+ } else if (col1 && event.source === col1.contentWindow) {
305
328
  sourceFrameId = 'col1';
306
329
  }
307
-
308
- console.log('Message received from iframe:', sourceFrameId);
330
+
331
+ if (!sourceFrameId) {
332
+ windowStorage.removeItem(splitKey)
333
+ location.href = "/"
334
+ return
335
+ }
309
336
 
310
337
  // Or use this approach to loop through all iframes
311
338
  const iframes = document.querySelectorAll('iframe');
312
- console.log({ splitKey })
313
339
  for (let iframe of iframes) {
314
340
  if (event.source === iframe.contentWindow) {
315
- // const splitKey = `splitRatio:${iframe.name}`
316
- // console.log({ splitKey })
317
341
  if (iframe.id === "col0") {
318
- // hide col0 => ratio: 0
319
- // col0.src = "about:blank"
320
- // col0.style.display = "none"
321
- try { sessionStorage.setItem(splitKey, "0"); } catch (_) {}
342
+ windowStorage.setItem(splitKey, "0");
322
343
  refreshLayout(splitKey)
323
344
  } else if (iframe.id === "col1") {
324
- // hide col1 => ratio: 1
325
- // col1.src = "about:blank"
326
- // col1.style.display = "none"
327
- try { sessionStorage.setItem(splitKey, "1"); } catch (_) { console.log("<<< ", _ )}
345
+ windowStorage.setItem(splitKey, "1");
328
346
  refreshLayout(splitKey)
329
347
  }
330
348
  break;
@@ -333,6 +351,17 @@ body.resizing {
333
351
  }
334
352
  })
335
353
  })();
354
+ if (document.querySelector("#collapse") && window.windowStorage) {
355
+ document.querySelector("#collapse").addEventListener("click", (e) => {
356
+ document.body.classList.toggle("minimized")
357
+ let frame_key = window.frameElement?.name || "";
358
+ if (document.body.classList.contains("minimized")) {
359
+ windowStorage.setItem(frame_key + ":window_mode", "minimized")
360
+ } else {
361
+ windowStorage.setItem(frame_key + ":window_mode", "full")
362
+ }
363
+ })
364
+ }
336
365
  </script>
337
366
  </body>
338
367
  </html>
package/server/views/connect.ejs CHANGED
@@ -10,6 +10,7 @@
10
10
  <link href="/markdown.css" rel="stylesheet"/>
11
11
  <link href="/noty.css" rel="stylesheet"/>
12
12
  <link href="/style.css" rel="stylesheet"/>
13
+ <link href="/urldropdown.css" rel="stylesheet" />
13
14
  <% if (agent === "electron") { %>
14
15
  <link href="/electron.css" rel="stylesheet"/>
15
16
  <% } %>
@@ -732,12 +733,14 @@ body.dark .profile td {
732
733
  padding: 5px;
733
734
  }
734
735
 
736
+ /*
735
737
  @media only screen and (max-width: 800px) {
736
738
  body {
737
739
  display: flex !important;
738
740
  flex-direction: row !important;
739
741
  }
740
742
  }
743
+ */
741
744
  @media only screen and (max-width: 600px) {
742
745
  aside {
743
746
  width: unset;
@@ -785,6 +788,7 @@ body.dark .profile td {
785
788
  }
786
789
  }
787
790
  </style>
791
+ <script src="/window_storage.js"></script>
788
792
  <script src="/popper.min.js"></script>
789
793
  <script src="/tippy-bundle.umd.min.js"></script>
790
794
  <script src="/hotkeys.min.js"></script>
@@ -792,16 +796,32 @@ body.dark .profile td {
792
796
  <script src="/common.js"></script>
793
797
  <script src="/opener.js"></script>
794
798
  <script src="/nav.js"></script>
799
+ <script src="/urldropdown.js"></script>
800
+ <script>
801
+ // Initialize URL Dropdown with empty behavior for connect page
802
+ document.addEventListener('DOMContentLoaded', function() {
803
+ initUrlDropdown({
804
+ clearBehavior: 'empty'
805
+ });
806
+ });
807
+ </script>
795
808
  </head>
796
809
  <body class='<%=theme%>' data-agent="<%=agent%>">
797
810
  <header class='navheader grabbable'>
798
811
  <h1>
799
812
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
813
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
800
814
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
801
815
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
802
816
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
803
817
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
804
- <div class='flexible'></div>
818
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
819
+ <form class='urlbar'>
820
+ <div class='url-input-container'>
821
+ <input type='url' placeholder='enter a local url'>
822
+ <div class='url-dropdown' id='url-dropdown'></div>
823
+ </div>
824
+ </form>
805
825
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
806
826
  <div><i class="fa-solid fa-table-columns"></i></div>
807
827
  </a>
package/server/views/container.ejs CHANGED
@@ -11,6 +11,7 @@
11
11
  <link href="/markdown.css" rel="stylesheet"/>
12
12
  <link href="/noty.css" rel="stylesheet"/>
13
13
  <link href="/style.css" rel="stylesheet"/>
14
+ <link href="/urldropdown.css" rel="stylesheet" />
14
15
  <% if (agent === "electron") { %>
15
16
  <link href="/electron.css" rel="stylesheet"/>
16
17
  <% } %>
@@ -290,12 +291,14 @@ iframe {
290
291
  border: none;
291
292
  width: 100%;
292
293
  }
294
+ /*
293
295
  @media only screen and (max-width: 800px) {
294
296
  body {
295
297
  display: flex !important;
296
298
  flex-direction: row !important;
297
299
  }
298
300
  }
301
+ */
299
302
  </style>
300
303
  <script src="/popper.min.js"></script>
301
304
  <script src="/tippy-bundle.umd.min.js"></script>
@@ -323,11 +326,18 @@ iframe {
323
326
  <header class='navheader grabbable'>
324
327
  <h1>
325
328
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
329
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
326
330
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
327
331
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
328
332
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
329
333
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
330
- <form class='urlbar'><input type='url' placeholder='enter a local url' value="<%=src%>"></form>
334
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
335
+ <form class='urlbar'>
336
+ <div class='url-input-container'>
337
+ <input type='url' placeholder='enter a local url' value="<%=src%>">
338
+ <div class='url-dropdown' id='url-dropdown'></div>
339
+ </div>
340
+ </form>
331
341
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
332
342
  <div><i class="fa-solid fa-table-columns"></i></div>
333
343
  </a>
@@ -353,5 +363,15 @@ iframe {
353
363
  </h1>
354
364
  </header>
355
365
  <iframe src="<%=src%>"></iframe>
366
+ <script src="/urldropdown.js"></script>
367
+ <script>
368
+ // Initialize URL Dropdown with restore behavior
369
+ document.addEventListener('DOMContentLoaded', function() {
370
+ initUrlDropdown({
371
+ clearBehavior: 'restore',
372
+ defaultValue: '<%=src%>'
373
+ });
374
+ });
375
+ </script>
356
376
  </body>
357
377
  </html>
package/server/views/download.ejs CHANGED
@@ -88,12 +88,14 @@ body.frozen {
88
88
  .timestamp {
89
89
  color: rgba(0,0,0,0.5);
90
90
  }
91
+ /*
91
92
  @media only screen and (max-width: 800px) {
92
93
  body {
93
94
  display: flex !important;
94
95
  flex-direction: row !important;
95
96
  }
96
97
  }
98
+ */
97
99
  </style>
98
100
  <script src="/popper.min.js"></script>
99
101
  <script src="/tippy-bundle.umd.min.js"></script>
package/server/views/index.ejs CHANGED
@@ -14,6 +14,7 @@
14
14
  <link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
15
15
  <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
16
16
  <link href="/style.css" rel="stylesheet"/>
17
+ <link href="/urldropdown.css" rel="stylesheet" />
17
18
  <% if (agent === "electron") { %>
18
19
  <link href="/electron.css" rel="stylesheet"/>
19
20
  <% } %>
@@ -316,12 +317,14 @@ body.dark aside .current.selected {
316
317
  .container {
317
318
  margin-left: 20px;
318
319
  }
320
+ /*
319
321
  @media only screen and (max-width: 800px) {
320
322
  body {
321
323
  display: flex !important;
322
324
  flex-direction: row !important;
323
325
  }
324
326
  }
327
+ */
325
328
  @media only screen and (max-width: 600px) {
326
329
  aside {
327
330
  width: unset;
@@ -368,6 +371,7 @@ body.dark aside .current.selected {
368
371
  }
369
372
  }
370
373
  </style>
374
+ <script src="/window_storage.js"></script>
371
375
  <script src="/hotkeys.min.js"></script>
372
376
  <script src="/sweetalert2.js"></script>
373
377
  <script src="/noty.js"></script>
@@ -394,6 +398,7 @@ body.dark aside .current.selected {
394
398
  <script src="/filepond.min.js"></script>
395
399
  <script src="/fscreator.js"></script>
396
400
  <script src="/fseditor.js"></script>
401
+ <script src="/urldropdown.js"></script>
397
402
  </head>
398
403
  <body class='<%=theme%>' data-agent="<%=agent%>">
399
404
  <% if (error) { %>
@@ -410,11 +415,18 @@ body.dark aside .current.selected {
410
415
  <h1>
411
416
  <% if (ishome) { %>
412
417
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
418
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
413
419
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
414
420
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
415
421
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
416
422
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
417
- <form class='urlbar'><input type='url' placeholder='enter a local url'></form>
423
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
424
+ <form class='urlbar'>
425
+ <div class='url-input-container'>
426
+ <input type='url' placeholder='enter a local url'>
427
+ <div class='url-dropdown' id='url-dropdown'></div>
428
+ </div>
429
+ </form>
418
430
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
419
431
  <div><i class="fa-solid fa-table-columns"></i></div>
420
432
  </a>
@@ -1493,6 +1505,13 @@ if (document.querySelector("#cloudflare")) {
1493
1505
  }
1494
1506
  <% } %>
1495
1507
 
1508
+ // Initialize URL Dropdown with empty behavior
1509
+ document.addEventListener('DOMContentLoaded', function() {
1510
+ initUrlDropdown({
1511
+ clearBehavior: 'empty'
1512
+ });
1513
+ });
1514
+
1496
1515
  </script>
1497
1516
  <script src="/opener.js"></script>
1498
1517
  </body>
package/server/views/init/index.ejs CHANGED
@@ -1405,12 +1405,14 @@ aside .tab.selected {
1405
1405
  body.dark .ace-editor {
1406
1406
  border: 1px solid rgba(255,255,255,0.1);
1407
1407
  }
1408
+ /*
1408
1409
  @media only screen and (max-width: 800px) {
1409
1410
  body {
1410
1411
  display: flex !important;
1411
1412
  flex-direction: row !important;
1412
1413
  }
1413
1414
  }
1415
+ */
1414
1416
  @media only screen and (max-width: 600px) {
1415
1417
  aside {
1416
1418
  width: unset;
@@ -1482,6 +1484,7 @@ body.dark .ace-editor {
1482
1484
  <link href="/app.css" rel="stylesheet"/>
1483
1485
  <link href="/xterm.min.css" rel="stylesheet" />
1484
1486
  <script src="/hotkeys.min.js"></script>
1487
+ <script src="/window_storage.js"></script>
1485
1488
  <script src="/ace/ace.js"></script>
1486
1489
  <script src="/sweetalert2.js"></script>
1487
1490
  <script src="/nav.js"></script>
@@ -1514,6 +1517,7 @@ body.dark .ace-editor {
1514
1517
  <header class='navheader grabbable'>
1515
1518
  <h1>
1516
1519
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
1520
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
1517
1521
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
1518
1522
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
1519
1523
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
package/server/views/net.ejs CHANGED
@@ -14,6 +14,7 @@
14
14
  <link href="/filepond-plugin-image-preview.min.css" rel="stylesheet" />
15
15
  <link href="/filepond-plugin-image-edit.min.css" rel="stylesheet" />
16
16
  <link href="/style.css" rel="stylesheet"/>
17
+ <link href="/urldropdown.css" rel="stylesheet" />
17
18
  <% if (agent === "electron") { %>
18
19
  <link href="/electron.css" rel="stylesheet"/>
19
20
  <% } %>
@@ -428,12 +429,14 @@ body.dark .net .mark {
428
429
  color: silver !important;
429
430
  }
430
431
 
432
+ /*
431
433
  @media only screen and (max-width: 800px) {
432
434
  body {
433
435
  display: flex !important;
434
436
  flex-direction: row !important;
435
437
  }
436
438
  }
439
+ */
437
440
  @media only screen and (max-width: 600px) {
438
441
  aside {
439
442
  width: unset;
@@ -481,6 +484,7 @@ body.dark .net .mark {
481
484
  }
482
485
  }
483
486
  </style>
487
+ <script src="/window_storage.js"></script>
484
488
  <script src="/popper.min.js"></script>
485
489
  <script src="/tippy-bundle.umd.min.js"></script>
486
490
  <script src="/hotkeys.min.js"></script>
@@ -496,6 +500,15 @@ body.dark .net .mark {
496
500
  <script src="/common.js"></script>
497
501
  <script src="/opener.js"></script>
498
502
  <script src="/nav.js"></script>
503
+ <script src="/urldropdown.js"></script>
504
+ <script>
505
+ // Initialize URL Dropdown with empty behavior for net page
506
+ document.addEventListener('DOMContentLoaded', function() {
507
+ initUrlDropdown({
508
+ clearBehavior: 'empty'
509
+ });
510
+ });
511
+ </script>
499
512
  <script src="/fuse.js"></script>
500
513
  <script src="/report.js"></script>
501
514
  <script src="/filepond-plugin-file-validate-type.min.js"></script>
@@ -520,11 +533,18 @@ body.dark .net .mark {
520
533
  <header class='navheader grabbable'>
521
534
  <h1>
522
535
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
536
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
523
537
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
524
538
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
525
539
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
526
540
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
527
- <div class='flexible'></div>
541
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
542
+ <form class='urlbar'>
543
+ <div class='url-input-container'>
544
+ <input type='url' placeholder='enter a local url'>
545
+ <div class='url-dropdown' id='url-dropdown'></div>
546
+ </div>
547
+ </form>
528
548
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
529
549
  <div><i class="fa-solid fa-table-columns"></i></div>
530
550
  </a>
package/server/views/network.ejs CHANGED
@@ -11,6 +11,7 @@
11
11
  <link href="/markdown.css" rel="stylesheet"/>
12
12
  <link href="/noty.css" rel="stylesheet"/>
13
13
  <link href="/style.css" rel="stylesheet"/>
14
+ <link href="/urldropdown.css" rel="stylesheet" />
14
15
  <script src="/sweetalert2.js"></script>
15
16
  <script src="/commander.js"></script>
16
17
  <% if (agent === "electron") { %>
@@ -953,12 +954,14 @@ body.dark .troubleshoot {
953
954
  color: silver !important;
954
955
  }
955
956
 
957
+ /*
956
958
  @media only screen and (max-width: 800px) {
957
959
  body {
958
960
  display: flex !important;
959
961
  flex-direction: row !important;
960
962
  }
961
963
  }
964
+ */
962
965
  @media only screen and (max-width: 600px) {
963
966
  aside {
964
967
  width: unset;
@@ -1006,6 +1009,7 @@ body.dark .troubleshoot {
1006
1009
  }
1007
1010
  }
1008
1011
  </style>
1012
+ <script src="/window_storage.js"></script>
1009
1013
  <script src="/popper.min.js"></script>
1010
1014
  <script src="/tippy-bundle.umd.min.js"></script>
1011
1015
  <script src="/hotkeys.min.js"></script>
@@ -1013,16 +1017,32 @@ body.dark .troubleshoot {
1013
1017
  <script src="/common.js"></script>
1014
1018
  <script src="/opener.js"></script>
1015
1019
  <script src="/nav.js"></script>
1020
+ <script src="/urldropdown.js"></script>
1021
+ <script>
1022
+ // Initialize URL Dropdown with empty behavior for network page
1023
+ document.addEventListener('DOMContentLoaded', function() {
1024
+ initUrlDropdown({
1025
+ clearBehavior: 'empty'
1026
+ });
1027
+ });
1028
+ </script>
1016
1029
  </head>
1017
1030
  <body class='<%=theme%>' data-agent="<%=agent%>">
1018
1031
  <header class='navheader grabbable'>
1019
1032
  <h1>
1020
1033
  <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
1034
+ <button id='collapse' class='btn2' data-tippy-content="toggle fullscreen view"><i class="fa-solid fa-bars"></i></button>
1021
1035
  <button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
1022
1036
  <button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
1023
1037
  <button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
1024
1038
  <button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
1025
- <div class='flexible'></div>
1039
+ <button class='btn2 mobile-link-button' id='mobile-link-button' data-tippy-content="enter url"><i class="fa-solid fa-link"></i></button>
1040
+ <form class='urlbar'>
1041
+ <div class='url-input-container'>
1042
+ <input type='url' placeholder='enter a local url'>
1043
+ <div class='url-dropdown' id='url-dropdown'></div>
1044
+ </div>
1045
+ </form>
1026
1046
  <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
1027
1047
  <div><i class="fa-solid fa-table-columns"></i></div>
1028
1048
  </a>
package/server/views/review.ejs CHANGED
@@ -864,6 +864,14 @@ body.minimized #collapse {
864
864
  display: block;
865
865
  }
866
866
  }
867
+ @media only screen and (max-width: 800px) {
868
+ .mode-selector .btn2 {
869
+ width: unset;
870
+ }
871
+ .mode-selector .btn2 .caption {
872
+ display: none;
873
+ }
874
+ }
867
875
 
868
876
  @media only screen and (max-width: 480px) {
869
877
  nav .btn2 {