Added option for hiding gifs

content.js

@@ -30,6 +30,27 @@ var makeReadable = function() {
 	document.head.insertAdjacentHTML('beforeend', '<link rel="stylesheet" type="text/css" href="' + browser.runtime.getURL("medium.css") + '">');
 };
 
+var hideGifs = function() {
+
+	// For all progressive media components, if it contains a giphy or gif thumbnail we'll want to hide it
+	var progressiveMediaElements = document.querySelectorAll('.progressiveMedia');
+
+	progressiveMediaElements.forEach(function(mediaElement) {
+		var childImages = mediaElement.querySelectorAll('img');
+		childImages.forEach(function(image) {
+			if (image.src && (image.src.indexOf('gif') !== -1 || image.src.indexOf('giphy') !== -1)) {
+
+				// Hide the media element
+				mediaElement.style.display = 'none';
+				mediaElement.style.height = 0;
+
+				// The media element's parent is a "aspectRatioPlaceholder".  We want to make its height 0 as well
+				mediaElement.parentElement.style.height = 0;
+			}
+		});
+	});
+}
+
 var hideHighlightMenu = function() {
 	var bar = document.querySelector('.highlightMenu');
 	if (bar) {
@@ -80,7 +101,7 @@ var observer = new MutationObserver(function(mutations){
 	mutations.forEach(function(){
 		makeReadable();
 		shrinkHeaderImages();
-	});	
+	});
 });
 
 var config = {attributes: true};
@@ -101,6 +122,9 @@ if (document.querySelector('head meta[property="al:ios:app_name"][content="mediu
 		if (items.hideHighlightMenu) {
 			hideHighlightMenu();
 		}
+		if (items.hideGifs) {
+			hideGifs();
+		}
 	});
 
 	observer.observe(document.body, config);

options.html

@@ -32,6 +32,10 @@ <h2>Personal Preferences</h2>
 			<input type="checkbox" id="highlight"> Disable Highlight Menu
 		</label>
 
+		<label>
+			<input type="checkbox" id="hidegifs"> Hide gifs
+		</label>
+
 		<hr />
 
 		<h2>Default Features</h2>

options.js

@@ -3,10 +3,12 @@ function save_options() {
   var hideDickbar = document.getElementById('dickbar').checked;
   var disableLazyImages = document.getElementById('images').checked;
   var hideHighlightMenu = document.getElementById('highlight').checked;
+  var hideGifs = document.getElementById('hidegifs').checked;
   chrome.storage.sync.set({
     hideDickbar: hideDickbar,
     disableLazyImages: disableLazyImages,
-    hideHighlightMenu: hideHighlightMenu
+    hideHighlightMenu: hideHighlightMenu,
+    hideGifs: hideGifs
   }, function() {
     // Update status to let user know options were saved.
     var status = document.getElementById('status');
@@ -23,11 +25,13 @@ function restore_options() {
   chrome.storage.sync.get({
     hideDickbar: false,
     disableLazyImages: false,
-    hideHighlightMenu: false
+    hideHighlightMenu: false,
+    hideGifs: false
   }, function(items) {
     document.getElementById('dickbar').checked = items.hideDickbar;
     document.getElementById('images').checked = items.disableLazyImages;
     document.getElementById('highlight').checked = items.hideHighlightMenu;
+    document.getElementById('hidegifs').checked = items.hideGifs;
   });
 }
 document.addEventListener('DOMContentLoaded', restore_options);