Version 0.1.20

Locale/hebrew

.gitignore

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

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 +0,0 @@
-Add node settings popup
-Add custom image (thumbnails)
-Create style for popup
-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

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

@@ -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."
@@ -34,11 +29,21 @@
     "description": "Text of the add folder prompt."
   },
 
+  "menuProperties": {
+    "message": "Properties",
+    "description": "Text of properties menu item."
+  },
+
   "menuRefreshItem": {
     "message": "Refresh",
     "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/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."
@@ -34,11 +29,21 @@
     "description": "Text of the add folder prompt."
   },
 
+  "menuProperties": {
+    "message": "Propriétés",
+    "description": "Text of properties menu item."
+  },
+
   "menuRefreshItem": {
     "message": "Actualiser",
     "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/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

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

@@ -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/_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

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<link rel="shortcut icon" type="image/png" href="img/24.png" />
+		<title id="title">Quick Dial Node Propoerties</title>
+		<script type="text/javascript" src="/js/properties.js"></script>
+		<style>
+			body { margin: 0px; padding: 4px; font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
+			h1 { font-size: 11pt; text-decoration: underline; }
+			input[type=number] { width: 56px; }
+			input[type=color] { width: 60px; }
+			.hidden { display: none; }
+			.Tab>table { width: 100%; border-collapse: collapse; }
+			.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; }
+		</style>
+	</head>
+	<body>
+		<div id="Tabs" class="Tab">
+			<table>
+				<tr>
+					<td class="TabButtonActive">Main</td>
+					<td class="TabButton" style="display:none">Temp</td>
+					<td class="TabSpace"></td>
+				</tr>
+			</table>
+			<div>
+				<div>
+					<table style="width:100%">
+						<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 colspan="2"><input id="Url" type="text" style="width:100%"></td>
+						</tr>
+					
+					
+						<tr>
+							<td><span>Image :</span></td>
+							<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>
+							<td colspan="2"><div id="ImagePreview" style="width: 300px; height: 180px;"></div></td>
+						</tr>
+						
+					
+					</table>
+				</div>
+				<div class="hidden">
+				</div>
+			</div>
+		</div>
+
+		<div style="text-align: right; margin-top: 14px;">
+			<button id="BtnOk">OK</button>
+			<button id="BtnApply">Apply</button>
+			<button id="BtnCancel">Cancel</button>
+		</div>
+	</body>
+</html>

src/html/settings.html

@@ -12,10 +12,11 @@
 			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; }
-			.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">
@@ -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,18 +123,40 @@
 						<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>
 							</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>
@@ -92,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>
@@ -118,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>
@@ -145,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>

src/js/background.js

@@ -1,104 +1,175 @@
-var core = {}; // Main app object in background.js
+var app = {};  // App object
-var app = {};  // Shared app object with pages
 
