Change the settings pop-out to use a chat pop-out. Tweaks to badge visibility rendering. Forcibly set tw-theme--dark on body since Twitch doesn't do it consistently with pop-outs.

changelog.html

@@ -1,3 +1,10 @@
+<div class="list-header">4.0.0-beta1.7<span>@177445c5a2dd0b0b9857</span> <time datetime="2018-03-24">(2018-03-24)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Reduce the size of badge previews in the badge visbility settings.</li>
+	<li>Changed: Use pop-out chat to host pop-out settings to reduce load times and avoid player ads.</li>
+	<li>Fixed: Tooltips and other things relying on <code>tw-theme--dark</code> to be set now work properly with pop-out chat.</li>
+</ul>
+
 <div class="list-header">4.0.0-beta1.7<span>@a50bda0e204137eb8f28</span> <time datetime="2018-03-22">(2018-03-22)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Chat Badge Visibility. Hide the badges you don't like.</li>

src/modules/chat/badges.js

@@ -184,16 +184,16 @@ export default class Badges extends Module {
 									provider: 'twitch',
 									name: v.title,
 									color: 'transparent',
-									image: v.image4x,
+									image: v.image2x,
 									versions: vs,
-									styleImage: `url("${v.image4x}")`
+									styleImage: `url("${v.image2x}")`
 								});
 						}
 
 					for(const key in this.badges)
 						if ( has(this.badges, key) ) {
 							const badge = this.badges[key],
-								image = badge.urls ? (badge.urls[4] || badge.urls[2] || badge.urls[1]) : badge.image;
+								image = badge.urls ? (badge.urls[2] || badge.urls[1]) : badge.image;
 
 							(/^addon/.test(key) ? addon : ffz).push({
 								id: key,
@@ -207,7 +207,7 @@ export default class Badges extends Module {
 
 					return [
 						{title: 'Twitch', badges: twitch},
-						{title: 'Twitch: Game', badges: game},
+						{title: 'Twitch: Game', key: 'game', badges: game},
 						{title: 'FrankerFaceZ', badges: ffz},
 						{title: 'Add-on', badges: addon}
 					];

src/modules/main_menu/components/badge-visibility.vue

@@ -45,8 +45,7 @@
 						<button
 							class="tw-mg-t-05 tw-button tw-button--hollow tw-tooltip-wrapper"
 							@click="reset(i.id)"
-							v-if="! badgeDefault(i.id)"
+						>
-							>
 							<span class="tw-button__text">Reset</span>
 							<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
 								{{ t('setting.reset', 'Reset to Default') }}

src/modules/main_menu/components/main-menu.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
+<div class="ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column" :class="{ maximized: maximized || exclusive, exclusive }">
 	<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
 		<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
 		<div class="tw-flex-grow-1 tw-pd-x-2">

src/modules/main_menu/index.js

@@ -8,6 +8,10 @@ import Module from 'utilities/module';
 import {createElement as e} from 'utilities/dom';
 import {has, deep_copy} from 'utilities/object';
 
+import {parse_path} from 'src/settings';
+
+const EXCLUSIVE_CONTAINER = '.twilight-main,.twilight-minimal-root>div';
+
 function format_term(term) {
 	return term.replace(/<[^>]*>/g, '').toLocaleLowerCase();
 }
@@ -91,7 +95,7 @@ export default class MainMenu extends Module {
 
 
 	async onEnable(event) {
-		await this.site.awaitElement('.twilight-root');
+		await this.site.awaitElement(EXCLUSIVE_CONTAINER);
 
 		this.on('site.menu_button:clicked', this.toggleVisible);
 		if ( this._visible ) {
@@ -115,7 +119,7 @@ export default class MainMenu extends Module {
 
 		const maximized = this._maximized,
 			visible = this._visible = !this._visible,
-			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height');
+			main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height');
 
 		if ( ! visible ) {
 			if ( maximized )
@@ -144,7 +148,7 @@ export default class MainMenu extends Module {
 			return;
 
 		const maximized = this._maximized = !this._maximized,
-			main = document.querySelector(maximized ? '.twilight-main' : '.twilight-root > .tw-full-height'),
+			main = this.exclusive ? document.querySelector(EXCLUSIVE_CONTAINER) : document.querySelector(maximized ? '.twilight-main' : '.twilight-root>.tw-full-height'),
 			old_main = this._menu.parentElement;
 
 		if ( maximized )
@@ -350,7 +354,7 @@ export default class MainMenu extends Module {
 		for(const token of needs_component) {
 			token.component = token.tabs ? 'tab-container' :
 				token.contents ? 'menu-container' :
-				'setting-check-box';
+					'setting-check-box';
 		}
 
 		for(const list of needs_sort)
@@ -381,7 +385,7 @@ export default class MainMenu extends Module {
 	}
 
 
-	getProfileProxy(profile, context) {
+	getProfileProxy(profile, context) { // eslint-disable-line class-methods-use-this
 		return {
 			id: profile.id,
 
@@ -421,99 +425,99 @@ export default class MainMenu extends Module {
 			context = settings.main_context,
 			[profiles, profile_keys] = this.getProfiles(),
 
-		_c = {
+			_c = {
-			profiles,
+				profiles,
-			profile_keys,
+				profile_keys,
-			currentProfile: profile_keys[0],
+				currentProfile: profile_keys[0],
 
-			createProfile: data => {
+				createProfile: data => {
-				const profile = settings.createProfile(data);
+					const profile = settings.createProfile(data);
-				return t.getProfileProxy(profile, context);
+					return t.getProfileProxy(profile, context);
-			},
-
-			deleteProfile: profile => settings.deleteProfile(profile),
-
-			context: {
-				_users: 0,
-
-				profiles: context.__profiles.map(profile => profile.id),
-				get: key => context.get(key),
-				uses: key => context.uses(key),
-
-				on: (...args) => context.on(...args),
-				off: (...args) => context.off(...args),
-
-				order: id => context.order.indexOf(id),
-				context: deep_copy(context.context),
-
-				_update_profiles(changed) {
-					const new_list = [],
-						profiles = context.manager.__profiles;
-					for(let i=0; i < profiles.length; i++) {
-						const profile = profile_keys[profiles[i].id];
-						profile.order = i;
-						new_list.push(profile);
-					}
-
-					Vue.set(_c, 'profiles', new_list);
-
-					if ( changed && changed.id === _c.currentProfile.id )
-						_c.currentProfile = profile_keys[changed.id];
 				},
 
-				_profile_created(profile) {
+				deleteProfile: profile => settings.deleteProfile(profile),
-					Vue.set(profile_keys, profile.id, t.getProfileProxy(profile, context));
-					this._update_profiles()
-				},
 
-				_profile_changed(profile) {
+				context: {
-					Vue.set(profile_keys, profile.id, t.getProfileProxy(profile, context));
+					_users: 0,
-					this._update_profiles(profile);
-				},
 
-				_profile_deleted(profile) {
+					profiles: context.__profiles.map(profile => profile.id),
-					Vue.delete(profile_keys, profile.id);
+					get: key => context.get(key),
-					this._update_profiles();
+					uses: key => context.uses(key),
 
-					if ( _c.currentProfile.id === profile.id )
+					on: (...args) => context.on(...args),
-						_c.currentProfile = profile_keys[0]
+					off: (...args) => context.off(...args),
-				},
 
-				_context_changed() {
+					order: id => context.order.indexOf(id),
-					this.context = deep_copy(context.context);
+					context: deep_copy(context.context),
-					const ids = this.profiles = context.__profiles.map(profile => profile.id);
-					for(const id in profiles) {
-						const profile = profiles[id];
-						profile.live = this.profiles.includes(profile.id);
-					}
-				},
 
-				_add_user() {
+					_update_profiles(changed) {
-					this._users++;
+						const new_list = [],
-					if ( this._users === 1 ) {
+							profiles = context.manager.__profiles;
-						settings.on(':profile-created', this._profile_created, this);
+						for(let i=0; i < profiles.length; i++) {
-						settings.on(':profile-changed', this._profile_changed, this);
+							const profile = profile_keys[profiles[i].id];
-						settings.on(':profile-deleted', this._profile_deleted, this);
+							profile.order = i;
-						settings.on(':profiles-reordered', this._update_profiles, this);
+							new_list.push(profile);
-						context.on('context_changed', this._context_changed, this);
+						}
-						context.on('profiles_changed', this._context_changed, this);
-						this.profiles = context.__profiles.map(profile => profile.id);
-					}
-				},
 
-				_remove_user() {
+						Vue.set(_c, 'profiles', new_list);
-					this._users--;
+
-					if ( this._users === 0 ) {
+						if ( changed && changed.id === _c.currentProfile.id )
-						settings.off(':profile-created', this._profile_created, this);
+							_c.currentProfile = profile_keys[changed.id];
-						settings.off(':profile-changed', this._profile_changed, this);
+					},
-						settings.off(':profile-deleted', this._profile_deleted, this);
+
-						settings.off(':profiles-reordered', this._update_profiles, this);
+					_profile_created(profile) {
-						context.off('context_changed', this._context_changed, this);
+						Vue.set(profile_keys, profile.id, t.getProfileProxy(profile, context));
-						context.off('profiles_changed', this._context_changed, this);
+						this._update_profiles()
+					},
+
+					_profile_changed(profile) {
+						Vue.set(profile_keys, profile.id, t.getProfileProxy(profile, context));
+						this._update_profiles(profile);
+					},
+
+					_profile_deleted(profile) {
+						Vue.delete(profile_keys, profile.id);
+						this._update_profiles();
+
+						if ( _c.currentProfile.id === profile.id )
+							_c.currentProfile = profile_keys[0]
+					},
+
+					_context_changed() {
+						this.context = deep_copy(context.context);
+						const ids = this.profiles = context.__profiles.map(profile => profile.id);
+						for(const id of ids) {
+							const profile = profiles[id];
+							profile.live = this.profiles.includes(profile.id);
+						}
+					},
+
+					_add_user() {
+						this._users++;
+						if ( this._users === 1 ) {
+							settings.on(':profile-created', this._profile_created, this);
+							settings.on(':profile-changed', this._profile_changed, this);
+							settings.on(':profile-deleted', this._profile_deleted, this);
+							settings.on(':profiles-reordered', this._update_profiles, this);
+							context.on('context_changed', this._context_changed, this);
+							context.on('profiles_changed', this._context_changed, this);
+							this.profiles = context.__profiles.map(profile => profile.id);
+						}
+					},
+
+					_remove_user() {
+						this._users--;
+						if ( this._users === 0 ) {
+							settings.off(':profile-created', this._profile_created, this);
+							settings.off(':profile-changed', this._profile_changed, this);
+							settings.off(':profile-deleted', this._profile_deleted, this);
+							settings.off(':profiles-reordered', this._update_profiles, this);
+							context.off('context_changed', this._context_changed, this);
+							context.off('profiles_changed', this._context_changed, this);
+						}
 					}
 				}
-			}
+			};
-		};
 
 		return _c;
 	}
@@ -549,6 +553,4 @@ export default class MainMenu extends Module {
 
 		this._menu = this._vue.$el;
 	}
-}
+}
-
-MainMenu.requires = ['site.menu_button'];

src/modules/metadata.js

@@ -5,7 +5,7 @@
 // ============================================================================
 
 import {createElement as e, ClickOutside} from 'utilities/dom';
-import {has, get, maybe_call} from 'utilities/object';
+import {maybe_call} from 'utilities/object';
 
 import {duration_to_string} from 'utilities/time';
 

src/modules/tooltips.js

@@ -37,9 +37,10 @@ export default class TooltipProvider extends Module {
 	}
 
 	onEnable() {
-		const container = document.body.querySelector('.twilight-root') || document.body;
+		const container = document.querySelector('.twilight-root,.twilight-minimal-root') || document.body,
+			is_minimal = container && container.classList.contains('twilight-minimal-root');
 
-		this.tips = new Tooltip('body #root', 'ffz-tooltip', {
+		this.tips = new Tooltip(is_minimal ? '.twilight-minimal-root' : 'body #root', 'ffz-tooltip', {
 			html: true,
 			delayHide: this.checkDelayHide.bind(this),
 			delayShow: this.checkDelayShow.bind(this),

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

@@ -60,9 +60,9 @@ export default class SettingsMenu extends Module {
 		const twMinimalRoot = document.querySelector('.twilight-minimal-root');
 		if (twMinimalRoot) {
 			const win = window.open(
-				'https://twitch.tv/frankerfacez?ffz-settings',
+				'https://twitch.tv/popout/frankerfacez/chat?ffz-settings',
 				'_blank',
-				'resizable=yes,scrollbars=yes,width=800,height=600'
+				'resizable=yes,scrollbars=yes,width=850,height=600'
 			);
 			win.focus();
 		} else {

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

@@ -39,7 +39,8 @@ export default class ThemeEngine extends Module {
 			requires: ['context.ui.theme'],
 			process(ctx) {
 				return ctx.get('context.ui.theme') === 1;
-			}
+			},
+			changed: val => document.body.classList.toggle('tw-theme--dark', val)
 		});
 
 		this.settings.add('theme.tooltips-dark', {
@@ -78,5 +79,6 @@ export default class ThemeEngine extends Module {
 
 	onEnable() {
 		this.updateSetting(this.settings.get('theme.dark'));
+		document.body.classList.toggle('tw-theme--dark', this.settings.get('theme.is-dark'));
 	}
 }

styles/widgets.scss

@@ -29,7 +29,7 @@
 	header {
 		a {
 			font-weight: bold;
-			color: inherit;
+			color: inherit !important;
 		}
 	}
 }

styles/widgets/badge-visibility.scss

@@ -3,6 +3,16 @@
 		label:before, label:after {
 			opacity: 0.5
 		}
+
+		input:focus + label {
+			&:before, &:after {
+				opacity: 1
+			}
+		}
+
+		button:not(:focus) {
+			visibility: hidden;
+		}
 	}
 
 	.tw-checkbox__input:checked+.tw-checkbox__label:after,
@@ -11,11 +21,11 @@
 	}
 
 	.ffz-badge.preview-image {
-		width: 7.2rem;
+		width: 3.6rem;
-		height: 7.2rem;
+		height: 3.6rem;
-		background-size: 7.2rem;
+		background-size: 3.6rem;
 		background-repeat: no-repeat;
 	}
 
-	width: 30rem;
+	width: 22rem;
 }