@jsenv/plugin-toolbar 0.0.1 → 0.1.0

package/src/client/toolbar_injector.js

@@ -1,8 +1,14 @@
-import { setAttributes, setStyles } from "./util/dom.js"
-
-const jsenvLogoSvgUrl = new URL("./jsenv_logo.svg", import.meta.url)
-
-export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
+const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url)
+
+export const injectToolbar = async ({
+  toolbarUrl,
+  logLevel,
+  theme,
+  opened,
+  autoreload,
+  animationsEnabled,
+  notificationsEnabled,
+}) => {
   if (document.readyState !== "complete") {
     await new Promise((resolve) => {
       window.addEventListener("load", resolve)
@@ -18,13 +24,11 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
   const placeholder = getToolbarPlaceholder()
 
   const iframe = document.createElement("iframe")
-  setAttributes(iframe, {
-    tabindex: -1,
-    // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
-    // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
-    allowtransparency: true,
-  })
-  setStyles(iframe, {
+  iframe.setAttribute("tabindex", -1)
+  iframe.setAttribute("allowtransparency", true)
+  // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
+  // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
+  Object.assign(iframe.style, {
     "position": "fixed",
     "zIndex": 1000,
     "bottom": 0,
@@ -33,42 +37,61 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
     "height": 0,
     /* ensure toolbar children are not focusable when hidden */
     "visibility": "hidden",
-    "transition-duration": "300ms",
+    "transition-duration": "0",
     "transition-property": "height, visibility",
     "border": "none",
   })
   const iframeLoadedPromise = iframeToLoadedPromise(iframe)
+  const toolbarUrlObject = new URL(toolbarUrl, window.location.href)
+  toolbarUrlObject.searchParams.set("logLevel", logLevel)
+  toolbarUrlObject.searchParams.set("theme", theme)
+  if (opened) {
+    toolbarUrlObject.searchParams.set("opened", "")
+  }
+  if (autoreload) {
+    toolbarUrlObject.searchParams.set("autoreload", "")
+  }
+  if (animationsEnabled) {
+    toolbarUrlObject.searchParams.set("animationsEnabled", "")
+  }
+  if (notificationsEnabled) {
+    toolbarUrlObject.searchParams.set("notificationsEnabled", "")
+  }
   // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
-  iframe.setAttribute("src", toolbarUrl)
+  iframe.setAttribute("src", toolbarUrlObject.href)
+  iframe.name = "jsenv toolbar"
   placeholder.parentNode.replaceChild(iframe, placeholder)
 
   const listenToolbarStateChange = (callback) => {
     return addToolbarEventCallback(iframe, "toolbar_state_change", callback)
   }
 
-  listenToolbarStateChange(({ animationsEnabled }) => {
-    if (animationsEnabled) {
-      iframe.style.transitionDuration = "300ms"
-    } else {
-      iframe.style.transitionDuration = "0s"
-    }
-  })
-  const cleanupRenderOnFirstStateChange = listenToolbarStateChange(() => {
-    cleanupRenderOnFirstStateChange()
-    sendCommandToToolbar(iframe, "renderToolbar", { logs })
-  })
-
-  await iframeLoadedPromise
-  iframe.removeAttribute("tabindex")
+  const cleanupInitOnReady = addToolbarEventCallback(
+    iframe,
+    "toolbar_ready",
+    () => {
+      cleanupInitOnReady()
+      sendCommandToToolbar(iframe, "initToolbar")
+      setTimeout(() => {
+        listenToolbarStateChange(({ animationsEnabled }) => {
+          if (animationsEnabled) {
+            iframe.style.transitionDuration = "300ms"
+          } else {
+            iframe.style.transitionDuration = "0s"
+          }
+        })
+      })
+    },
+  )
 
   const div = document.createElement("div")
   div.innerHTML = `
-<div id="jsenv-toolbar-trigger">
-  <svg id="jsenv-toolbar-trigger-icon">
+<div id="jsenv_toolbar_trigger" style="display:none">
+  <svg id="jsenv_toolbar_trigger_icon">
     <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
   </svg>
   <style>
-    #jsenv-toolbar-trigger {
+    #jsenv_toolbar_trigger {
       display: block;
       overflow: hidden;
       position: fixed;
@@ -88,22 +111,22 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
       transition: 600ms;
     }
 
-    #jsenv-toolbar-trigger:hover {
+    #jsenv_toolbar_trigger:hover {
       cursor: pointer;
     }
 
-    #jsenv-toolbar-trigger[data-expanded] {
+    #jsenv_toolbar_trigger[data-expanded] {
       bottom: 0;
     }
 
-    #jsenv-toolbar-trigger-icon {
+    #jsenv_toolbar_trigger_icon {
       width: 35px;
       height: 35px;
       opacity: 0;
       transition: 600ms;
     }
 
-    #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {
+    #jsenv_toolbar_trigger[data-expanded] #jsenv_toolbar_trigger_icon {
       opacity: 1;
     }
   </style>
@@ -130,7 +153,7 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
     collapseToolbarTrigger()
   }
   toolbarTrigger.onclick = () => {
-    sendCommandToToolbar(iframe, "showToolbar")
+    sendCommandToToolbar(iframe, "openToolbar")
   }
 
   const showToolbarTrigger = () => {
@@ -149,15 +172,17 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
     toolbarTrigger.removeAttribute("data-expanded", "")
   }
 
-  hideToolbarTrigger()
-  listenToolbarStateChange(({ visible }) => {
-    if (visible) {
+  listenToolbarStateChange(({ opened }) => {
+    if (opened) {
       hideToolbarTrigger()
     } else {
       showToolbarTrigger()
     }
   })
 
+  await iframeLoadedPromise
+  iframe.removeAttribute("tabindex")
+
   return iframe
 }
 

package/src/client/ui/changes_indicator/changes_indicator.js

@@ -0,0 +1,66 @@
+import { effect } from "@preact/signals"
+
+import { parentWindowReloader } from "../../core/parent_window_context.js"
+import {
+  autoreloadEnabledSignal,
+  changesSignal,
+} from "../../core/parent_window_signals.js"
+import { changesTooltipOpenedSignal } from "../../core/changes_signals.js"
+import {
+  openChangesToolip,
+  closeChangesToolip,
+} from "../../core/changes_actions.js"
+import { enableVariant } from "../variant.js"
+
+const changesIndicator = document.querySelector("#changes_indicator")
+
+export const renderChangesIndicator = () => {
+  effect(() => {
+    const autoreloadEnabled = autoreloadEnabledSignal.value
+    const changes = changesSignal.value
+    const changeCount = changes.length
+    enableVariant(changesIndicator, {
+      changes: !autoreloadEnabled && changeCount ? "yes" : "no",
+    })
+    if (changeCount) {
+      changesIndicator.querySelector(".tooltip_text").innerHTML =
+        computeTooltipText({ changes })
+      changesIndicator.querySelector(".tooltip_text a").onclick = () => {
+        // eslint-disable-next-line no-alert
+        window.alert(JSON.stringify(changes, null, "  "))
+        console.log(changes)
+      }
+      changesIndicator.querySelector(".changes_text").innerHTML = changeCount
+    }
+  })
+
+  changesIndicator.querySelector(".tooltip_action").onclick = () => {
+    parentWindowReloader.reload()
+  }
+
+  effect(() => {
+    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    if (changesTooltipOpened) {
+      changesIndicator.setAttribute("data-tooltip-visible", "")
+    } else {
+      changesIndicator.removeAttribute("data-tooltip-visible")
+    }
+  })
+  const button = changesIndicator.querySelector("button")
+  button.onclick = () => {
+    const changesTooltipOpened = changesTooltipOpenedSignal.value
+    if (changesTooltipOpened) {
+      closeChangesToolip()
+    } else {
+      openChangesToolip()
+    }
+  }
+}
+
+const computeTooltipText = ({ changes }) => {
+  const changesCount = changes.length
+  if (changesCount === 1) {
+    return `There is <a href="javascript:void(0)">1</a> change to apply`
+  }
+  return `There is  <a href="javascript:void(0)">${changesCount}<a> changes to apply`
+}

package/src/client/{execution/execution.css → ui/document_execution_indicator/document_execution_indicator.css}

@@ -1,12 +1,11 @@
-/* Loader icon */
-#loader-icon {
+#execution_pending_icon {
   width: 20px;
   height: 20px;
   margin: 10px;
   transform: scaleX(-1);
   color: #cecece;
 }
-#loader-icon[data-animate] {
+#execution_pending_icon[data-animate] {
   opacity: 0;
   transform-origin: center;
   animation: rotateLoader 1s linear infinite !important;
@@ -25,18 +24,16 @@
   }
 }
 
-/* Check icon */
-#check-icon {
+#execution_completed_icon {
   width: 25px;
   height: 25px;
-  margin: 7px;
   opacity: 0;
   stroke-width: 5;
 }
-#check-icon[data-animate] {
+#execution_completed_icon[data-animate] {
   opacity: 1;
 }
-#check-icon[data-animate] path {
+#execution_completed_icon[data-animate] path {
   transform-origin: 50% 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
@@ -49,26 +46,25 @@
   }
 }
 
-/* Cross icon */
-#cross-icon {
+#execution_failed_icon {
   width: 20px;
   height: 20px;
   margin: 10px;
   opacity: 0;
   stroke-width: 5;
 }
-#cross-icon rect {
+#execution_failed_icon rect {
   width: 33px;
   height: 0;
   fill: #d74640;
 }
-#cross-icon[data-animate] {
+#execution_failed_icon[data-animate] {
   opacity: 1;
 }
-#cross-icon[data-animate] #cross_p1 {
+#execution_failed_icon[data-animate] #cross_p1 {
   animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 }
-#cross-icon[data-animate] #cross_p2 {
+#execution_failed_icon[data-animate] #cross_p2 {
   animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s;
 }
 @keyframes draw {

package/src/client/ui/document_execution_indicator/document_execution_indicator.js

@@ -0,0 +1,66 @@
+import { effect } from "@preact/signals"
+
+import {
+  executionSignal,
+  executionTooltipOpenedSignal,
+} from "../../core/execution_signals.js"
+import {
+  closeExecutionTooltip,
+  openExecutionTooltip,
+} from "../../core/execution_actions.js"
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant.js"
+
+const executionIndicator = document.querySelector(
+  "#document_execution_indicator",
+)
+
+export const renderDocumentExecutionIndicator = async () => {
+  removeForceHideElement(
+    document.querySelector("#document_execution_indicator"),
+  )
+  effect(() => {
+    const execution = executionSignal.value
+    updateExecutionIndicator(execution)
+  })
+  effect(() => {
+    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    if (executionTooltipOpened) {
+      executionIndicator.setAttribute("data-tooltip-visible", "")
+    } else {
+      executionIndicator.removeAttribute("data-tooltip-visible")
+    }
+  })
+}
+
+const updateExecutionIndicator = ({ status, startTime, endTime } = {}) => {
+  enableVariant(executionIndicator, { execution: status })
+  const variantNode = executionIndicator.querySelector("[data-when-active]")
+  variantNode.querySelector("button").onclick = () => {
+    const executionTooltipOpened = executionTooltipOpenedSignal.value
+    if (executionTooltipOpened) {
+      closeExecutionTooltip()
+    } else {
+      openExecutionTooltip()
+    }
+  }
+  variantNode.querySelector(".tooltip").textContent = computeText({
+    status,
+    startTime,
+    endTime,
+  })
+}
+
+// relative time: https://github.com/tc39/proposal-intl-relative-time/issues/118
+const computeText = ({ status, startTime, endTime }) => {
+  if (status === "completed") {
+    return `Execution completed in ${endTime - startTime}ms`
+  }
+  if (status === "errored") {
+    return `Execution failed in ${endTime - startTime}ms`
+  }
+  if (status === "running") {
+    return "Executing..."
+  }
+  return ""
+}

package/src/client/ui/document_index_link/document_index_link.js

@@ -0,0 +1,8 @@
+import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js"
+
+export const renderDocumentIndexLink = () => {
+  setLinkHrefForParentWindow(
+    document.querySelector("#document_index_link"),
+    "/",
+  )
+}

package/src/client/ui/globals.css

@@ -0,0 +1,103 @@
+* {
+  box-sizing: border-box;
+}
+html,
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+html {
+  font-family: arial, sans;
+}
+
+/* global utils */
+html[data-animation-disabled] * {
+  transition: none !important;
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+}
+[data-when] {
+  display: none !important;
+}
+[data-force-hide] {
+  display: none !important;
+}
+
+/* focus rules */
+button:focus,
+a:focus,
+input:focus,
+*[data-contains-hidden-input] input:focus + * {
+  outline-style: none;
+  outline-offset: -2px;
+}
+
+*[data-contains-hidden-input] input:focus + * {
+  outline-width: 4px;
+  outline-offset: -2px;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+*[data-contains-hidden-input] input:focus-visible + * {
+  outline-style: auto;
+}
+
+*[data-contains-hidden-input] input:focus-visible + * {
+  outline-color: rgb(0, 150, 255);
+}
+
+/*
+Don't try to replace @-moz-document url-prefix() this by
+
+-moz-outline or -moz-outline-color
+Because firefox would take into account outline instead of -moz-outline
+
+:moz-focus-ring
+Because for some element we set the focus outline on a div which would not match :focusring
+*/
+@-moz-document url-prefix() {
+  button:focus-visible,
+  a:focus-visible,
+  input:focus-visible,
+  *[data-input-customized] input:focus-visible + * {
+    outline-width: 2px;
+    outline-offset: 0;
+    outline-style: solid;
+    /*
+    force a blue color for firefox otherwise
+    it uses outline-color: inherit
+    making it unpredictible and sometimes hard to see
+    */
+    outline-color: rgb(0, 150, 255);
+  }
+}
+::-moz-focus-inner {
+  border: 0;
+}
+
+/* Layout */
+#toolbar_wrapper {
+  display: flex;
+  justify-content: center;
+}
+
+#toolbar_overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  filter: url(#better-blur);
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+#toolbar {
+  position: fixed;
+  bottom: 0;
+  height: 40px;
+  width: 100%;
+  background: #404040;
+}

package/src/client/{eventsource/eventsource.css → ui/server_indicator/server_indicator.css}

@@ -1,13 +1,13 @@
-#eventsource-indicator button {
+#server_indicator button {
   position: relative;
 }
 
-#eventsource-indicator button svg {
+#server_indicator button svg {
   width: 40px;
   height: 40px;
 }
 
-#eventsource-indicator .event-source-autoreload {
+#server_indicator .autoreload {
   position: absolute;
   width: 32px;
   height: 32px;
@@ -15,31 +15,24 @@
   left: 0;
   top: 0;
 }
-
-.event-source-autoreload[data-variant="enabled"] {
+.autoreload[data-variant="enabled"] {
   color: green;
 }
 
-#eventsource-indicator .event-source-icon {
+#server_indicator .icon {
   width: 40px;
   height: 40px;
 }
 
-.eventsource-circle {
+.server_indicator_circle {
   stroke: black;
   stroke-width: 0;
 }
-
-.eventsource-circle[data-variant="off"] {
-  fill: #cecece;
-}
-
-.eventsource-circle[data-variant="connecting"] {
+.server_indicator_circle[data-variant="connecting"] {
   fill: #cecece;
   animation: wink 1.2s ease-out infinite;
   transform-origin: center;
 }
-
 @keyframes wink {
   0% {
     opacity: 0;
@@ -51,15 +44,20 @@
     opacity: 0;
   }
 }
+.server_indicator_circle[data-variant="connected"] {
+  fill: green;
+}
+.server_indicator_circle[data-variant="closed"] {
+  fill: #cc0000;
+}
 
-.eventsource-ring {
+.server_indicator_ring {
   stroke: rgba(206, 206, 206, 0.46);
   stroke-width: 4;
   fill: transparent;
   animation: pulse 1.2s ease-out infinite;
   transform-origin: center;
 }
-
 @keyframes pulse {
   0% {
     transform: scale(0);
@@ -73,11 +71,3 @@
     opacity: 0;
   }
 }
-
-.eventsource-circle[data-variant="connected"] {
-  fill: green;
-}
-
-.eventsource-circle[data-variant="failed"] {
-  fill: #cc0000;
-}

package/src/client/ui/server_indicator/server_indicator.js

@@ -0,0 +1,62 @@
+import { effect } from "@preact/signals"
+
+import {
+  serverConnectionSignal,
+  serverTooltipOpenedSignal,
+} from "../../core/server_signals.js"
+import {
+  openServerTooltip,
+  closeServerTooltip,
+} from "../../core/server_actions.js"
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant.js"
+
+const parentServerEvents = window.parent.__server_events__
+const serverEvents = window.__server_events__
+const serverIndicator = document.querySelector("#server_indicator")
+
+export const renderServerIndicator = () => {
+  removeForceHideElement(document.querySelector("#server_indicator"))
+  effect(() => {
+    const serverConnection = serverConnectionSignal.value
+    updateServerIndicator(serverConnection)
+  })
+  effect(() => {
+    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    if (serverTooltipOpened) {
+      serverIndicator.setAttribute("data-tooltip-visible", "")
+    } else {
+      serverIndicator.removeAttribute("data-tooltip-visible")
+    }
+  })
+}
+
+const updateServerIndicator = (connectionState) => {
+  enableVariant(serverIndicator, { connectionState })
+  const variantNode = document.querySelector(
+    "#server_indicator > [data-when-active]",
+  )
+  variantNode.querySelector("button").onclick = () => {
+    const serverTooltipOpened = serverTooltipOpenedSignal.value
+    if (serverTooltipOpened) {
+      closeServerTooltip()
+    } else {
+      openServerTooltip()
+    }
+  }
+  if (connectionState === "connecting") {
+    variantNode.querySelector("a").onclick = () => {
+      if (parentServerEvents) {
+        parentServerEvents.disconnect()
+      }
+      serverEvents.disconnect()
+    }
+  } else if (connectionState === "closed") {
+    variantNode.querySelector("a").onclick = () => {
+      if (parentServerEvents) {
+        parentServerEvents.connect()
+      }
+      serverEvents.connect()
+    }
+  }
+}