From 9e845b171ebbd40c6e340a5b02732fd3b71202f5 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Tue, 26 Sep 2017 17:01:51 -0400
Subject: [PATCH] 3.5.527. Tooltips! Lots of changes to how link tooltips
 render. And some stuff about the dark theme I guess.

---
 changelog.html               |  49 ++----
 dark.css                     |   1 +
 old_changes.html             |  33 ++++
 socketserver/server/utils.go |   1 +
 src/colors.js                |  10 +-
 src/constants.js             |   2 +-
 src/ember/line.js            |  38 +++--
 src/ember/moderation-card.js |   3 +-
 src/ember/sidebar.js         |   2 +-
 src/main.js                  |   2 +-
 src/tokenize.js              | 303 +++++++++++++++++++++--------------
 src/ui/dark.js               |  43 +++--
 src/ui/tooltips.js           |   7 +-
 style.css                    | 221 +++++++++++++++++++++++++
 14 files changed, 534 insertions(+), 181 deletions(-)

diff --git a/changelog.html b/changelog.html
index 1ac80905..7bb71f10 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,19 @@
+<div class="list-header">3.5.527 <time datetime="2017-09-25">(2017-09-25)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: More tweaks to tooltip rendering to support backend improvements.</li>
+</ul>
+
+<div class="list-header">3.5.526 <time datetime="2017-09-22">(2017-09-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Minor tweaks to tooltip rendering to support improvements to the backend.</li>
+</ul>
+
+<div class="list-header">3.5.525 <time datetime="2017-09-20">(2017-09-20)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Twitch's native dark theme breaking the re-colored site header.</li>
+	<li>Fixed: Take control of Twitch's native dark theme when enabling or disabling FFZ's dark theme.</li>
+</ul>
+
 <div class="list-header">3.5.524 <time datetime="2017-09-15">(2017-09-15)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Tooltips for global emotes not saying where they're from.</li>
@@ -38,38 +54,5 @@
 	<li>Fixed: Bug with rich content attached to chat messages not getting removed when a message is timed out.</li>
 </ul>
 
-<div class="list-header">3.5.517 <time datetime="2017-09-02">(2017-09-02)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Changed: Dark theme CSS tweak for the directory.</li>
-</ul>
-
-<div class="list-header">3.5.516 <time datetime="2017-09-01">(2017-09-01)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Typo in video url regular expression.</li>
-</ul>
-
-<div class="list-header">3.5.515 <time datetime="2017-09-01">(2017-09-01)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Option to disable rich content in chat.</li>
-	<li>Changed: Add support for rich content in chat. This includes shared purchases, clip information, and video information.</li>
-	<li>API Added: <code>replaces</code> field to emoticons to allow extension emotes to replace Twitch emotes.</li>
-</ul>
-
-<div class="list-header">3.5.514 <time datetime="2017-09-01">(2017-09-01)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Schedule parsing issue with null values.</li>
-</ul>
-
-<div class="list-header">3.5.513 <time datetime="2017-08-22">(2017-08-22)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Dark CSS tweak for Chat Replay.</li>
-</ul>
-
-<div class="list-header">3.5.512 <time datetime="2017-08-18">(2017-08-18)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Blocked Games feature not properly hiding channels from the social bar.</li>
-	<li>Fixed: Dark CSS tweaks for the dashboard.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>
\ No newline at end of file
diff --git a/dark.css b/dark.css
index 02ba5160..e4689ba3 100644
--- a/dark.css
+++ b/dark.css
@@ -756,6 +756,7 @@ body.ffz-dark:not([data-page="teams#show"]),
 }
 
 /* Hide the chat Dark Mode control */
+.ffz-dark #theme-toggle,
 .ffz-dark .toggle-darkmode { display: none; }
 
 /* Chat Text Contrast */
