Improved blocking code

- Added ability to block for multiple reasons
- Added ability to remove blocks (by selecting the command from the menu
  again)
- Sub-menu is built dynamically. Yay! ...every time... boo.

Author: Nicole Borrelli

README.txt

@@ -2,13 +2,13 @@ Safety Duck
 
 Safety Duck is a Firefox extension that allows for the tagging of images that may cause various "triggers", and hides them when they are references on a web page.
 
-It actually allows tagging of images with the "personal" reason currently, but no way to untag, or to tag for any other reason.
+Supports a "dynamic" list of rules/channels/reasons for an image to be blocked.  This is currently coded into the safetyduck object as an array, but is easily changed to read the data from elsewhere.
+When an image is blocked for a reason/channel, the name is checked in the popup menu.
+Images can be blocked for multiple reasons and will be displayed once all the reasons are removed.
 
 TODO:
-Have the blocking be reversible.
-Have the sub-menu checkbox get checked for each reason the image is blocked.
-If an image is no longer blocked for any reason, show it again.
-
-After this it gets tricky...
+Decide on terminology... >_>  And then refactor some of the code to be consistent
+Build the preferences interface so that channels can be added there.
+Include a way to "watch" channels, so that images can be flagged but still visible.
 Build a way to have local + remote blacklists.
 Build a local whitelist(?) for images blocked remotely that the user wants to see.

chrome/content/ff-overlay.js

