Skip to content

Commit

Permalink
clean up css, make tests pass
Browse files Browse the repository at this point in the history
  • Loading branch information
@djahandarie
djahandarie committed Dec 13, 2024
1 parent 3c0cca9 commit 9b58a5e
Show file tree
Hide file tree
Showing 11 changed files with 72 additions and 190 deletions.
5 changes: 5 additions & 0 deletions .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -551,10 +551,12 @@
{
"files": [
"ext/js/core/api-map.js",
"ext/js/core/event-listener-collection.js",
"ext/js/core/extension-error.js",
"ext/js/core/json.js",
"ext/js/data/anki-note-data-creator.js",
"ext/js/dictionary/dictionary-data-util.js",
"ext/js/display/display-content-manager.js",
"ext/js/display/pronunciation-generator.js",
"ext/js/display/structured-content-generator.js",
"ext/js/dom/css-style-applier.js",
Expand All @@ -575,13 +577,15 @@
},
{
"files": [
"ext/js/core/api-map.js",
"ext/js/core/event-dispatcher.js",
"ext/js/core/extension-error.js",
"ext/js/core/json.js",
"ext/js/core/log.js",
"ext/js/core/to-error.js",
"ext/js/core/utilities.js",
"ext/js/data/database.js",
"ext/js/dictionary/dictionary-database.js",
"ext/js/dictionary/dictionary-importer.js",
"ext/js/dictionary/dictionary-worker-handler.js",
"ext/js/dictionary/dictionary-worker-main.js",
Expand Down Expand Up @@ -623,6 +627,7 @@
"ext/js/data/json-schema.js",
"ext/js/data/options-util.js",
"ext/js/data/permissions-util.js",
"ext/js/dictionary/dictionary-database.js",
"ext/js/dom/native-simple-dom-parser.js",
"ext/js/dom/simple-dom-parser.js",
"ext/js/extension/environment.js",
Expand Down
8 changes: 0 additions & 8 deletions dev/data/structured-content-overrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,18 +28,10 @@
.gloss-image-link:hover {
/* remove-rule */
}
.gloss-image-container-overlay {
font-size: initial;
line-height: initial;
color: initial;
}
:root[data-browser=firefox] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image,
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
/* remove-rule */
}
.gloss-image-link-text {
line-height: initial;
}
.gloss-sc-thead,
.gloss-sc-tfoot,
.gloss-sc-th {
Expand Down
36 changes: 0 additions & 36 deletions ext/css/structured-content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,6 @@
/* Glossary images */
.gloss-image-container {
display: inline-block;
white-space: nowrap;
max-width: 100%;
max-height: 100vh;
position: relative;
vertical-align: top;
line-height: 0;
font-size: calc(1em / var(--font-size-no-units));
overflow: hidden;
}
.gloss-image-link[data-background=true]>.gloss-image-container {
background-color: var(--gloss-image-background-color);
Expand All @@ -45,28 +37,6 @@
.gloss-image-link[href]:hover {
cursor: pointer;
}
.gloss-image-container-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: calc(1em * var(--font-size-no-units));
line-height: var(--line-height);
display: table;
table-layout: fixed;
white-space: normal;
color: var(--text-color-light3);
}
.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
content: 'Image failed to load';
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
padding: 0.25em;
}
.gloss-image {
display: inline-block;
vertical-align: top;
Expand All @@ -92,12 +62,6 @@
:root[data-browser=firefox-mobile] .gloss-image-link[data-image-rendering=crisp-edges] .gloss-image {
image-rendering: auto;
}
.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer {
display: inline-block;
width: 0;
vertical-align: top;
font-size: 0;
}

.gloss-image-link[data-appearance=monochrome] .gloss-image {
filter: grayscale(1);
Expand Down
137 changes: 7 additions & 130 deletions ext/data/structured-content-style.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
{
"selectors": [".gloss-image-container"],
"styles": [
["display", "inline-block"]
["display", "inline-block"],
["font-size", "1px"]
]
},
{
Expand All @@ -22,82 +23,19 @@
["cursor", "pointer"]
]
},
{
"selectors": [".gloss-image-container-overlay"],
"styles": [
["position", "absolute"],
["left", "0"],
["top", "0"],
["width", "100%"],
["height", "100%"],
["display", "table"],
["table-layout", "fixed"],
["white-space", "normal"],
["font-size", "initial"],
["line-height", "initial"],
["color", "initial"]
]
},
{
"selectors": [".gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after"],
"styles": [
["content", "'Image failed to load'"],
["display", "table-cell"],
["width", "100%"],
["height", "100%"],
["vertical-align", "middle"],
["text-align", "center"],
["padding", "0.25em"]
]
},
{
"selectors": [".gloss-image-background"],
"styles": [
["--image", "none"],
["position", "absolute"],
["left", "0"],
["top", "0"],
["width", "100%"],
["height", "100%"],
["-webkit-mask-repeat", "no-repeat"],
["-webkit-mask-position", "center center"],
["-webkit-mask-mode", "alpha"],
["-webkit-mask-size", "contain"],
["-webkit-mask-image", "var(--image)"],
["mask-repeat", "no-repeat"],
["mask-position", "center center"],
["mask-mode", "alpha"],
["mask-size", "contain"],
["mask-image", "var(--image)"],
["background-color", "currentColor"]
]
},
{
"selectors": [".gloss-image"],
"styles": [
["display", "inline-block"],
["vertical-align", "top"],
["object-fit", "contain"],
["border", "none"],
["outline", "none"]
["outline", "none"],
["width", "100%"]
]
},
{
"selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image"],
"styles": [
]
},
{
"selectors": [".gloss-image:not([src])"],
"styles": [
["display", "none"]
]
},
{
"selectors": [
".gloss-image-link[data-image-rendering=pixelated] .gloss-image",
".gloss-image-link[data-image-rendering=pixelated] .gloss-image-background"
],
"selectors": [".gloss-image-link[data-image-rendering=pixelated] .gloss-image"],
"styles": [
["image-rendering", "auto"],
["image-rendering", "-moz-crisp-edges"],
Expand All @@ -107,61 +45,18 @@
]
},
{
"selectors": [
".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image",
".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image-background"
],
"selectors": [".gloss-image-link[data-image-rendering=crisp-edges] .gloss-image"],
"styles": [
["image-rendering", "auto"],
["image-rendering", "-moz-crisp-edges"],
["image-rendering", "-webkit-optimize-contrast"],
["image-rendering", "crisp-edges"]
]
},
{
"selectors": [".gloss-image-link[data-has-aspect-ratio=true] .gloss-image-sizer"],
"styles": [
["display", "inline-block"],
["width", "0"],
["vertical-align", "top"],
["font-size", "0"]
]
},
{
"selectors": [".gloss-image-link-text"],
"styles": [
["display", "none"],
["line-height", "initial"]
]
},
{
"selectors": [".gloss-image-link-text::before"],
"styles": [
["content", "'['"]
]
},
{
"selectors": [".gloss-image-link-text::after"],
"styles": [
["content", "']'"]
]
},
{
"selectors": [".gloss-image-description"],
"styles": [
["display", "block"],
["white-space", "pre-line"]
]
},
{
"selectors": [".gloss-image-link[data-appearance=monochrome] .gloss-image"],
"styles": [
]
},
{
"selectors": [".gloss-image-link:not([data-appearance=monochrome]) .gloss-image-background"],
"styles": [
["display", "none"]
["filter", "grayscale(1)"]
]
},
{
Expand Down Expand Up @@ -261,24 +156,6 @@
["display", "block"]
]
},
{
"selectors": [
".gloss-image-link[data-collapsed=true] .gloss-image-link-text",
":root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text"
],
"styles": [
["display", "inline"]
]
},
{
"selectors": [
".gloss-image-link[data-collapsed=true]~.gloss-image-description",
":root[data-glossary-layout-mode=compact] .gloss-image-description"
],
"styles": [
["display", "inline"]
]
},
{
"selectors": [".gloss-link-external-icon"],
"styles": [
Expand Down
1 change: 1 addition & 0 deletions ext/js/dictionary/dictionary-database.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,7 @@ export class DictionaryDatabase {
});
} else {
const image = new Blob([m.content], {type: m.mediaType});
// eslint-disable-next-line no-undef
await createImageBitmap(image).then((decodedImage) => {
// we need to do a dumb hack where we convert this ImageBitmap to an ImageData by drawing it to a temporary canvas, because Firefox doesn't support transferring ImageBitmaps cross-process
const canvas = new OffscreenCanvas(decodedImage.width, decodedImage.height);
Expand Down
Loading

0 comments on commit 9b58a5e

Please sign in to comment.