-core.init = function(){ // Init module
+app.init = function(){ // Init module
-	core.Settings.init(function(){
+	app.Settings.init(function(){
-		core.GridNodes.sync(core.node, core.settings.grid.root, function(){
+		app.Messages.init();
-			core.Messages.init();
+		browser.runtime.sendMessage({ cmd: app.Messages.Commands.settingsChanged });
-			browser.runtime.sendMessage({ cmd: 'SettingsChanged' });
+		browser.browserAction.onClicked.addListener(function(e){
-			browser.runtime.sendMessage({ cmd: 'GridNodesLoaded' });
+			if(app.settings.openQuickDialInNewPage) browser.tabs.create({});
-			core.Bookmarks.initListener();
+			else browser.tabs.update(e.id, {url: '/dial'}).then();				
 		});
+    browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded });
+    app.ContextMenus.initMenu();
+    window.setTimeout(function(){
+      app.GridNodes.sync(app.node, app.settings.grid.root, function(){
+        app.Bookmarks.initListener();
+      });
+    }, 500);
+		
+		// Start page workaround :
+    if(app.settings.startpageTimeout>0){
+      setTimeout(function(){
+        browser.tabs.query({}).then( function(tabs) {
+          tabs.forEach(function(itm){
+            if(itm.url=='about:blank'){
+              browser.tabs.update(itm.id, {url: browser.extension.getURL('dial')});
+            }
+          });
+        });
+      }, app.settings.startpageTimeout);
+    }
+		
 	});
 };
 
-core.Messages = {}; // Messages helper object
+app.Messages = {}; // Messages helper object
-core.Messages.init = function(){ // Init Messages Listeners
+app.Messages.Commands = {
+	getSettings: 0,
+	setSettings: 1,
+	getNode: 2,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
+	settingsChanged: 100,
+	gridNodesLoaded: 101
+};
+app.Messages.init = function(){ // Init Messages Listeners
 	browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
 		switch(request.cmd){
-			case 'GetSettings':
+			case app.Messages.Commands.getSettings:
-				sendResponse(core.settings);
+				sendResponse(app.settings);
 				break;
-			case 'SetSettings':
+			case app.Messages.Commands.setSettings:
-				core.settings = request.settings;
+				let rootChanged = (app.settings.grid.root!=request.settings.grid.root);
-				core.Settings.save();
+				app.settings = request.settings;
-				sendResponse(core.settings);
+				app.Settings.save();
-				browser.runtime.sendMessage( { cmd: 'SettingsChanged' } );
+				sendResponse(app.settings);
-				browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+				browser.runtime.sendMessage( { cmd: app.Messages.Commands.settingsChanged } );
+				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 } );
+				}
+				app.ContextMenus.updateMenu();
 				break;
-			case 'GetNode':
+			case app.Messages.Commands.getNodeByID:
-				sendResponse(core.GridNodes.getNode(core.node, request.path.substr(1)));
+				var nodes = app.GridNodes.getNodeWithParents(request.id);
+				if(nodes) sendResponse(nodes[nodes.length-1]);
+				else sendResponse(null);
 				break;
-			case 'SetNodeIndex':
+			case app.Messages.Commands.updateNode:
-				core.GridNodes.setNodeIndex(core.GridNodes.getNode(core.node, request.path.substr(1)), request.index, request.newIndex, function(){
+				app.GridNodes.updateNode(app.GridNodes.getNodeById(request.id), request.value, function(){
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
-			case 'CreateBookmark':
+			case app.Messages.Commands.getNode:
-				core.GridNodes.createBookmark(core.GridNodes.getNode(core.node, request.path.substr(1)), request.url, request.title, function(){
+				sendResponse(app.GridNodes.getNode(app.node, request.path.substr(1)));
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+				break;
+			case app.Messages.Commands.setNodeIndex:
+				app.GridNodes.setNodeIndex(app.GridNodes.getNode(app.node, request.path.substr(1)), request.index, request.newIndex, function(){
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
-			case 'CreateFolder':
+			case app.Messages.Commands.createBookmark:
-				core.GridNodes.createFolder(core.GridNodes.getNode(core.node, request.path.substr(1)), request.name, function(){
+				app.GridNodes.createBookmark(app.GridNodes.getNode(app.node, request.path.substr(1)), request.url, request.title, function(){
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
-			case 'DeleteNode':
+			case app.Messages.Commands.createFolder:
-				core.GridNodes.deleteNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id, function(){
+				app.GridNodes.createFolder(app.GridNodes.getNode(app.node, request.path.substr(1)), request.name, function(){
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
-			case 'RefreshNode':
+			case app.Messages.Commands.deleteNode:
-				core.GridNodes.refreshNode(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){
+				app.GridNodes.deleteNode(app.GridNodes.getNode(app.node, request.path.substr(1)), request.id, function(){
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
-			case 'CapturePage':
+			case app.Messages.Commands.refreshNode:
-				core.GridNodes.capturePage(core.GridNodes.getChildNode(core.GridNodes.getNode(core.node, request.path.substr(1)), request.id), function(){
+				app.GridNodes.refreshNode(app.GridNodes.getChildNode(app.GridNodes.getNode(app.node, request.path.substr(1)), request.id), function(){
-					browser.runtime.sendMessage( { cmd: 'GridNodesLoaded' } );
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
+				});
+				break;
+			case app.Messages.Commands.capturePage:
+				app.GridNodes.capturePage(app.GridNodes.getChildNode(app.GridNodes.getNode(app.node, request.path.substr(1)), request.id), function(){
+					browser.runtime.sendMessage( { cmd: app.Messages.Commands.gridNodesLoaded } );
 				});
 				break;
 		}
 	});
 };
 
-core.Settings = {}; // Settings helper object
+app.Settings = {}; // Settings helper object
-core.Settings.init = function(callback){ // Load settings and nodes
+app.Settings.init = function(callback){ // Load settings and nodes
 	browser.storage.local.get().then(function(data){
-		if(Object.keys(data).length == 0) {
+		if(Object.keys(data).length == 0 || ! data.settings) {
 			data = {
 				version: 3,
 				settings: {
 					backgroundColor: '#3c4048',
 					backgroundImage: null,
+					backgroundMode: 0,
+					menuShowAdd: true,
+					openQuickDialInNewPage: true,
 					grid: {
 						margin: 10,
 						rows: 4,
 						columns: 5,
+						ratioX: 4,
+						ratioY: 3,
 						backNode: true,
 						backIcon: 'url(/img/back.png)',
+						backIconMode: 3,
 						folderIcon: 'url(/img/folder.png)',
+						folderIconMode: 0,
 						loadingIcon: 'url(/img/throbber.gif)',
+						openBookmarkMethod: 0,
+						openFolderMethod: 0,
 						cells: {
 							margin: 4,
 							marginHover: 4,
+							opacity: 1,
+							opacityHover: 1,
 							backgroundColor: null,
 							backgroundColorHover: null,
 							borderColor: '#333333',
 							borderColorHover: '#a9a9a9',
 							borderRadius: 4,
 							borderRadiusHover: 4,
+							borderSize: 1,
+							borderSizeHover: 1,
 							title: true,
+							titleHover: true,
 							titleHeight: 16,
+							titleHeightHover: 16,
 							titleFontSize: 10,
+							titleFontSizeHover: 10,
 							titleFont: 'Arial, Verdana, Sans-serif',
 							titleColor: '#ffffff',
 							titleColorHover: '#33ccff',
 							titleBackgroundColor: null,
 							titleBackgroundColorHover: null,
+							titleBorderSize: 1,
+							titleBorderSizeHover: 1,
 							previewWidth: 1200,
-							previewHeight: 710
+							previewHeight: 710,
+							snapshotDelay: 2000
 						},
 						root: 'Quick Dial',
 					}
@@ -129,67 +200,252 @@ core.Settings.init = function(callback){ // Load settings and nodes
 			data.node = oldData.grid.node;
 			delete data.settings.version;
 			delete data.settings.grid.node;
-			core.settings = data.settings;
+			app.settings = data.settings;
-			core.node = data.node;
+			app.node = data.node;
 			browser.storage.local.clear().then(function(){
-				core.Settings.save();
+				app.Settings.save();
 			});
 		}
-		core.settings = data.settings;
+		if(data.version == 3){ // Upgrade Data Version
-		core.node = data.node;
+			data.version = 4;
+			data.settings.backgroundMode = 0;
+			data.settings.grid.backIconMode = 3;
+			data.settings.grid.folderIconMode = 0;
+			data.settings.grid.cells.opacity = 1;
+			data.settings.grid.cells.opacityHover = 1;
+			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.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;
+			}
+			if(!data.settings.grid.openBookmarkMethod && data.settings.grid.openBookmarkMethod != 0){
+				data.settings.grid.openBookmarkMethod = 0;
+				data.settings.grid.openFolderMethod = 0;
+			}
+			if(!data.settings.openQuickDialInNewPage && data.settings.openQuickDialInNewPage != false){
+				data.settings.openQuickDialInNewPage = true;
+			}
+			if(!data.settings.startpageTimeout){
+        data.settings.startpageTimeout = 500;
+      }
+			//app.Settings.save();
+		}
+		app.settings = data.settings;
+		app.node = data.node;
 		if(callback) callback();
 	}, function(){ console.log('Error loading data'); });
 };
-core.Settings.update = function(settings, callback){ // Save new settings
+app.Settings.update = function(settings, callback){ // Save new settings
-	core.settings = settings;
+	app.settings = settings;
-	core.Settings.save(callback);
+	app.Settings.save(callback);
 };
-core.Settings.save = function(callback){ // Save settings
+app.Settings.save = function(callback){ // Save settings
-	var data = { version: 3 };
+  if(! app.settings) return;
-	data.settings = core.settings;
+	var data = { version: 4 };
-	data.node = core.node;
+	data.settings = app.settings;
+	data.node = app.node;
 	browser.storage.local.set(data).then(function(){
 		if(callback) callback();
 	}, function(){ console.log('Error saving settings'); });
-}
+};
 
-core.init();
+app.init();
 
-core.ContextMenus = {} // ContextMenu helper Object
+app.ContextMenus = {} // ContextMenu helper Object
-core.ContextMenus.initMenu = function(){ // (Called from core.init) Init context menu in all pages
+app.ContextMenus.menuItemClicked = function(info, tab){
-	browser.contextMenus.create({ // Create Context menu
+	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
+	// Create Add Context menu for all pages
+	if(app.settings.menuShowAdd){
+		browser.contextMenus.create({
 			id: 'AddToQuickDial',
 			title: browser.i18n.getMessage("menuAddToQuickDial"),
 			contexts: ["all"],
-		documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*' ]
+			documentUrlPatterns: [ 'http://*/*', 'https://*/*', 'file://*/*', 'ftp://*/*' ],
-	}, function(){});
+			onclick(info, tab) { app.ContextMenus.menuItemClicked(info, tab)	}
-	browser.contextMenus.onClicked.addListener(function(info, tab) { // Context menu click event
-		//if (info.menuItemId == "AddToQuickDial")
-			//core.GridNodes.createBookmark(app.settings.grid.node, info.pageUrl, tab.title, function(){});
 		});
-}
+	}
+	// Create WebExt Page Context menu
+	browser.contextMenus.create({
+		id: "pagemenu",
+		title: "Quick Dial",
+		documentUrlPatterns: [ 'moz-extension://*/dial', 'moz-extension://*/dial?*' ],
+		contexts: ["page"]
+	});
+	browser.contextMenus.create({
+		id: "pagemenunew",
+		parentId: "pagemenu",
+		title: browser.i18n.getMessage("menuNew")
+	});
+	browser.contextMenus.create({
+		parentId: "pagemenunew",
+		title: browser.i18n.getMessage("menuNewBookmark"),
+		onclick(info, tab) { 
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.createBookmark();"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "pagemenunew",
+		title: browser.i18n.getMessage("menuNewFolder"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.createFolder();"
+			});	
+		}
+	});
+	browser.contextMenus.create({	parentId: "pagemenu", type: "separator" });
+	browser.contextMenus.create({
+		parentId: "pagemenu",
+		title: browser.i18n.getMessage("menuSettings"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.editSettings();"
+			});	
+		}
+	});
+	// Create WebExt Link Context menu
+	browser.contextMenus.create({
+		id: "itemmenu",
+		title: "Quick Dial",
+		documentUrlPatterns: [ 'moz-extension://*/dial', 'moz-extension://*/dial?*' ],
+		contexts: ["link"]
+	});
+	browser.contextMenus.create({
+		id: "itemmenunew",
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuNew")
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenunew",
+		title: browser.i18n.getMessage("menuNewBookmark"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.createBookmark();"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenunew",
+		title: browser.i18n.getMessage("menuNewFolder"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.createFolder();"
+			});	
+		}
+	});
+	browser.contextMenus.create({	parentId: "itemmenu", type: "separator" });
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuProperties"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.editProperties(window.dial._selectedItem);"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuRefreshItem"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.refreshNode(window.dial._selectedItem);"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuCaptureHere"),
+		visible: false,
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.captureHere(window.dial._selectedItem);"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuCapturePage"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.capturePage(window.dial._selectedItem);"
+			});	
+		}
+	});
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuDeleteItem"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.deleteNode();"
+			});	
+		}
+	});
+	browser.contextMenus.create({	parentId: "itemmenu", type: "separator" });
+	browser.contextMenus.create({
+		parentId: "itemmenu",
+		title: browser.i18n.getMessage("menuSettings"),
+		onclick(info, tab) {
+			browser.tabs.executeScript(tab.id, {
+				code: "window.dial.editSettings();"
+			});	
+		}
+	});
+};
+app.ContextMenus.updateMenu = function(){
+	browser.contextMenus.onClicked.removeListener(app.ContextMenus.menuItemClicked);
+	browser.contextMenus.removeAll();
+	app.ContextMenus.initMenu();
+};
 
-core.Bookmarks = {} // Bookmarks helper object
+app.Bookmarks = {} // Bookmarks helper object
-core.Bookmarks._onCreated = function(){ }
+app.Bookmarks._onCreated = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
-core.Bookmarks._onChanged = function(){ }
+app.Bookmarks._onChanged = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
-core.Bookmarks._onMoved = function(){ }
+app.Bookmarks._onMoved = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
-core.Bookmarks._onRemoved = function(){ }
+app.Bookmarks._onRemoved = function(){ app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); }); }
-/*
+app.Bookmarks._onImportBegan = function(){
-core.Bookmarks._onCreated = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); }
+	browser.bookmarks.onCreated.removeListener(app.Bookmarks._onCreated);
-core.Bookmarks._onChanged = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); }
+	browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
-core.Bookmarks._onMoved = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); }
+	browser.bookmarks.onMoved.removeListener(app.Bookmarks._onMoved);
-core.Bookmarks._onRemoved = function(){ core.GridNodes.sync(core.settings.grid.node, core.settings.grid.root); }
+	browser.bookmarks.onRemoved.removeListener(app.Bookmarks._onRemoved);		
-*/
-// ---------
-core.Bookmarks.initListener = function(){ // (Called from core.init) (/!\ Need filter to root tree only) Init listener of bookmarks
-	browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
-	browser.bookmarks.onChanged.addListener(core.Bookmarks._onChanged);
-	browser.bookmarks.onMoved.addListener(core.Bookmarks._onMoved);
-	browser.bookmarks.onRemoved.addListener(core.Bookmarks._onRemoved);		
 }
-core.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and create it if not exist
+app.Bookmarks._onImportEnded = function(){
+	app.GridNodes.sync(app.node, app.settings.grid.root, function(){ browser.runtime.sendMessage({ cmd: app.Messages.Commands.gridNodesLoaded }); });
+	app.Bookmarks.initListener();
+}
+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.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);
@@ -205,12 +461,13 @@ core.Bookmarks.load = function(rootPath, callback){ // Load root bookmark and cr
 				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(); });
 }
 
-core.SiteInfos = {} // Siteinfos helper object
+app.SiteInfos = {} // Siteinfos helper object
-core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
+app.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
 	browser.tabs.create({url: url, active: false}).then(function(tab){
 		browser.tabs.update(tab.id, {muted: true}).then();
 		function whaitLoaded(){
@@ -226,7 +483,8 @@ core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a n
 								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';
@@ -255,7 +513,7 @@ core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a n
 								browser.tabs.remove(tab.id);
 								if(callback) callback();
 							});
-						}, 500);
+						}, app.settings.grid.cells.snapshotDelay);
 					}, function(){ if(callback) callback(); });
 				}
 			}, function(){ if(callback) callback(); });
