dash-frontend: Monado runtime: Tabs, add stub DebugTimings tab

dash-frontend/assets/dashboard/not_a_bug.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
+  <path fill="currentColor" d="M12 19q1.65 0 2.825-1.175T16 15v-4q0-1.65-1.175-2.825T12 7T9.175 8.175T8 11v4q0 1.65 1.175 2.825T12 19m-2-3h4v-2h-4zm0-4h4v-2h-4zm2 9q-1.625 0-3.012-.8T6.8 18H4v-2h2.1q-.075-.5-.088-1T6 14H4v-2h2q0-.5.012-1t.088-1H4V8h2.8q.35-.575.788-1.075T8.6 6.05L7 4.4L8.4 3l2.15 2.15q.7-.225 1.425-.225t1.425.225L15.6 3L17 4.4l-1.65 1.65q.575.375 1.038.862T17.2 8H20v2h-2.1q.075.5.088 1T18 12h2v2h-2q0 .5-.013 1t-.087 1H20v2h-2.8q-.8 1.4-2.187 2.2T12 21" />
+</svg>

dash-frontend/assets/gui/t_group_box.xml

@@ -11,10 +11,10 @@
     gap="8"
     round="8" />
 
-  <!-- src, text, translation -->
+  <!-- src_builtin, text, translation -->
   <template name="GroupBoxTitle">
     <div flex_direction="row" align_items="center" gap="8">
-      <sprite src="${src}" src_builtin="${src_builtin}" width="24" height="24" />
+      <sprite src_builtin="${src_builtin}" width="24" height="24" />
       <label text="${text}" translation="${translation}" weight="bold" size="18" />
     </div>
     <rectangle color="#FFFFFF44" width="100%" height="2" />

dash-frontend/assets/gui/tab/monado.xml

@@ -1,37 +1,14 @@
 <layout>
-  <include src="../t_group_box.xml" />
-
-  <!-- key: str, value: str -->
-  <template name="BoolFlag">
-    <div flex_direction="row" gap="4">
-      <label text="${key}" />
-      <label weight="bold" text="${value}" />
-    </div>
-  </template>
-
-  <!-- name, checked, flag_* -->
-  <template name="Cell">
-    <rectangle macro="group_box">
-      <CheckBox id="checkbox" text="${name}" checked="${checked}" />
-      <div flex_direction="row" gap="8">
-        <BoolFlag key="Active:" value="${flag_active}" />
-        <BoolFlag key="Focused:" value="${flag_focused}" />
-        <BoolFlag key="IO active:" value="${flag_io_active}" />
-        <BoolFlag key="Overlay:" value="${flag_overlay}" />
-        <BoolFlag key="Primary:" value="${flag_primary}" />
-        <BoolFlag key="Visible:" value="${flag_visible}" />
-      </div>
-    </rectangle>
-  </template>
-
   <elements>
-    <label translation="DISPLAY_BRIGHTNESS" />
-    <Slider id="slider_brightness" width="300" height="24" min_value="0" max_value="140" />
-
-    <label translation="PROCESS_LIST" />
-    <div id="list_parent" flex_direction="column" gap="8">
-      <!-- filled at runtime -->
+    <div gap="4">
+      <Tabs id="tabs">
+        <Tab name="general_settings" translation="GENERAL_SETTINGS" sprite_src_builtin="dashboard/settings.svg" />
+        <Tab name="process_list" translation="PROCESS_LIST" sprite_src_builtin="dashboard/cpu.svg" />
+        <Tab name="debug_timings" translation="DEBUG_INFO" sprite_src_builtin="dashboard/not_a_bug.svg" />
+      </Tabs>
+      <div gap="4" id="content" width="100%">
+        <!-- filled-in at runtime -->
+      </div>
     </div>
-
   </elements>
 </layout>

dash-frontend/assets/gui/tab/monado_tab_debug_timings.xml

@@ -0,0 +1,9 @@
+<layout>
+  <include src="../t_group_box.xml" />
+
+  <elements>
+    <rectangle macro="group_box">
+      <GroupBoxTitle src_builtin="dashboard/not_a_bug.svg" text="Debug timings (TODO)" />
+    </rectangle>
+  </elements>
+</layout>

dash-frontend/assets/gui/tab/monado_tab_general_settings.xml

@@ -0,0 +1,12 @@
+<layout>
+  <include src="../t_group_box.xml" />
+
+  <elements>
+    <rectangle macro="group_box">
+      <GroupBoxTitle src_builtin="dashboard/settings.svg" translation="GENERAL_SETTINGS" />
+
+      <label translation="DISPLAY_BRIGHTNESS" />
+      <Slider id="slider_brightness" width="300" height="24" min_value="0" max_value="140" />
+    </rectangle>
+  </elements>
+</layout>

