@jsenv/plugin-toolbar 0.0.1

package/dist/jsenv_plugin_toolbar.js

@@ -0,0 +1,51 @@
+import { parseHtmlString, injectScriptNodeAsEarlyAsPossible, createHtmlNode, stringifyHtmlAst } from "@jsenv/ast";
+
+const jsenvPluginToolbar = ({
+  logs = false
+} = {}) => {
+  const toolbarInjectorClientFileUrl = new URL("./js/toolbar_injector.js", import.meta.url).href;
+  const toolbarHtmlClientFileUrl = new URL("./html/toolbar.html", import.meta.url).href;
+  return {
+    name: "jsenv:toolbar",
+    appliesDuring: "dev",
+    transformUrlContent: {
+      html: ({
+        url,
+        content
+      }, {
+        referenceUtils
+      }) => {
+        if (url === toolbarHtmlClientFileUrl) {
+          return null;
+        }
+        const htmlAst = parseHtmlString(content);
+        const [toolbarInjectorReference] = referenceUtils.inject({
+          type: "js_import",
+          expectedType: "js_module",
+          specifier: toolbarInjectorClientFileUrl
+        });
+        const [toolbarClientFileReference] = referenceUtils.inject({
+          type: "iframe_src",
+          expectedType: "html",
+          specifier: toolbarHtmlClientFileUrl
+        });
+        injectScriptNodeAsEarlyAsPossible(htmlAst, createHtmlNode({
+          tagName: "script",
+          type: "module",
+          textContent: `
+import { injectToolbar } from ${toolbarInjectorReference.generatedSpecifier}
+injectToolbar(${JSON.stringify({
+            toolbarUrl: toolbarClientFileReference.generatedSpecifier,
+            logs
+          }, null, "  ")})`
+        }), "jsenv:toolbar");
+        const htmlModified = stringifyHtmlAst(htmlAst);
+        return {
+          content: htmlModified
+        };
+      }
+    }
+  };
+};
+
+export { jsenvPluginToolbar };

package/dist/other/jsenv_logo.svg

