@jsenv/plugin-toolbar 0.0.1

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 (117) hide show
  1. package/dist/css/toolbar_main.css +784 -0
  2. package/dist/html/toolbar.html +305 -0
  3. package/dist/js/toolbar_injector.js +300 -0
  4. package/dist/js/toolbar_main.js +900 -0
  5. package/dist/jsenv_plugin_toolbar.js +51 -0
  6. package/dist/other/jsenv_logo.svg +140 -0
  7. package/package.json +30 -0
  8. package/scripts/build.mjs +20 -0
  9. package/src/client/animation/toolbar_animation_core.js +30 -0
  10. package/src/client/animation/toolbar_animation_ui.js +21 -0
  11. package/src/client/communication/parent_window_communication.js +33 -0
  12. package/src/client/eventsource/eventsource.css +83 -0
  13. package/src/client/eventsource/toolbar_eventsource.js +57 -0
  14. package/src/client/execution/execution.css +79 -0
  15. package/src/client/execution/toolbar_execution.js +88 -0
  16. package/src/client/focus/focus.css +61 -0
  17. package/src/client/focus/toolbar_focus.js +19 -0
  18. package/src/client/jsenv_logo.svg +140 -0
  19. package/src/client/notification/toolbar_notification.js +181 -0
  20. package/src/client/responsive/overflow_menu.css +61 -0
  21. package/src/client/responsive/toolbar_responsive.js +103 -0
  22. package/src/client/settings/settings.css +201 -0
  23. package/src/client/settings/toolbar_settings.js +47 -0
  24. package/src/client/theme/jsenv_theme.css +77 -0
  25. package/src/client/theme/light_theme.css +106 -0
  26. package/src/client/theme/toolbar_theme.js +34 -0
  27. package/src/client/toolbar.html +452 -0
  28. package/src/client/toolbar_injector.js +230 -0
  29. package/src/client/toolbar_main.css +173 -0
  30. package/src/client/toolbar_main.js +174 -0
  31. package/src/client/toolbar_state.js +16 -0
  32. package/src/client/tooltip/tooltip.css +61 -0
  33. package/src/client/tooltip/tooltip.js +39 -0
  34. package/src/client/util/animation.js +305 -0
  35. package/src/client/util/dom.js +108 -0
  36. package/src/client/util/fetch_using_xhr.js +400 -0
  37. package/src/client/util/fetching.js +14 -0
  38. package/src/client/util/iframe_to_parent_href.js +10 -0
  39. package/src/client/util/jsenv_logger.js +28 -0
  40. package/src/client/util/preferences.js +10 -0
  41. package/src/client/util/responsive.js +112 -0
  42. package/src/client/util/util.js +19 -0
  43. package/src/client/variant/variant.js +74 -0
  44. package/src/jsenv_plugin_toolbar.js +63 -0
  45. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/ast/src/html/html_src_set.js +18 -0
  46. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation.js +45 -0
  47. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation.js.map +12 -0
  48. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js +32 -0
  49. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js.map +12 -0
  50. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js +23 -0
  51. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js.map +12 -0
  52. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/communication/parent_window_communication.js +33 -0
  53. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/eventsource.css +87 -0
  54. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js +59 -0
  55. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js.map +12 -0
  56. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/execution.css +88 -0
  57. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js +90 -0
  58. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js.map +12 -0
  59. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/focus/focus.css +28 -0
  60. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js +19 -0
  61. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/jsenv_logo.svg +140 -0
  62. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js +183 -0
  63. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js.map +12 -0
  64. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/overflow_menu.css +60 -0
  65. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js +105 -0
  66. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js.map +12 -0
  67. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/settings.css +200 -0
  68. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js +49 -0
  69. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js.map +12 -0
  70. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/light_theme.css +110 -0
  71. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js +36 -0
  72. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js.map +12 -0
  73. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar.html +319 -0
  74. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js +232 -0
  75. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js.map +12 -0
  76. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.css +161 -0
  77. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.css.map +12 -0
  78. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js +176 -0
  79. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js.map +12 -0
  80. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js +18 -0
  81. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js.map +12 -0
  82. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.css +60 -0
  83. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js +41 -0
  84. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js.map +12 -0
  85. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/animation.js +307 -0
  86. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/animation.js.map +12 -0
  87. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/dom.js +108 -0
  88. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/iframe_to_parent_href.js +10 -0
  89. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/preferences.js +10 -0
  90. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/util/responsive.js +112 -0
  91. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/packages/jsenv-plugin-toolbar/src/client/variant/variant.js +74 -0
  92. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload.js +201 -0
  93. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload.js.map +12 -0
  94. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/autoreload_preference.js +11 -0
  95. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/reload.js +138 -0
  96. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/reload.js.map +12 -0
  97. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/autoreload/client/url_helpers.js +20 -0
  98. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html +590 -0
  99. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L15C5-L20C12.js +7 -0
  100. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L15C5-L20C12.js.map +12 -0
  101. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L368C5-L481C14.js +114 -0
  102. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L482C5-L605C14.js +124 -0
  103. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L69C5-L299C13.css +227 -0
  104. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/explorer/client/explorer.html@L8C5-L68C13.css +28 -0
  105. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/import_meta_hot/client/import_meta_hot.js +82 -0
  106. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/ribbon/client/ribbon.js +51 -0
  107. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/connection_manager.js +165 -0
  108. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/events_manager.js +75 -0
  109. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/server_events_client.js +20 -0
  110. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/server_events_client.js.map +12 -0
  111. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/web_socket_connection.js +83 -0
  112. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/server_events/client/web_socket_connection.js.map +12 -0
  113. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/supervisor/client/script_type_module_supervisor.js +98 -0
  114. package/tests/toolbar_basic/.jsenv/chrome@107.00/@fs/Users/d.maillard/dev/jsenv/jsenv-core/src/plugins/supervisor/client/supervisor.js +966 -0
  115. package/tests/toolbar_basic/main.html +18 -0
  116. package/tests/toolbar_basic/start_dev_server.mjs +7 -0
  117. package/todo.txt +0 -0
