4.20.36

* Fixed: Bug with badge tool-tips in some situations when FFZ has only partially loaded when a chat line is displayed.
* Fixed: Certain page elements not having their fonts overwritten by the Theme font.
* Fixed: Certain page elements, including tool-tips, being incorrectly styled by the Theme Accent color. Fixes tool-tip readability when only an Accent color is set without a background color.
* Changed: Properly support channel-specific experiments with the Twitch Experiments UI, detecting the correct assignments for the current channel and displaying a more useful type.
* Changed: When logging experiments, properly handle channel-specific experiments. Sort experiments by rarity. Do not log experiments at 100% roll-out.

package.json

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

src/experiments.js

@@ -25,6 +25,21 @@ const OVERRIDE_COOKIE = 'experiment_overrides',
 import EXPERIMENTS from './experiments.json'; // eslint-disable-line no-unused-vars
 
 
+function sortExperimentLog(a,b) {
+	if ( a.rarity < b.rarity )
+		return -1;
+	else if ( a.rarity > b.rarity )
+		return 1;
+
+	if ( a.name < b.name )
+		return -1;
+	else if ( a.name > b.name )
+		return 1;
+
+	return 0;
+}
+
+
 // ============================================================================
 // Experiment Manager
 // ============================================================================
@@ -70,6 +85,7 @@ export default class ExperimentManager extends Module {
 
 			usingTwitchExperiment: key => this.usingTwitchExperiment(key),
 			getTwitchAssignment: key => this.getTwitchAssignment(key),
+			getTwitchType: type => this.getTwitchType(type),
 			hasTwitchOverride: key => this.hasTwitchOverride(key),
 			setTwitchOverride: (key, val) => this.setTwitchOverride(key, val),
 			deleteTwitchOverride: key => this.deleteTwitchOverride(key),
@@ -170,21 +186,105 @@ export default class ExperimentManager extends Module {
 			''
 		];
 
+		const ffz_assignments = [];
 		for(const [key, value] of Object.entries(this.experiments)) {
-			out.push(`FFZ | ${value.name}: ${this.getAssignment(key)}${this.hasOverride(key) ? ' (Overriden)' : ''}`);
+			const assignment = this.getAssignment(key),
+				override = this.hasOverride(key);
+
+			let weight = 0, total = 0;
+			for(const group of value.groups) {
+				if ( group.value === assignment )
+					weight = group.weight;
+				total += group.weight;
+			}
+
+			if ( ! override && weight === total )
+				continue;
+
+			ffz_assignments.push({
+				key,
+				name: value.name,
+				value: assignment,
+				override,
+				rarity: weight / total
+			});
+
+			//out.push(`FFZ | ${value.name}: ${this.getAssignment(key)}${this.hasOverride(key) ? ' (Overriden)' : ''}`);
 		}
 
+		ffz_assignments.sort(sortExperimentLog);
+
+		for(const entry of ffz_assignments)
+			out.push(`FFZ | ${entry.name}: ${entry.value}${entry.override ? ' (Override)' : ''} (r:${entry.rarity})`);
+
+		const twitch_assignments = [],
+			channel = this.settings.get('context.channel');
+
 		for(const [key, value] of Object.entries(this.getTwitchExperiments())) {
-			if ( this.usingTwitchExperiment(key) )
+			if ( ! this.usingTwitchExperiment(key) )
-				out.push(`TWITCH | ${value.name}: ${this.getTwitchAssignment(key)}${this.hasTwitchOverride(key) ? ' (Overriden)' : ''}`)
+				continue;
+
+			const assignment = this.getTwitchAssignment(key),
+				override = this.hasTwitchOverride(key);
+
+			let weight = 0, total = 0;
+			for(const group of value.groups) {
+				if ( group.value === assignment )
+					weight = group.weight;
+				total += group.weight;
+			}
+
+			if ( ! override && weight === total )
+				continue;
+
+			twitch_assignments.push({
+				key,
+				name: value.name,
+				value: assignment,
+				override,
+				type: this.getTwitchTypeByKey(key),
+				rarity: weight / total
+			});
+
+			//out.push(`TWITCH | ${value.name}: ${this.getTwitchAssignment(key)}${this.hasTwitchOverride(key) ? ' (Overriden)' : ''}`)
 		}
 
+		twitch_assignments.sort(sortExperimentLog);
+
+		for(const entry of twitch_assignments)
+			out.push(`Twitch | ${entry.name}: ${entry.value}${entry.override ? ' (Override)' : ''} (r:${entry.rarity}, t:${entry.type}${entry.type === 'channel_id' ? `, c:${channel}`: ''})`);
+
 		return out.join('\n');
 	}
 
 
 	// Twitch Experiments
 
