kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-14 14:58:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add API panel diagnostics

Browse Source 
Former-commit-id: 6abf245be487184df940de711371b391d7188c22 [formerly bbe4eae66a2145cd2cfd24567cf5fcbb47dfc8a4] [formerly 30f3e73687d6aa1553f24e510a3dfb8fbf962eea] [formerly 4e6bf05eb8832d99b0a901afdf5f04da4a139cd5 [formerly c878386f65d7e8fb7bb6892819b6bdde2b88f026 [formerly 3cc8f4a84e2f47466f091deea978cbaf2dd81199]]]
Former-commit-id: c47312aacc2a3a6bfd022f51b0d1425ae063b51c [formerly 86f190abe4a4089591109d52da05729b228def61 [formerly 988ab5fb5ee15886bb25080634e15850b9b89da9]]
Former-commit-id: 193ab878120c550bf6f4b0021de0337cfd50fc29 [formerly 3cb45c31d996f76cb386dad153277dc8bf96067a]
Former-commit-id: a7863e70a96ca7eb700248648e784ec02f002101
This commit is contained in:
Jaifroid 2021-07-31 18:59:52 +01:00
parent 344d11bb3b
commit abe5fe5ea6
6 changed files with 133 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
www/index.html
View File

@ -884,6 +884,8 @@
<div class="panel-body">
<div id="serviceWorkerStatus"></div>
<div id="messageChannelStatus"></div>
<div id="settingsStoreStatus"></div>
<div id="decompressorAPIStatus"></div>
</div>
</div>
</div>

26
www/js/app.js
View File

