[proxy] make uniform use of section labels in the web UI

11 files changed, 166 insertions, 104 deletions

diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
index eb9cb57..266e448 100644
--- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja
@@ -62,9 +62,9 @@ code in a proprietary work, I am not going to enforce this in court.
   </aside>
 {% endmacro %}
 
-{% macro form_label(label_text, label_name=none) %}
+{% macro label(label_text, label_name=none) %}
   {% set for_attr = label_name and (label_name + "_field") %}
-  <label {{ {'for': for_attr, 'class': 'block-with-bottom-margin'}|xmlattr }}>
+  <label {{ {'for': for_attr, 'class': 'section-label'}|xmlattr }}>
     {{ label_text }}
   </label>
 {% endmacro %}
@@ -134,11 +134,16 @@ code in a proprietary work, I am not going to enforce this in court.
               margin-top: 10px;
           }
 
-          .block-with-bottom-margin, .flex-row, aside, p {
+          .block-with-bottom-margin, .section-label, .flex-row, aside, p {
               display: block;
               margin: 0 0 10px 0;
           }
 
+          .section-label {
+              font-style: italic;
+              text-decoration: underline #ccc;
+          }
+
           .flex-row {
               display: flex;
               padding: 0;
diff --git a/src/hydrilla/proxy/web_ui/templates/import.html.jinja b/src/hydrilla/proxy/web_ui/templates/import.html.jinja
index a8f16a4..7636b77 100644
--- a/src/hydrilla/proxy/web_ui/templates/import.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/import.html.jinja
@@ -81,34 +81,34 @@ code in a proprietary work, I am not going to enforce this in court.
   <form method="POST">
     <input name="action" type="hidden" value="import_ad_hoc">
 
-    {{ form_label(_('web_ui.import.identifier_field_label'), 'identifier') }}
+    {{ label(_('web_ui.import.identifier_field_label'), 'identifier') }}
     {% if invalid_ad_hoc_identifier is defined %}
       {{ error_note(_('web_ui.err.invalid_ad_hoc_identifier')) }}
     {% endif %}
     {{ form_field('identifier') }}
 
-    {{ form_label(_('web_ui.import.long_name_field_label'), 'long_name') }}
+    {{ label(_('web_ui.import.long_name_field_label'), 'long_name') }}
     {{ form_field('long_name', required=false) }}
 
-    {{ form_label(_('web_ui.import.version_field_label'), 'version') }}
+    {{ label(_('web_ui.import.version_field_label'), 'version') }}
     {% if invalid_ad_hoc_version is defined %}
       {{ error_note(_('web_ui.err.invalid_ad_hoc_version')) }}
     {% endif %}
     {{ form_field('version', required=false) }}
 
-    {{ form_label(_('web_ui.import.description_field_label'), 'description') }}
+    {{ label(_('web_ui.import.description_field_label'), 'description') }}
     {{ form_field('description', required=false, height=3) }}
 
-    {{ form_label(_('web_ui.import.patterns_field_label'), 'patterns') }}
+    {{ label(_('web_ui.import.patterns_field_label'), 'patterns') }}
     {% if invalid_ad_hoc_patterns is defined %}
       {{ error_note(_('web_ui.err.invalid_ad_hoc_patterns')) }}
     {% endif %}
     {{ form_field('patterns', height=3) }}
 
-    {{ form_label(_('web_ui.import.script_text_field_label'), 'script_text') }}
+    {{ label(_('web_ui.import.script_text_field_label'), 'script_text') }}
     {{ form_field('script_text', required=false, height=15) }}
 
-    {{ form_label(_('web_ui.import.lic_text_field_label'), 'license_text') }}
+    {{ label(_('web_ui.import.lic_text_field_label'), 'license_text') }}
     {{ form_field('license_text', required=false, height=10) }}
 
     <div class="flex-row">
diff --git a/src/hydrilla/proxy/web_ui/templates/import/checkbox_tricks.html.jinja b/src/hydrilla/proxy/web_ui/templates/import/checkbox_tricks.html.jinja
new file mode 100644
index 0000000..999208b
--- /dev/null
+++ b/src/hydrilla/proxy/web_ui/templates/import/checkbox_tricks.html.jinja
@@ -0,0 +1,35 @@
+{#
+SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+Proxy web UI reusable macros for checkbox-based dynamically displayed elements.
+
+This file is part of Hydrilla&Haketilo.
+
+Copyright (C) 2022 Wojtek Kosior
+
+Dual licensed under
+* GNU General Public License v3.0 or later and
+* Creative Commons Attribution Share Alike 4.0 International.
+
+You can choose to use either of these licenses or both.
+
+
+I, Wojtek Kosior, thereby promise not to sue for violation of this
+file's licenses. Although I request that you do not make use of this
+code in a proprietary work, I am not going to enforce this in court.
+#}
+
+{% macro hider_id(name) -%}
+  {{ name }}_chbx
+{%- endmacro %}
+
+{% macro sibling_hider(button_text, name, initial_show=false) %}
+  {% set attrs = {'type': 'checkbox', 'class': 'chbx-tricks-show-hide'} %}
+  {% do attrs.update({'id': hider_id(name)}) %}
+  {% do attrs.update({'checked': none if initial_show else ''}) %}
+  <input {{ attrs|xmlattr }}>
+  <label for="{{ hider_id(name) }}"
+         class="green-button block-with-bottom-margin">
+    {{ button_text }}
+  </label>
+{% endmacro %}
diff --git a/src/hydrilla/proxy/web_ui/templates/index.html.jinja b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
index ce77b24..f05cf4a 100644
--- a/src/hydrilla/proxy/web_ui/templates/index.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/index.html.jinja
@@ -47,6 +47,8 @@ code in a proprietary work, I am not going to enforce this in court.
     {{ _('web_ui.home.heading.options') }}
   </h4>
 
+  {{ label(_('web_ui.home.mapping_usage_mode_label')) }}
+
   {% set use_enabled_but_classes  = ['green-button'] %}
   {% set use_auto_but_classes     = ['green-button'] %}
   {% set use_question_but_classes = ['green-button'] %}
@@ -81,6 +83,8 @@ code in a proprietary work, I am not going to enforce this in court.
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.home.script_blocking_mode_label')) }}
+
   {% set allow_but_classes = ['red-button'] %}
   {% set block_but_classes = ['blue-button'] %}
 
@@ -106,6 +110,8 @@ code in a proprietary work, I am not going to enforce this in court.
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.home.advanced_features_label')) }}
+
   {% set advanced_user_but_classes = ['red-button'] %}
   {% set simple_user_but_classes   = ['blue-button'] %}
 
@@ -133,6 +139,8 @@ code in a proprietary work, I am not going to enforce this in court.
   {% if orphan_item_stats.mappings > 0 or orphan_item_stats.resources > 0 %}
     <div class="horizontal-separator"></div>
 
+    {{ label(_('web_ui.home.orphans_label')) }}
+
     <p>
       {% if settings.advanced_user %}
         {% if orphan_item_stats.mappings > 0 %}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
index a1056b1..c7574f1 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/item_viewversion.html.jinja
@@ -35,11 +35,10 @@ code in a proprietary work, I am not going to enforce this in court.
 
   {{ super() }}
 
+  {{ label(_('web_ui.items.single_version.version_label')) }}
+
   <p>
-    {{
-      _('web_ui.items.single_version.version_{}')
-            .format(versioned_identifier_with_repo(version_display_info))
-    }}
+    {{ versioned_identifier_with_repo(version_display_info) }}
   </p>
 
   <div class="horizontal-separator"></div>
@@ -56,6 +55,8 @@ code in a proprietary work, I am not going to enforce this in court.
   %}
     <div class="horizontal-separator"></div>
 
+    {{ label(_('web_ui.items.single_version.install_uninstall_label')) }}
+
     {% set install_but_classes   = ['green-button'] %}
     {% set uninstall_but_classes = ['green-button'] %}
     {% if version_display_info.installed == InstalledStatus.FAILED_TO_INSTALL %}
@@ -67,7 +68,7 @@ code in a proprietary work, I am not going to enforce this in court.
         set uninstall_text =
             _('web_ui.items.single_version.leave_uninstalled_button')
       %}
-      <div>{% block item_install_failed_msg required %}{% endblock %}</div>
+      <p>{% block item_install_failed_msg required %}{% endblock %}</p>
     {% else %}
       {% set install_text   = _('web_ui.items.single_version.install_button') %}
       {%
@@ -81,9 +82,11 @@ code in a proprietary work, I am not going to enforce this in court.
         %}
           {% do uninstall_but_classes.append('disabled-button') %}
         {% endif %}
+        <p>{% block item_is_installed_msg required %}{% endblock %}</p>
       {% else %}
         {# version_display_info.installed == InstalledStatus.NOT_INSTALLED #}
         {% do uninstall_but_classes.append('disabled-button') %}
+        <p>{% block item_is_not_installed_msg required %}{% endblock %}</p>
       {% endif %}
     {% endif %}{# else/ version_display_info.installed == InstalledStatus.... #}
 
diff --git a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
index 13ee41a..0454391 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/library_viewversion.html.jinja
@@ -42,6 +42,14 @@ code in a proprietary work, I am not going to enforce this in court.
   {{ _('web_ui.items.single_version.library.install_failed') }}
 {% endblock %}
 
+{% block item_is_installed_msg %}
+  {{ _('web_ui.items.single_version.library.is_installed') }}
+{% endblock %}
+
+{% block item_is_not_installed_msg %}
+  {{ _('web_ui.items.single_version.library.is_not_installed') }}
+{% endblock %}
+
 {% block version_list_heading %}
   {{ _('web_ui.items.single_version.library.version_list_heading') }}
 {% endblock %}
@@ -53,6 +61,8 @@ code in a proprietary work, I am not going to enforce this in court.
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.items.single_version.library.enabled_label')) }}
+
   <p>
     {% if version_display_info.active == ActiveStatus.REQUIRED %}
       {{ _('web_ui.items.single_version.library.item_required') }}
diff --git a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
index 31f5e2e..699469e 100644
--- a/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/items/package_viewversion.html.jinja
@@ -42,6 +42,14 @@ code in a proprietary work, I am not going to enforce this in court.
   {{ _('web_ui.items.single_version.package.install_failed') }}
 {% endblock %}
 
+{% block item_is_installed_msg %}
+  {{ _('web_ui.items.single_version.package.is_installed') }}
+{% endblock %}
+
+{% block item_is_not_installed_msg %}
+  {{ _('web_ui.items.single_version.package.is_not_installed') }}
+{% endblock %}
+
 {% block version_list_heading %}
   {{ _('web_ui.items.single_version.package.version_list_heading') }}
 {% endblock %}
@@ -53,6 +61,8 @@ code in a proprietary work, I am not going to enforce this in court.
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.items.single_version.package.enabled_label')) }}
+
   {% set enable_but_classes = ['blue-button'] %}
   {% set unenable_but_classes = ['green-button'] %}
   {% set disable_but_classes = ['red-button'] %}
@@ -96,6 +106,8 @@ code in a proprietary work, I am not going to enforce this in court.
   {% if display_info.enabled == EnabledStatus.ENABLED %}
     <div class="horizontal-separator"></div>
 
+    {{ label(_('web_ui.items.single_version.package.pinning_label')) }}
+
     {% set unpin_but_classes = ['green-button'] %}
     {% set pin_repo_but_classes = ['green-button'] %}
     {% set pin_ver_but_classes = ['green-button'] %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
index be4933a..f635444 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/add.html.jinja
@@ -25,7 +25,7 @@ code in a proprietary work, I am not going to enforce this in court.
 {% block main %}
   <h3>{{ _('web_ui.repos.add.heading') }}</h3>
   <form method="POST">
-    {{ form_label(_('web_ui.repos.add.name_field_label'), 'name') }}
+    {{ label(_('web_ui.repos.add.name_field_label'), 'name') }}
     {% if repo_name_invalid is defined %}
       {{ error_note(_('web_ui.err.repo_name_invalid')) }}
     {% endif %}
@@ -34,7 +34,7 @@ code in a proprietary work, I am not going to enforce this in court.
     {% endif %}
     {{ form_field('name') }}
 
-    {{ form_label(_('web_ui.repos.add.url_field_label'), 'url') }}
+    {{ label(_('web_ui.repos.add.url_field_label'), 'url') }}
     {% if repo_url_invalid is defined %}
       {{ error_note(_('web_ui.err.repo_url_invalid')) }}
     {% endif %}
diff --git a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
index d2c85df..04075c4 100644
--- a/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/repos/show_single.html.jinja
@@ -28,6 +28,8 @@ code in a proprietary work, I am not going to enforce this in court.
   {% include 'include/checkbox_tricks_style.css.jinja' %}
 {% endblock %}
 
+{% import 'import/checkbox_tricks.html.jinja' as tricks %}
+
 {% block main %}
   {% if file_installation_error is defined %}
     {{ error_note(_('web_ui.err.file_installation_error')) }}
@@ -47,18 +49,17 @@ code in a proprietary work, I am not going to enforce this in court.
     <h3>
       {{ _('web_ui.repos.single.heading.name_{}').format(display_info.name) }}
     </h3>
-    {% if repo_name_invalid is defined or repo_name_taken is defined %}
-      {% set checked_attr = '' %}
-    {% else %}
-      {% set checked_attr = 'checked=""' %}
-    {% endif %}
     {% if not display_info.deleted %}
-      <input id="hide_name_edit_form" type="checkbox"
-             class="chbx-tricks-show-hide" {{ checked_attr }}>
-      <label for="hide_name_edit_form"
-             class="green-button block-with-bottom-margin">
-        {{ _('web_ui.repos.single.update_name_button') }}
-      </label>
+      {{ label(_('web_ui.repos.single.name_label')) }}
+
+      <p>
+        {{ display_info.name }}
+      </p>
+
+      {% set button_text = _('web_ui.repos.single.update_name_button') %}
+      {% set initial_show = repo_name_invalid is defined %}
+      {% set initial_show = initial_show or repo_name_taken is defined %}
+      {{ tricks.sibling_hider(button_text, 'edit_name', initial_show) }}
 
       <form method="POST">
         <input type="hidden" name="action" value="update_repo_data">
@@ -76,14 +77,14 @@ code in a proprietary work, I am not going to enforce this in court.
         </div>
 
         <div class="flex-row">
-          <button class="green-button button-bordering-right">
+          <label for="{{ tricks.hider_id('edit_name') }}"
+                 class="red-button button-brodering-right">
+            {{ _('web_ui.repos.single.no_update_name_button') }}
+          </label>
+          <div class="button-row-separator"></div>
+          <button class="green-button button-bordering-left">
             {{ _('web_ui.repos.single.commit_update_name_button') }}
           </button>
-          <div class="button-row-separator"></div>
-          <label for="hide_name_edit_form"
-                 class="green-button button-bordering-left">
-            {{ _('web_ui.repos.single.abort_update_name_button') }}
-          </label>
         </div>
       </form>
 
@@ -98,21 +99,15 @@ code in a proprietary work, I am not going to enforce this in court.
 
     <div class="horizontal-separator"></div>
   {% elif not display_info.deleted %}
+    {{ label(_('web_ui.repos.single.url_label')) }}
+
     <p>
-      {{ _('web_ui.repos.single.url_is_{}').format(display_info.url) }}
+      {{ display_info.url }}
     </p>
 
-    {% if repo_url_invalid is defined %}
-      {% set checked_attr = '' %}
-    {% else %}
-      {% set checked_attr = 'checked=""' %}
-    {% endif %}
-    <input id="hide_url_edit_form" type="checkbox" class="chbx-tricks-show-hide"
-            {{ checked_attr }}>
-    <label for="hide_url_edit_form"
-           class="green-button block-with-bottom-margin">
-      {{ _('web_ui.repos.single.update_url_button') }}
-    </label>
+    {% set button_text = _('web_ui.repos.single.update_url_button') %}
+    {% set initial_show = repo_url_invalid is defined %}
+    {{ tricks.sibling_hider(button_text, 'edit_url', initial_show) }}
 
     <form method="POST">
       <input type="hidden" name="action" value="update_repo_data">
@@ -121,43 +116,37 @@ code in a proprietary work, I am not going to enforce this in court.
           {{ error_note(_('web_ui.err.repo_url_invalid')) }}
       {% endif %}
 
-      <div class="flex-row">
-        <input name="url" value="{{ display_info.url }}" required="">
-      </div>
+      {{ form_field('url', sep_after=false) }}
 
       <div class="flex-row">
-        <button class="green-button button-bordering-right">
+        <label for="{{ tricks.hider_id('edit_url') }}"
+               class="red-button button-brodering-right">
+          {{ _('web_ui.repos.single.no_update_url_button') }}
+        </label>
+        <div class="button-row-separator"></div>
+        <button class="green-button button-bordering-left">
           {{ _('web_ui.repos.single.commit_update_url_button') }}
         </button>
-        <div class="button-row-separator"></div>
-        <label for="hide_url_edit_form"
-               class="green-button button-bordering-left">
-          {{ _('web_ui.repos.single.abort_update_url_button') }}
-        </label>
       </div>
     </form>
 
     <div class="horizontal-separator"></div>
 
-    <div>
-      <p>
-        {% if display_info.last_refreshed is none %}
-          {{ _('web_ui.repos.single.repo_never_refreshed') }}
-        {% else %}
-          {{
-            _('web_ui.repos.single.last_refreshed_{}')
-                .format(display_info.last_refreshed.strftime('%F %H:%M'))
-          }}
-        {% endif %}
-      </p>
+    {{ label(_('web_ui.repos.single.last_refreshed_label')) }}
 
-      {% set button_text = _('web_ui.repos.single.refresh_now_button') %}
-      {% set extra_fields = {'action': 'refresh_repo'} %}
-      {{ button_row([(['green-button'], button_text, extra_fields)]) }}
-    </div>
+    <p>
+      {% if display_info.last_refreshed is none %}
+        {{ _('web_ui.repos.single.repo_never_refreshed') }}
+      {% else %}
+        {{ display_info.last_refreshed.strftime('%F %H:%M') }}
+      {% endif %}
+    </p>
 
     <div class="horizontal-separator"></div>
   {% endif %}{# not display_info.deleted (elif) #}
+
+  {{ label(_('web_ui.repos.single.stats_label')) }}
+
   <p>
     {% if settings.advanced_user %}
       {{
@@ -175,11 +164,19 @@ code in a proprietary work, I am not going to enforce this in court.
     {% endif %}
   </p>
 
-  {% if not display_info.is_local_semirepo and not display_info.deleted %}
+  {% if not display_info.deleted %}
     <div class="horizontal-separator"></div>
 
-    {% set button_text = _('web_ui.repos.single.remove_button') %}
-    {% set extra_fields = {'action': 'remove_repo'} %}
-    {{ button_row([(['green-button'], button_text, extra_fields)]) }}
+    {{ label(_('web_ui.repos.single.actions_label')) }}
+
+    {% set remove_text  = _('web_ui.repos.single.remove_button') %}
+    {% set refresh_text = _('web_ui.repos.single.refresh_button') %}
+
+    {{
+      button_row([
+          (['green-button'], refresh_text, {'action': 'refresh_repo'}),
+          (['red-button'], remove_text, {'action': 'remove_repo'})
+      ])
+    }}
   {% endif %}
 {% endblock %}
diff --git a/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja b/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
index 3f7e2a7..430c5ca 100644
--- a/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/rules/add.html.jinja
@@ -25,23 +25,15 @@ code in a proprietary work, I am not going to enforce this in court.
 {% block main %}
   <h3>{{ _('web_ui.rules.add.heading') }}</h3>
   <form method="POST">
+    {{ label(_('web_ui.rules.add.pattern_field_label'), 'pattern') }}
+
     {% if rule_pattern_invalid is defined %}
       {{ error_note(_('web_ui.err.rule_pattern_invalid')) }}
     {% endif %}
 
-    <label for="pattern_field" class="block-with-bottom-margin">
-      {{ _('web_ui.rules.add.pattern_field_label') }}
-    </label>
-
-    <div class="flex-row">
-      <input id="pattern_field" name="pattern" required="">
-    </div>
-
-    <div class="horizontal-separator"></div>
+    {{ form_field('pattern') }}
 
-    <label class="block-with-bottom-margin">
-      {{ _('web_ui.rules.add.block_or_allow_label') }}
-    </label>
+    {{ label(_('web_ui.rules.add.block_or_allow_label'), 'allow') }}
 
     <div class="block-with-bottom-margin">
       <input id="block_box" name="allow" type="radio" value="false" checked="">
diff --git a/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja b/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
index 1fda236..9bf2c75 100644
--- a/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
+++ b/src/hydrilla/proxy/web_ui/templates/rules/show_single.html.jinja
@@ -28,6 +28,8 @@ code in a proprietary work, I am not going to enforce this in court.
   {% include 'include/checkbox_tricks_style.css.jinja' %}
 {% endblock %}
 
+{% import 'import/checkbox_tricks.html.jinja' as tricks %}
+
 {% block main %}
   <h3>
     {% if display_info.allow_scripts %}
@@ -37,21 +39,15 @@ code in a proprietary work, I am not going to enforce this in court.
     {% endif %}
   </h3>
 
+  {{ label(_('web_ui.rules.single.pattern_label')) }}
+
   <p>
-    {{ _('web_ui.rules.single.pattern_is_{}').format(display_info.pattern) }}
+    {{ display_info.pattern }}
   </p>
 
-  {% if rule_pattern_invalid is defined %}
-    {% set checked_attr = '' %}
-  {% else %}
-    {% set checked_attr = 'checked=""' %}
-  {% endif %}
-  <input id="hide_pattern_edit_form" type="checkbox"
-         class="chbx-tricks-show-hide" {{ checked_attr }}>
-  <label for="hide_pattern_edit_form"
-         class="green-button block-with-bottom-margin">
-    {{ _('web_ui.rules.single.update_pattern_button') }}
-  </label>
+  {% set button_text = _('web_ui.rules.single.update_pattern_button') %}
+  {% set initial_show = rule_pattern_invalid is defined %}
+  {{ tricks.sibling_hider(button_text, 'edit_pattern', initial_show) }}
 
   <form method="POST">
     <input type="hidden" name="action" value="update_rule_data">
@@ -65,19 +61,21 @@ code in a proprietary work, I am not going to enforce this in court.
     </div>
 
     <div class="flex-row">
-      <button class="green-button button-bordering-right">
+      <label for="{{ tricks.hider_id('edit_pattern') }}"
+             class="red-button button-bordering-right">
+        {{ _('web_ui.rules.single.no_update_pattern_button') }}
+      </label>
+      <div class="button-row-separator"></div>
+      <button class="green-button button-bordering-left">
         {{ _('web_ui.rules.single.commit_update_pattern_button') }}
       </button>
-      <div class="button-row-separator"></div>
-      <label for="hide_pattern_edit_form"
-             class="green-button button-bordering-left">
-        {{ _('web_ui.rules.single.abort_update_pattern_button') }}
-      </label>
     </div>
   </form>
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.rules.single.block_or_allow_label')) }}
+
   {% set allow_but_classes = ['red-button'] %}
   {% set block_but_classes = ['blue-button'] %}
 
@@ -100,6 +98,8 @@ code in a proprietary work, I am not going to enforce this in court.
 
   <div class="horizontal-separator"></div>
 
+  {{ label(_('web_ui.rules.single.actions_label')) }}
+
   {% set button_text = _('web_ui.rules.single.remove_button') %}
   {% set extra_fields = {'action': 'remove_rule'} %}
   {{ button_row([(['green-button'], button_text, extra_fields)]) }}