From ed722f7385c2fee2007bce739c5514914b63d918 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Thu, 26 Mar 2020 13:12:41 +0100
Subject: [PATCH] Fix properties and access modal being opened multiple times
 at once

---
 www/common/common-ui-elements.js | 859 +------------------------------
 www/common/drive-ui.js           |   4 +-
 www/common/inner/access.js       | 234 ++-------
 www/common/inner/common-modal.js | 156 ++++++
 www/common/inner/properties.js   | 181 +++++++
 5 files changed, 396 insertions(+), 1038 deletions(-)
 create mode 100644 www/common/inner/common-modal.js
 create mode 100644 www/common/inner/properties.js

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index fefbba6e1..880c4c354 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -99,857 +99,6 @@ define([
             });
         };
     };
-/*
-    var getPropertiesData = function (common, cb) {
-        var data = {};
-        NThen(function (waitFor) {
-            var base = common.getMetadataMgr().getPrivateData().origin;
-            common.getPadAttribute('', waitFor(function (err, val) {
-                if (err || !val) {
-                    waitFor.abort();
-                    return void cb(err || 'EEMPTY');
-                }
-                if (!val.fileType) {
-                    delete val.owners;
-                    delete val.expire;
-                }
-                Util.extend(data, val);
-                if (data.href) { data.href = base + data.href; }
-                if (data.roHref) { data.roHref = base + data.roHref; }
-            }));
-            common.getPadMetadata(null, waitFor(function (obj) {
-                if (obj && obj.error) { return; }
-                data.owners = obj.owners;
-                data.expire = obj.expire;
-                data.pending_owners = obj.pending_owners;
-            }));
-        }).nThen(function () {
-            cb(void 0, data);
-        });
-    };
-*/
-    var getPropertiesData = function (common, opts, cb) {
-        opts = opts || {};
-        var data = {};
-        NThen(function (waitFor) {
-            var base = common.getMetadataMgr().getPrivateData().origin;
-            common.getPadAttribute('', waitFor(function (err, val) {
-                if (err || !val) {
-                    waitFor.abort();
-                    return void cb(err || 'EEMPTY');
-                }
-                if (!val.fileType) {
-                    delete val.owners;
-                    delete val.expire;
-                }
-                Util.extend(data, val);
-                if (data.href) { data.href = base + data.href; }
-                if (data.roHref) { data.roHref = base + data.roHref; }
-            }), opts.href);
-
-            // If this is a file, don't try to look for metadata
-            if (opts.channel && opts.channel.length > 34) { return; }
-            common.getPadMetadata({
-                channel: opts.channel // optional, fallback to current pad
-            }, waitFor(function (obj) {
-                if (obj && obj.error) { return; }
-                data.owners = obj.owners;
-                data.expire = obj.expire;
-                data.pending_owners = obj.pending_owners;
-            }));
-        }).nThen(function () {
-            cb(void 0, data);
-        });
-    };
-
-
-/*
-    var createOwnerModal = function (common, data) {
-        var friends = common.getFriends(true);
-        var sframeChan = common.getSframeChannel();
-        var priv = common.getMetadataMgr().getPrivateData();
-        var user = common.getMetadataMgr().getUserData();
-        var edPublic = priv.edPublic;
-        var channel = data.channel;
-        var owners = data.owners || [];
-        var pending_owners = data.pending_owners || [];
-        var teams = priv.teams;
-        var teamOwner = data.teamId;
-
-        var redrawAll = function () {};
-
-        var div1 = h('div.cp-usergrid-user.cp-share-column.cp-ownership');
-        var div2 = h('div.cp-usergrid-user.cp-share-column.cp-ownership');
-        var $div1 = $(div1);
-        var $div2 = $(div2);
-
-        // Remove owner column
-        var drawRemove = function (pending) {
-            var _owners = {};
-            var o = (pending ? pending_owners : owners) || [];
-            o.forEach(function (ed) {
-                var f;
-                Object.keys(friends).some(function (c) {
-                    if (friends[c].edPublic === ed) {
-                        f = friends[c];
-                        return true;
-                    }
-                });
-                Object.keys(teams).some(function (id) {
-                    if (teams[id].edPublic === ed) {
-                        f = teams[id];
-                        f.teamId = id;
-                    }
-                });
-                if (ed === edPublic) {
-                    f = f || user;
-                    if (f.name) { f.edPublic = edPublic; }
-                }
-                _owners[ed] = f || {
-                    displayName: Messages._getKey('owner_unknownUser', [ed]),
-                    edPublic: ed,
-                };
-            });
-            var msg = pending ? Messages.owner_removePendingText
-                        : Messages.owner_removeText;
-            var removeCol = UIElements.getUserGrid(msg, {
-                common: common,
-                large: true,
-                data: _owners,
-                noFilter: true
-            }, function () {
-            });
-            var $div = $(removeCol.div);
-            // When clicking on the remove button, we check the selected users.
-            // If you try to remove yourself, we'll display an additional warning message
-            var btnMsg = pending ? Messages.owner_removePendingButton : Messages.owner_removeButton;
-            var removeButton = h('button.no-margin', btnMsg);
-            $(removeButton).click(function () {
-                // Check selection
-                var $sel = $div.find('.cp-usergrid-user.cp-selected');
-                var sel = $sel.toArray();
-                if (!sel.length) { return; }
-                var me = false;
-                var toRemove = sel.map(function (el) {
-                    var ed = $(el).attr('data-ed');
-                    if (!ed) { return; }
-                    if (teamOwner && teams[teamOwner] && teams[teamOwner].edPublic === ed) { me = true; }
-                    if (ed === edPublic && !teamOwner) { me = true; }
-                    return ed;
-                }).filter(function (x) { return x; });
-                NThen(function (waitFor) {
-                    var msg = me ? Messages.owner_removeMeConfirm : Messages.owner_removeConfirm;
-                    UI.confirm(msg, waitFor(function (yes) {
-                        if (!yes) {
-                            waitFor.abort();
-                            return;
-                        }
-                    }));
-                }).nThen(function (waitFor) {
-                    // Send the command
-                    sframeChan.query('Q_SET_PAD_METADATA', {
-                        channel: channel,
-                        command: pending ? 'RM_PENDING_OWNERS' : 'RM_OWNERS',
-                        value: toRemove,
-                        teamId: teamOwner
-                    }, waitFor(function (err, res) {
-                        err = err || (res && res.error);
-                        if (err) {
-                            waitFor.abort();
-                            redrawAll();
-                            var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden
-                                                                          : Messages.error;
-                            return void UI.warn(text);
-                        }
-                        UI.log(Messages.saved);
-                    }));
-                }).nThen(function (waitFor) {
-                    sel.forEach(function (el) {
-                        var curve = $(el).attr('data-curve');
-                        var friend = curve === user.curvePublic ? user : friends[curve];
-                        if (!friend) { return; }
-                        common.mailbox.sendTo("RM_OWNER", {
-                            channel: channel,
-                            title: data.title,
-                            pending: pending
-                        }, {
-                            channel: friend.notifications,
-                            curvePublic: friend.curvePublic
-                        }, waitFor());
-                    });
-                }).nThen(function () {
-                    redrawAll();
-                });
-            });
-            $div.append(h('p', removeButton));
-            return $div;
-        };
-
-        // Add owners column
-        var drawAdd = function () {
-            var $div = $(h('div.cp-share-column'));
-            var _friends = JSON.parse(JSON.stringify(friends));
-            Object.keys(_friends).forEach(function (curve) {
-                if (owners.indexOf(_friends[curve].edPublic) !== -1 ||
-                    pending_owners.indexOf(_friends[curve].edPublic) !== -1 ||
-                    !_friends[curve].notifications) {
-                    delete _friends[curve];
-                }
-            });
-            var addCol = UIElements.getUserGrid(Messages.owner_addText, {
-                common: common,
-                large: true,
-                data: _friends
-            }, function () {
-                //console.log(arguments);
-            });
-            $div.append(addCol.div);
-
-            var teamsData = Util.tryParse(JSON.stringify(priv.teams)) || {};
-            Object.keys(teamsData).forEach(function (id) {
-                var t = teamsData[id];
-                t.teamId = id;
-                if (owners.indexOf(t.edPublic) !== -1 || pending_owners.indexOf(t.edPublic) !== -1) {
-                    delete teamsData[id];
-                }
-            });
-            var teamsList = UIElements.getUserGrid(Messages.owner_addTeamText, {
-                common: common,
-                large: true,
-                noFilter: true,
-                data: teamsData
-            }, function () {});
-            $div.append(teamsList.div);
-
-            // When clicking on the add button, we get the selected users.
-            var addButton = h('button.no-margin', Messages.owner_addButton);
-            $(addButton).click(function () {
-                // Check selection
-                var $sel = $div.find('.cp-usergrid-user.cp-selected');
-                var sel = $sel.toArray();
-                if (!sel.length) { return; }
-                var toAdd = sel.map(function (el) {
-                    var curve = $(el).attr('data-curve');
-                    // If the pad is woned by a team, we can transfer ownership to ourselves
-                    if (curve === user.curvePublic && teamOwner) { return priv.edPublic; }
-                    var friend = friends[curve];
-                    if (!friend) { return; }
-                    return friend.edPublic;
-                }).filter(function (x) { return x; });
-                var toAddTeams = sel.map(function (el) {
-                    var team = teamsData[$(el).attr('data-teamid')];
-                    if (!team || !team.edPublic) { return; }
-                    return {
-                        edPublic: team.edPublic,
-                        id: $(el).attr('data-teamid')
-                    };
-                }).filter(function (x) { return x; });
-
-                NThen(function (waitFor) {
-                    var msg = Messages.owner_addConfirm;
-                    UI.confirm(msg, waitFor(function (yes) {
-                        if (!yes) {
-                            waitFor.abort();
-                            return;
-                        }
-                    }));
-                }).nThen(function (waitFor) {
-                    // Add one of our teams as an owner
-                    if (toAddTeams.length) {
-                        // Send the command
-                        sframeChan.query('Q_SET_PAD_METADATA', {
-                            channel: channel,
-                            command: 'ADD_OWNERS',
-                            value: toAddTeams.map(function (obj) { return obj.edPublic; }),
-                            teamId: teamOwner
-                        }, waitFor(function (err, res) {
-                            err = err || (res && res.error);
-                            if (err) {
-                                waitFor.abort();
-                                redrawAll();
-                                var text = err === "INSUFFICIENT_PERMISSIONS" ?
-                                        Messages.fm_forbidden : Messages.error;
-                                return void UI.warn(text);
-                            }
-                            var isTemplate = priv.isTemplate || data.isTemplate;
-                            toAddTeams.forEach(function (obj) {
-                                sframeChan.query('Q_STORE_IN_TEAM', {
-                                    href: data.href || data.rohref,
-                                    password: data.password,
-                                    path: isTemplate ? ['template'] : undefined,
-                                    title: data.title || '',
-                                    teamId: obj.id
-                                }, waitFor(function (err) {
-                                    if (err) { return void console.error(err); }
-                                }));
-                            });
-                        }));
-                    }
-                }).nThen(function (waitFor) {
-                    // Offer ownership to a friend
-                    if (toAdd.length) {
-                        // Send the command
-                        sframeChan.query('Q_SET_PAD_METADATA', {
-                            channel: channel,
-                            command: 'ADD_PENDING_OWNERS',
-                            value: toAdd,
-                            teamId: teamOwner
-                        }, waitFor(function (err, res) {
-                            err = err || (res && res.error);
-                            if (err) {
-                                waitFor.abort();
-                                redrawAll();
-                                var text = err === "INSUFFICIENT_PERMISSIONS" ? Messages.fm_forbidden
-                                                                              : Messages.error;
-                                return void UI.warn(text);
-                            }
-                        }));
-                    }
-                }).nThen(function (waitFor) {
-                    sel.forEach(function (el) {
-                        var curve = $(el).attr('data-curve');
-                        var friend = curve === user.curvePublic ? user : friends[curve];
-                        if (!friend) { return; }
-                        common.mailbox.sendTo("ADD_OWNER", {
-                            channel: channel,
-                            href: data.href,
-                            password: data.password,
-                            title: data.title
-                        }, {
-                            channel: friend.notifications,
-                            curvePublic: friend.curvePublic
-                        }, waitFor());
-                    });
-                }).nThen(function () {
-                    redrawAll();
-                    UI.log(Messages.saved);
-                });
-            });
-            $div.append(h('p', addButton));
-            return $div;
-        };
-
-        redrawAll = function (md) {
-            var todo = function (obj) {
-                if (obj && obj.error) { return; }
-                owners = obj.owners || [];
-                pending_owners = obj.pending_owners || [];
-                $div1.empty();
-                $div2.empty();
-                $div1.append(drawRemove(false)).append(drawRemove(true));
-                $div2.append(drawAdd());
-            };
-
-            if (md) { return void todo(md); }
-            common.getPadMetadata({
-                channel: data.channel
-            }, todo);
-        };
-
-        $div1.append(drawRemove(false)).append(drawRemove(true));
-        $div2.append(drawAdd());
-
-        var handler = sframeChan.on('EV_RT_METADATA', function (md) {
-            if (!$div1.length) {
-                return void handler.stop();
-            }
-            owners = md.owners || [];
-            pending_owners = md.pending_owners || [];
-            redrawAll(md);
-        });
-
-        // Create modal
-        var link = h('div.cp-share-columns', [
-            div1,
-            div2
-            // drawRemove()[0],
-            //drawAdd()[0]
-        ]);
-        var linkButtons = [{
-            className: 'cancel',
-            name: Messages.filePicker_close,
-            onClick: function () {},
-            keys: [27]
-        }];
-        return UI.dialog.customModal(link, {buttons: linkButtons});
-    };
-*/
-/*
-    var getRightsProperties = function (common, data, cb) {
-        var $div = $('<div>');
-        if (!data) { return void cb(void 0, $div); }
-
-        var draw = function () {
-            var $d = $('<div>');
-            var priv = common.getMetadataMgr().getPrivateData();
-            var user = common.getMetadataMgr().getUserData();
-            var edPublic = priv.edPublic;
-            var owned = false;
-            var _owners = {};
-            if (data.owners && data.owners.length) {
-                if (data.owners.indexOf(edPublic) !== -1) {
-                    owned = true;
-                } else {
-                    Object.keys(priv.teams || {}).some(function (id) {
-                        var team = priv.teams[id] || {};
-                        if (team.viewer) { return; }
-                        if (data.owners.indexOf(team.edPublic) === -1) { return; }
-                        owned = Number(id);
-                        return true;
-                    });
-                }
-                var strangers = 0;
-                data.owners.forEach(function (ed) {
-                    // If a friend is an owner, add their name to the list
-                    // otherwise, increment the list of strangers
-
-                    // Our edPublic? print "Yourself"
-                    if (ed === edPublic) {
-                        _owners[ed] = {
-                            selected: true,
-                            name: user.name,
-                            avatar: user.avatar
-                        };
-                        return;
-                    }
-                    // One of our teams? print the team name
-                    if (Object.keys(priv.teams || {}).some(function (id) {
-                        var team = priv.teams[id] || {};
-                        if (team.edPublic !== ed) { return; }
-                        _owners[ed] = {
-                            name: team.name,
-                            avatar: team.avatar
-                        };
-                        return true;
-                    })) {
-                        return;
-                    }
-                    // One of our friends? print the friend name
-                    if (Object.keys(priv.friends || {}).some(function (c) {
-                        var friend = priv.friends[c] || {};
-                        if (friend.edPublic !== ed || c === 'me') { return; }
-                        _owners[friend.edPublic] = {
-                            name: friend.displayName,
-                            avatar: friend.avatar
-                        };
-                        return true;
-                    })) {
-                        return;
-                    }
-                    // Otherwise it's a stranger
-                    strangers++;
-                });
-                if (strangers) {
-                    _owners['stangers'] = {
-                        name: Messages._getKey('properties_unknownUser', [strangers]),
-                    };
-                }
-            }
-            var _ownersGrid = UIElements.getUserGrid(Messages.creation_owners, {
-                common: common,
-                noSelect: true,
-                data: _owners,
-                large: true
-            }, function () {});
-            if (_ownersGrid && Object.keys(_owners).length) {
-                $d.append(_ownersGrid.div);
-            } else {
-                $d.append([
-                    h('label', Messages.creation_owners),
-                ]);
-                $d.append(UI.dialog.selectable(Messages.creation_noOwner, {
-                    id: 'cp-app-prop-owners',
-                }));
-
-            }
-
-            var parsed;
-            if (data.href || data.roHref) {
-                parsed = Hash.parsePadUrl(data.href || data.roHref);
-            }
-            if (owned && parsed.hashData.type === 'pad') {
-                var manageOwners = h('button.no-margin', Messages.owner_openModalButton);
-                $(manageOwners).click(function () {
-                    data.teamId = typeof(owned) !== "boolean" ? owned : undefined;
-                    var modal = createOwnerModal(common, data);
-                    UI.openCustomModal(modal, {
-                        wide: true,
-                    });
-                });
-                $d.append(h('p', manageOwners));
-            }
-
-            if (!data.noExpiration) {
-                var expire = Messages.creation_expireFalse;
-                if (data.expire && typeof (data.expire) === "number") {
-                    expire = new Date(data.expire).toLocaleString();
-                }
-                $('<label>', {'for': 'cp-app-prop-expire'}).text(Messages.creation_expiration)
-                    .appendTo($d);
-                $d.append(UI.dialog.selectable(expire, {
-                    id: 'cp-app-prop-expire',
-                }));
-            }
-
-            if (!data.noPassword) {
-                var hasPassword = data.password;
-                var $pwLabel = $('<label>', {'for': 'cp-app-prop-password'}).text(Messages.creation_passwordValue)
-                                .hide().appendTo($d);
-                var password = UI.passwordInput({
-                    id: 'cp-app-prop-password',
-                    readonly: 'readonly'
-                });
-                var $password = $(password).hide();
-                var $pwInput = $password.find('.cp-password-input');
-                $pwInput.val(data.password).click(function () {
-                    $pwInput[0].select();
-                });
-                $d.append(password);
-
-                if (hasPassword) {
-                    $pwLabel.show();
-                    $password.css('display', 'flex');
-                }
-
-                // In the properties, we should have the edit href if we know it.
-                // We should know it because the pad is stored, but it's better to check...
-                if (!data.noEditPassword && owned && data.href) { // FIXME SHEET fix password change for sheets
-                    var sframeChan = common.getSframeChannel();
-
-                    var isOO = parsed.type === 'sheet';
-                    var isFile = parsed.hashData.type === 'file';
-                    var isSharedFolder = parsed.type === 'drive';
-
-                    var changePwTitle = Messages.properties_changePassword;
-                    var changePwConfirm = isFile ? Messages.properties_confirmChangeFile : Messages.properties_confirmChange;
-                    if (!hasPassword) {
-                        changePwTitle = Messages.properties_addPassword;
-                        changePwConfirm = isFile ? Messages.properties_confirmNewFile : Messages.properties_confirmNew;
-                    }
-                    $('<label>', {'for': 'cp-app-prop-change-password'})
-                        .text(changePwTitle).appendTo($d);
-                    var newPassword = UI.passwordInput({
-                        id: 'cp-app-prop-change-password',
-                        style: 'flex: 1;'
-                    });
-                    var passwordOk = h('button', Messages.properties_changePasswordButton);
-                    var changePass = h('span.cp-password-change-container', [
-                        newPassword,
-                        passwordOk
-                    ]);
-                    var pLocked = false;
-                    $(passwordOk).click(function () {
-                        var newPass = $(newPassword).find('input').val();
-                        if (data.password === newPass ||
-                            (!data.password && !newPass)) {
-                            return void UI.alert(Messages.properties_passwordSame);
-                        }
-                        if (pLocked) { return; }
-                        pLocked = true;
-                        UI.confirm(changePwConfirm, function (yes) {
-                            if (!yes) { pLocked = false; return; }
-                            $(passwordOk).html('').append(h('span.fa.fa-spinner.fa-spin', {style: 'margin-left: 0'}));
-                            var q = isFile ? 'Q_BLOB_PASSWORD_CHANGE' :
-                                        (isOO ? 'Q_OO_PASSWORD_CHANGE' : 'Q_PAD_PASSWORD_CHANGE');
-
-                            // If this is a file password change, register to the upload events:
-                            // * if there is a pending upload, ask if we shoudl interrupt
-                            // * display upload progress
-                            var onPending;
-                            var onProgress;
-                            if (isFile) {
-                                onPending = sframeChan.on('Q_BLOB_PASSWORD_CHANGE_PENDING', function (data, cb) {
-                                    onPending.stop();
-                                    UI.confirm(Messages.upload_uploadPending, function (yes) {
-                                        cb({cancel: yes});
-                                    });
-                                });
-                                onProgress = sframeChan.on('EV_BLOB_PASSWORD_CHANGE_PROGRESS', function (data) {
-                                    if (typeof (data) !== "number") { return; }
-                                    var p = Math.round(data);
-                                    $(passwordOk).text(p + '%');
-                                });
-                            }
-
-                            sframeChan.query(q, {
-                                teamId: typeof(owned) !== "boolean" ? owned : undefined,
-                                href: data.href,
-                                password: newPass
-                            }, function (err, data) {
-                                $(passwordOk).text(Messages.properties_changePasswordButton);
-                                pLocked = false;
-                                if (err || data.error) {
-                                    console.error(err || data.error);
-                                    return void UI.alert(Messages.properties_passwordError);
-                                }
-                                UI.findOKButton().click();
-
-                                $pwLabel.show();
-                                $password.css('display', 'flex');
-                                $pwInput.val(newPass);
-
-                                // If the current document is a file or if we're changing the password from a drive,
-                                // we don't have to reload the page at the end.
-                                // Tell the user the password change was successful and abort
-                                if (isFile || priv.app !== parsed.type) {
-                                    if (onProgress && onProgress.stop) { onProgress.stop(); }
-                                    $(passwordOk).text(Messages.properties_changePasswordButton);
-                                    var alertMsg = data.warning ? Messages.properties_passwordWarningFile
-                                                                : Messages.properties_passwordSuccessFile;
-                                    return void UI.alert(alertMsg, undefined, {force: true});
-                                }
-
-                                // Pad password changed: update the href
-                                // Use hidden hash if needed (we're an owner of this pad so we know it is stored)
-                                var useUnsafe = Util.find(priv, ['settings', 'security', 'unsafeLinks']);
-                                var href = (priv.readOnly && data.roHref) ? data.roHref : data.href;
-                                if (useUnsafe === false) {
-                                    var newParsed = Hash.parsePadUrl(href);
-                                    var newSecret = Hash.getSecrets(newParsed.type, newParsed.hash, newPass);
-                                    var newHash = Hash.getHiddenHashFromKeys(parsed.type, newSecret, {});
-                                    href = Hash.hashToHref(newHash, parsed.type);
-                                }
-
-                                if (data.warning) {
-                                    return void UI.alert(Messages.properties_passwordWarning, function () {
-                                        common.gotoURL(href);
-                                    }, {force: true});
-                                }
-                                return void UI.alert(Messages.properties_passwordSuccess, function () {
-                                    if (!isSharedFolder) {
-                                        common.gotoURL(href);
-                                    }
-                                }, {force: true});
-                            });
-                        });
-                    });
-                    $d.append(changePass);
-                }
-            }
-            return $d;
-        };
-
-        var sframeChan = common.getSframeChannel();
-        var handler = sframeChan.on('EV_RT_METADATA', function (md) {
-            if (!$div.length) {
-                handler.stop();
-                return;
-            }
-            md = JSON.parse(JSON.stringify(md));
-            data.owners = md.owners;
-            data.expire = md.expire;
-            data.pending_owners = md.pending_owners;
-            $div.empty();
-            $div.append(draw());
-        });
-        $div.append(draw());
-
-        cb(void 0, $div);
-    };
-*/
-
-    var getPadProperties = function (common, data, opts, cb) {
-        opts = opts || {};
-        var $d = $('<div>');
-        if (!data) { return void cb(void 0, $d); }
-
-        var priv = common.getMetadataMgr().getPrivateData();
-        var edPublic = priv.edPublic;
-
-        if (data.href) {
-            $('<label>', {'for': 'cp-app-prop-link'}).text(Messages.editShare).appendTo($d);
-            $d.append(UI.dialog.selectable(data.href, {
-                id: 'cp-app-prop-link',
-            }));
-        }
-
-        if (data.roHref && !opts.noReadOnly) {
-            $('<label>', {'for': 'cp-app-prop-rolink'}).text(Messages.viewShare).appendTo($d);
-            $d.append(UI.dialog.selectable(data.roHref, {
-                id: 'cp-app-prop-rolink',
-            }));
-        }
-
-        if (data.tags && Array.isArray(data.tags)) {
-            $d.append(h('div.cp-app-prop', [Messages.fm_prop_tagsList, h('br'), h('span.cp-app-prop-content', data.tags.join(', '))]));
-        }
-
-        if (data.ctime) {
-            $d.append(h('div.cp-app-prop', [Messages.fm_creation,  h('br'), h('span.cp-app-prop-content', new Date(data.ctime).toLocaleString())]));
-        }
-
-        if (data.atime) {
-            $d.append(h('div.cp-app-prop', [Messages.fm_lastAccess,  h('br'), h('span.cp-app-prop-content', new Date(data.atime).toLocaleString())]));
-        }
-
-        var owned = false;
-        if (common.isLoggedIn()) {
-            if (Array.isArray(data.owners)) {
-                if (data.owners.indexOf(edPublic) !== -1) {
-                    owned = true;
-                } else {
-                    Object.keys(priv.teams || {}).some(function (id) {
-                        var team = priv.teams[id] || {};
-                        if (team.viewer) { return; }
-                        if (data.owners.indexOf(team.edPublic) === -1) { return; }
-                        owned = Number(id);
-                        return true;
-                    });
-                }
-            }
-            // check the size of this file...
-            var bytes = 0;
-            var historyBytes;
-            var chan = [data.channel];
-            if (data.rtChannel) { chan.push(data.rtChannel); }
-            if (data.lastVersion) { chan.push(Hash.hrefToHexChannelId(data.lastVersion)); }
-            var channels = chan.filter(function (c) { return c.length === 32; }).map(function (id) {
-                if (id === data.rtChannel && data.lastVersion && data.lastCpHash) {
-                    return {
-                        channel: id,
-                        lastKnownHash: data.lastCpHash
-                    };
-                }
-                return {
-                    channel: id
-                };
-            });
-            var history = common.makeUniversal('history');
-            var trimChannels = [];
-            NThen(function (waitFor) {
-                chan.forEach(function (c) {
-                    common.getFileSize(c, waitFor(function (e, _bytes) {
-                        if (e) {
-                            // there was a problem with the RPC
-                            console.error(e);
-                        }
-                        bytes += _bytes;
-                    }));
-                });
-
-                if (!owned) { return; }
-                history.execCommand('GET_HISTORY_SIZE', {
-                    pad: true,
-                    channels: channels,
-                    teamId: typeof(owned) === "number" && owned
-                }, waitFor(function (obj) {
-                    if (obj && obj.error) { return; }
-                    historyBytes = obj.size;
-                    trimChannels = obj.channels;
-                }));
-            }).nThen(function () {
-                if (bytes === 0) { return void cb(void 0, $d); }
-                var formatted = UIElements.prettySize(bytes);
-
-                if (!owned || !historyBytes || historyBytes > bytes || historyBytes < 0) {
-                    $d.append(h('div.cp-app-prop', [
-                        Messages.upload_size,
-                        h('br'),
-                        h('span.cp-app-prop-content', formatted)
-                    ]));
-                    return void cb(void 0, $d);
-                }
-
-
-                var p = Math.round((historyBytes / bytes) * 100);
-                var historyPrettySize = UIElements.prettySize(historyBytes);
-                var contentsPrettySize = UIElements.prettySize(bytes - historyBytes);
-                var button;
-                var spinner = UI.makeSpinner();
-                var size = h('div.cp-app-prop', [
-                    Messages.upload_size,
-                    h('br'),
-                    h('div.cp-app-prop-size-container', [
-                        h('div.cp-app-prop-size-history', { style: 'width:'+p+'%;' })
-                    ]),
-                    h('div.cp-app-prop-size-legend', [
-                        h('div.cp-app-prop-history-size', [
-                            h('span.cp-app-prop-history-size-color'),
-                            h('span.cp-app-prop-content', Messages._getKey('historyTrim_historySize', [historyPrettySize]))
-                        ]),
-                        h('div.cp-app-prop-contents-size', [
-                            h('span.cp-app-prop-contents-size-color'),
-                            h('span.cp-app-prop-content', Messages._getKey('historyTrim_contentsSize', [contentsPrettySize]))
-                        ]),
-                    ]),
-                    button = h('button.btn.btn-danger-alt.no-margin', Messages.trimHistory_button),
-                    spinner.spinner
-                ]);
-                $d.append(size);
-
-                var $button = $(button);
-                UI.confirmButton(button, {
-                    classes: 'btn-danger'
-                }, function () {
-                    $button.remove();
-                    spinner.spin();
-                    history.execCommand('TRIM_HISTORY', {
-                        pad: true,
-                        channels: trimChannels,
-                        teamId: typeof(owned) === "number" && owned
-                    }, function (obj) {
-                        spinner.hide();
-                        if (obj && obj.error) {
-                            $(size).append(h('div.alert.alert-danger', Messages.trimHistory_error));
-                            return;
-                        }
-                        $(size).remove();
-                        var formatted = UIElements.prettySize(bytes - historyBytes);
-                        $d.append(h('div.cp-app-prop', [
-                            Messages.upload_size,
-                            h('br'),
-                            h('span.cp-app-prop-content', formatted)
-                        ]));
-                        $d.append(h('div.alert.alert-success', Messages.trimHistory_success));
-                    });
-                });
-
-                cb(void 0, $d);
-            });
-        } else {
-            cb(void 0, $d);
-        }
-
-
-    };
-
-    UIElements.getProperties = function (common, opts, cb) {
-        var data;
-        var content;
-        var button = [{
-            className: 'cancel',
-            name: Messages.filePicker_close,
-            onClick: function () {},
-            keys: [13,27]
-        }];
-        NThen(function (waitFor) {
-            getPropertiesData(common, opts, waitFor(function (e, _data) {
-                if (e) {
-                    waitFor.abort();
-                    return void cb(e);
-                }
-                data = _data;
-            }));
-        }).nThen(function (waitFor) {
-            getPadProperties(common, data, opts, waitFor(function (e, c) {
-                if (e) {
-                    waitFor.abort();
-                    return void cb(e);
-                }
-                content = UI.dialog.customModal(c[0], {
-                    buttons: button
-                });
-            }));
-        }).nThen(function () {
-            var tabs = UI.dialog.tabs([{
-                title: Messages.fc_prop,
-                icon: "fa fa-info-circle",
-                content: content
-            }]);
-            var modal = UI.openCustomModal(tabs);
-            cb (void 0, modal);
-        });
-    };
 
     UIElements.getUserGrid = function (label, config, onSelect) {
         var common = config.common;
@@ -2452,7 +1601,7 @@ define([
                 .text(Messages.accessButton))
                 .click(common.prepareFeedback(type))
                 .click(function () {
-                    common.isPadStored(function (err, data) {
+                    common.isPadStored(function (err, data) { // XXX not necessary for access modal?
                         if (!data) {
                             return void UI.alert(Messages.autostore_notAvailable);
                         }
@@ -2476,8 +1625,10 @@ define([
                         if (!data) {
                             return void UI.alert(Messages.autostore_notAvailable);
                         }
-                        UIElements.getProperties(common, {}, function (e) {
-                            if (e) { return void console.error(e); }
+                        require(['/common/inner/properties.js'], function (Properties) {
+                            Properties.getPropertiesModal(common, {}, function (e) {
+                                if (e) { console.error(e); }
+                            });
                         });
                     });
                 });
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index c039a86e3..2619f2419 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -10,6 +10,7 @@ define([
     '/common/common-feedback.js',
 
     '/common/inner/access.js',
+    '/common/inner/properties.js',
 
     '/bower_components/nthen/index.js',
     '/common/hyperscript.js',
@@ -27,6 +28,7 @@ define([
     Constants,
     Feedback,
     Access,
+    Properties,
     nThen,
     h,
     ProxyManager,
@@ -3873,7 +3875,7 @@ define([
                 var ro = folders[el] && folders[el].version >= 2;
                 if (!ro) { opts.noReadOnly = true; }
             }
-            UIElements.getProperties(common, opts, cb);
+            Properties.getPropertiesModal(common, opts, cb);
         };
         APP.getAccess = function (el, cb) {
             if (!manager.isFile(el) && !manager.isSharedFolder(el)) {
diff --git a/www/common/inner/access.js b/www/common/inner/access.js
index 4a0f5c80e..87585e501 100644
--- a/www/common/inner/access.js
+++ b/www/common/inner/access.js
@@ -4,59 +4,22 @@ define([
     '/common/common-hash.js',
     '/common/common-interface.js',
     '/common/common-ui-elements.js',
+    '/common/inner/common-modal.js',
     '/common/hyperscript.js',
     '/customize/messages.js',
     '/bower_components/nthen/index.js',
-], function ($, Util, Hash, UI, UIElements, h,
+], function ($, Util, Hash, UI, UIElements, Modal, h,
              Messages, nThen) {
     var Access = {};
 
-
-
-    var evRedrawAll = Util.mkEvent();
-
-    // Override metadata values from data
-    var override = function (data, obj) {
-        data.owners = obj.owners;
-        data.expire = obj.expire;
-        data.pending_owners = obj.pending_owners;
-        data.mailbox = obj.mailbox;
-        data.restricted = obj.restricted;
-        data.allowed = obj.allowed;
-        data.rejected = obj.rejected;
-    };
-    var loadMetadata = function (common, data, waitFor, redraw) {
-        common.getPadMetadata({
-            channel: data.channel
-        }, waitFor(function (md) {
-            override(data, md);
-            if (redraw) { evRedrawAll.fire(redraw); }
-        }));
-    };
-
-    var isOwned = function (common, data) {
-        data = data || {};
-        var priv = common.getMetadataMgr().getPrivateData();
-        var edPublic = priv.edPublic;
-        var owned = false;
-        if (Array.isArray(data.owners) && data.owners.length) {
-            if (data.owners.indexOf(edPublic) !== -1) {
-                owned = true;
-            } else {
-                Object.keys(priv.teams || {}).some(function (id) {
-                    var team = priv.teams[id] || {};
-                    if (team.viewer) { return; }
-                    if (data.owners.indexOf(team.edPublic) === -1) { return; }
-                    owned = id;
-                    return true;
-                });
-            }
-        }
-        return owned;
-    };
-
-    var getOwnersTab = function (common, data, opts, _cb) {
+    var getOwnersTab = function (Env, data, opts, _cb) {
         var cb = Util.once(Util.mkAsync(_cb));
+        var common = Env.common;
+
+        var parsed = Hash.parsePadUrl(data.href || data.roHref);
+        var owned = Modal.isOwned(Env, data);
+        var disabled = !owned || !parsed.hashData || parsed.hashData.type !== 'pad';
+        if (disabled) { return void cb(); }
 
         var friends = common.getFriends(true);
         var sframeChan = common.getSframeChannel();
@@ -340,10 +303,13 @@ define([
             });
         });
 
+        var called = false;
         redrawAll = function (reload) {
+            if (called) { return; }
+            called = true;
             nThen(function (waitFor) {
                 if (!reload) { return; }
-                loadMetadata(common, data, waitFor, "owner");
+                Modal.loadMetadata(common, data, waitFor, "owner");
             }).nThen(function () {
                 owners = data.owners || [];
                 pending_owners = data.pending_owners || [];
@@ -352,11 +318,12 @@ define([
                 $div1.append(h('p', Messages.owner_text));
                 $div1.append(drawRemove(false)).append(drawRemove(true));
                 $div2.append(drawAdd());
+                called = false;
             });
         };
         redrawAll();
 
-        evRedrawAll.reg(function (type) {
+        Env.evRedrawAll.reg(function (type) {
             if (type === "owner") { return; }
             setTimeout(function () {
                 redrawAll();
@@ -372,8 +339,16 @@ define([
         cb(void 0, link);
     };
 
-    var getAllowTab = function (common, data, opts, _cb) {
+    var getAllowTab = function (Env, data, opts, _cb) {
         var cb = Util.once(Util.mkAsync(_cb));
+        var common = Env.common;
+
+        var parsed = Hash.parsePadUrl(data.href || data.roHref);
+        var owned = Modal.isOwned(Env, data);
+        var disabled = !owned || !parsed.hashData || parsed.hashData.type !== 'pad';
+        var allowDisabled = parsed.type === 'drive';
+        if (disabled || allowDisabled) { return void cb(); }
+
         opts = opts || {};
 
         var friends = common.getFriends(true);
@@ -636,10 +611,13 @@ define([
             });
         });
 
+        var called = false;
         redrawAll = function (reload) {
+            if (called) { return; }
+            called = true;
             nThen(function (waitFor) {
                 if (!reload) { return; }
-                loadMetadata(common, data, waitFor, "allow");
+                Modal.loadMetadata(common, data, waitFor, "allow");
             }).nThen(function () {
                 owners = data.owners || [];
                 restricted = data.restricted || false;
@@ -649,11 +627,12 @@ define([
                 $div1.append(drawRemove());
                 $div2.append(drawAdd());
                 setLock(!restricted);
+                called = false;
             });
         };
         redrawAll();
 
-        evRedrawAll.reg(function (type) {
+        Env.evRedrawAll.reg(function (type) {
             if (type === "allow") { return; }
             setTimeout(function () {
                 redrawAll();
@@ -730,8 +709,9 @@ define([
         }, function () {});
     };
 
-    var getAccessTab = function (common, data, opts, _cb) {
+    var getAccessTab = function (Env, data, opts, _cb) {
         var cb = Util.once(Util.mkAsync(_cb));
+        var common = Env.common;
         opts = opts || {};
 
         var sframeChan = common.getSframeChannel();
@@ -753,7 +733,7 @@ define([
 
             var $d = $('<div>');
 
-            var owned = isOwned(common, data);
+            var owned = Modal.isOwned(Env, data);
 
             if (!opts.noExpiration) {
                 var expire = Messages.creation_expireFalse;
@@ -949,7 +929,7 @@ define([
 
             // Mute access requests
             var edPublic = priv.edPublic;
-            var owned = isOwned(common, data);
+            var owned = Modal.isOwned(Env, data);
             var canMute = data.mailbox && owned === true && (
                     (typeof (data.mailbox) === "string" && data.owners[0] === edPublic) ||
                     data.mailbox[edPublic]);
@@ -1007,7 +987,7 @@ define([
         };
         redraw();
 
-        evRedrawAll.reg(function (ownersOrAllow) {
+        Env.evRedrawAll.reg(function (ownersOrAllow) {
             setTimeout(function () {
                 redraw(ownersOrAllow);
             });
@@ -1016,136 +996,24 @@ define([
         cb(void 0, $div);
     };
 
-    var getAccessData = function (common, opts, _cb) {
-        var cb = Util.once(Util.mkAsync(_cb));
-        opts = opts || {};
-        var data = {};
-        nThen(function (waitFor) {
-            var base = common.getMetadataMgr().getPrivateData().origin;
-            common.getPadAttribute('', waitFor(function (err, val) {
-                if (err || !val) {
-                    waitFor.abort();
-                    return void cb(err || 'EEMPTY');
-                }
-                if (!val.fileType) {
-                    delete val.owners;
-                    delete val.expire;
-                }
-                Util.extend(data, val);
-                if (data.href) { data.href = base + data.href; }
-                if (data.roHref) { data.roHref = base + data.roHref; }
-            }), opts.href);
-
-            // If this is a file, don't try to look for metadata
-            if (opts.channel && opts.channel.length > 34) { return; }
-            common.getPadMetadata({
-                channel: opts.channel // optional, fallback to current pad
-            }, waitFor(function (obj) {
-                if (obj && obj.error) { console.error(obj.error); return; }
-                loadMetadata(common, data, waitFor);
-            }));
-        }).nThen(function () {
-            cb(void 0, data);
-        });
-    };
     Access.getAccessModal = function (common, opts, cb) {
-        var data;
-        var tab1, tab2, tab3;
-        var disabled = false;
-        var allowDisabled = false;
-        var button = [{
-            className: 'cancel',
-            name: Messages.filePicker_close,
-            onClick: function () {},
-            keys: [13,27]
+        cb = cb || function () {};
+        opts = opts || {};
+        opts.wide = true;
+        var tabs = [{
+            getTab: getAccessTab,
+            title: Messages.access_main,
+            icon: "fa fa-unlock-alt",
+        }, {
+            getTab: getAllowTab,
+            title: Messages.access_allow,
+            icon: "fa fa-list",
+        }, {
+            getTab: getOwnersTab,
+            title: Messages.creation_owners,
+            icon: "fa fa-id-badge",
         }];
-        nThen(function (waitFor) {
-            getAccessData(common, opts, waitFor(function (e, _data) {
-                if (e) {
-                    waitFor.abort();
-                    return void cb(e);
-                }
-                data = _data;
-            }));
-        }).nThen(function (waitFor) {
-            var owned = isOwned(common, data);
-            if (typeof(owned) !== "boolean") {
-                data.teamId = Number(owned);
-            }
-            var parsed = Hash.parsePadUrl(data.href || data.roHref);
-            disabled = !owned || !parsed.hashData || parsed.hashData.type !== 'pad';
-            allowDisabled = parsed.type === 'drive';
-
-            getAccessTab(common, data, opts, waitFor(function (e, c) {
-                if (e) {
-                    waitFor.abort();
-                    return void cb(e);
-                }
-                tab1 = UI.dialog.customModal(c[0], {
-                    buttons: button
-                });
-            }));
-
-            if (disabled) { return; }
-
-            if (!allowDisabled) {
-                getAllowTab(common, data, opts, waitFor(function (e, c) {
-                    if (e) {
-                        waitFor.abort();
-                        return void cb(e);
-                    }
-                    tab2 = UI.dialog.customModal(c, {
-                        buttons: button
-                    });
-                }));
-            }
-            getOwnersTab(common, data, opts, waitFor(function (e, c) {
-                if (e) {
-                    waitFor.abort();
-                    return void cb(e);
-                }
-                tab3 = UI.dialog.customModal(c, {
-                    buttons: button
-                });
-            }));
-        }).nThen(function () {
-            var tabs = UI.dialog.tabs([{
-                title: Messages.access_main,
-                icon: "fa fa-unlock-alt",
-                content: tab1
-            }, {
-                title: Messages.access_allow,
-                disabled: disabled || allowDisabled,
-                icon: "fa fa-list",
-                content: tab2
-            }, {
-                title: Messages.creation_owners,
-                disabled: disabled,
-                icon: "fa fa-id-badge",
-                content: tab3
-            }]);
-            var modal = UI.openCustomModal(tabs, {
-                wide: true
-            });
-            cb (void 0, modal);
-
-            var sframeChan = common.getSframeChannel();
-            var handler = sframeChan.on('EV_RT_METADATA', function (md) {
-                if (!$(modal).length) {
-                    return void handler.stop();
-                }
-                override(data, Util.clone(md));
-                evRedrawAll.fire();
-            });
-            var metadataMgr = common.getMetadataMgr();
-            var f = function () {
-                if (!$(modal).length) {
-                    return void metadataMgr.off('change', f);
-                }
-                evRedrawAll.fire();
-            };
-            metadataMgr.onChange(f);
-        });
+        Modal.getModal(common, opts, tabs, cb);
     };
 
     return Access;
diff --git a/www/common/inner/common-modal.js b/www/common/inner/common-modal.js
new file mode 100644
index 000000000..783775b6e
--- /dev/null
+++ b/www/common/inner/common-modal.js
@@ -0,0 +1,156 @@
+define([
+    'jquery',
+    '/common/common-util.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
+    '/customize/messages.js',
+    '/bower_components/nthen/index.js',
+], function ($, Util, UI, UIElements, Messages, nThen) {
+    var Modal = {};
+
+    Modal.override = function (data, obj) {
+        data.owners = obj.owners;
+        data.expire = obj.expire;
+        data.pending_owners = obj.pending_owners;
+        data.mailbox = obj.mailbox;
+        data.restricted = obj.restricted;
+        data.allowed = obj.allowed;
+        data.rejected = obj.rejected;
+    };
+    Modal.loadMetadata = function (Env, data, waitFor, redraw) {
+        Env.common.getPadMetadata({
+            channel: data.channel
+        }, waitFor(function (md) {
+            if (md && md.error) { return void console.error(md.error); }
+            Modal.override(data, md);
+            if (redraw) { Env.evRedrawAll.fire(redraw); } // XXX
+        }));
+    };
+    Modal.getPadData = function (Env, opts, _cb) {
+        var cb = Util.once(Util.mkAsync(_cb));
+        var common = Env.common;
+        opts = opts || {};
+        var data = {};
+        nThen(function (waitFor) {
+            var base = common.getMetadataMgr().getPrivateData().origin;
+            common.getPadAttribute('', waitFor(function (err, val) {
+                if (err || !val) {
+                    waitFor.abort();
+                    return void cb(err || 'EEMPTY');
+                }
+                if (!val.fileType) {
+                    delete val.owners;
+                    delete val.expire;
+                }
+                Util.extend(data, val);
+                if (data.href) { data.href = base + data.href; }
+                if (data.roHref) { data.roHref = base + data.roHref; }
+            }), opts.href);
+
+            // If this is a file, don't try to look for metadata
+            if (opts.channel && opts.channel.length > 34) { return; }
+            if (opts.channel) { data.channel = opts.channel; }
+            Modal.loadMetadata(Env, data, waitFor);
+        }).nThen(function () {
+            cb(void 0, data);
+        });
+    };
+    Modal.isOwned = function (Env, data) {
+        var common = Env.common;
+        data = data || {};
+        var priv = common.getMetadataMgr().getPrivateData();
+        var edPublic = priv.edPublic;
+        var owned = false;
+        if (Array.isArray(data.owners) && data.owners.length) {
+            if (data.owners.indexOf(edPublic) !== -1) {
+                owned = true;
+            } else {
+                Object.keys(priv.teams || {}).some(function (id) {
+                    var team = priv.teams[id] || {};
+                    if (team.viewer) { return; }
+                    if (data.owners.indexOf(team.edPublic) === -1) { return; }
+                    owned = Number(id);
+                    return true;
+                });
+            }
+        }
+        return owned;
+    };
+
+    var blocked = false;
+    Modal.getModal = function (common, opts, _tabs, cb) {
+        if (blocked) { return; }
+        blocked = true;
+        var Env = {
+            common: common,
+            evRedrawAll: Util.mkEvent()
+        };
+        var data;
+        var button = [{
+            className: 'cancel',
+            name: Messages.filePicker_close,
+            onClick: function () {},
+            keys: [13,27]
+        }];
+        var tabs = [];
+        nThen(function (waitFor) {
+            Modal.getPadData(Env, opts, waitFor(function (e, _data) {
+                if (e) {
+                    blocked = false;
+                    waitFor.abort();
+                    return void cb(e);
+                }
+                data = _data;
+            }));
+        }).nThen(function (waitFor) {
+            var owned = Modal.isOwned(Env, data);
+            if (typeof(owned) !== "boolean") {
+                data.teamId = Number(owned);
+            }
+            _tabs.forEach(function (obj, i) {
+                obj.getTab(Env, data, opts, waitFor(function (e, c) {
+                    if (e) {
+                        blocked = false;
+                        waitFor.abort();
+                        return void cb(e);
+                    }
+                    var node = (c instanceof $) ? c[0] : c;
+                    tabs[i] = {
+                        content: c && UI.dialog.customModal(node, {
+                            buttons: obj.buttons || button,
+                            onClose: function () { blocked = false; }
+                        }),
+                        disabled: !c,
+                        title: obj.title,
+                        icon: obj.icon
+                    };
+                }));
+            });
+        }).nThen(function () {
+            var tabsContent = UI.dialog.tabs(tabs);
+            var modal = UI.openCustomModal(tabsContent, {
+                wide: opts.wide
+            });
+            cb (void 0, modal);
+
+            var sframeChan = common.getSframeChannel();
+            var handler = sframeChan.on('EV_RT_METADATA', function (md) {
+                if (!$(modal).length) {
+                    return void handler.stop();
+                }
+                Modal.override(data, Util.clone(md));
+                Env.evRedrawAll.fire();
+            });
+            var metadataMgr = common.getMetadataMgr();
+            var f = function () {
+                if (!$(modal).length) {
+                    return void metadataMgr.off('change', f);
+                }
+                Env.evRedrawAll.fire();
+            };
+            metadataMgr.onChange(f);
+        });
+    };
+
+    return Modal;
+});
diff --git a/www/common/inner/properties.js b/www/common/inner/properties.js
new file mode 100644
index 000000000..58f10e738
--- /dev/null
+++ b/www/common/inner/properties.js
@@ -0,0 +1,181 @@
+define([
+    'jquery',
+    '/common/common-util.js',
+    '/common/common-hash.js',
+    '/common/common-interface.js',
+    '/common/common-ui-elements.js',
+    '/common/inner/common-modal.js',
+    '/common/hyperscript.js',
+    '/customize/messages.js',
+    '/bower_components/nthen/index.js',
+], function ($, Util, Hash, UI, UIElements, Modal, h,
+             Messages, nThen) {
+    var Properties = {};
+
+    var getPadProperties = function (Env, data, opts, _cb) {
+        var cb = Util.once(Util.mkAsync(_cb));
+        var common = Env.common;
+        opts = opts || {};
+        var $d = $('<div>');
+        if (!data) { return void cb(void 0, $d); }
+
+        if (data.href) {
+            $('<label>', {'for': 'cp-app-prop-link'}).text(Messages.editShare).appendTo($d);
+            $d.append(UI.dialog.selectable(data.href, {
+                id: 'cp-app-prop-link',
+            }));
+        }
+
+        if (data.roHref && !opts.noReadOnly) {
+            $('<label>', {'for': 'cp-app-prop-rolink'}).text(Messages.viewShare).appendTo($d);
+            $d.append(UI.dialog.selectable(data.roHref, {
+                id: 'cp-app-prop-rolink',
+            }));
+        }
+
+        if (data.tags && Array.isArray(data.tags)) {
+            $d.append(h('div.cp-app-prop', [Messages.fm_prop_tagsList, h('br'), h('span.cp-app-prop-content', data.tags.join(', '))]));
+        }
+
+        if (data.ctime) {
+            $d.append(h('div.cp-app-prop', [Messages.fm_creation,  h('br'), h('span.cp-app-prop-content', new Date(data.ctime).toLocaleString())]));
+        }
+
+        if (data.atime) {
+            $d.append(h('div.cp-app-prop', [Messages.fm_lastAccess,  h('br'), h('span.cp-app-prop-content', new Date(data.atime).toLocaleString())]));
+        }
+
+        if (!common.isLoggedIn()) { return void cb(void 0, $d); }
+
+        // File and history size...
+        var owned = Modal.isOwned(Env, data);
+
+        // check the size of this file, including additional channels
+        var bytes = 0;
+        var historyBytes;
+        var chan = [data.channel];
+        if (data.rtChannel) { chan.push(data.rtChannel); }
+        if (data.lastVersion) { chan.push(Hash.hrefToHexChannelId(data.lastVersion)); }
+
+        // Get the channels with history (no blobs)
+        var channels = chan.filter(function (c) { return c.length === 32; }).map(function (id) {
+            if (id === data.rtChannel && data.lastVersion && data.lastCpHash) {
+                return {
+                    channel: id,
+                    lastKnownHash: data.lastCpHash
+                };
+            }
+            return {
+                channel: id
+            };
+        });
+
+        var history = common.makeUniversal('history');
+        var trimChannels = [];
+        nThen(function (waitFor) {
+            // Get total size
+            chan.forEach(function (c) {
+                common.getFileSize(c, waitFor(function (e, _bytes) {
+                    if (e) {
+                        // there was a problem with the RPC
+                        console.error(e);
+                    }
+                    bytes += _bytes;
+                }));
+            });
+
+            if (!owned) { return; }
+            // Get history size
+            history.execCommand('GET_HISTORY_SIZE', {
+                pad: true,
+                channels: channels,
+                teamId: typeof(owned) === "number" && owned
+            }, waitFor(function (obj) {
+                if (obj && obj.error) { return; }
+                historyBytes = obj.size;
+                trimChannels = obj.channels;
+            }));
+        }).nThen(function () {
+            if (bytes === 0) { return void cb(void 0, $d); }
+            var formatted = UIElements.prettySize(bytes);
+
+            if (!owned || !historyBytes || historyBytes > bytes || historyBytes < 0) {
+                $d.append(h('div.cp-app-prop', [
+                    Messages.upload_size,
+                    h('br'),
+                    h('span.cp-app-prop-content', formatted)
+                ]));
+                return void cb(void 0, $d);
+            }
+
+
+            var p = Math.round((historyBytes / bytes) * 100);
+            var historyPrettySize = UIElements.prettySize(historyBytes);
+            var contentsPrettySize = UIElements.prettySize(bytes - historyBytes);
+            var button;
+            var spinner = UI.makeSpinner();
+            var size = h('div.cp-app-prop', [
+                Messages.upload_size,
+                h('br'),
+                h('div.cp-app-prop-size-container', [
+                    h('div.cp-app-prop-size-history', { style: 'width:'+p+'%;' })
+                ]),
+                h('div.cp-app-prop-size-legend', [
+                    h('div.cp-app-prop-history-size', [
+                        h('span.cp-app-prop-history-size-color'),
+                        h('span.cp-app-prop-content', Messages._getKey('historyTrim_historySize', [historyPrettySize]))
+                    ]),
+                    h('div.cp-app-prop-contents-size', [
+                        h('span.cp-app-prop-contents-size-color'),
+                        h('span.cp-app-prop-content', Messages._getKey('historyTrim_contentsSize', [contentsPrettySize]))
+                    ]),
+                ]),
+                button = h('button.btn.btn-danger-alt.no-margin', Messages.trimHistory_button),
+                spinner.spinner
+            ]);
+            $d.append(size);
+
+            var $button = $(button);
+            UI.confirmButton(button, {
+                classes: 'btn-danger'
+            }, function () {
+                $button.remove();
+                spinner.spin();
+                history.execCommand('TRIM_HISTORY', {
+                    pad: true,
+                    channels: trimChannels,
+                    teamId: typeof(owned) === "number" && owned
+                }, function (obj) {
+                    spinner.hide();
+                    if (obj && obj.error) {
+                        $(size).append(h('div.alert.alert-danger', Messages.trimHistory_error));
+                        return;
+                    }
+                    $(size).remove();
+                    var formatted = UIElements.prettySize(bytes - historyBytes);
+                    $d.append(h('div.cp-app-prop', [
+                        Messages.upload_size,
+                        h('br'),
+                        h('span.cp-app-prop-content', formatted)
+                    ]));
+                    $d.append(h('div.alert.alert-success', Messages.trimHistory_success));
+                });
+            });
+
+            cb(void 0, $d);
+        });
+    };
+
+    Properties.getPropertiesModal = function (common, opts, cb) {
+        cb = cb || function () {};
+        opts = opts || {};
+        var tabs = [{
+            getTab: getPadProperties,
+            title: Messages.fc_prop,
+            icon: "fa fa-info-circle",
+        }];
+        Modal.getModal(common, opts, tabs, cb);
+    };
+
+    return Properties;
+});