@@ -0,0 +1,140 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  id="jsenv_logo"
+  viewBox="0 0 430 430"
+  enable-background="new 0 0 430 430"
+>
+  <g id="letters">
+    <path
+      id="j"
+      fill="#F7931E"
+      d="M78.879,272.229c3.381-0.441,7.056-1.176,9.408-3.822c2.793-2.939,3.234-8.086,3.234-19.111v-63.064
+          h19.404v66.74c0,16.023-3.381,23.52-9.555,28.371c-5.292,4.264-14.112,6.174-21.021,6.174L78.879,272.229z M111.072,167.121
+          c0,6.174-4.41,10.438-10.143,10.438c-5.292,0-9.702-4.263-9.555-10.438c-0.147-6.468,4.41-10.437,9.849-10.437
+          S111.072,160.653,111.072,167.121z"
+    />
+    <path
+      id="s"
+      fill="#F7931E"
+      d="M123.714,240.77c2.793,1.764,8.085,3.822,12.936,3.822c4.998,0,7.791-2.205,7.791-6.469
+          c0-3.675-2.058-6.027-8.379-9.702c-11.76-6.615-14.553-14.112-14.553-20.727c0-12.937,9.261-22.639,23.667-22.639
+          c6.027,0,10.731,1.47,14.553,3.234l-3.381,14.112c-2.793-1.617-6.174-2.94-9.996-2.94c-4.851,0-7.203,2.94-7.203,6.174
+          c0,3.234,1.617,4.998,8.379,8.967c10.584,6.027,14.553,13.524,14.553,21.756c0,14.699-10.584,22.639-25.432,22.639
+          c-6.027,0-13.083-1.617-16.464-4.117L123.714,240.77z"
+    />
+    <path
+      id="e"
+      fill="#F7931E"
+      d="M204.414,223.57c0.148,21.756,8.674,26.461,16.906,26.461c4.852,0,8.967-1.176,11.76-2.793l1.764,8.379
+          c-3.969,2.205-9.996,3.381-15.582,3.381c-17.052,0-25.872-13.965-25.872-35.722c0-23.08,9.702-37.486,23.961-37.486
+          c14.553,0,20.285,15.289,20.285,31.459c0,2.646,0,4.557-0.146,6.321H204.414z M226.76,215.191
+          c0.293-14.259-5.145-20.581-10.584-20.581c-7.352,0-11.174,10.878-11.613,20.581H226.76z"
+    />
+    <path
+      id="n"
+      fill="#F7931E"
+      d="M249.836,205.342c0-8.379-0.441-12.643-0.588-18.375h9.85l0.588,8.526h0.293
+          c3.088-5.733,8.82-9.702,16.318-9.702c9.85,0,17.199,7.35,17.199,24.55v47.775h-11.318V212.25c0-8.379-1.617-16.905-9.85-16.905
+          c-4.705,0-9.262,3.969-10.732,11.613c-0.293,1.764-0.439,3.969-0.439,6.321v44.835h-11.32V205.342z"
+    />
+    <path
+      id="v"
+      fill="#F7931E"
+      d="M313.783,186.966l8.967,39.985c1.029,4.851,2.205,11.172,3.088,17.346h0.441
+          c0.734-5.879,1.91-11.907,2.939-17.346l8.82-39.985h11.172l-18.523,71.149h-10.143l-18.521-71.149H313.783z"
+    />
+  </g>
+  <g id="arcs">
+    <path
+      id="arc1"
+      fill="#F7931E"
+      d="M32.118,204.979c0,0,0.105,1.801,0.302,5.179c0.124,3.4,0.638,8.29,1.434,14.48
+            c0.249,1.546,0.511,3.174,0.786,4.882c0.137,0.853,0.278,1.725,0.421,2.617c0.154,0.89,0.376,1.789,0.558,2.712
+            c0.384,1.843,0.783,3.761,1.197,5.75c0.444,1.981,1.027,4.008,1.56,6.112c2.274,8.378,5.328,17.708,9.758,27.396
+            c4.406,9.688,10.04,19.776,17.062,29.673c7.003,9.901,15.393,19.609,25.102,28.499c9.702,8.888,20.652,17.025,32.581,23.85
+            c11.948,6.789,24.834,12.287,38.159,16.203c13.357,3.824,27.155,5.896,40.737,6.35l2.541,0.113l2.542-0.017
+            c1.689-0.012,3.376-0.142,5.059-0.152l1.259-0.126h0.157c-0.466,0-0.034,0.113-0.096,0.111l0.329,0.039l0.657-0.012l2.625-0.138
+            c1.748-0.094,3.492-0.181,5.229-0.274l2.599-0.14l2.399-0.292c1.596-0.203,3.188-0.354,4.772-0.526
+            c3.147-0.236,6.372-0.888,9.541-1.397c12.69-2.107,24.746-5.299,35.916-9.232c2.755-1.075,5.479-2.131,8.182-3.142
+            c2.655-1.114,5.222-2.329,7.782-3.459c2.6-1.056,4.984-2.43,7.407-3.636c1.206-0.616,2.401-1.228,3.584-1.832
+            c1.189-0.598,2.295-1.31,3.432-1.949c2.248-1.316,4.477-2.577,6.623-3.866c2.099-1.369,4.148-2.706,6.146-4.011
+            c2.042-1.258,3.901-2.66,5.735-3.997c1.822-1.352,3.646-2.613,5.355-3.907c1.669-1.351,3.284-2.656,4.843-3.918
+            c1.569-1.258,3.121-2.439,4.471-3.723c1.402-1.238,2.746-2.427,4.031-3.563c1.288-1.139,2.548-2.204,3.621-3.327
+            c2.193-2.203,4.225-4.131,5.979-5.831c1.697-1.744,3.063-3.304,4.243-4.516c2.34-2.456,3.588-3.767,3.588-3.767l0.026-0.028
+            c0.326-0.342,0.867-0.355,1.209-0.029c0.285,0.271,0.341,0.695,0.161,1.026c0,0-0.868,1.598-2.574,4.574
+            c-0.854,1.488-1.885,3.349-3.214,5.459c-1.387,2.064-2.967,4.465-4.816,7.108c-0.887,1.355-1.955,2.669-3.051,4.075
+            c-1.103,1.406-2.257,2.878-3.46,4.412c-1.185,1.56-2.571,3.036-3.979,4.607c-1.424,1.563-2.899,3.181-4.424,4.853
+            c-1.572,1.628-3.282,3.218-5.018,4.893c-1.745,1.662-3.502,3.432-5.49,5.023c-1.957,1.641-3.965,3.323-6.021,5.047
+            c-2.111,1.653-4.363,3.226-6.623,4.899c-9.169,6.472-19.718,12.805-31.671,17.869c-11.917,5.107-25.137,9.123-39.146,11.367
+            c-3.516,0.507-7.004,1.114-10.719,1.336c-1.834,0.148-3.674,0.319-5.521,0.438l-2.773,0.192l-2.611,0.027
+            c-1.74,0.015-3.486,0.03-5.237,0.045l-2.63,0.012l-1.585-0.006l-1.378-0.074c-1.836-0.101-3.676-0.201-5.521-0.302l-2.766-0.157
+            l-2.764-0.29c-14.755-1.437-29.532-4.559-43.748-9.26c-14.191-4.788-27.769-11.24-40.221-18.991
+            c-12.467-7.743-23.632-16.999-33.41-26.861c-9.758-9.893-18.135-20.455-24.833-31.222c-6.743-10.739-11.988-21.536-15.97-31.794
+            c-4.006-10.258-6.601-20.021-8.441-28.721c-1.917-8.698-2.688-16.429-3.245-22.764c-0.396-6.374-0.584-11.386-0.485-14.752
+            c0.026-3.383,0.04-5.188,0.04-5.188c0.003-0.47,0.387-0.848,0.857-0.844C31.725,204.181,32.091,204.536,32.118,204.979z"
+    />
+    <path
+      id="arc2"
+      fill="#F7931E"
+      d="M393.625,225.021c0,0-0.104-1.731-0.297-4.979c-0.049-0.812-0.103-1.718-0.162-2.716
+            c-0.029-0.499-0.061-1.021-0.093-1.565c-0.059-0.538-0.119-1.097-0.182-1.679c-0.269-2.323-0.534-4.99-0.906-7.966
+            c-0.241-1.486-0.496-3.051-0.763-4.693c-0.133-0.82-0.269-1.658-0.408-2.516c-0.126-0.859-0.286-1.731-0.487-2.616
+            c-0.778-3.54-1.458-7.393-2.614-11.413c-0.266-1.009-0.537-2.034-0.812-3.075c-0.264-1.043-0.553-2.096-0.908-3.147
+            c-0.672-2.11-1.362-4.281-2.071-6.509c-1.604-4.392-3.258-9.013-5.353-13.684c-4.077-9.377-9.302-19.173-15.844-28.827
+            c-6.541-9.647-14.329-19.197-23.385-28.038l-1.683-1.677l-1.766-1.605c-1.182-1.068-2.366-2.142-3.557-3.218
+            c-1.163-1.104-2.449-2.08-3.686-3.116c-1.246-1.024-2.496-2.052-3.75-3.083c-1.3-0.972-2.604-1.946-3.91-2.924
+            c-1.324-0.953-2.58-2.003-3.953-2.902c-1.354-0.92-2.714-1.843-4.075-2.768l-2.042-1.389l-2.112-1.291
+            c-11.209-6.99-23.347-12.819-35.961-17.193c-12.643-4.307-25.78-6.991-38.788-8.151c-1.628-0.128-3.24-0.356-4.867-0.403
+            c-1.623-0.068-3.243-0.136-4.858-0.205c-3.224-0.204-6.444-0.09-9.634-0.125l-2.151-0.002l-2.495,0.128
+            c-1.66,0.095-3.316,0.141-4.966,0.211l-2.47,0.097c-0.809,0.042-1.532,0.143-2.3,0.21c-1.513,0.146-3.021,0.293-4.522,0.438
+            c-2.979,0.166-6.046,0.719-9.053,1.084c-3.023,0.336-5.975,0.917-8.906,1.449c-1.462,0.28-2.93,0.501-4.374,0.794
+            c-1.436,0.332-2.863,0.661-4.282,0.989c-1.424,0.318-2.838,0.634-4.245,0.947c-1.396,0.353-2.766,0.767-4.137,1.143
+            c-2.735,0.781-5.465,1.47-8.073,2.398c-1.315,0.436-2.621,0.868-3.917,1.296c-1.3,0.42-2.588,0.844-3.827,1.363
+            c-2.513,0.967-4.983,1.917-7.408,2.85c-2.367,1.068-4.709,2.091-7.01,3.092c-1.163,0.477-2.267,1.042-3.361,1.598
+            c-1.1,0.548-2.188,1.091-3.263,1.627c-1.082,0.532-2.15,1.059-3.206,1.579c-1.025,0.576-2.039,1.145-3.039,1.706
+            c-1.992,1.14-4.003,2.158-5.868,3.29c-1.848,1.157-3.655,2.272-5.419,3.344c-1.792,1.037-3.405,2.208-5.008,3.287
+            c-1.605,1.084-3.153,2.13-4.64,3.135c-2.895,2.146-5.553,4.117-7.955,5.898c-2.294,1.916-4.409,3.579-6.239,5.05
+            c-0.934,0.718-1.729,1.45-2.471,2.111c-0.751,0.655-1.434,1.25-2.044,1.782c-2.474,2.127-3.793,3.262-3.793,3.262l-0.025,0.022
+            c-0.358,0.308-0.898,0.267-1.207-0.091c-0.256-0.297-0.271-0.721-0.063-1.032c0,0,0.969-1.457,2.861-4.161
+            c0.957-1.342,2.071-3.069,3.577-4.928c1.497-1.867,3.207-4.042,5.195-6.425c2.072-2.294,4.393-4.829,6.954-7.583
+            c1.353-1.299,2.761-2.652,4.222-4.055c1.466-1.404,2.982-2.873,4.665-4.248c1.653-1.413,3.373-2.863,5.158-4.347
+            c1.799-1.46,3.737-2.85,5.699-4.323c0.988-0.729,1.989-1.466,3.003-2.214c1.05-0.693,2.113-1.395,3.188-2.104
+            c1.082-0.705,2.176-1.418,3.282-2.14c1.107-0.723,2.227-1.456,3.411-2.104c9.235-5.625,19.942-10.626,31.724-14.697
+            c1.475-0.504,2.951-1.046,4.456-1.527c1.52-0.435,3.049-0.873,4.587-1.314c1.543-0.431,3.096-0.864,4.658-1.299
+            c1.57-0.402,3.17-0.716,4.772-1.065c1.604-0.341,3.218-0.685,4.839-1.029c0.808-0.191,1.629-0.319,2.454-0.433
+            c0.824-0.123,1.649-0.245,2.478-0.368c3.322-0.481,6.616-1.035,10.133-1.254c1.738-0.127,3.483-0.254,5.236-0.383
+            c0.866-0.054,1.775-0.143,2.61-0.166l2.472-0.042c1.65-0.022,3.307-0.069,4.97-0.067l2.497-0.011
+            c-0.163,0.003,0.397-0.005,0.4-0.001l0.164,0.008l0.327,0.015l0.655,0.031l1.311,0.062c3.497,0.194,7.019,0.236,10.533,0.702
+            c1.757,0.188,3.52,0.377,5.285,0.567c1.767,0.169,3.518,0.523,5.28,0.778c14.083,2.205,28.099,5.979,41.516,11.19
+            c13.397,5.272,26.146,12.065,37.788,20.016l2.192,1.471l2.117,1.569c1.408,1.045,2.813,2.087,4.215,3.127
+            c2.768,2.124,5.406,4.386,8.06,6.582c1.274,1.16,2.545,2.316,3.813,3.468c1.254,1.164,2.556,2.267,3.731,3.496
+            c1.2,1.201,2.396,2.398,3.587,3.591l1.775,1.789l1.689,1.859c9.061,9.819,16.775,20.217,23.014,30.685
+            c6.256,10.46,11.099,20.933,14.763,30.855c1.899,4.94,3.31,9.814,4.67,14.425c0.586,2.333,1.157,4.605,1.712,6.814
+            c0.297,1.098,0.526,2.196,0.731,3.282c0.215,1.083,0.427,2.15,0.636,3.2c0.923,4.179,1.378,8.165,1.943,11.813
+            c0.151,0.911,0.247,1.811,0.318,2.695c0.082,0.882,0.162,1.745,0.24,2.587c0.155,1.684,0.305,3.29,0.445,4.814
+            c0.173,3.065,0.257,5.808,0.365,8.183c0.022,0.594,0.045,1.165,0.066,1.714c-0.006,0.545-0.01,1.068-0.015,1.567
+            c-0.009,1-0.017,1.908-0.024,2.721c-0.029,3.252-0.045,4.987-0.045,4.987c-0.004,0.47-0.389,0.847-0.857,0.843
+            C394.018,225.817,393.652,225.463,393.625,225.021z"
+    />
+  </g>
+  <g id="circles">
+    <circle
+      id="circle2"
+      fill="#F7931E"
+      stroke-width="9"
+      stroke-miterlimit="10"
+      cx="70.536"
+      cy="110.694"
+      r="36.011"
+    />
+    <circle
+      id="circle1"
+      fill="#F7931E"
+      stroke-width="9"
+      stroke-miterlimit="10"
+      cx="362.721"
+      cy="309.694"
+      r="36.012"
+    />
+  </g>
+</svg>

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@jsenv/plugin-toolbar",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jsenv/jsenv-core",
+    "directory": "packages/jsenv-plugin-toolbar"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "development": "./src/jsenv_plugin_toolbar.js",
+        "default": "./dist/jsenv_plugin_toolbar.js"
+      }
+    },
+    "./*": "./*"
+  },
+  "main": "./src/main.js",
+  "dependencies": {
+    "@jsenv/ast": "1.4.7"
+  },
+  "scripts": {
+    "build": "node ./scripts/build.mjs"
+  }
+}

