Version 0.0.4

TODO

@@ -1,7 +1,6 @@
 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
+Add favicon support

src/js/background.js

@@ -45,7 +45,7 @@ core.Settings.load = function(callback){ // Load settings
 				titleBackgroundColorHover: null
 			},
 			root: 'Quick Dial',
-			node: {}
+			node: { children: [] }
 		}
 	}).then(function(obj){
 		if(obj.grid.cells.backIcon){ // Upgrade Data Version
@@ -145,7 +145,7 @@ core.SiteInfos.fromTab = function(callback){ // Retrieve infos from current tab.
 		setTimeout(whaitLoaded, 300);
 	}, function(){ if(callback) callback();	});
 }
-core.SiteInfos.fromNewTab1 = function(url, callback){  // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
+core.SiteInfos.fromNewTab = function(url, callback){  // Retrieve infos from a new tab. callback( { url, title, icon, screenshot } || error: callback() )
 	browser.tabs.create({url: url, active: false}).then(function(tab){
 		browser.tabs.update(tab.id, {muted: true}).then();
 		function whaitLoaded(){
@@ -153,33 +153,39 @@ core.SiteInfos.fromNewTab1 = function(url, callback){  // Retrieve infos from a
 				if(tab.status == 'loading') setTimeout(whaitLoaded, 300);
 				else {
 					browser.tabs.update(tab.id, {active: true}).then(function(){
-console.log('Hello');						
 						setTimeout(function(){
 							browser.tabs.captureVisibleTab().then(function(img){
 								browser.tabs.remove(tab.id);
 								
-								var previewWidth = 1200; // Need to be linked to settings
-								var previewHeight = 710; // Need to be linked to settings
 								var imgObj = new Image;
 								imgObj.src = img;
 
+								var previewWidth = 1200; // Need to be linked to settings
+								var previewHeight = 710; // Need to be linked to settings
+
 								var canvas = document.createElement('canvas');
 								canvas.style.width = previewWidth.toString() + 'px';
 								canvas.style.height = previewHeight.toString() + 'px';
 								canvas.width = previewWidth / 2;
 								canvas.height = previewHeight / 2;
+
 								var ctx = canvas.getContext('2d');
 								ctx.clearRect(0, 0, previewWidth, previewHeight);
 								ctx.save();
 								ctx.scale(0.5, 0.5);
-								//ctx.drawImage(img, 0, 0, previewWidth, previewHeight, 'rgb(255, 255, 255)');
-console.log(img);
-								ctx.drawImage(imgObj, 0, 0, 0, 0, 'rgb(255, 255, 255)');
-								ctx.restore();
-								img = canvas.toDataURL();
-														
-								
-								if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
+								setTimeout(function(){
+									if(tab.height * previewWidth / previewHeight >= tab.width){
+										// Cut the bottom of the page
+										ctx.drawImage(imgObj, 0, 0, tab.width, tab.width / previewWidth * previewHeight, 0, 0, previewWidth, previewHeight);
+									} else {
+										// Stretch or cutting right part of the page ? actualy Stretch
+										ctx.drawImage(imgObj, 0, 0, tab.width, tab.height, 0, 0, previewWidth, previewHeight);
+										//ctx.drawImage(imgObj, 0, 0, tab.height / previewHeight * previewWidth, tab.height, 0, 0, previewWidth, previewHeight);
+									}
+									ctx.restore();
+									img = canvas.toDataURL();
+									if(callback) callback( { url: tab.url, title: tab.title, icon: tab.favIconUrl, screenshot: img } );
+								}, 1);
 							}, function(){
 								browser.tabs.remove(tab.id);
 								if(callback) callback();
@@ -444,36 +450,16 @@ core.GridNodes.refreshNode = function(gridNode, callback){ // Refresh content of
 	});
 }
 core.GridNodes.capturePage = function(gridNode, callback){
-	browser.tabs.create({url: gridNode.url, active: false}).then(function(tab){
-		browser.tabs.update(tab.id, {muted: true}).then(function(){}, function(){});
-		function whaitLoaded(){
-			browser.tabs.get(tab.id).then(function(tab){
-				if(tab.status == 'loading'){
-					setTimeout(whaitLoaded, 300);
-				} else{
-					browser.tabs.update(tab.id, {active: true}).then(function(){
-						setTimeout(function(){
-							browser.tabs.captureVisibleTab().then(function(img){
-								browser.tabs.remove(tab.id);
-								gridNode.title = tab.title
-								gridNode.image = img;
-								core.GridNodes.saveNode(gridNode);
-								if(callback) callback();
-							}, function(){
-								browser.tabs.remove(tab.id);
-								if(callback) callback();
-							});
-						}, 300);
-					}, function(){
-						if(callback) callback();
-					});
-				}
-			}, function(){});
-			
-		}
-		setTimeout(whaitLoaded, 1000);
-	}, function(){
-		if(callback) callback();
+	if(gridNode.__isLoading == true) return;
+	gridNode.__isLoading = true;
+	core.SiteInfos.fromNewTab(gridNode.url, function(infos){
+		if(infos){
+			gridNode.title = infos.title;
+			gridNode.image = infos.screenshot;
+			delete gridNode.__isLoading;
+			core.GridNodes.saveNode(gridNode);
+		} else delete gridNode.__isLoading;
+		if(callback) callback(infos);
 	});
 }
 

src/manifest.json

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