add tabs to event selection

src/events/debugEvent.js

@@ -27,8 +27,20 @@ App.Events.debugEvent = function(eventName) {
 	function makeActorList() {
 		const actors = document.createDocumentFragment();
 		const actorReqs = event.actorPrerequisites();
-		for (let i = 0; i < actorReqs.length; ++i) {
-			let tab = App.UI.DOM.appendNewElement("div", actors); // TODO: put these in tabs?
+		if (actorReqs.length === 1) {
+			actors.append(singleActorList(0));
+		} else {
+			const tabBar = new App.UI.Tabs.TabBar("Options");
+			for (let i = 0; i < actorReqs.length; ++i) {
+				tabBar.addTab(`Actor ${i}`, `actor${i}`, singleActorList(i));
+			}
+			actors.append(tabBar.render());
+		}
+
+		return actors;
+
+		function singleActorList(i) {
+			let tab = App.UI.DOM.makeElement("div");
 			for (const slave of V.slaves) {
 				let slaveDiv = App.UI.DOM.appendNewElement("div", tab, App.UI.DOM.makeElement("span", SlaveFullName(slave), "slave-name"));
 				let slaveFails = false;
@@ -42,8 +54,8 @@ App.Events.debugEvent = function(eventName) {
 				}
 				App.UI.DOM.appendNewElement("hr", tab);
 			}
+			return tab;
 		}
-		return actors;
 	}
 
 	function castSlave(slave, index) {