package/scripts/build.mjs

@@ -0,0 +1,20 @@
+import { build } from "@jsenv/core"
+
+build({
+  rootDirectoryUrl: new URL("../", import.meta.url),
+  buildDirectoryUrl: new URL("../dist/", import.meta.url),
+  entryPoints: {
+    "./src/jsenv_plugin_toolbar.js": "jsenv_plugin_toolbar.js",
+  },
+  runtimeCompat: {
+    node: "16.14",
+  },
+  urlAnalysis: {
+    include: {
+      "/**/*": true,
+      "/**/node_modules/@jsenv/ast/": false, // cannot inline "parse5", "@babel/core" and "postcss"
+    },
+  },
+  minification: false,
+  versioning: false,
+})

package/src/client/animation/toolbar_animation_core.js

@@ -0,0 +1,30 @@
+import { toolbarState, updateToolbarState } from "../toolbar_state.js"
+import { createPreference } from "../util/preferences.js"
+
+const animationPreference = createPreference("jsenv_toolbar_animation")
+
+export const animationsAreEnabled = () => {
+  return toolbarState.animationsEnabled
+}
+
+export const enableAnimations = () => {
+  updateToolbarState({
+    animationsEnabled: true,
+  })
+  animationPreference.set(true)
+  document.documentElement.removeAttribute("data-animation-disabled")
+}
+
+export const disableAnimations = () => {
+  updateToolbarState({
+    animationsEnabled: false,
+  })
+  animationPreference.set(false)
+  document.documentElement.setAttribute("data-animation-disabled", "")
+}
+
+updateToolbarState({
+  animationsEnabled: animationPreference.has()
+    ? animationPreference.get()
+    : true,
+})