@@ -5,7 +5,7 @@ Components.utils.import("resource://gre/modules/NetUtil.jsm");
 safetyduck.addBlock = function(url, category) {
 	  // Check to see if the url is in the list already
 	  var entry = this.mHashMap[url];
-	  if (entry == null || !isArray(entry)) {
+	  if (entry == null || !Array.isArray(entry)) {
 		  // If it's not an array, or doesn't exist at all, make sure it does
 		  entry = [];
 	  }
@@ -16,6 +16,30 @@ safetyduck.addBlock = function(url, category) {
 	  this.mHashMap[url] = entry;
 };
 
+safetyduck.removeBlock = function(img, category) {
+	// Get the url
+	var url = img.getAttribute("safetyduck-original-src");
+	
+	// Check to see if the url is in the list already
+	var entry = this.mHashMap[url];
+	if (entry == null || !Array.isArray(entry)) {
+		// If it's not an array, or doesn't exist at all, make sure it does
+		this.mHashMap[url] = [];
+		  
+		// If it's empty though, this can't be removed...
+		return;
+	}
+	  
+	// Find the index & remove it
+	var catIndex = entry.indexOf(category);
+	if (catIndex >= 0) {
+		entry.splice(catIndex, 1);
+	}
+	
+	// And remove the attribute from the object itself
+	img.setAttribute(safetyduck.channelNameToAttribute(category), "false");
+};
+
 safetyduck.loadBlacklist = function(source) {
 	// Save "this"
 	var thisSafetyDuck = this;
@@ -76,14 +100,112 @@ safetyduck.onFirefoxUnload = function(event) {
 }
 
 safetyduck.showFirefoxContextMenu = function(event) {
-  // show or hide the menuitem based on what the context menu is on
-  document.getElementById("safetyduck-menu").hidden = !gContextMenu.onImage;
+	// helpful short name
+	const XUL_NAMESPACE = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+	
+	// show or hide the menuitem based on what the context menu is on
+	if (!gContextMenu.onImage) {
+		// Not an image, hide and exit
+		document.getElementById("safetyduck-menu").hidden = true;
+		return;
+	}
+	
+	// On an image, show the item
+	document.getElementById("safetyduck-menu").hidden = false;
+	
+	// The image the context menu is for
+	var contextImage = document.popupNode;
+	
+	// Get the menu
+	var subMenuRoot = document.getElementById("safetyduck-popup");
+	
+	// Clear it
+	while (subMenuRoot.hasChildNodes()) {
+		subMenuRoot.removeChild(subMenuRoot.firstChild);
+	}
+	
+	// Build the menu
+	var channels = safetyduck.channels();
+	var channel = channels.next();
+	while (channel != null) {
+		// Build a child element and set attributes
+		var child = document.createElementNS(XUL_NAMESPACE, "menuitem");
+		child.setAttribute("type", "checkbox");
+
+		// Since text-transform is currently broken for XUL files (Bug 101800) do that transform here
+		var channelLabel = channel.toLowerCase().replace(/^(.)|\s(.)/g, function($1) { return $1.toUpperCase(); });
+		child.setAttribute("label", channelLabel);
+		
+		// Is this image blocked for this reason?
+		var attr = safetyduck.channelNameToAttribute(channel);
+		var value = contextImage.getAttribute(attr);
+		child.setAttribute("checked", (value == "true"));
+		
+		// Attach the command
+		child.addEventListener("command", function(cmd) { safetyduck.onMenuItemCommand(cmd.target.label.toLowerCase()); }, true);
+		
+		// Add it to the list
+		subMenuRoot.appendChild(child);
+		
+		// Next
+		channel = channels.next();
+	}
 };
 
+safetyduck.showImage = function(img) {
+	// Is the image blocked?
+	if (img.src != "chrome://safetyduck/content/images/blank.png") {
+		// No?
+		return;
+	}
+	
+	// Get the original image url
+	var originalSrc = img.getAttribute("safetyduck-original-src");
+	if (originalSrc == null || originalSrc.length == 0) {
+		// ???
+		return;
+	}
+
+	// Are there additional reasons for this image to be blocked?
+	if (safetyduck.isBlocked(originalSrc)) {
+		// Yes, don't show it
+		Log("Image '" + originalSrc + "' is still blocked for: '" + JSON.stringify(safetyduck.mHashMap[originalSrc]));
+		return;
+	}
+	
+	// Save the height and width
+	var height = img.height;
+	var width = img.width;
+	
+	// Replace the image and reset the height & width
+	img.src = originalSrc;
+	img.width = width;
+	img.height = height;
+}
+
 safetyduck.replaceImage = function(img) {
-	// Fetch the original URL and save it in the object for later
-	img.safetyduck = {};
-	img.safetyduck.src = img.src;
+	// Save meta data to the img object as attributes
+	var originalSrc = img.getAttribute("safetyduck-original-src");
+	if (originalSrc == null || originalSrc.length == 0) {
+		// Save the original source only... not the src to the image used as filler
+		img.setAttribute("safetyduck-original-src", img.src);
+		
+		// Set the variable so it can be useful now
+		originalSrc = img.src;
+	}
+	
+	// Get the reasons why the image is blocked
+	var reasons = safetyduck.getBlocks(originalSrc);
+	if (reasons.length == 0) {
+		// Image isn't blocked?
+		return;
+	}
+	
+	// Add block reasons
+	for (var [key, value] in Iterator(reasons)) {
+		img.setAttribute(safetyduck.channelNameToAttribute(value), "true");
+		Log("Add block for: " + safetyduck.channelNameToAttribute(value))
+	}
 
 	// Save the height and width
 	var height = img.height;
@@ -107,17 +229,39 @@ safetyduck.onPageLoad = function(loadEvent) {
 		var anImg = docImages[i];
 
 		// Blocked?
+		Log("Check for block on: " + anImg.src);
 		if (safetyduck.isBlocked(anImg.src)) {
 			// Hide it
+			Log("Image blocked: " + anImg.src);
 			safetyduck.replaceImage(anImg);
 		}
 	}
 }
 
 safetyduck.onMenuItemCommand = function(category) {
-	// document.popupNode is the image element that was clicked
-	this.addBlock(document.popupNode.src, category);
-	this.replaceImage(document.popupNode);
+	// The image
+	var contextImage = document.popupNode;
+	// And it's url
+	var imageSrc = contextImage.src;
+	
+	// Is it blocked already?
+	if (contextImage.getAttribute("safetyduck-original-src") != null) {
+		// Yes.  So, don't use this url, use the original source
+		imageSrc = contextImage.getAttribute("safetyduck-original-src");
+	}
+	
+	Log("Command on '" + imageSrc + "' => :" + category + ":");
+	
+	// Is the item being blocked or unblocked?
+	if (safetyduck.isBlockedFor(imageSrc, category)) {
+		// Unblock the image (for this reason)
+		this.removeBlock(contextImage, category);
+		this.showImage(contextImage);
+	} else {
+		// Block the image
+		this.addBlock(imageSrc, category);
+		this.replaceImage(contextImage);
+	}
 }
 
 

chrome/content/ff-overlay.xul

@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <?xml-stylesheet href="chrome://safetyduck/skin/overlay.css" type="text/css"?>
+
 <!DOCTYPE overlay SYSTEM "chrome://safetyduck/locale/overlay.dtd">
 <overlay id="safetyduck-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script src="overlay.js"/>
-  <script src="ff-overlay.js"/>
-
+  <script src="overlay.js" type="application/javascript;version=1.8" />
+  <script src="ff-overlay.js" type="application/javascript;version=1.8" />
+  
   <stringbundleset id="stringbundleset">
     <stringbundle id="safetyduck-strings" src="chrome://safetyduck/locale/overlay.properties"/>
   </stringbundleset>
 
   <popup id="contentAreaContextMenu">
     <menu id="safetyduck-menu"
-          insertafter="context-stop"
+          insertafter="context-viewimageinfo"
           label="&safetyduckContext.label;"
           accesskey="&safetyduckContext.accesskey;">
       <menupopup id="safetyduck-popup">
-      	<menuitem label="&safetyduckContext.label.personal;" type="checkbox" oncommand="safetyduck.onMenuItemCommand('personal')"/>
       </menupopup>
     </menu>
   </popup>

chrome/content/overlay.js

@@ -1,7 +1,23 @@
+function Log(msg) {
+	  var aConsoleService = Components.classes["@mozilla.org/consoleservice;1"].
+	  	getService(Components.interfaces.nsIConsoleService);
+	  aConsoleService.logStringMessage(msg);
+}
+
 var safetyduck = {
   // Object to be used for tracking images to replace in the DOM
   mHashMap : {},
 
+  // List of "channels" - should be built from preferences
+  mChannels : [ "death", "personal" ],
+  
+  channels : function() {
+	  for (var [key, value] in Iterator(safetyduck.mChannels)) {
+		  yield value;
+	  }
+	  yield null;
+  },
+  
   onLoad: function() {
     // initialization code
     this.initialized = true;
@@ -16,7 +32,24 @@ var safetyduck = {
 
   isBlocked: function(url) {
 	  // Simple check to see if the url is in the list of blocked items
-	  return (url in this.mHashMap);
+	  return (url in this.mHashMap && this.mHashMap[url].length > 0);
+  },
+  
+  isBlockedFor: function(url, category) {
+	  return (this.isBlocked(url) ? this.mHashMap[url].indexOf(category) >= 0 : false);
+  },
+  
+  getBlocks: function(url) {
+	  return (this.isBlocked(url)) ? this.mHashMap[url] : [];
+  },
+
+  /**
+   * Converts a blocked channel name to a attribute name
+   * @param name The name of the channel (ex: "injured wings")
+   * @return The attribute name (ex: safetyduck-block-injured-wings)
+   */
+  channelNameToAttribute : function(name) {
+		return "safetyduck-block-" + name.toLowerCase().replace(/ /g,'-');
   }
 };
 

chrome/skin/overlay.css

@@ -1,22 +1,4 @@
-/* This is just an example.  You shouldn't do this. */
-#safetyduck-hello
-{
-  color: red ! important;
-}
-#safetyduck-toolbar-button
-{
-  list-style-image: url("chrome://safetyduck/skin/toolbar-button.png");
-  -moz-image-region: rect(0px 24px 24px 0px);
-}
-#safetyduck-toolbar-button:hover
-{
-  -moz-image-region: rect(24px 24px 48px  0px);
-}
-[iconsize="small"] #safetyduck-toolbar-button
-{
-  -moz-image-region: rect( 0px 40px 16px 24px);
-}
-[iconsize="small"] #safetyduck-toolbar-button:hover
-{
-  -moz-image-region: rect(24px 40px 40px 24px);
-}
+#safetyduck-popup menuitem {
+	-moz-appearance: none;
+	text-transform: capitalize;
+}