From 56504a71b46ce13a6ca0181ffa6ec64ebe1f5314 Mon Sep 17 00:00:00 2001
From: thecozies <79979276+thecozies@users.noreply.github.com>
Date: Thu, 4 Apr 2024 08:32:22 -0500
Subject: [PATCH] global description handler and impl

---
 assets/config_menu.rml          |   7 +-
 assets/config_menu/general.rml  |  22 +++++--
 assets/config_menu/graphics.rml | 112 ++++++++++++++++----------------
 assets/config_menu/sound.rml    |  22 +++++--
 src/ui/ui_config.cpp            |  37 +++++++----
 5 files changed, 112 insertions(+), 88 deletions(-)

diff --git a/assets/config_menu.rml b/assets/config_menu.rml
index eac2c66..0511d2f 100644
--- a/assets/config_menu.rml
+++ b/assets/config_menu.rml
@@ -22,9 +22,6 @@
 			flex: 1;
     		text-align: center;
 		}
-		#tab_graphics:selected {
-			nav-down:#res_auto;
-		}
 	</style>
 	<link type="text/template" href="config_menu/general.rml" />
 	<link type="text/template" href="config_menu/controls.rml" />
@@ -38,7 +35,7 @@
 			<div class="centered-page" onclick="close_config_menu_backdrop">
 				<div class="centered-page__modal">
 					<tabset class="tabs" id="config_tabset">
-						<tab class="tab" autofocus>
+						<tab class="tab" autofocus id="tab_general">
 							<div>General</div>
 							<div class="tab__indicator"></div>
 						</tab>
@@ -59,7 +56,7 @@
 						<panel class="config" data-model="graphics_model">
 							<template src="config-menu__graphics" />
 						</panel>
-						<tab class="tab">
+						<tab class="tab" id="tab_sound">
 							<div>Sound</div>
 							<div class="tab__indicator"></div>
 						</tab>
diff --git a/assets/config_menu/general.rml b/assets/config_menu/general.rml
index 3d4e96e..ca9038b 100644
--- a/assets/config_menu/general.rml
+++ b/assets/config_menu/general.rml
@@ -6,35 +6,45 @@
             <div class="config__hz-wrapper">
                 <!-- Options -->
                 <div class="config__wrapper">
-                    <div class="config-option">
+                    <!-- targeting mode -->
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
                         <label class="config-option__title">Targeting Mode</label>
                         <div class="config-option__list">
                             <input
                                 type="radio"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(0)"
                                 name="targeting_mode"
                                 data-checked="targeting_mode"
                                 value="Switch"
                                 id="tm_switch"
+                                style="nav-up: #tab_general; nav-down: #rumble_strength_input"
                             />
                             <label class="config-option__tab-label" for="tm_switch">Switch</label>
 
                             <input
                                 type="radio"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(0)"
                                 name="targeting_mode"
                                 data-checked="targeting_mode"
                                 value="Hold"
                                 id="tm_hold"
+                                style="nav-up: #tab_general; nav-down: #rumble_strength_input"
                             />
                             <label class="config-option__tab-label" for="tm_hold">Hold</label>
                         </div>
                     </div>
 
-                    <div class="config-option">
+                    <!-- rumble strength -->
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
                         <label class="config-option__title">Rumble Strength</label>
                         <div class="config-option__range-wrapper config-option__list">
                             <label class="config-option__range-label">{{rumble_strength}}</label>
                             <input
                                 class="nav-vert"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(1)"
                                 id="rumble_strength_input"
                                 type="range"
                                 min="0"
@@ -47,11 +57,11 @@
                 </div>
                 <!-- Descriptions -->
                 <div class="config__wrapper">
-                    <p data-if="0 == 0">
-                        First.
+                    <p data-if="cur_config_index == 0">
+                        Whether or not targeting is done incorrectly, or targets while you hold the button.
                     </p>
