From c3cca7de64448c978e7e64991384441969bff627 Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 16 Feb 2017 13:30:18 -0500
Subject: [PATCH] 3.5.429. CSS tweaks for dark theme. Display uptime on the
 Discover queue. Stop re-inserting a SVG element into the DOM once a second on
 the directory page. Seriously, that's dumb. Also stop duplicating emote data
 structures from the API. Low memory use is more important than protecting the
 API from minor structure changes.

---
 changelog.html         | 28 ++++++++++--------------
 dark.css               | 11 ++++++++++
 old_changes.html       | 17 +++++++++++++++
 src/ember/directory.js | 49 ++++++++++++++++++++++++++++--------------
 src/ext/api.js         | 40 +++++++++++++++++++++-------------
 src/main.js            |  2 +-
 style.css              |  5 ++++-
 7 files changed, 102 insertions(+), 50 deletions(-)

diff --git a/changelog.html b/changelog.html
index 4cc4e427..5cf41c55 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,14 @@
+<div class="list-header">3.5.429 <time datetime="2017-02-16">(2017-02-16)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: CSS tweaks for the dark theme.</li>
+	<li>Fixed: Display uptime on the Discover queue.</li>
+</ul>
+
+<div class="list-header">3.5.428 <time datetime="2017-02-14">(2017-02-14)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Minimize DOM changes for the stream uptime display on the directory to reduce nodes that need to be garbage collected.</li>
+</ul>
+
 <div class="list-header">3.5.427 <time datetime="2017-02-14">(2017-02-14)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: API badges not rendering correctly.</li>
@@ -56,22 +67,5 @@
 	<li>This is also the 420th commit to FrankerFaceZ's GitHub repository.</li>
 </ul>
 
-<div class="list-header">3.5.419 <time datetime="2017-01-20">(2017-01-20)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Dismiss button for Top Cheers.</li>
-	<li>Updated: The Display Pinned Cheers setting now also removes Top Cheers.</li>
-</ul>
-
-<div class="list-header">3.5.418 <time datetime="2017-01-18">(2017-01-18)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Added: Setting to allow controlling player volume by scrolling the mouse wheel.</li>
-	<li>Fixed: AutoMod settings dark theme.</li>
-</ul>
-
-<div class="list-header">3.5.417 <time datetime="2017-01-13">(2017-01-13)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Twitch broke Chat Replay handling of chat timeouts and bans somehow. Fix color handling with blank usernames.</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 25b9c751..5badbd23 100644
--- a/dark.css
+++ b/dark.css
@@ -346,6 +346,7 @@ body.ffz-dark:not([data-page="teams#show"]),
 }
 
 .ffz-dark .balloon .balloon__link { color: #a68ed2 !important }
+.ffz-dark .balloon .balloon__link--active,
 .ffz-dark .balloon .balloon__link--selected,
 .ffz-dark .balloon .balloon__link:hover { color: #fff !important }
 .ffz-dark .balloon .balloon__link--selected { background-color: #6441a5 !important }
@@ -603,8 +604,10 @@ body.ffz-dark:not([data-page="teams#show"]),
 	color: #a68ed2;
 }
 
+.ffz-dark .tw-tabs,
 .ffz-dark .tabs { box-shadow: 0 -1px 0 rgba(255,255,255,0.2) inset; }
 
+.ffz-dark .tw-tabs__item > a:hover,
 .ffz-dark .tabs>.tab:hover,
 .ffz-dark .tabs>li:hover,
 .ffz-dark .tabs__item:hover,
@@ -621,6 +624,12 @@ body.ffz-dark:not([data-page="teams#show"]),
 	border-color: #32323e;
 }
 
+.ffz-dark .tw-tabs__item > a.active,
+.ffz-dark .tw-tabs__item > button.active {
+	color: #aaa;
+	box-shadow: 0 -1px 0 #ccc inset;
+}
+
 .ffz-dark .mininav li > a:hover,
 .ffz-dark ul.mininav li.active,
 .ffz-dark ul.tabs li.selected a,
@@ -1053,6 +1062,8 @@ body.ffz-dark:not([data-page="teams#show"]),
 	background-color: transparent;
 }
 
