Add chat font settings. Update changelog. Remove old credits file and old, moved theme.scss. Fix FFZ menu rendering in Firefox/Edge.

changelog.html

@@ -1,3 +1,11 @@
+<div class="list-header">4.0.0-beta1.3<span>@63206f4ff1c95b591873</span> <time datetime="2017-11-13">(2017-11-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Appearance > Theme > Gray Theme (no Purple)</li>
+	<li>Added: Chat > Appearance > Font Family</li>
+	<li>Added: Chat > Appearance > Font Size</li>
+	<li>Fixed: Chat not working if the username has a capital letter in it.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.3<span>@b86de82715b14711a01c</span> <time datetime="2017-11-13">(2017-11-13)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Freeze Chat Scrolling</li>

credits.html

@@ -1,20 +0,0 @@
-<div class="list-header">Awesome People</div>
-<ul class="chat-menu-content menu-side-padding">
-    <li><a href="//twitch.tv/fugi" target="_blank">Fugi</a> - Wrote the Chat Delay feature.</li>
-    <li><a href="//twitch.tv/daxterspeed" target="_blank">DaxterSpeed</a> - Wrote a method for adjusting username colors.</li>
-    <li><a href="//twitch.tv/riking27" target="_blank">Riking</a> - Wrote a large part of the socket server system.</li>
-    <li><a href="//twitch.tv/walle303" target="_blank">walle303</a> - Wrote a chat command to rename group chats. Also reported a bug or two.</li>
-</ul>
-
-
-<div class="list-header">Awesome Resources</div>
-<ul class="chat-menu-content menu-side-padding">
-    <li><a href="https://cbenni.com/" target="_blank">CBenni's logviewer</a> - Chat moderation logs for Twitch</li>
-    <li><a href="https://letsencrypt.org/" target="_blank">Let's Encrypt</a> - Free and Automated SSL for Everyone</li>
-    <li><a href="https://isthereanydeal.com/" target="_blank">IsThereAnyDeal</a> - Competitive pricing information for videogames</li>
-    <li><a href="https://github.com/eligrey/FileSaver.js" target="_blank">FileSaver.js</a> - saveAs() implementation</li>
-    <li><a href="http://objectpath.org/" target="_blank">ObjectPath</a> - Lightweight query language for JSON</li>
-    <li><a href="https://github.com/twitter/twemoji" target="_blank">Twitter Emoji for Everyone</a> - Twitter's Emoji</li>
-    <li><a href="https://github.com/googlei18n/noto-emoji" target="_blank">Noto Emoji</a> - Google's Noto Emoji</li>
-    <li><a href="http://emojione.com/" target="_blank">EmojiOne</a> - An open source emoji project</li>
-</ul>

src/modules/main_menu/components/home-page.vue

@@ -39,7 +39,6 @@
 
 			<ul class="mg-b-2">
 				<li>Dark Theme (Pls No Purple)</li>
-				<li>Chat Pause on Hover</li>
 				<li>Badge Customization</li>
 				<li>Emoji Rendering</li>
 				<li>Emotes Menu</li>

src/modules/main_menu/components/main-menu.vue

@@ -26,7 +26,7 @@
 			</span>
 		</button>
 	</header>
-	<section class="border-t full-height full-width flex flex--nowrap">
+	<section class="border-t full-height full-width flex flex-nowrap overflow-hidden">
 		<nav class="ffz-vertical-nav c-background-alt-2 border-r full-height flex flex-column flex-shrink-0 flex-nowrap">
 			<header class="border-b pd-1">
 				<profile-selector

src/sites/twitch-twilight/modules/chat/index.js

@@ -99,6 +99,33 @@ export default class ChatHook extends Module {
 			}
 		});
 
