Added a context menu, Made the options button auto hide, and Made the options menu popup the context menu.

flashfire.css

@@ -97,4 +97,44 @@
 }
 .flashfireBlocked .action:hover {
 	opacity: 0.5 !important;
+}
+
+.flashfireContextMenu {
+	position: absolute !important;
+	background-color: rgba(255, 255, 255, 0.9) !important;
+	-webkit-user-select: none !important;
+	color: #000 !important;
+	font-size: 14px !important;
+	z-index: 3 !important;
+	-webkit-box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
+	list-style: none !important;
+	border-radius: 4px !important;
+	padding: 4px 0 !important;
+	-webkit-transition-property: opacity;
+	-webkit-transition-duration: 0.15s;
+	border: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+.flashfireMenuItem {
+	padding: 2px 16px !important;
+	-webkit-user-select: none !important;
+	cursor: default !important;
+	font-weight: normal !important;
+	font-family: "Lucida Grande", Helvetica, sans-serif !important;
+}
+.flashfireMenuItem:hover {
+	background: -webkit-gradient(linear, left top, left bottom, from(rgb(94, 121, 253)), to(rgb(29, 60, 252))) !important;
+	color: #fff !important;
+	padding-top: 1px !important;
+	padding-bottom: 1px !important;
+	border-top: 1px solid rgb(84, 122, 244) !important;
+	border-bottom: 1px solid rgb(16, 39, 242) !important;
+}
+
+.flashfireMenuSeparator {
+	height: 0 !important;
+	padding: 0 !important;
+	margin: 3px 0 2px 0 !important;
+	border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
+	border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
 }

flashfire.js

@@ -36,6 +36,8 @@ function handleBeforeLoadEvent(event) {
 
 function unblockElement(event) {
 	var element = event.target;
+	if (element.className=="action" || element.className=="flashfireContextMenu" || element.className=="flashfireMenuItem" || element.className=="flashfireMenuSeparator")
+		return;
 	while (element.className!="flashfireBlocked")
 		element = element.parentNode;
 	
@@ -50,6 +52,111 @@ function unblockElement(event) {
 	event.preventDefault();
 }
 
+function unblockElementById(id) {
+	var element = document.getElementById("flasfire" + id);
+	if (element!=null) {
+		if (element.allowedToLoad)
+			return;
+		var blockedElement = elementsBlocked[id];
+		blockedElement.allowedToLoad = true;
+
+		element.parentNode.replaceChild(blockedElement, element);
+
+		event.stopPropagation();
+		event.preventDefault();
+	}
+}
+
+function unblockAllElements() {
+	for (i=0; i<elementsBlocked.length; i++) {
+		unblockElementById(i);
+	}
+}
+
+function hideElementById(id) {
+	var element = document.getElementById("flasfire" + id);
+	elementsBlocked[id].allowedToLoad = true;
+	element.parentNode.removeChild(element);
+}
+
+function displayContextMenu(event) {
+	var element = event.target;
+	var left = event.pageX;
+	var top = event.pageY;
+	console.log(event);
+	while (element.className!="flashfireBlocked")
+		element = element.parentNode;
+	
+	var elementID = element.getAttribute("elementID");
+	
+	var menuElement = document.createElement("menu");
+	menuElement.className = "flashfireContextMenu";
+	menuElement.id = "flashfireMenu" + elementID;
+	menuElement.style.left = left + "px !important";
+	menuElement.style.top = top + "px !important";
+	
+	var loadElement = document.createElement("li");
+	loadElement.className = "flashfireMenuItem";
+	loadElement.innerHTML = "Load Flash";
+	loadElement.onclick = function() {unblockElementById(elementID);}
+	menuElement.appendChild(loadElement);
+	
+	if (elementsBlocked.length>1) {
+		var loadALlElement = document.createElement("li");
+		loadALlElement.className = "flashfireMenuItem";
+		loadALlElement.innerHTML = "Load All Flash on this Page";
+		loadALlElement.onclick = function() {unblockAllElements();}
+		menuElement.appendChild(loadALlElement);
+	}
+	
+	var hideElement = document.createElement("li");
+	hideElement.className = "flashfireMenuItem";
+	hideElement.innerHTML = "Hide Flash";
+	hideElement.onclick = function() {hideElementById(elementID);}
+	menuElement.appendChild(hideElement);
+	
+	var separatorElement = document.createElement("li");
+	separatorElement.className = "flashfireMenuSeparator";
+	menuElement.appendChild(separatorElement);
+	
+	var autoLoadElement = document.createElement("li");
+	autoLoadElement.className = "flashfireMenuItem";
+	autoLoadElement.innerHTML = "Automatically Load Flash on &quot;" + window.location.host + "&quot;";
+	menuElement.appendChild(autoLoadElement);
+	
+	document.body.appendChild(menuElement);
+	
+	var closeContentMenu = function(event) {
+		var removeMenuElement = function() {
+			document.body.removeChild(menuElement);
+		}
+		document.getElementsByTagName("body")[0].removeEventListener("mousedown", closeContentMenu, false);
+		menuElement.style.opacity = "0 !important";
+		setTimeout(removeMenuElement, 150);
+	}
+	document.body.addEventListener("mousedown", closeContentMenu, false);
+	
+	var changePostition = function() {
+		if (menuElement.offsetWidth>0 && menuElement.offsetWidth>0) {
+			if ((left+menuElement.offsetWidth+20)>=window.innerWidth) {
+				menuElement.style.left = left-menuElement.offsetWidth-10 + "px !important";
+				document.body.removeChild(menuElement);
+				document.body.appendChild(menuElement);
+			}
+			
+			if ((top+menuElement.offsetHeight+30)>=window.innerHeight) {
+				menuElement.style.top = top-menuElement.offsetHeight-10 + "px !important";
+				document.body.removeChild(menuElement);
+				document.body.appendChild(menuElement);
+			}
+		} else {
+			setTimeout(changePostition, 100);
+		}
+	};
+	changePostition();
+	return false;
+}
+
 function blockElement(element) {
 	if (element.getAttribute("elementID")!=null)
 		return;
@@ -61,11 +168,13 @@ function blockElement(element) {
 	
 	var flashfireBlockedDiv = document.createElement("div");
 	flashfireBlockedDiv.setAttribute("elementID", elementID);
+	flashfireBlockedDiv.id = "flasfire" + elementID;
 	flashfireBlockedDiv.style = element.style;
 	flashfireBlockedDiv.style.width = element.offsetWidth + "px";
 	flashfireBlockedDiv.style.height = element.offsetHeight + "px";
 	flashfireBlockedDiv.className = "flashfireBlocked";
 	flashfireBlockedDiv.onclick = unblockElement;
+	flashfireBlockedDiv.oncontextmenu = displayContextMenu;
 	
 	var flashfireContainerDiv = document.createElement("div");
 	flashfireContainerDiv.className = "container";
@@ -93,6 +202,7 @@ function blockElement(element) {
 	
 	var flashfireActionDiv = document.createElement("div");
 	flashfireActionDiv.className = "action";
+	flashfireActionDiv.onclick = displayContextMenu;
 	flashfireContainerDiv.appendChild(flashfireActionDiv);
 	
 	setTimeout(function(){element.parentNode.replaceChild(flashfireBlockedDiv, element);}, 5);
@@ -107,8 +217,11 @@ function blockElement(element) {
 				flashfireHDiv.style.width = 17;
 			}
 			if ((flashfireBlockedDiv.offsetWidth - 2) <= flashfireHDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 17) <= flashfireTextDiv.offsetHeight) {
-				flashfireHDiv.style.width = "inherit";
 				flashfireTextContainerDiv.style.display = "none";
+				flashfireHDiv.style.width = "inherit";
+			}
+			if ((flashfireBlockedDiv.offsetWidth - 21) <= flashfireActionDiv.offsetWidth || (flashfireBlockedDiv.offsetHeight - 21) <= flashfireActionDiv.offsetHeight) {
+				flashfireActionDiv.style.display = "none";
 			}
 		} else {
 			setTimeout(changeSize, 100);