Version 0.1.6

add german translation

README.md

@@ -1,2 +1,9 @@
 # quickdial-webext
+
 QuickDial is a WebExt Dial page for Firefox
+
+[QuickDial on addons.mozilla.org](https://addons.mozilla.org/fr/firefox/addon/quick-dial/?src=search)
+
+## Contribute and evolution :</br>
+* [CONTRIBUTING.md](https://github.com/MatMoul/quickdial-webext/blob/develop/CONTRIBUTING.md)
+

TODO

@@ -1,6 +1,5 @@
-Add node settings popup
-Add custom image (thumbnails)
 Create style for popup
+Add a visual hint for multipage
 Need a best solution to update folder and bookmark when it are updated from Firefox
 Improve screenshot result
 Add favicon support

src/_locales/de/messages.json

@@ -0,0 +1,72 @@
+{
+  "extensionDescription": {
+    "message": "Quick Dial, eine Schnellwahl-Seite inspiriert von Fast Dial.",
+    "description": "Description of the extension."
+  },
+
+  "menuAddToQuickDial": {
+    "message": "Zu Quick Dial hinzufügen",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "menuNew": {
+    "message": "Neu",
+    "description": "Text of new menu item."
+  },
+
+  "menuNewBookmark": {
+    "message": "Lesezeichen",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Neue Lesezeichen URL eingeben:",
+    "description": "Text of the add bookmark prompt."
+  },
+
+  "menuNewFolder": {
+    "message": "Ordner",
+    "description": "Text of add folder menu item."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Neuen Ordner Namen eingeben:",
+    "description": "Text of the add folder prompt."
+  },
+
+  "menuProperties": {
+    "message": "Bearbeiten",
+    "description": "Text of properties menu item."
+  },
+
+  "menuRefreshItem": {
+    "message": "Neu laden",
+    "description": "Text of refresh menu item."
+  },
+
+  "menuCaptureHere": {
+    "message": "Hier aufnehmen",
+    "description": "Text of capture here menu item."
+  },
+
+  "menuCapturePage": {
+    "message": "In einem neuen Tab aufnehmen",
+    "description": "Text of capture menu item."
+  },
+
+  "menuDeleteItem": {
+    "message": "Löschen",
+    "description": "Text of delete menu item."
+  },
+
+  "deleteItemConfimation": {
+    "message": "Löschen $1?",
+    "description": "Text of delete confirmation."
+  },
+
+  "menuSettings": {
+    "message": "Quick Dial Einstellungen",
+    "description": "Text of settings menu item."
+  }
+
+}

src/_locales/en/messages.json

@@ -44,6 +44,11 @@
     "description": "Text of refresh menu item."
   },
 
+  "menuCaptureHere": {
+    "message": "Capture here",
+    "description": "Text of capture here menu item."
+  },
+
   "menuCapturePage": {
     "message": "Capture in a new tab",
     "description": "Text of capture menu item."

src/_locales/fr/messages.json

@@ -44,6 +44,11 @@
     "description": "Text of refresh menu item."
   },
 
+  "menuCaptureHere": {
+    "message": "Capturer ici",
+    "description": "Text of capture here menu item."
+  },
+
   "menuCapturePage": {
     "message": "Capturer dans un nouvel onglet",
     "description": "Text of capture menu item."

src/_locales/it/messages.json

@@ -0,0 +1,67 @@
+{
+  "extensionDescription": {
+    "message": "Quick Dial, una dial page inspirata a fast dial.",
+    "description": "Description of the extension."
+  },
+
+  "menuAddToQuickDial": {
+    "message": "Aggiungi a Quick Dial",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "menuNew": {
+    "message": "Nuovo",
+    "description": "Text of new menu item."
+  },
+
+  "menuNewBookmark": {
+    "message": "Segnalibro",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Scrivi l'url del nuovo segnalibro:",
+    "description": "Text of the add bookmark prompt."
+  },
+
+  "menuNewFolder": {
+    "message": "Cartella",
+    "description": "Text of add folder menu item."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Scrivi il nome della nuova cartella:",
+    "description": "Text of the add folder prompt."
+  },
+
+  "menuProperties": {
+    "message": "Proprietà",
+    "description": "Text of properties menu item."
+  },
+
+  "menuRefreshItem": {
+    "message": "Aggiorna",
+    "description": "Text of refresh menu item."
+  },
+
+  "menuCapturePage": {
+    "message": "Cattura in una nuova scheda",
+    "description": "Text of capture menu item."
+  },
+
+  "menuDeleteItem": {
+    "message": "Elimina",
+    "description": "Text of delete menu item."
+  },
+
+  "deleteItemConfimation": {
+    "message": "Eliminare $1?",
+    "description": "Text of delete confirmation."
+  },
+
+  "menuSettings": {
+    "message": "Impostazioni Quick Dial",
+    "description": "Text of settings menu item."
+  }
+
+}

src/_locales/ru/messages.json

@@ -0,0 +1,72 @@
+{
+  "extensionDescription": {
+    "message": "Quick Dial, вдохновление умершим расширением Fast Dial.",
+    "description": "Description of the extension."
+  },
+
+  "menuAddToQuickDial": {
+    "message": "Добавить в Quick Dial",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "menuNew": {
+    "message": "Добавить",
+    "description": "Text of new menu item."
+  },
+
+  "menuNewBookmark": {
+    "message": "Закладку",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Введите URL-адрес новой закладки:",
+    "description": "Text of the add bookmark prompt."
+  },
+
+  "menuNewFolder": {
+    "message": "Папку",
+    "description": "Text of add folder menu item."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Введите имя новой папки:",
+    "description": "Text of the add folder prompt."
+  },
+
+  "menuProperties": {
+    "message": "Свойства",
+    "description": "Text of properties menu item."
+  },
+
+  "menuRefreshItem": {
+    "message": "Обновить",
+    "description": "Text of refresh menu item."
+  },
+
+  "menuCaptureHere": {
+    "message": "Захватить здесь",
+    "description": "Text of capture here menu item."
+  },
+
+  "menuCapturePage": {
+    "message": "Захватить на новой вкладке",
+    "description": "Text of capture menu item."
+  },
+
+  "menuDeleteItem": {
+    "message": "Удалить",
+    "description": "Text of delete menu item."
+  },
+
+  "deleteItemConfimation": {
+    "message": "Удалить $1?",
+    "description": "Text of delete confirmation."
+  },
+
+  "menuSettings": {
+    "message": "Настройки Quick Dial",
+    "description": "Text of settings menu item."
+  }
+
+}

src/html/properties.html

@@ -33,17 +33,19 @@
 						<tr>
 							<td><span>Title :</span></td>
 							<td><input id="Title" type="text" style="width:100%"></td>
+							<td style="width:20px"><input id="TitleLocked" type="checkbox" title="Lock title"></td>
 						</tr>
 						<tr>
 							<td><span>Url :</span></td>
-							<td><input id="Url" type="text" style="width:100%"></td>
+							<td colspan="2"><input id="Url" type="text" style="width:100%"></td>
 						</tr>
 					
 					
 						<tr>
 							<td><span>Image :</span></td>
-							<td>
+							<td colspan="2">
 								<button id="ImageReset">Reset</button>
+								<button id="ImageDefault">Default</button>
 								<button class="hidden" id="ImageRefresh">Refresh</button>
 								<button class="hidden" id="ImageCapture">Capture</button>
 								<input id="ImageFile" type="file" style="width:180px;">
@@ -51,7 +53,7 @@
 						</tr>
 						<tr>
 							<td></td>
-							<td><div id="ImagePreview" style="width: 300px; height: 180px;"></div></td>
+							<td colspan="2"><div id="ImagePreview" style="width: 300px; height: 180px;"></div></td>
 						</tr>
 						
 					

src/html/settings.html

@@ -15,7 +15,7 @@
 			.Tab .TabSpace { width: 100%; border-bottom: solid 1px #505050; }
 			.Tab .TabButton { border: solid 1px #505050; padding: 2px 6px 2px 6px; cursor: default; }
 			.Tab .TabButtonActive { border: solid 1px #505050; border-bottom: none; padding: 2px 6px 2px 6px; cursor: default; }
-			.Tab>div { padding: 8px; height: 330px; border-left: solid 1px #505050; border-bottom: solid 1px #505050; border-right: solid 1px #505050; }
+			.Tab>div { padding: 8px; height: 350px; border-left: solid 1px #505050; border-bottom: solid 1px #505050; border-right: solid 1px #505050; }
 		</style>
 	</head>
 	<body id="body">
@@ -82,6 +82,12 @@
 							</td>
 						</tr>
 					</table>
+					<table style="width:100%;">
+						<tr>
+							<td><span>Root Folder :</span></td>
+							<td><input id="GridRoot" type="text" style="width:100%;"></td>
+						</tr>
+					</table>
 				</div>
 				<div class="hidden">
 					<table>

src/js/background.js

@@ -10,6 +10,7 @@ app.init = function(){ // Init module
 		app.GridNodes.sync(app.node, app.settings.grid.root, function(){
 			browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
 			app.Bookmarks.initListener();
+			app.ContextMenus.initMenu();
 		});
 	});
 };
@@ -37,11 +38,17 @@ app.Messages.init = function(){ // Init Messages Listeners
 				sendResponse(app.settings);
 				break;
 			case app.Messages.Commands.setSettings:
+				let rootChanged = (app.settings.grid.root!=request.settings.grid.root);
 				app.settings = request.settings;
 				app.Settings.save();
 				sendResponse(app.settings);
 				browser.runtime.sendMessage( { cmd: app.Messages.Commands.settingsChanged } );
-				browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
+				if(rootChanged){
+					app.node = { children: [] };
+					app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); });
+				} else {
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
+				}
 				break;
 			case app.Messages.Commands.getNodeByID:
 				var nodes = app.GridNodes.getNodeWithParents(request.id);
@@ -188,11 +195,13 @@ app.ContextMenus.initMenu = function(){ // (Called from app.init) Init context m
 		id: 'AddToQuickDial',
 		title: browser.i18n.getMessage("menuAddToQuickDial"),
 		contexts: ["all"],
-		documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*' ]
+		documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*', 'ftp://*/*' ]
 	}, function(){});
 	browser.contextMenus.onClicked.addListener(function(info, tab) { // Context menu click event
-		//if (info.menuItemId == "AddToQuickDial")
-			//app.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){});
+		if (info.menuItemId == "AddToQuickDial")
+			app.GridNodes.createBookmark(app.node, info.pageUrl, tab.title, function(){
+				browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
+			});
 	});
 }
 
@@ -203,13 +212,15 @@ app.Bookmarks._onMoved = function(){ app.GridNodes.sync(app.node, app.settings.g
 app.Bookmarks._onRemoved = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
 app.Bookmarks.initListener = function(){ // (Called from app.init) (/!\ Need filter to root tree only) Init listener of bookmarks
 	browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
-	//browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
+	browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
 	browser.bookmarks.onMoved.addListener(app.Bookmarks._onMoved);
 	browser.bookmarks.onRemoved.addListener(app.Bookmarks._onRemoved);		
 }
 app.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and create it if not exist
 	if(!callback) return;
-	browser.bookmarks.getSubTree('menu________').then(function(bookmarkItems){
+	var root = 'menu________';
+	if(rootPath.substr(0,1)=='/') root = 'root________';
+	browser.bookmarks.getSubTree(root).then(function(bookmarkItems){
 		function getChildItem(bookmarkItem, path, callback){
 			if(path.length == 0){
 				callback(bookmarkItem);
@@ -225,7 +236,8 @@ app.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and cre
 				return getChildItem(bookmarkItem, path.substr(bookmarkItem.title.length + 1), callback);
 			}, function(){ callback(); });
 		}
-		getChildItem(bookmarkItems[0], rootPath, callback);
+		if(rootPath.substr(0,1)=='/') getChildItem(bookmarkItems[0], rootPath.substr(1), callback);
+		else getChildItem(bookmarkItems[0], rootPath, callback);
 	}, function(){ callback(); });
 }
 
@@ -347,6 +359,11 @@ app.GridNodes.GridNodeType = { // GridNodeType
 	bookmark: 2
 }
 app.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes with Bookmarks
+	if(app.GridNodes._syncing) {
+		app.GridNodes._needSync = true;
+		return;
+	}
+	app.GridNodes._syncing = true;
 	app.Bookmarks.load(rootPath, function(bookmarkItem){
 		function syncNode(gridNode, bookmarkItem){
 			gridNode.id = bookmarkItem.id;
@@ -360,6 +377,7 @@ app.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes w
 				if(! gridNode.children) gridNode.children = [];
 				else {
 					for(var i=gridNode.children.length-1; i>=0; i--){
+						if(!gridNode.children[i]) gridNode.children[i] = { type: app.GridNodes.GridNodeType.empty };
 						if(gridNode.children[i].type==app.GridNodes.GridNodeType.empty){
 							EmptyNodes.unshift(gridNode.children[i]);
 						} else {
@@ -401,8 +419,14 @@ app.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes w
 		}
 
 		syncNode(gridNode, bookmarkItem);
-		app.GridNodes.save();
-		if(callback) callback();
+		delete app.GridNodes._syncing;
+		if(app.GridNodes._needSync == true) {
+			delete app.GridNodes._needSync;
+			app.GridNodes.sync(gridNode, rootPath, callback);
+		} else {
+			app.GridNodes.save();			
+			if(callback) callback();
+		}
 	});
 }
 app.GridNodes.save = function(callback){ // Save GridNodes
@@ -448,11 +472,15 @@ app.GridNodes.getNodeWithParents = function(id){
 app.GridNodes.updateNode = function(gridNode, value, callback){
 	if(value){
 		if(value.title) gridNode.title = value.title;
+		if(value.titleLocked!=null) gridNode.titleLocked = value.titleLocked;
+		if(value.image) gridNode.image = value.image;
+		else delete gridNode.image;
 		if(gridNode.type == app.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){
 			gridNode.url = value.url;
-			delete gridNode.image;
+			app.GridNodes.refreshNode(gridNode, function(){
+				browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
+			});
 		}
-		if(value.image) gridNode.image = value.image;
 		app.GridNodes.saveNode(gridNode);
 	}
 	if(callback) callback(gridNode);
@@ -480,14 +508,16 @@ app.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // S
 }
 app.GridNodes.createBookmark = function(gridNode, url, title, callback){ // Create a new Bookmark in a GridNode.  callback(gridNode, newGridNode)
 	browser.bookmarks.onCreated.removeListener(app.Bookmarks._onCreated);
+	var prefix = '';
+	if(url.indexOf('://')<0) prefix = 'http://';
 	browser.bookmarks.create({
 		parentId: gridNode.id,
 		title: title || url,
-		url: url
+		url: prefix + url
 	}).then(function(bookmarkItem){
 		if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ???
 		browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
-		var newGridNode = { id: bookmarkItem.id, type: app.GridNodes.GridNodeType.bookmark, url: url, title };
+		var newGridNode = { id: bookmarkItem.id, type: app.GridNodes.GridNodeType.bookmark, url: prefix + url, title };
 		var EmptyCellFound = false;
 		for(var i=0; i<gridNode.children.length; i++){
 			if(gridNode.children[i].type == app.GridNodes.GridNodeType.empty){
@@ -561,7 +591,7 @@ app.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of
 		case app.GridNodes.GridNodeType.bookmark:
 			app.SiteInfos.fromFrame(gridNode.url, function(infos){
 				if(infos){
-					gridNode.title = infos.title;
+					if(gridNode.titleLocked!=true) gridNode.title = infos.title;
 					gridNode.image = infos.screenshot;
 				} else {
 					gridNode.image = '0';
@@ -597,7 +627,7 @@ app.GridNodes.capturePage = function(gridNode, callback){
 		case app.GridNodes.GridNodeType.bookmark:
 			app.SiteInfos.fromNewTab(gridNode.url, function(infos){
 				if(infos){
-					gridNode.title = infos.title;
+					if(gridNode.titleLocked!=true) gridNode.title = infos.title;
 					gridNode.image = infos.screenshot;
 				} else {
 					gridNode.image = '0';

src/js/dial.js

@@ -2,7 +2,8 @@ var utils = {};
 var app = {};
 var dial = {
 	page: 1,
-	maxpage: 1
+	maxpage: 1,
+	capture: 0
 };
 
 document.addEventListener("DOMContentLoaded", function(event) {
@@ -11,24 +12,40 @@ document.addEventListener("DOMContentLoaded", function(event) {
 	dial.init();
 });
 
-window.onresize = function(){
+window.addEventListener('resize', function(){
 	if(app && app.settings) dial.updateGridLayout();
-}
-window.onwheel = function(ev){
+});
+window.addEventListener('wheel', function(e){
 	if(app && app.settings){
-		if(ev.deltaY > 0){
+		if(e.deltaY > 0){
 			if(dial.page < dial.maxpage){
 				dial.page += 1;
 				dial.populateGrid();
 			}
-		} else if(ev.deltaY < 0){
+		} else if(e.deltaY < 0){
 			if(dial.page > 1){
 				dial.page -= 1;
 				dial.populateGrid();
 			}
 		}
 	}
-}
+});
+window.addEventListener('keyup', function(e){
+	switch(e.key){
+		case 'PageDown':
+			if(dial.page < dial.maxpage){
+				dial.page += 1;
+				dial.populateGrid();
+			}
+			break;
+		case 'PageUp':
+			if(dial.page > 1){
+				dial.page -= 1;
+				dial.populateGrid();
+			}
+			break;
+	}
+});
 
 
 
@@ -73,16 +90,31 @@ app.Messages.init = function(){
 				app.Messages.getSettings(app.Settings._changed);
 				break;
 			case app.Messages.Commands.gridNodesLoaded:
-				app.Messages.getNode(dial.path, app.GridNodes._changed);
+				if(dial.skipUpdate!=true) app.Messages.getNode(dial.path, app.GridNodes._changed);
 				break;
 		}
 	});
 };
 app.Messages.getSettings = function(callback){
-	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback, callback);
+	browser.runtime.getBackgroundPage().then(function(page){
+		if(page){
+			if(callback) callback(page.app.settings);
+		} else {
+			browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback, callback);
+		}
+	});
 };
 app.Messages.getNode = function(path, callback){
-	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNode, path: path }).then(callback);
+	browser.runtime.getBackgroundPage().then(function(page){
+		if(page){
+			if(callback) callback(page.app.GridNodes.getNode(page.app.node, dial.path.substr(1)));
+		} else {
+			browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNode, path: path }).then(callback);
+		}
+	});
+};
+app.Messages.updateNode = function(id, value, callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.updateNode, id: id, value: value }).then(callback);
 };
 app.Messages.setNodeIndex = function(index, newIndex, callback){
 	browser.runtime.sendMessage({ cmd: app.Messages.Commands.setNodeIndex, path: dial.path, index: index, newIndex: newIndex }).then(callback);
@@ -182,6 +214,12 @@ dial.initMenus = function(){
 		dial.refreshNode(dial._selectedItem);
 	};
 
+	dial.ItemMenuCaptureHere = document.createElement('menuitem');
+	dial.ItemMenuCaptureHere.label = browser.i18n.getMessage("menuCaptureHere");
+	dial.ItemMenuCaptureHere.onclick = function(){
+		dial.captureHere(dial._selectedItem);
+	};
+	
 	dial.ItemMenuCapture = document.createElement('menuitem');
 	dial.ItemMenuCapture.label = browser.i18n.getMessage("menuCapturePage");
 	dial.ItemMenuCapture.onclick = function(){
@@ -202,6 +240,7 @@ dial.initMenus = function(){
 	dial.ItemMenu.appendChild(document.createElement('hr'));
 	dial.ItemMenu.appendChild(dial.ItemMenuProperties);
 	dial.ItemMenu.appendChild(dial.ItemMenuRefresh);
+	dial.ItemMenu.appendChild(dial.ItemMenuCaptureHere);
 	dial.ItemMenu.appendChild(dial.ItemMenuCapture);
 	dial.ItemMenu.appendChild(dial.ItemMenuDelete);
 	dial.ItemMenu.appendChild(document.createElement('hr'));
@@ -209,7 +248,7 @@ dial.initMenus = function(){
 	document.body.appendChild(dial.ItemMenu);
 }
 dial.initStyles = function(){
-	if(dial.Style) document.head.removeChild(dial.Style);
+	var oldStyle = dial.Style;
 	dial.Style = document.createElement('style'), StyleSheet;
 	document.head.appendChild(dial.Style);
 	dial.styles = {};
@@ -234,9 +273,10 @@ dial.initStyles = function(){
 	dial.styles.grid.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
 	dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
 	dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
+	if(oldStyle) document.head.removeChild(oldStyle);
 };
 dial.initGrid = function(){
-	if(dial.Grid) document.body.removeChild(dial.Grid);
+	var oldGrid = dial.Grid;
 	dial.Grid = document.createElement('table');
 	var grid = document.createElement('table');
 	dial.Grid.className = 'Grid';
@@ -254,16 +294,40 @@ dial.initGrid = function(){
 			link.className = 'Empty';
 			link.appendChild(document.createElement('div'));
 			link.appendChild(document.createElement('div'));
-			link.onmousedown = function(){ dial._selectedItem = this; };
+			link.onmousedown = function(){
+				dial._selectedItem = this;
+				if(dial._selectedItem.Node){
+					switch(dial._selectedItem.Node.type){
+						case app.GridNodes.GridNodeType.folder:
+							dial.ItemMenuCaptureHere.hidden = true;
+							break;
+						case app.GridNodes.GridNodeType.bookmark:
+							dial.ItemMenuCaptureHere.hidden = false;
+							break;
+					}
+				}
+			};
 			
 			function dragstart_handler(ev) {
+				if(!ev.target.Node){
+					ev.preventDefault();
+					return;
+				}
 				var index = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.getAttribute('gridindex'));
 				if(app.settings.grid.backNode && dial.path != '/') index -= dial.page;
 				ev.dataTransfer.setData("text/plain", index);
-			 }
-			 function dragover_handler(ev) {
+			}
+			function dragover_handler(ev) {
 				ev.preventDefault();
-				ev.dataTransfer.dropEffect = "move"
+				if(app.settings.grid.backNode && dial.path != '/'){
+					var gridIndex = 0;
+					if(ev.target.tagName == 'DIV') gridIndex = +(ev.target.parentElement.parentElement.getAttribute('gridindex'));
+					else gridIndex = +(ev.target.getAttribute('gridindex'));
+					if(gridIndex==0) ev.dataTransfer.dropEffect = "none";
+					else ev.dataTransfer.dropEffect = "move";
+				} else {
+					ev.dataTransfer.dropEffect = "move";
+				}
 			}
 			function drop_handler(ev) {
 				ev.preventDefault();
@@ -276,7 +340,7 @@ dial.initGrid = function(){
 					EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex'));
 				}
 				if(app.settings.grid.backNode && dial.path != '/') EndIndex -= dial.page;
-				app.Messages.setNodeIndex(StartIndex, EndIndex);
+				if(StartIndex != EndIndex) app.Messages.setNodeIndex(StartIndex, EndIndex);
 			}
 			link.draggable = true;
 			link.ondragstart = dragstart_handler;
@@ -286,6 +350,7 @@ dial.initGrid = function(){
 	}
 	document.body.appendChild(dial.Grid);
 	dial.updateGridLayout();
+	if(oldGrid) document.body.removeChild(oldGrid);
 	return dial.Grid;
 };
 dial.updateGridLayout = function(){
@@ -328,8 +393,10 @@ dial.populateGrid = function(){
 	populateFolder = function(link, node){
 		link.Node = node;
 		link.className = 'Folder';
-		if(node.image) link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
-		else link.childNodes[0].style.backgroundImage = '';
+		if(node.image){
+			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
+			else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
+		} else link.childNodes[0].style.backgroundImage = '';
 		link.childNodes[1].innerText = node.title;
 		if(dial.path) link.href = '?' + 'bg=' + encodeURIComponent(app.settings.backgroundColor) + '&path=' + encodeURIComponent(dial.path + node.title);
 		else link.href = '?' + 'bg=' + encodeURIComponent(app.settings.backgroundColor) + '&path=' + encodeURIComponent(node.title);
@@ -340,7 +407,8 @@ dial.populateGrid = function(){
 		link.Node = node;
 		if(node.image){
 			link.className = 'Bookmark';
-			link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
+			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
+			else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
 		} else {
 			link.className = 'BookmarkLoading';
 			link.childNodes[0].style.backgroundImage = '';
@@ -401,6 +469,88 @@ dial.refreshNode = function(selectedItem){
 	selectedItem.childNodes[0].style.backgroundImage = app.settings.grid.loadingIcon;
 	app.Messages.refreshNode(selectedItem.Node.id);
 }
+dial.captureHere = function(selectedItem){
+	function headersReceived(e){
+		for (let i = e.responseHeaders.length - 1; i >= 0; i--) {
+			switch(e.responseHeaders[i].name.toLowerCase()){
+				case 'x-frame-options':
+				case 'frame-options':
+				case 'content-security-policy':
+					e.responseHeaders.splice(i, 1);
+					break;
+			}
+		}
+		return { responseHeaders: e.responseHeaders };
+	};
+	function pageLoaded(){
+		if(!iframe) return;
+		function clean(){
+			if(!iframe) return;
+			selectedItem.children[0].removeChild(iframe);
+			dial.capture -= 1;
+			if(dial.capture == 0){
+				browser.webRequest.onHeadersReceived.removeListener(headersReceived);
+				browser.tabs.update(tab.id, {muted: false}).then();
+			}
+			iframe = null;
+		}
+		setTimeout(function(){
+			browser.tabs.captureVisibleTab().then(function(img){
+				var imgObj = new Image;
+				imgObj.src = img;
+				var canvas = document.createElement('canvas');
+				canvas.style.width = rect.width.toString() + 'px';
+				canvas.style.height = rect.height.toString() + 'px';
+				canvas.width = rect.width;
+				canvas.height = rect.height;
+				var ctx = canvas.getContext('2d');
+				ctx.clearRect(0, 0, rect.width, rect.height);
+				ctx.save();
+				setTimeout(function(){
+					ctx.drawImage(imgObj, rect.left, rect.top, rect.width, rect.height, 0, 0, rect.width, rect.height);
+					ctx.restore();
+					img = canvas.toDataURL();
+					selectedItem.children[0].style.backgroundImage = 'url(' + img + ')';
+					clean();
+					app.Messages.updateNode(selectedItem.Node.id, { image: img }, function(){
+						setTimeout(function(){
+							if(dial.capture == 0) dial.skipUpdate = false;
+						}, 500);
+					});
+				}, 500);
+			}, clean);
+		}, 3000);
+
+
+	};
+
+	var tab = null;
+	var previewWidth = 1200; // Need to be linked to settings
+	var previewHeight = 710; // Need to be linked to settings
+	var iframe = document.createElement('iframe');
+	var rect = selectedItem.children[0].getBoundingClientRect();
+	browser.tabs.getCurrent().then(function(currentTab){
+		tab = currentTab;
+		var ratioX = previewWidth / selectedItem.children[0].offsetWidth;
+		var ratioY = previewHeight / selectedItem.children[0].offsetHeight;
+		iframe.style.width = ratioX * selectedItem.children[0].offsetWidth + 'px';
+		iframe.style.height = ratioY * selectedItem.children[0].offsetHeight + 'px';
+		iframe.style.position = 'absolute';
+		iframe.style.MozTransform = 'scale(' + (1/ratioX) + ', ' + (1/ratioY) + ')';
+		iframe.style.MozTransformOrigin = 'top left';
+		iframe.sandbox = 'allow-scripts allow-same-origin';
+		iframe.onload = function(){ pageLoaded(); }
+		dial.capture += 1;
+		if(dial.capture == 1){
+			dial.skipUpdate = true;
+			browser.webRequest.onHeadersReceived.addListener(headersReceived, { urls:['*://*/*'], types:['sub_frame'] }, ['blocking', 'responseHeaders']);
+			browser.tabs.update(tab.id, {muted: true}).then();
+		}
+		iframe.src = selectedItem.Node.url;
+		selectedItem.children[0].appendChild(iframe);
+		//setTimeout(function(){ pageLoaded(); }, 6000);
+	});
+}
 dial.capturePage = function(selectedItem){
 	selectedItem.className = 'BookmarkLoading';
 	selectedItem.childNodes[0].style.backgroundImage = app.settings.grid.loadingIcon;
@@ -457,7 +607,7 @@ dial.PopupPanel = function(width, height, modal){ // PopupPanel Object
 }
 
 dial.editSettings = function(){
-	var popup = new dial.PopupPanel(500, 420, true);
+	var popup = new dial.PopupPanel(500, 440, true);
 	var iframe = document.createElement('iframe');
 	iframe.style.width = '100%';
 	iframe.style.height = '100%';
@@ -469,6 +619,7 @@ dial.editSettings = function(){
 	iframe.src = '/html/settings.html';
 	iframe.popup = popup;
 	popup.popup();
+	iframe.focus();
 }
 
 dial.editProperties = function(selectedItem){
@@ -484,4 +635,5 @@ dial.editProperties = function(selectedItem){
 	iframe.src = '/html/properties.html?id=' + selectedItem.Node.id;
 	iframe.popup = popup;
 	popup.popup();
+	iframe.focus();
 }

src/js/properties.js

@@ -7,6 +7,13 @@ document.addEventListener("DOMContentLoaded", function(event) {
 });
 
 app.init = function(){
+	document.addEventListener('keyup', function(e){
+		switch(e.key){
+			case 'Escape':
+				window.frameElement.popup.close();
+				break;
+		}
+	});
 	app.Messages.getSettings(function(settings){
 		app.settings = settings;
 		app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){
@@ -16,14 +23,21 @@ app.init = function(){
 			ImagePreview.style.backgroundSize = '100% 100%';
 			switch(node.type){
 				case app.GridNodes.GridNodeType.folder:
+					TitleLocked.parentNode.style.display = 'none';
 					Url.parentNode.parentNode.style.display = 'none';
-					if(node.image) Image = node.image;
-					else Image = app.settings.grid.folderIcon;
-					ImagePreview.style.backgroundImage = Image;
+					if(node.image){
+						if(node.image.indexOf('url(')>=0) Image = node.image;
+						else Image = 'url(' + node.image + ')';
+					} else Image = null;
+					if(Image==null) ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
+					else ImagePreview.style.backgroundImage = Image;
 					break;
 				case app.GridNodes.GridNodeType.bookmark:
+					TitleLocked.checked = (node.titleLocked==true);
+					ImageDefault.style.display = 'none';
 					Url.value = node.url;
-					Image = 'url(' + node.image + ')';
+					if(node.image.indexOf('url(')>=0) Image = node.image;
+					else Image = 'url(' + node.image + ')';
 					ImagePreview.style.backgroundImage = Image;
 					break;
 			}
@@ -46,6 +60,17 @@ app.init = function(){
 				}
 			};
 
+			ImageDefault.onclick = function(){
+				switch(node.type){
+					case app.GridNodes.GridNodeType.folder:
+						Image = null;
+						ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
+						break;
+					case app.GridNodes.GridNodeType.bookmark:
+						break;
+				}
+			};
+
 
 			ImageFile.onclick = function(){
 				this.value = null;
@@ -75,7 +100,7 @@ app.init = function(){
 				app.Messages.updateNode(app.node.id, { title: Title.value, image: Image })
 				break;
 			case app.GridNodes.GridNodeType.bookmark:
-				app.Messages.updateNode(app.node.id, { title: Title.value, url: Url.value, image: Image })
+				app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image })
 				break;
 		}
 	}

src/js/settings.js

@@ -10,6 +10,13 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
 
 app.init = function(){
+	document.addEventListener('keyup', function(e){
+		switch(e.key){
+			case 'Escape':
+				window.frameElement.popup.close();
+				break;
+		}
+	});
 	app.Messages.getSettings(function(settings){
 		app.settings = settings;
 		BackgroundColor.value = app.settings.backgroundColor;
@@ -18,6 +25,7 @@ app.init = function(){
 		BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
 		BackgroundPreview.style.backgroundRepeat = 'no-repeat';
 		BackgroundPreview.style.backgroundSize = '100% 100%';
+		GridRoot.value = app.settings.grid.root;
 		GridRows.value = app.settings.grid.rows;
 		GridMargins.value = app.settings.grid.margin;
 		GridColumns.value = app.settings.grid.columns;
@@ -84,6 +92,7 @@ app.init = function(){
 		else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value;
 		if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null;
 		else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value;
+		app.settings.grid.root = GridRoot.value;
 		browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
 	}
 	BtnCancel.onclick = function(){

src/manifest.json

@@ -2,7 +2,7 @@
 
   "manifest_version": 2,
   "name": "Quick Dial",
-  "version": "0.1.2",
+  "version": "0.1.6",
   "author": "MatMoul",
   "homepage_url": "https://github.com/MatMoul/quickdial-webext",
   "developer": {
@@ -21,6 +21,8 @@
     "bookmarks",
     "contextMenus",
     "tabs",
+    "webRequest",
+    "webRequestBlocking",
     "<all_urls>"
   ],