Rendering: Have phantomjs wait a bit before rendering to give fonts a change to load (#22623)

This commit is contained in:
Torkel Ödegaard 2020-03-06 17:55:13 +01:00 committed by GitHub
parent 917860c4d3
commit 5a53c2d02b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,82 +1,86 @@
(function() {
'use strict';
'use strict';
var page = require('webpage').create();
var args = require('system').args;
var params = {};
var regexp = /^([^=]+)=([^$]+)/;
var page = require('webpage').create();
var args = require('system').args;
var params = {};
var regexp = /^([^=]+)=([^$]+)/;
args.forEach(function(arg) {
var parts = arg.match(regexp);
if (!parts) { return; }
params[parts[1]] = parts[2];
});
var usage = "url=<url> png=<filename> width=<width> height=<height> renderKey=<key>";
if (!params.url || !params.png || !params.renderKey || !params.domain) {
console.log(usage);
phantom.exit();
args.forEach(function(arg) {
var parts = arg.match(regexp);
if (!parts) {
return;
}
params[parts[1]] = parts[2];
});
phantom.addCookie({
'name': 'renderKey',
'value': params.renderKey,
'domain': params.domain,
});
var usage = 'url=<url> png=<filename> width=<width> height=<height> renderKey=<key>';
page.viewportSize = {
width: params.width || '800',
height: params.height || '400'
if (!params.url || !params.png || !params.renderKey || !params.domain) {
console.log(usage);
phantom.exit();
}
phantom.addCookie({
name: 'renderKey',
value: params.renderKey,
domain: params.domain,
});
page.viewportSize = {
width: params.width || '800',
height: params.height || '400',
};
var timeoutMs = (parseInt(params.timeout) || 10) * 1000;
var waitBetweenReadyCheckMs = 50;
var totalWaitMs = 0;
page.open(params.url, function(status) {
console.log('Loading a web page: ' + params.url + ' status: ' + status, timeoutMs);
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function + '")' : ''));
});
}
console.error(msgStack.join('\n'));
};
var timeoutMs = (parseInt(params.timeout) || 10) * 1000;
var waitBetweenReadyCheckMs = 50;
var totalWaitMs = 0;
function checkIsReady() {
var panelsRendered = page.evaluate(function() {
var panelCount = document.querySelectorAll('plugin-component').length;
return window.panelsRendered >= panelCount;
});
page.open(params.url, function (status) {
console.log('Loading a web page: ' + params.url + ' status: ' + status, timeoutMs);
page.onError = function(msg, trace) {
var msgStack = ['ERROR: ' + msg];
if (trace && trace.length) {
msgStack.push('TRACE:');
trace.forEach(function(t) {
msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));
});
}
console.error(msgStack.join('\n'));
};
function checkIsReady() {
var panelsRendered = page.evaluate(function() {
var panelCount = document.querySelectorAll('plugin-component').length;
return window.panelsRendered >= panelCount;
if (panelsRendered || totalWaitMs > timeoutMs) {
var bb = page.evaluate(function() {
var container = document.getElementsByClassName('dashboard-container');
if (container.length == 0) {
container = document.getElementsByClassName('panel-container');
}
return container[0].getBoundingClientRect();
});
if (panelsRendered || totalWaitMs > timeoutMs) {
var bb = page.evaluate(function () {
var container = document.getElementsByClassName("dashboard-container")
if (container.length == 0) {
container = document.getElementsByClassName("panel-container")
}
return container[0].getBoundingClientRect();
});
// reset viewport to render full page
page.viewportSize = {
width: bb.width,
height: bb.height
};
// reset viewport to render full page
page.viewportSize = {
width: bb.width,
height: bb.height,
};
setTimeout(function() {
page.render(params.png);
phantom.exit();
} else {
totalWaitMs += waitBetweenReadyCheckMs;
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
}
}, 5);
} else {
totalWaitMs += waitBetweenReadyCheckMs;
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
}
}
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
});
})();
setTimeout(checkIsReady, waitBetweenReadyCheckMs);
});
})();