Add option to limit the height of inline images
Fixed: twpowertools:39
Co-authored-by: Barry Hunter
Change-Id: Iabed778be68f4a5211916c648ebcce3a0e305b12
diff --git a/docs/features.es.md b/docs/features.es.md
index b72957e..0ef6968 100644
--- a/docs/features.es.md
+++ b/docs/features.es.md
@@ -193,6 +193,16 @@
lado de las opciones de orden te indicará si las opciones del orden están
correctamente establecidas (y por tanto esta función funcionará) o no.
+### Limita la altura de imágenes
+> **Opción:** _Limita la altura de las imágenes insertadas en mensajes a
+la altura de la ventana._
+
+A veces los usuarios suben capturas de pantalla en alta definición de su
+teléfono, lo que resulta en que en el foro se muestra una imagen muy alta. Esta
+función añade un estilo personalizado que establece una altura máxima para las
+imágenes dentro de mensajes del foro, para que no sean más altas que la ventana
+actual.
+
## Punto indicador
> **Opciones:** _Muestra si el autor del hilo ha participado en otros hilos_,
_Muestra el número de preguntas y respuestas escritas por el autor del hilo
diff --git a/docs/features.md b/docs/features.md
index 982f683..ca136ea 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -182,6 +182,15 @@
order. The bell icon next to the sort settings will indicate whether the sort
settings are correct (and thus this feature is working) or not.
+### Limit the height of inline images
+> **Option name:** _Prevent inline images in messages from being taller than the
+current window._
+
+It is a common case that users upload high resolution screenshots of their
+phone, which results in a very tall image being shown in the forum. This
+feature adds a custom style to set a maximum height for images inside forum
+messages, so they aren't taller than the current viewport.
+
## Indicator dot
> **Option names:** _Show whether the OP has participated in other threads_,
_Show the number of questions and replies written by the OP within the last `n`
diff --git a/src/common/optionsPrototype.json5 b/src/common/optionsPrototype.json5
index 093228e..0132436 100644
--- a/src/common/optionsPrototype.json5
+++ b/src/common/optionsPrototype.json5
@@ -105,6 +105,11 @@
context: 'options',
killSwitchType: 'option',
},
+ 'imagemaxheight': {
+ defaultValue: false,
+ context: 'options',
+ killSwitchType: 'option',
+ },
// Experiments:
diff --git a/src/contentScripts/communityConsole/main.js b/src/contentScripts/communityConsole/main.js
index 6b32496..eaff3ce 100644
--- a/src/contentScripts/communityConsole/main.js
+++ b/src/contentScripts/communityConsole/main.js
@@ -225,6 +225,10 @@
injectStylesheet(chrome.runtime.getURL('css/reposition_expand_thread.css'));
}
+ if (options.imagemaxheight) {
+ injectStylesheet(chrome.runtime.getURL('css/image_max_height.css'));
+ }
+
if (options.ccforcehidedrawer) {
var drawer = document.querySelector('material-drawer');
if (drawer !== null && drawer.classList.contains('mat-drawer-expanded')) {
diff --git a/src/options/optionsPage.json5 b/src/options/optionsPage.json5
index e4641b6..df14718 100644
--- a/src/options/optionsPage.json5
+++ b/src/options/optionsPage.json5
@@ -36,6 +36,7 @@
{codename: 'ccdragndropfix', customHTML: '<div id="dragndrop-wrapper" class="option" hidden><input type="checkbox" id="ccdragndropfix"> <label for="ccdragndropfix" data-i18n="ccdragndropfix"></label></div>'},
{codename: 'enhancedannouncementsdot'},
{codename: 'repositionexpandthread', experimental: true},
+ {codename: 'imagemaxheight'},
],
},
],
diff --git a/src/static/_locales/en/messages.json b/src/static/_locales/en/messages.json
index 02b0bea..1fe26e9 100644
--- a/src/static/_locales/en/messages.json
+++ b/src/static/_locales/en/messages.json
@@ -111,6 +111,10 @@
"message": "Show a notification in the Community Console when a thread list has new updates.",
"description": "Feature checkbox in the options page"
},
+ "options_imagemaxheight": {
+ "message": "Prevent inline images in messages from being taller than the current window.",
+ "description": "Feature checkbox in the options page"
+ },
"options_profileindicator_moreinfo": {
"message": "+info about the 2 previous options",
"description": "Link to learn more about the profile indicator feature"
diff --git a/src/static/css/image_max_height.css b/src/static/css/image_max_height.css
new file mode 100644
index 0000000..2e9b48b
--- /dev/null
+++ b/src/static/css/image_max_height.css
@@ -0,0 +1,5 @@
+ec-question .body img,
+ ec-message .body img {
+ /* "Max height = full height - 2 * height of the header" */
+ max-height: calc(100vh - 2*64px);
+}
diff --git a/templates/manifest.gjson b/templates/manifest.gjson
index 836cecf..20999d8 100644
--- a/templates/manifest.gjson
+++ b/templates/manifest.gjson
@@ -75,7 +75,8 @@
"css/enhanced_announcements_dot.css",
"css/reposition_expand_thread.css",
"css/thread_list_avatars.css",
- "css/autorefresh_list.css"
+ "css/autorefresh_list.css",
+ "css/image_max_height.css"
#if defined(CHROMIUM_MV3)
],
"matches": [