Bugzilla – Attachment 189759 Details for
Bug 39142
Add debug permission to allow user to toggle JS and CSS customizations on/off
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 39142: Improve debug controls UI integration
b087ab2.patch (text/plain), 8.50 KB, created by
Martin Renvoize (ashimema)
on 2025-11-20 10:52:36 UTC
(
hide
)
Description:
Bug 39142: Improve debug controls UI integration
Filename:
MIME Type:
Creator:
Martin Renvoize (ashimema)
Created:
2025-11-20 10:52:36 UTC
Size:
8.50 KB
patch
obsolete
>From b087ab2a77253b74256bb4e80dcd5dc42c824338 Mon Sep 17 00:00:00 2001 >From: Martin Renvoize <martin.renvoize@openfifth.co.uk> >Date: Thu, 20 Nov 2025 10:44:15 +0000 >Subject: [PATCH] Bug 39142: Improve debug controls UI integration > >Moves debug controls from fixed bottom position (which overlapped navbar) >to an integrated navbar dropdown with bug icon. Improves UX with: >- Proper navbar integration at far right after user menu >- Dynamic button text (Enable/Disable) reflecting current state >- Icon color change (amber) when any toggles are active >- Prevents duplicate URL parameters on multiple clicks > >Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> >--- > .../intranet-tmpl/prog/en/includes/header.inc | 18 +++ > .../prog/en/includes/intranet-bottom.inc | 106 ++++++++++++++++-- > 2 files changed, 117 insertions(+), 7 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >index 0634fd3492b..5b00a098c0d 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc >@@ -248,6 +248,24 @@ > </li> > </ul> > </li> >+ [% IF Koha.debug_flag %] >+ <li class="nav-item dropdown" id="debug-controls-dropdown"> >+ <a id="debug-controls-menu" href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="Debug controls"> >+ <i id="debug-icon" class="fa fa-bug"></i> >+ </a> >+ <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end" role="menu" aria-labelledby="debug-controls-menu"> >+ <li> >+ <a id="toggleUserCSS" class="dropdown-item" href="#"> <i class="fa fa-fw fa-brands fa-css3"></i> <span class="toggle-text">Toggle User CSS</span> </a> >+ </li> >+ <li> >+ <a id="toggleUserJS" class="dropdown-item" href="#"> <i class="fa fa-fw fa-brands fa-square-js"></i> <span class="toggle-text">Toggle User JS</span> </a> >+ </li> >+ <li> >+ <a id="toggleStylesheets" class="dropdown-item" href="#"> <i class="fa fa-fw fa-file-code"></i> <span class="toggle-text">Toggle Custom Stylesheets</span> </a> >+ </li> >+ </ul> >+ </li> >+ [% END %] > [% INCLUDE 'langmenu-staff-top.inc' %] > [% ELSE %] > <li class="nav-item loggedout"> >diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc >index 40dce0dec39..0ce745868b3 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc >+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/intranet-bottom.inc >@@ -187,13 +187,105 @@ > [% END %] > > [% IF Koha.debug_flag %] >- <div style="position: fixed; bottom: 0;"> >- <button onclick="window.location.search += '&DISABLE_SYSPREF_IntranetUserCSS=yes&DISABLE_SYSPREF_OPACUserCSS=yes'">Disable User CSS</button> >- <button onclick="window.location.search += '&DISABLE_SYSPREF_IntranetUserJS=yes&DISABLE_SYSPREF_OPACUserJS=yes'">Disable User JS</button> >- <button onclick="window.location.search += '&DISABLE_SYSPREF_OpacAdditionalStylesheet=yes&DISABLE_SYSPREF_opaclayoutstylesheet=yes&DISABLE_SYSPREF_intranetcolorstylesheet=yes&DISABLE_SYSPREF_intranetstylesheet=yes'" >- >Load only default stylesheets</button >- > >- </div> >+ <script> >+ (function () { >+ function getURLParams() { >+ const params = new URLSearchParams(window.location.search); >+ return params; >+ } >+ >+ function toggleURLParams(paramsToToggle) { >+ const url = new URL(window.location.href); >+ const params = url.searchParams; >+ >+ // Check if all params are currently set >+ const allSet = paramsToToggle.every(param => params.get(param) === "yes"); >+ >+ if (allSet) { >+ // Remove all params >+ paramsToToggle.forEach(param => params.delete(param)); >+ } else { >+ // Add all params >+ paramsToToggle.forEach(param => params.set(param, "yes")); >+ } >+ >+ window.location.href = url.toString(); >+ } >+ >+ function updateButtonText() { >+ const params = getURLParams(); >+ >+ // User CSS button >+ const cssDisabled = params.get("DISABLE_SYSPREF_IntranetUserCSS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserCSS") === "yes"; >+ const cssToggle = document.getElementById("toggleUserCSS"); >+ if (cssToggle) { >+ const cssText = cssToggle.querySelector(".toggle-text"); >+ if (cssText) cssText.textContent = cssDisabled ? "Enable User CSS" : "Disable User CSS"; >+ } >+ >+ // User JS button >+ const jsDisabled = params.get("DISABLE_SYSPREF_IntranetUserJS") === "yes" && params.get("DISABLE_SYSPREF_OPACUserJS") === "yes"; >+ const jsToggle = document.getElementById("toggleUserJS"); >+ if (jsToggle) { >+ const jsText = jsToggle.querySelector(".toggle-text"); >+ if (jsText) jsText.textContent = jsDisabled ? "Enable User JS" : "Disable User JS"; >+ } >+ >+ // Stylesheets button >+ const stylesheetsDisabled = >+ params.get("DISABLE_SYSPREF_OpacAdditionalStylesheet") === "yes" && >+ params.get("DISABLE_SYSPREF_opaclayoutstylesheet") === "yes" && >+ params.get("DISABLE_SYSPREF_intranetcolorstylesheet") === "yes" && >+ params.get("DISABLE_SYSPREF_intranetstylesheet") === "yes"; >+ const stylesheetsToggle = document.getElementById("toggleStylesheets"); >+ if (stylesheetsToggle) { >+ const stylesheetsText = stylesheetsToggle.querySelector(".toggle-text"); >+ if (stylesheetsText) stylesheetsText.textContent = stylesheetsDisabled ? "Enable Custom Stylesheets" : "Disable Custom Stylesheets"; >+ } >+ >+ // Update icon color based on whether any toggles are active >+ const anyDisabled = cssDisabled || jsDisabled || stylesheetsDisabled; >+ const debugIcon = document.getElementById("debug-icon"); >+ if (debugIcon) { >+ if (anyDisabled) { >+ debugIcon.style.color = "#ffc107"; // Warning/amber color >+ } else { >+ debugIcon.style.color = ""; // Default color >+ } >+ } >+ } >+ >+ // Update button text on page load >+ updateButtonText(); >+ >+ // User CSS toggle >+ const cssToggle = document.getElementById("toggleUserCSS"); >+ if (cssToggle) { >+ cssToggle.addEventListener("click", function (e) { >+ e.preventDefault(); >+ toggleURLParams(["DISABLE_SYSPREF_IntranetUserCSS", "DISABLE_SYSPREF_OPACUserCSS"]); >+ }); >+ } >+ >+ // User JS toggle >+ const jsToggle = document.getElementById("toggleUserJS"); >+ if (jsToggle) { >+ jsToggle.addEventListener("click", function (e) { >+ e.preventDefault(); >+ toggleURLParams(["DISABLE_SYSPREF_IntranetUserJS", "DISABLE_SYSPREF_OPACUserJS"]); >+ }); >+ } >+ >+ // Stylesheets toggle >+ const stylesheetsToggle = document.getElementById("toggleStylesheets"); >+ if (stylesheetsToggle) { >+ stylesheetsToggle.addEventListener("click", function (e) { >+ e.preventDefault(); >+ toggleURLParams(["DISABLE_SYSPREF_OpacAdditionalStylesheet", "DISABLE_SYSPREF_opaclayoutstylesheet", "DISABLE_SYSPREF_intranetcolorstylesheet", "DISABLE_SYSPREF_intranetstylesheet"]); >+ }); >+ } >+ })(); >+ </script> > [% END # IF %] > > [% IF ( footerjs ) %] >-- >2.51.1 >
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 39142
:
178123
|
178294
|
178481
|
178482
|
183392
|
183393
|
186913
|
186914
|
186915
|
186916
|
187061
|
189754
|
189755
|
189756
|
189757
|
189758
| 189759