-                    <p data-if="1 == 1">
-                        Second.
+                    <p data-if="cur_config_index == 1">
+                        How much your controller go brrrrr
                     </p>
                 </div>
             </div>
diff --git a/assets/config_menu/graphics.rml b/assets/config_menu/graphics.rml
index c7b99b1..1e1dedb 100644
--- a/assets/config_menu/graphics.rml
+++ b/assets/config_menu/graphics.rml
@@ -4,13 +4,13 @@
     <body>
         <form class="config__form">
             <div class="config__hz-wrapper">
-                <div class="config__wrapper" data-event-mouseout="set_current_gfx_description(-1)">
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(0)">
+                <div class="config__wrapper" data-event-mouseout="set_cur_config_index(-1)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
                         <label class="config-option__title">Resolution</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(0)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(0)"
                                 name="resolution"
                                 data-checked="res_option"
                                 value="Original"
@@ -20,8 +20,8 @@
                             />
                             <label class="config-option__tab-label" for="res_original">Original</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(0)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(0)"
                                 name="resolution"
                                 data-checked="res_option"
                                 value="Original2x"
@@ -31,8 +31,8 @@
                             />
                             <label class="config-option__tab-label" for="res_2x">Original 2x</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(0)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(0)"
                                 name="resolution"
                                 data-checked="res_option"
                                 value="Auto"
@@ -44,12 +44,12 @@
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(1)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
                         <label class="config-option__title">Downsampling Quality</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(1)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(1)"
                                 name="downsampling"
                                 data-attrif-disabled="res_option == 'Auto'"
                                 data-checked="ds_option"
@@ -59,8 +59,8 @@
                             />
                             <label class="config-option__tab-label" for="ds_windowed">Off</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(1)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(1)"
                                 name="downsampling"
                                 data-attrif-disabled="res_option == 'Auto'"
                                 data-checked="ds_option"
@@ -70,8 +70,8 @@
                             />
                             <label class="config-option__tab-label" for="ds_2x">2x</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(1)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(1)"
                                 name="downsampling"
                                 data-attrif-disabled="res_option == 'Auto'"
                                 data-checked="ds_option"
@@ -84,12 +84,12 @@
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(2)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(2)">
                         <label class="config-option__title">Aspect Ratio</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(2)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(2)"
                                 name="aspectratio"
                                 data-checked="ar_option"
                                 value="Original"
@@ -99,8 +99,8 @@
                             />
                             <label class="config-option__tab-label" for="ar_original">Original</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(2)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(2)"
                                 name="aspectratio"
                                 data-checked="ar_option"
                                 value="Expand"
@@ -112,12 +112,12 @@
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(3)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(3)">
                         <label class="config-option__title">Window Mode</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(3)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(3)"
                                 name="windowmode"
                                 data-checked="wm_option"
                                 value="Windowed"
@@ -126,8 +126,8 @@
                             />
                             <label class="config-option__tab-label" for="wm_windowed">Windowed</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(3)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(3)"
                                 name="windowmode"
                                 data-checked="wm_option"
                                 value="Fullscreen"
@@ -138,12 +138,12 @@
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(4)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(4)">
                         <label class="config-option__title">Framerate</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)" 
-                                data-event-focus="set_current_gfx_description(4)"
+                                data-event-blur="set_cur_config_index(-1)" 
+                                data-event-focus="set_cur_config_index(4)"
                                 name="refreshrate"
                                 data-checked="rr_option"
                                 value="Original"
@@ -152,8 +152,8 @@
                             />
                             <label class="config-option__tab-label" for="rr_original">Original</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)" 
-                                data-event-focus="set_current_gfx_description(4)"
+                                data-event-blur="set_cur_config_index(-1)" 
+                                data-event-focus="set_cur_config_index(4)"
                                 name="refreshrate"
                                 data-checked="rr_option"
                                 value="Display"
