Merge pull request #1062 from andytuba/disable-animations

Disable animations

lib/modules/styleTweaks.js

@@ -63,7 +63,13 @@ modules['styleTweaks'] = {
 			value: false,
 			description: "Don't disable subreddit styles by default when using dark mode (night mode).\
 				<br><br>When using dark mode, subreddit styles are automatically disabled unless <a href='/r/Enhancement/wiki/subredditstyling#wiki_res_night_mode_and_your_subreddit'>the subreddit indicates it is dark mode-friendly</a>. you must tick the 'Use subreddit stylesheet' in a subreddit's sidebar to enable subreddit styles in that subreddit. This is because most subreddits are not dark mode-friendly.\
-				<br><br>If you choose to show subreddit styles, you will see flair images and spoiler tags, but be warned: <em>you may see bright images, comment highlighting, etc.</em>  If you do, please message the mods for that subreddit."		},
+				<br><br>If you choose to show subreddit styles, you will see flair images and spoiler tags, but be warned: <em>you may see bright images, comment highlighting, etc.</em>  If you do, please message the mods for that subreddit."
+			},
+		disableAnimations: {
+			type: 'boolean',
+			value: false,
+			description: 'Discourage CSS3 animations. (This will apply to all of reddit, every subreddit, and RES functionality. However, subreddits might still some animations.)'
+		},
 		visitedStyle: {
 			type: 'boolean',
 			value: false,
@@ -142,6 +148,10 @@ modules['styleTweaks'] = {
 				document.html.classList.add('res-colorblind');
 			}
 
+			if (this.options.disableAnimations.value) {
+				this.disableAnimations();
+			}
+
 			// if night mode is enabled, set a localstorage token so that in the future,
 			// we can add the res-nightmode class to the page prior to page load.
 			if (this.isDark()) {
@@ -568,6 +578,40 @@ modules['styleTweaks'] = {
 			subredditStyleSheet.parentNode.removeChild(subredditStyleSheet);
 		}
 	},
+	disableAnimations: function() {
+		var selectors = [];
+
+		// This CSS is engineered to disable most animations without making the selector completely ridiculous.
+		// If they get too obnoxious, then use the "disable subreddit style" hammer.
+		RESUtils.addCSS('\
+			html body.res #header:before,   \
+			html body.res #header:after,   \
+			html body.res #header *,	\
+			html body.res #header *:before,   \
+			html body.res #header *:after,   \
+			html body.res #header ~ *,	\
+			html body.res #header ~ *:before,	\
+			html body.res #header ~ *:after,	\
+			html body.res #header ~ * *,	\
+			html body.res #header ~ * *:before,	\
+			html body.res #header ~ * *:after,	\
+			html body.res #header ~ * #siteTable *,	\
+			html body.res #header ~ * #siteTable *:before,	\
+			html body.res #header ~ * #siteTable *:after {	\
+				-o-transition-property: none !important;	\
+				-moz-transition-property: none !important;	\
+				-ms-transition-property: none !important;	\
+				-webkit-transition-property: none !important;	\
+				transition-property: none !important;	\
+				-webkit-animation: none !important;	\
+				-moz-animation: none !important;	\
+				-o-animation: none !important;	\
+				-ms-animation: none !important;	\
+				animation: none !important;	\
+			}	\
+			');
+
+	},
 	enableNightMode: function() {
 		// Set the user preference, if possible (which is not at page load)
 		if (RESStorage.getItem) {