From 894a355f0a87d1c11d3431a76937def7f70272c7 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 7 Apr 2020 14:27:44 +0200
Subject: [PATCH] Merge filepicker and share iframes

---
 customize.dist/src/outer.css                  |   2 +-
 www/code/inner.js                             |   1 +
 www/common/common-interface.js                |  17 ++-
 www/common/common-ui-elements.js              |  50 +++----
 www/common/onlyoffice/inner.js                |  25 ++--
 www/common/sframe-app-framework.js            |  21 ++-
 www/common/sframe-common-outer.js             |  95 +++++--------
 www/common/sframe-common.js                   |   1 -
 www/filepicker/main.js                        | 134 ------------------
 www/poll/inner.js                             |  18 +--
 .../app-secure.less}                          |  14 +-
 www/{filepicker => secureiframe}/inner.html   |   4 +-
 www/{filepicker => secureiframe}/inner.js     | 127 +++++++++++------
 www/{share => secureiframe}/main.js           |  29 ++--
 www/share/app-share.less                      |  17 ---
 www/share/index.html                          |  30 ----
 www/share/inner.html                          |  29 ----
 www/share/inner.js                            |  87 ------------
 18 files changed, 212 insertions(+), 489 deletions(-)
 delete mode 100644 www/filepicker/main.js
 rename www/{filepicker/app-filepicker.less => secureiframe/app-secure.less} (84%)
 rename www/{filepicker => secureiframe}/inner.html (73%)
 rename www/{filepicker => secureiframe}/inner.js (63%)
 rename www/{share => secureiframe}/main.js (87%)
 delete mode 100644 www/share/app-share.less
 delete mode 100644 www/share/index.html
 delete mode 100644 www/share/inner.html
 delete mode 100644 www/share/inner.js

diff --git a/customize.dist/src/outer.css b/customize.dist/src/outer.css
index b36fb2c10..75f449e61 100644
--- a/customize.dist/src/outer.css
+++ b/customize.dist/src/outer.css
@@ -2,7 +2,7 @@ html, body {
     margin: 0px;
     padding: 0px;
 }
-#sbox-iframe, #sbox-share-iframe, #sbox-filePicker-iframe {
+#sbox-iframe, #sbox-secure-iframe {
     position: fixed;
     top:0; left:0;
     bottom:0; right:0;
