Version 0.1.11

Add Brazilian Portuguese translation

.gitignore

@@ -1 +1,2 @@
 **/src.zip
+/*.zip

TODO

@@ -1,5 +0,0 @@
-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

makebeta

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+if [ "$1" == "" ]; then
+	echo "Error: No version provided"
+	echo "./makebeta 0.0.1b1"
+	exit 1
+fi
+
+clear
+branch=$(git rev-parse --abbrev-ref HEAD)
+read -p "Current branch is $branch. Continue ? (y/N)" choice
+case "$choice" in 
+  n|N|'' )
+    echo "Cancel !"
+    exit 1
+  ;;
+  y|Y ) echo "Make beta...";;
+  * )
+    echo "Cancel !"
+    exit 1
+  ;;
+esac
+
+
+
+# Ready to update :
+
+git branch beta
+git checkout beta
+
+version=$1
+
+sed -i "/\"version\":/c\ \ \"version\": \"$version\"," src/manifest.json
+
+git commit -a -m "Beta Version $version"
+
+cd src
+zip -r ../quickdial-beta-$version.zip . -x src.zip
+cd ..
+
+git checkout $branch
+git branch -D beta
+

makerelease

@@ -46,3 +46,7 @@ git tag -a "v$version" -m "Version $version"
 git push --tags
 
 git checkout $branch
+
+cd src
+zip -r ../quickdial-$version.zip . -x src.zip
+cd ..

src/_locales/pt_BR/messages.json

@@ -0,0 +1,72 @@
+{
+  "extensionDescription": {
+    "message": "Quick Dial, uma página de discagem inspirada no Fast Dial.",
+    "description": "Descrição da extensão."
+  },
+
+  "menuAddToQuickDial": {
+    "message": "Adicionar ao Quick Dial",
+    "description": "Texto do iten de menu adicionar ao Quick Dial."
+  },
+
+  "menuNew": {
+    "message": "Novo",
+    "description": "Texto do item de menu novo."
+  },
+
+  "menuNewBookmark": {
+    "message": "Favorito",
+    "description": "Texto do iten de menu adicionar favorito."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Entre com a url do novo favorito :",
+    "description": "Texto do rótulo adicionar favorito."
+  },
+
+  "menuNewFolder": {
+    "message": "Pasta",
+    "description": "Texto do item de menu adicionar pasta."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Entre com o nome da nova pasta :",
+    "description": "Texto do rótulo adicionar pasta."
+  },
+
+  "menuProperties": {
+    "message": "Propriedades",
+    "description": "Texto do item de menu propriedades."
+  },
+
+  "menuRefreshItem": {
+    "message": "Atualizar",
+    "description": "Texto do item de menu atualizar."
+  },
+
+  "menuCaptureHere": {
+    "message": "Capturar aqui",
+    "description": "Texto do item de menu capturar aqui."
+  },
+
+  "menuCapturePage": {
+    "message": "Capturar em uma nova guia",
+    "description": "Texto do item de menu capturar em uma nova guia."
+  },
+
+  "menuDeleteItem": {
+    "message": "Excluir",
+    "description": "Texto do item de menu excluir."
+  },
+
+  "deleteItemConfimation": {
+    "message": "Excluir $1 ?",
+    "description": "Texto de confirmação da exclusão."
+  },
+
+  "menuSettings": {
+    "message": " Configurações do Quick Dial",
+    "description": "Texto do item de menu configurações."
+  }
+
+}

src/_locales/sr/messages.json

@@ -0,0 +1,72 @@
+{
+  "extensionDescription": {
+    "message": "Quick Dial, страница брзог бирања коју инспириса fast dial.",
+    "description": "Description of the extension."
+  },
+
+  "menuAddToQuickDial": {
+    "message": "Додај у брзо бирање",
+    "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": "Унесите УРЛ нове забелешке :",
+    "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": "Подешавање брзог бирања",
+    "description": "Text of settings menu item."
+  }
+
+}

src/html/properties.html

@@ -43,7 +43,7 @@
 					
 						<tr>
 							<td><span>Image :</span></td>
-							<td colspan="2">
+							<td>
 								<select id="ImageMode">
 									<option value="-1">Default</option>
 									<option value="0">Stretch</option>
@@ -57,6 +57,7 @@
 								<button class="hidden" id="ImageCapture">Capture</button>
 								<input id="ImageFile" type="file" style="width:180px;">
 							</td>
+							<td style="width:20px"><input id="ImageLocked" type="checkbox" title="Lock image"></td>
 						</tr>
 						<tr>
 							<td></td>

src/html/settings.html

@@ -58,6 +58,10 @@
 							<td>Preview :</td>
 							<td><div id="BackgroundPreview" style="width: 300px; height: 180px;"></div></td>
 						</tr>
+						<tr>
+							<td>Show "Add to ..." :</td>
+							<td><input id="MenuShowAdd" type="checkbox"></td>
+						</tr>
 					</table>
 				</div>
 				<div class="hidden">
@@ -69,6 +73,13 @@
 								<input id="GridColumns" type="number" min="1">
 							</td>
 						</tr>
+						<tr>
+							<td><span>Ratio (X/Y) :</span></td>
+							<td>
+								<input id="GridRatioX" type="number" min="1">
+								<input id="GridRatioY" type="number" min="1">
+							</td>
+						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
 							<td><input id="GridMargins" type="number" min="0"></td>
@@ -194,6 +205,10 @@
 							<td><input id="GridCellsTitleBackgroundColor" type="color"></td>
 							<td><input id="GridCellsTitleBackgroundColorHover" type="color"></td>
 						</tr>
+						<tr>
+							<td><span>Snapshot Delay :</span></td>
+							<td colspan="2"><input id="GridCellsSnapshotDelay" type="number" min="300" max="10000"></td>
+						</tr>
 					</table>
 				</div>
 			</div>

src/js/background.js

@@ -49,6 +49,7 @@ app.Messages.init = function(){ // Init Messages Listeners
 				} else {
 					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				}
+				app.ContextMenus.updateMenu();
 				break;
 			case app.Messages.Commands.getNodeByID:
 				var nodes = app.GridNodes.getNodeWithParents(request.id);
@@ -107,10 +108,13 @@ app.Settings.init = function(callback){ // Load settings and nodes
 					backgroundColor: '#3c4048',
 					backgroundImage: null,
 					backgroundMode: 0,
+					menuShowAdd: true,
 					grid: {
 						margin: 10,
 						rows: 4,
 						columns: 5,
+						ratioX: 4,
+						ratioY: 3,
 						backNode: true,
 						backIcon: 'url(/img/back.png)',
 						backIconMode: 3,
@@ -132,8 +136,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 							borderSizeHover: 1,
 							title: true,
 							titleHover: true,
-							titleHeight: 15,
-							titleHeightHover: 15,
+							titleHeight: 16,
+							titleHeightHover: 16,
 							titleFontSize: 10,
 							titleFontSizeHover: 10,
 							titleFont: 'Arial, Verdana, Sans-serif',
@@ -144,7 +148,8 @@ app.Settings.init = function(callback){ // Load settings and nodes
 							titleBorderSize: 1,
 							titleBorderSizeHover: 1,
 							previewWidth: 1200,
-							previewHeight: 710
+							previewHeight: 710,
+							snapshotDelay: 2000
 						},
 						root: 'Quick Dial',
 					}
@@ -191,13 +196,28 @@ app.Settings.init = function(callback){ // Load settings and nodes
 			data.settings.grid.cells.borderSize = 1;
 			data.settings.grid.cells.borderSizeHover = data.settings.grid.cells.borderSize;
 			data.settings.grid.cells.titleHover = data.settings.grid.cells.title;
-			data.settings.grid.cells.titleHeight -= 1;
 			data.settings.grid.cells.titleHeightHover = data.settings.grid.cells.titleHeight;
 			data.settings.grid.cells.titleFontSizeHover = data.settings.grid.cells.titleFontSize;
 			data.settings.grid.cells.titleBorderSize = 1;
 			data.settings.grid.cells.titleBorderSizeHover = data.settings.grid.cells.titleBorderSize;
 			app.Settings.save();
 		}
+		if(data.version == 4){ // Upgrade Data Version
+			if(!data.settings.grid.cells.snapshotDelay) data.settings.grid.cells.snapshotDelay = 2000;
+			if(data.settings.grid.ratioAuto == true || data.settings.grid.ratioAuto == false){
+				delete data.settings.grid.ratioAuto;
+				data.settings.grid.ratioX = 4;
+				data.settings.grid.ratioY = 3;
+			}
+			if(!data.settings.grid.ratioX){
+				data.settings.grid.ratioX = 4;
+				data.settings.grid.ratioY = 3;
+			}
+			if(!(data.settings.menuShowAdd == true) && !(data.settings.menuShowAdd == false)){
+				data.settings.menuShowAdd = true;
+			}
+			//app.Settings.save();
+		}
 		app.settings = data.settings;
 		app.node = data.node;
 		if(callback) callback();
@@ -214,25 +234,32 @@ app.Settings.save = function(callback){ // Save settings
 	browser.storage.local.set(data).then(function(){
 		if(callback) callback();
 	}, function(){ console.log('Error saving settings'); });
-}
+};
 
 app.init();
 
 app.ContextMenus = {} // ContextMenu helper Object
-app.ContextMenus.initMenu = function(){ // (Called from app.init) Init context menu in all pages
-	browser.contextMenus.create({ // Create Context menu
-		id: 'AddToQuickDial',
-		title: browser.i18n.getMessage("menuAddToQuickDial"),
-		contexts: ["all"],
-		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.node, info.pageUrl, tab.title, function(){
-				browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
-			});
+app.ContextMenus.menuItemClicked = function(info, tab){
+	if (info.menuItemId == "AddToQuickDial") app.GridNodes.createBookmark(app.node, info.pageUrl, tab.title, function(){
+		browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 	});
-}
+};
+app.ContextMenus.initMenu = function(){ // (Called from app.init) Init context menu in all pages
+	if(app.settings.menuShowAdd){
+		browser.contextMenus.create({ // Create Context menu
+			id: 'AddToQuickDial',
+			title: browser.i18n.getMessage("menuAddToQuickDial"),
+			contexts: ["all"],
+			documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*', 'ftp://*/*' ]
+		}, function(){});
+		browser.contextMenus.onClicked.addListener(app.ContextMenus.menuItemClicked);
+	}
+};
+app.ContextMenus.updateMenu = function(){
+	browser.contextMenus.onClicked.removeListener(app.ContextMenus.menuItemClicked);
+	browser.contextMenus.removeAll();
+	app.ContextMenus.initMenu();
+};
 
 app.Bookmarks = {} // Bookmarks helper object
 app.Bookmarks._onCreated = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
