Added iframe support to get the true count for a tab

gilmoreorless · gilmoreorless · commit 369986632ff0 · 2018-12-29T10:21:51.000+11:00
diff --git a/browser-extension/background.js b/browser-extension/background.js
@@ -103,6 +103,36 @@ if (typeof browser === 'undefined') {
 
 ///// ICON BADGING /////
 
+class MappyMap extends Map {
+	get(key) {
+		let value = super.get(key);
+		return value || new Map();
+	}
+}
+
+var tabCounts = new MappyMap();
+
+function addTabFrameCount(tabId, frameId, count) {
+	var tabFrames = tabCounts.get(tabId);
+	tabFrames.set(frameId, count);
+	tabCounts.set(tabId, tabFrames);
+}
+
+function resetTabCount(tabId) {
+	if (tabCounts.has(tabId)) {
+		tabCounts.set(tabId, new Map());
+	}
+}
+
+function getTabCount(tabId) {
+	var count = 0
+	var tabFrames = tabCounts.get(tabId);
+	for (let frameCount of tabFrames.values()) {
+		count += frameCount;
+	}
+	return count;
+}
+
 function getCountText(count) {
 	if (count <= 999) {
 		return count.toString();
@@ -125,10 +155,11 @@ function setBadgeColor(tabId, color) {
 	});
 }
 
-function setTotalCount(tabId, count) {
-	log('setTotalCount', tabId, count);
+function setTotalCount(tabId, frameId, count) {
+	log('setTotalCount', { tabId, frameId, count });
 	setBadgeColor(tabId, colors.good);
-	setBadgeCount(tabId, state.isCensoringActive ? count : '');
+	addTabFrameCount(tabId, frameId, count);
+	setBadgeCount(tabId, state.isCensoringActive ? getTabCount(tabId) : '');
 }
 
 
@@ -167,16 +198,25 @@ function contentScriptMessageHandler(request, sender, sendResponse) {
 				sendResponse({ isActive: state.isCensoringActive });
 				break;
 			case 'totalRedacted':
-				setTotalCount(sender.tab.id, request.count);
+				setTotalCount(sender.tab.id, sender.frameId, request.count);
 				break;
 		}
 	}
 }
 
+function tabLoadingHandler(tabId, changeInfo) {
+	log('tabLoadingHandler', tabId, changeInfo);
+	// Reset counts when a tab loads a new page, to ensure old iframe counts are cleared
+	if (changeInfo.status === 'loading') {
+		resetTabCount(tabId);
+	}
+}
+
 browser.runtime.onMessage.addListener(contentScriptMessageHandler);
 browser.tabs.onActivated.addListener(function (activeInfo) {
 	ensureTabStatus(activeInfo.tabId);
 });
+browser.tabs.onUpdated.addListener(tabLoadingHandler);
 
 log('--- event page loaded ---');
 restoreState();
@@ -195,6 +235,13 @@ function toggleStatus() {
 	browser.browserAction.setTitle({
 		title: actionTitle[state.isCensoringActive ? 'active' : 'inactive']
 	});
+	if (state.isCensoringActive) {
+		log('===ADD===')
+		browser.tabs.onUpdated.addListener(tabLoadingHandler);
+	} else {
+		log('===REMOVE===')
+		browser.tabs.onUpdated.removeListener(tabLoadingHandler);
+	}
 	saveState();
 }
 
diff --git a/browser-extension/emoji-censor-comms.js b/browser-extension/emoji-censor-comms.js
@@ -36,6 +36,7 @@ function log(...args) {
 	var now = new Date();
 	var stamp = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad).join(':');
 	args.unshift('%c[emoji-censor ' + stamp + ']', 'color:#999');
+	args.push(window.frameElement);
 	console.log(...args);
 }
 
diff --git a/browser-extension/manifest.json b/browser-extension/manifest.json
@@ -21,7 +21,8 @@
 	},
     "content_scripts": [{
 		"matches": ["*://*/*"],
-		"js": ["emoji-censor.js", "emoji-censor-comms.js"]
+		"js": ["emoji-censor.js", "emoji-censor-comms.js"],
+		"all_frames": true
 	}],
 	"permissions": [
 		"*://*/*"
diff --git a/test-iframe.html b/test-iframe.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Emoji Censor tests — iframe</title>
+	<link href="https://fonts.googleapis.com/css?family=Noto+Sans&amp;subset=devanagari" rel="stylesheet">
+	<style>
+		body {
+			font-family: 'Noto Sans', sans-serif;
+		}
+	</style>
+</head>
+<body>
+	<h3>This is inside an iframe</h3>
+	<h3>✂ Copy and 📋 Paste Emoji 👍 No apps required</h3>
+	<p>Emojis are supported on iOS, Android, macOS, Windows, and Linux. Copy and paste emojis to use on Twitter, Facebook, Slack, Instagram, Snapchat, Tumblr and more. Use Emoji Classic for older systems. ⤵️ Jump to:</p>
+
+	<p>😃💁 People • 🐻🌻 Animals • 🍔🍹 Food • 🎷⚽️ Activities • 🚘🌇 Travel • 💡🎉 Objects • 💖🔣 Symbols • 🎌🏳️‍🌈 Flags</p>
+	<cite>—<a href="http://getemoji.com/">getemoji.com</a></cite>
+</body>
+</html>
diff --git a/test.html b/test.html
@@ -8,6 +8,11 @@
 		body {
 			font-family: 'Noto Sans', sans-serif;
 		}
+		iframe {
+			float: right;
+			height: 200px;
+			width: 50%;
+		}
 		.actions button {
 			background: #eee;
 			border: 1px solid;
@@ -47,6 +52,7 @@
 		<li>Most definitely using ZWJ: 👨‍👨‍👧‍👧
 	</ul>
 	<hr>
+	<iframe src="test-iframe.html"></iframe>
 	<blockquote>
 		<h3>✂ Copy and 📋 Paste Emoji 👍 No apps required</h3>
 		<p>Emojis are supported on iOS, Android, macOS, Windows, and Linux. Copy and paste emojis to use on Twitter, Facebook, Slack, Instagram, Snapchat, Tumblr and more. Use Emoji Classic for older systems. ⤵️ Jump to:</p>

Original file line number	Diff line number	Diff line change
`@@ -36,6 +36,7 @@ function log(...args) {`
`36`	`36`	`var now = new Date();`
`37`	`37`	`var stamp = [now.getHours(), now.getMinutes(), now.getSeconds()].map(pad).join(':');`
`38`	`38`	`args.unshift('%c[emoji-censor ' + stamp + ']', 'color:#999');`
	`39`	`+ args.push(window.frameElement);`
`39`	`40`	`console.log(...args);`
`40`	`41`	`}`
`41`	`42`