Add popup for browser action

BrandMChaos · Nov 24, 2017 · 6ef9655 · 6ef9655
1 parent 1868d2f
commit 6ef9655
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 11 deletions.
diff --git a/background.js b/background.js
@@ -665,6 +665,26 @@ function cancelLockdown(set) {
 	gOptions[`timedata${set}`][4] = 0;
 }
 
+// Open extension page (either create new tab or activate existing tab)
+//
+function openExtensionPage(url) {
+	let fullURL = browser.extension.getURL(url);
+
+	browser.tabs.query({ url: fullURL }).then(onGot, onError);
+
+	function onGot(tabs) {
+		if (tabs.length > 0) {
+			browser.tabs.update(tabs[0].id, { active: true });
+		} else {
+			browser.tabs.create({ url: fullURL });
+		}
+	}
+
+	function onError(error) {
+		browser.tabs.create({ url: fullURL });
+	}
+}
+
 // Open page blocked by delaying page
 //
 function openDelayedPage(id, url, set) {
@@ -727,18 +747,12 @@ function addSiteToSet(url, set) {
 
 /*** EVENT HANDLERS BEGIN HERE ***/
 
-function handleClick(tab) {
-	//log("handleClick: " + tab.id);
-
-	browser.runtime.openOptionsPage();	
-}
-
 function handleMenuClick(info, tab) {
 	let id = info.menuItemId;
 	if (id == "options") {
 		browser.runtime.openOptionsPage();
 	} else if (id == "lockdown") {
-		browser.tabs.create({ url: "lockdown.html" });
+		openExtensionPage("lockdown.html");
 	} else if (id.startsWith("addSite-")) {
 		addSiteToSet(info.pageUrl, id.substr(8));
 	}
@@ -835,8 +849,6 @@ retrieveOptions();
 browser.alarms.onAlarm.addListener(handleAlarm);
 browser.alarms.create("LBNG", { periodInMinutes: TICK_TIME });
 
-browser.browserAction.onClicked.addListener(handleClick);
-
 if (browser.menus) {
 	browser.menus.onClicked.addListener(handleMenuClick);
 }

diff --git a/images/leechblock_logo_small.png b/images/leechblock_logo_small.png
diff --git a/manifest.json b/manifest.json
@@ -42,12 +42,13 @@
 	],
 
 	"browser_action": {
-		"browser_style": true,
+		"browser_style": false,
 		"default_icon": {
 			"16": "icons/leechblock16.png",
 			"32": "icons/leechblock32.png"
 		},
-		"default_title": "LeechBlock NG"
+		"default_popup": "popup.html",
+		"default_title": "LeechBlock"
 	}
 
 }
diff --git a/popup.css b/popup.css
@@ -0,0 +1,17 @@
+/* LeechBlock popup CSS style */
+
+body {
+	background-color: #fff;
+	color: #000;
+	text-align: center;
+}
+
+#button-container {
+	display: inline-block;
+}
+
+button {
+	display: inline;
+	width: 100%;
+	margin: 2px;
+}
diff --git a/popup.html b/popup.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+
+<html lang="us">
+
+	<head>
+		<meta charset="utf-8">
+		<title>LeechBlock</title>
+		<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet">
+		<link href="popup.css" rel="stylesheet">
+		<link href="icons/leechblock16.ico" rel="icon" type="image/x-icon">
+		<link href="icons/leechblock16.ico" rel="shortcut icon" type="image/x-icon">
+	</head>
+
+	<body>
+		<p><img src="images/leechblock_logo_small.png" alt="LeechBlock logo" title="LeechBlock"><p>
+		<div id="button-container" class="ui-widget">
+			<button id="options" type="button">Options</button>
+			<button id="lockdown" type="button">Lockdown</button>
+		</div>
+	    <script src="popup.js"></script>
+	</body>
+
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,41 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Open options page
+//
+function openOptions() {
+	browser.runtime.openOptionsPage();
+	window.close();
+}
+
+// Open lockdown page
+//
+function openLockdown() {
+	openExtensionPage("lockdown.html");
+}
+
+// Open extension page (either create new tab or activate existing tab)
+//
+function openExtensionPage(url) {
+	let fullURL = browser.extension.getURL(url);
+
+	browser.tabs.query({ url: fullURL }).then(onGot, onError);
+
+	function onGot(tabs) {
+		if (tabs.length > 0) {
+			browser.tabs.update(tabs[0].id, { active: true });
+		} else {
+			browser.tabs.create({ url: fullURL });
+		}
+		window.close();
+	}
+
+	function onError(error) {
+		browser.tabs.create({ url: fullURL });
+		window.close();
+	}
+}
+
+document.querySelector("#options").addEventListener("click", openOptions);
+document.querySelector("#lockdown").addEventListener("click", openLockdown);