Improve UI of the About section and changelog viewer

- Keep consistent width between the Help page and Changelog (which is already different from other windows 😠)
- Add icons to the About links
- Make sure `li` elements (i.e. all the lists in changelogs) are consistent in size with rest of the client
- Display version and release notes link on the "About The Lounge" header line, smaller, pushed to the right
- Check new releases when opening the Help window in order to display it without having to open the release notes. Release notes are being fed to the Changelog page at that moment to avoid fetching twice.
- Re-check version/fetch release notes after 24h. Since The Lounge can now run 24/7, reconnect when losing the network, we have to assume an "always-on" usage.
- Change icon, animate background color when getting response from GitHub to avoid flashing.
- Combine click handlers with our wonderful window management. These were the same handler, even with similar checks (`target` exists, etc.), just in 2 different places. This is necessary for the next item.
- Combine "Open release notes" and "Go back to Help" button behaviors with window management handlers. The window management code is gross as ever, and is in desperate need of a refactor, but at least there is no duplicated code for the same behavior + history management. This fixes the "Next" history behavior (however reloading the app while viewing the notes does not load on the notes, but this is a bug for a different PR!).
- Added a rule in the history management thingy: if a link we want to add history handling to has an `id`, store that in the state
- Added a button to go back to the Help window
- Fixed links to releases
- Send user to the GitHub issues *list* instead of *new issue form* because if they do not have a GitHub account, they will be redirected to the login page, which is a rather unpleasant experience when you are already confused...
- Fixed a bug that would return data about a new release in `latest` even though it is already the `current`. It was showing the current version as "The Lounge v... is now available".
- Added https://user-images.githubusercontent.com to the CSP rule when prefetch storage is enabled, because that is where we have stored screenshots in the changelog so far. Meh (we can improve that later if we decide to have a dedicated place for screenshots).
- Fetch changelog info even in public mode because users in public mode can access the release notes. They do not see the result of the version checker however.

client/css/style.css

@@ -168,7 +168,8 @@ kbd {
 	touch-action: pan-y;
 }
 
-#help .container {
+#help .container,
+#changelog .container {
 	max-width: 600px;
 }
 
@@ -188,7 +189,6 @@ kbd {
 #js-copy-hack,
 #loading pre,
 #help,
-#changelog,
 #windows .header .title,
 #windows .header .topic,
 #chat .messages {
@@ -237,6 +237,9 @@ kbd {
 #chat .toggle-button::after,
 .changelog-version::before,
 .context-menu-item::before,
+#help .website-link::before,
+#help .documentation-link::before,
+#help .report-issue-link::before,
 #nick button::before,
 #image-viewer .previous-image-btn::before,
 #image-viewer .next-image-btn::before {
@@ -287,6 +290,21 @@ kbd {
 	color: #7f8c8d;
 }
 
+#help .website-link::before,
+#help .documentation-link::before,
+#help .report-issue-link::before,
+#chat .toggle-button {
+	display: inline-block;
+	margin-right: 5px;
+	/* These 2 directives are loosely taken from .fa-fw */
+	width: 1.35em;
+	text-align: center;
+}
+
+#help .website-link::before { content: "\f0ac"; /* http://fontawesome.io/icon/globe/ */ }
+#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
+#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
+
 .session-list strong {
 	display: block;
 }
@@ -732,6 +750,7 @@ kbd {
 	width: 100%;
 }
 
+#windows li,
 #windows p,
 #windows label,
 #settings .error {
@@ -789,6 +808,11 @@ kbd {
 	padding-bottom: 7px;
 }
 
+#windows .window h2 small {
+	color: inherit;
+	line-height: 30px;
+}
+
 #windows .window h3 {
 	color: #7f8c8d;
 	font-size: 18px;
@@ -1595,16 +1619,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	grid-column-start: 2;
 }
 
-#help .help-links {
-	margin-right: 20px;
-}
-
-#changelog .container {
-	max-width: 740px;
-}
-
 .changelog-text {
-	font-size: 16px;
 	line-height: 1.5;
 }
 
@@ -1627,24 +1642,41 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	border-radius: 2px;
 	background-color: #d9edf7;
 	color: #31708f;
+	transition: color 0.2s, background-color 0.2s;
 }
 
 .changelog-version::before {
 	margin-right: 6px;
-	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
+	content: "\f250"; /* http://fontawesome.io/icon/hourglass-o/ */
 }
 
