From 066fbc8203c6a07be00595e84b38f9afcd1ab4ab Mon Sep 17 00:00:00 2001
From: jotaen4tinypilot <83721279+jotaen4tinypilot@users.noreply.github.com>
Date: Mon, 1 Apr 2024 13:49:43 +0200
Subject: [PATCH] Add dev utility for opening dialogs after page load (#1767)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
https://github.com/tiny-pilot/tinypilot/issues/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          | 10 ++++++++++
 app/templates/index.html | 16 ++++++++++++++++
 app/views.py             |  1 +
 3 files changed, 27 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 54ecb0494..c4e4c90e9 100644
--- a/CONTRIBUTING.md
+++ b/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.
diff --git a/app/templates/index.html b/app/templates/index.html
index 195486363..37880fa1e 100644
--- a/app/templates/index.html
+++ b/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>
diff --git a/app/views.py b/app/views.py
index ec9331b5b..b7d2c1089 100644
--- a/app/views.py
+++ b/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,