4.20.68

* Fixed: Subscribe and Follow buttons not using the theme accent color. (Twitch replaced the class name `.tw-accent-region` with the procedural name `.gocjHQ`)
* Fixed: Add `Search` to the list of known pages for Profile rules.
* Fixed: The FFZ Control Center not maximizing correctly on Team and Deck add-on pages.
* Fixed: Tool-tips becoming impossible to dismiss after updating their contents.
* API Added: `data-tooltip-type="markdown"` for `ffz-tooltip` elements.
* API Added: `ffz-tooltip` elements can now specify `data-tooltip-side` and `data-tooltip-align` attributes for guiding the position of tooltips.

package.json

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

src/modules/chat/badges.jsx

@@ -152,10 +152,14 @@ export function generateBadgeCSS(badge, version, data, style, is_dark, badge_ver
 		fore = fg_fixer.process(fore) || fore;
 	}
 
-	if ( ! base_image && style > 3 )
-		style = 1;
+	if ( ! base_image ) {
+		if ( style > 4 )
+			style = 1;
+		else if ( style > 3 )
+			style = 2;
+	}
 
-	return `${clickable && (data.click_url || data.click_action) ? 'cursor:pointer;' : ''}${invert ? 'filter:invert(100%);' : ''}${CSS_TEMPLATES[style]({
+	return `${clickable && (data.click_handler || data.click_url || data.click_action) ? 'cursor:pointer;' : ''}${invert ? 'filter:invert(100%);' : ''}${CSS_TEMPLATES[style]({
 		scale: 1,
 		color,
 		fore,

src/modules/tooltips.js

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {createElement, sanitize} from 'utilities/dom';
-import {has, maybe_call} from 'utilities/object';
+import {has, maybe_call, once} from 'utilities/object';
 
 import Tooltip from 'utilities/tooltip';
 import Module from 'utilities/module';
@@ -31,7 +31,7 @@ export default class TooltipProvider extends Module {
 					}
 				}, target.dataset.data)
 			]
-		}
+		};
 
 		this.types.child = target => {
 			const child = target.querySelector(':scope > .ffz-tooltip-child');
@@ -55,14 +55,62 @@ export default class TooltipProvider extends Module {
 					target.appendChild(child);
 				}
 			}
-		}
+		};
+
+		this.types.markdown = (target, tip) => {
+			tip.add_class = 'ffz-tooltip--markdown';
+
+			const md = this.getMarkdown();
+			if ( ! md )
+				return this.loadMarkdown().then(md => md.render(target.dataset.title));
+
+			return md.render(target.dataset.title);
+		};
 
 		this.types.text = target => sanitize(target.dataset.title);
 		this.types.html = target => target.dataset.title;
 
 		this.onFSChange = this.onFSChange.bind(this);
+
+		this.loadMarkdown = once(this.loadMarkdown);
+
 	}
 