+.ffz-dark .following-col .col-header,
+.ffz-dark .following-col .header,
 .ffz-dark .whatisthis .actions .divider,
 .ffz-dark .dash-chat-column {
 	border-color: rgba(255,255,255,0.2);
diff --git a/old_changes.html b/old_changes.html
index d3b771dd..5f4b90e3 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,20 @@
+<div class="list-header">3.5.419 <time datetime="2017-01-20">(2017-01-20)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Dismiss button for Top Cheers.</li>
+	<li>Updated: The Display Pinned Cheers setting now also removes Top Cheers.</li>
+</ul>
+
+<div class="list-header">3.5.418 <time datetime="2017-01-18">(2017-01-18)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Added: Setting to allow controlling player volume by scrolling the mouse wheel.</li>
+	<li>Fixed: AutoMod settings dark theme.</li>
+</ul>
+
+<div class="list-header">3.5.417 <time datetime="2017-01-13">(2017-01-13)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Twitch broke Chat Replay handling of chat timeouts and bans somehow. Fix color handling with blank usernames.</li>
+</ul>
+
 <div class="list-header">3.5.416 <time datetime="2017-01-11">(2017-01-11)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Fixed: An issue could prevent bits from rendering correctly in certain situations.</li>
diff --git a/src/ember/directory.js b/src/ember/directory.js
index c45838cc..bf296531 100644
--- a/src/ember/directory.js
+++ b/src/ember/directory.js
@@ -259,6 +259,7 @@ FFZ.prototype.setup_directory = function() {
 	this.update_views('component:creative-preview', function(x) { this.modify_directory_live(x, false) }, true);
 	this.update_views('component:csgo-channel-preview', function(x) { this.modify_directory_live(x, true) }, true);
 	this.update_views('component:twitch-carousel/stream-item', function(x) { this.modify_directory_live(x, false, true) }, true);
+	this.update_views('component:stream/snapshot-card', function(x) { this.modify_directory_live(x, false, true) }, true);
 	this.update_views('component:host-preview', this.modify_directory_host, true, true);
 	this.update_views('component:video-preview', this.modify_video_preview, true);
 	this.update_views("component:video/following-uploads", this.modify_following_uploads);
@@ -485,7 +486,7 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
 				meta = el && el.querySelector(meta_selector),
 				thumb = el && el.querySelector(thumb_selector),
 				cap = thumb && thumb.querySelector(cap_selector),
-				uptime_parent = is_card ? thumb : cap,
+				uptime_setting = f.settings.stream_uptime,
 				channel_id = this.get(pref + 'channel.name'),
 				game = this.get(pref + 'game');
 
@@ -496,14 +497,10 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
 			el.classList.toggle('ffz-game-banned', f.settings.banned_games.indexOf(game && game.toLowerCase()) !== -1);
 			el.classList.toggle('ffz-game-spoilered', f.settings.spoiler_games.indexOf(game && game.toLowerCase()) !== -1);
 
-			if (f.settings.stream_uptime && f.settings.stream_uptime < 3 && uptime_parent ) {
-				var t_el = this._ffz_uptime = document.createElement('div');
-				t_el.className = 'overlay_info length live';
-
-				jQuery(t_el).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 's')});
-
-				uptime_parent.appendChild(t_el);
-				this._ffz_uptime_timer = setInterval(this.ffzUpdateUptime.bind(this), 1000);
+			if ( uptime_setting && uptime_setting < 3 ) {
+				this._ffz_uptime_timer = setInterval(
+					this.ffzUpdateUptime.bind(this),
+					uptime_setting === 2 ? 1000 : 60000);
 				this.ffzUpdateUptime();
 			}
 
@@ -533,8 +530,8 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
 
 		ffz_destroy: function() {
 			if ( this._ffz_uptime ) {
-				this._ffz_uptime.parentElement.removeChild(this._ffz_uptime);
-				this._ffz_uptime = null;
+				jQuery(this._ffz_uptime).remove();
+				this._ffz_uptime = this._ffz_uptime_span = null;
 			}
 
 			if ( this._ffz_uptime_timer )
@@ -570,11 +567,31 @@ FFZ.prototype.modify_directory_live = function(component, is_csgo, is_card) {
 				uptime = up_since && Math.floor((now - up_since.getTime()) / 1000) || 0;
 
 			if ( uptime > 0 ) {
-				this._ffz_uptime.innerHTML = constants.CLOCK + utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1);
-				this._ffz_uptime.setAttribute('original-title', 'Stream Uptime <nobr>(since ' + up_since.toLocaleString() + ')</nobr>');;
-			} else {
-				this._ffz_uptime.setAttribute('original-title', '');
-				this._ffz_uptime.innerHTML = '';
+				if ( ! this._ffz_uptime ) {
+					var el = this.get('element'),
+						cont = el && el.querySelector(thumb_selector);
+
+					if ( ! is_card )
+						cont = cont && cont.querySelector(cap_selector);
+
+					if ( ! cont )
+						return;
+
+					var t_el = this._ffz_uptime = utils.createElement('div', 'overlay_info length live', constants.CLOCK),
+						t_span = this._ffz_uptime_span = utils.createElement('span');
+
+					t_el.appendChild(t_span);
+					t_el.setAttribute('original-title', 'Stream Uptime <nobr>(since ' + up_since.toLocaleString() + ')</nobr>');
+
+					jQuery(t_el).tipsy({html: true, gravity: utils.tooltip_placement(constants.TOOLTIP_DISTANCE, 's')});
+					cont.appendChild(t_el);
+				}
+
+				this._ffz_uptime_span.textContent = utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1);
+
+			} else if ( this._ffz_uptime ) {
+				jQuery(this._ffz_uptime).remove();
+				this._ffz_uptime = this._ffz_uptime_span = null;
 			}
 		}
 	});