@@ -263,7 +521,7 @@ core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a n
 		setTimeout(whaitLoaded, 300);
 	}, function(){ if(callback) callback(); });
 }
-core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an iframe. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() )
+app.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an iframe. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() )
 	function pageLoaded(){
 		if(!iframe) return;
 		var docTitle = iframe.contentWindow.document.title;
@@ -292,7 +550,8 @@ core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an if
 	}
 
 	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
@@ -302,7 +561,7 @@ core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an if
 		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);
@@ -313,34 +572,45 @@ core.SiteInfos.fromFrame = function(url, callback){ // Retrieve infos from an if
 	xmlHttp.onerror = function(){ if(callback) callback(); }
 	xmlHttp.ontimeout = function(){ if(callback) callback(); }
 	xmlHttp.send();
-	}
+}
-	core.SiteInfos.fromWS = function(url, callback){ // Retrieve infos from a Web Service. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() )
+app.SiteInfos.fromWS = function(url, callback){ // Retrieve infos from a Web Service. callback( { url, title, (/!\ Not handled now)icon, screenshot } || error: callback() )
 	console.log('Not implemented');
-	return core.SiteInfos.fromFrame(url, callback);
+	return app.SiteInfos.fromFrame(url, callback);
 }
 
-core.GridNodes = {}; // GridNodes helper object
+app.GridNodes = {}; // GridNodes helper object
-core.GridNodes.GridNodeType = { // GridNodeType
+app.GridNodes.GridNodeType = { // GridNodeType
 	back: -1,
 	empty: 0,
 	folder: 1,
 	bookmark: 2
 }
-core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes with Bookmarks
+app.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes with Bookmarks
-	core.Bookmarks.load(rootPath, function(bookmarkItem){
+	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;
-			if(!gridNode.title) gridNode.title = bookmarkItem.title;
+			gridNode.title = bookmarkItem.title;
-			if(bookmarkItem.url){
+			switch(bookmarkItem.type){
-				gridNode.type = core.GridNodes.GridNodeType.bookmark;
+				case 'bookmark':
-				if(!gridNode.url) gridNode.url = bookmarkItem.url;
+					gridNode.type = app.GridNodes.GridNodeType.bookmark;
-			} else if(bookmarkItem.children){
+					if(gridNode.url != bookmarkItem.url){
-				gridNode.type = core.GridNodes.GridNodeType.folder;
+						gridNode.url = bookmarkItem.url;
+						delete gridNode.image;
+					}
+					break;
+				case 'folder':
+					gridNode.type = app.GridNodes.GridNodeType.folder;
 					var EmptyNodes = [];
 					if(! gridNode.children) gridNode.children = [];
 					else {
 						for(var i=gridNode.children.length-1; i>=0; i--){
-						if(gridNode.children[i].type==core.GridNodes.GridNodeType.empty){
+							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 {
 								var found = false;
@@ -352,7 +622,7 @@ core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes
 								}
 								if(! found){
 									if(i<gridNode.children.length - 1){
-									gridNode.children[i] = { type: core.GridNodes.GridNodeType.empty };
+										gridNode.children[i] = { type: app.GridNodes.GridNodeType.empty };
 										EmptyNodes.unshift(gridNode.children[i]);
 									} else {
 										gridNode.children.pop();
@@ -362,7 +632,7 @@ core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes
 						}
 					}
 					for(var child of bookmarkItem.children){
-					var childGridNode = core.GridNodes.getChildNode(gridNode, child.id);
+						var childGridNode = app.GridNodes.getChildNode(gridNode, child.id);
 						if(!childGridNode){
 							if(EmptyNodes.length>0){
 								childGridNode = EmptyNodes[0];
@@ -375,144 +645,277 @@ core.GridNodes.sync = function(gridNode, rootPath, callback){ // Sync GridNodes
 						syncNode(childGridNode, child);
 					}
 					EmptyNodes.length = 0;
-			} else {
+					break;
-				gridNode.type = core.GridNodes.GridNodeType.empty;
+				default:
+					gridNode.type = app.GridNodes.GridNodeType.empty;
+					break;
 			}
 		}
 		
 		syncNode(gridNode, bookmarkItem);
-		core.GridNodes.save();
+		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();
+		}
 	});
 }
-core.GridNodes.save = function(callback){ // Save GridNodes
+app.GridNodes.save = function(callback){ // Save GridNodes
-	core.Settings.save(callback);
+	app.Settings.save(callback);
 }
-core.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootGridNode path
+app.GridNodes.getNode = function(gridNode, path){ // Return GridNode from RootGridNode path
 	if(path.length == 0 || path == '/') return gridNode;
 	for(var child of gridNode.children)
 		if(path.startsWith(child.title + '/'))
-			return core.GridNodes.getNode(child, path.substr(child.title.length + 1));
+			return app.GridNodes.getNode(child, path.substr(child.title.length + 1));
 	return null;
 }
-core.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID
+app.GridNodes.getNodeById = function(id){
+	var nodes = app.GridNodes.getNodeWithParents(id);
+	if(nodes) return nodes[nodes.length-1];
+	return null;
+}
+app.GridNodes.getNodeWithParents = function(id){
+	
+	var parents = [];
+
+	function findNode(gridNode){
+		if(gridNode.id == id){
+			parents.unshift(gridNode);
+			return gridNode;
+		}
+		if(gridNode.children){
+			for(var i=0; i<gridNode.children.length; i++){
+				var result = findNode(gridNode.children[i]);
+				if(result){
+					parents.unshift(gridNode);
+					return result;
+				}
+			}
+		}
+		return null;
+	}
+
+	findNode(app.node, id);
+	if(parents.length>0) return parents;
+	return null;
+}
+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.imageLocked!=null){
+			gridNode.imageLocked = value.imageLocked;
+			if(value.image) gridNode.image = value.image;
+			else delete gridNode.image;
+		} else if(gridNode.imageLocked != true){
+			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;
+		}
+		if(gridNode.type == app.GridNodes.GridNodeType.bookmark && value.url && gridNode.url != value.url){
+			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;
+				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);
+				});
+			});
+		} 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;
+			browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
+			browser.bookmarks.update(gridNode.id, data).then(function(){
+				browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
+			});
+		}
+	}
+	if(callback) callback(gridNode);
+}
+app.GridNodes.getChildNode = function(gridNode, id){ // Return child node by ID
 	for(var child of gridNode.children) if(child.id == id) return child;
 	return null;
 }
