4 files changed, 153 insertions, 16 deletions
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
new file mode 100644
index 00000000..01cfeffc
--- /dev/null
+++ b/ext/mixed/display-templates.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html><html><head></head><body>
+
+<template id="term-entry-template"><div class="entry" data-type="term">
+    <div class="entry-header1">
+        <div class="entry-header2">
+            <div class="entry-header3">
+                <div class="actions">
+                    <button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
+                    <button class="action-button action-add-note pending disabled" data-mode="term-kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add expression (Alt + E)" alt></button>
+                    <button class="action-button action-add-note pending disabled" data-mode="term-kana"><img src="/mixed/img/add-term-kana.svg" class="icon-image" title="Add reading (Alt + R)" alt></button>
+                    <button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio (Alt + P)" alt></button>
+                    <span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
+                </div>
+                <div class="term-expression-list"></div>
+            </div>
+            <div class="term-reasons"></div>
+        </div>
+        <div class="frequencies"></div>
+    </div>
+    <div class="term-definition-container"><ol class="term-definition-list"></ol></div>
+    <pre class="debug-info"></pre>
+</div></template>
+<template id="term-expression-template"><div class="term-expression"><span class="term-expression-text"></span><div class="term-expression-details">
+    <button class="action-button action-play-audio"><img src="/mixed/img/play-audio.svg" class="icon-image" title="Play audio" alt></button>
+    <div class="tags tag-list"></div>
+    <div class="frequencies tag-list"></div>
+</div></div></template>
+<template id="term-definition-item-template"><li class="term-definition-item">
+    <div class="term-definition-tag-list tag-list"></div>
+    <div class="term-definition-only-list"></div>
+    <ul class="term-glossary-list"></ul>
+</li></template>
+<template id="term-definition-only-template"><span class="term-definition-only"></span></template>
+<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary"></span></li></template>
+<template id="term-reason-template"><span class="term-reason"></span></template>
+
+<template id="kanji-entry-template"><div class="entry" data-type="kanji">
+    <div class="entry-header1">
+        <div class="entry-header2">
+            <div class="entry-header3">
+                <div class="actions">
+                    <button class="action-button action-view-note pending disabled"><img src="/mixed/img/view-note.svg" class="icon-image" title="View added note (Alt + V)" alt></button>
+                    <button class="action-button action-add-note pending disabled" data-mode="kanji"><img src="/mixed/img/add-term-kanji.svg" class="icon-image" title="Add Kanji (Alt + K)" alt></button>
+                    <span class="action-button action-current-indicator"><img src="/mixed/img/entry-current.svg" class="icon-image current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt></span>
+                </div>
+                <div class="kanji-glyph"></div>
+            </div>
+        </div>
+        <div class="frequencies"></div>
+    </div>
+    <div class="tags tag-list"></div>
+    <table class="kanji-glyph-data"><tbody>
+        <tr>
+            <th>Glossary</th>
+            <th>Readings</th>
+            <th>Statistics</th>
+        </tr>
+        <tr>
+            <td class="kanji-glossary-container"><ol class="kanji-glossary-list"></ol></td>
+            <td class="kanji-readings"><dl class="kanji-readings-chinese"></dl><dl class="kanji-readings-japanese"></dl></td>
+            <td class="kanji-statistics"></td>
+        </tr>
+        <tr><th colspan="3">Classifications</th></tr>
+        <tr><td colspan="3" class="kanji-classifications"></td></tr>
+        <tr><th colspan="3">Codepoints</th></tr>
+        <tr><td colspan="3" class="kanji-codepoints"></td></tr>
+        <tr><th colspan="3">Dictionary Indices</th></tr>
+        <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
+    </tbody></table>
+    <pre class="debug-info"></pre>
+</div></template>
+<template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
+<template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>
+<template id="kanji-info-table-empty-template"><tr class="kanji-info-table-item kanji-info-table-item-empty"><td class="kanji-info-table-item-value-empty">No data found</td></tr class="kanji-info-table-item"></template>
+<template id="kanji-glossary-item-template"><li class="kanji-glossary-item"><span class="kanji-glossary"></span></li></template>
+<template id="kanji-reading-template"><dd class="kanji-reading"></dd></template>
+
+<template id="tag-template"><span class="tag"></span></template>
+<template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></template>
+
+</body></html>
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index 8ed1d996..9f0835b0 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -101,6 +101,10 @@ function apiClipboardGet() {
     return _apiInvoke('clipboardGet');
 }
 