dash-frontend/assets/gui/tab/monado_tab_process_list.xml

@@ -0,0 +1,35 @@
+<layout>
+  <include src="../t_group_box.xml" />
+
+  <!-- key: str, value: str -->
+  <template name="BoolFlag">
+    <div flex_direction="row" gap="4">
+      <label text="${key}" />
+      <label weight="bold" text="${value}" />
+    </div>
+  </template>
+
+  <!-- name, checked, flag_* -->
+  <template name="Cell">
+    <rectangle macro="group_box">
+      <CheckBox id="checkbox" text="${name}" checked="${checked}" />
+      <div flex_direction="row" gap="8" flex_wrap="wrap">
+        <BoolFlag key="Active:" value="${flag_active}" />
+        <BoolFlag key="Focused:" value="${flag_focused}" />
+        <BoolFlag key="IO active:" value="${flag_io_active}" />
+        <BoolFlag key="Overlay:" value="${flag_overlay}" />
+        <BoolFlag key="Primary:" value="${flag_primary}" />
+        <BoolFlag key="Visible:" value="${flag_visible}" />
+      </div>
+    </rectangle>
+  </template>
+
+  <elements>
+    <rectangle macro="group_box">
+      <GroupBoxTitle src_builtin="dashboard/cpu.svg" translation="PROCESS_LIST" />
+      <div id="list_parent" flex_direction="column" gap="8">
+        <!-- filled at runtime -->
+      </div>
+    </rectangle>
+  </elements>
+</layout>

dash-frontend/assets/gui/tab/settings.xml

@@ -54,7 +54,9 @@
         <Tab name="autostart_apps" translation="APP_SETTINGS.AUTOSTART_APPS" sprite_src_builtin="dashboard/apps.svg" />
         <Tab name="troubleshooting" translation="APP_SETTINGS.TROUBLESHOOTING" sprite_src_builtin="dashboard/cpu.svg" />
       </Tabs>
-      <div flex_wrap="wrap" justify_content="stretch" gap="4" id="settings_root" width="100%" />
+      <div flex_wrap="wrap" justify_content="stretch" gap="4" id="settings_root" width="100%">
+        <!-- filled-in at runtime -->
+      </div>
     </div>
   </elements>
 </layout>

dash-frontend/assets/lang/de.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "Stopp",
     "FORCE_KILL": "Erzwinge Beenden"
-  }
+  },
+  "DEBUG_INFO": "Debug-Informationen"
 }

dash-frontend/assets/lang/en.json

@@ -133,6 +133,7 @@
 		"VOLUME": "Volume"
 	},
 	"CLOSE_WINDOW": "Close window",
+	"DEBUG_INFO": "Debug info",
 	"DISPLAY_BRIGHTNESS": "Display brightness",
 	"FAILED_TO_LAUNCH_APPLICATION": "Failed to launch a application:",
 	"GAME_LAUNCHED": "Game launched",

dash-frontend/assets/lang/es.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "Detener",
     "FORCE_KILL": "Forzar cierre"
-  }
+  },
+  "DEBUG_INFO": "Información de depuración"
 }

dash-frontend/assets/lang/it.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "Interrompi",
     "FORCE_KILL": "Uccidi forzatamente"
-  }
+  },
+  "DEBUG_INFO": "Informazioni di debug"
 }

dash-frontend/assets/lang/ja.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "停止",
     "FORCE_KILL": "強制終了"
-  }
+  },
+  "DEBUG_INFO": "デバッグ情報"
 }

dash-frontend/assets/lang/pl.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "Zatrzymaj",
     "FORCE_KILL": "Wymuś zakończenie"
-  }
+  },
+  "DEBUG_INFO": "Informacje debugowania"
 }

dash-frontend/assets/lang/zh_CN.json

@@ -161,5 +161,6 @@
   "PROCESS": {
     "STOP": "停止",
     "FORCE_KILL": "强制关闭"
-  }
+  },
+  "DEBUG_INFO": "调试信息"
 }

dash-frontend/src/frontend.rs