package/src/client/animation/toolbar_animation_ui.js

@@ -0,0 +1,21 @@
+import {
+  animationsAreEnabled,
+  enableAnimations,
+  disableAnimations,
+} from "./toolbar_animation_core.js"
+
+export const renderToolbarAnimation = () => {
+  const animCheckbox = document.querySelector("#toggle-anims")
+  animCheckbox.checked = animationsAreEnabled()
+  animCheckbox.onchange = () => {
+    if (animCheckbox.checked) {
+      enableAnimations()
+    } else {
+      disableAnimations()
+    }
+  }
+  // enable toolbar transition only after first render
+  setTimeout(() => {
+    document.querySelector("#toolbar").setAttribute("data-animate", "")
+  })
+}

package/src/client/communication/parent_window_communication.js

@@ -0,0 +1,33 @@
+export const sendEventToParent = (name, data) => {
+  window.parent.postMessage(
+    {
+      __jsenv__: {
+        event: name,
+        data,
+      },
+    },
+    "*",
+  )
+}
+
+export const addExternalCommandCallback = (command, callback) => {
+  const messageEventCallback = (messageEvent) => {
+    const { data } = messageEvent
+    if (typeof data !== "object") {
+      return
+    }
+    const { __jsenv__ } = data
+    if (!__jsenv__) {
+      return
+    }
+    if (__jsenv__.command !== command) {
+      return
+    }
+    callback(...__jsenv__.args)
+  }
+
+  window.addEventListener("message", messageEventCallback)
+  return () => {
+    window.removeEventListener("message", messageEventCallback)
+  }
+}

