4.4.0

The Profile Update! Now, it's possible to create custom settings profiles. The important thing about profiles is that you can have different profiles run according to different rules. Want some settings to only apply on your dashboard? Use a Current Page rule set to Dashboard. Want your chat wider in theater mode? Create a profile for Theater Mode.

* Added: Profile Editor.
* Added: Ability to import and export specific profiles.
* Added: Ability to update profiles from JSON files for more advanced users.
* Fixed: Update `sortablejs` dependency to fix issue with sorting behavior.
* Fixed: Several issues in the settings profile system which never came up because custom profiles weren't available.
* Fixed: Hotkeys freezing chat when they shouldn't, up until the first time the mouse hovers over chat.
* API Added: `deep_equals(object, other, ignore_undefined = false)` method of `FrankerFaceZ.utilities.object` for comparing two objects, deeply.
* API Changed: `<setting-check-box />` controls can now display their indeterminate state.
* API Fixed: `deep_copy()` eating Promises and Functions.

src/settings/filters.js

@@ -0,0 +1,144 @@
+'use strict';
+
+// ============================================================================
+// Profile Filters for Settings
+// ============================================================================
+
+import {createTester} from 'utilities/filtering';
+
+// Logical Components
+
+export const Invert = {
+	createTest(config, rule_types) {
+		return createTester(config, rule_types, true)
+	},
+
+	maxRules: 1,
+	childRules: true,
+
+	tall: true,
+	title: 'Invert',
+	i18n: 'settings.filter.invert',
+
+	default: () => [],
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/nested.vue')
+};
+
+export const Or = {
+	createTest(config, rule_types) {
+		return createTester(config, rule_types, false, true);
+	},
+
+	childRules: true,
+
+	tall: true,
+	title: 'Or',
+	i18n: 'settings.filter.or',
+
+	default: () => [],
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/nested.vue')
+};
+
+
+// Context Stuff
+
+export const TheaterMode = {
+	createTest(config) {
+		return ctx => ctx.ui && ctx.ui.theatreModeEnabled === config;
+	},
+
+	title: 'Theater Mode',
+	i18n: 'settings.filter.theater',
+
+	default: true,
+
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/basic-toggle.vue')
+};
+
+export const Moderator = {
+	createTest(config) {
+		return ctx => ctx.moderator === config;
+	},
+
+	title: 'Is Moderator',
+	i18n: 'settings.filter.moderator',
+
+	default: true,
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/basic-toggle.vue')
+};
+
+export const SquadMode = {
+	createTest(config) {
+		return ctx => ctx.ui && ctx.ui.squadModeEnabled === config;
+	},
+
+	title: 'Squad Mode',
+	i18n: 'settings.filter.squad',
+
+	default: true,
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/basic-toggle.vue')
+};
+
+export const NativeDarkTheme = {
+	createTest(config) {
+		const val = config ? 1 : 0;
+		return ctx => ctx.ui && ctx.ui.theme === val;
+	},
+
+	title: 'Dark Theme',
+	i18n: 'settings.filter.native-dark',
+
+	default: true,
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/basic-toggle.vue')
+};
+
+export const Page = {
+	createTest(config = {}) {
+		const name = config.route,
+			parts = [];
+
+		if ( Object.keys(config.values).length ) {
+			const ffz = FrankerFaceZ.get(),
+				router = ffz && ffz.resolve('site.router');
+
+			if ( router ) {
+				const route = router.getRoute(name);
+				if ( ! route || ! route.parts )
+					return () => false;
+
+				let i = 1;
+				for(const part of route.parts) {
+					if ( typeof part === 'object' ) {
+						if ( config.values[part.name] != null )
+							parts.push([i, config.values[part.name]]);
+
+						i++;
+					}
+				}
+
+			} else
+				return () => false;
+		}
+
+		return ctx => {
+			if ( ! ctx.route || ! ctx.route_data || ctx.route.name !== name )
+				return false;
+
+			for(const [index, value] of parts)
+				if ( ctx.route_data[index] !== value )
+					return false;
+
+			return true;
+		}
+	},
+
+	tall: true,
+	title: 'Current Page',
+	i18n: 'settings.filter.page',
+
+	default: () => ({
+		route: 'front-page',
+		values: {}
+	}),
+	editor: () => import(/* webpackChunkName: 'main-menu' */ './components/page.vue')
+};