.gitignore

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

README.md

@@ -1,9 +1,2 @@
 # 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

@@ -0,0 +1,7 @@
+Add node settings popup
+Add custom image (thumbnails)
+Create style for popup
+Preserve ratio on capture in a new tab
+Need a best solution to update folder and bookmark when it are updated from Firefox
+Improve screenshot result
+Add favicon support

makebeta

@@ -1,44 +0,0 @@
-#!/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,7 +46,3 @@ git tag -a "v$version" -m "Version $version"
 git push --tags
 
 git checkout $branch
-
-cd src
-zip -r ../quickdial-$version.zip . -x src.zip
-cd ..

src/_locales/de/messages.json

@@ -1,67 +0,0 @@
-{
-  "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,4 +1,9 @@
 {
+  "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."
@@ -29,21 +34,11 @@
     "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

@@ -1,67 +0,0 @@
-{
-  "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,4 +1,9 @@
 {
+  "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."
@@ -29,21 +34,11 @@
     "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

@@ -1,67 +0,0 @@
-{
-  "menuAddToQuickDial": {
-    "message": "הוסף לחיוג מהיר",
-    "description": "Text of add bookmark menu item."
-  },
-
-  "menuNew": {
-    "message": "חדש",
-    "description": "Text of new menu item."
-  },
-
-  "menuNewBookmark": {
-    "message": "מועדף",
-    "description": "Text of add bookmark menu item."
-  },
-
-  "AddBookmarkPrompt": {
-    "message": "הכנס קישור חדש למועדף :",
-    "description": "Text of the add bookmark prompt."
-  },
-
-  "menuNewFolder": {
-    "message": "תיקייה",
-    "description": "Text of add folder menu item."
-  },
-
-  "AddFolderPrompt": {
-    "message": "הכנס שם חדש לתיקייה :",
-    "description": "Text of the add folder prompt."
-  },
-
-  "menuProperties": {
-    "message": "מאפיינים",
-    "description": "Text of properties menu item."
-  },
-
-  "menuRefreshItem": {
-    "message": "רענן",
-    "description": "Text of refresh menu item."
-  },
-
-  "menuCaptureHere": {
-    "message": "צלם מסך כאן",
-    "description": "Text of capture here menu item."
-  },
-
-  "menuCapturePage": {
-    "message": "צלם מסך בלשונית חדשה",
-    "description": "Text of capture menu item."
-  },
-
-  "menuDeleteItem": {
-    "message": "מחק",
-    "description": "Text of delete menu item."
-  },
-
-  "deleteItemConfimation": {
-    "message": "האם למחוק $1 ?",
-    "description": "Text of delete confirmation."
-  },
-
-  "menuSettings": {
-    "message": "הגדרות חיוג מהיר",
-    "description": "Text of settings menu item."
-  }
-
-}

src/_locales/it/messages.json

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

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

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

src/_locales/ru/messages.json

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

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

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

@@ -1 +1 @@
-<!DOCTYPE html><html><head><meta charset="utf-8" /><link rel="shortcut icon" type="image/png" href="img/24.png" /><script type="text/javascript" src="js/dial.js"></script></head><body></body></html>
+<!DOCTYPE html><html><head id="head"><meta charset="utf-8" /><link rel="shortcut icon" type="image/png" href="img/24.png" /><title id="title"></title><script type="text/javascript" src="js/dial.js"></script></head><body id="body"></body></html>

src/html/properties.html

@@ -1,81 +0,0 @@
-<!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,11 +12,10 @@
 			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: 350px; border-left: solid 1px #505050; border-bottom: solid 1px #505050; border-right: solid 1px #505050; }
+			.Tab>div { padding: 8px; height: 330px; border-left: solid 1px #505050; border-bottom: solid 1px #505050; border-right: solid 1px #505050; }
 		</style>
 	</head>
 	<body id="body">
@@ -36,17 +35,6 @@
 							<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>
@@ -58,22 +46,6 @@
 							<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">
@@ -81,38 +53,13 @@
 						<tr>
 							<td><span>Rows x Columns :</span></td>
 							<td>
-								<input id="GridRows" type="number" min="1">
+								<input id="GridRows" type="number">
-								<input id="GridColumns" type="number" min="1">
+								<input id="GridColumns" type="number">
-							</td>
-						</tr>
-						<tr>
-							<td><span>Ratio (X/Y) :</span></td>
-							<td>
-								<input id="GridRatioX" type="number" min="1">
-								<input id="GridRatioY" type="number" min="1">
 							</td>
 						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
-							<td><input id="GridMargins" type="number" min="0"></td>
+							<td><input id="GridMargins" type="number"></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>
@@ -123,40 +70,18 @@
 						<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>
@@ -167,23 +92,13 @@
 						</tr>
 						<tr>
 							<td><span>Margins :</span></td>
-							<td><input id="GridCellsMargins" type="number" min="0"></td>
+							<td><input id="GridCellsMargins" type="number"></td>
-							<td><input id="GridCellsMarginsHover" type="number" min="0"></td>
+							<td><input id="GridCellsMarginsHover" type="number" style="display: none;"></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" min="0"></td>
+							<td><input id="GridCellsBorderRadius" type="number"></td>
-							<td><input id="GridCellsBorderRadiusHover" type="number" min="0"></td>
+							<td><input id="GridCellsBorderRadiusHover" type="number"></td>
 						</tr>
 						<tr>
 							<td><span>Background Transparent :</span></td>
@@ -203,22 +118,17 @@
 						<tr>
 							<td><span>Title :</span></td>
 							<td><input id="GridCellsTitle" type="checkbox"></td>
-							<td><input id="GridCellsTitleHover" type="checkbox"></td>
+							<td></td>
 						</tr>
 						<tr>
 							<td><span>Title Height :</span></td>
-							<td><input id="GridCellsTitleHeight" type="number" min="0"></td>
+							<td><input id="GridCellsTitleHeight" type="number"></td>
-							<td><input id="GridCellsTitleHeightHover" type="number" min="0"></td>
+							<td></td>
 						</tr>
 						<tr>
 							<td><span>Title Font Size :</span></td>
-							<td><input id="GridCellsTitleFontSize" type="number" min="0"></td>
+							<td><input id="GridCellsTitleFontSize" type="number"></td>
-							<td><input id="GridCellsTitleFontSizeHover" type="number" min="0"></td>
+							<td></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>
@@ -235,10 +145,6 @@
 							<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>
@@ -250,4 +156,4 @@
 			<button id="BtnCancel">Cancel</button>
 		</div>
 	</body>
-</html>
+</html>

src/js/dial.js

@@ -1,175 +1,118 @@
-var utils = {};
+var app = {}
-var app = {};
+var dial = { 
-var dial = {
+	styles: {},
 	page: 1,
-	maxpage: 1,
+	maxpage: 1
-	capture: 0
 };
 
-document.addEventListener("DOMContentLoaded", function(event) {
+window.onload = function(){
-  document.body.style.backgroundColor = utils.getBackgroundColor();
+	function initPage(){
-	app.init();
+		browser.runtime.getBackgroundPage().then(function(page){
-	dial.init();
+			if(page.app.settings){
-  window.setTimeout(function(){
+				app = page.app;
-    if(! app.settings) app.init();
+				dial.initUI();
-  }, 500);
+				browser.runtime.onMessage.addListener(function(request, sender, sendResponse){
-});
+					switch(request.command){
-
+						case 'SettingsChanged':
-window.addEventListener('resize', function(){
+							if(app.settings){
-	if(app && app.settings) dial.updateGridLayout();
+								dial.Head.removeChild(dial.Style);
-});
+								dial.Body.removeChild(dial.Grid);
-window.addEventListener('wheel', function(e){
+								dial.initStyles();
+								dial.Grid = dial.initGrid('Grid', app.settings.grid, dial.Body);
+								var url = new URL(window.location);
+								dial.path = url.searchParams.get('path');
+								if(url.searchParams.get('path')) {
+									dial.Node = app.getNode(app.settings.grid.node, dial.path + '/');
+								}	else {
+									dial.Node = app.getNode(app.settings.grid.node, '/');
+								}
+								dial.Title.innerText = dial.Node.title;
+								dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
+							}
+							break;
+						case 'GridNodesSaved':
+							if(app.settings) dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
+							break;
+						case 'GridNodeSaved':
+							// request.gridNode	
+							if(app.settings) dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
+							break;
+					}
+				});
+			} else{
+				setTimeout(initPage, 100);
+			}
+		}, function(){});
+	}
+	initPage();
+}
+window.onresize = function(){
+	if(app && app.settings) dial.updateGridLayout(dial.Grid, app.settings.grid, dial.styles.grid);
+}
+window.onwheel = function(ev){
 	if(app && app.settings){
-		if(e.deltaY > 0){
+		if(ev.deltaY > 0){
 			if(dial.page < dial.maxpage){
 				dial.page += 1;
-				dial.populateGrid();
+				dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
 			}
-		} else if(e.deltaY < 0){
+		} else if(ev.deltaY < 0){
 			if(dial.page > 1){
 				dial.page -= 1;
-				dial.populateGrid();
+				dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
 			}
 		}
 	}
-});
-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.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 app.Messages.Commands.settingsChanged:
-				app.Messages.getSettings(app.Settings._changed);
-				break;
-			case app.Messages.Commands.gridNodesLoaded:
-				if(dial.skipUpdate!=true) app.Messages.getNode(dial.path, app.GridNodes._changed);
-				break;
-		}
-	});
-};
-app.Messages.getSettings = function(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.getBackgroundPage().then(function(page){
-		if(page){
-			if(callback) callback(page.app.GridNodes.getNode(page.app.node, dial.path.substr(1)));
-		} else {
-			browser.runtime.sendMessage({ cmd: app.Messages.Commands.getNode, path: path }).then(callback);
-		}
-	});
-};
-app.Messages.updateNode = function(id, value, callback){
-	browser.runtime.sendMessage({ cmd: app.Messages.Commands.updateNode, id: id, value: value }).then(callback);
-};
-app.Messages.setNodeIndex = function(index, newIndex, callback){
-	browser.runtime.sendMessage({ cmd: app.Messages.Commands.setNodeIndex, path: dial.path, index: index, newIndex: newIndex }).then(callback);
-};
-app.Messages.createBookmark = function(url, 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: app.Messages.Commands.createFolder, path: dial.path, name: name }).then(callback);
-};
-app.Messages.deleteNode = function(id, 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: app.Messages.Commands.refreshNode, path: dial.path, id: id }).then(callback);
-}
-app.Messages.capturePage = function(id, callback){
-	browser.runtime.sendMessage({ cmd: app.Messages.Commands.capturePage, path: dial.path, id: id }).then(callback);
 }
 
 