package/src/client/toolbar.html ADDED
@@ -0,0 +1,452 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Jsenv toolbar</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
6
+ <meta charset="utf-8" />
7
+ <link rel="icon" href="data:," />
8
+ <link rel="stylesheet" type="text/css" href="./toolbar_main.css" />
9
+ </head>
10
+ <body>
11
+ <div id="toolbar-overlay"></div>
12
+ <!-- toolbar -->
13
+ <div id="toolbar">
14
+ <div id="toolbar-wrapper">
15
+ <section id="file-list-link" data-responsive-toolbar-element>
16
+ <a class="toolbar-icon-wrapper" href="javascript:void(0);">
17
+ <svg
18
+ id="fileIconSvg"
19
+ class="iconToolbar"
20
+ viewBox="0 0 24 24"
21
+ width="35"
22
+ height="35"
23
+ >
24
+ <path d="M0 0h24v24H0V0z" fill="none" />
25
+ <path
26
+ d="M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"
27
+ />
28
+ </svg>
29
+ </a>
30
+ </section>
31
+
32
+ <section id="execution-indicator">
33
+ <div data-when="execution:default">
34
+ <div class="tooltip">Unknown state</div>
35
+ </div>
36
+ <div data-when="execution:running">
37
+ <div class="tooltip">Executing...</div>
38
+ <button>
39
+ <svg id="loader-icon" data-animate>
40
+ <use xlink:href="#loading_svg"></use>
41
+ </svg>
42
+ </button>
43
+ </div>
44
+ <div data-when="execution:completed">
45
+ <div class="tooltip">Execution completed in X ms</div>
46
+ <button>
47
+ <svg id="check-icon" data-animate viewBox="0 0 52 52">
48
+ <path fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
49
+ </svg>
50
+ </button>
51
+ </div>
52
+ <div data-when="execution:errored">
53
+ <div class="tooltip">Execution failed in X ms</div>
54
+ <button>
55
+ <svg id="cross-icon" data-animate viewBox="0 0 512 512">
56
+ <rect
57
+ id="cross_p1"
58
+ x="239.397"
59
+ y="67.518"
60
+ rx="17"
61
+ ry="17"
62
+ transform="matrix(0.7071 0.7071 -0.7071 0.7071 255.9995 -106.0389)"
63
+ />
64
+ <rect
65
+ id="cross_p2"
66
+ x="239.397"
67
+ y="67.519"
68
+ rx="17"
69
+ ry="17"
70
+ transform="matrix(0.7071 -0.7071 0.7071 0.7071 -106.039 256.0001)"
71
+ />
72
+ </svg>
73
+ </button>
74
+ </div>
75
+ </section>
76
+
77
+ <section id="changes-indicator" data-when="autoreload:off">
78
+ <div data-when="changes:no"></div>
79
+ <div data-when="changes:yes">
80
+ <div class="tooltip">There is X changes to apply</div>
81
+ <button>
82
+ <svg>
83
+ <circle class="eventsource-circle" cx="20" cy="20" r="5" />
84
+ </svg>
85
+ <span>X</span>
86
+ </button>
87
+ </div>
88
+ </section>
89
+
90
+ <div style="width: 100%"></div>
91
+
92
+ <section id="eventsource-indicator" data-responsive-toolbar-element>
93
+ <div data-when="eventsource:default">
94
+ <div class="tooltip">Unknown state</div>
95
+ <button>
96
+ <svg>
97
+ <circle class="eventsource-circle" cx="20" cy="20" r="5" />
98
+ </svg>
99
+ </button>
100
+ </div>
101
+ <div data-when="eventsource:connecting">
102
+ <div class="tooltip">
103
+ Connecting to server...
104
+ <br />
105
+ <div class="tooltipAction">
106
+ <a href="javascript:void(0);">
107
+ <svg
108
+ xmlns="http://www.w3.org/2000/svg"
109
+ id="powerOffIconSvg"
110
+ class="tooltipIcon"
111
+ viewBox="0 0 24 24"
112
+ >
113
+ <path d="M0 0h24v24H0V0z" fill="none" />
114
+ <path
115
+ d="M10 3H8v1.88l2 2zm6 6v3.88l1.8 1.8.2-.2V9c0-1.1-.9-2-2-2V3h-2v4h-3.88l2 2H16zM4.12 3.84L2.71 5.25 6 8.54v5.96L9.5 18v3h5v-3l.48-.48 4.47 4.47 1.41-1.41L4.12 3.84zm8.38 13.33V19h-1v-1.83L8 13.65v-3.11l5.57 5.57-1.07 1.06z"
116
+ />
117
+ </svg>
118
+ cancel
119
+ </a>
120
+ </div>
121
+ </div>
122
+ <button>
123
+ <svg>
124
+ <circle
125
+ class="eventsource-circle"
126
+ data-variant="connecting"
127
+ cx="20"
128
+ cy="20"
129
+ r="5"
130
+ />
131
+ <circle class="eventsource-ring" cx="20" cy="20" r="13" />
132
+ </svg>
133
+ </button>
134
+ </div>
135
+ <div data-when="eventsource:disconnected">
136
+ <div class="tooltip">
137
+ Disconnected from server
138
+ <br />
139
+ <div class="tooltipAction">
140
+ <a href="javascript:void(0);">
141
+ <svg
142
+ xmlns="http://www.w3.org/2000/svg"
143
+ viewBox="0 0 24 24"
144
+ id="powerIconSvg"
145
+ class="tooltipIcon"
146
+ >
147
+ <path d="M0 0h24v24H0V0z" fill="none" />
148
+ <path
149
+ d="M16 9v4.66l-3.5 3.51V19h-1v-1.83L8 13.65V9h8m0-6h-2v4h-4V3H8v4h-.01C6.9 6.99 6 7.89 6 8.98v5.52L9.5 18v3h5v-3l3.5-3.51V9c0-1.1-.9-2-2-2V3z"
150
+ />
151
+ </svg>
152
+ connect
153
+ </a>
154
+ </div>
155
+ </div>
156
+ <button>
157
+ <svg>
158
+ <circle
159
+ class="eventsource-circle"
160
+ data-variant="off"
161
+ cx="20"
162
+ cy="20"
163
+ r="5"
164
+ />
165
+ </svg>
166
+ </button>
167
+ </div>
168
+ <div data-when="eventsource:connected">
169
+ <div class="tooltip">Connected to server</div>
170
+ <button>
171
+ <svg
172
+ class="event-source-autoreload iconToolbar"
173
+ data-variant="enabled"
174
+ >
175
+ <use xlink:href="#loading_svg"></use>
176
+ </svg>
177
+ <svg class="event-source-icon">
178
+ <circle
179
+ class="eventsource-circle"
180
+ data-variant="connected"
181
+ cx="20"
182
+ cy="20"
183
+ r="5"
184
+ />
185
+ </svg>
186
+ </button>
187
+ </div>
188
+ </section>
189
+
190
+ <section id="settings" data-responsive-toolbar-element>
191
+ <div id="settings-box">
192
+ <div id="settings-box-header">
193
+ <button id="button-close-settings">
194
+ <svg
195
+ xmlns="http://www.w3.org/2000/svg"
196
+ viewBox="0 0 24 24"
197
+ width="18px"
198
+ height="18px"
199
+ >
200
+ <path
201
+ d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
202
+ />
203
+ <path d="M0 0h24v24H0z" fill="none" />
204
+ </svg>
205
+ </button>
206
+ <svg
207
+ xmlns="http://www.w3.org/2000/svg"
208
+ viewBox="0 0 24 24"
209
+ width="35px"
210
+ height="35px"
211
+ class="settings-icon"
212
+ >
213
+ <path
214
+ d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
215
+ />
216
+ </svg>
217
+ <h3>Settings</h3>
218
+ </div>
219
+ <div id="settings-box-body">
220
+ <div class="settings-box-items-wrapper">
221
+ <div class="settings-box-item settings-autoreload">
222
+ <div class="category-title">
223
+ <svg width="20px" height="20px">
224
+ <use xlink:href="#loading_svg"></use>
225
+ </svg>
226
+ <span>Autoreload</span>
227
+ </div>
228
+ <label class="switch" data-contains-hidden-input>
229
+ <input id="toggle-autoreload" type="checkbox" />
230
+ <div>
231
+ <div class="slider"></div>
232
+ <div class="square"></div>
233
+ </div>
234
+ </label>
235
+ <div class="category-subtitle">
236
+ Auto reload when a file is modified, deleted or created.
237
+ </div>
238
+ </div>
239
+ <div class="settings-box-item settings-notification">
240
+ <div class="category-title">
241
+ <svg
242
+ xmlns="http://www.w3.org/2000/svg"
243
+ viewBox="0 0 24 24"
244
+ width="20px"
245
+ height="20px"
246
+ >
247
+ <path
248
+ d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"
249
+ />
250
+ </svg>
251
+ Notifications
252
+ </div>
253
+ <label class="switch" data-contains-hidden-input>
254
+ <input id="toggle-notifs" type="checkbox" />
255
+ <div>
256
+ <div class="slider"></div>
257
+ <div class="square"></div>
258
+ </div>
259
+ </label>
260
+ <div class="category-subtitle">
261
+ Send system notification when execution fails or is fixed.
262
+ <div class="notification-text">
263
+ <a
264
+ data-when="notif_granted:no"
265
+ class="request_notification_permission"
266
+ href="javascript:void(0);"
267
+ >Enable notification</a
268
+ >
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="settings-box-item">
274
+ <div class="category-title">
275
+ <svg
276
+ xmlns="http://www.w3.org/2000/svg"
277
+ viewBox="0 0 24 24"
278
+ width="20px"
279
+ height="20px"
280
+ >
281
+ <path
282
+ d="M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2zM8 17H6v-2h2v2zm0-4H6v-2h2v2zm0-4H6V7h2v2zm10 8h-2v-2h2v2zm0-4h-2v-2h2v2zm0-4h-2V7h2v2z"
283
+ />
284
+ <path d="M0 0h24v24H0z" fill="none" />
285
+ </svg>
286
+ Animations
287
+ </div>
288
+ <label class="switch" data-contains-hidden-input>
289
+ <input id="toggle-anims" type="checkbox" />
290
+ <div>
291
+ <div class="slider"></div>
292
+ <div class="square"></div>
293
+ </div>
294
+ </label>
295
+ <div class="category-subtitle">
296
+ Play toolbar animations and transitions.
297
+ </div>
298
+ </div>
299
+ <div class="settings-box-item">
300
+ <div class="category-title">
301
+ <svg
302
+ xmlns="http://www.w3.org/2000/svg"
303
+ viewBox="0 0 24 24"
304
+ width="20px"
305
+ height="20px"
306
+ id="paletteIconSvg"
307
+ >
308
+ <path
309
+ d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
310
+ />
311
+ <path d="M0 0h24v24H0z" fill="none" />
312
+ </svg>
313
+ Dark mode
314
+ </div>
315
+ <label class="switch" data-contains-hidden-input>
316
+ <input id="checkbox-dark-theme" type="checkbox" />
317
+ <div>
318
+ <div class="slider"></div>
319
+ <div class="square"></div>
320
+ </div>
321
+ </label>
322
+ <div class="category-subtitle">
323
+ Choose between light and dark theme for jsenv toolbar.
324
+ </div>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ <button id="settings-button" class="toolbar-icon-wrapper">
330
+ <div data-when="has_warning:yes">
331
+ <svg
332
+ xmlns="http://www.w3.org/2000/svg"
333
+ viewBox="0 0 45.818 45.818"
334
+ width="20px"
335
+ height="20px"
336
+ class="iconToolbar"
337
+ style="transform: rotate(180deg)"
338
+ >
339
+ <path
340
+ d="M22.909,0C10.258,0,0,10.257,0,22.908c0,12.652,10.258,22.91,22.909,22.91s22.909-10.258,22.909-22.91
341
+ C45.818,10.257,35.561,0,22.909,0z M26.411,35.417c0,1.921-1.573,3.478-3.492,3.478c-1.92,0-3.492-1.557-3.492-3.478V20.201
342
+ c0-1.92,1.572-3.477,3.492-3.477c1.919,0,3.492,1.556,3.492,3.477V35.417z M22.909,13.851c-2.119,0-3.837-1.718-3.837-3.836
343
+ c0-2.12,1.718-3.836,3.837-3.836c2.118,0,3.837,1.716,3.837,3.836C26.746,12.133,25.027,13.851,22.909,13.851z"
344
+ />
345
+ </svg>
346
+ </div>
347
+ <div data-when="has_warning:no">
348
+ <svg
349
+ xmlns="http://www.w3.org/2000/svg"
350
+ viewBox="0 0 24 24"
351
+ width="24px"
352
+ height="24px"
353
+ class="iconToolbar"
354
+ >
355
+ <path
356
+ d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"
357
+ />
358
+ </svg>
359
+ </div>
360
+ </button>
361
+ </section>
362
+
363
+ <section id="close" data-responsive-toolbar-element>
364
+ <button id="button-close-toolbar">
365
+ <div class="toolbar-icon-wrapper">
366
+ <svg
367
+ xmlns="http://www.w3.org/2000/svg"
368
+ viewBox="0 0 24 24"
369
+ id="crossIconSvg"
370
+ class="iconToolbar"
371
+ width="35px"
372
+ height="35px"
373
+ >
374
+ <path
375
+ d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
376
+ />
377
+ <path d="M0 0h24v24H0z" fill="none" />
378
+ </svg>
379
+ </div>
380
+ </button>
381
+ </section>
382
+ </div>
383
+
384
+ <div id="overflow-menu">
385
+ <div style="width: 100%"></div>
386
+ </div>
387
+
388
+ <div id="overflow-menu-button">
389
+ <button class="toolbar-icon-wrapper">
390
+ <svg
391
+ xmlns="http://www.w3.org/2000/svg"
392
+ viewBox="0 0 24 24"
393
+ width="35px"
394
+ height="35px"
395
+ id="dotsIconSvg"
396
+ class="iconToolbar"
397
+ >
398
+ <path d="M0 0h24v24H0V0z" fill="none" />
399
+ <path
400
+ d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
401
+ />
402
+ </svg>
403
+ </button>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- svg filter
408
+ must not be hidden or won't show in firefox)
409
+ see also:
410
+ https://codepen.io/tigt/post/fixing-the-white-glow-in-the-css-blur-filter
411
+ https://stackoverflow.com/questions/46906819/edge-detection-in-svg-filter
412
+ https://github.com/msurguy/background-blur/issues/5
413
+ https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/
414
+ -->
415
+ <svg width="0" height="0">
416
+ <defs>
417
+ <filter id="better-blur" x="0" y="0" width="1" height="1">
418
+ <feGaussianBlur stdDeviation="5" result="blurred" />
419
+
420
+ <feMerge>
421
+ <feMergeNode in="SourceGraphic" />
422
+ <feMergeNode in="blurred" />
423
+ </feMerge>
424
+ </filter>
425
+ </defs>
426
+ </svg>
427
+
428
+ <!--
429
+ Reusable svg(s)
430
+ -->
431
+ <div style="display: none; position: absolute">
432
+ <svg
433
+ id="loading_svg"
434
+ xmlns="http://www.w3.org/2000/svg"
435
+ viewBox="0 0 430 430"
436
+ >
437
+ <path
438
+ fill="currentColor"
439
+ d="m32.118 204.979.302 5.179c.124 3.4.638 8.29 1.434 14.48l.786 4.882.421 2.617c.154.89.376 1.789.558 2.712l1.197 5.75c.444 1.981 1.027 4.008 1.56 6.112 2.274 8.378 5.328 17.708 9.758 27.396a180.713 180.713 0 0 0 17.062 29.673 178.57 178.57 0 0 0 25.102 28.499c9.702 8.888 20.652 17.025 32.581 23.85a180.596 180.596 0 0 0 38.159 16.203c13.357 3.824 27.155 5.896 40.737 6.35l2.541.113 2.542-.017c1.689-.012 3.376-.142 5.059-.152l1.259-.126h.157c-.466 0-.034.113-.096.111l.329.039.657-.012 2.625-.138c1.748-.094 3.492-.181 5.229-.274l2.599-.14 2.399-.292c1.596-.203 3.188-.354 4.772-.526 3.147-.236 6.372-.888 9.541-1.397a213.826 213.826 0 0 0 35.916-9.232 622.925 622.925 0 0 1 8.182-3.142c2.655-1.114 5.222-2.329 7.782-3.459 2.6-1.056 4.984-2.43 7.407-3.636l3.584-1.832c1.189-.598 2.295-1.31 3.432-1.949 2.248-1.316 4.477-2.577 6.623-3.866l6.146-4.011c2.042-1.258 3.901-2.66 5.735-3.997 1.822-1.352 3.646-2.613 5.355-3.907l4.843-3.918c1.569-1.258 3.121-2.439 4.471-3.723l4.031-3.563c1.288-1.139 2.548-2.204 3.621-3.327 2.193-2.203 4.225-4.131 5.979-5.831 1.697-1.744 3.063-3.304 4.243-4.516l3.588-3.767.026-.028a.855.855 0 0 1 1.37.997s-.868 1.598-2.574 4.574c-.854 1.488-1.885 3.349-3.214 5.459-1.387 2.064-2.967 4.465-4.816 7.108-.887 1.355-1.955 2.669-3.051 4.075l-3.46 4.412c-1.185 1.56-2.571 3.036-3.979 4.607a11889.58 11889.58 0 0 1-4.424 4.853c-1.572 1.628-3.282 3.218-5.018 4.893-1.745 1.662-3.502 3.432-5.49 5.023l-6.021 5.047c-2.111 1.653-4.363 3.226-6.623 4.899-9.169 6.472-19.718 12.805-31.671 17.869-11.917 5.107-25.137 9.123-39.146 11.367-3.516.507-7.004 1.114-10.719 1.336-1.834.148-3.674.319-5.521.438l-2.773.192-2.611.027-5.237.045-2.63.012-1.585-.006-1.378-.074-5.521-.302-2.766-.157-2.764-.29a202.304 202.304 0 0 1-43.748-9.26 193.358 193.358 0 0 1-40.221-18.991c-12.467-7.743-23.632-16.999-33.41-26.861-9.758-9.893-18.135-20.455-24.833-31.222a187.62 187.62 0 0 1-15.97-31.794c-4.006-10.258-6.601-20.021-8.441-28.721-1.917-8.698-2.688-16.429-3.245-22.764-.396-6.374-.584-11.386-.485-14.752l.04-5.188a.85.85 0 0 1 .857-.844.86.86 0 0 1 .844.805zM393.625 225.021l-.297-4.979-.162-2.716-.093-1.565-.182-1.679c-.269-2.323-.534-4.99-.906-7.966l-.763-4.693-.408-2.516a34.227 34.227 0 0 0-.487-2.616c-.778-3.54-1.458-7.393-2.614-11.413l-.812-3.075a41.978 41.978 0 0 0-.908-3.147l-2.071-6.509c-1.604-4.392-3.258-9.013-5.353-13.684a178.146 178.146 0 0 0-15.844-28.827c-6.541-9.647-14.329-19.197-23.385-28.038l-1.683-1.677-1.766-1.605c-1.182-1.068-2.366-2.142-3.557-3.218-1.163-1.104-2.449-2.08-3.686-3.116l-3.75-3.083c-1.3-.972-2.604-1.946-3.91-2.924-1.324-.953-2.58-2.003-3.953-2.902l-4.075-2.768-2.042-1.389-2.112-1.291a179.101 179.101 0 0 0-35.961-17.193c-12.643-4.307-25.78-6.991-38.788-8.151-1.628-.128-3.24-.356-4.867-.403l-4.858-.205c-3.224-.204-6.444-.09-9.634-.125l-2.151-.002-2.495.128c-1.66.095-3.316.141-4.966.211l-2.47.097c-.809.042-1.532.143-2.3.21l-4.522.438c-2.979.166-6.046.719-9.053 1.084-3.023.336-5.975.917-8.906 1.449-1.462.28-2.93.501-4.374.794l-4.282.989-4.245.947c-1.396.353-2.766.767-4.137 1.143-2.735.781-5.465 1.47-8.073 2.398l-3.917 1.296c-1.3.42-2.588.844-3.827 1.363l-7.408 2.85a564.405 564.405 0 0 1-7.01 3.092c-1.163.477-2.267 1.042-3.361 1.598l-3.263 1.627-3.206 1.579a4807.3 4807.3 0 0 1-3.039 1.706c-1.992 1.14-4.003 2.158-5.868 3.29a478.807 478.807 0 0 1-5.419 3.344c-1.792 1.037-3.405 2.208-5.008 3.287l-4.64 3.135-7.955 5.898c-2.294 1.916-4.409 3.579-6.239 5.05-.934.718-1.729 1.45-2.471 2.111l-2.044 1.782-3.793 3.262-.025.022a.857.857 0 0 1-1.27-1.123s.969-1.457 2.861-4.161c.957-1.342 2.071-3.069 3.577-4.928 1.497-1.867 3.207-4.042 5.195-6.425a711.243 711.243 0 0 1 6.954-7.583l4.222-4.055c1.466-1.404 2.982-2.873 4.665-4.248a492.728 492.728 0 0 1 5.158-4.347c1.799-1.46 3.737-2.85 5.699-4.323l3.003-2.214 3.188-2.104a4521.47 4521.47 0 0 0 3.282-2.14c1.107-.723 2.227-1.456 3.411-2.104 9.235-5.625 19.942-10.626 31.724-14.697 1.475-.504 2.951-1.046 4.456-1.527a9356.8 9356.8 0 0 0 4.587-1.314l4.658-1.299c1.57-.402 3.17-.716 4.772-1.065l4.839-1.029a26.288 26.288 0 0 1 2.454-.433l2.478-.368c3.322-.481 6.616-1.035 10.133-1.254l5.236-.383c.866-.054 1.775-.143 2.61-.166l2.472-.042c1.65-.022 3.307-.069 4.97-.067l2.497-.011c-.163.003.397-.005.4-.001l.164.008.327.015.655.031 1.311.062c3.497.194 7.019.236 10.533.702l5.285.567c1.767.169 3.518.523 5.28.778a200.938 200.938 0 0 1 41.516 11.19 191.734 191.734 0 0 1 37.788 20.016l2.192 1.471 2.117 1.569 4.215 3.127c2.768 2.124 5.406 4.386 8.06 6.582l3.813 3.468c1.254 1.164 2.556 2.267 3.731 3.496l3.587 3.591 1.775 1.789 1.689 1.859c9.061 9.819 16.775 20.217 23.014 30.685a185.353 185.353 0 0 1 14.763 30.855c1.899 4.94 3.31 9.814 4.67 14.425l1.712 6.814c.297 1.098.526 2.196.731 3.282l.636 3.2c.923 4.179 1.378 8.165 1.943 11.813.151.911.247 1.811.318 2.695l.24 2.587.445 4.814c.173 3.065.257 5.808.365 8.183l.066 1.714-.015 1.567-.024 2.721-.045 4.987a.85.85 0 0 1-.857.843.852.852 0 0 1-.837-.8z"
440
+ />
441
+ <circle fill="currentColor" cx="70.536" cy="110.694" r="36.011" />
442
+ <circle fill="currentColor" cx="362.721" cy="309.694" r="36.012" />
443
+ </svg>
444
+ </div>
445
+ <script
446
+ type="module"
447
+ src="./toolbar_main.js"
448
+ data-jsenv-force-inline
449
+ no-html-supervisor
450
+ ></script>
451
+ </body>
452
+ </html>
package/src/client/toolbar_injector.js ADDED
@@ -0,0 +1,230 @@
1
+ import { setAttributes, setStyles } from "./util/dom.js"
2
+
3
+ const jsenvLogoSvgUrl = new URL("./jsenv_logo.svg", import.meta.url)
4
+
5
+ export const injectToolbar = async ({ toolbarUrl, logs = false }) => {
6
+ if (document.readyState !== "complete") {
7
+ await new Promise((resolve) => {
8
+ window.addEventListener("load", resolve)
9
+ })
10
+ }
11
+ await new Promise((resolve) => {
12
+ if (window.requestIdleCallback) {
13
+ window.requestIdleCallback(resolve, { timeout: 400 })
14
+ } else {
15
+ window.requestAnimationFrame(resolve)
16
+ }
17
+ })
18
+ const placeholder = getToolbarPlaceholder()
19
+
20
+ const iframe = document.createElement("iframe")
21
+ setAttributes(iframe, {
22
+ tabindex: -1,
23
+ // sandbox: "allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation",
24
+ // allow: "accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr",
25
+ allowtransparency: true,
26
+ })
27
+ setStyles(iframe, {
28
+ "position": "fixed",
29
+ "zIndex": 1000,
30
+ "bottom": 0,
31
+ "left": 0,
32
+ "width": "100%",
33
+ "height": 0,
34
+ /* ensure toolbar children are not focusable when hidden */
35
+ "visibility": "hidden",
36
+ "transition-duration": "300ms",
37
+ "transition-property": "height, visibility",
38
+ "border": "none",
39
+ })
40
+ const iframeLoadedPromise = iframeToLoadedPromise(iframe)
41
+ // set iframe src BEFORE putting it into the DOM (prevent firefox adding an history entry)
42
+ iframe.setAttribute("src", toolbarUrl)
43
+ placeholder.parentNode.replaceChild(iframe, placeholder)
44
+
45
+ const listenToolbarStateChange = (callback) => {
46
+ return addToolbarEventCallback(iframe, "toolbar_state_change", callback)
47
+ }
48
+
49
+ listenToolbarStateChange(({ animationsEnabled }) => {
50
+ if (animationsEnabled) {
51
+ iframe.style.transitionDuration = "300ms"
52
+ } else {
53
+ iframe.style.transitionDuration = "0s"
54
+ }
55
+ })
56
+ const cleanupRenderOnFirstStateChange = listenToolbarStateChange(() => {
57
+ cleanupRenderOnFirstStateChange()
58
+ sendCommandToToolbar(iframe, "renderToolbar", { logs })
59
+ })
60
+
61
+ await iframeLoadedPromise
62
+ iframe.removeAttribute("tabindex")
63
+
64
+ const div = document.createElement("div")
65
+ div.innerHTML = `
66
+ <div id="jsenv-toolbar-trigger">
67
+ <svg id="jsenv-toolbar-trigger-icon">
68
+ <use xlink:href="${jsenvLogoSvgUrl}#jsenv_logo"></use>
69
+ </svg>
70
+ <style>
71
+ #jsenv-toolbar-trigger {
72
+ display: block;
73
+ overflow: hidden;
74
+ position: fixed;
75
+ z-index: 1000;
76
+ bottom: -32px;
77
+ right: 20px;
78
+ height: 40px;
79
+ width: 40px;
80
+ padding: 0;
81
+ margin: 0;
82
+ border-radius: 5px 5px 0 0;
83
+ border: 1px solid rgba(0, 0, 0, 0.33);
84
+ border-bottom: none;
85
+ box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46);
86
+ background: transparent;
87
+ text-align: center;
88
+ transition: 600ms;
89
+ }
90
+
91
+ #jsenv-toolbar-trigger:hover {
92
+ cursor: pointer;
93
+ }
94
+
95
+ #jsenv-toolbar-trigger[data-expanded] {
96
+ bottom: 0;
97
+ }
98
+
99
+ #jsenv-toolbar-trigger-icon {
100
+ width: 35px;
101
+ height: 35px;
102
+ opacity: 0;
103
+ transition: 600ms;
104
+ }
105
+
106
+ #jsenv-toolbar-trigger[data-expanded] #jsenv-toolbar-trigger-icon {
107
+ opacity: 1;
108
+ }
109
+ </style>
110
+ </div>`
111
+ const toolbarTrigger = div.firstElementChild
112
+ iframe.parentNode.appendChild(toolbarTrigger)
113
+
114
+ let timer
115
+ toolbarTrigger.onmouseenter = () => {
116
+ toolbarTrigger.setAttribute("data-animate", "")
117
+ timer = setTimeout(expandToolbarTrigger, 500)
118
+ }
119
+ toolbarTrigger.onmouseleave = () => {
120
+ clearTimeout(timer)
121
+ collapseToolbarTrigger()
122
+ }
123
+ toolbarTrigger.onfocus = () => {
124
+ toolbarTrigger.removeAttribute("data-animate")
125
+ expandToolbarTrigger()
126
+ }
127
+ toolbarTrigger.onblur = () => {
128
+ toolbarTrigger.removeAttribute("data-animate")
129
+ clearTimeout(timer)
130
+ collapseToolbarTrigger()
131
+ }
132
+ toolbarTrigger.onclick = () => {
133
+ sendCommandToToolbar(iframe, "showToolbar")
134
+ }
135
+
136
+ const showToolbarTrigger = () => {
137
+ toolbarTrigger.style.display = "block"
138
+ }
139
+
140
+ const hideToolbarTrigger = () => {
141
+ toolbarTrigger.style.display = "none"
142
+ }
143
+
144
+ const expandToolbarTrigger = () => {
145
+ toolbarTrigger.setAttribute("data-expanded", "")
146
+ }
147
+
148
+ const collapseToolbarTrigger = () => {
149
+ toolbarTrigger.removeAttribute("data-expanded", "")
150
+ }
151
+
152
+ hideToolbarTrigger()
153
+ listenToolbarStateChange(({ visible }) => {
154
+ if (visible) {
155
+ hideToolbarTrigger()
156
+ } else {
157
+ showToolbarTrigger()
158
+ }
159
+ })
160
+
161
+ return iframe
162
+ }
163
+
164
+ const addToolbarEventCallback = (iframe, eventName, callback) => {
165
+ const messageEventCallback = (messageEvent) => {
166
+ const { data } = messageEvent
167
+ if (typeof data !== "object") {
168
+ return
169
+ }
170
+ const { __jsenv__ } = data
171
+ if (!__jsenv__) {
172
+ return
173
+ }
174
+ if (__jsenv__.event !== eventName) {
175
+ return
176
+ }
177
+ callback(__jsenv__.data)
178
+ }
179
+ window.addEventListener("message", messageEventCallback, false)
180
+ return () => {
181
+ window.removeEventListener("message", messageEventCallback, false)
182
+ }
183
+ }
184
+
185
+ const sendCommandToToolbar = (iframe, command, ...args) => {
186
+ iframe.contentWindow.postMessage(
187
+ {
188
+ __jsenv__: {
189
+ command,
190
+ args,
191
+ },
192
+ },
193
+ window.origin,
194
+ )
195
+ }
196
+
197
+ const getToolbarPlaceholder = () => {
198
+ const placeholder = queryPlaceholder()
199
+ if (placeholder) {
200
+ if (document.body.contains(placeholder)) {
201
+ return placeholder
202
+ }
203
+ // otherwise iframe would not be visible because in <head>
204
+ console.warn(
205
+ "element with [data-jsenv-toolbar-placeholder] must be inside document.body",
206
+ )
207
+ return createTooolbarPlaceholder()
208
+ }
209
+ return createTooolbarPlaceholder()
210
+ }
211
+
212
+ const queryPlaceholder = () => {
213
+ return document.querySelector("[data-jsenv-toolbar-placeholder]")
214
+ }
215
+
216
+ const createTooolbarPlaceholder = () => {
217
+ const placeholder = document.createElement("span")
218
+ document.body.appendChild(placeholder)
219
+ return placeholder
220
+ }
221
+
222
+ const iframeToLoadedPromise = (iframe) => {
223
+ return new Promise((resolve) => {
224
+ const onload = () => {
225
+ iframe.removeEventListener("load", onload, true)
226
+ resolve()
227
+ }
228
+ iframe.addEventListener("load", onload, true)
229
+ })
230
+ }