From 753644f6385681fb4f85cfc1f341b832fc339f3f Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 9 Oct 2020 16:10:39 +0200 Subject: [PATCH 01/10] Add error message on JS or LESS blocking error --- customize.dist/loading.js | 5 +++++ www/common/LessLoader.js | 7 ++++++- www/common/sframe-boot2.js | 3 +++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 32841f253..fe86bf266 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -260,6 +260,11 @@ button.primary:hover{ '

', '' ].join(''); + window.CryptPad_loadingError = function (err) { + document.querySelector('.cp-loading-spinner-container').setAttribute('style', 'display:none;'); + document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;'); + document.querySelector('#cp-loading-message').innerText = err; + }; return function () { var intr; var append = function () { diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index b463a126c..2c3de14cc 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -167,7 +167,12 @@ define([ if (css) { return void loadSubmodulesAndInject(css, url, done, stack); } console.debug('CACHE MISS ' + url); ((/\.less([\?\#].*)?$/.test(url)) ? loadLess : loadCSS)(url, function (err, css) { - if (!css) { return void console.error(err); } + if (!css) { + if (window.CryptPad_loadingError) { + window.CryptPad_loadingError('LESS: ' + (err && err.message)); + } + return void console.error(err); + } var output = fixAllURLs(css, url); cachePut(url, output); loadSubmodulesAndInject(output, url, done, stack); diff --git a/www/common/sframe-boot2.js b/www/common/sframe-boot2.js index 0d0eaa90c..5a68237ad 100644 --- a/www/common/sframe-boot2.js +++ b/www/common/sframe-boot2.js @@ -42,6 +42,9 @@ define([ console.error("Require.js threw a Script Error. This probably means you're missing a dependency for CryptPad.\nIt is recommended that the admin of this server runs `bower install && bower update` to get the latest code, then modify their cache version.\nBest of luck,\nThe CryptPad Developers"); return void console.log(); } + if (window.CryptPad_loadingError) { + window.CryptPad_loadingError(e); + } throw e; }; From c79daf3ba25a727ecfa1409a6f8580d36e98b9de Mon Sep 17 00:00:00 2001 From: yflory Date: Tue, 13 Oct 2020 10:30:01 +0200 Subject: [PATCH 02/10] Fix OO CSP cache --- www/common/onlyoffice/inner.js | 4 ++-- www/sheet/inner.html | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/www/common/onlyoffice/inner.js b/www/common/onlyoffice/inner.js index ea0e51bfc..f39a85482 100644 --- a/www/common/onlyoffice/inner.js +++ b/www/common/onlyoffice/inner.js @@ -408,7 +408,7 @@ define([ myUniqueOOId = undefined; setMyId(); if (APP.docEditor) { APP.docEditor.destroyEditor(); } // Kill the old editor - $('iframe[name="frameEditor"]').after(h('div#cp-app-oo-placeholder')).remove(); + $('iframe[name="frameEditor"]').after(h('div#cp-app-oo-placeholder-a')).remove(); ooLoaded = false; oldLocks = {}; Object.keys(pendingChanges).forEach(function (key) { @@ -1406,7 +1406,7 @@ define([ }); }; - APP.docEditor = new window.DocsAPI.DocEditor("cp-app-oo-placeholder", APP.ooconfig); + APP.docEditor = new window.DocsAPI.DocEditor("cp-app-oo-placeholder-a", APP.ooconfig); ooLoaded = true; makeChannel(); }; diff --git a/www/sheet/inner.html b/www/sheet/inner.html index 4d7ca6009..07d21904d 100644 --- a/www/sheet/inner.html +++ b/www/sheet/inner.html @@ -11,7 +11,7 @@
-
+
From 0e1588a883b685e0ca3a57523ee9f9a31d290a03 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 14 Oct 2020 15:20:56 +0200 Subject: [PATCH 03/10] New loading screen --- customize.dist/loading.js | 57 ++++++++++++++++++++- customize.dist/messages.js | 13 +++-- www/common/LessLoader.js | 7 +++ www/common/common-interface.js | 6 +++ www/common/outer/async-store.js | 32 ++++++++---- www/common/outer/sharedfolder.js | 13 ++++- www/common/outer/team.js | 20 +++++++- www/common/sframe-app-framework.js | 9 +--- www/common/sframe-chainpad-netflux-inner.js | 2 +- www/common/sframe-common-outer.js | 8 +-- www/common/sframe-common.js | 3 +- 11 files changed, 131 insertions(+), 39 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index fe86bf266..dd269fa60 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -1,6 +1,6 @@ // dark #326599 // light #4591c4 -define([], function () { +define(['/customize/messages.js'], function (Messages) { var loadingStyle = (function(){/* #cp-loading { visibility: visible; @@ -199,6 +199,13 @@ p.cp-password-info{ white-space: nowrap; text-overflow: ellipsis; } +.cp-loading-progress-list li i { + width: 22px; +} +.cp-loading-progress-list li span{ + margin-left: 20px; +} + .cp-loading-progress-bar { height: 24px; background: white; @@ -257,9 +264,57 @@ button.primary:hover{ '', + '
', + '
', + '
', + '
', '

', '' ].join(''); + + // XXX + var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad']; + Messages.loading_state_0 = "Less"; + Messages.loading_state_1 = "Drive"; + Messages.loading_state_2 = "Migrate"; + Messages.loading_state_3 = "SF"; + Messages.loading_state_4 = "Team"; + Messages.loading_state_5 = "Pad"; + var current; + var makeList = function (data) { + var c = types.indexOf(data.type); + current = c; + var getLi = function (i) { + var check = (i < c || (i === c && data.progress === 100)) ? 'fa-check-square-o' + : 'fa-square-o'; + var percent = i < c ? '(100%)' : (i === c ? '('+Math.floor(data.progress)+'%)' : '(0%)'); + return '
  • '+Messages['loading_state_'+i]+'' + + ''+percent+''; + }; + var list = '
      '; + types.forEach(function (el, i) { + list += getLi(i); + }); + list += '
    '; + return list; + }; + var makeBar = function (data) { + var c = types.indexOf(data.type); + var l = types.length; + var p = (data.progress / l) + (100 * c / l); + var bar = '
    '+ + '
    '+ + '
    '; + return bar; + }; + + var updateLoadingProgress = function (data) { + var c = types.indexOf(data.type); + if (c < current) { return console.error(data); } + document.querySelector('.cp-loading-progress-list').innerHTML = makeList(data); + document.querySelector('.cp-loading-progress-container').innerHTML = makeBar(data); + }; + window.CryptPad_updateLoadingProgress = updateLoadingProgress; window.CryptPad_loadingError = function (err) { document.querySelector('.cp-loading-spinner-container').setAttribute('style', 'display:none;'); document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;'); diff --git a/customize.dist/messages.js b/customize.dist/messages.js index 11d814540..40dbbfb95 100755 --- a/customize.dist/messages.js +++ b/customize.dist/messages.js @@ -52,13 +52,12 @@ require.config({ }); var req = [ - '/common/common-util.js', '/customize/application_config.js', '/customize/translations/messages.js' ]; if (language && map[language]) { req.push('/customize/translations/messages.' + language + '.js'); } -define(req, function(Util, AppConfig, Default, Language) { +define(req, function(AppConfig, Default, Language) { map.en = 'English'; var defaultLanguage = 'en'; @@ -78,15 +77,15 @@ define(req, function(Util, AppConfig, Default, Language) { var extend = function (a, b) { for (var k in b) { - if (Util.isObject(b[k])) { - a[k] = Util.isObject(a[k]) ? a[k] : {}; - extend(a[k], b[k]); - continue; - } if (Array.isArray(b[k])) { a[k] = b[k].slice(); continue; } + if (b[k] && typeof(b[k]) === "object") { + a[k] = (a[k] && typeof(a[k]) === "object" && !Array.isArray(a[k])) ? a[k] : {}; + extend(a[k], b[k]); + continue; + } a[k] = b[k] || a[k]; } }; diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 2c3de14cc..0a8a1e914 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -150,6 +150,7 @@ define([ }).nThen(function () { cb(); }); }; + var idx = 0; module.exports.load = function (url /*:string*/, cb /*:()=>void*/, stack /*:?Array*/) { var btime = stack ? null : +new Date(); stack = stack || []; @@ -163,6 +164,12 @@ define([ cb(); }; stack.push(url); + if (window.CryptPad_updateLoadingProgress) { + window.CryptPad_updateLoadingProgress({ + type: 'less', + progress: idx++ + }); + } cacheGet(url, function (css) { if (css) { return void loadSubmodulesAndInject(css, url, done, stack); } console.debug('CACHE MISS ' + url); diff --git a/www/common/common-interface.js b/www/common/common-interface.js index 76dec3dd8..b6e58e527 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -888,6 +888,11 @@ define([ } }; UI.updateLoadingProgress = function (data, isDrive) { + if (window.CryptPad_updateLoadingProgress) { + window.CryptPad_updateLoadingProgress(data); + } + // XXX + /* var $loading = $('#' + LOADING); if (!$loading.length || loading.error) { return; } $loading.find('.cp-loading-progress').show(); @@ -939,6 +944,7 @@ define([ } } } + */ }; UI.removeLoadingScreen = function (cb) { // Release the test blocker, hopefully every test has been registered. diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js index df05d8a3e..7e57398c5 100644 --- a/www/common/outer/async-store.js +++ b/www/common/outer/async-store.js @@ -1373,11 +1373,15 @@ define([ } } }; - var loadUniversal = function (Module, type, waitFor) { + var loadUniversal = function (Module, type, waitFor, clientId) { if (store.modules[type]) { return; } store.modules[type] = Module.init({ Store: Store, store: store, + updateLoadingProgress: function (data) { + data.type = "team"; + postMessage(clientId, 'LOADING_DRIVE', data); + }, updateMetadata: function () { broadcast([], "UPDATE_METADATA"); }, @@ -2480,9 +2484,6 @@ define([ addSharedFolderHandler(); nThen(function (waitFor) { - postMessage(clientId, 'LOADING_DRIVE', { - state: 2 - }); userObject.migrate(waitFor()); }).nThen(function (waitFor) { initAnonRpc(null, null, waitFor()); @@ -2490,22 +2491,25 @@ define([ }).nThen(function (waitFor) { Migrate(proxy, waitFor(), function (version, progress) { postMessage(clientId, 'LOADING_DRIVE', { - state: (2 + (version / 10)), + type: 'migrate', progress: progress }); }, store); }).nThen(function (waitFor) { - postMessage(clientId, 'LOADING_DRIVE', { - state: 3 - }); userObject.fixFiles(); - SF.loadSharedFolders(Store, store.network, store, userObject, waitFor); + SF.loadSharedFolders(Store, store.network, store, userObject, waitFor, function (obj) { + var data = { + type: 'sf', + progress: 100*obj.progress/obj.max + }; + postMessage(clientId, 'LOADING_DRIVE', data); + }); loadCursor(); loadOnlyOffice(); loadUniversal(Messenger, 'messenger', waitFor); store.messenger = store.modules['messenger']; loadUniversal(Profile, 'profile', waitFor); - loadUniversal(Team, 'team', waitFor); + loadUniversal(Team, 'team', waitFor, clientId); loadUniversal(History, 'history', waitFor); cleanFriendRequests(); }).nThen(function () { @@ -2607,6 +2611,12 @@ define([ if (!hash) { return void cb({error: '[Store.init] Unable to find or create a drive hash. Aborting...'}); } + + var updateProgress = function (data) { + data.type = 'drive'; + postMessage(clientId, 'LOADING_DRIVE', data); + }; + // No password for drive var secret = Hash.getSecrets('drive', hash); store.driveChannel = secret.channel; @@ -2620,6 +2630,7 @@ define([ userName: 'fs', logLevel: 1, ChainPad: ChainPad, + updateProgress: updateProgress, classic: true, }; var rt = window.rt = Listmap.create(listmapConfig); @@ -2643,7 +2654,6 @@ define([ && !drive['filesData']) { drive[Constants.oldStorageKey] = []; } - postMessage(clientId, 'LOADING_DRIVE', { state: 1 }); // Drive already exist: return the existing drive, don't load data from legacy store onReady(clientId, returned, cb); }) diff --git a/www/common/outer/sharedfolder.js b/www/common/outer/sharedfolder.js index f02ea9c5a..e34cd64df 100644 --- a/www/common/outer/sharedfolder.js +++ b/www/common/outer/sharedfolder.js @@ -320,9 +320,12 @@ define([ - userObject: userObject associated to the main drive - handler: a function (sfid, rt) called for each shared folder loaded */ - SF.loadSharedFolders = function (Store, network, store, userObject, waitFor) { + SF.loadSharedFolders = function (Store, network, store, userObject, waitFor, progress) { var shared = Util.find(store.proxy, ['drive', UserObject.SHARED_FOLDERS]) || {}; + var steps = Object.keys(shared).length; + var i = 1; var w = waitFor(); + progress = progress || function () {}; nThen(function (waitFor) { Object.keys(shared).forEach(function (id) { var sf = shared[id]; @@ -330,7 +333,13 @@ define([ network: network, store: store, isNewChannel: Store.isNewChannel - }, id, sf, waitFor()); + }, id, sf, waitFor(function () { + progress({ + progress: i, + max: steps + }); + i++; + })); }); }).nThen(function () { setTimeout(w); diff --git a/www/common/outer/team.js b/www/common/outer/team.js index 2ba4e30ee..e1a85d5d6 100644 --- a/www/common/outer/team.js +++ b/www/common/outer/team.js @@ -328,7 +328,13 @@ define([ ctx.teams[id] = team; registerChangeEvents(ctx, team, proxy); SF.checkMigration(team.secondaryKey, proxy, team.userObject, waitFor()); - SF.loadSharedFolders(ctx.Store, ctx.store.network, team, team.userObject, waitFor); + SF.loadSharedFolders(ctx.Store, ctx.store.network, team, + team.userObject, waitFor, function (data) { + ctx.progress += 70/(ctx.numberOfTeams * data.max); + ctx.updateProgress({ + progress: ctx.progress + }); + }); }).nThen(function () { if (!team.rpc) { return; } var list = getTeamChannelList(ctx, id); @@ -361,6 +367,9 @@ define([ }; + // Progress: + // One team = (30/(#teams))% + // One shared folder = (70/(#teams * #folders))% var openChannel = function (ctx, teamData, id, _cb) { var cb = Util.once(Util.mkAsync(_cb)); @@ -501,6 +510,10 @@ define([ waitFor.abort(); } }).nThen(function () { + ctx.progress += 30/ctx.numberOfTeams; + ctx.updateProgress({ + progress: ctx.progress + }); onReady(ctx, id, lm, roster, keys, null, cb); }); }; @@ -1653,10 +1666,13 @@ define([ emit: emit, onReadyHandlers: {}, teams: {}, - updateMetadata: cfg.updateMetadata + updateMetadata: cfg.updateMetadata, + updateProgress: cfg.updateLoadingProgress, + progress: 0 }; var teams = store.proxy.teams = store.proxy.teams || {}; + ctx.numberOfTeams = Object.keys(teams).length; // Listen for changes in our access rights (if another worker receives edit access) ctx.store.proxy.on('change', ['teams'], function (o, n, p) { diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js index beaf20b10..3097cf6d2 100644 --- a/www/common/sframe-app-framework.js +++ b/www/common/sframe-app-framework.js @@ -441,9 +441,9 @@ define([ var versionHashEl; var onInit = function () { UI.updateLoadingProgress({ - state: 2, + type: 'pad', progress: 0.1 - }, false); + }); stateChange(STATE.INITIALIZING); if ($('.cp-help-container').length) { var privateDat = cpNfInner.metadataMgr.getPrivateData(); @@ -471,8 +471,6 @@ define([ var newContentStr = cpNfInner.chainpad.getUserDoc(); if (state === STATE.DELETED) { return; } - UI.updateLoadingProgress({ state: -1 }, false); - if (toolbar) { // Check if we have a new chainpad instance toolbar.resetChainpad(cpNfInner.chainpad); @@ -708,9 +706,6 @@ define([ nThen(function (waitFor) { UI.addLoadingScreen(); SFCommon.create(waitFor(function (c) { common = c; })); - UI.updateLoadingProgress({ - state: 1 - }, false); }).nThen(function (waitFor) { common.getSframeChannel().onReady(waitFor()); }).nThen(function (waitFor) { diff --git a/www/common/sframe-chainpad-netflux-inner.js b/www/common/sframe-chainpad-netflux-inner.js index b6f4c6aaf..8e8bb84f2 100644 --- a/www/common/sframe-chainpad-netflux-inner.js +++ b/www/common/sframe-chainpad-netflux-inner.js @@ -140,7 +140,7 @@ define([ chainpad.message(content); if (isHistory && updateLoadingProgress) { updateLoadingProgress({ - state: 2, + type: 'pad', progress: isHistory }, false); isHistory++; diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js index bba393afb..165b0b6f7 100644 --- a/www/common/sframe-common-outer.js +++ b/www/common/sframe-common-outer.js @@ -131,13 +131,7 @@ define([ if (sframeChan) { sframeChan.event('EV_LOADING_INFO', data); } }); - Cryptpad.ready(waitFor(function () { - if (sframeChan) { - sframeChan.event('EV_LOADING_INFO', { - state: -1 - }); - } - }), { + Cryptpad.ready(waitFor(), { driveEvents: cfg.driveEvents, currentPad: currentPad }); diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 8d4898911..c5f0ad26a 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -686,7 +686,8 @@ define([ }); ctx.sframeChan.on('EV_LOADING_INFO', function (data) { - UI.updateLoadingProgress(data, 'drive'); + //UI.updateLoadingProgress(data, 'drive'); + UI.updateLoadingProgress(data); }); ctx.sframeChan.on('EV_NEW_VERSION', function () { From fffd4aff3c3b1c67fcb3cade545aefaf1dffd4d3 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 14 Oct 2020 15:21:26 +0200 Subject: [PATCH 04/10] lint compliance --- www/common/common-interface.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/common/common-interface.js b/www/common/common-interface.js index b6e58e527..fd5ceb162 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -887,7 +887,7 @@ define([ todo(); } }; - UI.updateLoadingProgress = function (data, isDrive) { + UI.updateLoadingProgress = function (data) { if (window.CryptPad_updateLoadingProgress) { window.CryptPad_updateLoadingProgress(data); } From b55566254fa82837b355dd67f3e2255649601a90 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 14 Oct 2020 17:32:15 +0200 Subject: [PATCH 05/10] Fix FOUC in the loading screen --- customize.dist/loading.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index dd269fa60..e35a5e409 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -2,6 +2,17 @@ // light #4591c4 define(['/customize/messages.js'], function (Messages) { var loadingStyle = (function(){/* +@font-face { + font-family: 'Open Sans'; + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot'); + src: url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.woff') format('woff'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.ttf') format('truetype'), + url('/bower_components/open-sans-fontface/fonts/Regular/OpenSans-Regular.svg#OpenSansRegular') format('svg'); + font-weight: normal; + font-style: normal; +} + #cp-loading { visibility: visible; position: fixed; @@ -19,6 +30,7 @@ define(['/customize/messages.js'], function (Messages) { flex-flow: column; justify-content: center; align-items: center; + font: 20px 'Open Sans', 'Helvetica Neue', sans-serif !important; } #cp-loading.cp-loading-hidden { opacity: 0; @@ -199,6 +211,17 @@ p.cp-password-info{ white-space: nowrap; text-overflow: ellipsis; } +.cp-loading-progress-list ul { + list-style: none; + padding-left: 0; +} +.cp-loading-progress-list li { + padding: 0px 5px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} .cp-loading-progress-list li i { width: 22px; } From 20f32634295562b6076730bcc73600592f702274 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 14 Oct 2020 17:53:13 +0200 Subject: [PATCH 06/10] Fix percent > 100 --- customize.dist/loading.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index e35a5e409..cf9af5e39 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -310,7 +310,8 @@ button.primary:hover{ var getLi = function (i) { var check = (i < c || (i === c && data.progress === 100)) ? 'fa-check-square-o' : 'fa-square-o'; - var percent = i < c ? '(100%)' : (i === c ? '('+Math.floor(data.progress)+'%)' : '(0%)'); + var p = Math.min(Math.floor(data.progress), 100); + var percent = i < c ? '(100%)' : (i === c ? '('+p+'%)' : '(0%)'); return '
  • '+Messages['loading_state_'+i]+'' + ''+percent+''; }; @@ -324,7 +325,8 @@ button.primary:hover{ var makeBar = function (data) { var c = types.indexOf(data.type); var l = types.length; - var p = (data.progress / l) + (100 * c / l); + var progress = Math.min(data.progress, 100); + var p = (progress / l) + (100 * c / l); var bar = '
    '+ '
    '+ '
    '; From 6bdebad352851a9dc94356be7e36f65345847eb1 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 15 Oct 2020 14:48:17 +0200 Subject: [PATCH 07/10] Add more steps to the loading progress bar --- customize.dist/loading.js | 18 +++++++++++++----- www/common/outer/async-store.js | 8 ++++++++ www/common/sframe-common.js | 7 +++++++ 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index cf9af5e39..38eae2515 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -294,6 +294,7 @@ button.primary:hover{ '

    ', '' ].join(''); + var built = false; // XXX var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad']; @@ -334,18 +335,25 @@ button.primary:hover{ }; var updateLoadingProgress = function (data) { + if (!built) { return; } var c = types.indexOf(data.type); if (c < current) { return console.error(data); } - document.querySelector('.cp-loading-progress-list').innerHTML = makeList(data); - document.querySelector('.cp-loading-progress-container').innerHTML = makeBar(data); + try { + document.querySelector('.cp-loading-progress-list').innerHTML = makeList(data); + document.querySelector('.cp-loading-progress-container').innerHTML = makeBar(data); + } catch (e) { console.error(e); } }; window.CryptPad_updateLoadingProgress = updateLoadingProgress; window.CryptPad_loadingError = function (err) { - document.querySelector('.cp-loading-spinner-container').setAttribute('style', 'display:none;'); - document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;'); - document.querySelector('#cp-loading-message').innerText = err; + if (!built) { return; } + try { + document.querySelector('.cp-loading-spinner-container').setAttribute('style', 'display:none;'); + document.querySelector('#cp-loading-message').setAttribute('style', 'display:block;'); + document.querySelector('#cp-loading-message').innerText = err; + } catch (e) { console.error(e); } }; return function () { + built = true; var intr; var append = function () { if (!document.body) { return; } diff --git a/www/common/outer/async-store.js b/www/common/outer/async-store.js index 7e57398c5..cde9f72a4 100644 --- a/www/common/outer/async-store.js +++ b/www/common/outer/async-store.js @@ -2488,6 +2488,10 @@ define([ }).nThen(function (waitFor) { initAnonRpc(null, null, waitFor()); initRpc(null, null, waitFor()); + postMessage(clientId, 'LOADING_DRIVE', { + type: 'migrate', + progress: 0 + }); }).nThen(function (waitFor) { Migrate(proxy, waitFor(), function (version, progress) { postMessage(clientId, 'LOADING_DRIVE', { @@ -2496,6 +2500,10 @@ define([ }); }, store); }).nThen(function (waitFor) { + postMessage(clientId, 'LOADING_DRIVE', { + type: 'sf', + progress: 0 + }); userObject.fixFiles(); SF.loadSharedFolders(Store, store.network, store, userObject, waitFor, function (obj) { var data = { diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index c5f0ad26a..82b52c9f7 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -619,6 +619,13 @@ define([ } window.CryptPad_sframe_common = true; + if (window.CryptPad_updateLoadingProgress) { + window.CryptPad_updateLoadingProgress({ + type: 'drive', + progress: 0 + }); + } + nThen(function (waitFor) { var msgEv = Util.mkEvent(); var iframe = window.parent; From 854ab77f14e657f5f22ccbf805cb7206f2292895 Mon Sep 17 00:00:00 2001 From: yflory Date: Thu, 15 Oct 2020 14:58:56 +0200 Subject: [PATCH 08/10] More improvements --- customize.dist/loading.js | 5 +++-- www/common/LessLoader.js | 2 +- www/common/sframe-chainpad-netflux-inner.js | 7 +++++++ 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 38eae2515..338b5882e 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -297,7 +297,7 @@ button.primary:hover{ var built = false; // XXX - var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad']; + var types = ['less', 'drive', 'migrate', 'sf', 'team', 'pad', 'end']; Messages.loading_state_0 = "Less"; Messages.loading_state_1 = "Drive"; Messages.loading_state_2 = "Migrate"; @@ -309,7 +309,7 @@ button.primary:hover{ var c = types.indexOf(data.type); current = c; var getLi = function (i) { - var check = (i < c || (i === c && data.progress === 100)) ? 'fa-check-square-o' + var check = (i < c || (i === c && data.progress >= 100)) ? 'fa-check-square-o' : 'fa-square-o'; var p = Math.min(Math.floor(data.progress), 100); var percent = i < c ? '(100%)' : (i === c ? '('+p+'%)' : '(0%)'); @@ -318,6 +318,7 @@ button.primary:hover{ }; var list = '
      '; types.forEach(function (el, i) { + if (i >= 6) { return; } list += getLi(i); }); list += '
    '; diff --git a/www/common/LessLoader.js b/www/common/LessLoader.js index 0a8a1e914..5b52b3d2c 100644 --- a/www/common/LessLoader.js +++ b/www/common/LessLoader.js @@ -167,7 +167,7 @@ define([ if (window.CryptPad_updateLoadingProgress) { window.CryptPad_updateLoadingProgress({ type: 'less', - progress: idx++ + progress: 4*idx++ }); } cacheGet(url, function (css) { diff --git a/www/common/sframe-chainpad-netflux-inner.js b/www/common/sframe-chainpad-netflux-inner.js index 8e8bb84f2..abb1cebdf 100644 --- a/www/common/sframe-chainpad-netflux-inner.js +++ b/www/common/sframe-chainpad-netflux-inner.js @@ -149,6 +149,13 @@ define([ }); sframeChan.on('EV_RT_READY', function () { if (isReady) { return; } + if (updateLoadingProgress) { + updateLoadingProgress({ + type: 'end', + progress: 0 + }, false); + isHistory++; + } isReady = true; isHistory = false; chainpad.start(); From 448f294b1438574e3788c04a2636c23811c15bc3 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 28 Oct 2020 16:10:34 +0100 Subject: [PATCH 09/10] Fix new loading screen errors --- customize.dist/loading.js | 27 +------- www/common/common-interface.js | 105 ++++++------------------------- www/common/common-ui-elements.js | 10 ++- www/common/sframe-common.js | 8 ++- 4 files changed, 36 insertions(+), 114 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 338b5882e..92c645acb 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -175,32 +175,6 @@ p.cp-password-info{ #cp-loading .cp-loading-spinner-container > div { height: 100px; } -#cp-loading-tip { - position: fixed; - z-index: 10000000; - top: 80%; - left: 0; - right: 0; - text-align: center; - transition: opacity 750ms; - transition-delay: 3000ms; -} -@media screen and (max-height: 600px) { - #cp-loading-tip { - display: none; - } -} -#cp-loading-tip span { - background: #222; - color: #fafafa; - text-align: center; - font-size: 1.3em; - opacity: 0.7; - font-family: 'Open Sans', 'Helvetica Neue', sans-serif; - padding: 15px; - max-width: 60%; - display: inline-block; -} .cp-loading-progress { width: 100%; margin: 20px; @@ -340,6 +314,7 @@ button.primary:hover{ var c = types.indexOf(data.type); if (c < current) { return console.error(data); } try { + document.querySelector('.cp-loading-spinner-container').style.display = 'none'; document.querySelector('.cp-loading-progress-list').innerHTML = makeList(data); document.querySelector('.cp-loading-progress-container').innerHTML = makeBar(data); } catch (e) { console.error(e); } diff --git a/www/common/common-interface.js b/www/common/common-interface.js index fd5ceb162..cd47e218d 100644 --- a/www/common/common-interface.js +++ b/www/common/common-interface.js @@ -850,35 +850,33 @@ define([ var LOADING = 'cp-loading'; - var loading = { - error: false, - driveState: 0, - padState: 0 - }; UI.addLoadingScreen = function (config) { config = config || {}; var loadingText = config.loadingText; var todo = function () { var $loading = $('#' + LOADING); + // Show the loading screen $loading.css('display', ''); $loading.removeClass('cp-loading-hidden'); - $('.cp-loading-spinner-container').show(); - if (!config.noProgress && !$loading.find('.cp-loading-progress').length) { + if (config.newProgress) { + // XXX re-add progress bar for step 6 after password prompt for PPP + // XXX also burn after reading var progress = h('div.cp-loading-progress', [ - h('p.cp-loading-progress-drive'), - h('p.cp-loading-progress-pad') + h('p.cp-loading-progress-list'), + h('p.cp-loading-progress-container') ]); - $(progress).hide(); - $loading.find('.cp-loading-container').append(progress); - } else if (config.noProgress) { - $loading.find('.cp-loading-progress').remove(); + $loading.find('.cp-loading-spinner-container').after(progress); + } + if (!$loading.find('.cp-loading-progress').length) { + // Add spinner + $('.cp-loading-spinner-container').show(); } + // Add loading text if (loadingText) { $('#' + LOADING).find('#cp-loading-message').show().text(loadingText); } else { $('#' + LOADING).find('#cp-loading-message').hide().text(''); } - loading.error = false; }; if ($('#' + LOADING).length) { todo(); @@ -891,60 +889,6 @@ define([ if (window.CryptPad_updateLoadingProgress) { window.CryptPad_updateLoadingProgress(data); } - // XXX - /* - var $loading = $('#' + LOADING); - if (!$loading.length || loading.error) { return; } - $loading.find('.cp-loading-progress').show(); - var $progress; - if (isDrive) { - // Drive state - if (loading.driveState === -1) { return; } // Already loaded - $progress = $loading.find('.cp-loading-progress-drive'); - if (!$progress.length) { return; } // Can't find the box to display data - - // If state is -1, remove the box, drive is loaded - if (data.state === -1) { - loading.driveState = -1; - $progress.remove(); - } else { - if (data.state < loading.driveState) { return; } // We should not display old data - // Update the current state - loading.driveState = data.state; - data.progress = data.progress || 100; - data.msg = Messages['loading_drive_'+ Math.floor(data.state)] || ''; - $progress.html(data.msg); - if (data.progress) { - $progress.append(h('div.cp-loading-progress-bar', [ - h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'}) - ])); - } - } - } else { - // Pad state - if (loading.padState === -1) { return; } // Already loaded - $progress = $loading.find('.cp-loading-progress-pad'); - if (!$progress.length) { return; } // Can't find the box to display data - - // If state is -1, remove the box, pad is loaded - if (data.state === -1) { - loading.padState = -1; - $progress.remove(); - } else { - if (data.state < loading.padState) { return; } // We should not display old data - // Update the current state - loading.padState = data.state; - data.progress = data.progress || 100; - data.msg = Messages['loading_pad_'+data.state] || ''; - $progress.html(data.msg); - if (data.progress) { - $progress.append(h('div.cp-loading-progress-bar', [ - h('div.cp-loading-progress-bar-value', {style: 'width:'+data.progress+'%;'}) - ])); - } - } - } - */ }; UI.removeLoadingScreen = function (cb) { // Release the test blocker, hopefully every test has been registered. @@ -952,31 +896,23 @@ define([ cb = cb || function () {}; if (Test.__ASYNC_BLOCKER__) { Test.__ASYNC_BLOCKER__.pass(); } - $('#' + LOADING).addClass("cp-loading-hidden"); + var $loading = $('#' + LOADING); + $loading.addClass("cp-loading-hidden"); // Hide the loading screen + $loading.find('.cp-loading-progress').remove(); // Remove the progress list setTimeout(cb, 750); - loading.error = false; - var $tip = $('#cp-loading-tip').css('top', '') - // loading.less sets transition-delay: $wait-time - // and transition: opacity $fadeout-time - .css({ - 'opacity': 0, - 'pointer-events': 'none', - }); - window.setTimeout(function () { - $tip.remove(); - }, 3750); - // jquery.fadeout can get stuck }; UI.errorLoadingScreen = function (error, transparent, exitable) { var $loading = $('#' + LOADING); if (!$loading.is(':visible') || $loading.hasClass('cp-loading-hidden')) { - UI.addLoadingScreen({hideTips: true}); + UI.addLoadingScreen(); } - loading.error = true; + // Remove the progress list $loading.find('.cp-loading-progress').remove(); + // Hide the spinner $('.cp-loading-spinner-container').hide(); - $('#cp-loading-tip').remove(); if (transparent) { $loading.css('opacity', 0.9); } + + // Add the error message var $error = $loading.find('#cp-loading-message').show(); if (error instanceof Element) { $error.html('').append(error); @@ -988,7 +924,6 @@ define([ $(window).keydown(function (e) { if (e.which === 27) { $loading.hide(); - loading.error = false; if (typeof(exitable) === "function") { exitable(); } } }); diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js index f4630ae17..b28622cb7 100644 --- a/www/common/common-ui-elements.js +++ b/www/common/common-ui-elements.js @@ -2530,10 +2530,16 @@ define([ var submit = function () { var value = $password.find('.cp-password-input').val(); - UI.addLoadingScreen(); + UI.addLoadingScreen({newProgress: true}); + if (window.CryptPad_updateLoadingProgress) { + window.CryptPad_updateLoadingProgress({ + type: 'pad', + progress: 0 + }); + } common.getSframeChannel().query('Q_PAD_PASSWORD_VALUE', value, function (err, data) { if (!data) { - UIElements.displayPasswordPrompt(common, cfg, true); + return void UIElements.displayPasswordPrompt(common, cfg, true); } }); }; diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js index 82b52c9f7..f7a2c41c3 100644 --- a/www/common/sframe-common.js +++ b/www/common/sframe-common.js @@ -345,7 +345,13 @@ define([ } if (priv.burnAfterReading) { UIElements.displayBurnAfterReadingPage(funcs, waitFor(function () { - UI.addLoadingScreen(); + UI.addLoadingScreen({newProgress: true}); + if (window.CryptPad_updateLoadingProgress) { + window.CryptPad_updateLoadingProgress({ + type: 'pad', + progress: 0 + }); + } ctx.sframeChan.event('EV_BURN_AFTER_READING'); })); } From d754ae96e5457a175a508a4076138f91bc691e91 Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 28 Oct 2020 16:32:22 +0100 Subject: [PATCH 10/10] Center loading steps --- customize.dist/loading.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/customize.dist/loading.js b/customize.dist/loading.js index 92c645acb..56e9a4cab 100644 --- a/customize.dist/loading.js +++ b/customize.dist/loading.js @@ -178,6 +178,7 @@ p.cp-password-info{ .cp-loading-progress { width: 100%; margin: 20px; + text-align: center; } .cp-loading-progress p { margin: 5px; @@ -185,6 +186,10 @@ p.cp-password-info{ white-space: nowrap; text-overflow: ellipsis; } +.cp-loading-progress-list { + text-align: left; + display: inline-block; +} .cp-loading-progress-list ul { list-style: none; padding-left: 0; @@ -200,7 +205,10 @@ p.cp-password-info{ width: 22px; } .cp-loading-progress-list li span{ - margin-left: 20px; + margin-left: 10px; +} +.cp-loading-progress-list li span.percent { + position: absolute; } .cp-loading-progress-bar { @@ -285,10 +293,12 @@ button.primary:hover{ var getLi = function (i) { var check = (i < c || (i === c && data.progress >= 100)) ? 'fa-check-square-o' : 'fa-square-o'; - var p = Math.min(Math.floor(data.progress), 100); - var percent = i < c ? '(100%)' : (i === c ? '('+p+'%)' : '(0%)'); - return '
  • '+Messages['loading_state_'+i]+'' + - ''+percent+''; + var percentStr = ''; + if (i === c) { + var p = Math.min(Math.floor(data.progress), 100); + percentStr = '('+p+'%)'; + } + return '
  • '+Messages['loading_state_'+i]+'' + percentStr; }; var list = '
      '; types.forEach(function (el, i) {