-core.GridNodes.saveNode = function(gridNode, callback){ // Save GridNode
+app.GridNodes.saveNode = function(gridNode, callback){ // Save GridNode
-	core.Settings.save(callback);
+	app.Settings.save(callback);
 }
-core.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // Set Child GridNodeIndex. callback(gridNode, node1, node2)
+app.GridNodes.setNodeIndex = function(gridNode, index, newIndex, callback){ // Set Child GridNodeIndex. callback(gridNode, node1, node2)
 	while(newIndex>=gridNode.children.length)
-		gridNode.children.push({ type: core.GridNodes.GridNodeType.empty });
+		gridNode.children.push({ type: app.GridNodes.GridNodeType.empty });
 	var node1 = gridNode.children[index];
 	var node2 = gridNode.children[newIndex];
 	gridNode.children[index] = node2;
 	gridNode.children[newIndex] = node1;
 	for(var i=gridNode.children.length-1; i>=0; i--){
-		if(gridNode.children[i].type != core.GridNodes.GridNodeType.empty) break;
+		if(gridNode.children[i].type != app.GridNodes.GridNodeType.empty) break;
 		gridNode.children.pop();
 	}
-	core.GridNodes.saveNode(gridNode);
+	app.GridNodes.saveNode(gridNode);
 	if(callback) callback(gridNode, node1, node2);
 }
-core.GridNodes.createBookmark = function(gridNode, url, title, callback){ // Create a new Bookmark in a GridNode.  callback(gridNode, newGridNode)
+app.GridNodes.createBookmark = function(gridNode, url, title, callback){ // Create a new Bookmark in a GridNode.  callback(gridNode, newGridNode)
-	browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated);
+	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(core.Bookmarks._onCreated);
+		browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
-		var newGridNode = { id: bookmarkItem.id, type: core.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 == core.GridNodes.GridNodeType.empty){
+			if(gridNode.children[i].type == app.GridNodes.GridNodeType.empty){
 				EmptyCellFound = true;
 				gridNode.children[i] = newGridNode;
 				break;
 			}
 		}
 		if(EmptyCellFound == false) gridNode.children.push(newGridNode);
-		core.GridNodes.saveNode(newGridNode);
+		app.GridNodes.saveNode(newGridNode);
 		if(callback) callback(gridNode, newGridNode);
 	}, function(){
-		browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
+		browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
 	});
 }
