Added some anonymous analytics tracking

extensions/chrome/background.html

@@ -1,4 +1,5 @@
 <script src="dnd_feedback.js"></script>
 <script src="xv.js"></script>
 <script src="background.js"></script>
+<script async src="https://www.google-analytics.com/analytics.js"></script>
 <textarea id="ta"></textarea>

extensions/chrome/background.js

@@ -13,12 +13,18 @@ function loadXsl(url) {
 	xhr.send();
 }
 
+// Do some analytics
+window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+ga('create', 'UA-21435223-1', 'auto');
+ga('set', 'checkProtocolTask', null);
+
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 	switch (request.action) {
 		case 'xv.get-dnd-feedback':
 			sendResponse({ image: xv_dnd_feedback.draw(request.text) });
 			break;
 		case 'xv.copy':
+			ga('send', 'event', 'Interaction', 'Copy tag');
 			var ta = document.getElementById('ta');
 			ta.value = request.text;
 			ta.select();
@@ -44,6 +50,9 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 		case 'xv.hide-page-action':
 			chrome.pageAction.hide(sender.tab.id);
 			break;
+		case 'xv.analytics':
+			ga('send', 'event', request.category, request.event, request.label);
+			break;
 	}
 });
 
@@ -87,7 +96,17 @@ function removeForcedUrl(url) {
 chrome.pageAction.onClicked.addListener(function (tab) {
 	// toggle forced XV display for current url
 	getForcedUrls().then(urls => {
-		const promise = urls.includes(tab.url) ? removeForcedUrl(tab.url) : addForcedUrl(tab.url);
+		const m = (tab.url || '').match(/^\w+:/);
+		const protocol = m && m[0];
+		let promise;
+
+		if (urls.includes(tab.url)) {
+			ga('send', 'event', 'Page Action', 'Disable', protocol);
+			promise = removeForcedUrl(tab.url);
+		} else {
+			ga('send', 'event', 'Page Action', 'Enable', protocol);
+			promise = addForcedUrl(tab.url);
+		}
 
 		promise.then(() => chrome.tabs.reload(tab.id));
 	});

extensions/chrome/controller.js

@@ -103,7 +103,35 @@ function handleDndClicks() {
 	}, false);
 }
 
+function track(category, event) {
+	sendMessage({ action: 'xv.analytics', category, event });
+}
+
+const trackSearch = _.throttle(() => track('Main', 'Search by XPath'), 1000);
+const trackingEventHandler = {
+	handleEvent(evt) {
+		if (evt.type === 'input' && hasClass(evt.target, 'xv-search-field')) {
+			trackSearch();
+		} else if (evt.type === 'click') {
+			if (hasClass(evt.target, 'xv-outline-close')) {
+				track('Main', 'Hide outline');
+			} else if (evt.target.closest('.xv-outline-node')) {
+				track('Main', 'Click on outline node');
+			} else if (evt.target.closest('.xv-tag')) {
+				track('Main', 'Click on main node');
+			} else if (evt.target.closest('.xv-outline-collapsed')) {
+				track('Main', 'Show outline');
+			}
+		}
+	}
+}
+
+function hasClass(elem, className) {
+	return elem && elem.classList.contains(className);
+}
+
 function doTransform(data) {
+	track('Main', 'Render page');
 	// future checks:
 	// https://bugs.webkit.org/show_bug.cgi?id=56263
 	// typeof(window['handleWebKitXMLViewerOnLoadEvent'])
@@ -147,6 +175,10 @@ function doTransform(data) {
 
 				// handle clicks to copy xpath
 				handleDndClicks();
+
+				// Track UI events
+				document.addEventListener('input', trackingEventHandler);
+				document.addEventListener('click', trackingEventHandler);
 			});
 		}
 	);

extensions/chrome/manifest.json

@@ -26,6 +26,7 @@
 		"matches": ["http://*/*", "https://*/*", "file://*/*"],
 		"run_at": "document_start"
 	}],
+	"content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'self'",
 	"web_accessible_resources": ["xv.css"],
 
 	"page_action": {

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
-		"chrome": "gulp chrome"
+		"chrome": "gulp chrome",
+		"watch": "gulp watch"
   },
   "repository": {
     "type": "git",

src/outline_ui.js

@@ -201,7 +201,7 @@
 	function collapseOutline() {
 		xv_dom.addClass(pane, 'xv-outline-collapsed');
 		pane.style.width = '';
-		xv_dom.setCSS(source_pane, {right: pane.offsetWidth});
+		xv_dom.setCSS(source_pane, {right: 22});
 		xv_settings.setValue('outline.collapsed', true);
 	}