Faster rendering of popup

main
Elbert Alias 8 years ago
parent a43b4c83ff
commit 99579252d2

@ -6,6 +6,7 @@ body {
line-height: 16px; line-height: 16px;
margin: 0; margin: 0;
min-width: 200px; min-width: 200px;
overflow-x: hidden;
padding: 15px; padding: 15px;
} }

@ -4,15 +4,11 @@
(function() { (function() {
var popup = { var popup = {
init: function() { init: function() {
popup.update([ 'p', {}, ' ' ], document, {});
var callback = function(tabs) { var callback = function(tabs) {
( chrome || browser ).runtime.sendMessage({ id: 'get_apps', tab: tabs[0], source: 'popup.js' }, function(response) { ( chrome || browser ).runtime.sendMessage({ id: 'get_apps', tab: tabs[0], source: 'popup.js' }, function(response) {
if ( /complete|interacrive|loaded/.test(document.readyState) ) { popup.update(popup.appsToDomTemplate(response));
popup.displayApps(response)
} else {
document.addEventListener('DOMContentLoaded', function() {
popup.displayApps(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 var
appName, confidence, version, appName, confidence, version,
detectedApps = document.querySelector('#detected-apps'),
categories = [], categories = [],
json = []; template = [];
if ( response.tabCache && response.tabCache.count > 0 ) { if ( response.tabCache && response.tabCache.count > 0 ) {
for ( appName in response.tabCache.appsDetected ) { for ( appName in response.tabCache.appsDetected ) {
confidence = response.tabCache.appsDetected[appName].confidenceTotal; confidence = response.tabCache.appsDetected[appName].confidenceTotal;
version = response.tabCache.appsDetected[appName].version; version = response.tabCache.appsDetected[appName].version;
categories = []; categories = [];
response.apps[appName].cats.forEach(function(cat) { response.apps[appName].cats.forEach(function(cat) {
@ -59,7 +73,7 @@
); );
}); });
json.push( template.push(
[ [
'div', { 'div', {
class: 'detected-app' class: 'detected-app'
@ -88,7 +102,7 @@
); );
} }
} else { } else {
json = [ template = [
'div', { 'div', {
class: 'empty' class: 'empty'
}, },
@ -96,12 +110,7 @@
]; ];
} }
detectedApps.appendChild(jsonToDOM(json, document, {})); return template;
// Force redraw after popup animation on Mac OS
setTimeout(function() {
document.body.appendChild(jsonToDOM([ 'span', { style: 'line-height: 1px;' }], document, {}));
}, 800);
}, },
slugify: function(string) { slugify: function(string) {

@ -12,6 +12,5 @@
<script src="js/i18n.js"></script> <script src="js/i18n.js"></script>
</head> </head>
<body> <body>
<div id="detected-apps"></div>
</body> </body>
</html> </html>

Loading…
Cancel
Save