@ -1626,7 +1626,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
*/
function refreshAPIStatus() {
var apiStatusPanel = document.getElementById('apiStatusDiv');
apiStatusPanel.classList.remove('panel-success', 'panel-warning');
apiStatusPanel.classList.remove('panel-success', 'panel-warning', 'panel-danger');
var apiPanelClass = 'panel-success';
if (isMessageChannelAvailable()) {
$('#messageChannelStatus').html("MessageChannel API available");
@ -1655,6 +1655,27 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
$('#serviceWorkerStatus').removeClass("apiAvailable apiUnavailable")
.addClass("apiUnavailable");
}
// Update Settings Store section of API panel with API name
var settingsStoreStatusDiv = document.getElementById('settingsStoreStatus');
var apiName = params.storeType === 'cookie' ? 'Cookie' : params.storeType === 'local_storage' ? 'Local Storage' : 'None';
settingsStoreStatusDiv.innerHTML = 'Settings Storage API in use: ' + apiName;
settingsStoreStatusDiv.classList.remove('apiAvailable', 'apiUnavailable');
settingsStoreStatusDiv.classList.add(params.storeType === 'none' ? 'apiUnavailable' : 'apiAvailable');
apiPanelClass = params.storeType === 'none' ? 'panel-warning' : apiPanelClass;
// Update Decompressor API section of panel
var decompAPIStatusDiv = document.getElementById('decompressorAPIStatus');
apiName = params.decompressorAPI.assemblerMachineType;
if (apiName && params.decompressorAPI.decompressorLastUsed) {
apiName += ' [&nbsp;' + params.decompressorAPI.decompressorLastUsed + '&nbsp;]';
}
apiPanelClass = params.decompressorAPI.errorStatus ? 'panel-danger' : apiName ? apiPanelClass : 'panel-warning';
decompAPIStatusDiv.className = apiName ? params.decompressorAPI.errorStatus ? 'apiBroken' : 'apiAvailable' : 'apiUnavailable';
apiName = params.decompressorAPI.errorStatus || apiName || 'Not initialized';
decompAPIStatusDiv.innerHTML = 'Decompressor API: ' + apiName;
// Add a warning colour to the API Status Panel if any of the above tests failed
apiStatusPanel.classList.add(apiPanelClass);
}
@ -2230,6 +2251,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
}
}
if (fileHandle) {
// Deal with split archives
if (/\.zim\w\w$/i.test(fileHandle.name)) {
var genericFileName = fileHandle.name.replace(/(\.zim)\w\w$/i, '$1');
var testFileName = new RegExp(genericFileName + '\\w\\w$');
@ -2242,11 +2264,13 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
}
}
} else {
// Deal with single unslpit archive
fileset.push(fileHandle.getFile().then(function(file) {
return file;
}));
}
if (fileset.length) {
// Wait for all getFile Promises to resolve
Promise.all(fileset).then(function (resolvedFiles) {
setLocalArchiveFromFileList(resolvedFiles);
});

18
www/js/lib/uiUtil.js
View File

@ -728,7 +728,20 @@ define(rqDef, function() {
appstate.sessionScale = appstate.windowScale;
}
// If global variable webpMachine was defined, then we need to initialize the WebP Polyfill
// Reports an error in loading one of the ASM or WASM machines to the UI API Status Panel
// This can't be done in aoo.js because the error occurs after the API panel is first displayed
function reportAssemblerErrorToAPIStatusPanel(decoderType, error) {
// Report error to API panel because error is produced asynchronously after panel is first displayed
console.error('Could not instantiate any ' + decoderType + ' decoder!', error);
params.decompressorAPI.errorStatus = 'Error loading ' + decoderType + ' decompressor!';
var decompAPI = document.getElementById('decompressorAPIStatus');
decompAPI.innerHTML = 'Decompressor API: ' + params.decompressorAPI.errorStatus;
decompAPI.className = 'apiBroken';
document.getElementById('apiStatusDiv').className = 'panel panel-danger';
}
// If global variable webpMachine is true (set in init.js), then we need to initialize the WebP Polyfill
if (webpMachine) webpMachine = new webpHero.WebpMachine();
/**
@ -754,6 +767,7 @@ define(rqDef, function() {
systemAlert: systemAlert,
checkServerIsAccessible: checkServerIsAccessible,
htmlEscapeChars: htmlEscapeChars,
initTouchZoom: initTouchZoom
initTouchZoom: initTouchZoom,
reportAssemblerErrorToAPIStatusPanel: reportAssemblerErrorToAPIStatusPanel
};
});

45
www/js/lib/xzdec_wrapper.js
View File

@ -24,18 +24,20 @@
// DEV: Put your RequireJS definition in the rqDefXZ array below, and any function exports in the function parenthesis of the define statement
// We need to do it this way in order to load the wasm or asm versions of xzdec conditionally. Older browsers can only use the asm version
// because they cannot interpret WebAssembly.
var rqDefXZ = [];
var rqDefXZ = ['uiUtil'];
// Select asm or wasm conditionally
if ('WebAssembly' in self) {
console.debug('Using WASM xz decoder');
console.debug('Instantiating WASM xz decoder');
params.decompressorAPI.assemblerMachineType = 'WASM';
rqDefXZ.push('xzdec-wasm');
} else {
console.debug('Using ASM xz decoder');
console.debug('Instantiating ASM xz decoder');
params.decompressorAPI.assemblerMachineType = 'ASM';
rqDefXZ.push('xzdec-asm');
}
define(rqDefXZ, function() {
define(rqDefXZ, function(uiUtil) {
// DEV: xzdec.js has been compiled with `-s EXPORT_NAME="XZ" -s MODULARIZE=1` to avoid a clash with zstddec.js
// Note that we include xzdec-asm or xzdec-wasm above in requireJS definition, but we cannot change the name in the function list
// There is no longer any need to load it in index.html
@ -51,20 +53,25 @@ define(rqDefXZ, function() {
*/
var xzdec;
var instantiateDecoder = function (instance) {
XZ().then(function (instance) {
// TEST ERROR CODE: UNCOMMENT TO TEST AND REMOVE BEFORE MERGE
// throw params.decompressorAPI.assemblerMachineType + ' broken!';
xzdec = instance;
};
XZ().then(instantiateDecoder)
.catch(function (err) {
console.debug(err);
if (/CompileError.+?WASM/i.test(err.message)) {
console.log("WASM failed to load, falling back to ASM...", err);
}).catch(function (err) {
if (params.decompressorAPI.assemblerMachineType === 'ASM') {
// There is no fallback, because we were attempting to load the ASM machine, so report error immediately
uiUtil.reportAssemblerErrorToAPIStatusPanel('XZ', err);
} else {
console.warn('WASM failed to load, falling back to ASM...', err);
params.decompressorAPI.assemblerMachineType = 'ASM';
XZ = null;
require(['xzdec-asm'], function() {
XZ().then(instantiateDecoder)
.catch(function (err) {
console.error('Could not instantiate any decoder!', err);
require(['xzdec-asm'], function () {
XZ().then(function (instance) {
// TEST ERROR CODE: UNCOMMENT TO TEST AND REMOVE BEFORE MERGE
// throw params.decompressorAPI.assemblerMachineType + ' broken!';
xzdec = instance;
}).catch(function (err) {
uiUtil.reportAssemblerErrorToAPIStatusPanel('XZ', err);
});
});
}
@ -99,9 +106,11 @@ define(rqDefXZ, function() {
* @returns {Decompressor}
*/
function Decompressor(reader, chunkSize) {
params.decompressorAPI.decompressorLastUsed = 'XZ';
this._chunkSize = chunkSize || 1024 * 5;
this._reader = reader;
};
/**
* Read length bytes, offset into the decompressed stream. Consecutive calls may only
* advance in the stream and may not overlap.
@ -130,7 +139,7 @@ define(rqDefXZ, function() {
* @param {Integer} length The amount of data to read
* @returns {Promise} A Promise for the read data
*/
Decompressor.prototype.readSliceSingleThread = function(offset, length) {
Decompressor.prototype.readSliceSingleThread = function (offset, length) {
// Tests whether the decompressor is ready (initiated) and not busy
if (xzdec && !busy) {
return this.readSlice(offset, length);
@ -140,7 +149,7 @@ define(rqDefXZ, function() {
// before using it for another decompression
var that = this;
return new Promise(function (resolve, reject) {
setTimeout(function(){
setTimeout(function () {
that.readSliceSingleThread(offset, length).then(resolve, reject);
}, DELAY_WAITING_IDLE_DECOMPRESSOR);
});

12
www/js/lib/zimfile.js
View File

@ -25,6 +25,7 @@
* Add Polyfill currently required by IE11 to run zstddec-asm and xzdec-asm
* See https://github.com/emscripten-core/emscripten/issues/14700
* If this is resolved upstream, remove this polyfill
* Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith
*/
if (!String.prototype.startsWith) {
Object.defineProperty(String.prototype, 'startsWith', {
@ -35,6 +36,17 @@
});
}
/**
* A global variable to track the assembler machine type and the last used decompressor (for reporting to the API panel)
* This is populated in the Emscripten wrappers
* @type {Object}
*/
params.decompressorAPI = {
assemblerMachineType: null,
decompressorLastUsed: null,
errorStatus: null
};
define(['xzdec_wrapper', 'zstddec_wrapper', 'util', 'utf8', 'zimDirEntry', 'filecache'], function(xz, zstd, util, utf8, zimDirEntry, FileCache) {
/**

46
www/js/lib/zstddec_wrapper.js
View File

@ -24,18 +24,20 @@
// DEV: Put your RequireJS definition in the rqDefZD array below, and any function exports in the function parenthesis of the define statement
// We need to do it this way in order to load the wasm or asm versions of zstddec conditionally. Older browsers can only use the asm version
// because they cannot interpret WebAssembly.
var rqDefZD = [];
var rqDefZD = ['uiUtil'];
// Select asm or wasm conditionally
if ('WebAssembly' in self) {
console.debug('Using WASM zstandard decoder');
console.debug('Instantiating WASM zstandard decoder');
params.decompressorAPI.assemblerMachineType = 'WASM';
rqDefZD.push('zstddec-wasm');
} else {
console.debug('Using ASM zstandard decoder');
console.debug('Instantiating ASM zstandard decoder');
params.decompressorAPI.assemblerMachineType = 'ASM';
rqDefZD.push('zstddec-asm');
}
define(rqDefZD, function() {
define(rqDefZD, function(uiUtil) {
// DEV: zstddec.js has been compiled with `-s EXPORT_NAME="ZD" -s MODULARIZE=1` to avoid a clash with xzdec.js
// Note that we include zstddec-wasm or zstddec-asm above in requireJS definition, but we cannot change the name in the function list
// For explanation of loading method below to avoid conflicts, see https://github.com/emscripten-core/emscripten/blob/master/src/settings.js
@ -99,16 +101,25 @@ define(rqDefZD, function() {
zd._outBuffer.dst = mallocOrDie(zd._outBuffer.size);
};
ZD().then(instantiateDecoder)
.catch(function (err) {
console.debug(err);
if (/CompileError.+?WASM/i.test(err.message)) {
console.log("WASM failed to load, falling back to ASM...", err);
ZD().then(function (inst) {
// TEST ERROR CODE: UNCOMMENT TO TEST AND REMOVE BEFORE MERGE
// throw params.decompressorAPI.assemblerMachineType + ' broken!';
instantiateDecoder(inst);
}).catch(function (err) {
if (params.decompressorAPI.assemblerMachineType === 'ASM') {
// There is no fallback, because we were attempting to load the ASM machine, so report error immediately
uiUtil.reportAssemblerErrorToAPIStatusPanel('ZSTD', err);
} else {
console.warn('WASM failed to load, falling back to ASM...', err);
params.decompressorAPI.assemblerMachineType = 'ASM';
ZD = null;
require(['zstddec-asm'], function() {
ZD().then(instantiateDecoder)
.catch(function (err) {
console.error('Could not instantiate any decoder!', err);
require(['zstddec-asm'], function () {
ZD().then(function (inst) {
// TEST ERROR CODE: UNCOMMENT TO TEST AND REMOVE BEFORE MERGE
// throw params.decompressorAPI.assemblerMachineType + ' broken!';
instantiateDecoder(inst);
}).catch(function (err) {
uiUtil.reportAssemblerErrorToAPIStatusPanel('ZSTD', err);
});
});
}
@ -141,6 +152,7 @@ define(rqDefZD, function() {
* @param {FileReader} reader The reader used to extract file slices (defined in zimfile.js)
*/
function Decompressor(reader) {
params.decompressorAPI.decompressorLastUsed = 'ZSTD';
this._reader = reader;
}
@ -151,7 +163,7 @@ define(rqDefZD, function() {
* @param {Integer} length Number of decompressed bytes to read
* @returns {Promise<ArrayBuffer>} Promise for an ArrayBuffer with decoded data
*/
Decompressor.prototype.readSlice = function(offset, length) {
Decompressor.prototype.readSlice = function (offset, length) {
busy = true;
this._inStreamPos = 0;
this._inStreamChunkedPos = 0;
@ -163,7 +175,7 @@ define(rqDefZD, function() {
return Promise.reject('Failed to initialize ZSTD decompression');
}
return this._readLoop(offset, length).then(function(data) {
return this._readLoop(offset, length).then(function (data) {
// DEV: We are re-using all the allocated w/asm memory, so we do not need to free any of structures assigned wiht _malloc
// However, should you need to free assigned structures use, e.g., zd._free(zd._inBuffer.src);
// Additionally, freeing zd._decHandle is not needed, and actually increases memory consumption (crashing zstddeclib)
@ -252,9 +264,9 @@ define(rqDefZD, function() {
* Fills in the instream buffer
* @returns {Promise<0>} A Promise for 0 when all data have been added to the stream
*/
Decompressor.prototype._fillInBuffer = function() {
Decompressor.prototype._fillInBuffer = function () {
var that = this;
return this._reader(this._inStreamPos, zd._chunkSize).then(function(data) {
return this._reader(this._inStreamPos, zd._chunkSize).then(function (data) {
// Populate inBuffer and assign asm/wasm memory if not already assigned
zd._inBuffer.size = data.length;
// Reset inBuffer