pinokiod 1.3.28 → 1.3.29

package/server/views/browser-experimental.ejs

@@ -12,6 +12,7 @@
 <link href="/style.css" rel="stylesheet"/>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
+<script src="/nav.js"></script>
 <script src="/opener.js"></script>
 <script src="/report.js"></script>
 <script src="/normalize.js"></script>
@@ -30,7 +31,9 @@
   display: none;
   height: 40px;
   object-fit: contain;
+  /*
   border-radius: 20px
+  */
 }
 #menu.margin {
   padding: 15px;
@@ -47,6 +50,7 @@ html, body {
   margin: 0;
 }
 body {
+  display: flex;
 }
 .menu {
   overflow: auto;
@@ -58,6 +62,7 @@ body.dark .m {
   border-top: 1px solid rgba(0,0,0,0.04);
 }
 .container {
+  position: relative;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -200,17 +205,18 @@ body.dark .app-info > * {
   display: flex;
   */
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
 }
 .footer > * {
-  padding: 20px !important;
+  padding: 10px !important;
   display: block;
   box-sizing: border-box;
-  font-size: 14px !important;
+  font-size: 12px !important;
   text-align: center;
 }
 .footer i {
   margin: 0 !important;
+  padding: 5px;
 }
 .footer a {
   font-size: 14px;
@@ -329,10 +335,18 @@ body.dark nav {
 /*
   border-bottom: 1px solid rgba(255,255,255,0.04);
   */
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  border-top: 1px solid rgba(255,255,255,0.04);
+}
+.container:hover nav {
+  display: block;
 }
 nav {
+  display: none;
   background: white;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   /*
   padding: 5px;
   */
@@ -342,7 +356,7 @@ nav {
   /*
   border-bottom: 1px solid rgba(0,0,0,0.04);
   */
-  border-bottom: 1px solid rgba(0,0,0,0.04);
+  border-top: 1px solid rgba(0,0,0,0.04);
   box-sizing: border-box;
 }
 body.dark nav .btn2 {
@@ -439,6 +453,13 @@ body.dark .loader-container {
 #menu-mobile {
   display: none;
 }
+.tabmenu .label {
+  padding: 10px;
+  border-bottom: 1px solid rgba(255,255,255,0.04);
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: bold;
+}
 @media only screen and (max-width: 480px) {
   nav .btn2 {
     width: auto !important;
@@ -483,17 +504,15 @@ body.dark .loader-container {
 </style>
 </head>
 <body class='<%=theme%>' data-platform="<%=platform%>">
-<nav class='active'>
-    <a class='header-item logo' href="/"><i class="fa-solid fa-house"></i></a>
-    <!--
-    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Help</div></a>
-    -->
-    <div class='flexible'></div>
-    <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Help</div></a>
-    <a class='header-item logo' href="/?mode=settings"><i class="fa-solid fa-gear"></i></a>
-    <button id='new-window' title='open a new window'><i class="fa-solid fa-plus"></i></button>
-</nav>
-<main>
+<aside class='active'>
+  <!--
+  <div class='footer'>
+    <button class='btn header-item' id='clone-tab'><i class='fa-regular fa-copy'></i></button>
+    <a class='btn header-item' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i></a>
+    <button class='btn header-item' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
+    <div id='new-tab' class='btn header-item'><i class="fa-solid fa-plus"></i></div>
+  </div>
+  -->
   <div class='header-top header-item'>
     <div class='app-info'>
       <% if (config.icon) { %>
@@ -527,13 +546,74 @@ body.dark .loader-container {
       </a>
     <%})%>
   </div>
+  <div class='flexible'></div>
+  <!--
+  <div class='tabmenu'>
+    <div id='new-tab' class='btn header-item'><div class='tab'><i class="fa-solid fa-plus"></i> New</div></div>
+    <button class='btn header-item' id='clone-tab'><div class='tab'><i class='fa-regular fa-copy'></i> Clone</div></button>
+    <a class='btn header-item' id='open-browser' target="_blank" href="" features="browser"><div class='tab'><i class="fa-solid fa-square-arrow-up-right"></i> Popout</div></a>
+    <button class='btn header-item' id='reload'><div class='tab'><i class="fa-solid fa-rotate-right"></i> Refresh</div></button>
+  </div>
+  -->
+  <div class='grid-btns'>
+    <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>help</div></a>
+    <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>config</div></a>
+    <a class='btn2' href="/"><div><i class="fa-solid fa-house"></i></div><div>home</div></a>
+    <button class='btn2' id='new-window' title='open a new window'><div><i class="fa-solid fa-plus"></i></div><div> window</div></button>
+  </div>
   <!--
-  <div id='new-tab' class='btn header-item'>
-    <i class="fa-solid fa-plus"></i>
+  <div class='grid-btns'>
+    <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
+    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
+    <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
+    <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
   </div>
   -->
-  <div class='flexible'></div>
-</main>
+</aside>
+<div class='container'>
+  <nav>
+    <div class='bar'>
+      <button class='btn2' id='menu-mobile'><i class="fa-solid fa-bars"></i></button>
+      <button class='btn2' id='menu'>
+        <img src="<%=rawpath%>/<%=config.icon%>?raw=true"/>
+        <i class="fa-solid fa-arrow-right-to-bracket fa-rotate-180"></i>
+      </button>
+      <% if (agent === "electron") { %>
+        <button class='btn2' id='back'><i class="fa-solid fa-chevron-left"></i></button>
+        <button class='btn2' id='forward'><i class="fa-solid fa-chevron-right"></i></button>
+      <% } %>
+      <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
+      <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
+      <button class='btn2' id='reload'><i class="fa-solid fa-rotate-right"></i> Refresh</button>
+      <div id='new-tab' class='btn2'><i class="fa-solid fa-plus"></i> New</div>
+      <!--
+      <button class='btn2 logo' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
+      -->
+      <input type='url' id='location' readonly>
+      <!--
+      <div id='location'></div>
+      -->
+    </div>
+    <!--
+    <div class='flexible'></div>
+    <a class='btn2' href="/?mode=explore"><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
+    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
+    <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
+    <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
+    -->
+  </nav>
+  <main class='browserview'>
+    <% if (false) { %>
+      <% if (config.menu) { %>
+        <% config.menu.forEach((item) => { %>
+          <% if (item.btn && item.src) { %>
+            <iframe name='<%=item.src%>' class='hidden'></iframe>
+          <% } %>
+        <% }) %>
+      <% } %>
+    <% } %>
+  </main>
+</div>
 <script>
 let loaded = {}
 let cursorIndex = 0;
@@ -587,47 +667,92 @@ const renderCursor = () => {
   console.log({ cursorIndex, target })
   target.classList.add("cursor")
 }
+const nav = (type) => {
+  let targetFrame = document.querySelector("iframe:not(.hidden)")
+  if (type === "back") {
+//    targetFrame.contentWindow.history.back()
+    targetFrame.contentWindow.postMessage({
+      action: "back"
+    }, "*")
+  } else if (type === "forward") {
+//    targetFrame.contentWindow.history.forward()
+    targetFrame.contentWindow.postMessage({
+      action: "forward"
+    }, "*")
+  }
+
+
+
+//  if (location.hash && location.hash.length > 0) {
+////    let id = getTarget(location.hash.slice(1))
+////    let target = document.querySelector("aside [target='" + id + "']")
+//    let id = location.hash.slice(1)
+//    let type = id[0]
+//    let index = id.slice(1)
+//    let target = document.querySelector(`aside .${type} [data-index='${index}']`)
+//    let targetFrame = document.querySelector(`iframe[name='${target.target}']`)
+//    console.log({ target, targetFrame })
+//    if (type === "back") {
+//      targetFrame.contentWindow.history.back()
+//    } else if (type === "forward") {
+//      targetFrame.contentWindow.history.forward()
+//    }
+//    /*
+//    targetFrame.contentWindow.postMessage({
+//      action: type
+//    }, "*")
+//    */
+//  }
+}
 const renderSelection = (e, force) => {
   console.log("# 1")
-  if (location.hash && location.hash.length > 0) {
+  // if the menu has a default item, or if the url specifies a selection
+  let selection = document.querySelector("[data-default]")
+  if (selection || location.hash && location.hash.length > 0) {
     console.log("# 2")
-//    document.querySelector(".bar").classList.remove("hidden")
-    //let id = getTarget(location.hash.slice(1))
-    let id = location.hash.slice(1)
 
 
-    let selector
-    if (id.startsWith("@")) {
-      selector = `aside [target='${id.slice(1)}']`
+    let target
+    if (selection) {
+      target = selection
     } else {
-      let type = id[0]
-      let index = id.slice(1)
-      console.log({ type, index })
-      selector = `aside .${type} [data-index='${index}']`
-    }
+  //    document.querySelector(".bar").classList.remove("hidden")
+      //let id = getTarget(location.hash.slice(1))
+      let id = location.hash.slice(1)
 
 
-    // select the selected link
-//    document.querySelectorAll(".frame-link").forEach((el) => {
-//      el.classList.remove("selected")
-//    })
+      let selector
+      if (id.startsWith("@")) {
+        selector = `aside [target='${id.slice(1)}']`
+      } else {
+        let type = id[0]
+        let index = id.slice(1)
+        console.log({ type, index })
+        selector = `aside .${type} [data-index='${index}']`
+      }
 
 
+      // select the selected link
+  //    document.querySelectorAll(".frame-link").forEach((el) => {
+  //      el.classList.remove("selected")
+  //    })
 
-//    const target = document.querySelector(`[target='${id}']`)
 
 
-    let target
-    if (e) {
-      // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
-      if (e.target.classList.contains("frame-link")) {
-        target = e.target
+  //    const target = document.querySelector(`[target='${id}']`)
+
+
+      if (e) {
+        // If the renderSelection is triggered by an event, look for the frame-link that's triggering the event
+        if (e.target.classList.contains("frame-link")) {
+          target = e.target
+        } else {
+          target = e.target.closest(".frame-link")
+        }
       } else {
-        target = e.target.closest(".frame-link")
+        // if not triggered by an event, look for the target from the location hash
+        target = document.querySelector(selector)
       }
-    } else {
-      // if not triggered by an event, look for the target from the location hash
-      target = document.querySelector(selector)
     }
 
 
@@ -644,11 +769,11 @@ const renderSelection = (e, force) => {
       // maximize container
       // minimize aside
 
-//      document.querySelector(".container").classList.add("active")
-//      document.querySelector("aside").classList.remove("active")
+      document.querySelector(".container").classList.add("active")
+      document.querySelector("aside").classList.remove("active")
     } else {
-//      document.querySelector(".container").classList.remove("active")
-//      document.querySelector("aside").classList.add("active")
+      document.querySelector(".container").classList.remove("active")
+      document.querySelector("aside").classList.add("active")
     }
 
     if (target) {
@@ -659,8 +784,8 @@ const renderSelection = (e, force) => {
       let url = target.href
       console.log("> url", url)
       document.querySelector("#open-browser").href = url
-//      document.querySelector("#clone-tab").setAttribute("data-href", url)
-//      document.querySelector("#location").value = url
+      document.querySelector("#clone-tab").setAttribute("data-href", url)
+      document.querySelector("#location").value = url
 
 
       // select the selected target element (tab)
@@ -679,14 +804,18 @@ const renderSelection = (e, force) => {
       // 2. if it's soft (".s")
       //    find using the name attribute
       let targetFrame;
+      console.log("> A")
       if (target.closest(".h")) {
+        console.log("> B")
         let hardFrames = document.querySelectorAll(".browserview iframe[name^='@']")
-        let port = new URL(target.href).port
+        let port = new URL(target.href).port || 80
         for(let frame of hardFrames) {
+          console.log("> C")
           console.log({ src: frame.src, href: target.href, target: target.target })
           // Types of links in the tab
-          if (String(port) === "42000") {
-            // 1. running from 42000 => find a frame whose base URL matches the tab's base URL
+          if (String(port) === "<%=port%>") {
+            console.log("> D")
+            // 1. running from <%=port%> => find a frame whose base URL matches the tab's base URL
             // Pinokio links
             let targetPath = new URL(target.href).pathname
             let framePath = new URL(frame.src).pathname
@@ -699,6 +828,7 @@ const renderSelection = (e, force) => {
             }
           } else {
             // 2. rest => find the frame whose src exactly matches the tab's url
+            console.log("> E")
             if (target.href === frame.src) {
               frame.name = target.target
               targetFrame = frame
@@ -712,6 +842,7 @@ const renderSelection = (e, force) => {
       } else if (target.closest(".n")) {
         targetFrame = document.querySelector(`iframe[name='${target.target}']`)
       }
+      console.log("targetFrame", targetFrame)
 
 
       /*
@@ -738,6 +869,7 @@ const renderSelection = (e, force) => {
       */
 
       if (targetFrame) {
+        console.log("> F")
         targetFrame.classList.remove("hidden")
         let mode = target.getAttribute("data-mode")
         if (mode === "refresh") {
@@ -883,50 +1015,73 @@ const renderSelection = (e, force) => {
     }
   } else {
     console.log("# 14")
-    //document.querySelector(".container").classList.remove("active")
-    //document.querySelector("aside").classList.add("active")
+    document.querySelector(".container").classList.remove("active")
+    document.querySelector("aside").classList.add("active")
+
   }
 }
 console.log("loaded before", loaded)
 renderSelection()
 //renderCursor()
 console.log("loaded after", loaded)
-//document.querySelector("#new-tab").addEventListener("click", async (e) => {
-//  const u = prompt("url")
-//
-//  if (u) {
-//    let url
-//    if (/^[ ]*http:/i.test(u)) {
-//      url = u
-//    } else if (/^[ ]*https:/i.test(u)) {
-//      url = u
-//    } else {
-//      let o = {}
-//      if (/^[0-9.:]/.test(u)) {
-//        o.forceHttp = true
-//      } else if (/^localhost/.test(u)) {
-//        o.forceHttp = true
-//      } else {
-//        o.forceHttps = true
-//      }
-//      url = normalizeURL(u, o)
-//    }
-//
-//    if (url && url.trim().length > 0) {
-//      console.log("url", url)
-//      const { tab, frame } = await addTab(url)
-//      tab.click()
-//    }
-//  }
-//})
-//document.querySelector("#clone-tab").addEventListener("click", async (e) => {
-//  const url = document.querySelector("#clone-tab").getAttribute("data-href")
-//  if (url && url.trim().length > 0) {
-//    console.log("url", url)
-//    const { tab, frame } = await addTab(url)
-//    tab.click()
-//  }
-//})
+//Reporter()
+document.querySelector("#reload").addEventListener("click", (e) => {
+/*
+  // get selected
+  let target = document.querySelector(".selected").target
+  location.hash = target
+  // force refresh
+  renderSelection(null, true)
+  */
+  let frame = document.querySelector("iframe:not(.hidden)")
+  frame.src = frame.src
+//  frame.contentWindow.location.reload();
+})
+<% if (agent === "electron") { %>
+  document.querySelector("#back").addEventListener("click", (e) => {
+    nav("back")
+  })
+  document.querySelector("#forward").addEventListener("click", (e) => {
+    nav("forward")
+  })
+<% } %>
+
+document.querySelector("#new-tab").addEventListener("click", async (e) => {
+  const u = prompt("url")
+
+  if (u) {
+    let url
+    if (/^[ ]*http:/i.test(u)) {
+      url = u
+    } else if (/^[ ]*https:/i.test(u)) {
+      url = u
+    } else {
+      let o = {}
+      if (/^[0-9.:]/.test(u)) {
+        o.forceHttp = true
+      } else if (/^localhost/.test(u)) {
+        o.forceHttp = true
+      } else {
+        o.forceHttps = true
+      }
+      url = normalizeURL(u, o)
+    }
+
+    if (url && url.trim().length > 0) {
+      console.log("url", url)
+      const { tab, frame } = await addTab(url)
+      tab.click()
+    }
+  }
+})
+document.querySelector("#clone-tab").addEventListener("click", async (e) => {
+  const url = document.querySelector("#clone-tab").getAttribute("data-href")
+  if (url && url.trim().length > 0) {
+    console.log("url", url)
+    const { tab, frame } = await addTab(url)
+    tab.click()
+  }
+})
 
 const syncTabs = async () => {
   let tabs = []
@@ -949,39 +1104,39 @@ const syncTabs = async () => {
     })
   })
 }
-//const addTab = async (url) => {
-//  let item = document.createElement("a")
-//  //let id = "ts" + Date.now()
-//  let index = document.querySelectorAll("aside .s .frame-link").length
-//
-//  let id = "s" + index
-////  let id = url
-//  item.target = id
-//  item.href = url
-//  item.setAttribute("data-index", index)
-//  item.className = "btn header-item frame-link"
-//  item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
-//
-//  document.querySelector(".temp-menu").appendChild(item)
-//
-//  let frame = document.createElement("iframe")
-//  frame.name = id
-//  frame.src = item.href
-//  frame.setAttribute(
-//    "allow", 
-//    "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
-//  )
-//  document.querySelector("main").appendChild(frame)
-//
-//  await syncTabs()
-//
-//
-//  return {
-//    tab: item,
-//    frame
-//  }
-//
-//}
+const addTab = async (url) => {
+  let item = document.createElement("a")
+  //let id = "ts" + Date.now()
+  let index = document.querySelectorAll("aside .s .frame-link").length
+
+  let id = "s" + index
+//  let id = url
+  item.target = id
+  item.href = url
+  item.setAttribute("data-index", index)
+  item.className = "btn header-item frame-link"
+  item.innerHTML = `<div class='tab'><i class="fa-solid fa-link"></i><div class='display'>${url}</div><div class='flexible'></div><button class='btn2 del'><i class="fa-solid fa-xmark"></i></button></div>`
+
+  document.querySelector(".temp-menu").appendChild(item)
+
+  let frame = document.createElement("iframe")
+  frame.name = id
+  frame.src = item.href
+  frame.setAttribute(
+    "allow", 
+    "clipboard-read *; clipboard-write *; accelerometer *; ambient-light-sensor *; autoplay *; battery *; camera *; display-capture *; gamepad *; geolocation *; gyroscope *; hid *; identity-credentials-get *; microphone *; midi *; otp-credentials *; serial *;"
+  )
+  document.querySelector("main").appendChild(frame)
+
+  await syncTabs()
+
+
+  return {
+    tab: item,
+    frame
+  }
+
+}
 
 
 
@@ -1043,124 +1198,124 @@ document.querySelector("#delete").addEventListener("click", async (e) => {
   } else {
   }
 })
-//document.querySelector("aside").addEventListener("click", async (e) => {
-//  let target
-//
-//
-//  // delete
-//  if (e.target.classList.contains("del")) {
-//    target = e.target
-//  } else {
-//    target = e.target.closest(".del")
-//  }
-//
-//  if (target) {
-//    e.preventDefault()
-//    e.stopPropagation()
-//    // Delete
-//    // delete link
-//    let el = target.closest(".frame-link")
-//    console.log("target", el.target)
-//    let iframe = document.querySelector("iframe[name='" + el.target + "']")
-//    console.log("iframe", iframe)
-//    if (iframe) {
-//      // delete iframe
-//      iframe.remove()
-//    }
-//    el.remove()
-//    // update tabs
-//    await syncTabs()
-//
-//  } else {
-//    // Select
-//    if (e.target.classList.contains("frame-link")) {
-//      target = e.target
-//    } else {
-//      target = e.target.closest(".frame-link")
-//    }
-//
-//
-//
-//    if (target) {
-//
-//      // if data-confirm exists, ask for confirmation
-//      // if not, then just go forward
-//      let confirmText = target.getAttribute("data-confirm")
-//      if (confirmText && confirmText.length > 0) {
-//        const confirmed = confirm(confirmText)
-//        console.log('confirmed', confirmed)
-//        if (!confirmed) {
-//          e.preventDefault()
-//          e.stopPropagation()
-//          return
-//        }
-//      }
-//
-//      if (target.getAttribute("data-action")) {
-//        let actionStr = target.getAttribute("data-action")
-//        let action = JSON.parse(actionStr)
-//        console.log("action", action)
-//        if (action.method === "stop" && action.uri) {
-//          let socket = new Socket()
-//          socket.run({
-//            method: "kernel.api.stop",
-//            params: {
-//              uri: action.uri//"~" + location.pathname
-//            }
-//          }, (packet) => {
-//            console.log("packet", packet)
-//            if (packet.type === "result") {
-//              socket.close()
-////              location.href = location.href
-//            }
-//          })
-//        }
-//      } else if (target.target === "_blank") {
-//        // nothing
-//      } else {
-//        if (target.classList.contains("reveal")) {
-//          // nested menu
-//          target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
-//          e.preventDefault()
-//          e.stopPropagation()
-//        } else {
-//          //location.hash = target.target
-//
-//
-//  //        let id = getTarget(target.getAttribute("href"))
-//  //        console.log("ID", id, target.href)
-//  //        location.hash = id
-//
-//          //location.hash = target.getAttribute("href")
-//
-//          if (target.closest(".h")) {
-//            location.hash = target.target
-//          } else {
-//            let index = target.getAttribute("data-index")
-//            let type = target.closest(".m").getAttribute("data-type")
-//
-//
-//            location.hash = type + index
-//          }
-//
-//          document.querySelectorAll(".frame-link").forEach((el) => {
-//            el.classList.remove("selected")
-//          })
-//          target.classList.add("selected")
-//
-//          renderSelection(e)
-//        }
-//      }
-//
-//
-//
-//
-//    }
-//  }
-//
-//
-//
-//})
+document.querySelector("aside").addEventListener("click", async (e) => {
+  let target
+
+
+  // delete
+  if (e.target.classList.contains("del")) {
+    target = e.target
+  } else {
+    target = e.target.closest(".del")
+  }
+
+  if (target) {
+    e.preventDefault()
+    e.stopPropagation()
+    // Delete
+    // delete link
+    let el = target.closest(".frame-link")
+    console.log("target", el.target)
+    let iframe = document.querySelector("iframe[name='" + el.target + "']")
+    console.log("iframe", iframe)
+    if (iframe) {
+      // delete iframe
+      iframe.remove()
+    }
+    el.remove()
+    // update tabs
+    await syncTabs()
+
+  } else {
+    // Select
+    if (e.target.classList.contains("frame-link")) {
+      target = e.target
+    } else {
+      target = e.target.closest(".frame-link")
+    }
+
+
+
+    if (target) {
+
+      // if data-confirm exists, ask for confirmation
+      // if not, then just go forward
+      let confirmText = target.getAttribute("data-confirm")
+      if (confirmText && confirmText.length > 0) {
+        const confirmed = confirm(confirmText)
+        console.log('confirmed', confirmed)
+        if (!confirmed) {
+          e.preventDefault()
+          e.stopPropagation()
+          return
+        }
+      }
+
+      if (target.getAttribute("data-action")) {
+        let actionStr = target.getAttribute("data-action")
+        let action = JSON.parse(actionStr)
+        console.log("action", action)
+        if (action.method === "stop" && action.uri) {
+          let socket = new Socket()
+          socket.run({
+            method: "kernel.api.stop",
+            params: {
+              uri: action.uri//"~" + location.pathname
+            }
+          }, (packet) => {
+            console.log("packet", packet)
+            if (packet.type === "result") {
+              socket.close()
+//              location.href = location.href
+            }
+          })
+        }
+      } else if (target.target === "_blank") {
+        // nothing
+      } else {
+        if (target.classList.contains("reveal")) {
+          // nested menu
+          target.closest(".nested-menu").querySelector(".submenu").classList.toggle("hidden")
+          e.preventDefault()
+          e.stopPropagation()
+        } else {
+          //location.hash = target.target
+
+
+  //        let id = getTarget(target.getAttribute("href"))
+  //        console.log("ID", id, target.href)
+  //        location.hash = id
+
+          //location.hash = target.getAttribute("href")
+
+          if (target.closest(".h")) {
+            location.hash = target.target
+          } else {
+            let index = target.getAttribute("data-index")
+            let type = target.closest(".m").getAttribute("data-type")
+
+
+            location.hash = type + index
+          }
+
+          document.querySelectorAll(".frame-link").forEach((el) => {
+            el.classList.remove("selected")
+          })
+          target.classList.add("selected")
+
+          renderSelection(e)
+        }
+      }
+
+
+
+
+    }
+  }
+
+
+
+})
 const refresh = async () => {
   console.log("REFRESH")
   await new Promise((resolve, reject) => {
@@ -1176,37 +1331,49 @@ const refresh = async () => {
   renderSelection()
 }
 window.addEventListener('message', (event) => {
-  console.log("Message received from the child: ", event.data); // Message received from child
-  if (event.data) {
-    if (event.data.action) {
-      if (event.data.action.type === "newtab") {
-        console.log("create tab", event.data.action.url) 
-//        addTab(event.data.action.url)
-      } else if (event.data.action.type === "title") {
-        console.log("title", event.data)
-      } else if (event.data.action.type === "location") {
-        let url = event.data.action.url
-        console.log({ action: event.data.action })
-        document.querySelector("#open-browser").href = url
-        //document.querySelector("#location").innerHTML = url
-        document.querySelector("#location").value = url
-      }
-    } else if (event.data.type) {
-      let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
-      console.log("asideHidden", asideHidden)
-      if (!asideHidden) {
-        // refresh only if aside 
-
-        if (event.data.type === 'disconnect') {
-          refresh()
-        } else {
-          refresh()
+
+  // only process the event it's coming from pinokio
+  console.log("EVENT", event)
+  let origin = event.origin
+  if (origin) {
+    let port = new URL(origin).port || 80
+    console.log("port", port)
+    if (String(port) === "<%=port%>") {
+      console.log("Message received from the child: ", event); // Message received from child
+      if (event.data) {
+        if (event.data.action) {
+          if (event.data.action.type === "newtab") {
+            console.log("create tab", event.data.action.url) 
+            addTab(event.data.action.url)
+          } else if (event.data.action.type === "title") {
+            console.log("title", event.data)
+          } else if (event.data.action.type === "location") {
+            let url = event.data.action.url
+            console.log({ action: event.data.action })
+            document.querySelector("#open-browser").href = url
+            //document.querySelector("#location").innerHTML = url
+            document.querySelector("#location").value = url
+          }
+        } else if (event.data.type) {
+          let asideHidden = (window.getComputedStyle(document.querySelector("aside")).display === "none")
+          console.log("asideHidden", asideHidden)
+          if (!asideHidden) {
+            // refresh only if aside 
+
+            if (event.data.type === 'disconnect') {
+              refresh()
+            } else {
+              refresh()
+            }
+          }
         }
+      } else {
+        refresh()
       }
     }
-  } else {
-    refresh()
   }
+
+
 });
 /*
 document.addEventListener("keydown", (e) => {