4.7.0

* Added: Option to set a default custom color for highlighted messages, overriding the default red color.
* Added: Recent Messages for Chat Input. Press up and down to recall previously sent messages.
* Added: Option to prioritize favorited emotes and emoji in tab-completion.
* Fixed: Extensions not being hidden correctly.
* Fixed: Change tab-completion sorting to act more similarly to vanilla Twitch.
* Fixed: Color inputs in settings updating too frequently, causing performance issues.
* Fixed: Chat-related code breaking on popped out viewer cards and spamming the automated error reporting service with errors.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "frankerfacez",
   "author": "Dan Salvato LLC",
-  "version": "4.6.2",
+  "version": "4.7.0",
   "description": "FrankerFaceZ is a Twitch enhancement suite.",
   "license": "Apache-2.0",
   "scripts": {

src/modules/chat/index.js

@@ -592,6 +592,16 @@ export default class Chat extends Module {
 			}
 		});
 
+		this.settings.add('chat.filtering.mention-color', {
+			default: '',
+			ui: {
+				path: 'Chat > Filtering >> Appearance',
+				title: 'Custom Highlight Color',
+				component: 'setting-color-box',
+				description: 'If this is set, highlighted messages with no default color set will use this color rather than red.'
+			}
+		});
+
 		this.settings.add('chat.filtering.highlight-mentions', {
 			default: false,
 			ui: {

src/modules/main_menu/components/setting-color-box.vue

@@ -45,6 +45,8 @@
 </template>
 
 <script>
+import {debounce} from 'utilities/object';
+
 import SettingMixin from '../setting-mixin';
 
 export default {
@@ -60,6 +62,12 @@ export default {
 		}
 	},
 
+	created() {
+		// Don't do this too often. It can happen if
+		// people are dragging sliders in the pop-up.
+		this.onInput = debounce(this.onInput, 100);
+	},
+
 	methods: {
 		onInput(value) {
 			this.set(value || '');

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

@@ -406,6 +406,7 @@ export default class ChatHook extends Module {
 		ic.contrast = contrast;
 
 		this.updateChatLines();
+		this.updateMentionCSS();
 		this.emit(':update-colors');
 	}
 
@@ -452,8 +453,20 @@ export default class ChatHook extends Module {
 	updateMentionCSS() {
 		const enabled = this.chat.context.get('chat.filtering.highlight-mentions');
 		this.css_tweaks.toggle('chat-mention-token', this.chat.context.get('chat.filtering.highlight-tokens'));
-		this.css_tweaks.toggle('chat-mention-bg', enabled);
+
-		this.css_tweaks.toggle('chat-mention-bg-alt', enabled && this.chat.context.get('chat.lines.alternate'));
+		const raw_color = this.chat.context.get('chat.filtering.mention-color');
+		if ( raw_color ) {
+			this.css_tweaks.toggle('chat-mention-bg', false);
+			this.css_tweaks.toggle('chat-mention-bg-alt', false);
+
+			this.css_tweaks.toggle('chat-mention-bg-custom', true);
+			this.css_tweaks.setVariable('chat-mention-color', this.inverse_colors.process(raw_color));
+
+		} else {
+			this.css_tweaks.toggle('chat-mention-bg-custom', false);
+			this.css_tweaks.toggle('chat-mention-bg', enabled);
+			this.css_tweaks.toggle('chat-mention-bg-alt', enabled && this.chat.context.get('chat.lines.alternate'));
+		}
 	}
 
 
@@ -501,6 +514,7 @@ export default class ChatHook extends Module {
 		this.chat.context.on('changed:chat.lines.borders', this.updateLineBorders, this);
 		this.chat.context.on('changed:chat.filtering.highlight-mentions', this.updateMentionCSS, this);
 		this.chat.context.on('changed:chat.filtering.highlight-tokens', this.updateMentionCSS, this);
+		this.chat.context.on('changed:chat.filtering.mention-color', this.updateMentionCSS, this);
 		this.chat.context.on('changed:chat.fix-bad-emotes', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.filtering.display-deleted', this.updateChatLines, this);
 		this.chat.context.on('changed:chat.filtering.display-mod-action', this.updateChatLines, this);

src/sites/twitch-twilight/modules/chat/input.jsx

@@ -24,6 +24,15 @@ export default class Input extends Module {
 
 		// Settings
 
+		this.settings.add('chat.mru.enabled', {
+			default: true,
+			ui: {
+				path: 'Chat > Input >> Recent Messages',
+				title: 'Allow pressing up and down to recall previously sent chat messages.',
+				component: 'setting-check-box'
+			}
+		});
+
 		this.settings.add('chat.tab-complete.ffz-emotes', {
 			default: true,
 			ui: {
@@ -93,10 +102,6 @@ export default class Input extends Module {
 			Twilight.CHAT_ROUTES
 		);
 
-		this.messageHistory = [];
-		this.messageHistoryPos = 0;
-		this.tempInput = '';
-
 		// Implement Twitch's unfinished emote usage object for prioritizing sorting
 		this.EmoteUsageCount = {
 			TriHard: 196568036,
@@ -215,65 +220,81 @@ export default class Input extends Module {
 		child._ffz_channel_id = inst.props.channelID;
 		child._ffz_channel_login = inst.props.channelLogin;
 	}
-    
 
 	overrideChatInput(inst) {
 		if ( inst._ffz_override )
 			return;
-            
+
 		const t = this;
 
 		const originalOnKeyDown = inst.onKeyDown,
 			originalOnMessageSend = inst.onMessageSend;
 
+		inst.messageHistory = [];
+		inst.tempInput = '';
+		inst.messageHistoryPos = -1;
+
 		inst.onKeyDown = function(event) {
-			const code = event.charCode || event.keyCode;
+			try {
-            
+				if ( inst.autocompleteInputRef && t.chat.context.get('chat.mru.enabled') && ! event.shiftKey && ! event.ctrlKey && ! event.altKey ) {
-			if (code === 38) { // Arrow up
+					const code = event.charCode || event.keyCode;
-				if (inst.chatInputRef.selectionStart === 0) {
+
-					if (!t.messageHistory.length) {
+					// Arrow Up
+					if ( code === 38 && inst.chatInputRef.selectionStart === 0 ) {
+						if ( ! inst.messageHistory.length )
+							return;
+
+						if ( inst.chatInputRef.value && inst.messageHistoryPos === -1 )
+							inst.tempInput = inst.chatInputRef.value;
+
+						if ( inst.messageHistoryPos < inst.messageHistory.length - 1 ) {
+							inst.messageHistoryPos++;
+							inst.autocompleteInputRef.setValue(inst.messageHistory[inst.messageHistoryPos]);
+						}
+
+						return;
+
+					// Arrow Down
+					} else if ( code === 40 && inst.chatInputRef.selectionStart == inst.chatInputRef.value.length ) {
+						if ( ! inst.messageHistory.length )
+							return;
+
+						if ( inst.messageHistoryPos > 0 ) {
+							inst.messageHistoryPos--;
+							inst.autocompleteInputRef.setValue(inst.messageHistory[inst.messageHistoryPos]);
+
+						} else if ( inst.messageHistoryPos === 0 ) {
+							inst.autocompleteInputRef.setValue(inst.tempInput);
+							inst.messageHistoryPos = -1;
+						}
+
 						return;
 					}
-
-					if (inst.chatInputRef.value && t.messageHistoryPos === -1) {
-						t.tempInput = inst.chatInputRef.value;
-					}
-					
-					if (t.messageHistoryPos < t.messageHistory.length - 1) {
-						t.messageHistoryPos++;
-					}
-					
-					inst.chatInputRef.value = t.messageHistory[t.messageHistoryPos];
 				}
-			}
-			else if (code === 40) { // Arrow down
-				if (inst.chatInputRef.selectionStart == inst.chatInputRef.value.length) {
-					if (!t.messageHistory.length) {
-						return;
-					}
 
-					if (t.messageHistoryPos > 0) {
+			} catch(err) {
-						t.messageHistoryPos--;
+				t.log.capture(err);
-						inst.chatInputRef.value = t.messageHistory[t.messageHistoryPos];
+				t.log.error(err);
-					}
-					else if (t.messageHistoryPos === 0) {
-						inst.chatInputRef.value = t.tempInput;
-						t.messageHistoryPos = -1;
-					}
-				}
-			}
-			else {
-				originalOnKeyDown.call(this, event);
 			}
+
+			originalOnKeyDown.call(this, event);
 		}
 
 		inst.onMessageSend = function(event) {
-			if (!t.messageHistory.length || t.messageHistory[0] !== inst.chatInputRef.value) {
+			try {
-				t.messageHistory.unshift(inst.chatInputRef.value);
+				if ( t.chat.context.get('chat.mru.enabled') ) {
-				t.messageHistory = t.messageHistory.slice(0, 20);
+					if (! inst.messageHistory.length || inst.messageHistory[0] !== inst.chatInputRef.value) {
+						inst.messageHistory.unshift(inst.chatInputRef.value);
+						inst.messageHistory = inst.messageHistory.slice(0, 20);
+					}
+					inst.messageHistoryPos = -1;
+					inst.tempInput = '';
+				}
+
+			} catch(err) {
+				t.log.capture(err);
+				t.log.error(err);
 			}
-			t.messageHistoryPos = -1;
-			t.tempInput = '';
 
 			originalOnMessageSend.call(this, event);
 		}

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

@@ -29,7 +29,7 @@ export default class Scroller extends Module {
 
 		this.ChatScroller = this.fine.define(
 			'chat-scroller',
-			n => n.saveScrollRef && n.handleScrollEvent,
+			n => n.saveScrollRef && n.handleScrollEvent && ! n.renderLines,
 			Twilight.CHAT_ROUTES
 		);
 

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

@@ -20,8 +20,8 @@ const CLASSES = {
 
 	'prime-offers': '.top-nav__prime',
 
-	'player-ext': '.player .extension-taskbar,.player .extension-container',
+	'player-ext': '.player .extension-taskbar,.player .extension-container,.player .extensions-dock__layout,.player .extensions-notifications',
-	'player-ext-hover': '.player:not([data-controls="true"]) .extension-container',
+	'player-ext-hover': '.player:not([data-controls="true"]) .extension-container,.player:not([data-controls="true"]) .extensions-dock__layout,.player:not([data-controls="true"]) .extensions-notifications',
 
 	'player-event-bar': '.channel-root .live-event-banner-ui__header',
 	'player-rerun-bar': '.channel-root__player_container div.tw-c-text-overlay:not([data-a-target="hosting-ui-header"])',

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-mention-bg-custom.scss

@@ -0,0 +1,7 @@
+.vod-message,
+.chat-line__message:not(.chat-line--inline),
+.user-notice-line {
+	&.ffz-mentioned:not(.ffz-custom-color) {
+		background-color: var(--ffz-chat-mention-color) !important;
+	}
+}