Faster rendering of popup

8 years ago · 99579252d2
parent a43b4c83ff
commit 99579252d2
3 changed files with 29 additions and 20 deletions
--- a/src/drivers/webextension/css/popup.css
+++ b/src/drivers/webextension/css/popup.css
@ -6,6 +6,7 @@ body {
 	line-height: 16px;
 	margin: 0;
 	min-width: 200px;
+	overflow-x: hidden;
 	padding: 15px;
 }

--- a/src/drivers/webextension/js/popup.js
+++ b/src/drivers/webextension/js/popup.js
@ -4,15 +4,11 @@
 (function() {
 	var popup = {
 		init: function() {
+			popup.update([ 'p', {}, ' ' ], document, {});
+
 			var callback = function(tabs) {
 				( chrome || browser ).runtime.sendMessage({ id: 'get_apps', tab: tabs[0], source: 'popup.js' }, function(response) {
-					if ( /complete|interacrive|loaded/.test(document.readyState) ) {
-						popup.displayApps(response)
-					} else {
-						document.addEventListener('DOMContentLoaded', function() {
-							popup.displayApps(response)
-						});
-					}
+					popup.update(popup.appsToDomTemplate(response));
 				});
 			};

@ -25,18 +21,36 @@
 			}
 		},

-		displayApps: function(response) {
+		update: function(dom) {
+			if ( /complete|interacrive|loaded/.test(document.readyState) ) {
+				popup.replaceDom(dom);
+			} else {
+				document.addEventListener('DOMContentLoaded', function() {
+					popup.replaceDom(dom);
+				});
+			}
+		},
+
+		replaceDom: function(domTemplate) {
+			var body = document.body;
+
+			while ( body.firstChild ) {
+				body.removeChild(body.firstChild);
+			}
+
+			body.append(jsonToDOM(domTemplate, document, {}));
+		},
+
+		appsToDomTemplate: function(response) {
 			var
 				appName, confidence, version,
-				detectedApps = document.querySelector('#detected-apps'),
 				categories = [],
-				json = [];
+				template = [];

 			if ( response.tabCache && response.tabCache.count > 0 ) {
 				for ( appName in response.tabCache.appsDetected ) {
 					confidence = response.tabCache.appsDetected[appName].confidenceTotal;
 					version    = response.tabCache.appsDetected[appName].version;
-
 					categories = [];

 					response.apps[appName].cats.forEach(function(cat) {
@ -59,7 +73,7 @@
 						);
 					});

-					json.push(
+					template.push(
 						[
 							'div', {
 								class: 'detected-app'
@ -88,7 +102,7 @@
 					);
 				}
 			} else {
-				json = [
+				template = [
 					'div', {
 						class: 'empty'
 					},
@ -96,12 +110,7 @@
 				];
 			}

-			detectedApps.appendChild(jsonToDOM(json, document, {}));
-
-			// Force redraw after popup animation on Mac OS
-			setTimeout(function() {
-				document.body.appendChild(jsonToDOM([ 'span', { style: 'line-height: 1px;' }], document, {}));
-			}, 800);
+			return template;
 		},

 		slugify: function(string) {
--- a/src/drivers/webextension/popup.html
+++ b/src/drivers/webextension/popup.html
@ -12,6 +12,5 @@
 		<script src="js/i18n.js"></script>
 	</head>
 	<body>
-		<div id="detected-apps"></div>
 	</body>
 </html>