Version 0.1.20

Locale/hebrew

.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,44 @@
+#!/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
+sed -i 's/quickdial@matmoul.com/quickdialtest@matmoul.com/' 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/de/messages.json

@@ -1,9 +1,4 @@
 {
-  "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."

src/_locales/en/messages.json

@@ -1,9 +1,4 @@
 {
-  "extensionDescription": {
-    "message": "Quick Dial, a dial page inspired from fast dial.",
-    "description": "Description of the extension."
-  },
-
   "menuAddToQuickDial": {
     "message": "Add to Quick Dial",
     "description": "Text of add bookmark menu item."

src/_locales/es/messages.json

@@ -0,0 +1,67 @@
+{
+  "menuAddToQuickDial": {
+    "message": "Agregar a Quick Dial",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "menuNew": {
+    "message": "Nuevo",
+    "description": "Text of new menu item."
+  },
+
+  "menuNewBookmark": {
+    "message": "Marcador",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Dirección del nuevo marcador:",
+    "description": "Text of the add bookmark prompt."
+  },
+
+  "menuNewFolder": {
+    "message": "Carpeta",
+    "description": "Text of add folder menu item."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Nombre de la nueva carpeta:",
+    "description": "Text of the add folder prompt."
+  },
+
+  "menuProperties": {
+    "message": "Propiedades",
+    "description": "Text of properties menu item."
+  },
+
+  "menuRefreshItem": {
+    "message": "Actualizar",
+    "description": "Text of refresh menu item."
+  },
+
+  "menuCaptureHere": {
+    "message": "Capturar aquí",
+    "description": "Text of capture here menu item."
+  },
+
+  "menuCapturePage": {
+    "message": "Capturar en una nueva pestaña",
+    "description": "Text of capture menu item."
+  },
+
+  "menuDeleteItem": {
+    "message": "Eliminar",
+    "description": "Text of delete menu item."
+  },
+
+  "deleteItemConfimation": {
+    "message": "¿Eliminar $1 ?",
+    "description": "Text of delete confirmation."
+  },
+
+  "menuSettings": {
+    "message": "Propiedades de Quick Dial",
+    "description": "Text of settings menu item."
+  }
+
+}

src/_locales/fr/messages.json

@@ -1,9 +1,4 @@
 {
-  "extensionDescription": {
-    "message": "Quick Dial, page dial inspirée de fast dial.",
-    "description": "Description of the extension."
-  },
-
   "menuAddToQuickDial": {
     "message": "Ajouter à Quick Dial",
     "description": "Text of add bookmark menu item."

src/_locales/he_IL/messages.json

@@ -0,0 +1,67 @@
+{
+  "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/_locales/it/messages.json

@@ -1,9 +1,4 @@
 {
-  "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."

src/_locales/pl/messages.json

@@ -0,0 +1,67 @@
+{
+  "menuAddToQuickDial": {
+    "message": "Dodaj do Quick Dial",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "menuNew": {
+    "message": "Nowy",
+    "description": "Text of new menu item."
+  },
+
+  "menuNewBookmark": {
+    "message": "Zakładka",
+    "description": "Text of add bookmark menu item."
+  },
+
+  "AddBookmarkPrompt": {
+    "message": "Wprowadź nowy adres URL zakładki:",
+    "description": "Text of the add bookmark prompt."
+  },
+
+  "menuNewFolder": {
+    "message": "Folder",
+    "description": "Text of add folder menu item."
+  },
+
+  "AddFolderPrompt": {
+    "message": "Wprowadź nazwę nowego folderu:",
+    "description": "Text of the add folder prompt."
+  },
+
+  "menuProperties": {
+    "message": "Właściwości",
+    "description": "Text of properties menu item."
+  },
+
+  "menuRefreshItem": {
+    "message": "Odśwież",
+    "description": "Text of refresh menu item."
+  },
+
+  "menuCaptureHere": {
+    "message": "Zdjęcie tutaj",
+    "description": "Text of capture here menu item."
+  },
+
+  "menuCapturePage": {
+    "message": "Zdjęcie na nowej karcie",
+    "description": "Text of capture menu item."
+  },
+
+  "menuDeleteItem": {
+    "message": "Usuń",
+    "description": "Text of delete menu item."
+  },
+
+  "deleteItemConfimation": {
+    "message": "Usuń $1 ?",
+    "description": "Text of delete confirmation."
+  },
+
+  "menuSettings": {
+    "message": "Ustawienia Quick Dial",
+    "description": "Text of settings menu item."
+  }
+
+}

src/_locales/pt_BR/messages.json

@@ -0,0 +1,67 @@
+{
+  "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/ru/messages.json

@@ -1,9 +1,4 @@
 {
-  "extensionDescription": {
-    "message": "Quick Dial, вдохновление умершим расширением Fast Dial.",
-    "description": "Description of the extension."
-  },
-
   "menuAddToQuickDial": {
     "message": "Добавить в Quick Dial",
     "description": "Text of add bookmark menu item."

src/_locales/sr/messages.json

@@ -0,0 +1,67 @@
+{
+  "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/_locales/uk/messages.json

@@ -0,0 +1,67 @@
+{
+  "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

@@ -43,13 +43,21 @@
 					
 						<tr>
 							<td><span>Image :</span></td>
-							<td colspan="2">
+							<td>
+								<select id="ImageMode">
+									<option value="-1">Default</option>
+									<option value="0">Stretch</option>
+									<option value="1">Cover</option>
+									<option value="2">Contain</option>
+									<option value="3">Center</option>
+								</select>
 								<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;">
 							</td>
+							<td style="width:20px"><input id="ImageLocked" type="checkbox" title="Lock image"></td>
 						</tr>
 						<tr>
 							<td></td>

src/html/settings.html

@@ -12,6 +12,7 @@
 			input[type=color] { width: 60px; }
 			.hidden { display: none; }
 			.Tab>table { width: 100%; border-collapse: collapse; }
+			.Tab>div { overflow: auto; }
 			.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; }
@@ -35,6 +36,17 @@
 							<td><span>Background Color :</span></td>
 							<td><input id="BackgroundColor" type="color"></td>
 						</tr>
+						<tr>
+							<td><span>Background Mode :</span></td>
+							<td>
+								<select id="BackgroundMode">
+									<option value="0">Stretch</option>
+									<option value="1">Cover</option>
+									<option value="2">Contain</option>
+									<option value="3">Center</option>
+								</select>
+							</td>
+						</tr>
 						<tr>
 							<td><span>Background Image :</span></td>
 							<td>
@@ -46,6 +58,22 @@
 							<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>
+
+						<tr>
+							<td>Open QD in new page :</td>
+							<td><input id="ButtonOpenInNewPage" type="checkbox"></td>
+						</tr>
+
+						<tr>
+							<td>Startpage timeout :</td>
+							<td><input id="StartupTimeout" type="number"></td>
+						</tr>
+
+
 					</table>
 				</div>
 				<div class="hidden">
@@ -53,13 +81,38 @@
 						<tr>
 							<td><span>Rows x Columns :</span></td>
 							<td>
-								<input id="GridRows" type="number">
+								<input id="GridRows" type="number" min="1">
-								<input id="GridColumns" type="number">
+								<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"></td>
+							<td><input id="GridMargins" type="number" min="0"></td>
+						</tr>
+						<tr>
+							<td><span>Open Bookmarks In :</span></td>
+							<td>
+								<select id="GridOpenBookmarksIn">
+									<option value="0">Default</option>
+									<option value="1">New Tab</option>
+								</select>
+							</td>
+						</tr>
+						<tr>
+							<td><span>Open Folders In :</span></td>
+							<td>
+								<select id="GridOpenFoldersIn">
+									<option value="0">Default</option>
+									<option value="1">New Tab</option>
+								</select>
+							</td>
 						</tr>
 						<tr>
 							<td><span>Back Button :</span></td>
@@ -70,12 +123,28 @@
 						<tr>
 							<td>
 								<div>Back :</div>
+								<div>
+									<select id="GridBackMode">
+										<option value="0">Stretch</option>
+										<option value="1">Cover</option>
+										<option value="2">Contain</option>
+										<option value="3">Center</option>
+									</select>
+								</div>
 								<button id="GridBackImageReset">Reset</button>
 								<input id="GridBackImageFile" type="file" style="width:220px;">
 								<div id="GridBackPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
 							</td>
 							<td>
 								<div>Folder :</div>
+								<div>
+									<select id="GridFolderMode">
+										<option value="0">Stretch</option>
+										<option value="1">Cover</option>
+										<option value="2">Contain</option>
+										<option value="3">Center</option>
+									</select>
+								</div>
 								<button id="GridFolderImageReset">Reset</button>
 								<input id="GridFolderImageFile" type="file" style="width:220px;">
 								<div id="GridFolderPreview" style="width: 220px; height: 150px; border: 1px solid #000000"></div>
@@ -98,13 +167,23 @@
 						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
-							<td><input id="GridCellsMargins" type="number"></td>
+							<td><input id="GridCellsMargins" type="number" min="0"></td>
-							<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></td>
+							<td><input id="GridCellsMarginsHover" type="number" min="0"></td>
+						</tr>
+						<tr>
+							<td><span>Opacity :</span></td>
+							<td><input id="GridCellsOpacity" type="number" min="0" max="100"></td>
+							<td><input id="GridCellsOpacityHover" type="number" min="0" max="100"></td>
+						</tr>
+						<tr>
+							<td><span>Border Size :</span></td>
+							<td><input id="GridCellsBorderSize" type="number" min="0"></td>
+							<td><input id="GridCellsBorderSizeHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Border Radius :</span></td>
-							<td><input id="GridCellsBorderRadius" type="number"></td>
+							<td><input id="GridCellsBorderRadius" type="number" min="0"></td>
-							<td><input id="GridCellsBorderRadiusHover" type="number"></td>
+							<td><input id="GridCellsBorderRadiusHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Background Transparent :</span></td>
@@ -124,17 +203,22 @@
 						<tr>
 							<td><span>Title :</span></td>
 							<td><input id="GridCellsTitle" type="checkbox"></td>
-							<td></td>
+							<td><input id="GridCellsTitleHover" type="checkbox"></td>
 						</tr>
 						<tr>
 							<td><span>Title Height :</span></td>
-							<td><input id="GridCellsTitleHeight" type="number"></td>
+							<td><input id="GridCellsTitleHeight" type="number" min="0"></td>
-							<td></td>
+							<td><input id="GridCellsTitleHeightHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Title Font Size :</span></td>
-							<td><input id="GridCellsTitleFontSize" type="number"></td>
+							<td><input id="GridCellsTitleFontSize" type="number" min="0"></td>
-							<td></td>
+							<td><input id="GridCellsTitleFontSizeHover" type="number" min="0"></td>
+						</tr>
+						<tr>
+							<td><span>Title Border Size :</span></td>
+							<td><input id="GridCellsTitleBorderSize" type="number" min="0"></td>
+							<td><input id="GridCellsTitleBorderSizeHover" type="number" min="0"></td>
 						</tr>
 						<tr>
 							<td><span>Title Text Color :</span></td>
@@ -151,6 +235,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>
@@ -162,4 +250,4 @@
 			<button id="BtnCancel">Cancel</button>
 		</div>
 	</body>
-</html>
+</html>

src/js/dial.js

@@ -7,9 +7,12 @@ var dial = {
 };
 
 document.addEventListener("DOMContentLoaded", function(event) {
-	document.body.style.backgroundColor = utils.getBackgroundColor();
+  document.body.style.backgroundColor = utils.getBackgroundColor();
 	app.init();
 	dial.init();
+  window.setTimeout(function(){
+    if(! app.settings) app.init();
+  }, 500);
 });
 
 window.addEventListener('resize', function(){
@@ -102,7 +105,7 @@ app.Messages.getSettings = function(callback){
 		} else {
 			browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback, callback);
 		}
-	});
+	}, callback);
 };
 app.Messages.getNode = function(path, callback){
 	browser.runtime.getBackgroundPage().then(function(page){
@@ -160,10 +163,11 @@ app.GridNodes._changed = function(node){
 
 
 dial.init = function(){
-	dial.initMenus();
+	//dial.initMenus();
 	dial.Title = document.createElement('title');
 	document.head.appendChild(dial.Title);
 };
+/*
 dial.initMenus = function(){
 	document.body.setAttribute('contextmenu', 'page');
 	dial.PageMenu = document.createElement('menu');
@@ -247,30 +251,60 @@ dial.initMenus = function(){
 	dial.ItemMenu.appendChild(dial.ItemMenuSettings);
 	document.body.appendChild(dial.ItemMenu);
 }
+*/
 dial.initStyles = function(){
+	function applyImageMode(imageMode, target){
+		switch(imageMode){
+			case 0:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = '100% 100%';
+				break;
+			case 1:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'cover';
+				target.backgroundPosition = 'center';
+				break;
+			case 2:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'contain';
+				target.backgroundPosition = 'center';
+				break;
+			case 3:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundPosition = 'center';
+				break;
+		}
+	}
+
 	var oldStyle = dial.Style;
 	dial.Style = document.createElement('style'), StyleSheet;
 	document.head.appendChild(dial.Style);
 	dial.styles = {};
 	dial.styles.html = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('html { height: 100%; }')].style;
-	dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex;	width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
+	dial.styles.body = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('body { user-select: none; -moz-user-select: none; display: flex; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: ' + app.settings.backgroundColor + '; background-image: ' + app.settings.backgroundImage + '; }')].style;
+	applyImageMode(app.settings.backgroundMode, dial.styles.body);
 	dial.styles.grid = {};
 	dial.styles.grid.grid = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid { border-collapse: collapse; margin: auto; }')].style;
 	dial.styles.grid.cell = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td { margin: 0px; padding: 0px; }')].style;
-	dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; border: 1px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style;
+	dial.styles.grid.cellHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td:hover {}')].style;
-	//dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
+	dial.styles.grid.link = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a { display: block; outline: none; overflow: hidden; text-decoration: none; margin: ' + app.settings.grid.cells.margin + 'px; opacity: ' + app.settings.grid.cells.opacity + '; border: ' + app.settings.grid.cells.borderSize + 'px solid ' + app.settings.grid.cells.borderColor + '; border-radius: ' + app.settings.grid.cells.borderRadius + 'px; }')].style;
-	dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; margin: ' + app.settings.grid.cells.marginHover + 'px; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
+	dial.styles.grid.linkHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover { border-color: ' + app.settings.grid.cells.borderColorHover + '; border-width: ' + app.settings.grid.cells.borderSizeHover + 'px; margin: ' + app.settings.grid.cells.marginHover + 'px; opacity: ' + app.settings.grid.cells.opacityHover + '; border-radius: ' + app.settings.grid.cells.borderRadiusHover + 'px; }')].style;
 	dial.styles.grid.linkPanel = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a>div:first-child { background-repeat: no-repeat; }')].style;
 	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;
-	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: 1px solid ' + app.settings.grid.cells.borderColor + '; }')].style;
+	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 + '; 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;
-	dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { color: ' + app.settings.grid.cells.titleColorHover + '; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
+	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 + '; background-repeat: no-repeat; background-position: center center; }')].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);
 	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;
+	applyImageMode(app.settings.grid.folderIconMode, dial.styles.grid.linkFolder);
 	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);
@@ -296,16 +330,19 @@ dial.initGrid = function(){
 			link.appendChild(document.createElement('div'));
 			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;
+							//dial.ItemMenuCaptureHere.hidden = false;
+							dial.ItemMenuCaptureHere.hidden = true;
 							break;
 					}
 				}
+				*/
 			};
 			
 			function dragstart_handler(ev) {
@@ -313,12 +350,26 @@ dial.initGrid = function(){
 					ev.preventDefault();
 					return;
 				}
+				if(dial.page == 0) dial.page = 1;
 				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'));
@@ -332,7 +383,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'));
@@ -354,29 +413,79 @@ dial.initGrid = function(){
 	return dial.Grid;
 };
 dial.updateGridLayout = function(){
-	var fullWidth = dial.Grid.parentElement.offsetWidth - 2 * app.settings.grid.margin;
+	var parentWidth = dial.Grid.parentElement.offsetWidth;
-	var fullHeight = dial.Grid.parentElement.offsetHeight - 2 * app.settings.grid.margin;
+	var parentHeight = dial.Grid.parentElement.offsetHeight;
-	var linkWidth = fullWidth / app.settings.grid.columns;
-	var linkHeight = fullHeight / app.settings.grid.rows;
-	if(linkWidth <= linkHeight * 4 / 3) linkHeight = linkWidth / 4 * 3;
-	else linkWidth = linkHeight / 3 * 4;
 	
-	dial.styles.grid.cell.width = linkWidth.toString() + 'px';
+	function calc(gridMargin, cellsMargin, borderSize, titleBorderSize){
-	dial.styles.grid.cell.height = linkHeight.toString() + 'px';
+		var fullWidth = parentWidth - 2 * gridMargin;
+		var fullHeight = parentHeight - 2 * gridMargin;
+		var cellWidth = fullWidth / app.settings.grid.columns;
+		var cellHeight = fullHeight / app.settings.grid.rows;
+		var linkWidth = 0;
+		var linkHeight = 0;
+		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 {
+			cellWidth: cellWidth,
+			cellHeight: cellHeight,
+			linkWidth: linkWidth,
+			linkHeight: linkHeight
+		};
+	}
 
-	linkWidth = linkWidth - 2 * (app.settings.grid.cells.margin + 1);
+	var values = calc(app.settings.grid.margin, app.settings.grid.cells.margin, app.settings.grid.cells.borderSize, app.settings.grid.cells.titleBorderSize);
-	linkHeight = linkHeight - 2 * (app.settings.grid.cells.margin + 1);
+	dial.styles.grid.cell.width = values.cellWidth.toString() + 'px';
-	
+	dial.styles.grid.cell.height = values.cellHeight.toString() + 'px';
-	dial.styles.grid.link.width = linkWidth.toString() + 'px';
+	dial.styles.grid.link.width = values.linkWidth.toString() + 'px';
-	dial.styles.grid.link.height = linkHeight.toString() + 'px';
+	dial.styles.grid.link.height = values.linkHeight.toString() + 'px';
-	if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).toString() + 'px';
+	if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (values.linkHeight - app.settings.grid.cells.titleHeight - 1 - app.settings.grid.cells.titleBorderSize).toString() + 'px';
-	else dial.styles.grid.linkPanel.height = linkHeight.toString() + 'px';
+	else dial.styles.grid.linkPanel.height = values.linkHeight.toString() + 'px';
+
+	values = calc(app.settings.grid.margin, app.settings.grid.cells.marginHover, app.settings.grid.cells.borderSizeHover, app.settings.grid.cells.titleBorderSizeHover);
+	dial.styles.grid.cellHover.width = values.cellWidth.toString() + 'px';
+	dial.styles.grid.cellHover.height = values.cellHeight.toString() + 'px';
+	dial.styles.grid.linkHover.width = values.linkWidth.toString() + 'px';
+	dial.styles.grid.linkHover.height = values.linkHeight.toString() + 'px';
+	if(app.settings.grid.cells.titleHover) dial.styles.grid.linkPanelHover.height = (values.linkHeight - app.settings.grid.cells.titleHeightHover - 1 - app.settings.grid.cells.titleBorderSizeHover).toString() + 'px';
+	else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px';
 };
 dial.populateGrid = function(){
+	function applyImageMode(imageMode, target){
+		switch(imageMode){
+			case -1:
+				target.backgroundRepeat = '';
+				target.backgroundSize = '';
+				target.backgroundPosition = '';
+				break;
+			case 0:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = '100% 100%';
+				target.backgroundPosition = '';
+				break;
+			case 1:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'cover';
+				target.backgroundPosition = 'center';
+				break;
+			case 2:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'contain';
+				target.backgroundPosition = 'center';
+				break;
+			case 3:
+				target.backgroundRepeat = 'no-repeat';
+				target.backgroundSize = 'auto auto';
+				target.backgroundPosition = 'center';
+				break;
+		}
+	}
 	populateEmpty = function(link){
 		link.Node = null;
 		link.className = 'Empty';
 		link.childNodes[0].style.backgroundImage = '';
+		if(link.target) delete link.target;
 		link.href = null;
 		link.onclick = null;
 		link.removeAttribute('contextmenu');
@@ -386,6 +495,7 @@ dial.populateGrid = function(){
 		link.className = 'Back';
 		link.childNodes[0].style.backgroundImage = '';
 		link.childNodes[1].innerText = 'Back';
+		if(link.target) delete link.target;
 		link.href = '#';
 		link.onclick = function(){ window.history.back(); }
 		link.removeAttribute('contextmenu');
@@ -393,11 +503,21 @@ dial.populateGrid = function(){
 	populateFolder = function(link, node){
 		link.Node = node;
 		link.className = 'Folder';
+		if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
+		else applyImageMode(-1, link.childNodes[0].style);
 		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;
+		switch(app.settings.grid.openFolderMethod){
+			case 0:
+				if(link.target) delete link.target;
+				break;
+			case 1:
+				link.target = '_blank';
+				break;
+		}
 		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);
 		link.onclick = null;
@@ -405,6 +525,8 @@ dial.populateGrid = function(){
 	}
 	populateBookmark = function(link, node){
 		link.Node = node;
+		if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
+		else applyImageMode(-1, link.childNodes[0].style);
 		if(node.image){
 			link.className = 'Bookmark';
 			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
@@ -415,6 +537,14 @@ dial.populateGrid = function(){
 			dial.refreshNode(link);
 		}
 		link.childNodes[1].innerText = node.title;
+		switch(app.settings.grid.openBookmarkMethod){
+			case 0:
+				if(link.target) delete link.target;
+				break;
+			case 1:
+				link.target = '_blank';
+				break;
+		}
 		link.href = node.url;
 		link.onclick = null;
 		link.setAttribute('contextmenu', 'item');

src/js/properties.js

@@ -19,11 +19,14 @@ app.init = function(){
 		app.Messages.getNodeByID(new URL(window.location).searchParams.get('id'), function(node){
 			app.node = node;
 			Title.value = node.title;
+			if(node.imageMode == 0) ImageMode.value = 0;
+			else if(node.imageMode) ImageMode.value = node.imageMode;
 			ImagePreview.style.backgroundRepeat = 'no-repeat';
 			ImagePreview.style.backgroundSize = '100% 100%';
 			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;
@@ -34,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;
@@ -97,10 +101,10 @@ app.init = function(){
 	BtnApply.onclick = function(){
 		switch(app.node.type){
 			case app.GridNodes.GridNodeType.folder:
-				app.Messages.updateNode(app.node.id, { title: Title.value, image: Image })
+				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 })
+				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,27 +19,41 @@ 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;
 		BackgroundPreview.style.backgroundColor = app.settings.backgroundColor;
 		BackgroundPreview.style.backgroundImage = app.settings.backgroundImage;
 		BackgroundPreview.style.backgroundRepeat = 'no-repeat';
 		BackgroundPreview.style.backgroundSize = '100% 100%';
+		ButtonOpenInNewPage.checked = app.settings.openQuickDialInNewPage;
+    StartupTimeout.value = app.settings.startpageTimeout;
 		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;
+		GridOpenBookmarksIn.value = app.settings.grid.openBookmarkMethod;
+		GridOpenFoldersIn.value = app.settings.grid.openFolderMethod;
 		GridBackNode.checked = app.settings.grid.backNode;
+		GridBackMode.value = app.settings.grid.backIconMode;
 		GridBackImage = app.settings.grid.backIcon;
 		GridBackPreview.style.backgroundImage = app.settings.grid.backIcon;
 		GridBackPreview.style.backgroundRepeat = 'no-repeat';
 		GridBackPreview.style.backgroundPosition = '50% 50%';
+		GridFolderMode.value = app.settings.grid.folderIconMode;
 		GridFolderImage = app.settings.grid.folderIcon;
 		GridFolderPreview.style.backgroundImage = app.settings.grid.folderIcon;
 		GridFolderPreview.style.backgroundRepeat = 'no-repeat';
 		GridFolderPreview.style.backgroundSize = '100% 100%';
 		GridCellsMargins.value = app.settings.grid.cells.margin;
 		GridCellsMarginsHover.value = app.settings.grid.cells.marginHover;
+		GridCellsOpacity.value = app.settings.grid.cells.opacity * 100;
+		GridCellsOpacityHover.value = app.settings.grid.cells.opacityHover * 100;
+		GridCellsBorderSize.value = app.settings.grid.cells.borderSize;
+		GridCellsBorderSizeHover.value = app.settings.grid.cells.borderSizeHover;
 		GridCellsBackgroundTransparent.checked = (app.settings.grid.cells.backgroundColor == null);
 		GridCellsBackgroundColor.value = app.settings.grid.cells.backgroundColor;
 		GridCellsBackgroundTransparentHover.checked = (app.settings.grid.cells.backgroundColorHover == null);
@@ -49,14 +63,20 @@ app.init = function(){
 		GridCellsBorderColor.value = app.settings.grid.cells.borderColor;
 		GridCellsBorderColorHover.value = app.settings.grid.cells.borderColorHover;
 		GridCellsTitle.checked = app.settings.grid.cells.title;
+		GridCellsTitleHover.checked = app.settings.grid.cells.titleHover;
 		GridCellsTitleHeight.value = app.settings.grid.cells.titleHeight;
+		GridCellsTitleHeightHover.value = app.settings.grid.cells.titleHeightHover;
 		GridCellsTitleFontSize.value = app.settings.grid.cells.titleFontSize;
+		GridCellsTitleFontSizeHover.value = app.settings.grid.cells.titleFontSizeHover;
+		GridCellsTitleBorderSize.value = app.settings.grid.cells.titleBorderSize;
+		GridCellsTitleBorderSizeHover.value = app.settings.grid.cells.titleBorderSizeHover;
 		GridCellsTitleColor.value = app.settings.grid.cells.titleColor;
 		GridCellsTitleColorHover.value = app.settings.grid.cells.titleColorHover;
 		GridCellsTitleBackgroundTransparent.checked = (app.settings.grid.cells.titleBackgroundColor == null);
 		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(){
@@ -64,17 +84,30 @@ 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.openQuickDialInNewPage = ButtonOpenInNewPage.checked;
+    app.settings.startpageTimeout = StartupTimeout.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.openBookmarkMethod = +(GridOpenBookmarksIn.value);
+		app.settings.grid.openFolderMethod = +(GridOpenFoldersIn.value);
 		app.settings.grid.backNode = GridBackNode.checked;
+		app.settings.grid.backIconMode = +(GridBackMode.value);
 		app.settings.grid.backIcon = GridBackImage;
+		app.settings.grid.folderIconMode = +(GridFolderMode.value);
 		app.settings.grid.folderIcon = GridFolderImage;
 		app.settings.grid.cells.margin = +(GridCellsMargins.value);
-		//app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
+		app.settings.grid.cells.marginHover = +(GridCellsMarginsHover.value);
-		app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
+		app.settings.grid.cells.opacity = +(GridCellsOpacity.value) / 100;
+		app.settings.grid.cells.opacityHover = +(GridCellsOpacityHover.value) / 100;
+		app.settings.grid.cells.borderSize = +(GridCellsBorderSize.value);
+		app.settings.grid.cells.borderSizeHover = +(GridCellsBorderSizeHover.value);
 		if(GridCellsBackgroundTransparent.checked == true) app.settings.grid.cells.backgroundColor = null;
 		else app.settings.grid.cells.backgroundColor = GridCellsBackgroundColor.value;
 		if(GridCellsBackgroundTransparentHover.checked == true) app.settings.grid.cells.backgroundColorHover = null;
@@ -84,14 +117,20 @@ app.init = function(){
 		app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
 		app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
 		app.settings.grid.cells.title = GridCellsTitle.checked;
+		app.settings.grid.cells.titleHover = GridCellsTitleHover.checked;
 		app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value;
+		app.settings.grid.cells.titleHeightHover = GridCellsTitleHeightHover.value;
 		app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
+		app.settings.grid.cells.titleFontSizeHover = GridCellsTitleFontSizeHover.value;
+		app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.value;
+		app.settings.grid.cells.titleBorderSizeHover = GridCellsTitleBorderSizeHover.value;
 		app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
 		app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
 		if(GridCellsTitleBackgroundTransparent.checked == true) app.settings.grid.cells.titleBackgroundColor = null;
 		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 } );
 	}
@@ -135,6 +174,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,14 +2,13 @@
 
   "manifest_version": 2,
   "name": "Quick Dial",
-  "version": "0.1.6",
+  "version": "0.1.20",
   "author": "MatMoul",
   "homepage_url": "https://github.com/MatMoul/quickdial-webext",
   "developer": {
     "name": "MatMoul",
     "url": "https://github.com/MatMoul/quickdial-webext"
   },
-  "description": "__MSG_extensionDescription__",
 
   "icons": {
 		"24": "img/24.png",
@@ -44,7 +43,7 @@
   "applications": {
     "gecko": {
       "id": "quickdial@matmoul.com",
-      "strict_min_version": "52.0"
+      "strict_min_version": "70.0"
     }
   },