4.20.72

* Added: Setting to change the height of chat actions.
* Added: Profiles can now be toggled via hotkey.
* Added: Profiles can now be imported from URL as well as File.
* Added: Profiles with update URLs can have automatic updates disabled.
* Fixed: Support for the `clips.twitch.tv` domain.
* Fixed: Badges that make use of foreground text are no longer white in light themes.
* Fixed: Mod Icons appearing smaller than normal.
* Changed: Allow several types of actions, unrelated to moderation, to be used on a person's own chat messages.
* Changed: Better warn users in the Control Center when the current profile is set to automatically update.
* Changed: Make the FFZ Control Center remember which profile is selected when re-opening / refreshing.
* API Added: Add-ons can now target specific supported flavors. Choices thus far are `main` and `clips`.
* API Added: The `site.menu_button` now has `addToast(...)` and can display multiple toasts. Toasts can also time out.
* API Fixed: `openFile(...)` never resolving if the user closes the dialog without selecting a file.

src/utilities/css-tweaks.js

@@ -0,0 +1,88 @@
+'use strict';
+
+// ============================================================================
+// CSS Tweaks
+// Tweak some CSS
+// ============================================================================
+
+import Module from 'utilities/module';
+import {ManagedStyle} from 'utilities/dom';
+import {has, once} from 'utilities/object';
+
+export default class CSSTweaks extends Module {
+	constructor(...args) {
+		super(...args);
+
+		this.rules = {};
+
+		this.loader = null;
+		this.chunks = {};
+		this.chunks_loaded = false;
+
+		this.populate = once(this.populate);
+	}
+
+	get style() {
+		if ( ! this._style )
+			this._style = new ManagedStyle;
+
+		return this._style;
+	}
+
+	toggleHide(key, val) {
+		const k = `hide--${key}`;
+		if ( ! val ) {
+			if ( this._style )
+				this._style.delete(k);
+			return;
+		}
+
+		if ( ! has(this.rules, key) )
+			throw new Error(`unknown rule "${key}" for toggleHide`);
+
+		this.style.set(k, `${this.rules[key]}{display:none !important}`);
+	}
+
+	async toggle(key, val) {
+		if ( ! val ) {
+			if ( this._style )
+				this._style.delete(key);
+			return;
+		}
+
+		if ( ! this.chunks_loaded )
+			await this.populate();
+
+		if ( ! has(this.chunks, key) )
+			throw new Error(`unknown chunk "${key}" for toggle`);
+
+		this.style.set(key, this.chunks[key]);
+	}
+
+	set(key, val) { return this.style.set(key, val); }
+	delete(key) { this._style && this._style.delete(key) }
+
+	setVariable(key, val, scope = 'body') {
+		this.style.set(`var--${key}`, `${scope}{--ffz-${key}:${val};}`);
+	}
+
+	deleteVariable(key) {
+		if ( this._style )
+			this._style.delete(`var--${key}`);
+	}
+
+	async populate() {
+		if ( this.chunks_loaded || ! this.loader )
+			return;
+
+		const promises = [];
+		for(const key of this.loader.keys()) {
+			const k = key.slice(2, key.length - (key.endsWith('.scss') ? 5 : 4));
+			promises.push(this.loader(key).then(data => this.chunks[k] = data.default));
+		}
+
+		await Promise.all(promises);
+		this.chunks_loaded = true;
+	}
+
+}