Version 3.0.0

data/home/home.css

@@ -147,7 +147,7 @@ body {
 	margin: -25px 0 0 0;
 	color: #333;
 	transform: translate(-50%, -30px);
-	
+
 	background: rgba(255, 255, 255, 1);
 	text-align: center;
 	line-height: 20px;
@@ -162,7 +162,7 @@ body {
 	opacity: 0.85;
 
 	box-shadow: 0 2px 4px 0px #999;
-	box-sizing: border-box;	
+	box-sizing: border-box;
 }
 
 #tooltip:before {
@@ -207,9 +207,8 @@ body {
 	margin-left: 50%;
 	height: auto;
 	overflow: hidden;
-	background: rgba(255, 255, 255, );
 	position: absolute;
-	top: 0;  
+	top: 0;
 	z-index: 1;
 	transform: translateX(-50%);
 }
@@ -235,7 +234,7 @@ body {
 }
 
 #container .preview {
-	
+
 }
 
 #container .carousel {

data/home/home.html

@@ -4,7 +4,7 @@
 
 	<meta charset="utf-8">
 	<title>Session Sync</title>
-	<link rel="icon" href="icon16.png" />
+	<link rel="icon" href="../images/icon64.png" />
 	<link rel="stylesheet" href="./home.css" />
 
 </head>
@@ -41,7 +41,12 @@
 				<div id="scroll-right" class="scroll-button"> </div>
 				<div class="helpers">
 					<div id="info-overview">
-						Press <b><span class="highlight">CTRL + SHIFT + F</span></b> to open the panel or use the <b><span class="highlight">widget</span></b> provided to open the panel
+						Press <b><span id="hotkey-_execute_browser_action" class="highlight">CTRL + SHIFT + F</span></b> to open the panel or use the <b><span class="highlight">widget</span></b> provided to open the panel
+					</div>
+					<div id="info-history-list">
+							You can find all your recent <span class="highlight">browsing history</span> in the history tab. </br>
+							<b> Restore the session or <span class="highlight">save</span> </b> it if you want to keep indefinitely </br>
+							<span class="highlight"><b>Configure</b></span> history settings in the configuration panel
 					</div>
 					<div id="info-session-filter">
 						Use the search bar to easy <b><span class="highlight"> filter through saved sessions </span></b>
@@ -93,10 +98,9 @@
 						</br>
 						<b> Click </b> on the URL bar to <span class="highlight">copy</span> the link</b>
 					</div>
-					<div id="info-history-list">
-						You can find all your recent <span class="highlight">browsing history</span> in the history tab. </br>
-						<b> Restore the session or <span class="highlight">save</span> </b> it if you want to keep indefinitely </br>
-						<span class="highlight"><b>Configure</b></span> history settings in the configuration panel
+					<div id="info-detach-mode">
+						You can detach the UI into a separate <span class="highlight">window</span> or <span class="highlight">tab</span> (see configuration) </br>
+						Press <b><span id="hotkey-session-sync-detach" class="highlight">CTRL + SHIFT + V</span></b> or use the <span class="highlight"><b> button from addon menu</span></b> </br>
 					</div>
 				</div>
 			</div>

data/home/home.js

@@ -135,6 +135,10 @@ function CreateHelpPage()
 			title: 'Addon overview',
 			info: 'overview'
 		},
+		{
+			title : 'Session history',
+			info: 'history-list'
+		},
 		{
 			title: 'Session menu',
 			info: 'session-menu'
@@ -180,8 +184,8 @@ function CreateHelpPage()
 			info: 'resize-sessions'
 		},
 		{
-			title : 'Session history',
-			info: 'history-list'
+			title : 'Detach mode',
+			info: 'detach-mode'
 		}
 	];
 
@@ -194,4 +198,14 @@ function CreateHelpPage()
 	});
 
 	return helper_list.length;
-};
+}
+
+browser.commands.getAll().
+then(function (commands) {
+	commands.forEach(function (command) {
+		var shortcut = document.getElementById('hotkey-'+ command.name);
+		if (shortcut) {
+			shortcut.textContent = command.shortcut;
+		}
+	});
+});

data/scripts/app.js

