* shorten_expanded: use promises instead of a timeout hack

* normalize some icon colors

plugins/shorten_expanded/init.css

@@ -1,7 +1,8 @@
 .content-shrink-wrap {
 	overflow : hidden;
 	text-overflow: ellipsis;
-	height : 800px;
+	height : 80vh;
+	margin-bottom : 8px;
 }
 
 .expand-prompt {

plugins/shorten_expanded/init.js

@@ -1,10 +1,68 @@
-/* global Plugins, __, require, PluginHost */
+/* global Plugins, __, require, PluginHost, App, dojo */
-
-const _shorten_expanded_threshold = 1.5; //window heights
 
 Plugins.Shorten_Expanded = {
+	threshold: 1.5, // of window height
+	shorten_if_needed: function(row) {
+
+		const content = row.querySelector(".content");
+		const content_inner = row.querySelector(".content-inner");
+
+		console.log('shorten_expanded', row.id, content.offsetHeight, 'vs', this.threshold * window.innerHeight);
+
+		if (content && content_inner && content.offsetHeight >= this.threshold * window.innerHeight) {
+
+			const attachments = row.querySelector(".attachments-inline"); // optional
+
+			content_inner.innerHTML = `
+				<div class="content-shrink-wrap">
+					${content_inner.innerHTML}
+					${attachments ? attachments.innerHTML : ''}
+				</div>
+				<button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
+					${App.FormFields.icon('add')}
+					${__("Expand article")}
+				</button>`;
+
+			if (attachments)
+				attachments.innerHTML = "";
+
+			dojo.parser.parse(content_inner);
+
+			return true;
+		}
+		return false;
+	},
+	process_row: function(row) {
+
+		if (this.shorten_if_needed(row))
+			return;
+
+		const promises = [];
+
+		[...row.querySelectorAll("img, video")].forEach((img) => {
+			const promise = new Promise((resolve, reject) => {
+				img.onload = () => resolve(img);
+				img.onloadeddata = () => resolve(img);
+				img.error = () => reject(new Error("unable to load video"));
+				img.onerror = () => reject(new Error("unable to load image"));
+			});
+
+			const timeout = new Promise((resolve, reject) => {
+				const id = setTimeout(() => {
+					clearTimeout(id);
+					reject(new Error("timed out"));
+				}, 250)
+			})
+
+			promises.push(Promise.race([promise, timeout]));
+		});
+
+		Promise.allSettled(promises).then(() => {
+			this.shorten_if_needed(row);
+		});
+	},
 	expand: function(id) {
-		const row = $(id);
+		const row = App.byId(id);
 
 		if (row) {
 			const content = row.querySelector(".content-shrink-wrap");
@@ -21,33 +79,7 @@ Plugins.Shorten_Expanded = {
 require(['dojo/_base/kernel', 'dojo/ready'], function  (dojo, ready) {
 	ready(function() {
 		PluginHost.register(PluginHost.HOOK_ARTICLE_RENDERED_CDM, function(row) {
-			window.setTimeout(function() {
+			Plugins.Shorten_Expanded.process_row(row);
-				if (row) {
-
-					const content = row.querySelector(".content-inner");
-
-					//console.log('shorten', row.offsetHeight, 'vs', _shorten_expanded_threshold * window.innerHeight);
-
-					if (content && row.offsetHeight >= _shorten_expanded_threshold * window.innerHeight) {
-
-						const attachments = row.querySelector(".attachments-inline"); // optional
-
-						content.innerHTML = `
-							<div class="content-shrink-wrap">
-								${content.innerHTML}
-								${attachments ? attachments.innerHTML : ''}
-							</div>
-							<button dojoType="dijit.form.Button" class="alt-info expand-prompt" onclick="return Plugins.Shorten_Expanded.expand('${row.id}')" href="#">
-								${__("Click to expand article")}</button>`;
-
-						if (attachments)
-							attachments.innerHTML = "";
-
-						dojo.parser.parse(content);
-					}
-				}
-			}, 150);
-
 			return true;
 		});
 	});

themes/compact.css

@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
 body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
   display: none;
 }
+body.ttrss_main {
+  /*.score-neutral i.icon-score {
+		opacity : 0.5;
+	}*/
+}
 body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
 body.ttrss_main .score-low i.icon-score {
   color: #500;
 }
-body.ttrss_main .score-neutral i.icon-score {
-  opacity: 0.5;
-}
 body.ttrss_main i.icon-score {
   cursor: pointer;
+  color: #777;
 }
 body.ttrss_main .panel {
   border: 1px solid #ddd;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
-.cdm i.material-icons {
+.cdm {
-  color: #777;
+  /*i.material-icons {
+		color : @color-icon;
+	}*/
 }
 .cdm .header {
   position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
   clear: both;
   align-items: center;
 }
+.cdm .footer i.material-icons {
+  color: #777;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }

themes/compact_night.css

@@ -51,7 +51,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
-  color: #777;
+  color: #999;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -226,7 +226,7 @@ body.ttrss_main .hl .right i.material-icons {
   font-size: 21px;
 }
 body.ttrss_main .hl .right i.material-icons {
-  color: #777;
+  color: #999;
 }
 body.ttrss_main .hl div.title {
   cursor: pointer;
@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
 body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
   display: none;
 }
+body.ttrss_main {
+  /*.score-neutral i.icon-score {
+		opacity : 0.5;
+	}*/
+}
 body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
 body.ttrss_main .score-low i.icon-score {
   color: #500;
 }
-body.ttrss_main .score-neutral i.icon-score {
-  opacity: 0.5;
-}
 body.ttrss_main i.icon-score {
   cursor: pointer;
+  color: #999;
 }
 body.ttrss_main .panel {
   border: 1px solid #222;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
-.cdm i.material-icons {
+.cdm {
-  color: #777;
+  /*i.material-icons {
+		color : @color-icon;
+	}*/
 }
 .cdm .header {
   position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
   clear: both;
   align-items: center;
 }
+.cdm .footer i.material-icons {
+  color: #999;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }

themes/light.css

@@ -982,6 +982,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
 body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
   display: none;
 }
+body.ttrss_main {
+  /*.score-neutral i.icon-score {
+		opacity : 0.5;
+	}*/
+}
 body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
@@ -1018,11 +1023,9 @@ body.ttrss_main .score-high i.icon-score {
 body.ttrss_main .score-low i.icon-score {
   color: #500;
 }
-body.ttrss_main .score-neutral i.icon-score {
-  opacity: 0.5;
-}
 body.ttrss_main i.icon-score {
   cursor: pointer;
+  color: #777;
 }
 body.ttrss_main .panel {
   border: 1px solid #ddd;
@@ -1206,8 +1209,10 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
-.cdm i.material-icons {
+.cdm {
-  color: #777;
+  /*i.material-icons {
+		color : @color-icon;
+	}*/
 }
 .cdm .header {
   position: sticky;
@@ -1269,6 +1274,9 @@ video::-webkit-media-controls-overlay-play-button {
   clear: both;
   align-items: center;
 }
+.cdm .footer i.material-icons {
+  color: #777;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }

themes/light/cdm.less

@@ -1,7 +1,7 @@
 .cdm {
-	i.material-icons {
+	/*i.material-icons {
 		color : @color-icon;
-	}
+	}*/
 
 	.header {
 		position: sticky;
@@ -70,6 +70,10 @@
 		clear : both;
 		align-items : center;
 
+		i.material-icons {
+			color : @color-icon;
+		}
+
 		.left {
 			flex-grow : 2;
 		}

themes/light/defines.less

@@ -14,6 +14,7 @@
 @border-default : #ddd;
 @default-text: #555;
 @color-icon: #777;
+@color-hl-icon: #ccc;
 @color-tooltip-fg: @color-panel-bg;
 @color-tooltip-bg: darken(@color-accent, 10%);
 

themes/light/tt-rss.less

@@ -423,7 +423,7 @@ body.ttrss_main {
 
 	i.marked-pic, i.pub-pic {
 		cursor : pointer;
-		color : #ccc;
+		color : @color-hl-icon;
 	}
 
 	div.errorExplained {
@@ -1208,12 +1208,13 @@ body.ttrss_main {
 		color : #500;
 	}
 
-	.score-neutral i.icon-score {
+	/*.score-neutral i.icon-score {
 		opacity : 0.5;
-	}
+	}*/
 
 	i.icon-score {
 		cursor : pointer;
+		color : @color-icon;
 	}
 
 	.panel {

themes/night.css

@@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
-  color: #777;
+  color: #999;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons {
   font-size: 21px;
 }
 body.ttrss_main .hl .right i.material-icons {
-  color: #777;
+  color: #999;
 }
 body.ttrss_main .hl div.title {
   cursor: pointer;
@@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
 body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
   display: none;
 }
+body.ttrss_main {
+  /*.score-neutral i.icon-score {
+		opacity : 0.5;
+	}*/
+}
 body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
@@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score {
 body.ttrss_main .score-low i.icon-score {
   color: #500;
 }
-body.ttrss_main .score-neutral i.icon-score {
-  opacity: 0.5;
-}
 body.ttrss_main i.icon-score {
   cursor: pointer;
+  color: #999;
 }
 body.ttrss_main .panel {
   border: 1px solid #222;
@@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
-.cdm i.material-icons {
+.cdm {
-  color: #777;
+  /*i.material-icons {
+		color : @color-icon;
+	}*/
 }
 .cdm .header {
   position: sticky;
@@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button {
   clear: both;
   align-items: center;
 }
+.cdm .footer i.material-icons {
+  color: #999;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }

themes/night_base.less

@@ -9,7 +9,7 @@
 @default-fg: @default-text;
 @border-default: #222;
 @default-bg : #333;
-
+@color-icon: #999;
 @border-light : #666;
 
 @default-text: #ccc;

themes/night_blue.css

@@ -52,7 +52,7 @@ body.ttrss_main div.post div.header img,
 body.ttrss_main div.post div.header i.material-icons {
   margin: 0px 4px;
   vertical-align: middle;
-  color: #777;
+  color: #999;
 }
 body.ttrss_main div.post div.header .title {
   flex-grow: 2;
@@ -227,7 +227,7 @@ body.ttrss_main .hl .right i.material-icons {
   font-size: 21px;
 }
 body.ttrss_main .hl .right i.material-icons {
-  color: #777;
+  color: #999;
 }
 body.ttrss_main .hl div.title {
   cursor: pointer;
@@ -983,6 +983,11 @@ body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-show
 body.ttrss_main:not([view-mode="marked"])[hide-read-feeds="true"][hide-read-shows-special="false"] #feeds-holder #feedTree .dijitTreeRow:not(.Unread):not(.AlwaysVisible) {
   display: none;
 }
+body.ttrss_main {
+  /*.score-neutral i.icon-score {
+		opacity : 0.5;
+	}*/
+}
 body.ttrss_main #toolbar-headlines i.icon-syndicate {
   color: #ff7c4b;
   margin-right: 8px;
@@ -1019,11 +1024,9 @@ body.ttrss_main .score-high i.icon-score {
 body.ttrss_main .score-low i.icon-score {
   color: #500;
 }
-body.ttrss_main .score-neutral i.icon-score {
-  opacity: 0.5;
-}
 body.ttrss_main i.icon-score {
   cursor: pointer;
+  color: #999;
 }
 body.ttrss_main .panel {
   border: 1px solid #222;
@@ -1207,8 +1210,10 @@ body.ttrss_utility div.autocomplete ul li {
 video::-webkit-media-controls-overlay-play-button {
   display: none;
 }
-.cdm i.material-icons {
+.cdm {
-  color: #777;
+  /*i.material-icons {
+		color : @color-icon;
+	}*/
 }
 .cdm .header {
   position: sticky;
@@ -1270,6 +1275,9 @@ video::-webkit-media-controls-overlay-play-button {
   clear: both;
   align-items: center;
 }
+.cdm .footer i.material-icons {
+  color: #999;
+}
 .cdm .footer .left {
   flex-grow: 2;
 }