From 06011065d2afbd09480356728687a0d3b4d5512d Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 21 Nov 2017 17:37:38 +0100
Subject: [PATCH] Add a debug app

---
 customize.dist/src/less2/include/toolbar.less |   1 +
 customize.dist/src/less2/main.less            |   1 +
 www/common/sframe-common-history.js           |   9 +
 www/debug/app-debug.less                      |  30 +++
 www/debug/colors.js                           |  52 +++++
 www/debug/index.html                          |  38 ++++
 www/debug/inner.html                          |  19 ++
 www/debug/inner.js                            | 178 ++++++++++++++++++
 www/debug/main.js                             |  58 ++++++
 9 files changed, 386 insertions(+)
 create mode 100644 www/debug/app-debug.less
 create mode 100644 www/debug/colors.js
 create mode 100644 www/debug/index.html
 create mode 100644 www/debug/inner.html
 create mode 100644 www/debug/inner.js
 create mode 100644 www/debug/main.js

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 99c0cdf15..e4499d67e 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -24,6 +24,7 @@
     }
 
     .cp-toolbar-userlist-drawer {
+        background-color: @colortheme_default-bg;
         font: @colortheme_app-font-size @colortheme_font;
         min-width: 175px;
         width: 175px;
diff --git a/customize.dist/src/less2/main.less b/customize.dist/src/less2/main.less
index c7b425f8c..ca1c3503e 100644
--- a/customize.dist/src/less2/main.less
+++ b/customize.dist/src/less2/main.less
@@ -36,4 +36,5 @@ body.cp-app-whiteboard { @import "../../../whiteboard/app-whiteboard.less"; }
 body.cp-app-todo { @import "../../../todo/app-todo.less"; }
 body.cp-app-profile { @import "../../../profile/app-profile.less"; }
 body.cp-app-settings { @import "../../../settings/app-settings.less"; }
+body.cp-app-debug { @import "../../../debug/app-debug.less"; }
 
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 30d389816..49f4233c9 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -124,6 +124,15 @@ define([
             $hist.find('.cp-toolbar-history-next, .cp-toolbar-history-previous').css('visibility', '');
             if (c === states.length - 1) { $hist.find('.cp-toolbar-history-next').css('visibility', 'hidden'); }
             if (c === 0) { $hist.find('.cp-toolbar-history-previous').css('visibility', 'hidden'); }
+
+            if (config.debug) {
+                console.log(states[i]);
+                var ops = states[i] && states[i].getPatch() && states[i].getPatch().operations;
+                if (Array.isArray(ops)) {
+                    ops.forEach(function (op) { console.log(op); });
+                }
+            }
+
             return val || '';
         };
 
diff --git a/www/debug/app-debug.less b/www/debug/app-debug.less
new file mode 100644
index 000000000..b7c6b009e
--- /dev/null
+++ b/www/debug/app-debug.less
@@ -0,0 +1,30 @@
+@import (once) "../../customize/src/less2/include/browser.less";
+@import (once) "../../customize/src/less2/include/toolbar.less";
+@import (once) "../../customize/src/less2/include/markdown.less";
+@import (once) '../../customize/src/less2/include/fileupload.less';
+@import (once) '../../customize/src/less2/include/alertify.less';
+@import (once) '../../customize/src/less2/include/tools.less';
+@import (once) '../../customize/src/less2/include/tokenfield.less';
+
+.toolbar_main();
+.fileupload_main();
+.alertify_main();
+.tokenfield_main();
+
+// body
+&.cp-app-debug {
+    display: flex;
+    flex-flow: column;
+    height: 100%;
+
+    #cp-app-debug {
+        flex: 1;
+        display: flex;
+    }
+    #cp-app-debug-content {
+        flex: 1;
+        overflow: auto;
+        white-space: pre-wrap;
+    }
+}
+
diff --git a/www/debug/colors.js b/www/debug/colors.js
new file mode 100644
index 000000000..d812f4d34
--- /dev/null
+++ b/www/debug/colors.js
@@ -0,0 +1,52 @@
+define(function () {
+    var padZero = function (str, len) {
+        len = len || 2;
+        var zeros = new Array(len).join('0');
+        return (zeros + str).slice(-len);
+    };
+    var invertColor = function (hex) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        // convert 3-digit hex to 6-digits.
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (hex.length !== 6) {
+            console.error(hex);
+            throw new Error('Invalid HEX color.');
+        }
+        // invert color components
+        var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
+            g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
+            b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
+        // pad each with zeros and return
+        return '#' + padZero(r) + padZero(g) + padZero(b);
+    };
+    var rgb2hex = function (rgb) {
+        if (rgb.indexOf('#') === 0) { return rgb; }
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        var hex = function (x) {
+            return ("0" + parseInt(x).toString(16)).slice(-2);
+        };
+        return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    };
+    var hex2rgba = function (hex, opacity) {
+        if (hex.indexOf('#') === 0) {
+            hex = hex.slice(1);
+        }
+        if (hex.length === 3) {
+            hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+        }
+        if (!opacity) { opacity = 1; }
+        var r = parseInt(hex.slice(0,2), 16);
+        var g = parseInt(hex.slice(2,4), 16);
+        var b = parseInt(hex.slice(4,6), 16);
+        return 'rgba('+r+', '+g+', '+b+', '+opacity+')';
+    };
+    return {
+        invert: invertColor,
+        rgb2hex: rgb2hex,
+        hex2rgba: hex2rgba
+    };
+});
diff --git a/www/debug/index.html b/www/debug/index.html
new file mode 100644
index 000000000..e3f7eacc4
--- /dev/null
+++ b/www/debug/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CryptPad</title>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="referrer" content="no-referrer" />
+    <script async data-bootload="main.js" data-main="/common/boot.js?ver=1.0" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        html, body {
+            margin: 0px;
+            padding: 0px;
+        }
+        #sbox-iframe {
+            position:fixed;
+            top:0px;
+            left:0px;
+            bottom:0px;
+            right:0px;
+            width:100%;
+            height:100%;
+            border:none;
+            margin:0;
+            padding:0;
+            overflow:hidden;
+        }
+        #sbox-filePicker-iframe {
+            position: fixed;
+            top:0; left:0;
+            bottom:0; right:0;
+            width:100%;
+            height: 100%;
+            border: 0;
+        }
+    </style>
+</head>
+<body>
+<iframe id="sbox-iframe">
diff --git a/www/debug/inner.html b/www/debug/inner.html
new file mode 100644
index 000000000..201863d1c
--- /dev/null
+++ b/www/debug/inner.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html class="cp-app-noscroll">
+<head>
+    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
+    <script async data-bootload="/debug/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <style>
+        .loading-hidden { display: none; }
+        #editor1 { display: none; }
+        .html2canvas-container { width: 3000px !important; height: 3000px !important; }
+    </style>
+</head>
+<body class="cp-app-debug">
+  <div id="cp-toolbar" class="cp-toolbar-container"></div>
+  <div id="cp-app-debug">
+    <div id="cp-app-debug-content"></div>
+  </div>
+</body>
+</html>
+
diff --git a/www/debug/inner.js b/www/debug/inner.js
new file mode 100644
index 000000000..4f68d2969
--- /dev/null
+++ b/www/debug/inner.js
@@ -0,0 +1,178 @@
+define([
+    'jquery',
+    '/bower_components/chainpad-crypto/crypto.js',
+    '/bower_components/textpatcher/TextPatcher.js',
+    '/common/toolbar3.js',
+    'json.sortify',
+    '/bower_components/chainpad-json-validator/json-ot.js',
+    '/common/common-util.js',
+    '/bower_components/nthen/index.js',
+    '/common/sframe-common.js',
+    '/common/common-interface.js',
+    '/api/config',
+    '/common/common-realtime.js',
+    '/customize/messages.js',
+    '/customize/application_config.js',
+
+    '/bower_components/secure-fabric.js/dist/fabric.min.js',
+
+    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
+    'less!/bower_components/components-font-awesome/css/font-awesome.min.css',
+    'less!/customize/src/less2/main.less',
+], function (
+    $,
+    Crypto,
+    TextPatcher,
+    Toolbar,
+    JSONSortify,
+    JsonOT,
+    Util,
+    nThen,
+    SFCommon,
+    UI,
+    ApiConfig,
+    CommonRealtime,
+    Messages,
+    AppConfig)
+{
+    var APP = window.APP = {
+        $: $,
+        AppConfig: AppConfig,
+        SFCommon: SFCommon,
+        Crypto: Crypto
+    };
+
+    var toolbar;
+    var common;
+
+    nThen(function (waitFor) {
+        $(waitFor(function () {
+            UI.addLoadingScreen();
+        }));
+        SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
+    }).nThen(function (/*waitFor*/) {
+        var initializing = true;
+        var $bar = $('#cp-toolbar');
+        var Title;
+        var cpNfInner;
+        var metadataMgr;
+        var readOnly = true;
+
+        var config = APP.config = {
+            readOnly: readOnly,
+            transformFunction: JsonOT.validate,
+            // cryptpad debug logging (default is 1)
+            // logLevel: 0,
+            validateContent: function (content) {
+                try {
+                    JSON.parse(content);
+                    return true;
+                } catch (e) {
+                    console.log("Failed to parse, rejecting patch");
+                    return false;
+                }
+            }
+        };
+
+        var history = false;
+
+        var setHistory = function (bool, update) {
+            history = bool;
+            if (!bool && update) { config.onRemote(); }
+        };
+
+        var displayDoc = function (doc) {
+            $('#cp-app-debug-content').text(JSON.stringify(doc, 0, 2));
+            console.log(doc);
+        };
+
+        config.onLocal = function () { };
+
+        config.onInit = function (info) {
+            Title = common.createTitle({});
+
+            var configTb = {
+                displayed: ['title', 'useradmin', 'spinner', 'share', 'userlist', 'newpad', 'limit'],
+                title: Title.getTitleConfig(),
+                metadataMgr: metadataMgr,
+                readOnly: 1,
+                realtime: info.realtime,
+                sfCommon: common,
+                $container: $bar,
+                $contentContainer: $('#cp-app-debug')
+            };
+            toolbar = APP.toolbar = Toolbar.create(configTb);
+            Title.setToolbar(toolbar);
+
+            /* add a history button */
+            var histConfig = {
+                onLocal: config.onLocal,
+                onRemote: config.onRemote,
+                setHistory: setHistory,
+                applyVal: function (val) {
+                    displayDoc(JSON.parse(val) || {});
+                },
+                $toolbar: $bar,
+                debug: true
+            };
+            var $hist = common.createButton('history', true, {histConfig: histConfig});
+            $hist.addClass('cp-hidden-if-readonly');
+            toolbar.$rightside.append($hist);
+        };
+
+        config.onReady = function (info) {
+            if (APP.realtime !== info.realtime) {
+                var realtime = APP.realtime = info.realtime;
+                APP.patchText = TextPatcher.create({
+                    realtime: realtime,
+                    //logging: true
+                });
+            }
+
+            var userDoc = APP.realtime.getUserDoc();
+            if (userDoc !== "") {
+                var hjson = JSON.parse(userDoc);
+
+                if (Array.isArray(hjson)) {
+                    metadataMgr.updateMetadata(hjson[3]);
+                } else if (hjson && hjson.metadata) {
+                    metadataMgr.updateMetadata(hjson.metadata);
+                }
+                displayDoc(hjson);
+            }
+
+            initializing = false;
+            UI.removeLoadingScreen();
+        };
+
+        config.onRemote = function () {
+            if (initializing) { return; }
+            if (history) { return; }
+            var userDoc = APP.realtime.getUserDoc();
+
+            var json = JSON.parse(userDoc);
+            if (Array.isArray(json)) {
+                metadataMgr.updateMetadata(json[3]);
+            } else if (json && json.metadata) {
+                metadataMgr.updateMetadata(json.metadata);
+            }
+            displayDoc(json);
+        };
+
+        config.onAbort = function () {
+            console.log('onAbort');
+        };
+
+        config.onConnectionChange = function (info) {
+            console.log('onConnectionChange', info.state);
+        };
+
+        cpNfInner = common.startRealtime(config);
+        metadataMgr = cpNfInner.metadataMgr;
+
+        cpNfInner.onInfiniteSpinner(function () {
+            console.error('infinite spinner');
+        });
+    });
+
+});
diff --git a/www/debug/main.js b/www/debug/main.js
new file mode 100644
index 000000000..7c136898a
--- /dev/null
+++ b/www/debug/main.js
@@ -0,0 +1,58 @@
+// Load #1, load as little as possible because we are in a race to get the loading screen up.
+define([
+    '/bower_components/nthen/index.js',
+    '/api/config',
+    'jquery',
+    '/common/requireconfig.js',
+    '/common/sframe-common-outer.js',
+    '/common/cryptpad-common.js',
+    '/common/common-util.js',
+    '/common/common-hash.js',
+    '/common/common-realtime.js',
+    '/common/common-constants.js',
+    '/common/common-interface.js',
+], function (nThen, ApiConfig, $, RequireConfig, SFCommonO,
+    Cryptpad, Util, Hash, Realtime, Constants, UI) {
+
+    window.Cryptpad = {
+        Common: Cryptpad,
+        Util: Util,
+        Hash: Hash,
+        Realtime: Realtime,
+        Constants: Constants,
+        UI: UI
+    };
+
+    var requireConfig = RequireConfig();
+
+    // Loaded in load #2
+    nThen(function (waitFor) {
+        $(waitFor());
+    }).nThen(function (waitFor) {
+        var req = {
+            cfg: requireConfig,
+            req: [ '/common/loading.js' ],
+            pfx: window.location.origin
+        };
+        window.rc = requireConfig;
+        window.apiconf = ApiConfig;
+        $('#sbox-iframe').attr('src',
+            ApiConfig.httpSafeOrigin + '/debug/inner.html?' + requireConfig.urlArgs +
+                '#' + encodeURIComponent(JSON.stringify(req)));
+
+        // This is a cheap trick to avoid loading sframe-channel in parallel with the
+        // loading screen setup.
+        var done = waitFor();
+        var onMsg = function (msg) {
+            var data = JSON.parse(msg.data);
+            if (data.q !== 'READY') { return; }
+            window.removeEventListener('message', onMsg);
+            var _done = done;
+            done = function () { };
+            _done();
+        };
+        window.addEventListener('message', onMsg);
+    }).nThen(function (/*waitFor*/) {
+        SFCommonO.start();
+    });
+});