4.20.61

This was a small update until Twitch ripped out half their CSS.

* Added: Cross-Origin Storage Bridge for settings, better synchronizing settings on sub-domains with support for binary blobs at the cost of slightly increased start-up time.
* Fixed: Rendering issues caused by missing CSS.
* Fixed: FFZ Control Center button not appearing on dashboard pages, and appearing in the incorrect place.
* Changed: Work towards splitting modules into their own JS files for a faster, more asynchronous startup.
* API Added: Methods for serializing and deserializing Blobs for transmission across postMessage.

src/bridge.js

@@ -6,6 +6,7 @@ import Logger from 'utilities/logging';
 import Module from 'utilities/module';
 
 import {DEBUG} from 'utilities/constants';
+import {serializeBlob, deserializeBlob} from 'utilities/blobs';
 
 import SettingsManager from './settings/index';
 
@@ -28,6 +29,7 @@ class FFZBridge extends Module {
 		this.inject('raven', RavenLogger);
 
 		this.log = new Logger(null, null, null, this.raven);
+		this.log.label = 'FFZBridge';
 		this.log.init = true;
 
 		this.core_log = this.log.get('core');
@@ -60,15 +62,21 @@ class FFZBridge extends Module {
 		return FFZBridge.instance;
 	}
 
-	onEnable() {
+	async onEnable() {
 		window.addEventListener('message', this.onMessage.bind(this));
 		this.settings.provider.on('changed', this.onProviderChange, this);
+		this.settings.provider.on('changed-blob', this.onProviderBlobChange, this);
+		this.settings.provider.on('clear-blobs', this.onProviderClearBlobs, this);
+
+		await this.settings.awaitProvider();
+		await this.settings.provider.awaitReady();
+
 		this.send({
 			ffz_type: 'ready'
 		});
 	}
 
-	onMessage(event) {
+	async onMessage(event) {
 		const msg = event.data;
 		if ( ! msg || ! msg.ffz_type )
 			return;
@@ -83,13 +91,86 @@ class FFZBridge extends Module {
 				data: out
 			});
 
-		} else if ( msg.ffz_type === 'change' )
+			return;
+
+		} else if ( msg.ffz_type === 'change' ) {
 			this.onChange(msg);
+			return;
+		}
+
+		if ( ! msg.id )
+			return this.log.warn('Received command with no reply ID');
+
+		let reply, transfer;
+
+		try {
+			if ( msg.ffz_type === 'init-load' ) {
+				reply = {
+					blobs: this.settings.provider.supportsBlobs,
+					values: {}
+				};
+
+				for(const [key,value] of this.settings.provider.entries())
+					reply.values[key] = value;
+
+			} else if ( msg.ffz_type === 'set' )
+				this.settings.provider.set(msg.key, msg.value);
+
+			else if ( msg.ffz_type === 'delete' )
+				this.settings.provider.delete(msg.key);
+
+			else if ( msg.ffz_type === 'clear' )
+				this.settings.provider.clear();
+
+			else if ( msg.ffz_type === 'get-blob' ) {
+				reply = await serializeBlob(await this.settings.provider.getBlob(msg.key));
+				if ( reply )
+					transfer = reply.buffer;
+
+			} else if ( msg.ffz_type === 'set-blob' ) {
+				const blob = deserializeBlob(msg.value);
+				await this.settings.provider.setBlob(msg.key, blob);
+
+			} else if ( msg.ffz_type === 'delete-blob' )
+				await this.settings.provider.deleteBlob(msg.key);
+
+			else if ( msg.ffz_type === 'has-blob' )
+				reply = await this.settings.provider.hasBlob(msg.key);
+
+			else if ( msg.ffz_type === 'clear-blobs' )
+				await this.settings.provider.clearBlobs();
+
+			else if ( msg.ffz_type === 'blob-keys' )
+				reply = await this.settings.provider.blobKeys();
+
+			else if ( msg.ffz_type === 'flush' )
+				await this.settings.provider.flush();
+
+			else
+				return this.send({
+					ffz_type: 'reply-error',
+					id: msg.id,
+					error: 'bad-command'
+				});
+
+			this.send({
+				ffz_type: 'reply',
+				id: msg.id,
+				reply
+			}, transfer);
+
+		} catch(err) {
+			this.log.error('Error handling command.', err);
+			this.send({
+				ffz_type: 'reply-error',
+				id: msg.id
+			});
+		}
 	}
 
-	send(msg) { // eslint-disable-line class-methods-use-this
+	send(msg, blob) { // eslint-disable-line class-methods-use-this
 		try {
-			window.parent.postMessage(msg, '*')
+			window.parent.postMessage(msg, '*', blob ? [blob] : undefined)
 		} catch(err) { this.log.error('send error', err); /* no-op */ }
 	}
 
@@ -112,6 +193,20 @@ class FFZBridge extends Module {
 			deleted
 		});
 	}
+
+	onProviderBlobChange(key, deleted) {
+		this.send({
+			ffz_type: 'change-blob',
+			key,
+			deleted
+		});
+	}
+
+	onProviderClearBlobs() {
+		this.send({
+			ffz_type: 'clear-blobs'
+		});
+	}
 }
 
 FFZBridge.Logger = Logger;