From ff9f09ba80f205b7b44b44766fd660b721e9e993 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Wed, 1 Oct 2025 09:57:33 +0200
Subject: [PATCH] Adding helper text

---
 .../blueprint/ui/templates/edit.html          | 31 ++++++++++---------
 .../blueprint/ui/templates/preview.html       |  3 +-
 changedetectionio/templates/_helpers.html     |  8 +++++
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/changedetectionio/blueprint/ui/templates/edit.html b/changedetectionio/blueprint/ui/templates/edit.html
index f6e7f6a08..d3f66a66e 100644
--- a/changedetectionio/blueprint/ui/templates/edit.html
+++ b/changedetectionio/blueprint/ui/templates/edit.html
@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% block content %}
-{% from '_helpers.html' import render_field, render_checkbox_field, render_button, render_time_schedule_form, playwright_warning, only_playwright_type_watches_warning, render_conditions_fieldlist_of_formfields_as_table, render_ternary_field %}
+{% from '_helpers.html' import render_field, render_checkbox_field, render_button, render_time_schedule_form, playwright_warning, only_playwright_type_watches_warning, highlight_trigger_ignored_explainer, render_conditions_fieldlist_of_formfields_as_table, render_ternary_field %}
 {% from '_common_fields.html' import render_common_settings_form %}
 <script src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
 <script src="{{url_for('static_content', group='js', filename='vis.js')}}" defer></script>
@@ -351,21 +351,22 @@ Math: {{ 1 + 1 }}") }}
                 </div>
               </div>
               <div id="text-preview" style="display: none;" >
-                    <script>
-                        const preview_text_edit_filters_url="{{url_for('ui.ui_edit.watch_get_preview_rendered', uuid=uuid)}}";
-                    </script>
-                    <br>
-                    {#<div id="text-preview-controls"><span id="text-preview-refresh" class="pure-button button-xsmall">Refresh</span></div>#}
-                    <div class="minitabs-wrapper">
-                      <div class="minitabs-content">
-                          <div id="text-preview-inner" class="monospace-preview">
-                              <p>Loading...</p>
-                          </div>
-                          <div id="text-preview-before-inner" style="display: none;" class="monospace-preview">
-                              <p>Loading...</p>
-                          </div>
+                <script>
+                    const preview_text_edit_filters_url="{{url_for('ui.ui_edit.watch_get_preview_rendered', uuid=uuid)}}";
+                </script>
+                <br>
+                {#<div id="text-preview-controls"><span id="text-preview-refresh" class="pure-button button-xsmall">Refresh</span></div>#}
+                <div class="minitabs-wrapper">
+                  <div class="minitabs-content">
+                      <div id="text-preview-inner" class="monospace-preview">
+                          <p>Loading...</p>
                       </div>
-                    </div>
+                      <div id="text-preview-before-inner" style="display: none;" class="monospace-preview">
+                          <p>Loading...</p>
+                      </div>
+                  </div>
+                </div>
+                {{ highlight_trigger_ignored_explainer() }}
             </div>
           </div>
         </div>
diff --git a/changedetectionio/blueprint/ui/templates/preview.html b/changedetectionio/blueprint/ui/templates/preview.html
index 574ab9437..dd7c8497d 100644
--- a/changedetectionio/blueprint/ui/templates/preview.html
+++ b/changedetectionio/blueprint/ui/templates/preview.html
@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-
+{% from '_helpers.html' import highlight_trigger_ignored_explainer %}
 {% block content %}
     <script>
         const screenshot_url = "{{url_for('static_content', group='screenshot', filename=uuid)}}";
@@ -84,6 +84,7 @@
                 </tr>
                 </tbody>
             </table>
+            {{ highlight_trigger_ignored_explainer() }}
         </div>
 
         <div class="tab-pane-inner" id="screenshot">
diff --git a/changedetectionio/templates/_helpers.html b/changedetectionio/templates/_helpers.html
index 3ab14758b..c3fc1278b 100644
--- a/changedetectionio/templates/_helpers.html
+++ b/changedetectionio/templates/_helpers.html
@@ -233,4 +233,12 @@
         <br>
     {% endif %}
 
+{% endmacro %}
+
+{% macro highlight_trigger_ignored_explainer() %}
+                <p>
+                    <span title="Triggers a change if this text appears, AND something changed in the document." style="background-color: var(--highlight-trigger-text-bg-color); color: #fff; padding: 4px; border-radius: 2px; margin-right: 4px;">Triggered text</span>
+                    <span title="Ignored for calculating changes, but still shown." style="background-color: var(--highlight-ignored-text-bg-color); color: #fff; padding: 4px; border-radius: 2px; margin-right: 4px;">Ignored text</span>
+                    <span title="No change-detection will occur because this text exists." style="background-color: var(--highlight-blocked-text-bg-color); color: #fff; padding: 4px; border-radius: 2px; margin-right: 4px;">Blocked text</span>
+                </p>
 {% endmacro %}
\ No newline at end of file