+	getMarkdown(callback) {
+		if ( this._md )
+			return this._md;
+
+		if ( callback )
+			this.loadMarkdown().then(md => callback(md));
+	}
+
+	async loadMarkdown() { // eslint-disable-line class-methods-use-this
+		if ( this._md )
+			return this._md;
+
+		const [MD, MILA] = await Promise.all([
+			import(/* webpackChunkName: 'markdown' */ 'markdown-it'),
+			import(/* webpackChunkName: 'markdown' */ 'markdown-it-link-attributes')
+		]);
+
+		const md = this._md = new MD.default({
+			html: false,
+			linkify: true
+		});
+
+		md.use(MILA.default, {
+			attrs: {
+				class: 'ffz-tooltip',
+				target: '_blank',
+				rel: 'noopener',
+				'data-tooltip-type': 'link'
+			}
+		});
+
+		return md;
+	}
+
+
 	onEnable() {
 		const container = document.querySelector('.sunlight-root') || document.querySelector('#root>div') || document.querySelector('#root') || document.querySelector('.clips-root') || document.body;
 
@@ -77,7 +125,7 @@ export default class TooltipProvider extends Module {
 		this.on(':cleanup', this.cleanup);
 	}
 
-	_createInstance(container, klass = 'ffz-tooltip', default_type) {
+	_createInstance(container, klass = 'ffz-tooltip', default_type = 'text') {
 		return new Tooltip(container, klass, {
 			html: true,
 			i18n: this.i18n,
@@ -136,6 +184,9 @@ export default class TooltipProvider extends Module {
 		const type = target.dataset.tooltipType || default_type,
 			handler = this.types[type];
 
+		if ( target.dataset.tooltipSide )
+			pop_opts.placement = target.dataset.tooltipSide;
+
 		if ( handler && handler.popperConfig )
 			return handler.popperConfig(target, tip, pop_opts);
 
@@ -200,8 +251,12 @@ export default class TooltipProvider extends Module {
 
 	process(default_type, target, tip) {
 		const type = target.dataset.tooltipType || default_type || 'text',
+			align = target.dataset.tooltipAlign,
 			handler = this.types[type];
 
+		if ( align )
+			tip.align = align;
+
 		if ( ! handler )
 			return [
 				createElement('strong', null, 'Unhandled Tooltip Type'),

src/sites/twitch-twilight/index.js

@@ -326,6 +326,7 @@ Twilight.ROUTES = {
 	'product': '/products/:productName',
 	'prime': '/prime',
 	'turbo': '/turbo',
+	'search': '/search',
 	//'user': '/:userName',
 	'squad': '/:userName/squad',
 	'command-center': '/:userName/commandcenter',
@@ -335,5 +336,5 @@ Twilight.ROUTES = {
 
 
 Twilight.DIALOG_EXCLUSIVE = '.moderation-root,.sunlight-root,.twilight-main,.twilight-minimal-root>div,#root>div>.tw-full-height,.clips-root';
-Twilight.DIALOG_MAXIMIZED = '.moderation-view-page > div[data-highlight-selector="main-grid"],.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area';
+Twilight.DIALOG_MAXIMIZED = '.moderation-view-page > div[data-highlight-selector="main-grid"],.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area,.teams-page-body__outer-container .scrollable-area';
 Twilight.DIALOG_SELECTOR = '.moderation-root,.sunlight-root,#root>div,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area';

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

@@ -485,7 +485,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues
 		this.toggleNormalizer(chat_bits.length || bits.length);
 
 		if ( bits.length )
-			this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region{${accent_bits.join('\n')}}`);
+			this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`);
 		else
 			this.css_tweaks.delete('colors');
 	}

src/utilities/tooltip.js

@@ -269,8 +269,8 @@ export class Tooltip {
 		tip.hide = () => this.hide(tip);
 		tip.rerender = () => {
 			if ( tip.visible ) {
-				this.hide(tip);
-				this.show(tip);
+				tip.hide();
+				tip.show();
 			}
 		}
 
@@ -295,6 +295,9 @@ export class Tooltip {
 		if ( opts.arrowInner )
 			arrow.appendChild(createElement('div', opts.arrowInner));
 
+		if ( tip.align )
+			inner.classList.add(`${opts.innerClass}--align-${tip.align}`);
+
 		if ( tip.add_class ) {
 			inner.classList.add(tip.add_class);
 			tip.add_class = undefined;

styles/tooltips.scss

@@ -19,6 +19,19 @@ body {
 	display: none !important;
 }
 
+.ffz-tooltip--markdown {
+	white-space: normal;
+
+	p {
+		font-size: unset;
+		line-height: unset;
+	}
+
+	p + p {
+		margin-top: 0.5rem;
+	}
+}
+
 
 .ffz-balloon {
 	&[x-placement^="bottom"] > .ffz-balloon__tail {
@@ -95,7 +108,6 @@ body {
 
 	&.html { white-space: normal }
 
-
 	.ffz__tooltip--arrow {
 		position: absolute;
 		width: 6px; height: 6px;
@@ -141,6 +153,18 @@ body {
 	padding: .3rem .6rem;
 	text-align: center;
 
+	&--align-left {
+		text-align: left;
+	}
+
+	&--align-justify {
+		text-align: justify;
+	}
+
+	&--align-right {
+		text-align: right;
+	}
+
 	.preview-image {
 		&.ffz-badge {
 			height: 7.2rem;

styles/widgets/main-menu.scss

@@ -1,4 +1,6 @@
 .ffz-main-menu {
+	z-index: 100000;
+
 	.scrollable-area {
 		overflow-anchor: none;
 	}