Add Fullscreen feature

  Thanks to @nt1m for figuring out how to implement this using
the `browser.windows` API in pull request #3.

# TODO:
- Make the Fullscreen icon dynamic in the Photon theme.

Author: ExE-Boss

src/_locales/en/messages.json

@@ -78,5 +78,8 @@
 	"popup_helpAbout":	{ "message":	"About Firefox"	},
 
 	"options_header":	{ "message":	"Options"	},
-	"options_theme":	{ "message":	"Theme:"	}
+	"options_theme":	{ "message":	"Theme:"	},
+	"options_preferredWindowState":	{ "message":	"Preferred window state:"	},
+	"options_preferredWindowState_maximized":	{ "message":	"Maximized"	},
+	"options_preferredWindowState_normal":	{ "message":	"Normal window"	}
 }

src/background.js

@@ -16,6 +16,8 @@
  */
 /* global browser */
 
+let prevStates = new Map();
+
 (async function() {
 	let themeDir = (await browser.storage.sync.get({
 		theme: await getDefaultTheme()
@@ -92,7 +94,11 @@ var tabHandler = (function() {
  */
 async function handlePopupMessage(message) {
 	let method = String(message.method);
-	let tab = (await browser.tabs.query({ active: true, windowId: browser.windows.WINDOW_ID_CURRENT }))[0];
+	let window, tab;
+	[window, tab] = await Promise.all([
+		browser.windows.getCurrent(),
+		browser.tabs.query({ active: true, currentWindow: true }).then(tabs => tabs[0])
+	]);
 	switch (method) {
 		case "init": {
 			let response;
@@ -119,6 +125,7 @@ async function handlePopupMessage(message) {
 					"emailLink",
 					"devGetTools",
 					"openAddons",
+					"fullscreen",
 					"openHelp*"
 				]
 			};
@@ -170,6 +177,18 @@ async function handlePopupMessage(message) {
 			if (browser.tabs.print) {
 				return browser.tabs.print();
 			}
+		} case "fullscreen": {
+			let prevState	= window.state;
+			let newState	= prevStates.get(window.id);
+			newState	= (newState && newState !== "fullscreen" ? newState : browser.storage.sync.get({preferredWindowState: "maximized"}));
+			if (newState instanceof Promise) {
+				newState = (await newState).preferredWindowState;
+			}
+			let result = await browser.windows.update(window.id, {
+				state: window.state === "fullscreen" ? newState : "fullscreen"
+			});
+			prevStates.set(window.id, prevState);
+			return result;
 		} default: {
 			if (method.startsWith("openHelp")) {
 				let browserInfo;

src/content/content.js

@@ -38,21 +38,6 @@ if (!amLoaded) {
 					result.enable.push("edit*");
 				}
 				return result;
-			} case "fullscreen": {
-				if (window.fullScreen) {
-					if (document.exitFullscreen) {
-						return document.exitFullscreen();
-					} else {
-						return document.mozCancelFullScreen();
-					}
-				} else {
-					if (document.documentElement.requestFullScreen) {
-						return document.documentElement.requestFullScreen();
-					} else {
-						return document.documentElement.mozRequestFullScreen();
-					}
-				}
-				return;
 			} case "editCut": {
 				return document.execCommand("cut");
 			} case "editCopy": {

src/options/options.js

@@ -23,11 +23,24 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 async function initOptions() {
 	let themes = ["photon", "australis", "classic", "pastel-svg", "aero"];
-	let currentTheme = (await browser.storage.sync.get({
-		theme: await getDefaultTheme()
-	})).theme;
+	let data = (await browser.storage.sync.get({
+		theme: await getDefaultTheme(),
+		preferredWindowState:	"maximized"
+	}));
+	let currentTheme = data.theme;
 	let themeSelector = document.querySelector("#theme");
 
+	let preferredWindowStateSelector = document.querySelector("#fullscreenExitState");
+	for (let i = 0; i < preferredWindowStateSelector.length; i++) {
+		let option = preferredWindowStateSelector.item(i);
+		if (option.value === data.preferredWindowState) {
+			preferredWindowStateSelector.selectedIndex = i;
+			option.setAttribute("selected", true);
+		} else {
+			option.selected = false;
+		}
+	}
+
 	for (let t of themes) {
 		try {
 			let response = await fetch(`/themes/${t}/theme.json`);
@@ -87,10 +100,10 @@ async function initOptions() {
 		select.addEventListener("change", evt => {
 			if (select.selectedIndex >= 0) {
 				let selectedOption = select.item(select.selectedIndex);
-				let themeDir = select.item(select.selectedIndex).value;
-				browser.storage.sync.set({
-					theme: themeDir
-				});
+				let value = select.item(select.selectedIndex).value;
+				let data = {};
+				data[select.dataset.save] = value;
+				browser.storage.sync.set(data);
 //				if (selectedOption.dataset.icon) {
 //					select.style.cssText = `
 //	background-image:	url("${selectedOption.dataset.icon}"), url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KICA8cGF0aCBkPSJNOCwxMkwzLDcsNCw2bDQsNCw0LTQsMSwxWiIgZmlsbD0iIzZBNkE2QSIgLz4KPC9zdmc+Cg==) !important;
@@ -102,26 +115,28 @@ async function initOptions() {
 //					select.removeAttribute("style");
 //				}
 
-				fetch(`/themes/${themeDir}/theme.json`).then(r => r.json()).then(config => {
-					let extension = config.default_extension || "svg";
-					if (config.browser_action) {
-						let path = {};
-						for (let k in config.browser_action) {
-							path[k] = `/themes/${themeDir}/${config.browser_action[k].includes('.') ?
-							config.browser_action[k] : config.browser_action[k] + '.' + extension}`
+				if (select.dataset.save === "theme") {
+					fetch(`/themes/${value}/theme.json`).then(r => r.json()).then(config => {
+						let extension = config.default_extension || "svg";
+						if (config.browser_action) {
+							let path = {};
+							for (let k in config.browser_action) {
+								path[k] = `/themes/${value}/${config.browser_action[k].includes('.') ?
+								config.browser_action[k] : config.browser_action[k] + '.' + extension}`
+							}
+							browser.browserAction.setIcon({path: path});
+						} else {
+							browser.browserAction.setIcon({path: `/themes/${value}/firefox.${extension}`});
 						}
-						browser.browserAction.setIcon({path: path});
-					} else {
-						browser.browserAction.setIcon({path: `/themes/${themeDir}/firefox.${extension}`});
-					}
-				});
+					});
+				}
 			}
 		});
 	});
 }
 
 async function i18nInit() {
-	document.querySelectorAll("label[for]").forEach(translatable => {
+	document.querySelectorAll("label[for]:not([data-i18n])").forEach(translatable => {
 		let text = browser.i18n.getMessage(`options_${translatable.getAttribute("for")}`);
 		if (text.length > 0)
 			translatable.textContent = text;

src/options/options.xhtml

@@ -31,6 +31,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 		<div class="options-grid browser-style">
 			<label for="theme" class="browser-style"/>
 			<select id="theme" data-save="theme" class="browser-style"/>
+
+			<label data-i18n="options_preferredWindowState" for="fullscreenExitState" class="browser-style"/>
+			<select id="fullscreenExitState" data-save="preferredWindowState" class="browser-style">
+				<option value="maximized" data-i18n="options_preferredWindowState_maximized" selected="true"/>
+				<option value="normal" data-i18n="options_preferredWindowState_normal"/>
+			</select>
 		</div>
 	</body>
 </html>

src/popup/popup.js

@@ -29,6 +29,10 @@ document.addEventListener("DOMContentLoaded", () => {
 	]);
 });
 
+async function loadSpecialIcons() {
+	// TODO: Handle dynamic icons (ex. fullscreen)
+}
+
 async function loadIcons() {
 	let themeDir = (await browser.storage.sync.get({
 		theme: await getDefaultTheme()

src/popup/popup.xhtml

@@ -89,7 +89,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 				</div>
 				<div class="panel-section-separator"/>
 				<div class="panel-list-item" data-ipc-message="fullscreen">
-					<i class="eb-icon-placeholder" data-icon="fullscreen"/>
+					<i class="eb-icon-placeholder" data-icon="fullscreen" data-icon-special="fullscreen"/>
 					<div class="text" data-i18n="popup_fullScreen"/>
 					<div class="text-shortcut">
 						F11