Add dev utility for opening dialogs after page load (#1767)

I noticed that when doing UI development in dialogs, it’s quite
cumbersome to having to open the respective dialog via the menu after
each and every page refresh.

So I thought we could introduce a local dev utility for convenience,
that opens a dialog right after loading (or refreshing) the page.

I’ve used this while working on
#1739, and it really was a
great relief to me.


https://github.com/tiny-pilot/tinypilot/assets/83721279/a2c0340e-015b-42ae-825e-41b82c93e612

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1767"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

---------

Co-authored-by: Jan Heuermann <jan@jotaen.net>

CONTRIBUTING.md

@@ -81,6 +81,16 @@ To run TinyPilot on a non-Pi machine, run:
 ./dev-scripts/serve-dev
 ```
 
+### Open dialogs after page load
+
+If you are doing UI development in a dialog, it can be cumbersome to having to open a dialog via the menu after every page refresh.
+
+For convenience, you can append a parameter called `request` to the page URL, and specify the HTML id of the dialog as value. That will open the respective dialog straight away.
+
+Example: `http://localhost:8000?request=about-dialog`
+
+Technically, this assembles a `about-dialog-requested` event and dispatches it to the menu bar component.
+
 ## QA/Testing on a TinyPilot device
 
 It’s useful to have a TinyPilot device set up for testing changes end-to-end and in a real production environment.

app/templates/index.html

@@ -110,5 +110,21 @@
       <span class="monospace"></span>
       <strong></strong>
     </div>
+
+    {% if is_debug %}
+    <script type="module">
+      const action = new URL(window.location).searchParams.get("request");
+      if (action) {
+        const menuBar = document.getElementById("menu-bar");
+        menuBar.dispatchEvent(
+          new CustomEvent(`${action}-requested`, {
+            detail: {},
+            bubbles: true,
+            composed: true,
+          })
+        );
+      }
+    </script>
+    {% endif %}
   </body>
 </html>

app/views.py

@@ -23,6 +23,7 @@ def index_get():
 
     return flask.render_template(
         'index.html',
+        is_debug=flask.current_app.debug,
         use_webrtc_remote_screen=use_webrtc,
         janus_stun_server=update_settings.janus_stun_server,
         janus_stun_port=update_settings.janus_stun_port,