Improve html templates (#1061)

* Add template pre-processing

* Remove whitespace

* Add labels

* Reuse tag template for search tags

* Add space

2 files changed, 35 insertions, 4 deletions

diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 09bfe411..0cf1e8c6 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -317,10 +317,12 @@ class DisplayGenerator {
     }
 
     _createSearchTag(text) {
-        const node = this._templates.instantiate('tag-search');
-        node.textContent = text;
-        node.dataset.query = text;
-        return node;
+        return this._createTag({
+            notes: '',
+            name: text,
+            category: 'search',
+            redundant: false
+        });
     }
 
     _createPitches(details) {
diff --git a/ext/mixed/js/html-template-collection.js b/ext/mixed/js/html-template-collection.js
index 56da68b8..d3e2e6fd 100644
--- a/ext/mixed/js/html-template-collection.js
+++ b/ext/mixed/js/html-template-collection.js
@@ -29,6 +29,7 @@ class HtmlTemplateCollection {
         for (const template of sourceNode.querySelectorAll('template')) {
             const match = pattern.exec(template.id);
             if (match === null) { continue; }
+            this._prepareTemplate(template);
             this._templates.set(match[1], template);
         }
     }
@@ -42,4 +43,32 @@ class HtmlTemplateCollection {
         const template = this._templates.get(name);
         return document.importNode(template.content, true);
     }
+
+    // Private
+
+    _prepareTemplate(template) {
+        if (template.dataset.removeWhitespaceText === 'true') {
+            this._removeWhitespaceText(template);
+        }
+    }
+
+    _removeWhitespaceText(template) {
+        const {content} = template;
+        const {TEXT_NODE} = Node;
+        const iterator = document.createNodeIterator(content, NodeFilter.SHOW_TEXT);
+        const removeNodes = [];
+        while (true) {
+            const node = iterator.nextNode();
+            if (node === null) { break; }
+            if (node.nodeType === TEXT_NODE && node.nodeValue.trim().length === 0) {
+                removeNodes.push(node);
+            }
+        }
+        for (const node of removeNodes) {
+            const {parentNode} = node;
+            if (parentNode !== null) {
+                parentNode.removeChild(node);
+            }
+        }
+    }
 }