From f0d31654c9cf40864fced7efe431eb19f2386637 Mon Sep 17 00:00:00 2001
From: Nick Krichevsky <nick@ollien.com>
Date: Sun, 24 Jun 2018 21:55:19 -0400
Subject: [PATCH] Add basic prototype of frontend with twig

---
 spectabular/manifest.json   |  5 ++++-
 src/ts/browser-action.ts    | 12 ++++++++++++
 src/twig/main.html.twig     |  1 +
 src/twig/tab-list.html.twig |  7 +++++++
 4 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/twig/main.html.twig
 create mode 100644 src/twig/tab-list.html.twig

diff --git a/spectabular/manifest.json b/spectabular/manifest.json
index d9fa328..d99f1a6 100644
--- a/spectabular/manifest.json
+++ b/spectabular/manifest.json
@@ -7,5 +7,8 @@
 	"browser_action": {
 		"default_title": "Spectabular",
 		"default_popup": "twig/browser-action.html"
-	}
+	},
+	"web_accessible_resources": [
+		"twig/*.html.twig"
+	]
 }
diff --git a/src/ts/browser-action.ts b/src/ts/browser-action.ts
index e69de29..0b5756a 100644
--- a/src/ts/browser-action.ts
+++ b/src/ts/browser-action.ts
@@ -0,0 +1,12 @@
+import * as twig from "twig";
+
+const MAIN_TEMPLATE_URI: string = chrome.runtime.getURL("twig/main.html.twig");
+//Using async:false is fine here because we're just getting the resource from chrome, not a real remote.
+//Using the `as any` cast here because the @types/twig package is out of date and requires `url` rather than `href`
+const MAIN_TEMPLATE: twig.Template = twig.twig({href: MAIN_TEMPLATE_URI, async: false} as any);
+
+document.addEventListener("DOMContentLoaded", () => {
+	chrome.tabs.query({}, (tabs: chrome.tabs.Tab[]) => {
+		document.querySelector("body").innerHTML = String(MAIN_TEMPLATE.render({tabs}));
+	});
+});
diff --git a/src/twig/main.html.twig b/src/twig/main.html.twig
new file mode 100644
index 0000000..23475bc
--- /dev/null
+++ b/src/twig/main.html.twig
@@ -0,0 +1 @@
+{% include "tab-list.html.twig" %}
diff --git a/src/twig/tab-list.html.twig b/src/twig/tab-list.html.twig
new file mode 100644
index 0000000..657895c
--- /dev/null
+++ b/src/twig/tab-list.html.twig
@@ -0,0 +1,7 @@
+{% block tab_list %}
+	<ul id="tabs">
+	{% for tab in tabs %}
+		<li tab-id={{ tab.id }}>{{ tab.title }}</li>
+	{% endfor %}
+	</ul>
+{% endblock %}