diff --git a/old_changes.html b/old_changes.html
index 6ef447f4..cbd544d0 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,36 @@
+<div class="list-header">3.5.517 <time datetime="2017-09-02">(2017-09-02)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Changed: Dark theme CSS tweak for the directory.</li>
+</ul>
+
+<div class="list-header">3.5.516 <time datetime="2017-09-01">(2017-09-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Typo in video url regular expression.</li>
+</ul>
+
+<div class="list-header">3.5.515 <time datetime="2017-09-01">(2017-09-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Option to disable rich content in chat.</li>
+	<li>Changed: Add support for rich content in chat. This includes shared purchases, clip information, and video information.</li>
+	<li>API Added: <code>replaces</code> field to emoticons to allow extension emotes to replace Twitch emotes.</li>
+</ul>
+
+<div class="list-header">3.5.514 <time datetime="2017-09-01">(2017-09-01)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Schedule parsing issue with null values.</li>
+</ul>
+
+<div class="list-header">3.5.513 <time datetime="2017-08-22">(2017-08-22)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Dark CSS tweak for Chat Replay.</li>
+</ul>
+
+<div class="list-header">3.5.512 <time datetime="2017-08-18">(2017-08-18)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Blocked Games feature not properly hiding channels from the social bar.</li>
+	<li>Fixed: Dark CSS tweaks for the dashboard.</li>
+</ul>
+
 <div class="list-header">3.5.511 <time datetime="2017-08-12">(2017-08-12)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: Bits rendering after Twitch removed the Ember bits-tags service.</li>
diff --git a/socketserver/server/utils.go b/socketserver/server/utils.go
index 6657dd02..2ee6aab9 100644
--- a/socketserver/server/utils.go
+++ b/socketserver/server/utils.go
@@ -70,6 +70,7 @@ func (backend *backendInfo) UnsealRequest(form url.Values) (url.Values, error) {
 	dec := base64.NewDecoder(base64.URLEncoding, strings.NewReader(nonceString))
 	count, err := dec.Read(nonce[:])
 	if err != nil {
+		fmt.Println("Error reading nonce");
 		Statistics.BackendVerifyFails++
 		return nil, err
 	}
diff --git a/src/colors.js b/src/colors.js
index 90a3810c..d576cfb2 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -145,6 +145,7 @@ FFZ.prototype.setup_colors = function() {
 
 	// Events for rebuilding colors.
 	var Layout = utils.ember_lookup('service:layout'),
+		ThemeManager = utils.ember_lookup('service:theme-manager'),
 		Settings = utils.ember_settings();
 
 	if ( Layout )
@@ -153,7 +154,11 @@ FFZ.prototype.setup_colors = function() {
 	if ( Settings )
 		Settings.addObserver("darkMode", this._update_colors.bind(this, true))
 
-	this._color_old_darkness = (Layout && Layout.get('isTheatreMode')) || (Settings && Settings.get('darkMode'));
+	if ( ThemeManager )
+		ThemeManager.addObserver("themes.activeTheme", this._update_colors.bind(this, true));
+
+
+	this._color_old_darkness = (ThemeManager && ThemeManager.get('themes.activeTheme') === 'theme--dark') || (Layout && Layout.get('isTheatreMode')) || (Settings && Settings.get('darkMode'));
 }
 
 
@@ -672,8 +677,9 @@ FFZ.prototype._rebuild_colors = function() {
 FFZ.prototype._update_colors = function(darkness_only) {
 	// Update the lines. ALL of them.
 	var Layout = utils.ember_lookup('service:layout'),
+		ThemeManager = utils.ember_lookup('service:theme-manager'),
 
-		is_dark =  (Layout && Layout.get('isTheatreMode')) || this.settings.get_twitch("darkMode"),
+		is_dark = (ThemeManager && ThemeManager.get('themes.activeTheme') === 'theme--dark') || (Layout && Layout.get('isTheatreMode')) || this.settings.get_twitch("darkMode"),
 		cr_dark = this.settings.dark_twitch || (Layout && Layout.get('isTheatreMode'));
 
 	if ( darkness_only && this._color_old_darkness === is_dark )
diff --git a/src/constants.js b/src/constants.js
index c5fea0e2..10750a3f 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -47,7 +47,7 @@ module.exports = FrankerFaceZ.constants = {
 
 	CHAT_COLORS: ["#FF0000", "#0000FF", "#008000", "#B22222", "#FF7F50", "#9ACD32", "#FF4500", "#2E8B57", "#DAA520", "#D2691E", "#5F9EA0", "#1E90FF", "#FF69B4", "#8A2BE2", "#00FF7F"],
 
-	TOOLTIP_DISTANCE: 50,
+	TOOLTIP_DISTANCE: 100,
 
 	SEPARATORS: SEPARATORS,
 	SPLITTER: SPLITTER,
diff --git a/src/ember/line.js b/src/ember/line.js
index 26ed1daa..e23f11aa 100644
--- a/src/ember/line.js
+++ b/src/ember/line.js
@@ -399,8 +399,27 @@ FFZ.settings_info.link_info = {
 	no_bttv: 6,
 
 	name: "Link Information <span>Beta</span>",
-	help: "Check links against known bad websites, unshorten URLs, and show YouTube info."
-	};
+	help: "Check links against known bad websites, unshorten URLs, and show YouTube info.",
+
+	on_update: function(val) {
+		// Update every visible chat link and, possibly, wipe the link info cache.
+		if ( ! val ) {
+			this._link_data = {};
+			jQuery('.unsafe-link').removeClass('unsafe-link');
+
+		} else {
+			var links = document.querySelectorAll('.chat-link[data-url]');
+			for(var i=0,l=links.length; i < l; i++) {
+				var link = links[i],
+					url = link.dataset.url,
+					info = this.get_link_info(url);
+
+				if ( info && info.unsafe )
+					link.classList.add('unsafe-link');
+			}
+		}
+	}
+};
 
 
 FFZ.settings_info.link_image_hover = {
@@ -412,8 +431,8 @@ FFZ.settings_info.link_image_hover = {
 	no_mobile: true,
 
 	name: "Image Preview",
-	help: "Display image thumbnails for links to Imgur and YouTube."
-	};
+	help: "Display images associated with links to known services such as YouTube, Imgur, and Twitter."
+};
 
 
 FFZ.settings_info.emote_image_hover = {
@@ -439,9 +458,9 @@ FFZ.settings_info.image_hover_all_domains = {
 	no_bttv: 6,
 	no_mobile: true,
 
-	name: "Image Preview - All Domains",
-	help: "<i>Requires Image Preview.</i> Attempt to show an image preview for any URL ending in the appropriate extension. <b>Warning: This may be used to leak your IP address to malicious users.</b>"
-	};
+	name: "Image Preview - NSFW",
+	help: "<i>Requires Image Preview.</i> Display images from all sources, including images that are tagged as unsafe or without rating information."
+};
 
 
 FFZ.settings_info.chat_rows = {
@@ -949,6 +968,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 	var f = this,
 		Layout = utils.ember_lookup('service:layout'),
 		Chat = utils.ember_lookup('controller:chat'),
+		ThemeManager = utils.ember_lookup('service:theme-manager'),
 		PinnedCheers = utils.ember_lookup('service:bits-pinned-cheers'),
 		Settings = utils.ember_settings();
 
@@ -1114,7 +1134,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 
 				raw_color = this.get(is_recipient ? 'msgObject.toColor' : 'msgObject.color'),
 
-				is_dark = (Layout && Layout.get('isTheatreMode')) || (is_replay ? f.settings.dark_twitch : (Settings && Settings.get('darkMode'))),
+				is_dark = (ThemeManager && ThemeManager.get('themes.activeTheme') === 'theme--dark') || (Layout && Layout.get('isTheatreMode')) || (is_replay ? f.settings.dark_twitch : (Settings && Settings.get('darkMode'))),
 				is_replay = this.get('ffz_is_replay'),
 
 				colors = raw_color && f._handle_color(raw_color),
@@ -1402,7 +1422,7 @@ FFZ.prototype._modify_chat_line = function(component, is_vod) {
 				var raw_color = this.get('msgObject.color'),
 					colors = raw_color && f._handle_color(raw_color),
 					is_replay = this.get('ffz_is_replay'),
-					is_dark = (Layout && Layout.get('isTheatreMode')) || (is_replay ? f.settings.dark_twitch : (Settings && Settings.get('darkMode')));
+					is_dark = (ThemeManager && ThemeManager.get('themes.activeTheme') === 'theme--dark') || (Layout && Layout.get('isTheatreMode')) || (is_replay ? f.settings.dark_twitch : (Settings && Settings.get('darkMode')));
 
 				if ( raw_color )
 					output = '<span class="message has-color' + (is_replay ? ' replay-color' : '') + '" style="color:' + (is_dark ? colors[1] : colors[0]) + '" data-color="' + raw_color + '">';
diff --git a/src/ember/moderation-card.js b/src/ember/moderation-card.js
index 42a9cf3c..3596464a 100644
--- a/src/ember/moderation-card.js
+++ b/src/ember/moderation-card.js
@@ -1616,9 +1616,10 @@ FFZ.prototype._build_mod_card_history = function(msg, modcard, show_from, ts_cli
 			colors = raw_color && this._handle_color(raw_color),
 
 			Layout = utils.ember_lookup('service:layout'),
+			ThemeManager = utils.ember_lookup('service:theme-manager'),
 			Settings = utils.ember_settings(),
 
-			is_dark = (Layout && Layout.get('isTheatreMode')) || this.settings.get_twitch("darkMode");
+			is_dark = (ThemeManager && ThemeManager.get('themes.activeTheme') === 'theme--dark') || (Layout && Layout.get('isTheatreMode')) || this.settings.get_twitch("darkMode");
 
 
 		// Styling
diff --git a/src/ember/sidebar.js b/src/ember/sidebar.js
index c1ffd809..31e04423 100644
--- a/src/ember/sidebar.js
+++ b/src/ember/sidebar.js
@@ -218,7 +218,7 @@ FFZ.settings_info.top_nav_color = {
 			val = color.toCSS();
 		}
 
-		var out = '.top-nav__menu,.top-nav__drawer-anchor,.top-nav__logo{background-color:' + val + '}';
+		var out = '.theme--dark .top-nav__menu,.top-nav__menu,.top-nav__drawer-anchor,.top-nav__logo{background-color:' + val + '}';
 
 		if ( color.luminance() > 0.2 ) {
 			out += '.top-nav__search .form__icon svg,.top-nav .notification-center__icon svg,.top-nav .prime-logo-crown.prime-logo-crown--white svg,.top-nav__logo svg path, .top-nav__overflow svg path{fill: #000}' +
diff --git a/src/main.js b/src/main.js
index 3a093927..94228021 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 524,
+	major: 3, minor: 5, revision: 527,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/src/tokenize.js b/src/tokenize.js
index dfc5bc93..9fe252fc 100644
--- a/src/tokenize.js
+++ b/src/tokenize.js
@@ -10,6 +10,7 @@ var FFZ = window.FrankerFaceZ,
 
 	HOP = Object.prototype.hasOwnProperty,
 
+	TOOLTIP_VERSION = 2,
 	FAV_MARKER = '<span class="ffz-favorite"></span>',
 
 	EXPLANATION_WARN = '<hr>This link has been sent to you via a whisper rather than standard chat, and has not been checked or approved of by any moderators or staff members. Please treat this link with caution and do not visit it if you do not trust the sender.',
@@ -20,6 +21,7 @@ var FFZ = window.FrankerFaceZ,
 
 	LINK = /(?:https?:\/\/)?(?:[-a-zA-Z0-9@:%_\+~#=]+\.)+[a-z]{2,6}\b(?:[-a-zA-Z0-9@:%_\+.~#?&\/\/=()]*)/g,
 
+	TIME_REPLACER = /<time\s+datetime=(["'])([^>]+?)\1[^>]*>(.*?)<\/time>/i,
 	CLIP_URL = /^(?:https?:\/\/)?clips\.twitch\.tv\/(\w+?\/?\w*?)(?:\/edit)?(?:[\?#]|$)/,
 	VIDEO_URL = /^(?:https?:\/\/)?(?:www\.)?twitch\.tv\/(?:\w+\/v|videos)\/(\w+)$/,
 	FFZ_EMOTE_URL = /^(?:https?:\/\/)?(?:www\.)?frankerfacez\.com\/emoticon\/(\d+)(?:-\w*)?$/,
@@ -51,21 +53,6 @@ var FFZ = window.FrankerFaceZ,
 
 	image_iframe = function(href, extra_class) {
 		return '<iframe class="ffz-image-hover' + (extra_class ? ' ' + extra_class : '') + '" allowtransparency="true" src="' + constants.SERVER + 'script/img-proxy.html#' + utils.quote_attr(href) + '"></iframe>';
-	},
-
-	load_link_data = function(href, success, data) {
-		if ( ! success )
-			return;
-
-		this._link_data[href] = data;
-		//data.unsafe = false;
-
-		if ( ! this.settings.link_info )
-			return;
-
-		// If this link is unsafe, add the unsafe-link class to all instances of the link.
-		if ( data.unsafe )
-			jQuery('a.chat-link[data-url="' + href + '"]').addClass('unsafe-link');
 	};
 
 
@@ -348,43 +335,6 @@ FFZ.prototype.format_display_name = function(display_name, user_id, disable_alia
 // Twitch Emote Data
 // ---------------------
 
-/*FFZ.prototype.load_twitch_emote_data = function(tries) {
-	var f = this;
-	f._twitch_set_to_channel[0] = "--global--";
-	f._twitch_set_to_channel[33] = "--turbo-faces--";
-	f._twitch_set_to_channel[42] = "--turbo-faces--";
-	f._twitch_set_to_channel[19194] = "--prime--";
-	f._twitch_set_to_channel[19151] = "--curse--";
-
-	/*this.log("Loading Twitch Emote Data (Try " + (tries || 0) + ")");
-
-	jQuery.ajax(constants.SERVER + "twitch_emotes.json")
-		.done(function(data) {
-			f.log("Loaded Twitch Emote Data", data);
-			for(var set_id in data) {
-				var set = data[set_id],
-					old_id = f._twitch_set_to_channel[set_id];
-				if ( ! set )
-					continue;
-
-				if ( ! old_id || old_id.indexOf('--') === -1 )
-					f._twitch_set_to_channel[set_id] = set.name;
-
-				for(var i=0, l = set.emotes.length; i < l; i++)
-					f._twitch_emote_to_set[set.emotes[i]] = set_id;
-			}
-
-		}).fail(function(data) {
-			f.log("Error loading Twitch Emote Data", data);
-			if ( data.status === 404 )
-				return;
-
-			tries = (tries || 0) + 1;
-			if ( tries < 10 )
-				setTimeout(f.load_twitch_emote_data.bind(f, tries), 1000);
-		});*
-}*/
-
 var UNSET = {};
 
 FFZ.prototype.get_twitch_set_for = function(emote_id, callback) {
@@ -492,6 +442,149 @@ FFZ.prototype.get_twitch_set = function(set_id, callback) {
 // Tooltip Rendering
 // ---------------------
 
+FFZ.prototype.clean_link_info = function() {
+	clearTimeout(this._link_info_cleaner);
+
+	var now = Date.now(),
+		obj = {};
+
+	for(var url in this._link_data) {
+		var data = this._link_data[url];
+		if ( data && (! data[1] || now <= data[1] ) )
+			obj[url] = data;
+	}
+
+	this._link_data = obj;
+	this._link_info_cleaner = setTimeout(this.clean_link_info.bind(this), 120000);
+}
+
+
+FFZ.prototype.get_link_info = function(url, no_promises) {
+	var f = this,
+		info = this._link_data[url],
+		expires = info && info[1],
+
+		li = this.settings.link_info;
+
+	if ( ! li || (expires && Date.now() > expires) )
+		info = this._link_data[url] = null;
+
+	if ( ! li )
+		return null;
+
+	if ( info && info[0] )
+		return info[2];
+
+	if ( no_promises )
+		return null;
+
+	else if ( info )
+		return new Promise(function(resolve, reject) {
+			info[2].push([resolve, reject]);
+		});
+
+	return new Promise(function(resolve, reject) {
+		info = f._link_data[url] = [false, null, [[resolve, reject]]];
+
+		var link_timer,
+			resolve = function(success, data) {
+				clearTimeout(link_timer);
+
+				// If it's a failure and we already finished, just quit.
+				if ( ! f.settings.link_info || (info[0] && ! success) )
+					return;
+
+				var callbacks = ! info[0] && info[2];
+				f._link_data[url] = [true, Date.now() + 120000, success ? data : null];
+
+				if ( data && data.unsafe )
+					jQuery('a[data-url="' + url + '"]').addClass('unsafe-link');
+
+				if ( callbacks )
+					for(var i=0; i < callbacks.length; i++)
+						callbacks[i][success ? 0 : 1](data);
+
+				if ( ! f._link_info_cleaner )
+					f.clean_link_info();
+			};
+
+		link_timer = setTimeout(resolve.bind(this, false, 'A request timed out while trying to load information about this link.'), 15000);
+		f.ws_send("get_link", url, resolve, true);
+	});
+}
+
+
+FFZ.prototype.render_link_tooltip = function(data, el) {
+	var version = data.v || 1;
+	if ( version > TOOLTIP_VERSION )
+		return '';
+
+	var content = data.content || data.html || '';
+
+	if ( content )
+		content = content.replace(TIME_REPLACER, function(match, junk, timestamp, old) {
+			var now = Date.now(),
+				posted_at = utils.parse_date(timestamp),
+				time_ago = posted_at && (now - posted_at) / 1000;
+
+			if ( time_ago < 86400 )
+				old = utils.full_human_time(time_ago);
+			else if ( posted_at )
+				old = posted_at.toLocaleString();
+
+			return '<time timestamp="' + utils.sanitize(timestamp) + '">' + utils.sanitize(old) + '</time>';
+		});
+
+
+	if ( data.urls && data.urls.length > 1 ) {
+		var last_url = data.urls[data.urls.length-1];
+		content += (content.length ? '<hr>' : '') + 'Destination: ' + utils.sanitize(last_url[1]);
+	}
+
+	if ( data.unsafe ) {
+		var reasons = _.pluck(data.urls, 2).filter((function(x){return x})).uniq().join(", ");
+		content = "Caution: This URL is on Google's Safe Browsing list for: " +
+			utils.sanitize(reasons.toLowerCase()) + (content.length ? '<hr>' + content : '');
+	}
+
+	if ( el && el.classList.contains('warn-link') )
+		content += (content.length ? '<hr>' : '') + EXPLANATION_WARN;
+
+	var show_image = this.settings.link_image_hover && (data.image_safe || this.settings.image_hover_all_domains);
+
+	if ( show_image ) {
+		if ( data.image )
+			if ( data.image_iframe )
+				content = image_iframe(data.image) + content;
+			else
+				content = '<img class="emoticon ffz-image-hover" src="' + utils.quote_attr(data.image) + '">' + content;
+
+	} else if ( content.length )
+		content = content.replace(/<!--MS-->.*<!--ME-->/g, '');
+
+	return content;
+}
+
+
+FFZ.prototype.render_tooltip_class = function(el) {
+	var f = this,
+		func = function() {
+			if ( this.classList.contains('chat-link') ) {
+				// TODO: A lot of shit. Lookup data.
+				var url = this.getAttribute("data-url"),
+					data = url && f.get_link_info(url, true);
+
+				if ( data )
+					return data.tooltip_class;
+			}
+
+			return this.dataset.tooltipClass;
+		};
+
+	return el ? func(el) : func;
+}
+
+
 FFZ.prototype.render_tooltip = function(el) {
 	var f = this,
 		func = function() {
@@ -646,39 +739,47 @@ FFZ.prototype.render_tooltip = function(el) {
 
 			} else if ( this.classList.contains('chat-link') ) {
 				// TODO: A lot of shit. Lookup data.
-				var url = this.getAttribute("data-url"),
-					data = url && f._link_data[url],
+				var t = this,
+					url = this.getAttribute("data-url"),
+					data = url && f.get_link_info(url);
 
-					preview_url = null,
-					preview_iframe = true,
-					image = '',
-					text = '';
-
-				if ( ! url )
-					return;
-
-				// Do we have data?
-				if ( data && data !== true ) {
-					text = data.html;
-					preview_url = data.image;
-					preview_iframe = data.image_iframe !== undefined ? data.image_iframe : true;
-				} else
-					preview_url = is_image(url, f.settings.image_hover_all_domains) ? url : null;
-
-				if ( f.settings.link_image_hover && preview_url )
-					if ( preview_iframe )
-						image = image_iframe(url);
-					else
-						image = '<img class="emoticon ffz-image-hover" src="' + utils.quote_attr(preview_url) + '">';
-
-				// If it's not a deleted link, don't waste time showing the URL in the tooltip.
 				if ( this.classList.contains('deleted-link') )
-					text = utils.sanitize(url);
+					return utils.sanitize(url || '');
 
-				if ( this.classList.contains('warn-link') )
-					text += EXPLANATION_WARN;
+				if ( ! url || ! data )
+					return '';
 
-				return image + text; //`${image}${text}`;
+				if ( data instanceof Promise ) {
+					var tt_id = FFZ._sc_followed_tooltip_id++,
+						replacer = function(data, tooltip_class) {
+							var el = document.querySelector('.ffz-async-tooltip[data-id="' + tt_id + '"]'),
+								container = el && el.parentElement.parentElement;
+							if ( ! el )
+								return;
+
+							if ( ! data )
+								jQuery(container).remove();
+
+							if ( tooltip_class )
+								container.classList.add(tooltip_class);
+
+							el.outerHTML = data;
+						};
+
+					data.then(function(data) {
+						if ( data )
+							replacer(f.render_link_tooltip(data, t), data.tooltip_class);
+						else
+							replacer(null);
+
+					}).catch(function(err) {
+						replacer(utils.sanitize(err || ''));
+					});
+
+					return '<div class="ffz-async-tooltip" data-id="' + tt_id + '"></div>';
+
+				} else
+					return f.render_link_tooltip(data, this);
 			}
 
 			f.log("Unable to Build Tooltip For: " + this.className, this);
@@ -1379,43 +1480,9 @@ FFZ.prototype.render_token = function(render_links, warn_links, render_bits, tok
 			// Web Link
 			cls = 'chat-link';
 
-			if ( this.settings.link_info ) {
-				if (!( this._link_data && this._link_data[href] )) {
-					this._link_data = this._link_data || {};
-					this._link_data[href] = true;
-
-					var success = load_link_data.bind(this, href),
-						clip_info = CLIP_URL.exec(href),
-						video_info = VIDEO_URL.exec(href);
-
-					if ( clip_info ) {
-						var Clips = utils.ember_lookup('service:clips');
-						Clips && Clips.fetchClipBySlug(clip_info[1]).then(function(data) {
-							data &&
-							success(true, {
-								image: data.thumbnails.medium,
-								image_iframe: false,
-								html: '<span class="ffz-clip-title">' + utils.sanitize(data.title) + '</span>' +
-									'Channel: ' + utils.sanitize(data.broadcaster_display_name) +
-									'<br>Game: ' + utils.sanitize(data.game)
-							});
-						});
-
-					} else if ( video_info ) {
-						utils.api.get("videos/" + video_info[1], undefined, {version: 5})
-								.then(function(data) {
-							success(true, {
-								image: data.preview.large,
-								image_iframe: false,
-								html: '<span class="ffz-clip-title">' + utils.sanitize(data.title) + ' [' + utils.time_to_string(data.length) + ']</span>' +
-									'Channel: ' + utils.sanitize(data.channel.display_name) +
-									'<br>Game: ' + utils.sanitize(data.game)
-							})});
-
-					} else
-						this.ws_send("get_link", href, success);
-				}
-			}
+			var info = this.get_link_info(href);
+			if ( info && info.unsafe )
+				cls += ' unsafe-link';
 		}
 
 		// Deleted Links
diff --git a/src/ui/dark.js b/src/ui/dark.js
index 4cee954b..0c6089ed 100644
--- a/src/ui/dark.js
+++ b/src/ui/dark.js
@@ -114,6 +114,12 @@ FFZ.settings_info.twitch_chat_dark = {
 	};
 
 
+FFZ.settings_info.twitch_theme = {
+	value: '',
+	visible: false
+};
+
+
 FFZ.settings_info.dark_twitch = {
 	type: "boolean",
 	value: false,
@@ -139,14 +145,25 @@ FFZ.settings_info.dark_twitch = {
 
 			(this.is_clips ? document.querySelector('html') : document.body).classList.toggle("ffz-dark", val);
 
-			var Settings = utils.ember_settings();
+			var Settings = utils.ember_settings(),
+				ThemeManager = utils.ember_lookup('service:theme-manager');
 
 			if ( val ) {
 				this._load_dark_css();
-				Settings && this.settings.set('twitch_chat_dark', Settings.get('darkMode'));
-				Settings && Settings.set('darkMode', true);
-			} else
-				Settings && Settings.set('darkMode', this.settings.twitch_chat_dark);
+				if ( ThemeManager ) {
+					this.settings.set('twitch_theme', ThemeManager.get('themes.activeTheme'));
+					ThemeManager.set('themes.activeTheme', 'theme--dark');
+				}
+				if ( Settings ) {
+					this.settings.set('twitch_chat_dark', Settings.get('darkMode'));
+					Settings.set('darkMode', true);
+				}
+			} else {
+				if ( ThemeManager )
+					ThemeManager.set('themes.activeTheme', this.settings.twitch_theme);
+				if ( Settings )
+					Settings.set('darkMode', this.settings.twitch_chat_dark);
+			}
 
 			// Try coloring chat replay
 			window.jQuery && jQuery('.chatReplay').toggleClass('dark', val || false);
@@ -204,15 +221,13 @@ FFZ.prototype.setup_dark = function() {
 	if ( ! this.settings.dark_twitch )
 		return;
 
-	var Settings = utils.ember_settings();
-	if ( Settings ) {
-		try {
-			Settings.set('darkMode', true);
-		} catch(err) {
-			this.error("Unable to set the darkMode setting because it isn't named what we expect. WTF?");
-		}
-	} else
-		this.error("Unable to load the Ember settings controller.");
+	var Settings = utils.ember_settings(),
+		ThemeManager = utils.ember_lookup('service:theme-manager');
+
+	if ( ThemeManager ) {
+		ThemeManager.set('themes.activeTheme', 'theme--dark');
+	} else if ( Settings )
+		Settings.set('darkMode', true);
 
 	this._load_dark_css();
 }
diff --git a/src/ui/tooltips.js b/src/ui/tooltips.js
index 93c1fdf9..0ad6b095 100644
--- a/src/ui/tooltips.js
+++ b/src/ui/tooltips.js
@@ -10,7 +10,12 @@ var FFZ = window.FrankerFaceZ,
 FFZ.prototype.fix_tooltips = function() {
 	// Add handlers to FFZ's tooltip classes.
 	jQuery(".html-tooltip").tipsy({live: true, html: true, gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
-	jQuery(".ffz-tooltip").tipsy({live: true, html: true, title: this.render_tooltip(), gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
+	jQuery(".ffz-tooltip").tipsy({
+		live: true,
+		html: true,
+		className: this.render_tooltip_class(),
+		title: this.render_tooltip(),
+		gravity: utils.tooltip_placement(2*constants.TOOLTIP_DISTANCE, 'n')});
 
 
 	// First, override the tooltip mixin.
diff --git a/style.css b/style.css
index 62806a93..ab8ae672 100644
--- a/style.css
+++ b/style.css
@@ -1718,6 +1718,10 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	position: relative;
 }
 
+.tipsy-inner .faded {
+	opacity: 0.7;
+}
+
 .ffz-follow-tip .tipsy-inner {
 	width: 316px;
 }
@@ -1750,6 +1754,218 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	white-space: pre-wrap;
 }
 
+
+.ffz-rich-tip .tipsy-inner {
+	max-width: 340px;
+	width: 340px;
+	text-align: left;
+	position: relative;
+
+	padding: 8px;
+}
+
+.ffz-rich-tip .body { line-height: 1.5em }
+
+.ffz-rich-tip .tweet-heading:before {
+	content: '';
+	position: absolute;
+	top: 24px;
+	right: 24px;
+	width: 20px;
+	height: 16px;
+	background: url("//cdn.frankerfacez.com/script/twitter_sprites.png") -38px -15px;
+}
+
+.ffz-rich-tip .stats:after,
+.ffz-rich-tip .heading:after {
+	content: '';
+	display: table;
+	clear: both;
+}
+
+.ffz-rich-tip .avatar {
+	float: left;
+	margin-right: 8px;
+	height: 48px;
+	width: 48px;
+}
+
+.ffz-rich-tip .tweet-heading .avatar {
+	border-radius: 50%;
+}
+
+.ffz-rich-tip .display-name {
+	padding-top: 3px;
+	font-size: 14px;
+	display: block;
+}
+
+.ffz-rich-tip .display-name.big-name {
+	font-size: 20px;
+	padding-top: 18px;
+}
+
+.ffz-rich-tip .quoted .display-name {
+	padding: 0 5px 0 0;
+	display: inline;
+	font-size: 12px;
+}
+
+.ffz-rich-tip .twitch-heading .badge.verified {
+	height: 12px;
+	width: 12px;
+	margin: 2px 0 -1px 5px;
+	background: url("https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/1");
+	background-size: contain;
+	display: inline-block;
+}
+
+.ffz-rich-tip .twitch-heading .big-name .badge.verified {
+	height: 18px;
+	width: 18px;
+	margin: 1px 0 0 10px;
+}
+
+.ffz-rich-tip .tweet-heading .badge {
+	height: 12px;
+	width: 12px;
+	margin: 2px 0 -1px 5px;
+	background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
+	display: inline-block;
+}
+
+.ffz-rich-tip .badge.verified {
+	background-position: 0 -15px;
+}
+
+.ffz-rich-tip .badge.translator {
+	background-position: -12px -15px;
+}
+
+.ffz-rich-tip .badge.protected {
+	background-position: -24px -15px;
+	width: 14px;
+}
+
+.ffz-rich-tip .emoji {
+	height: 1em;
+	vertical-align: middle;
+}
+
+.ffz-rich-tip .quoted > div:not(:first-child),
+.ffz-rich-tip .tipsy-inner > div:not(:first-child) {
+	margin-top: 8px;
+}
+
+.ffz-rich-tip .quote-heading + .body,
+.ffz-rich-tip .replying + .body {
+	margin-top: 0 !important;
+}
+
+.ffz-rich-tip .replying {
+	opacity: 0.6;
+	font-size: 10px;
+}
+
+.ffz-rich-tip .quoted .body,
+.ffz-rich-tip .stats,
+.ffz-rich-tip .username { opacity: 0.6 }
+
+.ffz-rich-tip .stats { display: flex }
+.ffz-rich-tip time { flex-grow: 1 }
+
+.ffz-rich-tip .tweet-stats .stat:before {
+	content: '';
+	display: inline-block;
+	background: url("//cdn.frankerfacez.com/script/twitter_sprites.png");
+	margin: 0 5px 0 10px;
+}
+
+.ffz-rich-tip .stat.likes:before {
+	width: 17px; height: 14px;
+	margin-bottom: -3px;
+}
+
+.ffz-rich-tip .stat.retweets:before {
+	width: 20px; height: 12px;
+	background-position: -34px 0;
+	margin-bottom: -2px;
+}
+
+.ffz-rich-tip .media { position: relative; text-align: center }
+
+.ffz-rich-tip .media:not([data-count="1"]) {
+	display: flex;
+	margin: 8px -5px -5px 0;
+	flex-flow: column wrap;
+	height: 329px;
+}
+
+.ffz-rich-tip .media video {
+	width: 100%;
+	max-height: 324px;
+}
+
+.ffz-rich-tip .media[data-count="4"] { flex-flow: row wrap }
+
+.ffz-rich-tip .media[data-count="2"] { height: 164.5px }
+.ffz-rich-tip .media img { max-height: 324px }
+
+.ffz-rich-tip .quoted .media:not([data-count="1"]) { height: 150px }
+.ffz-rich-tip .quoted .media[data-count="2"] { height: 150px }
+.ffz-rich-tip .quoted .media video,
+.ffz-rich-tip .quoted .media img { max-height: 150px }
+
+.ffz-rich-tip .media span {
+	background: no-repeat center center;
+	background-size: cover;
+}
+
+.ffz-rich-tip .media[data-count="2"] span,
+.ffz-rich-tip .media[data-count="3"] span,
+.ffz-rich-tip .media[data-count="4"] span {
+	width: calc(50% - 5px);
+	height: calc(50% - 5px);
+	margin: 0 5px 5px 0;
+}
+
+.ffz-rich-tip .media[data-count="2"] span,
+.ffz-rich-tip .media[data-count="3"] span:first-of-type {
+	height: 100%;
+}
+
+.ffz-rich-tip .profile-stats {
+	display: flex;
+	flex-flow: row;
+}
+
+.ffz-rich-tip .profile-stats div {
+	flex-grow: 1;
+	font-size: 16px;
+}
+
+.ffz-rich-tip .profile-stats span {
+	display: block;
+	font-size: 12px;
+	opacity: 0.7;
+}
+
+.ffz-rich-tip .quoted {
+	border: 1px solid #474747;
+	border-radius: 5px;
+	padding: 8px;
+}
+
+.ffz-rich-tip .media[data-type="video"]:after {
+	position: absolute;
+	content: '';
+	width: 64px; height: 64px;
+	top: calc(50% - 32px);
+	left: calc(50% - 32px);
+	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23FFF' d='M15 10.001c0 .299-.305.514-.305.514l-8.561 5.303C5.51 16.227 5 15.924 5 15.149V4.852c0-.777.51-1.078 1.135-.67l8.561 5.305c-.001 0 .304.215.304.514z'/%3E%3C/svg%3E");
+}
+
+
 /* Menu Page Loader */
 
 .ffz-ui-sub-menu-page:empty,
@@ -1759,6 +1975,7 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 
 .ffz-loading-spinner:after,
 .chat-history.loading:after,
+.ffz-async-tooltip:empty:after,
 .ffz-ui-sub-menu-page:empty::after,
 .ffz-ui-menu-page:empty::after {
 	content: " ";
@@ -1772,6 +1989,10 @@ body:not(.ffz-bttv) .chat-container:not(.chatReplay) .more-messages-indicator {
 	animation: ffz-rotateplane 1.2s infinite linear;
 }
 
+.ffz-async-tooltip:empty:after {
+	margin: 10px 50px;
+}
+
 @keyframes ffz-rotateplane {
 	0% { transform: perspective(120px) rotateY(90deg) }
 	25% { transform: perspective(120px) rotateY(180deg) }