+		this.settings.add('chat.font-size', {
+			default: 12,
+			ui: {
+				path: 'Chat > Appearance >> General',
+				title: 'Font Size',
+				description: 'How large should text in chat be, in pixels.',
+				component: 'setting-text-box',
+				process(val) {
+					val = parseInt(val, 10);
+					if ( isNaN(val) || ! isFinite(val) || val <= 0 )
+						return 12;
+
+					return val;
+				}
+			}
+		});
+
+		this.settings.add('chat.font-family', {
+			default: '',
+			ui: {
+				path: 'Chat > Appearance >> General',
+				title: 'Font Family',
+				description: 'Set the font used for displaying chat messages.',
+				component: 'setting-text-box'
+			}
+		});
+
 		this.settings.add('chat.bits.show-pinned', {
 			default: true,
 			ui: {
@@ -167,8 +194,28 @@ export default class ChatHook extends Module {
 	}
 
 
-	updateChatWidth() {
+	updateChatCSS() {
-		const width = this.chat.context.get('chat.width');
+		const width = this.chat.context.get('chat.width'),
+			size = this.chat.context.get('chat.font-size'),
+			font = this.chat.context.get('chat.font-family');
+
+		if ( size === 12 )
+			this.css_tweaks.style.delete('chat-font-size');
+		else {
+			const lh = Math.round((20/12) * size);
+			this.css_tweaks.style.set('chat-font-size',`.chat-list{font-size:${size}px;line-height:${lh}px}`);
+		}
+
+		if ( ! font )
+			this.css_tweaks.style.delete('chat-font-family');
+		else {
+			let val = font;
+			if ( font.indexOf(' ') !== -1 && val.indexOf(',') === -1 && val.indexOf('"') === -1 && val.indexOf("'") === -1 )
+				val = `"${val}"`;
+			this.css_tweaks.style.set('chat-font-family', `.chat-list{font-family:${val}}`);
+		}
+
+
 		if ( width === 340 )
 			this.css_tweaks.style.delete('chat-width');
 		else
@@ -186,7 +233,9 @@ export default class ChatHook extends Module {
 
 
 	onEnable() {
-		this.chat.context.on('changed:chat.width', this.updateChatWidth, this);
+		this.chat.context.on('changed:chat.width', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.font-size', this.updateChatCSS, this);
+		this.chat.context.on('changed:chat.font-family', this.updateChatCSS, this);
 		this.chat.context.on('changed:chat.bits.stack', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.adjustment-mode', this.updateColors, this);
 		this.chat.context.on('changed:chat.adjustment-contrast', this.updateColors, this);
@@ -209,7 +258,7 @@ export default class ChatHook extends Module {
 		this.css_tweaks.toggle('chat-rows', this.chat.context.get('chat.lines.alternate'));
 		this.css_tweaks.toggle('chat-padding', this.chat.context.get('chat.lines.padding'));
 
-		this.updateChatWidth();
+		this.updateChatCSS();
 		this.updateColors();
 		this.updateLineBorders();
 
@@ -296,7 +345,7 @@ export default class ChatHook extends Module {
 						'data-room-id': this.props.channelID,
 						'data-room': room,
 						'data-user-id': user.userID,
-						'data-user': user.userLogin,
+						'data-user': user.userLogin && user.userLogin.toLowerCase(),
 
 						//onClick: () => this.setState({renderDebug: ((this.state.renderDebug||0) + 1) % 3})
 					}, [
@@ -379,7 +428,7 @@ export default class ChatHook extends Module {
 					const original = this._wrapped;
 					if ( original ) {
 						// Check that the message is relevant to this channel.
-						if ( original.channel && original.channel.slice(1) !== this.channelLogin )
+						if ( original.channel && this.channelLogin && original.channel.slice(1) !== this.channelLogin.toLowerCase() )
 							return;
 
 						const c = e.channel = original.channel;
@@ -433,9 +482,9 @@ export default class ChatHook extends Module {
 			return;
 
 		container.dataset.roomId = inst.props.channelID;
-		container.dataset.room = inst.props.channelLogin;
+		container.dataset.room = inst.props.channelLogin && inst.props.channelLogin.toLowerCase();
 		container.dataset.userId = tc.user.userID;
-		container.dataset.user = tc.user.userLogin;
+		container.dataset.user = tc.user.userLogin && tc.user.userLogin.toLowerCase();
 
 		if ( tc.user.color ) {
 			const user_el = container.querySelector('.chat-author__display-name');
@@ -472,7 +521,7 @@ export default class ChatHook extends Module {
 		if ( ! props.channelID )
 			return null;
 
-		const room = thing._ffz_room = this.chat.getRoom(props.channelID, props.channelLogin, false, true);
+		const room = thing._ffz_room = this.chat.getRoom(props.channelID, props.channelLogin && props.channelLogin.toLowerCase(), false, true);
 		room.ref(thing);
 		return room;
 	}
@@ -521,7 +570,7 @@ export default class ChatHook extends Module {
 
 		this.chat.context.updateContext({
 			moderator: props.isCurrentUserModerator,
-			channel: props.channelLogin,
+			channel: props.channelLogin && props.channelLogin.toLowerCase(),
 			channelID: props.channelID,
 			ui: {
 				theme: props.theme