@@ -22,7 +22,7 @@ define(function(require, exports) {
 			function success(bookmarks) {
 				if (bookmarks.length == 0)
 				{
-					BookmarkManager.searchBookmarks({ title: 'Bookmarks Menu 3'})
+					BookmarkManager.searchBookmarks({ title: 'Bookmarks Menu'})
 					.then(function (menus) {
 						BookmarkManager.createBookmark({
 							title: 'SessionSync',
@@ -40,11 +40,11 @@ define(function(require, exports) {
 		);
 	};
 
-	var listSessions = function listSessions()
+	var listSessions = function listSessions(fastMode)
 	{
 		BookmarkManager.getFolderBookmarks(AppConfig.get('storageID'), function(sessions) {
 			SessionSyncModel.sessions = sessions;
-			WindowEvents.emit(document, 'ListSessions');
+			WindowEvents.emit(document, 'ListSessions', fastMode);
 		});
 	};
 
@@ -54,13 +54,13 @@ define(function(require, exports) {
 
 		findSessionSync(function(bookmark) {
 			AppConfig.set('storageID', bookmark.id, function() {
-				listSessions();
+				listSessions(true);
 			});
 		});
 
 		AppConfig.init();
 
-		GlobalEvents.on('update-sessions', listSessions.bind(null, false));
+		GlobalEvents.on('update-sessions', listSessions.bind(null, false, false));
 	};
 
 	// ------------------------------------------------------------------------

data/scripts/components/config-panel.js

@@ -59,7 +59,10 @@ define(function(require, exports) {
 
 		function ToggleOptionConfig(options)
 		{
-			var toggleBtn = new DOMComponent.ToggleButton(document, {
+			var isSwitch = (options.type === 'switch');
+			var Toggle = isSwitch ? DOMComponent.ToggleSwitch : DOMComponent.ToggleButton;
+
+			var toggleBtn = new Toggle(document, {
 				state: AppConfig.get(options.key),
 				description: options.name,
 				onState: options.onState,
@@ -73,7 +76,14 @@ define(function(require, exports) {
 			});
 			options.parent.addItem(toggleBtn.DOMRoot);
 			GlobalEvents.on(options.key, function(value) {
-				toggleBtn.setValue(value, false);
+				if (isSwitch)
+				{
+					toggleBtn.setState(value);
+				}
+				else
+				{
+					toggleBtn.setValue(value, false);
+				}
 			});
 		}
 
@@ -122,8 +132,11 @@ define(function(require, exports) {
 			var section = new ConfigSection(document, { title: 'UI Scaling' });
 			panel.appendChild(section.container);
 
-			RangeOptionConfig({ parent: section, name: 'Panel width (px)', key: 'style.panel.width', minValue: 500, maxValue: 800, step: 5});
-			RangeOptionConfig({ parent: section, name: 'Panel height (px)', key: 'style.panel.height', minValue: 400, maxValue: 600, step: 5});
+			if (AppConfig.isPanel())
+			{
+				RangeOptionConfig({ parent: section, name: 'Panel width (px)', key: 'style.panel.width', minValue: 500, maxValue: 800, step: 5});
+				RangeOptionConfig({ parent: section, name: 'Panel height (px)', key: 'style.panel.height', minValue: 400, maxValue: 600, step: 5});
+			}
 			RangeOptionConfig({ parent: section, name: 'Header bar', key: 'style.scale.header', minValue: 10, maxValue: 50});
 			RangeOptionConfig({ parent: section, name: 'Toolbar', key: 'style.scale.toolbar', minValue: 10, maxValue: 50});
 			RangeOptionConfig({ parent: section, name: 'Session list', key: 'style.scale.sessions', minValue: 10, maxValue: 50});
@@ -149,11 +162,64 @@ define(function(require, exports) {
 
 			ToggleOptionConfig({
 				parent: section,
+				type: 'switch',
 				name: 'Context menu icons',
 				key: 'context.menu.icons',
 				onState: 'Show',
 				offState: 'Disabled',
 			});
+
+			ToggleOptionConfig({
+				parent: section,
+				name: 'Detach method',
+				key: 'detach.window',
+				onState: 'Window',
+				offState: 'New tab',
+			});
+
+		})();
+
+		// ------------------------
+		// Section: Hotkeys
+
+		(function() {
+
+			if (!AppConfig.isAddonContext())
+				return;
+
+			if (typeof browser === 'object' && browser.commands.update == undefined)
+				return;
+
+			var section = new ConfigSection(document, { title: 'Hotkeys' });
+			panel.appendChild(section.container);
+
+			function HotkeyOptionConfig(command)
+			{
+				var button = new DOMComponent.ActionButton(document, {
+					value: command.shortcut,
+					description: command.description,
+					callback: function() {
+						WindowEvents.emit(document, 'ChangeHotkey', {
+							title: command.description,
+							shortcut: button.getValue(),
+							callback: function (value) {
+								button.setValue(value);
+								command.shortcut = value;
+								GlobalEvents.emit('hotkey.update', command);
+							}
+						});
+					},
+				});
+
+				return button.DOMRoot;
+			}
+
+			GlobalEvents.on('config.hotkey.init', function(commands) {
+				commands.forEach(function (command) {
+					var action = HotkeyOptionConfig(command);
+					section.addItem(action);
+				});
+			});
 		})();
 
 		// ------------------------
@@ -167,7 +233,7 @@ define(function(require, exports) {
 			SessionHistory.getConfig(function (historyConfig) {
 
 				// Context menu icons
-				var contextMenuIconsTB = new DOMComponent.ToggleButton(document, {
+				var contextMenuIconsTB = new DOMComponent.ToggleSwitch(document, {
 					state: historyConfig.enabled,
 					description: 'Auto-save sessions',
 					onState: 'Enabled',

data/scripts/components/overlay-system.js

@@ -0,0 +1,67 @@
+define(function(require, exports) {
+	'use strict';
+
+	// *****************************************************************************
+	// Custom Modules
+
+	const { AppConfig } = require('../config');
+	const { HTMLCreator } = require('../utils/dom');
+	const { WindowEvents } = require('../utils/global-events');
+
+	// *****************************************************************************
+	// API
+
+	/*
+	* Session Hotkeys
+	*/
+
+	function OverlaySystem(document)
+	{
+		// Create DomHealper
+		var DomElem = HTMLCreator(document);
+
+		// ------------------------------------------------------------------------
+		// Create UI
+
+		var overlay = DomElem('div', { id : 'overlay' });
+
+		// ------------------------------------------------------------------------
+		// Events
+
+		var state = false;
+
+		function setState(options) {
+			if (AppConfig.isPanel()) {
+				state = options.state;
+				overlay.setAttribute('state', state);
+
+				if (options.zIndex) {
+					overlay.style.zIndex = options.zIndex;
+				}
+
+				if (state == false) {
+					overlay.removeAttribute('style');
+				}
+			}
+		}
+
+		function autoHide() {
+			if (state == true)
+				setState(false);
+		}
+
+		document.addEventListener('click', autoHide);
+
+		WindowEvents.on(document, 'OverlaySystem', setState);
+
+		// ------------------------------------------------------------------------
+		// Public properties
+
+		this.DOMRoot = overlay;
+	}
+
+	// *****************************************************************************
+	// Public API
+
+	exports.OverlaySystem = OverlaySystem;
+});

data/scripts/components/session-bookmark.js

@@ -187,7 +187,7 @@ define(function(require, exports) {
 			if (SyncModel.state.session == 'restore')
 			{
 				var bookmarkID = getBookmarkID(e);
-				if (bookmarkID != 0) {
+				if (bookmarkID != null) {
 					WindowEvents.emit(document, 'BookmarkCtxMenu-EditBookmark', bookmarkID);
 				}
 			}
@@ -365,7 +365,7 @@ define(function(require, exports) {
 				// if restore session preview
 				case 'restore': {
 					var bookmarkID = getBookmarkID(e);
-					if (bookmarkID == 0) {
+					if (bookmarkID == null) {
 						return;
 					}
 
@@ -432,6 +432,8 @@ define(function(require, exports) {
 			if (SyncModel.state.session == 'restore')
 			{
 				var bookmarkID = getBookmarkID(e);
+				if (bookmarkID == null)
+					return;
 
 				WindowEvents.emit(document, 'BookmarkCtxMenu-Open', {
 					context: bookmarkID,