-core.GridNodes.createFolder = function(gridNode, name, callback){ // Create a new folder in a GridNode. callback(gridNode, newGridNode)
+app.GridNodes.createFolder = function(gridNode, name, callback){ // Create a new folder in a GridNode. callback(gridNode, newGridNode)
-	browser.bookmarks.onCreated.removeListener(core.Bookmarks._onCreated);
+	browser.bookmarks.onCreated.removeListener(app.Bookmarks._onCreated);
 	browser.bookmarks.create({
 		parentId: gridNode.id,
 		title: name
 	}).then(function(bookmarkItem){
 		if(!gridNode) return; // ??? Why this method are called a second time with gridNode = null ???
-		browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
+		browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
-		var newGridNode = { id: bookmarkItem.id, type: core.GridNodes.GridNodeType.folder, title: name, children: [] };
+		var newGridNode = { id: bookmarkItem.id, type: app.GridNodes.GridNodeType.folder, title: name, children: [] };
 		var EmptyCellFound = false;
 		for(var i=0; i<gridNode.children.length; i++){
-			if(gridNode.children[i].type == core.GridNodes.GridNodeType.empty){
+			if(gridNode.children[i].type == app.GridNodes.GridNodeType.empty){
 				EmptyCellFound = true;
 				gridNode.children[i] = newGridNode;
 				break;
 			}
 		}
 		if(EmptyCellFound == false) gridNode.children.push(newGridNode);
-		core.GridNodes.saveNode(newGridNode);
+		app.GridNodes.saveNode(newGridNode);
 		if(callback) callback(gridNode, newGridNode);
 	}, function(){
-		browser.bookmarks.onCreated.addListener(core.Bookmarks._onCreated);
+		browser.bookmarks.onCreated.addListener(app.Bookmarks._onCreated);
 	});
 }
-core.GridNodes.deleteNode = function(gridNode, id, callback){ // Delete a GridNode. callback(gridNode, id)
+app.GridNodes.deleteNode = function(gridNode, id, callback){ // Delete a GridNode. callback(gridNode, id)
 	for(var i=0; i<gridNode.children.length; i++){
 		if(gridNode.children[i].id == id){
-			gridNode.children[i] = { type: core.GridNodes.GridNodeType.empty };
+			gridNode.children[i] = { type: app.GridNodes.GridNodeType.empty };
-			core.GridNodes.saveNode(gridNode);
+			app.GridNodes.saveNode(gridNode);
 			break;
 		}
 	}
 	for(var i=gridNode.children.length-1; i>=0; i--){
-		if(gridNode.children[i].type != core.GridNodes.GridNodeType.empty) break;
+		if(gridNode.children[i].type != app.GridNodes.GridNodeType.empty) break;
 		gridNode.children.pop();
 	}
-	browser.bookmarks.onRemoved.removeListener(core.Bookmarks._onRemoved);
+	browser.bookmarks.onRemoved.removeListener(app.Bookmarks._onRemoved);
 	browser.bookmarks.removeTree(id).then(function(){
-		browser.bookmarks.onRemoved.addListener(core.Bookmarks._onRemoved);
+		browser.bookmarks.onRemoved.addListener(app.Bookmarks._onRemoved);
 	}, function(){
-		browser.bookmarks.onRemoved.addListener(core.Bookmarks._onRemoved);
+		browser.bookmarks.onRemoved.addListener(app.Bookmarks._onRemoved);
 	});
 	if(callback) callback(gridNode, id);
 }
 
-core.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of a GridNode
+app.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of a GridNode
 	if(gridNode.__isLoading == true) return;
 	gridNode.__isLoading = true;
-	core.SiteInfos.fromFrame(gridNode.url, function(infos){
+	switch(gridNode.type){
+		case app.GridNodes.GridNodeType.folder:
+			delete gridNode.image;
+			delete gridNode.__isLoading;
+			app.GridNodes.saveNode(gridNode);
+			if(callback) callback({ title: gridNode.title, screenshot: gridNode.image });
+			/*
+			browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
+			browser.bookmarks.update(gridNode.id, { title: gridNode.title }).then(function(){
+				browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
+			});
+			*/
+			break;
+		case app.GridNodes.GridNodeType.bookmark:
+			app.SiteInfos.fromFrame(gridNode.url, function(infos){
+				if(gridNode.imageLocked!=true){
 					if(infos){
-			gridNode.title = infos.title;
+						if(gridNode.titleLocked!=true) gridNode.title = infos.title;
 						gridNode.image = infos.screenshot;
 					} else {
 						gridNode.image = '0';
 					}
+				}
+			
 				delete gridNode.__isLoading;
-		core.GridNodes.saveNode(gridNode);
+				app.GridNodes.saveNode(gridNode);
 				if(callback) callback(infos);
+				browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
+				browser.bookmarks.update(gridNode.id, { title: gridNode.title, url: gridNode.url }).then(function(){
+					browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
 				});
+			});
+			break;
+	}
 }
-core.GridNodes.capturePage = function(gridNode, callback){
+app.GridNodes.capturePage = function(gridNode, callback){
 	if(gridNode.__isLoading == true) return;
 	gridNode.__isLoading = true;
-	core.SiteInfos.fromNewTab(gridNode.url, function(infos){
+	switch(gridNode.type){
+		case app.GridNodes.GridNodeType.folder:
+			var nodes = app.GridNodes.getNodeWithParents(gridNode.id);
+			if(nodes){
+				var path = '';
+				for(var i=1; i<nodes.length; i++) path = path + '/' + nodes[i].title;
+				app.SiteInfos.fromNewTab('/dial?path=' + path, function(infos){
 					if(infos){
-			gridNode.title = infos.title;
+						gridNode.image = infos.screenshot;
+					} else {
+						delete gridNode.image;
+					}
+					delete gridNode.__isLoading;
+					app.GridNodes.saveNode(gridNode);
+					if(callback) callback({ title: gridNode.title, screenshot: gridNode.image });
+				});
+			}
+			break;
+		case app.GridNodes.GridNodeType.bookmark:
+			app.SiteInfos.fromNewTab(gridNode.url, function(infos){
+				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;
-		core.GridNodes.saveNode(gridNode);
+				app.GridNodes.saveNode(gridNode);
 				if(callback) callback(infos);
+				browser.bookmarks.onChanged.removeListener(app.Bookmarks._onChanged);
+				browser.bookmarks.update(gridNode.id, { title: gridNode.title, url: gridNode.url }).then(function(){
+					browser.bookmarks.onChanged.addListener(app.Bookmarks._onChanged);
 				});
+			});
+			break;
+	}
 }

src/js/dial.js

@@ -2,89 +2,143 @@ var utils = {};
 var app = {};
 var dial = {
 	page: 1,
-	maxpage: 1
+	maxpage: 1,
+	capture: 0
 };
 
-
+document.addEventListener("DOMContentLoaded", function(event) {
-
+  document.body.style.backgroundColor = utils.getBackgroundColor();
-window.onload = function(){
 	app.init();
 	dial.init();
-};
+  window.setTimeout(function(){
-window.onresize = function(){
+    if(! app.settings) app.init();
+  }, 500);
+});
+
+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;
+	}
+});
 
 
 
+utils.getBackgroundColor = function(){
+	return new URL(window.location).searchParams.get('bg');
+};
 utils.getPath = function(){
 	var path = new URL(window.location).searchParams.get('path');
 	if(path) return path + '/';
 	else return '/';
 };
 
-
-
 app.init = function(){
+	app.Messages.getSettings(function(settings){
+		if(settings && settings.grid) app.Settings._changed(settings);
 		dial.path = utils.getPath();
-	app.Messages.getSettings(app.Settings._changed);
 		app.Messages.getNode(dial.path, app.GridNodes._changed);
 		app.Messages.init();
+	});
 };
 
 app.Messages = {};
+app.Messages.Commands = {
+	getSettings: 0,
+	setSettings: 1,
+	getNode: 2,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
+	settingsChanged: 100,
+	gridNodesLoaded: 101
+};
 app.Messages.init = function(){
 	browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
 		switch(request.cmd){
-			case 'SettingsChanged':
+			case app.Messages.Commands.settingsChanged:
 				app.Messages.getSettings(app.Settings._changed);
 				break;
-			case 'GridNodesLoaded':
+			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: 'GetSettings' }).then(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);
+		}
+	}, callback);
 };
 app.Messages.getNode = function(path, callback){
-	browser.runtime.sendMessage({ cmd: '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: 'SetNodeIndex', path: dial.path, index: index, newIndex: newIndex }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.setNodeIndex, path: dial.path, index: index, newIndex: newIndex }).then(callback);
 };
 app.Messages.createBookmark = function(url, callback){
-	browser.runtime.sendMessage({ cmd: 'CreateBookmark', path: dial.path, url: url, title: url }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.createBookmark, path: dial.path, url: url, title: url }).then(callback);
 };
 app.Messages.createFolder = function(name, callback){
-	browser.runtime.sendMessage({ cmd: 'CreateFolder', path: dial.path, name: name }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.createFolder, path: dial.path, name: name }).then(callback);
 };
 app.Messages.deleteNode = function(id, callback){
-	browser.runtime.sendMessage({ cmd: 'DeleteNode', path: dial.path, id: id }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.deleteNode, path: dial.path, id: id }).then(callback);
 };
 app.Messages.refreshNode = function(id, callback){
-	browser.runtime.sendMessage({ cmd: 'RefreshNode', path: dial.path, id: id }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.refreshNode, path: dial.path, id: id }).then(callback);
 }
 app.Messages.capturePage = function(id, callback){
-	browser.runtime.sendMessage({ cmd: 'CapturePage', path: dial.path, id: id }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.capturePage, path: dial.path, id: id }).then(callback);
 }
 
