Use raw element references for container and spinner

3 files changed, 13 insertions, 9 deletions

diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 693e7938..13ed1e08 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -19,7 +19,7 @@
 
 class DisplaySearch extends Display {
     constructor() {
-        super($('#spinner'), $('#content'));
+        super(document.querySelector('#spinner'), document.querySelector('#content'));
 
         this.optionsContext = {
             depth: 0,
diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js
index f75b35b8..2e952efb 100644
--- a/ext/fg/js/float.js
+++ b/ext/fg/js/float.js
@@ -19,7 +19,7 @@
 
 class DisplayFloat extends Display {
     constructor() {
-        super($('#spinner'), $('#definitions'));
+        super(document.querySelector('#spinner'), document.querySelector('#definitions'));
         this.autoPlayAudioTimer = null;
         this.styleNode = null;
 
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 1ce997a1..e0f80b51 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -310,7 +310,7 @@ class Display {
             }
 
             const content = await apiTemplateRender('terms.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
@@ -362,7 +362,7 @@ class Display {
             }
 
             const content = await apiTemplateRender('kanji.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
@@ -446,7 +446,7 @@ class Display {
 
     async noteAdd(definition, mode) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const context = {};
             if (this.noteUsesScreenshot()) {
@@ -467,13 +467,13 @@ class Display {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
     async audioPlay(definition, expressionIndex) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
             let url = await apiAudioGetUrl(expression, this.options.general.audioSource);
@@ -505,7 +505,7 @@ class Display {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
@@ -542,6 +542,10 @@ class Display {
         return apiForward('popupSetVisible', {visible});
     }
 
+    setSpinnerVisible(visible) {
+        this.spinner.style.display = visible ? 'block' : '';
+    }
+
     static clozeBuild(sentence, source) {
         const result = {
             sentence: sentence.text.trim()
@@ -558,7 +562,7 @@ class Display {
 
     entryIndexFind(element) {
         const entry = element.closest('.entry');
-        return entry !== null ? Display.indexOf(this.container.get(0).querySelectorAll('.entry'), entry) : -1;
+        return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1;
     }
 
     static adderButtonFind(index, mode) {