-.changelog-version-new {
+.changelog-version.new-version {
+	color: #8a6d3b;
+	background-color: #fcf8e3;
+}
+
+.changelog-version.new-version::before {
+	content: "\f087"; /* http://fontawesome.io/icon/thumbs-o-up/ */
+}
+
+.changelog-version.error {
+	color: #a94442;
+	background-color: #f2dede;
+}
+
+.changelog-version.error::before {
+	margin-right: 6px;
+	content: "\f06a"; /* http://fontawesome.io/icon/exclamation-circle/ */
+}
+
+.changelog-version.up-to-date {
 	background-color: #dff0d8;
 	color: #3c763d;
 }
 
-.changelog-version-new:hover {
+.changelog-version.up-to-date::before {
-	color: #2b542c;
+	margin-right: 6px;
-}
+	content: "\f00c"; /* http://fontawesome.io/icon/check/ */
-
-.changelog-version-new::before {
-	content: "\f0ed"; /* http://fontawesome.io/icon/cloud-download/ */
 }
 
 #form {

client/js/lounge.js

@@ -332,65 +332,43 @@ $(function() {
 		$(this).closest(".msg.condensed").toggleClass("closed");
 	});
 
-	sidebar.on("click", ".chan, button", function(e, data) {
+	let changelogRequestedAt = 0;
-		// Pushes states to history web API when clicking elements with a data-target attribute.
-		// States are very trivial and only contain a single `clickTarget` property which
-		// contains a CSS selector that targets elements which takes the user to a different view
-		// when clicked. The `popstate` event listener will trigger synthetic click events using that
-		// selector and thus take the user to a different view/state.
-		if (data && data.pushState === false) {
-			return;
-		}
-		const self = $(this);
-		const target = self.data("target");
-		if (!target) {
-			return;
-		}
-		const state = {};
 
-		if (self.hasClass("chan")) {
+	const openWindow = function openWindow(e, data) {
-			state.clickTarget = `#sidebar .chan[data-id="${self.data("id")}"]`;
-		} else {
-			state.clickTarget = `#footer button[data-target="${target}"]`;
-		}
-
-		if (history && history.pushState) {
-			if (data && data.replaceHistory && history.replaceState) {
-				history.replaceState(state, null, target);
-			} else {
-				history.pushState(state, null, target);
-			}
-		}
-	});
-
-	sidebar.on("click", ".chan, button", function() {
 		var self = $(this);
 		var target = self.data("target");
 		if (!target) {
 			return;
 		}
 
-		chat.data(
+		// This is a rather gross hack to account for sources that are in the
-			"id",
+		// sidebar specifically. Needs to be done better when window management gets
-			self.data("id")
+		// refactored.
-		);
+		const inSidebar = self.parents("#sidebar").length > 0;
-		socket.emit(
-			"open",
-			self.data("id")
-		);
 
-		sidebar.find(".active").removeClass("active");
+		if (inSidebar) {
-		self.addClass("active")
+			chat.data(
-			.find(".badge")
+				"id",
-			.removeClass("highlight")
+				self.data("id")
-			.empty();
+			);
+			socket.emit(
+				"open",
+				self.data("id")
+			);
 
-		if (sidebar.find(".highlight").length === 0) {
+			sidebar.find(".active").removeClass("active");
-			utils.toggleNotificationMarkers(false);
+			self.addClass("active")
+				.find(".badge")
+				.removeClass("highlight")
+				.empty();
+
+			if (sidebar.find(".highlight").length === 0) {
+				utils.toggleNotificationMarkers(false);
+			}
+
+			sidebarSlide.toggle(false);
 		}
 
-		sidebarSlide.toggle(false);
-
 		var lastActive = $("#windows > .active");
 
 		lastActive
@@ -447,8 +425,49 @@ $(function() {
 			socket.emit("sessions:get");
 		}
 
+		if (target === "#help" || target === "#changelog") {
+			const now = Date.now();
+			// Don't check more than once a day
+			if (now - changelogRequestedAt > 86400 * 1000) {
+				changelogRequestedAt = now;
+				socket.emit("changelog");
+			}
+		}
+
 		focus();
-	});
+
+		// Pushes states to history web API when clicking elements with a data-target attribute.
+		// States are very trivial and only contain a single `clickTarget` property which
+		// contains a CSS selector that targets elements which takes the user to a different view
+		// when clicked. The `popstate` event listener will trigger synthetic click events using that
+		// selector and thus take the user to a different view/state.
+		if (data && data.pushState === false) {
+			return;
+		}
+		const state = {};
+
+		if (self.attr("id")) {
+			state.clickTarget = `#${self.attr("id")}`;
+		} else if (self.hasClass("chan")) {
+			state.clickTarget = `#sidebar .chan[data-id="${self.data("id")}"]`;
+		} else {
+			state.clickTarget = `#footer button[data-target="${target}"]`;
+		}
+
+		if (history && history.pushState) {
+			if (data && data.replaceHistory && history.replaceState) {
+				history.replaceState(state, null, target);
+			} else {
+				history.pushState(state, null, target);
+			}
+		}
+
+		return false;
+	};
+
+	sidebar.on("click", ".chan, button", openWindow);
+	$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
+	$("#changelog").on("click", "#back-to-help", openWindow);
 
 	sidebar.on("click", "#sign-out", function() {
 		socket.emit("sign-out");

client/js/socket-events/changelog.js

@@ -5,5 +5,18 @@ const socket = require("../socket");
 const templates = require("../../views");
 
 socket.on("changelog", function(data) {
+	const container = $("#changelog-version-container");
+
+	if (data.latest) {
+		container.addClass("new-version");
+		container.html(templates.new_version(data));
+	} else if (data.current.changelog) {
+		container.addClass("up-to-date");
+		container.text("The Lounge is up to date!");
+	} else {
+		container.addClass("error");
+		container.text("An error has occurred, try to reload the page.");
+	}
+
 	$("#changelog").html(templates.windows.changelog(data));
 });

client/js/socket-events/configuration.js

@@ -66,22 +66,4 @@ socket.on("configuration", function(data) {
 			// Store the "previous" value, for next time
 			$(this).data("lastvalue", nick);
 		});
-
-	$("#view-changelog").on("click", function() {
-		$("#windows > .active")
-			.removeClass("active")
-			.find(".chat")
-			.unsticky();
-
-		$("#changelog")
-			.addClass("active");
-
-		history.pushState({
-			clickTarget: "#view-changelog",
-		}, null, "#changelog");
-
-		return false;
-	}).one("click", function() {
-		socket.emit("changelog");
-	});
 });

client/views/index.js

@@ -31,6 +31,7 @@ module.exports = {
 
 	chan: require("./chan.tpl"),
 	chat: require("./chat.tpl"),
+	new_version: require("./new_version.tpl"),
 	contextmenu_divider: require("./contextmenu_divider.tpl"),
 	contextmenu_item: require("./contextmenu_item.tpl"),
 	date_marker: require("./date-marker.tpl"),

client/views/new_version.tpl

@@ -0,0 +1,6 @@
+The Lounge <b>{{latest.version}}</b>{{#if latest.prerelease}} (pre-release){{/if}}
+is now available.
+
+<a href="{{latest.url}}" target="_blank" rel="noopener">
+	Read more on GitHub
+</a>

client/views/windows/changelog.tpl

@@ -2,18 +2,9 @@
 	<button class="lt" aria-label="Toggle channel list"></button>
 </div>
 <div class="container">
-	{{#if current}}
+	<a href="#" id="back-to-help" data-target="#help">« Help</a>
-		{{#if latest}}
-		<a href="{{latest.url}}" target="_blank" rel="noopener" class="changelog-version changelog-version-new">
-			The Lounge <b>{{latest.version}}</b>{{#if latest.prerelease}} (pre-release){{/if}} is now available.
-			Click to view details on GitHub.
-		</a>
-		{{else if current.changelog}}
-		<div class="changelog-version">
-			The Lounge is up to date!
-		</div>
-		{{/if}}
 
+	{{#if current}}
 		<h1 class="title">Release notes for {{current.version}}</h1>
 
 		{{#if current.changelog}}
@@ -21,7 +12,7 @@
 			<div class="changelog-text">{{{current.changelog}}}</div>
 		{{else}}
 			<p>Unable to retrieve releases from GitHub.</p>
-			<p><a href="https://github.com/thelounge/lounge/releases/tag/{{current.version}}" target="_blank" rel="noopener">View release notes for this version on GitHub</a></p>
+			<p><a href="https://github.com/thelounge/lounge/releases/tag/v{{current.version}}" target="_blank" rel="noopener">View release notes for this version on GitHub</a></p>
 		{{/if}}
 	{{else}}
 		<p>Loading changelog…</p>

client/views/windows/help.tpl

@@ -4,25 +4,48 @@
 <div class="container">
 	<h1 class="title">Help</h1>
 
-	<h2>About The Lounge</h2>
+	<h2>
+		<small class="pull-right">
+			v{{version}}
+			(<a href="#" id="view-changelog" data-target="#changelog">release notes</a>)
+		</small>
+		About The Lounge
+	</h2>
 
 	<div class="about">
+		{{#unless public}}
+			<p id="changelog-version-container" class="changelog-version">
+				Checking for updates...
+			</p>
+		{{/unless}}
+
 		{{#if gitCommit}}
-			<p>The Lounge is running from source (commit <a href="https://github.com/thelounge/lounge/tree/{{gitCommit}}" target="_blank" rel="noopener"><code>{{gitCommit}}</code></a>) based on <strong>{{version}}</strong></p>
+			<p>
-			<p><a href="https://github.com/thelounge/lounge/compare/{{gitCommit}}...master" target="_blank" rel="noopener">Compare changes between <code>{{gitCommit}}</code> and <code>master</code> to see what you are missing</a></p>
+				The Lounge is running from source
-			<p><a href="https://github.com/thelounge/lounge/compare/{{version}}...{{gitCommit}}" target="_blank" rel="noopener">Compare changes between <code>{{version}}</code> and <code>{{gitCommit}}</code> to see the changes made</a></p>
+				(<a href="https://github.com/thelounge/lounge/tree/{{gitCommit}}" target="_blank" rel="noopener">commit <code>{{gitCommit}}</code></a>).
-		{{else}}
+			</p>
-			<p>The Lounge is running <a href="https://github.com/thelounge/lounge/releases/tag/{{version}}" target="_blank" rel="noopener"><strong>{{version}}</strong></a>.</p>
+
+			<ul>
+				<li>
+					Compare
+					<a href="https://github.com/thelounge/lounge/compare/{{gitCommit}}...master" target="_blank" rel="noopener">between <code>{{gitCommit}}</code> and <code>master</code></a>
+					to see what you are missing
+				</li>
+				<li>
+					Compare
+					<a href="https://github.com/thelounge/lounge/compare/{{version}}...{{gitCommit}}" target="_blank" rel="noopener">between <code>{{version}}</code> and <code>{{gitCommit}}</code></a>
+					to see your local changes</li>
+			</ul>
 		{{/if}}
 
-	{{#unless public}}
-		<button class="btn btn-sm" id="view-changelog">View release notes &amp; check for updates</button>
-	{{/unless}}
-
 		<p>
-			<a href="https://thelounge.github.io/" target="_blank" rel="noopener">View website</a><br>
+			<a href="https://thelounge.github.io/" target="_blank" rel="noopener" class="website-link">Website</a>
-			<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener">View documentation</a><br>
+		</p>
-			<a href="https://github.com/thelounge/lounge/issues/new" target="_blank" rel="noopener">Report a bug on GitHub</a>
+		<p>
+			<a href="https://thelounge.github.io/docs/" target="_blank" rel="noopener" class="documentation-link">Documentation</a>
+		</p>
+		<p>
+			<a href="https://github.com/thelounge/lounge/issues/new" target="_blank" rel="noopener" class="report-issue-link">Report an issue…</a>
 		</p>
 	</div>
 

src/plugins/changelog.js

@@ -4,10 +4,10 @@ const pkg = require("../../package.json");
 const request = require("request");
 
 module.exports = {
-	sendChangelog: handleChangelog,
+	fetch,
 };
 
-function handleChangelog(callback) {
+function fetch(callback) {
 	const changelog = {
 		current: {
 			version: `v${pkg.version}`,
@@ -27,12 +27,13 @@ function handleChangelog(callback) {
 			return;
 		}
 
-		let i = 0;
+		let i;
 		let release;
 		let prerelease = false;
 
 		body = JSON.parse(body);
 
+		// Find the current release among releases on GitHub
 		for (i = 0; i < body.length; i++) {
 			release = body[i];
 			if (release.tag_name === changelog.current.version) {
@@ -43,9 +44,10 @@ function handleChangelog(callback) {
 			}
 		}
 
-		if (i > 0 && changelog.current) {
+		// Find the latest release made after the current one if there is one
-			for (i = 0; i < body.length; i++) {
+		if (i > 0) {
-				release = body[i];
+			for (let j = 0; j < i; j++) {
+				release = body[j];
 
 				// Find latest release or pre-release if current version is also a pre-release
 				if (!release.prerelease || release.prerelease === prerelease) {

src/server.js

@@ -218,7 +218,7 @@ function index(req, res, next) {
 
 	// If prefetch is enabled, but storage is not, we have to allow mixed content
 	if (Helper.config.prefetchStorage || !Helper.config.prefetch) {
-		policies.push("img-src 'self'");
+		policies.push("img-src 'self' https://user-images.githubusercontent.com");
 		policies.unshift("block-all-mixed-content");
 	} else {
 		policies.push("img-src http: https:");
@@ -341,13 +341,11 @@ function initializeClient(socket, client, token, lastMessage) {
 		}
 	);
 
-	if (!Helper.config.public) {
+	socket.on("changelog", function() {
-		socket.on("changelog", function() {
+		changelog.fetch((data) => {
-			changelog.sendChangelog((data) => {
+			socket.emit("changelog", data);
-				socket.emit("changelog", data);
-			});
 		});
-	}
+	});
 
 	socket.on("msg:preview:toggle", function(data) {
 		const networkAndChan = client.find(data.target);