Add: customIcon, customIconColor options (eight04#33)

yfdyh000 · Dec 13, 2017 · df88c83 · df88c83
1 parent 26a9eca
commit df88c83
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 1 deletion.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -31,6 +31,14 @@
 		"message": "Also add \"Pick Images...\" actions to contextmenu",
 		"description": "Label of contextMenu option"
 	},
+	"optionCustomIconLabel": {
+		"message": "Customize the color of toolbar button",
+		"description": "Label of customIcon option"
+	},
+	"optionCustomIconColorLabel": {
+		"message": "Icon color",
+		"description": "Label of customIconColor option"
+	},
 	"optionUseCacheLabel": {
 		"message": "Try to download images from browser cache",
 		"description": "Label of useCache option"

diff --git a/background/background.js b/background/background.js
@@ -172,6 +172,85 @@ pref.ready().then(() => {
 	});
 });
 
+// setup dynamic icon
+const icon = createDynamicIcon({
+	file: "/icon.svg",
+	enabled: () => pref.get("customIcon"),
+	onupdate: svg => svg.replace(/context-fill(?!-)/g, pref.get("customIconColor"))
+});
+pref.ready().then(() => {
+	icon.update();
+	pref.onChange(change => {
+		if (change.customIcon != null || change.customIconColor != null) {
+			icon.update();
+		}
+	});
+});
+
+function createDynamicIcon({file, enabled, onupdate}) {
+	const SIZES = [16, 32, 64];
+	let pendingSVG;
+	let context;
+	let cache;
+
+	function getSVG() {
+		if (!pendingSVG) {
+			pendingSVG = fetch(file).then(r => r.text());
+		}
+		return pendingSVG;
+	}
+
+	function getContext() {
+		if (!context) {
+			const canvas = document.createElement("canvas");
+			context = canvas.getContext("2d");
+		}
+		return context;
+	}
+
+	function update() {
+		if (!enabled()) {
+			cache = null;
+			browser.browserAction.setIcon({path: file});
+			return;
+		}
+		getSVG().then(svg => {
+			svg = onupdate(svg);
+			if (svg === cache) {
+				return;
+			}
+			cache = svg;
+			loadImage(svg).then(setIcon);
+		});
+	}
+
+	function setIcon(img) {
+		const ctx = getContext();
+		const imageData = {};
+		for (const size of SIZES) {
+			ctx.clearRect(0, 0, size, size);
+			ctx.drawImage(img, 0, 0, size, size);
+			imageData[size] = ctx.getImageData(0, 0, size, size);
+		}
+		browser.browserAction.setIcon({imageData});
+	}
+
+	function loadImage(svg) {
+		return new Promise((resolve, reject) => {
+			const img = new Image;
+			img.src = `data:image/svg+xml;charset=utf8;base64,${btoa(svg)}`;
+			img.onload = () => {
+				resolve(img);
+			};
+			img.onerror = () => {
+				reject();
+			};
+		});
+	}
+
+	return {update};
+}
+
 // inject content/pick-images.js to the page
 function pickImages(tabId, frameId = 0) {
 	return browser.tabs.executeScript(tabId, {

diff --git a/lib/pref.js b/lib/pref.js
@@ -5,6 +5,8 @@ var pref = function(){
 		browserAction: "PICK_FROM_CURRENT_TAB",
 		closeTabsAfterSave: false,
 		contextMenu: true,
+		customIcon: false,
+		customIconColor: "#000000",
 		dragndrop: true,
 		downloadButton: false,
 		downloadButtonDelay: 0,

diff --git a/options/options.css b/options/options.css
@@ -49,7 +49,7 @@ fieldset[disabled] input {
 .checkbox > input,
 .checkbox > label,
 .checkbox > label::before,
-.checkbox > label > span {
+.checkbox > label > * {
 	vertical-align: middle;
 }
 .checkbox-supplement {
@@ -81,3 +81,11 @@ fieldset[disabled] input {
 	height: auto;
 	margin: 4px 0;
 }
+
+.color {
+	display: flex;
+	align-items: center;
+}
+.color > :not(:first-child) {
+	margin-left: 8px;
+}
diff --git a/options/options.html b/options/options.html
@@ -13,6 +13,19 @@
 	<form>
 		<div class="form-group">
 			<h3 class="form-group-head" data-i18n="optionGeneralTitle"></h3>
+			<div class="checkbox browser-style">
+				<input type="checkbox" id="customIcon">
+				<label for="customIcon">
+					<span data-i18n="optionCustomIconLabel"></span>
+					<a href="https://github.com/eight04/image-picka#icon-color" data-i18n="optionLearnMoreLink"></a>
+				</label>
+				<fieldset class="checkbox-supplement">
+					<div class="color browser-style">
+						<input type="color" id="customIconColor">
+						<label for="customIconColor" data-i18n="optionCustomIconColorLabel"></label>
+					</div>
+				</fieldset>
+			</div>
 			<div class="select browser-style">
 				<label for="browserAction" data-i18n="optionBrowserActionLabel"></label>
 				<select id="browserAction" class="browser-style">