diff --git a/www/code/inner.js b/www/code/inner.js
index 5b517c74c..28b90b07c 100644
--- a/www/code/inner.js
+++ b/www/code/inner.js
@@ -278,6 +278,7 @@ define([
             if (MEDIA_TAG_MODES.indexOf(mode) !== -1) {
                 // Embedding is endabled
                 framework.setMediaTagEmbedder(function (mt) {
+                    editor.focus();
                     editor.replaceSelection($(mt)[0].outerHTML);
                 });
             } else {
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 4c4518434..2b3939370 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -464,16 +464,23 @@ define([
 
     UI.createModal = function (cfg) {
         var $body = cfg.$body || $('body');
-        var $blockContainer = $body.find('#'+cfg.id);
-        if (!$blockContainer.length) {
-            $blockContainer = $(h('div.cp-modal-container#'+cfg.id, {
+        var $blockContainer = cfg.id && $body.find('#'+cfg.id);
+        if (!$blockContainer || !$blockContainer.length) {
+            var id = '';
+            if (cfg.id) { id = '#'+cfg.id; }
+            $blockContainer = $(h('div.cp-modal-container'+id, {
                 tabindex: 1
             }));
         }
+        var deleted = false;
         var hide = function () {
-            if (cfg.onClose) { return void cfg.onClose(); }
+            if (deleted) { return; }
             $blockContainer.hide();
-            if (cfg.onClosed) { cfg.onClosed(); }
+            if (!cfg.id) {
+                deleted = true;
+                $blockContainer.remove();
+            }
+            if (cfg.onClose) { cfg.onClose(); }
         };
         $blockContainer.html('').appendTo($body);
         var $block = $(h('div.cp-modal')).appendTo($blockContainer);
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a9c682afc..2729be386 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -2628,17 +2628,13 @@ define([
         });
     };
 
-    UIElements.initFilePicker = function (common, cfg) {
-        var onSelect = cfg.onSelect || $.noop;
+    UIElements.openFilePicker = function (common, types, cb) {
         var sframeChan = common.getSframeChannel();
-        sframeChan.on("EV_FILE_PICKED", function (data) {
-            onSelect(data);
+        sframeChan.query("Q_FILE_PICKER_OPEN", types, function (err, data) {
+            if (err) { return; }
+            cb(data);
         });
     };
-    UIElements.openFilePicker = function (common, types) {
-        var sframeChan = common.getSframeChannel();
-        sframeChan.event("EV_FILE_PICKER_OPEN", types);
-    };
 
     UIElements.openTemplatePicker = function (common, force) {
         var metadataMgr = common.getMetadataMgr();
@@ -2661,29 +2657,25 @@ define([
                 return;
             }
             delete pickerCfg.hidden;
-            common.openFilePicker(pickerCfg);
             var first = true; // We can only pick a template once (for a new document)
-            var fileDialogCfg = {
-                onSelect: function (data) {
-                    if (data.type === type && first) {
-                        UI.addLoadingScreen({hideTips: true});
-                        var chatChan = common.getPadChat();
-                        var cursorChan = common.getCursorChannel();
-                        sframeChan.query('Q_TEMPLATE_USE', {
-                            href: data.href,
-                            chat: chatChan,
-                            cursor: cursorChan
-                        }, function () {
-                            first = false;
-                            UI.removeLoadingScreen();
-                            Feedback.send('TEMPLATE_USED');
-                        });
-                        if (focus) { focus.focus(); }
-                        return;
-                    }
+            common.openFilePicker(pickerCfg, function (data) {
+                if (data.type === type && first) {
+                    UI.addLoadingScreen({hideTips: true});
+                    var chatChan = common.getPadChat();
+                    var cursorChan = common.getCursorChannel();
+                    sframeChan.query('Q_TEMPLATE_USE', {
+                        href: data.href,
+                        chat: chatChan,
+                        cursor: cursorChan
+                    }, function () {
+                        first = false;
+                        UI.removeLoadingScreen();
+                        Feedback.send('TEMPLATE_USED');
+                    });
+                    if (focus) { focus.focus(); }
+                    return;
                 }
-            };
-            common.initFilePicker(fileDialogCfg);
+            });
         };
 
         sframeChan.query("Q_TEMPLATE_EXIST", type, function (err, data) {
diff --git a/www/common/onlyoffice/inner.js b/www/common/onlyoffice/inner.js
index 7515c908d..a99b9744d 100644
--- a/www/common/onlyoffice/inner.js
+++ b/www/common/onlyoffice/inner.js
@@ -941,8 +941,16 @@ define([
                 if (ifr) { ifr.remove(); }
             };
 
-            common.initFilePicker({
-                onSelect: function (data) {
+            APP.AddImage = function(cb1, cb2) {
+                APP.AddImageSuccessCallback = cb1;
+                APP.AddImageErrorCallback = cb2;
+                common.openFilePicker({
+                    types: ['file'],
+                    where: ['root'],
+                    filter: {
+                        fileType: ['image/']
+                    }
+                }, function (data) {
                     if (data.type !== 'file') {
                         debug("Unexpected data type picked " + data.type);
                         return;
@@ -963,19 +971,6 @@ define([
                             });
                         });
                     });
-                }
-            });
-
-            APP.AddImage = function(cb1, cb2) {
-                APP.AddImageSuccessCallback = cb1;
-                APP.AddImageErrorCallback = cb2;
-                common.openFilePicker({
-                    types: ['file'],
-                    where: ['root'],
-                    filter: {
-                        fileType: ['image/']
-                    }
-
                 });
             };
 
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 171c58b0e..fc149b2cc 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -503,8 +503,13 @@ define([
 
         var createFilePicker = function () {
             if (!common.isLoggedIn()) { return; }
-            common.initFilePicker({
-                onSelect: function (data) {
+            $embedButton = common.createButton('mediatag', true).click(function () {
+                var cfg = {
+                    types: ['file'],
+                    where: ['root']
+                };
+                if ($embedButton.data('filter')) { cfg.filter = $embedButton.data('filter'); }
+                common.openFilePicker(cfg, function (data) {
                     if (data.type !== 'file') {
                         console.log("Unexpected data type picked " + data.type);
                         return;
@@ -516,17 +521,7 @@ define([
                     var src = data.src = data.src.slice(0,1) === '/' ? origin + data.src : data.src;
                     mediaTagEmbedder($('<media-tag src="' + src +
                         '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'), data);
-                }
-            });
-            $embedButton = common.createButton('mediatag', true).click(function () {
-                var cfg = {
-                    types: ['file'],
-                    where: ['root']
-                };
-                if ($embedButton.data('filter')) {
-                    cfg.filter = $embedButton.data('filter');
-                }
-                common.openFilePicker(cfg);
+                });
             }).appendTo(toolbar.$rightside).hide();
         };
         var setMediaTagEmbedder = function (mte, filter) {
diff --git a/www/common/sframe-common-outer.js b/www/common/sframe-common-outer.js
index ea4cc7b8b..62491ffad 100644
--- a/www/common/sframe-common-outer.js
+++ b/www/common/sframe-common-outer.js
@@ -18,8 +18,7 @@ define([
         var Cryptget;
         var SFrameChannel;
         var sframeChan;
-        var FilePicker;
-        var Share;
+        var SecureIframe;
         var Messaging;
         var Notifier;
         var Utils = {
@@ -44,8 +43,7 @@ define([
                 '/bower_components/chainpad-crypto/crypto.js',
                 '/common/cryptget.js',
                 '/common/outer/worker-channel.js',
-                '/filepicker/main.js',
-                '/share/main.js',
+                '/secureiframe/main.js',
                 '/common/common-messaging.js',
                 '/common/common-notifier.js',
                 '/common/common-hash.js',
@@ -58,15 +56,14 @@ define([
                 '/common/test.js',
                 '/common/userObject.js',
             ], waitFor(function (_CpNfOuter, _Cryptpad, _Crypto, _Cryptget, _SFrameChannel,
-            _FilePicker, _Share, _Messaging, _Notifier, _Hash, _Util, _Realtime,
+            _SecureIframe, _Messaging, _Notifier, _Hash, _Util, _Realtime,
             _Constants, _Feedback, _LocalStore, _AppConfig, _Test, _UserObject) {
                 CpNfOuter = _CpNfOuter;
                 Cryptpad = _Cryptpad;
                 Crypto = Utils.Crypto = _Crypto;
                 Cryptget = _Cryptget;
                 SFrameChannel = _SFrameChannel;
-                FilePicker = _FilePicker;
-                Share = _Share;
+                SecureIframe = _SecureIframe;
                 Messaging = _Messaging;
                 Notifier = _Notifier;
                 Utils.Hash = _Hash;
@@ -976,81 +973,55 @@ define([
                 onFileUpload(sframeChan, data, cb);
             });
 
-            // File picker
-            var FP = {};
-            var initFilePicker = function (cfg) {
-                // cfg.hidden means pre-loading the filepicker while keeping it hidden.
+            // Secure modal
+            var SecureModal = {};
+            // Create or display the iframe and modal
+            var initSecureModal = function (type, cfg, cb) {
+                cfg.modal = type;
+                SecureModal.cb = cb;
+                // cfg.hidden means pre-loading the iframe while keeping it hidden.
                 // if cfg.hidden is true and the iframe already exists, do nothing
-                if (!FP.$iframe) {
+                if (!SecureModal.$iframe) {
                     var config = {};
-                    config.onFilePicked = function (data) {
-                        sframeChan.event('EV_FILE_PICKED', data);
+                    config.onAction = function (data) {
+                        if (typeof(SecureModal.cb) !== "function") { return; }
+                        SecureModal.cb(data);
+                        SecureModal.$iframe.hide();
                     };
                     config.onClose = function () {
-                        FP.$iframe.hide();
+                        SecureModal.$iframe.hide();
                     };
-                    config.onFileUpload = onFileUpload;
-                    config.types = cfg;
-                    config.addCommonRpc = addCommonRpc;
-                    config.modules = {
-                        Cryptpad: Cryptpad,
-                        SFrameChannel: SFrameChannel,
-                        Utils: Utils
-                    };
-                    FP.$iframe = $('<iframe>', {id: 'sbox-filePicker-iframe'}).appendTo($('body'));
-                    FP.picker = FilePicker.create(config);
-                } else if (!cfg.hidden) {
-                    FP.$iframe.show();
-                    FP.picker.refresh(cfg);
-                }
-                if (cfg.hidden) {
-                    FP.$iframe.hide();
-                    return;
-                }
-                FP.$iframe.focus();
-            };
-            sframeChan.on('EV_FILE_PICKER_OPEN', function (data) {
-                initFilePicker(data);
-            });
-
-            // Share modal
-            var ShareModal = {};
-            var initShareModal = function (cfg) {
-                cfg.hashes = hashes;
-                cfg.password = password;
-                cfg.isTemplate = isTemplate;
-                // cfg.hidden means pre-loading the filepicker while keeping it hidden.
-                // if cfg.hidden is true and the iframe already exists, do nothing
-                if (!ShareModal.$iframe) {
-                    var config = {};
-                    config.onShareAction = function (data) {
-                        sframeChan.event('EV_SHARE_ACTION', data);
-                    };
-                    config.onClose = function () {
-                        ShareModal.$iframe.hide();
+                    config.data = {
+                        hashes: hashes,
+                        password: password,
+                        isTemplate: isTemplate
                     };
-                    config.data = cfg;
                     config.addCommonRpc = addCommonRpc;
                     config.modules = {
                         Cryptpad: Cryptpad,
                         SFrameChannel: SFrameChannel,
                         Utils: Utils
                     };
-                    ShareModal.$iframe = $('<iframe>', {id: 'sbox-share-iframe'}).appendTo($('body'));
-                    ShareModal.modal = Share.create(config);
+                    SecureModal.$iframe = $('<iframe>', {id: 'sbox-secure-iframe'}).appendTo($('body'));
+                    SecureModal.modal = SecureIframe.create(config);
                 } else if (!cfg.hidden) {
-                    ShareModal.modal.refresh(cfg, function () {
-                        ShareModal.$iframe.show();
+                    SecureModal.modal.refresh(cfg, function () {
+                        SecureModal.$iframe.show();
                     });
                 }
                 if (cfg.hidden) {
-                    ShareModal.$iframe.hide();
+                    SecureModal.$iframe.hide();
                     return;
                 }
-                ShareModal.$iframe.focus();
+                SecureModal.$iframe.focus();
             };
+
+            sframeChan.on('Q_FILE_PICKER_OPEN', function (data, cb) {
+                initSecureModal('filepicker', data || {}, cb);
+            });
+
             sframeChan.on('EV_SHARE_OPEN', function (data) {
-                initShareModal(data || {});
+                initSecureModal('share', data || {}, null);
             });
 
             sframeChan.on('Q_TEMPLATE_USE', function (data, cb) {
diff --git a/www/common/sframe-common.js b/www/common/sframe-common.js
index 3fa511c58..ad8d6f77e 100644
--- a/www/common/sframe-common.js
+++ b/www/common/sframe-common.js
@@ -89,7 +89,6 @@ define([
     window.CryptPad_UIElements = UIElements;
     window.CryptPad_common = funcs;
     funcs.createUserAdminMenu = callWithCommon(UIElements.createUserAdminMenu);
-    funcs.initFilePicker = callWithCommon(UIElements.initFilePicker);
     funcs.openFilePicker = callWithCommon(UIElements.openFilePicker);
     funcs.openTemplatePicker = callWithCommon(UIElements.openTemplatePicker);
     funcs.displayMediatagImage = callWithCommon(MT.displayMediatagImage);
diff --git a/www/filepicker/main.js b/www/filepicker/main.js
deleted file mode 100644
index e63ab457c..000000000
--- a/www/filepicker/main.js
+++ /dev/null
@@ -1,134 +0,0 @@
-// 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',
-], function (nThen, ApiConfig, $, RequireConfig) {
-    var requireConfig = RequireConfig();
-
-    var create = function (config) {
-        // Loaded in load #2
-        var sframeChan;
-        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-filePicker-iframe').attr('src',
-                ApiConfig.httpSafeOrigin + '/filepicker/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*/) {
-            var Cryptpad = config.modules.Cryptpad;
-            var Utils = config.modules.Utils;
-
-            nThen(function (waitFor) {
-                // The inner iframe tries to get some data from us every ms (cache, store...).
-                // It will send a "READY" message and wait for our answer with the correct txid.
-                // First, we have to answer to this message, otherwise we're going to block
-                // sframe-boot.js. Then we can start the channel.
-                var msgEv = Utils.Util.mkEvent();
-                var iframe = $('#sbox-filePicker-iframe')[0].contentWindow;
-                var postMsg = function (data) {
-                    iframe.postMessage(data, '*');
-                };
-                var w = waitFor();
-                var whenReady = function (msg) {
-                    if (msg.source !== iframe) { return; }
-                    var data = JSON.parse(msg.data);
-                    if (!data.txid) { return; }
-                    // Remove the listener once we've received the READY message
-                    window.removeEventListener('message', whenReady);
-                    // Answer with the requested data
-                    postMsg(JSON.stringify({ txid: data.txid, language: Cryptpad.getLanguage(), localStore: window.localStore, cache: window.cpCache }));
-
-                    // Then start the channel
-                    window.addEventListener('message', function (msg) {
-                        if (msg.source !== iframe) { return; }
-                        msgEv.fire(msg);
-                    });
-                    config.modules.SFrameChannel.create(msgEv, postMsg, waitFor(function (sfc) {
-                        sframeChan = sfc;
-                    }));
-                    w();
-                };
-                window.addEventListener('message', whenReady);
-            }).nThen(function () {
-                var updateMeta = function () {
-                    //console.log('EV_METADATA_UPDATE');
-                    var metaObj;
-                    nThen(function (waitFor) {
-                        Cryptpad.getMetadata(waitFor(function (err, n) {
-                            if (err) { console.log(err); }
-                            metaObj = n;
-                        }));
-                    }).nThen(function (/*waitFor*/) {
-                        metaObj.doc = {};
-                        var additionalPriv = {
-                            fileHost: ApiConfig.fileHost,
-                            loggedIn: Utils.LocalStore.isLoggedIn(),
-                            origin: window.location.origin,
-                            pathname: window.location.pathname,
-                            feedbackAllowed: Utils.Feedback.state,
-                            types: config.types
-                        };
-                        for (var k in additionalPriv) { metaObj.priv[k] = additionalPriv[k]; }
-
-                        sframeChan.event('EV_METADATA_UPDATE', metaObj);
-                    });
-                };
-                Cryptpad.onMetadataChanged(updateMeta);
-                sframeChan.onReg('EV_METADATA_UPDATE', updateMeta);
-
-                config.addCommonRpc(sframeChan);
-
-                sframeChan.on('Q_GET_FILES_LIST', function (types, cb) {
-                    Cryptpad.getSecureFilesList(types, function (err, data) {
-                        cb({
-                            error: err,
-                            data: data
-                        });
-                    });
-                });
-
-                sframeChan.on('EV_FILE_PICKER_CLOSE', function () {
-                    config.onClose();
-                });
-                sframeChan.on('EV_FILE_PICKED', function (data) {
-                    config.onFilePicked(data);
-                });
-                sframeChan.on('Q_UPLOAD_FILE', function (data, cb) {
-                    config.onFileUpload(sframeChan, data, cb);
-                });
-            });
-        });
-        var refresh = function (types) {
-            if (!sframeChan) { return; }
-            sframeChan.event('EV_FILE_PICKER_REFRESH', types);
-        };
-        return {
-            refresh: refresh
-        };
-    };
-    return {
-        create: create
-    };
-});
diff --git a/www/poll/inner.js b/www/poll/inner.js
index 5c9f9f182..204835555 100644
--- a/www/poll/inner.js
+++ b/www/poll/inner.js
@@ -1206,22 +1206,18 @@ define([
         updatePublishButton();
 
         if (common.isLoggedIn()) {
-            var fileDialogCfg = {
-                onSelect: function (data) {
-                    if (data.type === 'file' && APP.editor) {
-                        var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
-                        APP.editor.replaceSelection(mt);
-                        return;
-                    }
-                }
-            };
-            common.initFilePicker(fileDialogCfg);
             APP.$mediaTagButton = common.createButton('mediatag', true).click(function () {
                 var pickerCfg = {
                     types: ['file'],
                     where: ['root']
                 };
-                common.openFilePicker(pickerCfg);
+                common.openFilePicker(pickerCfg, function (data) {
+                    if (data.type === 'file' && APP.editor) {
+                        var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
+                        APP.editor.replaceSelection(mt);
+                        return;
+                    }
+                });
             }).appendTo($rightside);
 
             var $tags = common.createButton('hashtag', true);
diff --git a/www/filepicker/app-filepicker.less b/www/secureiframe/app-secure.less
similarity index 84%
rename from www/filepicker/app-filepicker.less
rename to www/secureiframe/app-secure.less
index c0b9e7789..bece9d4c0 100644
--- a/www/filepicker/app-filepicker.less
+++ b/www/secureiframe/app-secure.less
@@ -6,8 +6,11 @@
 @import (reference) '../../customize/src/less2/include/tippy.less';
 @import (reference) '../../customize/src/less2/include/checkmark.less';
 @import (reference) '../../customize/src/less2/include/password-input.less';
+@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
+@import (reference) '../../customize/src/less2/include/usergrid.less';
 
-&.cp-app-filepicker {
+&.cp-app-secureiframe {
+    .modals-ui-elements_main();
     .iconColors_main();
     .fileupload_main();
     .alertify_main();
@@ -15,6 +18,7 @@
     .checkmark_main(20px);
     .password_main();
     .modal_main();
+    .usergrid_main();
 
     #cp-filepicker-dialog {
         display: none;
@@ -26,6 +30,14 @@
                 overflow-y: auto;
             }
 
+            .cp-loading-spinner-container {
+                height: 100px;
+                .cp-spinner {
+                    border-color: @colortheme_logo-2;
+                    border-top-color: transparent;
+                }
+            }
+
             .cp-filepicker-content-element {
                 width: 125px;
                 //min-width: 200px;
diff --git a/www/filepicker/inner.html b/www/secureiframe/inner.html
similarity index 73%
rename from www/filepicker/inner.html
rename to www/secureiframe/inner.html
index 8090d7abc..29c3cf797 100644
--- a/www/filepicker/inner.html
+++ b/www/secureiframe/inner.html
@@ -2,7 +2,7 @@
 <html style="height: 100%; background: transparent;">
 <head>
     <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/filepicker/inner.js" data-main="/common/sframe-boot.js?ver=1.6" src="/bower_components/requirejs/require.js?ver=2.3.5"></script>
+    <script async data-bootload="/secureiframe/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; }
         body #cp-loading {
@@ -22,7 +22,7 @@
         }
     </style>
 </head>
-<body class="cp-app-filepicker" style="background: transparent;">
+<body class="cp-app-secureiframe" style="background: transparent;">
 </body>
 </html>
 
diff --git a/www/filepicker/inner.js b/www/secureiframe/inner.js
similarity index 63%
rename from www/filepicker/inner.js
rename to www/secureiframe/inner.js
index 205a0b8db..52d0427ca 100644
--- a/www/filepicker/inner.js
+++ b/www/secureiframe/inner.js
@@ -7,12 +7,13 @@ define([
     '/common/common-ui-elements.js',
     '/common/common-util.js',
     '/common/common-hash.js',
+    '/common/hyperscript.js',
     'json.sortify',
     '/customize/messages.js',
 
     'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
     'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/filepicker/app-filepicker.less',
+    'less!/secureiframe/app-secure.less',
 ], function (
     $,
     Crypto,
@@ -22,6 +23,7 @@ define([
     UIElements,
     Util,
     Hash,
+    h,
     Sortify,
     Messages)
 {
@@ -30,22 +32,58 @@ define([
     var andThen = function (common) {
         var metadataMgr = common.getMetadataMgr();
         var privateData = metadataMgr.getPrivateData();
-        var $body = $('body');
         var sframeChan = common.getSframeChannel();
-        var filters = metadataMgr.getPrivateData().types;
+        var $body = $('body');
 
-        var hideFileDialog = function () {
-            sframeChan.event('EV_FILE_PICKER_CLOSE');
+        var hideIframe = function () {
+            sframeChan.event('EV_SECURE_IFRAME_CLOSE');
         };
+
+        var displayed;
+        var create = {};
+        create['share'] = function (data) {
+            var priv = metadataMgr.getPrivateData();
+            var f = (data && data.file) ? UIElements.createFileShareModal
+                                          : UIElements.createShareModal;
+
+            var friends = common.getFriends();
+
+            var _modal;
+            var modal = f({
+                origin: priv.origin,
+                pathname: priv.pathname,
+                password: priv.password,
+                isTemplate: priv.isTemplate,
+                hashes: priv.hashes,
+                common: common,
+                title: data.title,
+                friends: friends,
+                onClose: function () {
+                    if (_modal && _modal.close) { _modal.close(); }
+                    hideIframe();
+                },
+                fileData: {
+                    hash: priv.hashes.fileHash,
+                    password: priv.password
+                }
+            });
+            $('button.cancel').click(); // Close any existing alertify
+            _modal = UI.openCustomModal(modal);
+            displayed = modal;
+        };
+
+        // File uploader
         var onFilePicked = function (data) {
+            var privateData = metadataMgr.getPrivateData();
             var parsed = Hash.parsePadUrl(data.url);
-            hideFileDialog();
+            if (displayed && displayed.hide) { displayed.hide(); }
+            hideIframe();
             if (parsed.type === 'file') {
                 var secret = Hash.getSecrets('file', parsed.hash, data.password);
                 var fileHost = privateData.fileHost || privateData.origin;
                 var src = fileHost + Hash.getBlobPathFromHex(secret.channel);
                 var key = Hash.encodeBase64(secret.keys.cryptKey);
-                sframeChan.event("EV_FILE_PICKED", {
+                sframeChan.event("EV_SECURE_ACTION", {
                     type: parsed.type,
                     src: src,
                     name: data.name,
@@ -53,14 +91,12 @@ define([
                 });
                 return;
             }
-            sframeChan.event("EV_FILE_PICKED", {
+            sframeChan.event("EV_SECURE_ACTION", {
                 type: parsed.type,
                 href: data.url,
                 name: data.name
             });
         };
-
-        // File uploader
         var fmConfig = {
             body: $('body'),
             noHandlers: true,
@@ -69,40 +105,40 @@ define([
             }
         };
         APP.FM = common.createFileManager(fmConfig);
+        create['filepicker'] = function (_filters) {
+            var updateContainer = function () {};
 
-        // Create file picker
-        var onSelect = function (url, name, password) {
-            onFilePicked({url: url, name: name, password: password});
-        };
-        var data = {
-            FM: APP.FM
-        };
-        var updateContainer;
-        var createFileDialog = function () {
+            var filters = _filters;
             var types = filters.types || [];
+            var data = {
+                FM: APP.FM
+            };
+
             // Create modal
             var modal = UI.createModal({
-                id: 'cp-filepicker-dialog',
                 $body: $body,
-                onClose: hideFileDialog
+                onClose: function () {
+                    hideIframe();
+                }
             });
+            displayed = modal;
             modal.show();
-            var $blockContainer = modal.$modal;
+
             // Set the fixed content
-            var $block = $blockContainer.find('.cp-modal');
+            modal.$modal.attr('id', 'cp-filepicker-dialog');
+            var $block = modal.$modal.find('.cp-modal');
 
             // Description
             var text = Messages.filePicker_description;
             if (types && types.length === 1 && types[0] !== 'file') {
-                // Should be Templates
                 text = Messages.selectTemplate;
             }
-            var $description = $('<p>').text(text);
-            $block.append($description);
+            $block.append(h('p', text));
 
-            var $filter = $('<p>', {'class': 'cp-modal-form'}).appendTo($block);
+            // Add filter input
+            var $filter = $(h('p.cp-modal-form')).appendTo($block);
             var to;
-            $('<input>', {
+            var $input = $('<input>', {
                 type: 'text',
                 'class': 'cp-filepicker-filter',
                 'placeholder': Messages.filePicker_filter
@@ -111,7 +147,7 @@ define([
                 to = window.setTimeout(updateContainer, 300);
             });
 
-            //If file, display the upload button
+            // If file, display the upload button
             if (types.indexOf('file') !== -1 && common.isLoggedIn()) {
                 var f = (filters && filters.filter) || {};
                 delete data.accept;
@@ -126,15 +162,16 @@ define([
                 $filter.append(common.createButton('upload', false, data));
             }
 
-            var $container = $('<span>', {'class': 'cp-filepicker-content'}).appendTo($block);
+            var $container = $(h('span.cp-filepicker-content', [
+                h('div.cp-loading-spinner-container', h('span.cp-spinner'))
+            ])).appendTo($block);
 
             // Update the files list when needed
             updateContainer = function () {
-                $container.html('');
-                var $input = $filter.find('.cp-filepicker-filter');
                 var filter = $input.val().trim();
                 var todo = function (err, list) {
                     if (err) { return void console.error(err); }
+                    $container.html('');
                     Object.keys(list).forEach(function (id) {
                         var data = list[id];
                         var name = data.filename || data.title || '?';
@@ -149,8 +186,8 @@ define([
                         $('<span>', {'class': 'cp-filepicker-content-element-name'}).text(name)
                             .appendTo($span);
                         $span.click(function () {
-                            if (typeof onSelect === "function") {
-                                onSelect(data.href, name, data.password);
+                            if (typeof onFilePicked === "function") {
+                                onFilePicked({url: data.href, name: name, password: data.password});
                             }
                         });
 
@@ -163,21 +200,23 @@ define([
             };
             updateContainer();
         };
-        sframeChan.on('EV_FILE_PICKER_REFRESH', function (newFilters) {
-            if (Sortify(filters) !== Sortify(newFilters)) {
-                $body.html('');
-                filters = newFilters;
-                return void createFileDialog();
-            }
-            updateContainer();
+
+        sframeChan.on('EV_REFRESH', function (data) {
+            if (!data) { return; }
+            var type = data.modal;
+            if (!create[type]) { return; }
+            if (displayed && displayed.close) { displayed.close(); }
+            else if (displayed && displayed.hide) { displayed.hide(); }
+            displayed = undefined;
+            create[type](data);
         });
-        createFileDialog();
 
         UI.removeLoadingScreen();
     };
 
     var main = function () {
         var common;
+        var _andThen = Util.once(andThen);
 
         nThen(function (waitFor) {
             $(waitFor(function () {
@@ -187,11 +226,11 @@ define([
         }).nThen(function (/*waitFor*/) {
             var metadataMgr = common.getMetadataMgr();
             if (metadataMgr.getMetadataLazy() !== 'uninitialized') {
-                andThen(common);
+                _andThen(common);
                 return;
             }
             metadataMgr.onChange(function () {
-                andThen(common);
+                _andThen(common);
             });
         });
     };
diff --git a/www/share/main.js b/www/secureiframe/main.js
similarity index 87%
rename from www/share/main.js
rename to www/secureiframe/main.js
index f1f9a3a3a..a50a67bb2 100644
--- a/www/share/main.js
+++ b/www/secureiframe/main.js
@@ -22,8 +22,8 @@ define([
             };
             window.rc = requireConfig;
             window.apiconf = ApiConfig;
-            $('#sbox-share-iframe').attr('src',
-                ApiConfig.httpSafeOrigin + '/share/inner.html?' + requireConfig.urlArgs +
+            $('#sbox-secure-iframe').attr('src',
+                ApiConfig.httpSafeOrigin + '/secureiframe/inner.html?' + requireConfig.urlArgs +
                     '#' + encodeURIComponent(JSON.stringify(req)));
 
             // This is a cheap trick to avoid loading sframe-channel in parallel with the
@@ -48,7 +48,7 @@ define([
                 // First, we have to answer to this message, otherwise we're going to block
                 // sframe-boot.js. Then we can start the channel.
                 var msgEv = Utils.Util.mkEvent();
-                var iframe = $('#sbox-share-iframe')[0].contentWindow;
+                var iframe = $('#sbox-secure-iframe')[0].contentWindow;
                 var postMsg = function (data) {
                     iframe.postMessage(data, '*');
                 };
@@ -132,11 +132,24 @@ define([
                     });
                 });
 
-                sframeChan.on('EV_SHARE_CLOSE', function () {
-                    config.onClose();
+                sframeChan.on('EV_SECURE_ACTION', function (data) {
+                    config.onAction(data);
+                });
+                sframeChan.on('Q_UPLOAD_FILE', function (data, cb) {
+                    config.onFileUpload(sframeChan, data, cb);
                 });
-                sframeChan.on('EV_SHARE_ACTION', function (data) {
-                    config.onShareAction(data);
+
+                sframeChan.on('Q_GET_FILES_LIST', function (types, cb) {
+                    Cryptpad.getSecureFilesList(types, function (err, data) {
+                        cb({
+                            error: err,
+                            data: data
+                        });
+                    });
+                });
+
+                sframeChan.on('EV_SECURE_IFRAME_CLOSE', function () {
+                    config.onClose();
                 });
 
                 sframeChan.onReady(function () {
@@ -155,7 +168,7 @@ define([
                 };
                 return;
             }
-            sframeChan.event('EV_SHARE_REFRESH', data);
+            sframeChan.event('EV_REFRESH', data);
             cb();
         };
         return {
diff --git a/www/share/app-share.less b/www/share/app-share.less
deleted file mode 100644
index 8efdd17f3..000000000
--- a/www/share/app-share.less
+++ /dev/null
@@ -1,17 +0,0 @@
-@import (reference) '../../customize/src/less2/include/tippy.less';
-@import (reference) '../../customize/src/less2/include/modal.less';
-@import (reference) '../../customize/src/less2/include/alertify.less';
-@import (reference) '../../customize/src/less2/include/checkmark.less';
-@import (reference) '../../customize/src/less2/include/password-input.less';
-@import (reference) '../../customize/src/less2/include/usergrid.less';
-@import (reference) '../../customize/src/less2/include/modals-ui-elements.less';
-
-&.cp-app-share {
-    .tippy_main();
-    .alertify_main();
-    .modals-ui-elements_main();
-    .checkmark_main(20px);
-    .password_main();
-    .modal_main();
-    .usergrid_main();
-}
diff --git a/www/share/index.html b/www/share/index.html
deleted file mode 100644
index 8be90cfb5..000000000
--- a/www/share/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!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;
-        }
-    </style>
-</head>
-<body>
-<iframe id="sbox-iframe">
\ No newline at end of file
diff --git a/www/share/inner.html b/www/share/inner.html
deleted file mode 100644
index 6cf7179ae..000000000
--- a/www/share/inner.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html style="height: 100%; background: transparent;">
-<head>
-    <meta content="text/html; charset=utf-8" http-equiv="content-type"/>
-    <script async data-bootload="/share/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; }
-        body #cp-loading {
-            display: none;
-            position: absolute;
-            top: 15vh;
-            bottom: 15vh;
-            left: 10vw;
-            right: 10vw;
-            z-index: 200000;
-            overflow: hidden;
-        }
-        body #cp-loading .cp-loading-container {
-            margin-top: 35vh;
-        }
-        body #cp-loading .cp-loading-cryptofist {
-            display: none;
-        }
-    </style>
-</head>
-<body class="cp-app-share" style="background: transparent;">
-</body>
-</html>
-
diff --git a/www/share/inner.js b/www/share/inner.js
deleted file mode 100644
index f02af4b8b..000000000
--- a/www/share/inner.js
+++ /dev/null
@@ -1,87 +0,0 @@
-define([
-    'jquery',
-    '/bower_components/nthen/index.js',
-    '/common/sframe-common.js',
-    '/common/common-ui-elements.js',
-    '/common/common-interface.js',
-
-    'css!/bower_components/bootstrap/dist/css/bootstrap.min.css',
-    'css!/bower_components/components-font-awesome/css/font-awesome.min.css',
-    'less!/share/app-share.less',
-], function (
-    $,
-    nThen,
-    SFCommon,
-    UIElements,
-    UI)
-{
-    var APP = window.APP = {};
-
-    var init = false;
-    var andThen = function (common) {
-        if (init) { return; }
-        init = true;
-
-        var metadataMgr = common.getMetadataMgr();
-        var sframeChan = common.getSframeChannel();
-
-        var hideShareDialog = function () {
-            sframeChan.event('EV_SHARE_CLOSE');
-        };
-
-        var createShareDialog = function (data) {
-            var priv = metadataMgr.getPrivateData();
-            var hashes = priv.hashes;
-            var origin = priv.origin;
-            var pathname = priv.pathname;
-            var f = (data && data.file) ? UIElements.createFileShareModal
-                                          : UIElements.createShareModal;
-
-            var friends = common.getFriends();
-
-            var modal = f({
-                origin: origin,
-                pathname: pathname,
-                password: priv.password,
-                isTemplate: priv.isTemplate,
-                hashes: hashes,
-                common: common,
-                title: data.title,
-                friends: friends,
-                onClose: function () {
-                    hideShareDialog();
-                },
-                fileData: {
-                    hash: hashes.fileHash,
-                    password: priv.password
-                }
-            });
-            $('button.cancel').click(); // Close any existing alertify
-            UI.openCustomModal(modal);
-        };
-        sframeChan.on('EV_SHARE_REFRESH', function (data) {
-            createShareDialog(data);
-        });
-    };
-
-    var main = function () {
-        var common;
-
-        nThen(function (waitFor) {
-            $(waitFor(function () {
-                UI.removeLoadingScreen();
-            }));
-            SFCommon.create(waitFor(function (c) { APP.common = common = c; }));
-        }).nThen(function (/*waitFor*/) {
-            var metadataMgr = common.getMetadataMgr();
-            if (metadataMgr.getMetadataLazy() !== 'uninitialized') {
-                andThen(common);
-                return;
-            }
-            metadataMgr.onChange(function () {
-                andThen(common);
-            });
-        });
-    };
-    main();
-});