-app.Settings = {};
+dial.initUI = function(){
-app.Settings._changed = function(settings){
+	dial.Head = document.getElementById('head');
-	app.settings = settings;
+	dial.Title = document.getElementById('title');
+	dial.Body = document.getElementById('body');
+	dial.Body.setAttribute('contextmenu', 'page');
+	dial.Body.setAttribute('contextmenu', 'page');
 	dial.initStyles();
-	dial.initGrid();
+	dial.initMenus();
-};
+	dial.Grid = dial.initGrid('Grid', app.settings.grid, dial.Body);
-
+	var url = new URL(window.location);
-app.GridNodes = {};
+	dial.path = url.searchParams.get('path');
-app.GridNodes.GridNodeType = { // GridNodeType
+	if(url.searchParams.get('path')) {
-	back: -1,
+		dial.Node = app.getNode(app.settings.grid.node, dial.path + '/');
-	empty: 0,
+	}	else {
-	folder: 1,
+		dial.Node = app.getNode(app.settings.grid.node, '/');
-	bookmark: 2
+	}
+	dial.Title.innerText = dial.Node.title;
+	dial.populateGrid(dial.Grid, app.settings.grid, dial.Node);
 }
-app.GridNodes._changed = function(node){
-	app.node = node;
-	dial.Title.innerText = app.node.title;
-	dial.populateGrid();
-};
 
+dial.initStyles = function(){
+	dial.Style = document.createElement('style'), StyleSheet;
+	document.head.appendChild(dial.Style);
+	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.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.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.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.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;
+	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;
+	if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover;
+	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.linkFolder = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Folder :first-child { background-image: ' + app.settings.grid.folderIcon + '; background-repeat: no-repeat; background-size: 100% 100%; }')].style;
+	dial.styles.grid.linkBookmark = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Bookmark :first-child { background-repeat: no-repeat; background-size: 100% 100%; }')].style;
+	dial.styles.grid.linkBookmarkLoading = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.BookmarkLoading :first-child { background-image: url("' + app.settings.grid.cells.loadingIcon + '"); background-repeat: no-repeat; background-position: center center; }')].style;
+}
 
-
-
-dial.init = function(){
-	//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');
 	dial.PageMenu.type = 'context';
 	dial.PageMenu.id = 'page'
@@ -190,7 +133,7 @@ dial.initMenus = function(){
 	dial.PageMenuNew.appendChild(dial.PageMenuCreateFolder);
 	dial.PageMenu.appendChild(document.createElement('hr'));
 	dial.PageMenu.appendChild(dial.PageMenuSettings);
-	document.body.appendChild(dial.PageMenu);
+	dial.Body.appendChild(dial.PageMenu);
 
 	dial.ItemMenu = document.createElement('menu');
 	dial.ItemMenu.type = 'context';
@@ -205,30 +148,18 @@ dial.initMenus = function(){
 	dial.ItemMenuCreateFolder = document.createElement('menuitem');
 	dial.ItemMenuCreateFolder.label = browser.i18n.getMessage("menuNewFolder");
 	dial.ItemMenuCreateFolder.onclick = dial.createFolder;
-	
+	/*
-	dial.ItemMenuProperties = document.createElement('menuitem');
+	dial.ItemMenuEdit = document.createElement('menuitem');
-	dial.ItemMenuProperties.label = browser.i18n.getMessage("menuProperties");
+	dial.ItemMenuEdit.label = 'Edit';
-	dial.ItemMenuProperties.onclick = function(){
+	//dial.ItemMenuEdit.onclick = dial.test;
-		dial.editProperties(dial._selectedItem);
+	*/
-	};
-	
 	dial.ItemMenuRefresh = document.createElement('menuitem');
 	dial.ItemMenuRefresh.label = browser.i18n.getMessage("menuRefreshItem");
-	dial.ItemMenuRefresh.onclick = function(){
+	dial.ItemMenuRefresh.onclick = dial.refreshNode;
-		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(){
+	dial.ItemMenuCapture.onclick = dial.capturePage;
-		dial.capturePage(dial._selectedItem);
-	};
 	
 	dial.ItemMenuDelete = document.createElement('menuitem');
 	dial.ItemMenuDelete.label = browser.i18n.getMessage("menuDeleteItem");
@@ -242,250 +173,93 @@ dial.initMenus = function(){
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateBookmark);
 	dial.ItemMenuNew.appendChild(dial.ItemMenuCreateFolder);
 	dial.ItemMenu.appendChild(document.createElement('hr'));
-	dial.ItemMenu.appendChild(dial.ItemMenuProperties);
+	//dial.ItemMenu.appendChild(dial.ItemMenuEdit);
 	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.Body.appendChild(dial.ItemMenu);
 }
-*/
-dial.initStyles = function(){
-	function applyImageMode(imageMode, target){
-		switch(imageMode){
-			case 0:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = '100% 100%';
-				break;
-			case 1:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = 'cover';
-				target.backgroundPosition = 'center';
-				break;
-			case 2:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = 'contain';
-				target.backgroundPosition = 'center';
-				break;
-			case 3:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundPosition = 'center';
-				break;
-		}
-	}
 
-	var oldStyle = dial.Style;
+dial.initGrid = function(name, settings, container){
-	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 + '; }')].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.cellHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td:hover {}')].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 + '; 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;
-	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;
-	else dial.styles.grid.linkTitle.backgroundColor = 'transparent';
-	dial.styles.grid.linkTitleHover = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a:hover>div:last-child { font-size: ' + app.settings.grid.cells.titleFontSizeHover + 'pt; color: ' + app.settings.grid.cells.titleColorHover + '; border-top-width: ' + app.settings.grid.cells.titleBorderSizeHover + 'px; border-top-color: ' + app.settings.grid.cells.borderColorHover + ' }')].style;
-	if(app.settings.grid.cells.titleBackgroundColorHover) dial.styles.grid.linkTitleHover.backgroundColor = app.settings.grid.cells.titleBackgroundColorHover;
-	else dial.styles.grid.linkTitleHover.backgroundColor = 'transparent';
-	dial.styles.grid.linkEmpty = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Empty { display: none; }')].style;
-	dial.styles.grid.linkBack = dial.Style.sheet.cssRules[dial.Style.sheet.insertRule('.Grid td>a.Back :first-child { background-image: ' + app.settings.grid.backIcon + '; }')].style;
-	applyImageMode(app.settings.grid.backIconMode, dial.styles.grid.linkBack);
-	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(){
-	var oldGrid = dial.Grid;
-	dial.Grid = document.createElement('table');
 	var grid = document.createElement('table');
-	dial.Grid.className = 'Grid';
+	grid.className = name;
-	dial.Grid.getLink = function(index){
+	grid.getLink = function(index){
-		var num_columns = dial.Grid.rows[0].cells.length;
+		var num_columns = grid.rows[0].cells.length;
-		return dial.Grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0];
+		return grid.rows[Math.floor(index/num_columns)].cells[index % num_columns].childNodes[0];
 	}
-	for(var i=0; i<app.settings.grid.rows; i++){
+	for(var i=0; i<settings.rows; i++){
-		var row = dial.Grid.insertRow();
+		var row = grid.insertRow();
-		for(var j=0; j<app.settings.grid.columns; j++){
+		for(var j=0; j<settings.columns; j++){
 			var cell = row.insertCell();
 			var link = document.createElement('a');
-			cell.setAttribute('gridindex', (i * app.settings.grid.columns + j));
+			cell.setAttribute('gridindex', (i * settings.columns + j));
 			cell.appendChild(link);
-			link.className = 'Empty';
 			link.appendChild(document.createElement('div'));
 			link.appendChild(document.createElement('div'));
-			link.onmousedown = function(){
+			link.onmousedown = function(){ dial._selectedItem = this; };
-				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;
+				if(settings.backNode && dial.path) index -= dial.page;
-				ev.dataTransfer.setData("text/plain", JSON.stringify({parentId: app.node.id, index: index}));
+				console.log(index);
-			}
+				ev.dataTransfer.setData("text/plain", index);
-			function dragover_handler(ev) {
+			 }
+			 function dragover_handler(ev) {
 				ev.preventDefault();
-				var data = ev.dataTransfer.getData("text");
+				ev.dataTransfer.dropEffect = "move"
-				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 data = ev.dataTransfer.getData("text");
+				var StartIndex = 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'));
 				} else{
-					EndIndex = (dial.page - 1) * (app.settings.grid.rows * app.settings.grid.columns) + +(ev.target.getAttribute('gridindex'));
+					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;
+				if(settings.backNode && dial.path) EndIndex -= dial.page;
-				if(StartIndex != EndIndex) app.Messages.setNodeIndex(StartIndex, EndIndex);
+				app.setNodeIndex(dial.Node, StartIndex, EndIndex);
 			}
 			link.draggable = true;
 			link.ondragstart = dragstart_handler;
 			cell.ondragover = dragover_handler;
 			cell.ondrop = drop_handler;
+			
 		}
 	}
-	document.body.appendChild(dial.Grid);
+	container.appendChild(grid);
-	dial.updateGridLayout();
+	dial.updateGridLayout(grid, settings, dial.styles.grid);
-	if(oldGrid) document.body.removeChild(oldGrid);
+	return grid;
-	return dial.Grid;
+}
-};
+
-dial.updateGridLayout = function(){
+dial.updateGridLayout = function(grid, settings, styles){
-	var parentWidth = dial.Grid.parentElement.offsetWidth;
+	var fullWidth = grid.parentElement.offsetWidth - 2 * settings.margin;
-	var parentHeight = dial.Grid.parentElement.offsetHeight;
+	var fullHeight = grid.parentElement.offsetHeight - 2 * settings.margin;
+	var linkWidth = fullWidth / settings.columns;
+	var linkHeight = fullHeight / settings.rows;
+	if(linkWidth <= linkHeight * settings.cells.ratioX / settings.cells.ratioY) linkHeight = linkWidth / settings.cells.ratioX * settings.cells.ratioY;
+	else linkWidth = linkHeight / settings.cells.ratioY * settings.cells.ratioX;
 	
-	function calc(gridMargin, cellsMargin, borderSize, titleBorderSize){
+	styles.cell.width = linkWidth.toString() + 'px';
-		var fullWidth = parentWidth - 2 * gridMargin;
+	styles.cell.height = linkHeight.toString() + 'px';
-		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
-		};
-	}
 
-	var values = calc(app.settings.grid.margin, app.settings.grid.cells.margin, app.settings.grid.cells.borderSize, app.settings.grid.cells.titleBorderSize);
+	linkWidth = linkWidth - 2 * (settings.cells.margin + 1);
-	dial.styles.grid.cell.width = values.cellWidth.toString() + 'px';
+	linkHeight = linkHeight - 2 * (settings.cells.margin + 1);
-	dial.styles.grid.cell.height = values.cellHeight.toString() + 'px';
+	
-	dial.styles.grid.link.width = values.linkWidth.toString() + 'px';
+	styles.link.width = linkWidth.toString() + 'px';
-	dial.styles.grid.link.height = values.linkHeight.toString() + 'px';
+	styles.link.height = 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';
+	if(settings.cells.title) styles.linkPanel.height = (linkHeight - settings.cells.titleHeight - 1).toString() + 'px';
-	else dial.styles.grid.linkPanel.height = values.linkHeight.toString() + 'px';
+	else styles.linkPanel.height = linkHeight.toString() + 'px';
+}
 
-	values = calc(app.settings.grid.margin, app.settings.grid.cells.marginHover, app.settings.grid.cells.borderSizeHover, app.settings.grid.cells.titleBorderSizeHover);
+dial.populateGrid = function(grid, settings, node){
-	dial.styles.grid.cellHover.width = values.cellWidth.toString() + 'px';
-	dial.styles.grid.cellHover.height = values.cellHeight.toString() + 'px';
-	dial.styles.grid.linkHover.width = values.linkWidth.toString() + 'px';
-	dial.styles.grid.linkHover.height = values.linkHeight.toString() + 'px';
-	if(app.settings.grid.cells.titleHover) dial.styles.grid.linkPanelHover.height = (values.linkHeight - app.settings.grid.cells.titleHeightHover - 1 - app.settings.grid.cells.titleBorderSizeHover).toString() + 'px';
-	else dial.styles.grid.linkPanelHover.height = values.linkHeight.toString() + 'px';
-};
-dial.populateGrid = function(){
-	function applyImageMode(imageMode, target){
-		switch(imageMode){
-			case -1:
-				target.backgroundRepeat = '';
-				target.backgroundSize = '';
-				target.backgroundPosition = '';
-				break;
-			case 0:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = '100% 100%';
-				target.backgroundPosition = '';
-				break;
-			case 1:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = 'cover';
-				target.backgroundPosition = 'center';
-				break;
-			case 2:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = 'contain';
-				target.backgroundPosition = 'center';
-				break;
-			case 3:
-				target.backgroundRepeat = 'no-repeat';
-				target.backgroundSize = 'auto auto';
-				target.backgroundPosition = 'center';
-				break;
-		}
-	}
 	populateEmpty = function(link){
 		link.Node = null;
 		link.className = 'Empty';
 		link.childNodes[0].style.backgroundImage = '';
-		if(link.target) delete link.target;
 		link.href = null;
 		link.onclick = null;
 		link.removeAttribute('contextmenu');
@@ -495,7 +269,6 @@ 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');
@@ -503,48 +276,28 @@ dial.populateGrid = function(){
 	populateFolder = function(link, node){
 		link.Node = node;
 		link.className = 'Folder';
-		if(node.imageMode || node.imageMode == 0) applyImageMode(node.imageMode, link.childNodes[0].style);
+		link.childNodes[0].style.backgroundImage = '';
-		else applyImageMode(-1, link.childNodes[0].style);
-		if(node.image){
-			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
-			else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
-		} else link.childNodes[0].style.backgroundImage = '';
 		link.childNodes[1].innerText = node.title;
-		switch(app.settings.grid.openFolderMethod){
+		if(dial.path) link.href = '?path=' + dial.path + '/' + node.title;
-			case 0:
+		else link.href = '?path=' + node.title;
-				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';
-			if(node.image.indexOf('url(')>=0) link.childNodes[0].style.backgroundImage = node.image;
+			link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
-			else link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
 		} else {
 			link.className = 'BookmarkLoading';
 			link.childNodes[0].style.backgroundImage = '';
-			dial.refreshNode(link);
+			app.refreshNode(node, function(){
+				link.className = 'Bookmark';
+				link.childNodes[0].style.backgroundImage = 'url(' + node.image + ')';
+				link.childNodes[1].innerText = node.title;
+			});
 		}
 		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');
@@ -552,141 +305,69 @@ dial.populateGrid = function(){
 
 	var iBase = 0;
 	var linkItem = 0;
-	var allCells = app.settings.grid.rows * app.settings.grid.columns;
+	var allCells = settings.rows * settings.columns;
 	var maxCells = allCells;
-	if(app.settings.grid.backNode && dial.path != '/'){
+	if(settings.backNode && dial.path){
-		populateBack(dial.Grid.getLink(linkItem));
+		populateBack(grid.getLink(linkItem));
 		linkItem++;
 		maxCells -= 1;
 	}
-	dial.maxpage = Math.floor(app.node.children.length / maxCells);
+	dial.maxpage = Math.floor(node.children.length / maxCells);
-	if(dial.maxpage != app.node.children.length / maxCells) dial.maxpage += 1;
+	if(dial.maxpage != node.children.length / maxCells) dial.maxpage += 1;
 	if(dial.page > dial.maxpage) dial.page = dial.maxpage;
 	if(dial.page > 1) iBase = (dial.page -1) * maxCells;
-	for(var i = iBase; i<app.node.children.length && i<maxCells + iBase; i++) {
+	for(var i = iBase; i<node.children.length && i<maxCells + iBase; i++) {
-		switch(app.node.children[i].type){
+		switch(node.children[i].type){
-			case app.GridNodes.GridNodeType.empty:
+			case app.GridNodeType.empty:
-				populateEmpty(dial.Grid.getLink(linkItem));
+				populateEmpty(grid.getLink(linkItem));
 				break;
-			case app.GridNodes.GridNodeType.folder:
+			case app.GridNodeType.folder:
-				populateFolder(dial.Grid.getLink(linkItem), app.node.children[i]);
+				populateFolder(grid.getLink(linkItem), node.children[i]);
 				break;
-			case app.GridNodes.GridNodeType.bookmark:
+			case app.GridNodeType.bookmark:
-				populateBookmark(dial.Grid.getLink(linkItem), app.node.children[i]);
+				populateBookmark(grid.getLink(linkItem), node.children[i]);
 				break;
 		}
 		linkItem++;
 	}
 	while(linkItem<allCells){
-		populateEmpty(dial.Grid.getLink(linkItem));
+		populateEmpty(grid.getLink(linkItem));
 		linkItem++;
 	}
-};
+}
+
 dial.createBookmark = function(){
 	var url = prompt(browser.i18n.getMessage("AddBookmarkPrompt"), 'https://');
-	if(url) app.Messages.createBookmark(url);
+	if(url) app.createBookmark(dial.Node, url);
 };
+
 dial.createFolder = function(){
 	var name = prompt(browser.i18n.getMessage("AddFolderPrompt"), 'New Folder');
-	if(name) app.Messages.createFolder(name);
+	if(name) app.createFolder(dial.Node, name);
 };
+
+dial.refreshNode = function(){
+	if(dial._selectedItem.Node.type == app.GridNodeType.bookmark){
+		var link = dial._selectedItem;
+		link.className = 'BookmarkLoading';
+		link.childNodes[0].style.backgroundImage = '';
+		app.refreshNode(link.Node, function(){
+			link.className = 'Bookmark';
+			link.childNodes[0].style.backgroundImage = 'url(' + link.Node.image + ')';
+			link.childNodes[1].innerText = link.Node.title;
+		});
+	}
+}
+
 dial.deleteNode = function(){
 	if(confirm(browser.i18n.getMessage("deleteItemConfimation", dial._selectedItem.Node.title)))
-		app.Messages.deleteNode(dial._selectedItem.Node.id);
+		app.deleteNode(dial.Node, dial._selectedItem.Node.id);
-}
-dial.refreshNode = function(selectedItem){
-	selectedItem.className = 'BookmarkLoading';
-	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;
-	app.Messages.capturePage(selectedItem.Node.id);
 }
 
+dial.capturePage = function(){
+	if(dial._selectedItem.Node.type == app.GridNodeType.bookmark)
+		app.capturePage(dial._selectedItem.Node);
+}
 
 
 
@@ -718,26 +399,26 @@ dial.PopupPanel = function(width, height, modal){ // PopupPanel Object
 		this._contextMenuHandler = function(e){ e.preventDefault(); }
 		this.popup = function(){
 			window.addEventListener('contextmenu', this._contextMenuHandler, false);
-			document.body.appendChild(this.modal);
+			dial.Body.appendChild(this.modal);
-			document.body.appendChild(this.panelContainer);
+			dial.Body.appendChild(this.panelContainer);
 		}
 		this.close = function(){
-			document.body.removeChild(this.modal);
+			dial.Body.removeChild(this.modal);
-			document.body.removeChild(this.panelContainer);
+			dial.Body.removeChild(this.panelContainer);
 			window.removeEventListener('contextmenu', this._contextMenuHandler, false);
 		}
 	} else {
 		this.popup = function(){
-			document.body.appendChild(this.panelContainer);
+			dial.Body.appendChild(this.panelContainer);
 		}
 		this.close = function(){
-			document.body.removeChild(this.panelContainer);
+			dialBody.removeChild(this.panelContainer);
 		}
 	}
 }
 
 dial.editSettings = function(){
-	var popup = new dial.PopupPanel(500, 440, true);
+	var popup = new dial.PopupPanel(500, 420, true);
 	var iframe = document.createElement('iframe');
 	iframe.style.width = '100%';
 	iframe.style.height = '100%';
@@ -749,21 +430,4 @@ 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

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

@@ -1,59 +1,30 @@
-var app = {};
-
 var BackgroundImage = null;
 var GridBackImage = null;
 var GridFolderImage = null;
 
-document.addEventListener("DOMContentLoaded", function(event) {
+window.onload = function(){
-	app.init();
+	browser.runtime.getBackgroundPage().then(function(page){
-});
+		app = page.app;
-
-
-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);
@@ -63,20 +34,14 @@ 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(){
@@ -84,30 +49,17 @@ 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.opacity = +(GridCellsOpacity.value) / 100;
+		app.settings.grid.cells.marginHover = +(GridCellsMargins.value);
-		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;
@@ -117,22 +69,15 @@ app.init = function(){
 		app.settings.grid.cells.borderColor = GridCellsBorderColor.value;
 		app.settings.grid.cells.borderColorHover = GridCellsBorderColorHover.value;
 		app.settings.grid.cells.title = GridCellsTitle.checked;
-		app.settings.grid.cells.titleHover = GridCellsTitleHover.checked;
 		app.settings.grid.cells.titleHeight = GridCellsTitleHeight.value;
-		app.settings.grid.cells.titleHeightHover = GridCellsTitleHeightHover.value;
 		app.settings.grid.cells.titleFontSize = GridCellsTitleFontSize.value;
-		app.settings.grid.cells.titleFontSizeHover = GridCellsTitleFontSizeHover.value;
-		app.settings.grid.cells.titleBorderSize = GridCellsTitleBorderSize.value;
-		app.settings.grid.cells.titleBorderSizeHover = GridCellsTitleBorderSizeHover.value;
 		app.settings.grid.cells.titleColor = GridCellsTitleColor.value;
 		app.settings.grid.cells.titleColorHover = GridCellsTitleColorHover.value;
 		if(GridCellsTitleBackgroundTransparent.checked == true) app.settings.grid.cells.titleBackgroundColor = null;
 		else app.settings.grid.cells.titleBackgroundColor = GridCellsTitleBackgroundColor.value;
 		if(GridCellsTitleBackgroundTransparentHover.checked == true) app.settings.grid.cells.titleBackgroundColorHover = null;
 		else app.settings.grid.cells.titleBackgroundColorHover = GridCellsTitleBackgroundColorHover.value;
-		app.settings.grid.cells.snapshotDelay = GridCellsSnapshotDelay.value;
+		app.saveSettings();
-		app.settings.grid.root = GridRoot.value;
-		browser.runtime.sendMessage( { cmd: app.Messages.Commands.setSettings, settings: app.settings } );
 	}
 	BtnCancel.onclick = function(){
 		window.frameElement.popup.close();
@@ -174,19 +119,6 @@ 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;
@@ -220,28 +152,5 @@ app.init = function(){
 		}
 		fileReader.readAsDataURL(GridFolderImageFile.files[0]);
 	}
-};
+	
-
+}
-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);
-};
-
-
-
-

src/manifest.json

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