package/src/client/eventsource/eventsource.css

@@ -0,0 +1,83 @@
+#eventsource-indicator button {
+  position: relative;
+}
+
+#eventsource-indicator button svg {
+  width: 40px;
+  height: 40px;
+}
+
+#eventsource-indicator .event-source-autoreload {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  margin: 4px;
+  left: 0;
+  top: 0;
+}
+
+.event-source-autoreload[data-variant="enabled"] {
+  color: green;
+}
+
+#eventsource-indicator .event-source-icon {
+  width: 40px;
+  height: 40px;
+}
+
+.eventsource-circle {
+  stroke: black;
+  stroke-width: 0;
+}
+
+.eventsource-circle[data-variant="off"] {
+  fill: #cecece;
+}
+
+.eventsource-circle[data-variant="connecting"] {
+  fill: #cecece;
+  animation: wink 1.2s ease-out infinite;
+  transform-origin: center;
+}
+
+@keyframes wink {
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.eventsource-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);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+.eventsource-circle[data-variant="connected"] {
+  fill: green;
+}
+
+.eventsource-circle[data-variant="failed"] {
+  fill: #cc0000;
+}

package/src/client/eventsource/toolbar_eventsource.js

@@ -0,0 +1,57 @@
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant/variant.js"
+import {
+  toggleTooltip,
+  removeAutoShowTooltip,
+  autoShowTooltip,
+} from "../tooltip/tooltip.js"
+
+const parentEventSourceClient = window.parent.__jsenv_event_source_client__
+
+export const initToolbarEventSource = () => {
+  removeForceHideElement(document.querySelector("#eventsource-indicator"))
+  if (!parentEventSourceClient) {
+    disableAutoreloadSetting()
+    return
+  }
+  parentEventSourceClient.status.onchange = () => {
+    updateEventSourceIndicator()
+  }
+  updateEventSourceIndicator()
+}
+
+const updateEventSourceIndicator = () => {
+  const eventSourceIndicator = document.querySelector("#eventsource-indicator")
+  const eventSourceConnectionState = parentEventSourceClient.status.value
+  enableVariant(eventSourceIndicator, {
+    eventsource: eventSourceConnectionState,
+  })
+  const variantNode = document.querySelector(
+    "#eventsource-indicator > [data-when-active]",
+  )
+  variantNode.querySelector("button").onclick = () => {
+    toggleTooltip(eventSourceIndicator)
+  }
+  if (eventSourceConnectionState === "connecting") {
+    variantNode.querySelector("a").onclick = () => {
+      parentEventSourceClient.disconnect()
+    }
+  } else if (eventSourceConnectionState === "connected") {
+    removeAutoShowTooltip(eventSourceIndicator)
+  } else if (eventSourceConnectionState === "disconnected") {
+    autoShowTooltip(eventSourceIndicator)
+    variantNode.querySelector("a").onclick = () => {
+      parentEventSourceClient.connect()
+    }
+  }
+}
+
+const disableAutoreloadSetting = () => {
+  document
+    .querySelector(".settings-autoreload")
+    .setAttribute("data-disabled", "true")
+  document
+    .querySelector(".settings-autoreload")
+    .setAttribute("title", `Autoreload not available: disabled by server`)
+  document.querySelector("#toggle-autoreload").disabled = true
+}