diff --git a/src/ext/api.js b/src/ext/api.js
index 6eaca831..5baa8f5d 100644
--- a/src/ext/api.js
+++ b/src/ext/api.js
@@ -222,33 +222,37 @@ API.prototype._load_set = function(real_id, set_id, data) {
 		if ( ! emote.name )
 			continue;
 
-		var new_emote = _.extend({}, emote, {
+		/*var new_emote = _.extend({}, emote, {
 			id: id,
 			set_id: real_id,
 			srcSet: emote.urls[1] + ' 1x'
-		});
+		});*/
+
+		emote.id = id;
+		emote.set_id = real_id;
+		emote.srcSet = emote.urls[1] + ' 1x';
 
 		if ( emote.urls[2] )
-			new_emote.srcSet += ', ' + emote.urls[2] + ' 2x';
+			/*new_*/emote.srcSet += ', ' + emote.urls[2] + ' 2x';
 
 		if ( emote.urls[3] )
-			new_emote.srcSet += ', ' + emote.urls[3] + ' 3x';
+			/*new_*/emote.srcSet += ', ' + emote.urls[3] + ' 3x';
 
 		if ( emote.urls[4] )
-			new_emote.srcSet += ', ' + emote.urls[4] + ' 4x';
+			/*new_*/emote.srcSet += ', ' + emote.urls[4] + ' 4x';
 
-		new_emote.token = {
+		/*new_*/emote.token = {
 			type: "emoticon",
-			srcSet: new_emote.srcSet,
-			imgSrc: new_emote.urls[1],
+			srcSet: /*new_*/emote.srcSet,
+			imgSrc: /*new_*/emote.urls[1],
 			ffzEmote: id,
 			ffzEmoteSet: real_id,
-			altText: new_emote.hidden ? '???' : new_emote.name
+			altText: /*new_*/emote.hidden ? '???' : /*new_*/emote.name
 		};
 
-		output_css += utils.emote_css(new_emote);
+		output_css += utils.emote_css(/*new_*/emote);
 		emote_set.count++;
-		emoticons[id] = new_emote;
+		emoticons[id] = /*new_*/emote;
 	}
 
 	// Use the real ID for building CSS.
@@ -272,14 +276,20 @@ API.prototype._load_set = function(real_id, set_id, data) {
 // Loading / Unloading Sets
 // -------------------------
 
-API.prototype.load_set = function(id, emote_set) {
-	var exact_id = this.id + '-' + id;
+API.prototype.load_set = function(set_id, emote_set) {
+	var exact_id = this.id + '-' + set_id,
+		already_loaded = this.emote_sets[set_id];
 
 	emote_set.title = emote_set.title || "Global Emoticons";
 	emote_set._type = emote_set._type || 0;
 
-	emote_set = this._load_set(exact_id, id, emote_set);
-	this.log("Loaded Emoticon Set #" + id + ": " + emote_set.title + " (" + emote_set.count + " emotes)", emote_set);
+	emote_set = this._load_set(exact_id, set_id, emote_set);
+
+	// Avoid spamming the console if and when other extensions
+	// spend time constantly updating emote sets.
+	if ( ! already_loaded || constants.DEBUG )
+		this.log("Loaded Emoticon Set #" + set_id + ": " + emote_set.title + " (" + emote_set.count + " emotes)", emote_set);
+
 	return emote_set;
 }
 
diff --git a/src/main.js b/src/main.js
index 57e3b381..6b131b7d 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: 427,
+	major: 3, minor: 5, revision: 429,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/style.css b/style.css
index 3e9ee263..b5e913a6 100644
--- a/style.css
+++ b/style.css
@@ -132,7 +132,7 @@ body:not(.ffz-minimal-chat-input):not(.ffz-menu-replace) .chat-interface .emotic
 .ffz-ui-toggle svg.svg-emoticons path { fill: rgba(0,0,0,0.2); }
 .ffz-ui-toggle:hover svg.svg-emoticons path { fill: rgba(0,0,0,0.5); }
 
-.carousel__item .card__img .overlay_info.live svg path,
+.card-carousel__item .card__img .overlay_info.live svg path,
 .streams .stream .content .overlay_info.live svg path,
 .videos .video .content .overlay_info.live svg path { fill: #ff2020; }
 
@@ -1171,6 +1171,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 
 /* Menu Scrollbar */
 
+.balloon__list.scroll-y::-webkit-scrollbar,
 .player-menu__menu::-webkit-scrollbar,
 .dash-column::-webkit-scrollbar,
 #ffz-metadata-popup .scroller::-webkit-scrollbar,
@@ -1191,6 +1192,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 	width: 6px;
 }
 
+.balloon__list.scroll-y::-webkit-scrollbar-thumb,
 .player-menu__menu::-webkit-scrollbar-thumb,
 .dash-column::-webkit-scrollbar-thumb,
 #ffz-metadata-popup .scroller::-webkit-scrollbar-thumb,
@@ -1212,6 +1214,7 @@ body:not(.ffz-bttv) .dropmenu.share { margin-bottom: 0; }
 	box-shadow: 0 0 1px 1px rgba(255,255,255,0.25);
 }
 
+.ffz-dark .balloon__list.scroll-y::-webkit-scrollbar-thumb,
 .ffz-dark .player-menu__menu::-webkit-scrollbar-thumb,
 
 .ffz-dark .dash-column::-webkit-scrollbar-thumb,