+	getTwitchType(type) {
+		const core = this.resolve('site')?.getCore();
+		if ( core?.experiments?.getExperimentType )
+			return core.experiments.getExperimentType(type);
+
+		if ( type === 1 )
+			return 'device_id';
+		else if ( type === 2 )
+			return 'user_id';
+		else if ( type === 3 )
+			return 'channel_id';
+		return type;
+	}
+
+	getTwitchTypeByKey(key) {
+		const core = this.resolve('site')?.getCore(),
+			exps = core && core.experiments,
+			exp = exps?.experiments?.[key];
+
+		if ( exp?.t )
+			return this.getTwitchType(exp.t);
+
+		return null;
+	}
+
 	getTwitchExperiments() {
 		if ( window.__twilightSettings )
 			return window.__twilightSettings.experiments;
@@ -233,7 +333,7 @@ export default class ExperimentManager extends Module {
 		return overrides && has(overrides, key);
 	}
 
-	getTwitchAssignment(key) {
+	getTwitchAssignment(key, channel = null) {
 		const core = this.resolve('site')?.getCore(),
 			exps = core && core.experiments;
 
@@ -247,6 +347,9 @@ export default class ExperimentManager extends Module {
 				this.log.warn('Error attempting to initialize Twitch experiments tracker.', err);
 			}
 
+		if ( channel || this.getTwitchType(exps.experiments[key]?.t) === 'channel_id' )
+			return exps.getAssignmentById(key, {channel: channel ?? this.settings.get('context.channel')});
+
 		if ( exps.overrides && exps.overrides[key] )
 			return exps.overrides[key];
 
@@ -270,8 +373,8 @@ export default class ExperimentManager extends Module {
 			}
 	}
 
-	getTwitchAssignmentByName(name) {
+	getTwitchAssignmentByName(name, channel = null) {
-		return this.getTwitchAssignment(this.getTwitchKeyFromName(name));
+		return this.getTwitchAssignment(this.getTwitchKeyFromName(name), channel);
 	}
 
 	_rebuildTwitchKey(key, is_set, new_val) {

src/modules/chat/badges.jsx

@@ -364,8 +364,8 @@ export default class Badges extends Module {
 			if ( ! container.dataset.roomId )
 				container = target.closest('[data-room-id]');
 
-			const room_id = container.dataset.roomId,
+			const room_id = container?.dataset?.roomId,
-				room_login = container.dataset.room,
+				room_login = container?.dataset?.room,
 				data = JSON.parse(target.dataset.badgeData),
 				out = [];
 
@@ -456,8 +456,8 @@ export default class Badges extends Module {
 		if ( ! container.dataset.roomId )
 			container = target.closest('[data-room-id]');
 
-		const room_id = container.dataset.roomId,
+		const room_id = container?.dataset?.roomId,
-			room_login = container.dataset.room,
+			room_login = container?.dataset?.room,
 			data = JSON.parse(target.dataset.badgeData);
 
 		if ( data == null )

src/modules/main_menu/components/experiments.vue

@@ -285,7 +285,7 @@ export default {
 				this.$set(exp, 'default', ! this.item.hasTwitchOverride(key));
 
 				exp.in_use = this.item.usingTwitchExperiment(key);
-				exp.remainder = `v: ${exp.v}, t: ${exp.t}`;
+				exp.remainder = `v: ${exp.v}, type: ${this.item.getTwitchType(exp.t)}`;
 				exp.total = exp.groups.reduce((a,b) => a + b.weight, 0);
 				this.calculateRarity(exp);
 			}

src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss

@@ -14,4 +14,4 @@ textarea[data-a-target="chat-input"],
 textarea[data-a-target="video-chat-input"] {
 	font-family: var(--ffz-chat-font-family) !important;
 	font-size: var(--ffz-chat-font-size) !important;
-}
+}

src/sites/twitch-twilight/modules/css_tweaks/styles/global-font.scss

@@ -1,3 +1,6 @@
 html body {
 	font-family: var(--ffz-global-font) !important;
+
+	--font-base: var(--ffz-global-font) !important;
+	--font-display: var(--ffz-global-font) !important;
 }

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

@@ -23,8 +23,8 @@ const COLORS = [
 const ACCENT_COLORS = {
 	//dark: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'/*,'text-tooltip':1*/},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
 	//light: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
-	dark: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2','text-tooltip':1},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
+	dark: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}},
-	light: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
+	light: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}},
 	accent_dark: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}},
 	accent_light: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}}
 };