@@ -162,8 +162,8 @@
                             />
                             <label class="config-option__tab-label" for="rr_display">Display</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)" 
-                                data-event-focus="set_current_gfx_description(4)"
+                                data-event-blur="set_cur_config_index(-1)" 
+                                data-event-focus="set_cur_config_index(4)"
                                 name="refreshrate"
                                 data-checked="rr_option"
                                 value="Manual"
@@ -175,8 +175,8 @@
                         <div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
                             <label class="config-option__range-label">{{rr_manual_value}}</label>
                             <input
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(4)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(4)"
                                 id="rr_manual_input"
                                 type="range"
                                 min="20"
@@ -187,12 +187,12 @@
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(5)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(5)">
                         <label class="config-option__title">MS Anti-Aliasing</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(5)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(5)"
                                 name="antialiasing"
                                 data-checked="msaa_option"
                                 value="None"
@@ -201,8 +201,8 @@
                             />
                             <label class="config-option__tab-label" for="msaa_none">None</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(5)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(5)"
                                 name="antialiasing"
                                 data-attrif-disabled="!msaa2x_supported"
                                 data-checked="msaa_option"
@@ -212,8 +212,8 @@
                             />
                             <label class="config-option__tab-label" for="msaa_2x">2x</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(5)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(5)"
                                 name="antialiasing"
                                 data-attrif-disabled="!msaa4x_supported"
                                 data-checked="msaa_option"
@@ -222,18 +222,16 @@
                                 data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
                             />
                             <label class="config-option__tab-label" for="msaa_4x">4x</label>
-                            <!-- <input type="radio" data-event-blur="set_current_gfx_description(-1)" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
-                            <label class="config-option__tab-label" for="msaa_8x">8x</label> -->
                             <div class="config-option__details" data-if="!sample_positions_supported">Not available (missing sample positions support)</div>
                         </div>
                     </div>
 
-                    <div class="config-option" data-event-mouseover="set_current_gfx_description(6)">
+                    <div class="config-option" data-event-mouseover="set_cur_config_index(6)">
                         <label class="config-option__title">HUD Placement</label>
                         <div class="config-option__list">
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(6)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(6)"
                                 name="hr-option"
                                 data-checked="hr_option"
                                 value="Original"
@@ -242,8 +240,8 @@
                             />
                             <label class="config-option__tab-label" for="hr_original">Original</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(6)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(6)"
                                 name="hr-option"
                                 data-checked="hr_option"
                                 value="Clamp16x9"
@@ -252,8 +250,8 @@
                             />
                             <label class="config-option__tab-label" for="hr_16_9">16:9</label>
                             <input type="radio"
-                                data-event-blur="set_current_gfx_description(-1)"
-                                data-event-focus="set_current_gfx_description(6)"
+                                data-event-blur="set_cur_config_index(-1)"
+                                data-event-focus="set_cur_config_index(6)"
                                 name="hr-option"
                                 data-checked="hr_option"
                                 value="Full"
@@ -266,34 +264,34 @@
 
                 </div>
                 <div class="config__wrapper">
-                    <p data-if="cur_gfx_description == 0">
+                    <p data-if="cur_config_index == 0">
                         Sets the output resolution of the game. Original matches the game's original 240p resolution. Original 2x will render at 480p. Auto will scale based on the game window's resolution.
                     </p>
-                    <p data-if="cur_gfx_description == 1">
+                    <p data-if="cur_config_index == 1">
                         Renders at a higher resolution and scales it down to the output resolution for increased quality. Only available in Original and Original 2x resolution.
                         <br />
                         <br />
                         Note: 4x downsampling quality at Original 2x resolution may cause performance issues on low end devices, as it will cause the game to render at almost 4k internal resolution.
                     </p>
-                    <p data-if="cur_gfx_description == 2">
+                    <p data-if="cur_config_index == 2">
                         Sets the horizontal aspect ratio. Original uses the game's original 4:3 aspect ratio. Expand will adjust to match the game window's aspect ratio.
                     </p>