+function apiGetDisplayTemplatesHtml() {
+    return _apiInvoke('getDisplayTemplatesHtml');
+}
+
 function _apiInvoke(action, params={}) {
     const data = {action, params};
     return new Promise((resolve, reject) => {
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 44b250e7..8eb699e0 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -19,22 +19,39 @@
 
 class DisplayGenerator {
     constructor() {
-        this._termEntryTemplate = document.querySelector('#term-entry-template');
-        this._termExpressionTemplate = document.querySelector('#term-expression-template');
-        this._termDefinitionItemTemplate = document.querySelector('#term-definition-item-template');
-        this._termDefinitionOnlyTemplate = document.querySelector('#term-definition-only-template');
-        this._termGlossaryItemTemplate = document.querySelector('#term-glossary-item-template');
-        this._termReasonTemplate = document.querySelector('#term-reason-template');
-
-        this._kanjiEntryTemplate = document.querySelector('#kanji-entry-template');
-        this._kanjiInfoTableTemplate = document.querySelector('#kanji-info-table-template');
-        this._kanjiInfoTableItemTemplate = document.querySelector('#kanji-info-table-item-template');
-        this._kanjiInfoTableEmptyTemplate = document.querySelector('#kanji-info-table-empty-template');
-        this._kanjiGlossaryItemTemplate = document.querySelector('#kanji-glossary-item-template');
-        this._kanjiReadingTemplate = document.querySelector('#kanji-reading-template');
-
-        this._tagTemplate = document.querySelector('#tag-template');
-        this._tagFrequencyTemplate = document.querySelector('#tag-frequency-template');
+        this._isInitialized = false;
+        this._initializationPromise = null;
+
+        this._termEntryTemplate = null;
+        this._termExpressionTemplate = null;
+        this._termDefinitionItemTemplate = null;
+        this._termDefinitionOnlyTemplate = null;
+        this._termGlossaryItemTemplate = null;
+        this._termReasonTemplate = null;
+
+        this._kanjiEntryTemplate = null;
+        this._kanjiInfoTableTemplate = null;
+        this._kanjiInfoTableItemTemplate = null;
+        this._kanjiInfoTableEmptyTemplate = null;
+        this._kanjiGlossaryItemTemplate = null;
+        this._kanjiReadingTemplate = null;
+
+        this._tagTemplate = null;
+        this._tagFrequencyTemplate = null;
+    }
+
+    isInitialized() {
+        return this._isInitialized;
+    }
+
+    initialize() {
+        if (this._isInitialized) {
+            return Promise.resolve();
+        }
+        if (this._initializationPromise === null) {
+            this._initializationPromise = this._initializeInternal();
+        }
+        return this._initializationPromise;
     }
 
     createTermEntry(details) {
@@ -259,6 +276,31 @@ class DisplayGenerator {
         return node;
     }
 
+    async _initializeInternal() {
+        const html = await apiGetDisplayTemplatesHtml();
+        const doc = new DOMParser().parseFromString(html, 'text/html');
+        this._setTemplates(doc);
+    }
+
+    _setTemplates(doc) {
+        this._termEntryTemplate = doc.querySelector('#term-entry-template');
+        this._termExpressionTemplate = doc.querySelector('#term-expression-template');
+        this._termDefinitionItemTemplate = doc.querySelector('#term-definition-item-template');
+        this._termDefinitionOnlyTemplate = doc.querySelector('#term-definition-only-template');
+        this._termGlossaryItemTemplate = doc.querySelector('#term-glossary-item-template');
+        this._termReasonTemplate = doc.querySelector('#term-reason-template');
+
+        this._kanjiEntryTemplate = doc.querySelector('#kanji-entry-template');
+        this._kanjiInfoTableTemplate = doc.querySelector('#kanji-info-table-template');
+        this._kanjiInfoTableItemTemplate = doc.querySelector('#kanji-info-table-item-template');
+        this._kanjiInfoTableEmptyTemplate = doc.querySelector('#kanji-info-table-empty-template');
+        this._kanjiGlossaryItemTemplate = doc.querySelector('#kanji-glossary-item-template');
+        this._kanjiReadingTemplate = doc.querySelector('#kanji-reading-template');
+
+        this._tagTemplate = doc.querySelector('#tag-template');
+        this._tagFrequencyTemplate = doc.querySelector('#tag-frequency-template');
+    }
+
     _appendKanjiLinks(container, text) {
         let part = '';
         for (const c of text) {
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index eabb73ca..75b43aa0 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -356,6 +356,11 @@ class Display {
             window.focus();
         }
 
+        if (!this.displayGenerator.isInitialized()) {
+            await this.displayGenerator.initialize();
+            if (this.setContentToken !== token) { return; }
+        }
+
         this.definitions = definitions;
         if (context.disableHistory) {
             delete context.disableHistory;
@@ -415,6 +420,11 @@ class Display {
             window.focus();
         }
 
+        if (!this.displayGenerator.isInitialized()) {
+            await this.displayGenerator.initialize();
+            if (this.setContentToken !== token) { return; }
+        }
+
         this.definitions = definitions;
         if (context.disableHistory) {
             delete context.disableHistory;