+
 app.Settings = {};
 app.Settings._changed = function(settings){
 	app.settings = settings;
@@ -107,11 +161,13 @@ 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');
@@ -149,17 +205,25 @@ dial.initMenus = function(){
 	dial.ItemMenuCreateFolder = document.createElement('menuitem');
 	dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
 	dial.ItemMenuCreateFolder.onclick = dial.createFolder;
-	/*
+	
-	dial.ItemMenuEdit = document.createElement('menuitem');
+	dial.ItemMenuProperties = document.createElement('menuitem');
-	dial.ItemMenuEdit.label = 'Edit';
+	dial.ItemMenuProperties.label = browser.i18n.getMessage("menuProperties");
-	//dial.ItemMenuEdit.onclick = dial.test;
+	dial.ItemMenuProperties.onclick = function(){
-	*/
+		dial.editProperties(dial._selectedItem);
+	};
+	
 	dial.ItemMenuRefresh = document.createElement('menuitem');
 	dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem");
 	dial.ItemMenuRefresh.onclick = 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(){
@@ -178,43 +242,75 @@ dial.initMenus = function(){
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark);
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateFolder);
 	dial.ItemMenu.appendChild(document.createElement('hr'));
-	//dial.ItemMenu.appendChild(dial.ItemMenuEdit);
+	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'));
 	dial.ItemMenu.appendChild(dial.ItemMenuSettings);
 	document.body.appendChild(dial.ItemMenu);
 }