-                    <p data-if="cur_gfx_description == 3">
+                    <p data-if="cur_config_index == 3">
                         Sets whether the game should display on a Window or Fullscreen. You can also use Alt + Enter to toggle this option.
                     </p>
-                    <p data-if="cur_gfx_description == 4">
+                    <p data-if="cur_config_index == 4">
                         Sets the game's output framerate. This option does not affect gameplay.
                         <br />
                         <br />
                         Note: If you have issues with Display mode while using an external frame limiter, use Manual mode instead and configure it to that same frame limit.
                     </p>
-                    <p data-if="cur_gfx_description == 5">
+                    <p data-if="cur_config_index == 5">
                         Sets the multisample anti-aliasing (MSAA) quality level. This reduces jagged edges in the final image at the expense of rendering performance.
                         <br />
                         <br />
                         Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.
                     </p>
-                    <p data-if="cur_gfx_description == 6">
+                    <p data-if="cur_config_index == 6">
                         Adjusts the placement of HUD elements to fit the selected aspect ratio. Expand will use the aspect ratio of the game's output window.
                     </p>
                 </div>
diff --git a/assets/config_menu/sound.rml b/assets/config_menu/sound.rml
index 4a03381..2b0a46b 100644
--- a/assets/config_menu/sound.rml
+++ b/assets/config_menu/sound.rml
@@ -6,40 +6,48 @@
             <div class="config__hz-wrapper">
                 <!-- Options -->
                 <div class="config__wrapper">
-                        <div class="config-option">
+                        <div class="config-option" data-event-mouseover="set_cur_config_index(0)">
                             <label class="config-option__title">Background Music Volume</label>
                             <div class="config-option__range-wrapper config-option__list">
                                 <label class="config-option__range-label">{{bgm_volume}}</label>
                                 <input
+                                    data-event-blur="set_cur_config_index(-1)"
+                                    data-event-focus="set_cur_config_index(0)"
                                     class="nav-vert"
                                     id="bgm_volume_input"
                                     type="range"
                                     min="0"
                                     max="100"
-                                    style="flex: 1; margin: 0dp;"
+                                    style="flex: 1; margin: 0dp; nav-up: #tab_sound; nav-down: #lhb_on;"
                                     data-value="bgm_volume"
                                 />
                             </div>
                         </div>
 
-                        <div class="config-option">
+                        <div class="config-option" data-event-mouseover="set_cur_config_index(1)">
                             <label class="config-option__title">Low Health Beeps</label>
                             <div class="config-option__list">
                                 <input
                                     type="radio"
+                                    data-event-blur="set_cur_config_index(-1)"
+                                    data-event-focus="set_cur_config_index(1)"
                                     name="lhb"
                                     data-checked="low_health_beeps_enabled"
                                     value="1"
                                     id="lhb_on"
+                                    style="nav-up: #bgm_volume_input"
                                 />
                                 <label class="config-option__tab-label" for="lhb_on">On</label>
 
                                 <input
                                     type="radio"
+                                    data-event-blur="set_cur_config_index(-1)"
+                                    data-event-focus="set_cur_config_index(1)"
                                     name="lhb"
                                     data-checked="low_health_beeps_enabled"
                                     value="0"
                                     id="lhb_off"
+                                    style="nav-up: #bgm_volume_input"
                                 />
                                 <label class="config-option__tab-label" for="lhb_off">Off</label>
                             </div>
@@ -47,11 +55,11 @@
                 </div>
                 <!-- Descriptions -->
                 <div class="config__wrapper">
-                    <p data-if="0 == 0">
-                        First.
+                    <p data-if="cur_config_index == 0">
+                        Controls the overall volume of background music
                     </p>
-                    <p data-if="1 == 1">
-                        Second.
+                    <p data-if="cur_config_index == 1">
+                        Toggles whether or not the low-health beeping sound plays.
                     </p>
                 </div>
             </div>
