Structured content updates (#1733)

* Add support for imageRendering

* Make crisp-edges appearance on Firefox more similar to Chrome

* Refactor

* Add background option

* Move data-image-rendering attribute

* Restructure

* Organize

* Add support for appearance

* Update test dictionary

* Update tests

3 files changed, 49 insertions, 10 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 484dc6a9..6a5b26f1 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -340,7 +340,22 @@ class DisplayGenerator {
     }
 
     _createDefinitionImage(data, dictionary) {
-        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign, sizeUnits} = data;
+        const {
+            path,
+            width,
+            height,
+            preferredWidth,
+            preferredHeight,
+            title,
+            pixelated,
+            imageRendering,
+            appearance,
+            background,
+            collapsed,
+            collapsible,
+            verticalAlign,
+            sizeUnits
+        } = data;
 
         const hasPreferredWidth = (typeof preferredWidth === 'number');
         const hasPreferredHeight = (typeof preferredHeight === 'number');
@@ -356,10 +371,18 @@ class DisplayGenerator {
         );
 
         const node = this._templates.instantiate('gloss-item-image');
+        const imageContainer = node.querySelector('.gloss-image-container');
+        const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
+        const image = node.querySelector('.gloss-image');
+        const imageBackground = node.querySelector('.gloss-image-background');
+
         node.dataset.path = path;
         node.dataset.dictionary = dictionary;
         node.dataset.imageLoadState = 'not-loaded';
         node.dataset.hasAspectRatio = 'true';
+        node.dataset.imageRendering = typeof imageRendering === 'string' ? imageRendering : (pixelated ? 'pixelated' : 'auto');
+        node.dataset.appearance = typeof appearance === 'string' ? appearance : 'auto';
+        node.dataset.background = typeof background === 'boolean' ? `${background}` : 'true';
         node.dataset.collapsed = typeof collapsed === 'boolean' ? `${collapsed}` : 'false';
         node.dataset.collapsible = typeof collapsible === 'boolean' ? `${collapsible}` : 'true';
         if (typeof verticalAlign === 'string') {
@@ -369,39 +392,36 @@ class DisplayGenerator {
             node.dataset.sizeUnits = sizeUnits;
         }
 
-        const imageContainer = node.querySelector('.gloss-image-container');
         imageContainer.style.width = `${usedWidth}em`;
         if (typeof title === 'string') {
             imageContainer.title = title;
         }
 
-        const aspectRatioSizer = node.querySelector('.gloss-image-aspect-ratio-sizer');
         aspectRatioSizer.style.paddingTop = `${aspectRatio * 100.0}%`;
 
-        const image = node.querySelector('img.gloss-image');
-        image.dataset.pixelated = `${pixelated === true}`;
-
         if (this._mediaLoader !== null) {
             this._mediaLoader.loadMedia(
                 path,
                 dictionary,
-                (url) => this._setImageData(node, image, url, false),
-                () => this._setImageData(node, image, null, true)
+                (url) => this._setImageData(node, image, imageBackground, url, false),
+                () => this._setImageData(node, image, imageBackground, null, true)
             );
         }
 
         return node;
     }
 
-    _setImageData(node, image, url, unloaded) {
+    _setImageData(node, image, imageBackground, url, unloaded) {
         if (url !== null) {
             image.src = url;
             node.href = url;
             node.dataset.imageLoadState = 'loaded';
+            imageBackground.style.setProperty('--image', `url("${url}")`);
         } else {
             image.removeAttribute('src');
             node.removeAttribute('href');
             node.dataset.imageLoadState = unloaded ? 'unloaded' : 'load-error';
+            imageBackground.style.removeProperty('--image');
         }
     }
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index ccca8229..26c1e06c 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -208,6 +208,10 @@ class Display extends EventDispatcher {
         const {browser} = await yomichan.api.getEnvironmentInfo();
         this._browser = browser;
 
+        if (documentElement !== null) {
+            documentElement.dataset.browser = browser;
+        }
+
         // Prepare
         await this._hotkeyHelpController.prepare();
         await this._displayGenerator.prepare();
diff --git a/ext/js/language/dictionary-importer.js b/ext/js/language/dictionary-importer.js
index a0806a3a..b735953a 100644
--- a/ext/js/language/dictionary-importer.js
+++ b/ext/js/language/dictionary-importer.js
@@ -361,7 +361,19 @@ class DictionaryImporter {
     }
 
     async _createImageData(data, context, entry, attributes) {
-        const {path, width: preferredWidth, height: preferredHeight, title, description, pixelated, collapsed, collapsible} = data;
+        const {
+            path,
+            width: preferredWidth,
+            height: preferredHeight,
+            title,
+            description,
+            pixelated,
+            imageRendering,
+            appearance,
+            background,
+            collapsed,
+            collapsible
+        } = data;
         const {width, height} = await this._getImageMedia(path, context, entry);
         const newData = Object.assign({}, attributes, {path, width, height});
         if (typeof preferredWidth === 'number') { newData.preferredWidth = preferredWidth; }
@@ -369,6 +381,9 @@ class DictionaryImporter {
         if (typeof title === 'string') { newData.title = title; }
         if (typeof description === 'string') { newData.description = description; }
         if (typeof pixelated === 'boolean') { newData.pixelated = pixelated; }
+        if (typeof imageRendering === 'string') { newData.imageRendering = imageRendering; }
+        if (typeof appearance === 'string') { newData.appearance = appearance; }
+        if (typeof background === 'boolean') { newData.background = background; }
         if (typeof collapsed === 'boolean') { newData.collapsed = collapsed; }
         if (typeof collapsible === 'boolean') { newData.collapsible = collapsible; }
         return newData;