+*/
 dial.initStyles = function(){
-	if(dial.Style) document.head.removeChild(dial.Style);
+	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);
 };
 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';
@@ -232,21 +328,70 @@ 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;
+							dial.ItemMenuCaptureHere.hidden = true;
+							break;
+					}
+				}
+				*/
+			};
 			
 			function dragstart_handler(ev) {
+				if(!ev.target.Node){
+					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();
-				ev.dataTransfer.dropEffect = "move"
+				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'));
+					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();
 				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'));
@@ -254,7 +399,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;
@@ -264,32 +409,83 @@ dial.initGrid = function(){
 	}
 	document.body.appendChild(dial.Grid);
 	dial.updateGridLayout();
+	if(oldGrid) document.body.removeChild(oldGrid);
 	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 = values.linkWidth.toString() + 'px';
+	dial.styles.grid.link.height = values.linkHeight.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 = values.linkHeight.toString() + 'px';
 
-	dial.styles.grid.link.width = linkWidth.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.link.height = linkHeight.toString() + 'px';
+	dial.styles.grid.cellHover.width = values.cellWidth.toString() + 'px';
-	if(app.settings.grid.cells.title) dial.styles.grid.linkPanel.height = (linkHeight - app.settings.grid.cells.titleHeight - 1).toString() + 'px';
+	dial.styles.grid.cellHover.height = values.cellHeight.toString() + 'px';
-	else dial.styles.grid.linkPanel.height = linkHeight.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');
@@ -299,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');
@@ -306,24 +503,48 @@ dial.populateGrid = function(){
 	populateFolder = function(link, node){
 		link.Node = node;
 		link.className = 'Folder';
-		link.childNodes[0].style.backgroundImage = '';
+		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;
-		if(dial.path) link.href = '?path=' + dial.path + node.title;
+		switch(app.settings.grid.openFolderMethod){
-		else link.href = '?path=' + node.title;
+			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;
 		link.setAttribute('contextmenu', 'item');
 	}
 	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';
-			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 = '';
 			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');
@@ -378,6 +599,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;
@@ -434,7 +737,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%';
@@ -446,4 +749,21 @@ dial.editSettings = function(){
 	iframe.src = '/html/settings.html';
 	iframe.popup = popup;
 	popup.popup();
+	iframe.focus();
+}
+
+dial.editProperties = function(selectedItem){
+	var popup = new dial.PopupPanel(500, 420, true);
+	var iframe = document.createElement('iframe');
+	iframe.style.width = '100%';
+	iframe.style.height = '100%';
+	iframe.style.backgroundColor = 'transparent';
+	iframe.style.border = '0px none transparent';
+	iframe.style.padding = '0px';
+	iframe.style.overflow = 'hidden';
+	popup.frame.appendChild(iframe);
+	iframe.src = '/html/properties.html?id=' + selectedItem.Node.id;
+	iframe.popup = popup;
+	popup.popup();
+	iframe.focus();
 }

src/js/properties.js

@@ -0,0 +1,165 @@
+var app = {};
+
+var Image = null;
+
+document.addEventListener("DOMContentLoaded", function(event) {
+	app.init();
+});
+
+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){
+			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;
+						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);
+					ImageLocked.checked = (node.imageLocked==true);
+					ImageDefault.style.display = 'none';
+					Url.value = node.url;
+					if(node.image.indexOf('url(')>=0) Image = node.image;
+					else Image = 'url(' + node.image + ')';
+					ImagePreview.style.backgroundImage = Image;
+					break;
+			}
+
+			ImageReset.onclick = function(){
+				switch(node.type){
+					case app.GridNodes.GridNodeType.folder:
+						if(node.image){
+							Image = node.image;
+							ImagePreview.style.backgroundImage = 'url(' + Image + ')';
+						} else {
+							Image = null;
+							ImagePreview.style.backgroundImage = app.settings.grid.folderIcon;
+						} 
+						break;
+					case app.GridNodes.GridNodeType.bookmark:
+						Image = node.image;
+						ImagePreview.style.backgroundImage = 'url(' + Image + ')';
+						break;
+				}
+			};
+
+			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;
+			}
+			ImageFile.onchange = function(){
+				var fileReader = new FileReader();
+				fileReader.onload = function(e){
+					Image = e.target.result;
+					ImageFile.value = null;
+					ImagePreview.style.backgroundImage = 'url(' + Image + ')';
+				}
+				fileReader.readAsDataURL(ImageFile.files[0]);
+			}
+					
+
+		});
+	});
+
+
+	BtnOk.onclick = function(){
+		BtnApply.onclick();
+		window.frameElement.popup.close();
+	}
+	BtnApply.onclick = function(){
+		switch(app.node.type){
+			case app.GridNodes.GridNodeType.folder:
+				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, imageLocked: ImageLocked.checked, url: Url.value, image: Image, imageMode: +(ImageMode.value) })
+				break;
+		}
+	}
+	BtnCancel.onclick = function(){
+		window.frameElement.popup.close();
+	}
+
+	var tabButtons = Tabs.children[0].children[0].children[0];
+	for(var i=0; i<tabButtons.children.length-1; i++){
+		tabButtons.children[i].index = i;
+		tabButtons.children[i].onclick = function(){
+			for(var j=0; j<tabButtons.children.length-1; j++){
+				if(j==this.index){
+					tabButtons.children[j].className = 'TabButtonActive';
+					Tabs.children[1].children[j].className = '';
+				} else {
+					tabButtons.children[j].className = 'TabButton';
+					Tabs.children[1].children[j].className = 'hidden';
+				}
+			}
+		}
+	}
+
+};
+
+app.Messages = {};
+app.Messages.Commands = {
+	getSettings: 0,
+	setSettings: 1,
+	getNode: 2,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
+	settingsChanged: 100,
+	gridNodesLoaded: 101
+};
+app.Messages.getSettings = function(callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback);
+};
+app.Messages.getNodeByID = function(id, callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNodeByID, id: id }).then(callback);
+};
+app.Messages.updateNode = function(id, value, callback){
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.updateNode, id: id, value: value }).then(callback);
+};
+
+app.GridNodes = {};
+app.GridNodes.GridNodeType = { // GridNodeType
+	back: -1,
+	empty: 0,
+	folder: 1,
+	bookmark: 2
+}

