Replay history in order

www/common/outer/async-store.js

@@ -1880,8 +1880,16 @@ define([
                 if (msg) {
                     msg = msg.replace(/cp\|(([A-Za-z0-9+\/=]+)\|)?/, '');
                     //var decryptedMsg = crypto.decrypt(msg, true);
+                    if (data.debug) {
+                        msgs.push({
+                            msg: msg,
+                            author: parsed[1][1],
+                            time: parsed[1][5]
+                        });
+                    } else {
                         msgs.push(msg);
                     }
+                }
             };
             network.on('message', onMsg);
             network.sendto(hk, JSON.stringify(['GET_FULL_HISTORY', data.channel, data.validateKey]));

www/common/sframe-common-history.js

@@ -71,7 +71,10 @@ define([
                 lastKnownHash = data.lastKnownHash;
                 isComplete = data.isFull;
                 var messages = (data.messages || []).map(function (obj) {
+                    if (!config.debug) {
                         return obj.msg;
+                    }
+                    return obj;
                 });
                 if (config.debug) { console.log(data.messages); }
                 Array.prototype.unshift.apply(allMessages, messages); // Destructive concat

www/common/sframe-common-outer.js

@@ -835,17 +835,26 @@ define([
             sframeChan.on('Q_GET_FULL_HISTORY', function (data, cb) {
                 var crypto = Crypto.createEncryptor(secret.keys);
                 Cryptpad.getFullHistory({
+                    debug: data && data.debug,
                     channel: secret.channel,
                     validateKey: secret.keys.validateKey
                 }, function (encryptedMsgs) {
                     var nt = nThen;
                     var decryptedMsgs = [];
                     var total = encryptedMsgs.length;
-                    encryptedMsgs.forEach(function (msg, i) {
+                    encryptedMsgs.forEach(function (_msg, i) {
                         nt = nt(function (waitFor) {
                             // The 3rd parameter "true" means we're going to skip signature validation.
                             // We don't need it since the message is already validated serverside by hk
-                            decryptedMsgs.push(crypto.decrypt(msg, true, true));
+                            if (typeof(_msg) === "object") {
+                                decryptedMsgs.push({
+                                    author: _msg.author,
+                                    time: _msg.time,
+                                    msg: crypto.decrypt(_msg.msg, true, true)
+                                });
+                            } else {
+                                decryptedMsgs.push(crypto.decrypt(_msg.msg, true, true));
+                            }
                             setTimeout(waitFor(function () {
                                 sframeChan.event('EV_FULL_HISTORY_STATUS', (i+1)/total);
                             }));

www/debug/app-debug.less

@@ -22,13 +22,14 @@
         display: none;
     }
     #cp-app-debug-content {
-        margin: 50px;
+        margin: 10px 50px;
         flex-flow: column;
         align-items: center;
         justify-content: center;
         .cp-app-debug-content {
             flex: 1;
             min-height: 0;
+            justify-content: center;
         }
         .cp-app-debug-progress, .cp-app-debug-init {
             text-align: center;
@@ -57,6 +58,27 @@
                 background-color: rgba(0,0,0,0.1);
             }
         }
+        .fa-chevron-left, .fa-chevron-right {
+            margin: 5px 20px;
+            cursor: pointer;
+            &:hover {
+                color: #777;
+            }
+        }
+        .cp-app-debug-progress {
+            display: flex;
+            flex: 1;
+            min-height: 0;
+            flex-flow: column;
+        }
+        pre.cp-debug-replay {
+            text-align: left;
+            white-space: pre-wrap;
+            word-break: break-word;
+            overflow: auto;
+            flex: 1;
+            min-height: 0;
+        }
     }
 }
 

www/debug/inner.js

@@ -389,6 +389,120 @@ define([
             }, {timeout: 2147483647}); // Max 32-bit integer
         };
 
+        var replayFullHistory = function () {
+            // Set spinner
+            var content = h('div#cp-app-debug-loading', [
+                h('p', 'Loading history from the server...'),
+                h('span.fa.fa-circle-o-notch.fa-spin.fa-3x.fa-fw')
+            ]);
+            $('#cp-app-debug-content').html('').append(content);
+            var makeChainpad = function () {
+                return window.ChainPad.create({
+                    userName: 'debug',
+                    initialState: '',
+                    logLevel: 2,
+                    validateContent: function (content) {
+                        try {
+                            JSON.parse(content);
+                            return true;
+                        } catch (e) {
+                            console.log('Failed to parse, rejecting patch');
+                            return false;
+                        }
+                    },
+                });
+            };
+            sframeChan.query('Q_GET_FULL_HISTORY', {
+                debug: true,
+            }, function (err, data) {
+                var replay, input, left, right;
+                var content = h('div.cp-app-debug-progress.cp-loading-progress', [
+                    h('p', [
+                        left = h('span.fa.fa-chevron-left'),
+                        input = h('input', {type: 'number'}),
+                        right = h('span.fa.fa-chevron-right'),
+                    ]),
+                    h('br'),
+                    replay = h('pre.cp-debug-replay'),
+                ]);
+                var $input = $(input);
+                var $left = $(left);
+                var $right = $(right);
+
+                $('#cp-app-debug-content').html('').append(content);
+                var chainpad = makeChainpad();
+                console.warn(chainpad);
+
+                var i = 0;
+                var messages = data.slice();
+                var play = function (_i) {
+                    if (_i < 1) { _i = 1; }
+                    if (_i > data.length - 1) { _i = data.length - 1; }
+                    if (_i < i) {
+                        chainpad.abort();
+                        chainpad = makeChainpad();
+                        console.warn(chainpad);
+                        i = 0;
+                    }
+                    var messages = data.slice(i, _i);
+                    i = _i;
+                    $input.val(i);
+                    messages.forEach(function (obj) {
+                        chainpad.message(obj);
+                    });
+                    if (messages.length) {
+                        var hashes = Object.keys(chainpad._.messages);
+                        var currentHash = hashes[hashes.length - 1];
+                        var best = chainpad.getAuthBlock();
+                        var current = chainpad.getBlockForHash(currentHash);
+                        if (best.hashOf === currentHash) {
+                            console.log("Best", best);
+                        } else {
+                            console.warn("Current", current);
+                            console.log("Best", best);
+                        }
+                    }
+                    $(replay).text(JSON.stringify(JSON.parse(chainpad.getUserDoc()), 0, 2));
+                };
+                play(1);
+                $left.click(function () {
+                    play(i-1);
+                });
+                $right.click(function () {
+                    play(i+1);
+                });
+                $input.keydown(function (e) {
+                    if (e.which === 37 || e.which === 40) { // Left or down
+                        e.preventDefault();
+                        return;
+                    }
+                    if (e.which === 38 || e.which === 39) { // Up or right
+                        e.preventDefault();
+                        return;
+                    }
+                });
+                $input.keyup(function (e) {
+                    var val = Number($input.val());
+                    if (e.which === 37 || e.which === 40) { // Left or down
+                        e.preventDefault();
+                        play(val - 1);
+                        return;
+                    }
+                    if (e.which === 38 || e.which === 39) { // Up or right
+                        e.preventDefault();
+                        play(val + 1);
+                        return;
+                    }
+                    if (e.which !== 13) { return; }
+                    if (!val) {
+                        $input.val(1);
+                        return;
+                    }
+                    play(Number(val));
+                });
+            }, {timeout: 2147483647}); // Max 32-bit integer
+        };
+
         var getContent = function () {
             if ($('#cp-app-debug-content').is(':visible')) {
                 $('#cp-app-debug-content').hide();
@@ -402,11 +516,14 @@ define([
         };
         var setInitContent = function () {
             var button = h('button.btn.btn-success', 'Load history');
+            var buttonReplay = h('button.btn.btn-success', 'Replay');
             $(button).click(getFullHistory);
+            $(buttonReplay).click(replayFullHistory);
             var content = h('p.cp-app-debug-init', [
                 'To get better debugging tools, we need to load the entire history of the document. This make take some time.', // TODO
                 h('br'),
-                button
+                button,
+                buttonReplay
             ]);
             $('#cp-app-debug-content').html('').append(content);
         };