Merge pull request #214 from rnva/fix/remove-inline-onclick-handlers

Replace inline onclick handlers with JS-attached listeners

Author: rnva

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Internal
 
+- Replaced the inline `onclick` attributes on the sequence group/note/box modal submit buttons (`sequence_menus.html`) and the version badge (`index.html`) with JavaScript-attached listeners wired in their existing once-run setup (`groupOperationEventListeners`/`noteOperationEventListeners`/`boxEventListeners`/`buttonEventListeners`), matching how the message and participant submit buttons were already bound. No behavior change in the browser; inline event handlers are refused under a strict Content-Security-Policy (e.g. a webview), where these buttons silently did nothing. Added `tests/e2e/test_sequence_submit_buttons.py`.
 - Rewrote `Diagram._assign_participant_indexes` (`sequence/classes.py`) to map each participant to its declaration line by displayed name (quoted or bare, via the new `PARTICIPANT_DECLARATION_RE`/`_declared_participant_name`) rather than by position. Implicitly-introduced participants correctly keep index `-1` ("no declaration line") instead of shifting every later participant onto the wrong line, and `add_box` now rejects a negative index rather than letting Python's negative indexing invert the box. Added `tests/sequence/test_participant_indexes.py` and implicit-participant cases in `tests/sequence/test_box.py`.
 - Removed leftover module-level debug prints from `shared/puml_encoder.py`.
 

src/plantuml_gui/static/script.js

@@ -253,6 +253,8 @@ rnote over Alice, Bob: An "R Note" can span participants
 
 function buttonEventListeners() {
 
+    document.getElementById('version').addEventListener('click', toggleVersionPanel);
+
     document.getElementById('demo').addEventListener('click', function() {
     setDemo()
     });

src/plantuml_gui/static/sequence-box.js

@@ -221,6 +221,9 @@ async function submitBox(startIndex, endIndex) {
 // --- Event listener registration ---
 
 function boxEventListeners() {
+    // Submit button in the box edit modal
+    $('#seq-submit-box').on('click', submitBoxEdit);
+
     // "Box" item in the participant context menu enters box-add mode.
     document.getElementById('seq-addBox').addEventListener('click', (e) => {
         e.preventDefault();

src/plantuml_gui/static/sequence-operations.js

@@ -867,6 +867,9 @@ function cssColorValue(color) {
 }
 
 function noteOperationEventListeners() {
+    // Submit button in the note modal (Add / Edit)
+    $('#seq-submit-note').on('click', submitNote);
+
     // "Add Note" in sequence-menu shows the note type submenu
     document.getElementById('seq-addNote').addEventListener('click', function(e) {
         e.preventDefault();
@@ -1004,6 +1007,9 @@ function noteOperationEventListeners() {
 let groupEditMode = false;
 
 function groupOperationEventListeners() {
+    // Submit button in the group label modal (Add / Rename)
+    $('#seq-submit-group').on('click', submitGroup);
+
     // "Rename" context menu item: fetch current label and show the group modal
     document.getElementById('seq-renameGroup').addEventListener('click', async function() {
         var element = document.getElementById('colb');

src/plantuml_gui/templates/index.html

@@ -96,7 +96,7 @@
       <span class="toolbar-sep"></span>
       <span class="toolbar-spacer"></span>
       <div class="dropdown-wrapper" style="position:relative">
-        <span class="version-badge" id="version" onclick="toggleVersionPanel()" data-tippy-content="Version History">v{{version}}</span>
+        <span class="version-badge" id="version" data-tippy-content="Version History">v{{version}}</span>
         <div class="dropdown-panel version-panel" id="version-panel"></div>
       </div>
       <button type="button" class="toolbar-btn" data-toggle="modal" data-target="#usageModal" data-tippy-content="Help">

src/plantuml_gui/templates/partials/sequence_menus.html

@@ -166,7 +166,7 @@ <h5 class="modal-title">Add Note</h5>
               </div>
           </div>
           <div class="modal-footer">
-              <button id="seq-submit-note" type="button" class="btn btn-primary" onclick="submitNote()">Submit</button>
+              <button id="seq-submit-note" type="button" class="btn btn-primary">Submit</button>
           </div>
       </div>
   </div>
@@ -203,7 +203,7 @@ <h5 class="modal-title">Add Group</h5>
               </div>
           </div>
           <div class="modal-footer">
-              <button id="seq-submit-group" type="button" class="btn btn-primary" onclick="submitGroup()">Submit</button>
+              <button id="seq-submit-group" type="button" class="btn btn-primary">Submit</button>
           </div>
       </div>
   </div>
@@ -230,7 +230,7 @@ <h5 class="modal-title">Edit Box</h5>
               </div>
           </div>
           <div class="modal-footer">
-              <button id="seq-submit-box" type="button" class="btn btn-primary" onclick="submitBoxEdit()">Submit</button>
+              <button id="seq-submit-box" type="button" class="btn btn-primary">Submit</button>
           </div>
       </div>
   </div>

tests/e2e/test_sequence_submit_buttons.py

@@ -0,0 +1,60 @@
+# SPDX-License-Identifier: MIT
+#
+# MIT License
+#
+# Copyright (c) 2026 Ericsson
+
+"""Regression probes for the sequence modal submit buttons.
+
+The group/note/box submit buttons used to carry inline ``onclick`` attributes.
+A browser runs those, but a strict Content-Security-Policy (the VS Code webview
+the frontend is reused in) refuses inline event handlers, so the buttons did
+nothing there. They are now wired with JavaScript-attached listeners, like the
+message/participant submit buttons already were. These tests lock that in:
+no inline handler survives, and a click actually reaches the backend.
+"""
+
+
+class TestSequenceSubmitButtons:
+    def test_submit_buttons_have_no_inline_onclick(self, app_url, page):
+        result = page.evaluate(
+            """() => ({
+                group: document.getElementById('seq-submit-group').getAttribute('onclick'),
+                note: document.getElementById('seq-submit-note').getAttribute('onclick'),
+                box: document.getElementById('seq-submit-box').getAttribute('onclick'),
+            })"""
+        )
+        assert result == {"group": None, "note": None, "box": None}
+
+    def test_clicking_group_submit_reaches_the_backend(self, app_url, page):
+        # Wire the listeners (as sequenceEventListeners does on a real render),
+        # stub fetch to capture the call, then click the button natively.
+        called = page.evaluate(
+            """async () => {
+                groupOperationEventListeners();
+                document.getElementById('colb').innerHTML =
+                    '<svg viewBox="0 0 300 200"><g></g></svg>';
+
+                const calls = [];
+                const realFetch = window.fetch;
+                window.fetch = (url, opts) => {
+                    calls.push(String(url));
+                    return Promise.resolve({
+                        json: () => Promise.resolve({ plantuml: editor.session.getValue() })
+                    });
+                };
+
+                groupEditMode = false;
+                selectedGroupType = 'group';
+                const submit = document.getElementById('seq-submit-group');
+                submit.dataset.startIndex = '2';
+                submit.dataset.endIndex = '3';
+
+                submit.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+                await new Promise((r) => setTimeout(r, 50));
+
+                window.fetch = realFetch;
+                return calls;
+            }"""
+        )
+        assert any("addGroup" in url for url in called)