@@ -297,7 +324,8 @@ app.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a ne
 								imgObj.src = img;
 
 								var previewWidth = 1200; // Need to be linked to settings
-								var previewHeight = 710; // Need to be linked to settings
+								var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+								if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
 
 								var canvas = document.createElement('canvas');
 								canvas.style.width = previewWidth.toString() + 'px';
@@ -326,7 +354,7 @@ app.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a ne
 								browser.tabs.remove(tab.id);
 								if(callback) callback();
 							});
-						}, 500);
+						}, app.settings.grid.cells.snapshotDelay);
 					}, function(){ if(callback) callback(); });
 				}
 			}, function(){ if(callback) callback(); });
@@ -363,7 +391,8 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
 	}
 
 	var previewWidth = 1200; // Need to be linked to settings
-	var previewHeight = 710; // Need to be linked to settings
+	var previewHeight = previewWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+	if(app.settings.grid.title == true) previewHeight -= app.settings.grid.titleHeight;
 	var iframe;
 	var xmlHttp = new XMLHttpRequest();
 	xmlHttp.timeout = 10000
@@ -373,7 +402,7 @@ app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an ifr
 		iframe.width = previewWidth
 		iframe.height = previewHeight
 		iframe.style.position = 'absolute';
-		//iframe.style.visibility = 'hidden';
+		iframe.scrolling = 'no';
 		var content = xmlHttp.responseText.replace('<head>', '<head><base href="' + url + '">');
 		iframe.onload = function(){ pageLoaded(); }
 		document.body.appendChild(iframe);