src/js/settings.js

@@ -4,29 +4,56 @@ var BackgroundImage = null;
 var GridBackImage = null;
 var GridFolderImage = null;
 
+document.addEventListener("DOMContentLoaded", function(event) {
+	app.init();
+});
+
+
 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;
+		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);
@@ -36,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(){
@@ -51,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;
@@ -71,15 +117,22 @@ 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;
-		browser.runtime.sendMessage( { cmd: 'SetSettings', settings: app.settings } );
+		app.settings.grid.cells.snapshotDelay = GridCellsSnapshotDelay.value;
+		app.settings.grid.root = GridRoot.value;
+		browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
 	}
 	BtnCancel.onclick = function(){
 		window.frameElement.popup.close();
@@ -121,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;
@@ -157,14 +223,25 @@ app.init = function(){
 };
 
 app.Messages = {};
+app.Messages.Commands = {
+	getSettings: 0,
+	setSettings: 1,
+	getNode: 2,
+	getNodeByID: 3,
+	updateNode: 4,
+	setNodeIndex: 5,
+	createBookmark: 6,
+	createFolder: 7,
+	deleteNode: 8,
+	refreshNode: 9,
+	capturePage: 10,
+	settingsChanged: 100,
+	gridNodesLoaded: 101
+};
 app.Messages.getSettings = function(callback){
-	browser.runtime.sendMessage({ cmd: 'GetSettings' }).then(callback);
+	browser.runtime.sendMessage({ cmd: app.Messages.Commands.getSettings }).then(callback);
 };
 
 
 
 
-window.onload = function(){
-	app.init();
-};
-

src/manifest.json

@@ -2,14 +2,13 @@
 
   "manifest_version": 2,
   "name": "Quick Dial",
-  "version": "0.1.0",
+  "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",
@@ -21,6 +20,8 @@
     "bookmarks",
     "contextMenus",
     "tabs",
+    "webRequest",
+    "webRequestBlocking",
     "<all_urls>"
   ],
 
@@ -28,6 +29,13 @@
     "scripts": ["js/background.js"]
   },
   
+  "browser_action": {
+    "default_icon": {
+      "24": "img/24.png",
+      "32": "img/32.png"
+    }
+  },
+
   "chrome_url_overrides" : {
     "newtab": "dial"
   },
@@ -35,7 +43,7 @@
   "applications": {
     "gecko": {
       "id": "quickdial@matmoul.com",
-      "strict_min_version": "52.0"
+      "strict_min_version": "70.0"
     }
   },