package/src/client/execution/execution.css

@@ -0,0 +1,79 @@
+/* Loader icon */
+#loader-icon {
+  width: 20px;
+  height: 20px;
+  margin: 10px;
+  transform: scaleX(-1);
+  color: #cecece;
+}
+#loader-icon[data-animate] {
+  opacity: 0;
+  transform-origin: center;
+  animation: rotateLoader 1s linear infinite !important;
+}
+@keyframes rotateLoader {
+  0% {
+    transform: scaleX(-1) rotate(360deg);
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    transform: scaleX(-1) rotate(0deg);
+    opacity: 1;
+  }
+}
+
+/* Check icon */
+#check-icon {
+  width: 25px;
+  height: 25px;
+  margin: 7px;
+  opacity: 0;
+  stroke-width: 5;
+}
+#check-icon[data-animate] {
+  opacity: 1;
+}
+#check-icon[data-animate] path {
+  transform-origin: 50% 50%;
+  stroke-dasharray: 48;
+  stroke-dashoffset: 48;
+  animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+  stroke: green;
+}
+@keyframes stroke {
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+
+/* Cross icon */
+#cross-icon {
+  width: 20px;
+  height: 20px;
+  margin: 10px;
+  opacity: 0;
+  stroke-width: 5;
+}
+#cross-icon rect {
+  width: 33px;
+  height: 0;
+  fill: #d74640;
+}
+#cross-icon[data-animate] {
+  opacity: 1;
+}
+#cross-icon[data-animate] #cross_p1 {
+  animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
+}
+#cross-icon[data-animate] #cross_p2 {
+  animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s;
+}
+@keyframes draw {
+  100% {
+    height: 376.964px;
+    width: 45px;
+  }
+}