@@ -45,7 +45,7 @@ pub type FrontendTasks = Tasks<FrontendTask>;
 
 pub struct Frontend<T> {
 	pub layout: Layout,
-	globals: WguiGlobals,
+	pub globals: WguiGlobals,
 
 	pub interface: BoxDashInterface<T>,
 

dash-frontend/src/tab/monado.rs

@@ -2,9 +2,9 @@ use std::{collections::HashMap, marker::PhantomData, rc::Rc};
 
 use wgui::{
 	assets::AssetPath,
-	components::{checkbox::ComponentCheckbox, slider::ComponentSlider},
+	components::{checkbox::ComponentCheckbox, slider::ComponentSlider, tabs::ComponentTabs},
 	globals::WguiGlobals,
-	layout::WidgetID,
+	layout::{Layout, WidgetID},
 	parser::{self, Fetchable, ParseDocumentParams, ParserState},
 	task::Tasks,
 };
@@ -15,11 +15,55 @@ use crate::{
 	tab::{Tab, TabType},
 };
 
-#[derive(Debug)]
+#[derive(Clone)]
+enum TabNameEnum {
+	GeneralSettings,
+	ProcessList,
+	DebugTimings,
+}
+
+impl TabNameEnum {
+	fn from_string(s: &str) -> Option<Self> {
+		match s {
+			"general_settings" => Some(TabNameEnum::GeneralSettings),
+			"process_list" => Some(TabNameEnum::ProcessList),
+			"debug_timings" => Some(TabNameEnum::DebugTimings),
+			_ => None,
+		}
+	}
+}
+
 enum Task {
-	Refresh,
-	FocusClient(String),
 	SetBrightness(f32),
+	SetTab(TabNameEnum),
+
+	// `ProcessList` tab
+	ProcessListRefresh,
+	ProcessListFocusClient(String),
+}
+
+struct SubtabProcessList {
+	id_list_parent: WidgetID,
+	state: ParserState,
+	cells: Vec<parser::ParserData>,
+}
+
+struct SubtabGeneralSettings {
+	#[allow(dead_code)]
+	state: ParserState,
+}
+
+struct SubtabDebugTimings {
+	#[allow(dead_code)]
+	state: ParserState,
+}
+
+#[allow(dead_code)]
+enum Subtab {
+	Empty,
+	GeneralSettings(SubtabGeneralSettings),
+	ProcessList(SubtabProcessList),
+	DebugTimings(SubtabDebugTimings),
 }
 
 pub struct TabMonado<T> {
@@ -29,10 +73,8 @@ pub struct TabMonado<T> {
 
 	marker: PhantomData<T>,
 
-	globals: WguiGlobals,
-	id_list_parent: WidgetID,
-
-	cells: Vec<parser::ParserData>,
+	id_content: WidgetID,
+	subtab: Subtab,
 
 	ticks: u32,
 }
@@ -45,15 +87,45 @@ impl<T> Tab<T> for TabMonado<T> {
 	fn update(&mut self, frontend: &mut Frontend<T>, _time_ms: u32, data: &mut T) -> anyhow::Result<()> {
 		for task in self.tasks.drain() {
 			match task {
-				Task::Refresh => self.refresh(frontend, data)?,
-				Task::FocusClient(name) => self.focus_client(frontend, data, name)?,
+				Task::ProcessListRefresh => {
+					if let Subtab::ProcessList(process_list) = &mut self.subtab {
+						process_list.refresh(frontend, data, &self.tasks)?;
+					}
+				}
+				Task::ProcessListFocusClient(client_name) => {
+					if let Subtab::ProcessList(process_list) = &mut self.subtab {
+						process_list.focus_client(frontend, data, client_name, &self.tasks)?;
+					}
+				}
 				Task::SetBrightness(brightness) => self.set_brightness(frontend, data, brightness),
+				Task::SetTab(tab) => {
+					frontend.layout.remove_children(self.id_content);
+					match tab {
+						TabNameEnum::GeneralSettings => {
+							self.subtab = Subtab::GeneralSettings(SubtabGeneralSettings::new(
+								self.id_content,
+								frontend,
+								data,
+								&self.tasks,
+							)?)
+						}
+						TabNameEnum::ProcessList => {
+							self.tasks.push(Task::ProcessListRefresh);
+							self.subtab = Subtab::ProcessList(SubtabProcessList::new(self.id_content, frontend)?)
+						}
+						TabNameEnum::DebugTimings => {
+							self.subtab = Subtab::DebugTimings(SubtabDebugTimings::new(self.id_content, frontend)?)
+						}
+					}
+				}
 			}
 		}
 
 		// every few seconds
-		if self.ticks.is_multiple_of(500) {
-			self.tasks.push(Task::Refresh);
+		if let Subtab::ProcessList(_) = &self.subtab
+			&& self.ticks.is_multiple_of(500)
+		{
+			self.tasks.push(Task::ProcessListRefresh);
 		}
 
 		self.ticks += 1;
@@ -62,7 +134,7 @@ impl<T> Tab<T> for TabMonado<T> {
 	}
 }
 
-fn doc_params(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
+fn doc_params_monado(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	ParseDocumentParams {
 		globals: globals.clone(),
 		path: AssetPath::BuiltIn("gui/tab/monado.xml"),
@@ -70,6 +142,30 @@ fn doc_params(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
 	}
 }
 
+fn doc_params_tab_process_list(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
+	ParseDocumentParams {
+		globals: globals.clone(),
+		path: AssetPath::BuiltIn("gui/tab/monado_tab_process_list.xml"),
+		extra: Default::default(),
+	}
+}
+
+fn doc_params_tab_general_settings(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
+	ParseDocumentParams {
+		globals: globals.clone(),
+		path: AssetPath::BuiltIn("gui/tab/monado_tab_general_settings.xml"),
+		extra: Default::default(),
+	}
+}
+
+fn doc_params_tab_debug_timings(globals: &'_ WguiGlobals) -> ParseDocumentParams<'_> {
+	ParseDocumentParams {
+		globals: globals.clone(),
+		path: AssetPath::BuiltIn("gui/tab/monado_tab_debug_timings.xml"),
+		extra: Default::default(),
+	}
+}
+
 fn yesno(n: bool) -> &'static str {
 	match n {
 		true => "yes",
@@ -77,29 +173,73 @@ fn yesno(n: bool) -> &'static str {
 	}
 }
 
-impl<T> TabMonado<T> {
-	pub fn new(frontend: &mut Frontend<T>, parent_id: WidgetID) -> anyhow::Result<Self> {
-		let globals = frontend.layout.state.globals.clone();
-		let state = wgui::parser::parse_from_assets(&doc_params(&globals), &mut frontend.layout, parent_id)?;
+impl SubtabGeneralSettings {
+	fn new<T>(
+		parent_id: WidgetID,
+		frontend: &mut Frontend<T>,
+		data: &mut T,
+		tasks: &Tasks<Task>,
+	) -> anyhow::Result<Self> {
+		let state = wgui::parser::parse_from_assets(
+			&doc_params_tab_general_settings(&frontend.globals),
+			&mut frontend.layout,
+			parent_id,
+		)?;
 
+		// get brightness
+		let slider_brightness = state.fetch_component_as::<ComponentSlider>("slider_brightness")?;
+		if let Some(brightness) = frontend.interface.monado_brightness_get(data) {
+			let mut c = frontend.layout.start_common();
+			slider_brightness.set_value(&mut c.common(), brightness * 100.0);
+			c.finish()?;
+
+			slider_brightness.on_value_changed({
+				let tasks = tasks.clone();
+				Box::new(move |_common, e| {
+					tasks.push(Task::SetBrightness(e.value / 100.0));
+					Ok(())
+				})
+			});
+		}
+
+		Ok(Self { state })
+	}
+}
+
+impl SubtabDebugTimings {
+	fn new<T>(parent_id: WidgetID, frontend: &mut Frontend<T>) -> anyhow::Result<Self> {
+		let state = wgui::parser::parse_from_assets(
+			&doc_params_tab_debug_timings(&frontend.globals),
+			&mut frontend.layout,
+			parent_id,
+		)?;
+
+		Ok(Self { state })
+	}
+}
+
+impl SubtabProcessList {
+	fn new<T>(parent_id: WidgetID, frontend: &mut Frontend<T>) -> anyhow::Result<Self> {
+		let state = wgui::parser::parse_from_assets(
+			&doc_params_tab_process_list(&frontend.globals),
+			&mut frontend.layout,
+			parent_id,
+		)?;
 		let id_list_parent = state.get_widget_id("list_parent")?;
 
-		let tasks = Tasks::<Task>::new();
-
-		tasks.push(Task::Refresh);
-
 		Ok(Self {
 			state,
-			marker: PhantomData,
-			tasks,
-			globals,
 			id_list_parent,
-			ticks: 0,
 			cells: Vec::new(),
 		})
 	}
 
-	fn mount_client(&mut self, frontend: &mut Frontend<T>, client: &dash_interface::MonadoClient) -> anyhow::Result<()> {
+	fn mount_client(
+		&mut self,
+		layout: &mut Layout,
+		client: &dash_interface::MonadoClient,
+		tasks: &Tasks<Task>,
+	) -> anyhow::Result<()> {
 		let mut par = HashMap::<Rc<str>, Rc<str>>::new();
 		par.insert(
 			"checked".into(),
@@ -117,21 +257,23 @@ impl<T> TabMonado<T> {
 		par.insert("flag_primary".into(), yesno(client.is_primary).into());
 		par.insert("flag_visible".into(), yesno(client.is_visible).into());
 
+		let globals = layout.state.globals.clone();
+
 		let state_cell = self.state.parse_template(
-			&doc_params(&self.globals),
+			&doc_params_tab_process_list(&globals),
 			"Cell",
-			&mut frontend.layout,
+			layout,
 			self.id_list_parent,
 			par,
 		)?;
 
 		let checkbox = state_cell.fetch_component_as::<ComponentCheckbox>("checkbox")?;
 		checkbox.on_toggle({
-			let tasks = self.tasks.clone();
+			let tasks = tasks.clone();
 			let client_name = client.name.clone();
 			Box::new(move |_common, e| {
 				if e.checked {
-					tasks.push(Task::FocusClient(client_name.clone()));
+					tasks.push(Task::ProcessListFocusClient(client_name.clone()));
 				}
 				Ok(())
 			})
@@ -142,7 +284,19 @@ impl<T> TabMonado<T> {
 		Ok(())
 	}
 
-	fn refresh(&mut self, frontend: &mut Frontend<T>, data: &mut T) -> anyhow::Result<()> {
+	fn focus_client<T>(
+		&mut self,
+		frontend: &mut Frontend<T>,
+		data: &mut T,
+		name: String,
+		tasks: &Tasks<Task>,
+	) -> anyhow::Result<()> {
+		frontend.interface.monado_client_focus(data, &name)?;
+		tasks.push(Task::ProcessListRefresh);
+		Ok(())
+	}
+
+	fn refresh<T>(&mut self, frontend: &mut Frontend<T>, data: &mut T, tasks: &Tasks<Task>) -> anyhow::Result<()> {
 		log::debug!("refreshing monado client list");
 
 		let clients = frontend.interface.monado_client_list(data)?;
@@ -151,32 +305,42 @@ impl<T> TabMonado<T> {
 		self.cells.clear();
 
 		for client in clients {
-			self.mount_client(frontend, &client)?;
-		}
-
-		// get brightness
-		let slider_brightness = self.state.fetch_component_as::<ComponentSlider>("slider_brightness")?;
-		if let Some(brightness) = frontend.interface.monado_brightness_get(data) {
-			let mut c = frontend.layout.start_common();
-			slider_brightness.set_value(&mut c.common(), brightness * 100.0);
-			c.finish()?;
-
-			slider_brightness.on_value_changed({
-				let tasks = self.tasks.clone();
-				Box::new(move |_common, e| {
-					tasks.push(Task::SetBrightness(e.value / 100.0));
-					Ok(())
-				})
-			});
+			self.mount_client(&mut frontend.layout, &client, tasks)?;
 		}
 
 		Ok(())
 	}
+}
 
-	fn focus_client(&mut self, frontend: &mut Frontend<T>, data: &mut T, name: String) -> anyhow::Result<()> {
-		frontend.interface.monado_client_focus(data, &name)?;
-		self.tasks.push(Task::Refresh);
-		Ok(())
+impl<T> TabMonado<T> {
+	pub fn new(frontend: &mut Frontend<T>, parent_id: WidgetID) -> anyhow::Result<Self> {
+		let globals = frontend.layout.state.globals.clone();
+		let state = wgui::parser::parse_from_assets(&doc_params_monado(&globals), &mut frontend.layout, parent_id)?;
+		let id_content = state.get_widget_id("content")?;
+		let tabs = state.fetch_component_as::<ComponentTabs>("tabs")?;
+
+		let tasks = Tasks::<Task>::new();
+
+		tabs.on_select({
+			let tasks = tasks.clone();
+			Rc::new(move |_common, evt| {
+				if let Some(tab) = TabNameEnum::from_string(&evt.name) {
+					tasks.push(Task::SetTab(tab));
+				}
+				Ok(())
+			})
+		});
+
+		tasks.push(Task::SetTab(TabNameEnum::ProcessList));
+
+		Ok(Self {
+			state,
+			marker: PhantomData,
+			tasks,
+			id_content,
+			ticks: 0,
+			subtab: Subtab::Empty,
+		})
 	}
 
 	fn set_brightness(&mut self, frontend: &mut Frontend<T>, data: &mut T, brightness: f32) {