@@ -409,7 +438,10 @@ app.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes w
 			gridNode.title = bookmarkItem.title;
 			if(bookmarkItem.url){
 				gridNode.type = app.GridNodes.GridNodeType.bookmark;
-				if(!gridNode.url) gridNode.url = bookmarkItem.url;
+				if(gridNode.url != bookmarkItem.url){
+					gridNode.url = bookmarkItem.url;
+					delete gridNode.image;
+				}
 			} else if(bookmarkItem.children){
 				gridNode.type = app.GridNodes.GridNodeType.folder;
 				var EmptyNodes = [];
@@ -512,8 +544,11 @@ 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(value.imageLocked!=null) gridNode.imageLocked = value.imageLocked;
+		if(gridNode.imageLocked == false){
+			if(value.image) gridNode.image = value.image;
+			else delete gridNode.image;
+		}
 		if(value.imageMode || value.imageMode == 0) {
 			if(value.imageMode == -1) delete gridNode.imageMode;
 			else gridNode.imageMode = value.imageMode;
@@ -522,24 +557,25 @@ app.GridNodes.updateNode = function(gridNode, value, callback){
 			gridNode.url = value.url;
 			app.GridNodes.refreshNode(gridNode, function(){
 				browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
+				app.GridNodes.saveNode(gridNode);
 				var data = { title: gridNode.title };
-				if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
-				if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url;
+				//if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
+				//if(gridNode.type == app.GridNodes.GridNodeType.bookmark) data.url = gridNode.url;
+				data.url = gridNode.url;
 				browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
 				browser.bookmarks.update(gridNode.id, data).then(function(){
 					browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
 				});
-				app.GridNodes.saveNode(gridNode);
 			});
 		} else {
 			browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
+			app.GridNodes.saveNode(gridNode);
 			var data = { title: gridNode.title };
-			if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
+			//if(gridNode.imageMode) data.imageMode = gridNode.imageMode;
 			browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
 			browser.bookmarks.update(gridNode.id, data).then(function(){
 				browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
 			});
-			app.GridNodes.saveNode(gridNode);
 		}
 	}
 	if(callback) callback(gridNode);
@@ -655,12 +691,15 @@ app.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of
 			break;
 		case app.GridNodes.GridNodeType.bookmark:
 			app.SiteInfos.fromFrame(gridNode.url, function(infos){
-				if(infos){
-					if(gridNode.titleLocked!=true) gridNode.title = infos.title;
-					gridNode.image = infos.screenshot;
-				} else {
-					gridNode.image = '0';
+				if(gridNode.imageLocked!=true){
+					if(infos){
+						if(gridNode.titleLocked!=true) gridNode.title = infos.title;
+						gridNode.image = infos.screenshot;
+					} else {
+						gridNode.image = '0';
+					}
 				}
+			
 				delete gridNode.__isLoading;
 				app.GridNodes.saveNode(gridNode);
 				if(callback) callback(infos);
@@ -695,11 +734,13 @@ app.GridNodes.capturePage = function(gridNode, callback){
 			break;
 		case app.GridNodes.GridNodeType.bookmark:
 			app.SiteInfos.fromNewTab(gridNode.url, function(infos){
-				if(infos){
-					if(gridNode.titleLocked!=true) gridNode.title = infos.title;
-					gridNode.image = infos.screenshot;
-				} else {
-					gridNode.image = '0';
+				if(gridNode.imageLocked!=true){
+					if(infos){
+						if(gridNode.titleLocked!=true) gridNode.title = infos.title;
+						gridNode.image = infos.screenshot;
+					} else {
+						gridNode.image = '0';
+					}
 				}
 				delete gridNode.__isLoading;
 				app.GridNodes.saveNode(gridNode);

src/js/dial.js

@@ -288,10 +288,13 @@ dial.initStyles = function(){
 	if(app.settings.grid.cells.backgroundColor) dial.styles.grid.linkPanel.backgroundColor = app.settings.grid.cells.backgroundColor;
 	dial.styles.grid.linkPanelHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:first-child { }')].style;
 	if(app.settings.grid.cells.backgroundColorHover) dial.styles.grid.linkPanelHover.backgroundColor = app.settings.grid.cells.backgroundColorHover;
+	else dial.styles.grid.linkPanelHover.backgroundColor = 'transparent';
 	dial.styles.grid.linkTitle = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:last-child { height: ' + app.settings.grid.cells.titleHeight + 'px; font-size: ' + app.settings.grid.cells.titleFontSize + 'pt; font-family: ' + app.settings.grid.cells.titleFont + 'pt; text-align: center; overflow: hidden; color: ' + app.settings.grid.cells.titleColor + '; border-top: ' + app.settings.grid.cells.titleBorderSize + 'px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
 	if(app.settings.grid.cells.titleBackgroundColor) dial.styles.grid.linkTitle.backgroundColor = app.settings.grid.cells.titleBackgroundColor;
+	else dial.styles.grid.linkTitle.backgroundColor = 'transparent';
 	dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
 	if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover;
+	else dial.styles.grid.linkTitleHover.backgroundColor = 'transparent';
 	dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style;
 	dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; }')].style;
 	applyImageMode(app.settings.grid.backIconMode, dial.styles.grid.linkBack);
@@ -342,10 +345,23 @@ dial.initGrid = function(){
 				}
 				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);
+				ev.dataTransfer.setData("text/plain", JSON.stringify({parentId: app.node.id, index: index}));
 			}
 			function dragover_handler(ev) {
 				ev.preventDefault();
+				var data = ev.dataTransfer.getData("text");
+				try {
+					data = JSON.parse(data);
+				} catch(e) {
+					data = null;
+				}
+				if(!data){
+					ev.dataTransfer.dropEffect = "none";
+					return;
+				} else if(data.parentId != app.node.id){
+					ev.dataTransfer.dropEffect = "none";
+					return;
+				}
 				if(app.settings.grid.backNode && dial.path != '/'){
 					var gridIndex = 0;
 					if(ev.target.tagName == 'DIV') gridIndex = +(ev.target.parentElement.parentElement.getAttribute('gridindex'));
@@ -359,7 +375,15 @@ dial.initGrid = function(){
 			function drop_handler(ev) {
 				ev.preventDefault();
 				if(ev.buttons == 1) return;
-				var StartIndex = ev.dataTransfer.getData("text");
+				var data = ev.dataTransfer.getData("text");
+				try {
+					data = JSON.parse(data);
+				} catch(e) {
+					data = null;
+				}
+				if(!data) return;
+				else if(data.parentId != app.node.id) return;
+				var StartIndex = data.index;
 				var EndIndex = 0;
 				if(ev.target.tagName == 'DIV'){
 					EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.parentElement.parentElement.getAttribute('gridindex'));
@@ -391,8 +415,8 @@ dial.updateGridLayout = function(){
 		var cellHeight = fullHeight / app.settings.grid.rows;
 		var linkWidth = 0;
 		var linkHeight = 0;
-		if(cellWidth <= cellHeight * 4 / 3) cellHeight = cellWidth / 4 * 3;
-		else cellWidth = cellHeight / 3 * 4;
+		if(cellWidth <= cellHeight * app.settings.grid.ratioX / app.settings.grid.ratioY) cellHeight = cellWidth / app.settings.grid.ratioX * app.settings.grid.ratioY;
+		else cellWidth = cellHeight / app.settings.grid.ratioY * app.settings.grid.ratioX;
 		linkWidth = cellWidth - 2 * (cellsMargin + 1) - 2 * borderSize;
 		linkHeight = cellHeight - 2 * (cellsMargin + 1) - 2 * borderSize - titleBorderSize;
 		return {

src/js/properties.js

@@ -26,6 +26,7 @@ app.init = function(){
 			switch(node.type){
 				case app.GridNodes.GridNodeType.folder:
 					TitleLocked.parentNode.style.display = 'none';
+					ImageLocked.parentNode.style.display = 'none';
 					Url.parentNode.parentNode.style.display = 'none';
 					if(node.image){
 						if(node.image.indexOf('url(')>=0) Image = node.image;
@@ -36,6 +37,7 @@ app.init = function(){
 					break;
 				case app.GridNodes.GridNodeType.bookmark:
 					TitleLocked.checked = (node.titleLocked==true);
+					ImageLocked.checked = (node.imageLocked==true);
 					ImageDefault.style.display = 'none';
 					Url.value = node.url;
 					if(node.image.indexOf('url(')>=0) Image = node.image;
@@ -102,7 +104,7 @@ app.init = function(){
 				app.Messages.updateNode(app.node.id, { title: Title.value, image: Image, imageMode: +(ImageMode.value) })
 				break;
 			case app.GridNodes.GridNodeType.bookmark:
-				app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) })
+				app.Messages.updateNode(app.node.id, { title: Title.value, titleLocked: TitleLocked.checked, imageLocked: ImageLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) })
 				break;
 		}
 	}

src/js/settings.js

@@ -19,6 +19,7 @@ app.init = function(){
 	});
 	app.Messages.getSettings(function(settings){
 		app.settings = settings;
+		MenuShowAdd.checked = app.settings.menuShowAdd;
 		BackgroundColor.value = app.settings.backgroundColor;
 		BackgroundImage = app.settings.backgroundImage;
 		BackgroundMode.value = app.settings.backgroundMode;
@@ -28,6 +29,8 @@ app.init = function(){
 		BackgroundPreview.style.backgroundSize = '100% 100%';
 		GridRoot.value = app.settings.grid.root;
 		GridRows.value = app.settings.grid.rows;
+		GridRatioX.value = app.settings.grid.ratioX;
+		GridRatioY.value = app.settings.grid.ratioY;
 		GridMargins.value = app.settings.grid.margin;
 		GridColumns.value = app.settings.grid.columns;
 		GridBackNode.checked = app.settings.grid.backNode;
@@ -69,6 +72,7 @@ app.init = function(){
 		GridCellsTitleBackgroundColor.value = app.settings.grid.cells.titleBackgroundColor;
 		GridCellsTitleBackgroundColorHover.value = app.settings.grid.cells.titleBackgroundColorHover;
 		GridCellsTitleBackgroundTransparentHover.checked = (app.settings.grid.cells.titleBackgroundColorHover == null);
+		GridCellsSnapshotDelay.value = app.settings.grid.cells.snapshotDelay;
 	});
 
 	BtnOk.onclick = function(){
@@ -76,12 +80,15 @@ app.init = function(){
 		window.frameElement.popup.close();
 	}
 	BtnApply.onclick = function(){
+		app.settings.menuShowAdd = MenuShowAdd.checked;
 		app.settings.backgroundColor = BackgroundColor.value;
 		app.settings.backgroundImage = BackgroundImage;
 		app.settings.backgroundMode = +(BackgroundMode.value);
 		app.settings.grid.rows = +(GridRows.value);
 		app.settings.grid.margin = +(GridMargins.value);
 		app.settings.grid.columns = +(GridColumns.value);
+		app.settings.grid.ratioX = GridRatioX.value;
+		app.settings.grid.ratioY = GridRatioY.value;
 		app.settings.grid.backNode = GridBackNode.checked;
 		app.settings.grid.backIconMode = +(GridBackMode.value);
 		app.settings.grid.backIcon = GridBackImage;
@@ -115,6 +122,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.cells.snapshotDelay = GridCellsSnapshotDelay.value;
 		app.settings.grid.root = GridRoot.value;
 		browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
 	}
@@ -158,6 +166,19 @@ app.init = function(){
 		fileReader.readAsDataURL(BackgroundImageFile.files[0]);
 	}
 
+	GridRows.onchange = function(){
+		if(GridRatioAuto.checked){
+			GridRatioX.value = GridColumns.value;
+			GridRatioY.value = GridRows.value;
+		}
+	}
+	GridColumns.onchange = function(){
+		if(GridRatioAuto.checked){
+			GridRatioX.value = GridColumns.value;
+			GridRatioY.value = GridRows.value;
+		}
+	}
+
 	GridBackImageReset.onclick = function(){
 		GridBackImage = 'url(/img/back.png)';
 		GridBackPreview.style.backgroundImage = GridBackImage;

src/manifest.json

@@ -2,7 +2,7 @@
 
   "manifest_version": 2,
   "name": "Quick Dial",
-  "version": "0.1.7",
+  "version": "0.1.11",
   "author": "MatMoul",
   "homepage_url": "https://github.com/MatMoul/quickdial-webext",
   "developer": {