package/src/client/execution/toolbar_execution.js

@@ -0,0 +1,88 @@
+import { removeForceHideElement } from "../util/dom.js"
+import { enableVariant } from "../variant/variant.js"
+import { toggleTooltip } from "../tooltip/tooltip.js"
+import { notifyExecutionResult } from "../notification/toolbar_notification.js"
+
+export const renderExecutionInToolbar = async () => {
+  // reset file execution indicator ui
+  applyExecutionIndicator()
+  removeForceHideElement(document.querySelector("#execution-indicator"))
+
+  const { status, startTime, endTime } =
+    await window.parent.__supervisor__.getDocumentExecutionResult()
+  const execution = { status, startTime, endTime }
+  applyExecutionIndicator(execution)
+  const executionStorageKey = window.location.href
+  const previousExecution = sessionStorage.hasOwnProperty(executionStorageKey)
+    ? JSON.parse(sessionStorage.getItem(executionStorageKey))
+    : undefined
+  notifyExecutionResult(executionStorageKey, execution, previousExecution)
+  sessionStorage.setItem(executionStorageKey, JSON.stringify(execution))
+}
+
+// const changeLink = variantNode.querySelector(".eventsource-changes-link")
+// changeLink.innerHTML = reloadMessageCount
+// changeLink.onclick = () => {
+//   console.log(reloadMessages)
+//   // eslint-disable-next-line no-alert
+//   window.parent.alert(JSON.stringify(reloadMessages, null, "  "))
+// }
+
+// const someFailed = reloadMessages.some((m) => m.status === "failed")
+// const somePending = reloadMessages.some((m) => m.status === "pending")
+// const applyLink = variantNode.querySelector(".eventsource-reload-link")
+// applyLink.innerHTML = someFailed
+//   ? "failed"
+//   : somePending
+//   ? "applying..."
+//   : "apply changes"
+// applyLink.onclick = someFailed
+//   ? () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+//   : somePending
+//   ? () => {}
+//   : () => {
+//       parentEventSourceClient.applyReloadMessageEffects()
+//     }
+
+// parentEventSourceClient.reloadMessagesSignal.onchange = () => {
+//   updateEventSourceIndicator()
+// }
+// const autoreloadCheckbox = document.querySelector("#toggle-autoreload")
+// autoreloadCheckbox.checked = parentEventSourceClient.isAutoreloadEnabled()
+// autoreloadCheckbox.onchange = () => {
+//   parentEventSourceClient.setAutoreloadPreference(autoreloadCheckbox.checked)
+//   updateEventSourceIndicator()
+// }
+
+const applyExecutionIndicator = ({
+  status = "running",
+  startTime,
+  endTime,
+} = {}) => {
+  const executionIndicator = document.querySelector("#execution-indicator")
+  enableVariant(executionIndicator, { execution: status })
+  const variantNode = executionIndicator.querySelector("[data-when-active]")
+  variantNode.querySelector("button").onclick = () =>
+    toggleTooltip(executionIndicator)
+  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 ""
+}