diff --git a/src/ui/ui_config.cpp b/src/ui/ui_config.cpp
index 39c86ec..419fc7c 100644
--- a/src/ui/ui_config.cpp
+++ b/src/ui/ui_config.cpp
@@ -70,7 +70,7 @@ void bind_atomic(Rml::DataModelConstructor& constructor, Rml::DataModelHandle ha
 static int scanned_binding_index = -1;
 static int scanned_input_index = -1;
 static int focused_input_index = -1;
-static int focused_gfx_index = -1;
+static int focused_config_option_index = -1;
 
 static bool msaa2x_supported = false;
 static bool msaa4x_supported = false;
@@ -292,6 +292,22 @@ public:
 				recomp::do_warp(debug_context.area_index, debug_context.scene_index, debug_context.entrance_index);
 			});
 	}
+
+	void bind_config_list_events(Rml::DataModelConstructor &constructor) {
+		constructor.BindEventCallback("set_cur_config_index",
+			[](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) {
+				int option_index = inputs.at(0).Get<size_t>();
+				// watch for mouseout being overzealous during event bubbling, only clear if the event's attached element matches the current
+				if (option_index == -1 && event.GetType() == "mouseout" && event.GetCurrentElement() != event.GetTargetElement()) {
+					return;
+				}
+				focused_config_option_index = option_index;
+				model_handle.DirtyVariable("cur_config_index");
+			});
+
+		constructor.Bind("cur_config_index", &focused_config_option_index);
+	}
+
 	void make_graphics_bindings(Rml::Context* context) {
 		Rml::DataModelConstructor constructor = context->CreateDataModel("graphics_model");
 		if (!constructor) {
@@ -303,6 +319,7 @@ public:
 			std::this_thread::sleep_for(50ms);
 		}
 		new_options = ultramodern::get_graphics_config();
+		bind_config_list_events(constructor);
 
 		constructor.BindFunc("res_option",
 			[](Rml::Variant& out) { get_option(new_options.res_option, out); },
@@ -368,18 +385,6 @@ public:
 				}
 				out = "";
 			});
-		
-		constructor.BindEventCallback("set_current_gfx_description",
-			[](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) {
-				int gfx_index = inputs.at(0).Get<size_t>();
-				// watch for mouseout being overzealous during event bubbling, only clear if the event's attached element matches the current
-				if (gfx_index == -1 && event.GetType() == "mouseout" && event.GetCurrentElement() != event.GetTargetElement()) {
-					return;
-				}
-				focused_gfx_index = gfx_index;
-				model_handle.DirtyVariable("cur_gfx_description");
-			});
-		constructor.Bind("cur_gfx_description", &focused_gfx_index);
 
 		constructor.Bind("msaa2x_supported", &msaa2x_supported);
 		constructor.Bind("msaa4x_supported", &msaa4x_supported);
@@ -568,6 +573,8 @@ public:
 		if (!constructor) {
 			throw std::runtime_error("Failed to make RmlUi data model for the control options menu");
 		}
+
+		bind_config_list_events(constructor);
 		
 		constructor.Bind("rumble_strength", &control_options_context.rumble_strength);
 		bind_option(constructor, "targeting_mode", &control_options_context.targeting_mode);
@@ -580,6 +587,8 @@ public:
 		if (!constructor) {
 			throw std::runtime_error("Failed to make RmlUi data model for the sound options menu");
 		}
+
+		bind_config_list_events(constructor);
 		
 		sound_options_model_handle = constructor.GetModelHandle();
 
@@ -593,6 +602,8 @@ public:
 			throw std::runtime_error("Failed to make RmlUi data model for the debug menu");
 		}
 
+		bind_config_list_events(constructor);
+
 		// Bind the debug mode enabled flag.
 		constructor.Bind("debug_enabled", &debug_context.debug_enabled);