From c9b581b9745c1ad195b8478880deb937d55a42bc Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 29 Sep 2020 18:04:04 +0200
Subject: [PATCH 01/14] Fix an issue where the history could only be opened
 once in the drive

---
 www/common/common-ui-elements.js    | 19 ++++++-------------
 www/common/sframe-common-history.js |  7 +------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 288770e69..a9f80ae71 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -758,23 +758,16 @@ define([
                     button = $('<span>');
                     break;
                 }
-                var active = $(".cp-toolbar-history:visible").length !== 0;
                 button = $('<button>', {
-                    title: active ? Messages.history_closeTitle : Messages.historyButton,
+                    title: Messages.historyButton,
                     'class': "fa fa-history cp-toolbar-icon-history",
                 }).append($('<span>', {'class': 'cp-toolbar-drawer-element'}).text(Messages.historyText));
-                button.toggleClass("active", active);
                 if (data.histConfig) {
-                    if (active) {
-                        button.click(function () { $(".cp-toolbar-history-close").trigger("click"); });
-                    }
-                    else {
-                        button
-                            .click(common.prepareFeedback(type))
-                            .on('click', function () {
-                            common.getHistory(data.histConfig);
-                        });
-                    }
+                    button
+                        .click(common.prepareFeedback(type))
+                        .on('click', function () {
+                        common.getHistory(data.histConfig);
+                    });
                 }
                 break;
             case 'mediatag':
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index c956d2297..1545e5832 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -281,7 +281,7 @@ define([
             return states;
         };
 
-        var $loadMore, $version, $time, get;
+        var $loadMore, $time, get;
 
         // Get the content of the selected version, and change the version number
         var loading = false;
@@ -295,7 +295,6 @@ define([
                 if (err === 'EFULL') {
                     $loadMore.off('click').hide();
                     get(c);
-                    $version.show();
                     return;
                 }
                 loading = false;
@@ -306,7 +305,6 @@ define([
                 get(c);
                 if (isFull) {
                     $loadMore.off('click').hide();
-                    $version.show();
                 }
                 if (cb) { cb(); }
             });
@@ -357,7 +355,6 @@ define([
             // Display the version when the full history is loaded
             // Note: the first version is always empty and probably can't be displayed, so
             // we can consider we have only states.length - 1 versions
-            $version.text(idx + ' / ' + (states.length-1));
             var time = states[idx].time;
             if (time) {
                 $time.text(new Date(time).toLocaleString());
@@ -460,7 +457,6 @@ define([
             var pos = h('span.cp-history-timeline-pos.fa.fa-caret-down');
             var time = h('div.cp-history-timeline-time');
             $time = $(time);
-            $version = $(); // XXX
             var timeline = h('div.cp-toolbar-history-timeline', [
                 h('div.cp-history-timeline-line', [
                     h('span.cp-history-timeline-legend', [
@@ -674,7 +670,6 @@ define([
             display();
             if (isFull) {
                 $loadMore.off('click').hide();
-                $version.show();
             }
         });
     };

From d9570c0546360e028b8b5bc61cf88da697a42b78 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 29 Sep 2020 18:07:39 +0200
Subject: [PATCH 02/14] Add new translation keys for the drive

---
 www/common/sframe-common-history.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 1545e5832..82a82f83f 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -486,6 +486,9 @@ define([
             Messages.history_restore = "Restore";// XXX
             Messages.history_close = "Close";// XXX
             Messages.history_shareTitle = "Share a link to this version"; // XXX
+            Messages.history_restoreDriveTitle = "Restore the selected version of the DRIVE"; // XXX
+            Messages.history_restoreDrivePrompt = "Are you sure you want to replace the current version of the DRIVE by the displayed one?"; // XXX
+            Messages.history_restoreDriveDone = "DRIVE restored";
             var snapshot = h('button', {
                 title: Messages.snapshots_new,
             }, [
@@ -495,8 +498,10 @@ define([
                 h('i.fa.fa-shhare-alt'),
                 h('span', Messages.shareButton)
             ]);
+            var restoreTitle = config.drive ? Messages.history_restoreDriveTitle
+                                   : Messages.history_restoreTitle;
             var restore = h('button', {
-                title: Messages.history_restoreTitle,
+                title: restoreTitle,
             }, [
                 h('i.fa.fa-check'),
                 h('span', Messages.history_restore)
@@ -642,12 +647,16 @@ define([
                 closeUI();
             });
             $(restore).click(function () {
-                UI.confirm(Messages.history_restorePrompt, function (yes) {
+                var restorePrompt = config.drive ? Messages.history_restoreDrivePrompt
+                                                 : Messages.history_restorePrompt;
+                UI.confirm(restorePrompt, function (yes) {
                     if (!yes) { return; }
                     var done = onRevert();
                     if (done) {
                         closeUI();
-                        UI.log(Messages.history_restoreDone);
+                        var restoreDone = config.drive ? Messages.history_restoreDriveDone
+                                                       : Messages.history_restoreDone;
+                        UI.log(restoreDone);
                     }
                 });
             });

From 2003725304654e43e33ce1cddd565ed83ffa4e0e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 29 Sep 2020 18:49:04 +0200
Subject: [PATCH 03/14] Fix UI issues with buttons

---
 customize.dist/src/less2/include/alertify.less | 2 +-
 customize.dist/src/less2/include/forms.less    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index db951613c..11820db00 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -167,7 +167,7 @@
                 margin-bottom: @alertify_padding-base;
                 margin: 0;
                 overflow: auto;
-                :last-child {
+                &:last-child {
                     margin-bottom: 0;
                 }
             }
diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index db3ad3fbd..423831204 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -98,6 +98,7 @@
         text-decoration: none;
         cursor: pointer;
         border-radius: 0;
+        transition: none;
 
         .fa, .cptools {
             margin-right: 0.2em;

From 959d0169370207e8c30e70c831d408495ce22cd6 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 11:31:12 +0200
Subject: [PATCH 04/14] Snapshot modal UI

---
 customize.dist/src/less2/include/forms.less   |  9 +++
 .../src/less2/include/modals-ui-elements.less | 60 +++++++++++++++
 www/common/common-interface.js                |  1 +
 www/common/common-ui-elements.js              | 77 +++++++++++++------
 www/common/sframe-app-framework.js            |  8 ++
 www/common/sframe-common-history.js           |  2 +-
 6 files changed, 134 insertions(+), 23 deletions(-)

diff --git a/customize.dist/src/less2/include/forms.less b/customize.dist/src/less2/include/forms.less
index 423831204..0acbd49b4 100644
--- a/customize.dist/src/less2/include/forms.less
+++ b/customize.dist/src/less2/include/forms.less
@@ -161,6 +161,15 @@
             }
         }
 
+        &.btn-light {
+            border-color: @cryptpad_text_col;
+            color: @cryptpad_text_col;
+            background-color: transparent;
+            &:hover, &:hover, &:focus {
+                background-color: fade(@cryptpad_text_col, 25%);
+            }
+        }
+
         &.cancel, &.btn-cancel {
             border-color: @colortheme_alertify-cancel-border;
             color: @colortheme_alertify-cancel-border;
diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index e8282f6e8..ac56b8f15 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -112,6 +112,66 @@
         margin-left: 10px;
     }
 
+    .cp-snapshots-modal {
+        h6 {
+            margin-bottom: 0;
+        }
+        & > input:last-child {
+            margin-bottom: 0 !important;
+        }
+    }
+    .cp-snapshots-container {
+        @snapshot_spacing: 10px;
+        display: flex;
+        flex-flow: column;
+        color: @cryptpad_text_col;
+        margin-bottom: @snapshot_spacing;
+        max-height: 245px;
+        overflow: auto;
+        .cp-snapshot-element {
+            display: flex;
+            align-items: center;
+            padding: 5px 0;
+            & > i {
+                margin-left: @snapshot_spacing;
+                text-align: center;
+            }
+            .cp-snapshot-title {
+                margin-left: @snapshot_spacing;
+                display: flex;
+                flex-flow: column;
+                flex: 1;
+                min-width: 0;
+                span {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .cp-snapshot-time {
+                    font-size: 12px;
+                }
+            }
+            .cp-snapshot-buttons {
+                margin-left: @snapshot_spacing;
+                display: none;
+                align-items: flex-start;
+                margin-bottom: -3px;
+                .cp-button-confirm {
+                    margin-right: @snapshot_spacing;
+                }
+                button {
+                    margin-right: @snapshot_spacing;
+                }
+            }
+            &:hover {
+                .cp-snapshot-buttons {
+                    display: flex;
+                }
+                background-color: #DDD;
+            }
+        }
+    }
+
     // mediatag preview
     #cp-mediatag-preview-modal {
         .cp-modal {
diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index 37ef044ff..be1055d2a 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -707,6 +707,7 @@ define([
         var i = 1;
 
         var todo = function () {
+            if (i = 10) { return; }
             var p = 100 * ((TIMEOUT - (i * INTERVAL)) / TIMEOUT);
             if (i++ * INTERVAL >= TIMEOUT) {
                 done(false);
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index a9f80ae71..0065cb81e 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -881,7 +881,7 @@ define([
                     if (typeof(data.load) !== "function" || typeof(data.make) !== "function") {
                         return;
                     }
-                    UIElements.openSnapshotsModal(common, data.load, data.make);
+                    UIElements.openSnapshotsModal(common, data.load, data.make, data.remove);
                 });
                 break;
             default:
@@ -3312,12 +3312,14 @@ define([
     Messages.snapshots_button = "Snapshots";
     Messages.snapshots_new = "New snapshot"; // XXX
     Messages.snapshots_placeholder = "Snapshot title"; // XXX
-    Messages.snapshots_open = "Open";
-    UIElements.openSnapshotsModal = function (common, load, make) {
+    Messages.snapshots_open = "View";
+    Messages.snapshots_delete = "Delete";
+    UIElements.openSnapshotsModal = function (common, load, make, remove) {
         var metadataMgr = common.getMetadataMgr();
         var md = metadataMgr.getMetadata();
         var snapshots = md.snapshots || {};
         var modal;
+        var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
         var list = Object.keys(snapshots).sort(function (h1, h2) {
             var s1 = snapshots[h1];
@@ -3325,15 +3327,43 @@ define([
             return s1.time - s2.time;
         }).map(function (hash) {
             var s = snapshots[hash];
-            var button = h('button.btn.btn-secondary', Messages.snapshots_open);
-            $(button).click(function () {
+
+            var openButton = h('button.cp-snapshot-view.btn.btn-light', [
+                h('i.fa.fa-eye'),
+                h('span', Messages.snapshots_open)
+            ]);
+            $(openButton).click(function () {
                 load(hash, s);
-                if (modal && modal.closeModal) { modal.closeModal(); }
+                if (modal && modal.closeModal) {
+                    modal.closeModal();
+                    UIElements.openSnapshotsModal(common, load, make, remove);
+                }
+            });
+
+            var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
+                h('i.fa.fa-trash'),
+                h('span', Messages.snapshots_delete)
+            ]);
+            UI.confirmButton(deleteButton, {
+                classes: 'btn-danger'
+            }, function () {
+                remove(hash, s);
+                if (modal && modal.closeModal) {
+                    modal.closeModal();
+                    UIElements.openSnapshotsModal(common, load, make, remove);
+                }
             });
+
             return h('span.cp-snapshot-element', [
                 h('i.fa.fa-camera'),
-                h('span.cp-snapshot-title', s.title),
-                button
+                h('span.cp-snapshot-title', [
+                    h('span', s.title),
+                    h('span.cp-snapshot-time', new Date(s.time).toLocaleString())
+                ]),
+                h('span.cp-snapshot-buttons', [
+                    readOnly ? undefined : deleteButton,
+                    openButton,
+                ])
             ]);
         });
 
@@ -3341,11 +3371,11 @@ define([
             placeholder: Messages.snapshots_placeholder
         });
         var $input = $(input);
-        var content = h('div', [
-            h('h4', Messages.snapshots_button),
+        var content = h('div.cp-snapshots-modal', [
+            h('h5', Messages.snapshots_button),
             h('div.cp-snapshots-container', list),
-            h('h5', Messages.snapshots_new),
-            input
+            readOnly ? undefined : h('h6', Messages.snapshots_new),
+            readOnly ? undefined : input
         ]);
 
         var buttons = [{
@@ -3353,17 +3383,20 @@ define([
             name: Messages.filePicker_close,
             onClick: function () {},
             keys: [27],
-        }, {
-            className: 'primary',
-            icon: 'fa-camera',
-            name: Messages.snapshots_new,
-            onClick: function () {
-                var val = $input.val();
-                if (!val) { return true; }
-                make(val);
-            },
-            keys: [],
         }];
+        if (!readOnly) {
+            buttons.push({
+                className: 'primary',
+                iconClass: '.fa.fa-camera',
+                name: Messages.snapshots_new,
+                onClick: function () {
+                    var val = $input.val();
+                    if (!val) { return true; }
+                    make(val);
+                },
+                keys: [],
+            });
+        }
 
         modal = UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
         setTimeout(function () {
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 92e42616c..cddbd30fc 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -130,6 +130,13 @@ define([
             return;
         };
 
+        var deleteSnapshot = function (hash) {
+            var md = Util.clone(cpNfInner.metadataMgr.getMetadata());
+            var snapshots = md.snapshots = md.snapshots || {};
+            delete snapshots[hash];
+            cpNfInner.metadataMgr.updateMetadata(md);
+            onLocal();
+        };
         var makeSnapshot = function (title) {
             var sframeChan = common.getSframeChannel();
             sframeChan.query("Q_GET_LAST_HASH", null, function (err, obj) {
@@ -813,6 +820,7 @@ define([
             toolbar.$drawer.append($hist);
 
             var $snapshot = common.createButton('snapshots', true, {
+                remove: deleteSnapshot,
                 make: makeSnapshot,
                 load: loadSnapshot
             });
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 82a82f83f..45411726f 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -615,7 +615,7 @@ define([
                     keys: [27],
                 }, {
                     className: 'primary',
-                    icon: 'fa-camera',
+                    iconClass: '.fa.fa-camera',
                     name: Messages.snapshots_new,
                     onClick: function () {
                         var val = $input.val();

From 4ca84c57a12ee4b393a1f282000cb351c4035467 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 11:32:01 +0200
Subject: [PATCH 05/14] lint compliance

---
 www/common/common-interface.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/www/common/common-interface.js b/www/common/common-interface.js
index be1055d2a..37ef044ff 100644
--- a/www/common/common-interface.js
+++ b/www/common/common-interface.js
@@ -707,7 +707,6 @@ define([
         var i = 1;
 
         var todo = function () {
-            if (i = 10) { return; }
             var p = 100 * ((TIMEOUT - (i * INTERVAL)) / TIMEOUT);
             if (i++ * INTERVAL >= TIMEOUT) {
                 done(false);

From 76a42ea8b1fcb86ac7a3f63cf5c18c285814dd8e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 12:53:21 +0200
Subject: [PATCH 06/14] Improve snapshot modal to support mobile devices

---
 customize.dist/src/less2/include/modals-ui-elements.less | 2 +-
 www/common/common-ui-elements.js                         | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index ac56b8f15..b49fb8999 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -163,7 +163,7 @@
                     margin-right: @snapshot_spacing;
                 }
             }
-            &:hover {
+            &:hover, &:focus, &:focus-within {
                 .cp-snapshot-buttons {
                     display: flex;
                 }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 0065cb81e..edb0737de 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -3354,7 +3354,7 @@ define([
                 }
             });
 
-            return h('span.cp-snapshot-element', [
+            return h('span.cp-snapshot-element', {tabindex:0}, [
                 h('i.fa.fa-camera'),
                 h('span.cp-snapshot-title', [
                     h('span', s.title),
@@ -3400,6 +3400,10 @@ define([
 
         modal = UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
         setTimeout(function () {
+            if (list.length) {
+                $(list[0]).focus();
+                return;
+            }
             $input.focus();
         });
     };

From a936c6479486f9402149eadfc83363aba7c059a5 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 12:56:27 +0200
Subject: [PATCH 07/14] Fix modal not closing when opening snapshot

---
 www/common/common-ui-elements.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index edb0737de..c2c902b89 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -3336,7 +3336,6 @@ define([
                 load(hash, s);
                 if (modal && modal.closeModal) {
                     modal.closeModal();
-                    UIElements.openSnapshotsModal(common, load, make, remove);
                 }
             });
 
@@ -3393,6 +3392,9 @@ define([
                     var val = $input.val();
                     if (!val) { return true; }
                     make(val);
+                    setTimeout(function () {
+                        UIElements.openSnapshotsModal(common, load, make, remove);
+                    });
                 },
                 keys: [],
             });

From bac3fb0a2586d9e5bad7f096bdf8440822806e9b Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 13:29:14 +0200
Subject: [PATCH 08/14] Refresh snapshot modal after creation or deletion

---
 .../src/less2/include/modals-ui-elements.less |   1 +
 .../src/less2/include/toolbar-history.less    |   2 +-
 www/common/common-ui-elements.js              | 122 +++++++++---------
 www/common/sframe-app-framework.js            |   7 +-
 4 files changed, 70 insertions(+), 62 deletions(-)

diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index b49fb8999..9e1f6ea24 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -128,6 +128,7 @@
         margin-bottom: @snapshot_spacing;
         max-height: 245px;
         overflow: auto;
+        min-height: 100px;
         .cp-snapshot-element {
             display: flex;
             align-items: center;
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 68e5450e3..fa9decc01 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -85,7 +85,7 @@
                 border-left: none;
                 width: 2px !important;
                 background: @pos-color;
-                &:before {
+                &:before {
                     left: -6px;
                 }
             }
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c2c902b89..7d1015482 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -3315,56 +3315,11 @@ define([
     Messages.snapshots_open = "View";
     Messages.snapshots_delete = "Delete";
     UIElements.openSnapshotsModal = function (common, load, make, remove) {
-        var metadataMgr = common.getMetadataMgr();
-        var md = metadataMgr.getMetadata();
-        var snapshots = md.snapshots || {};
         var modal;
         var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
-        var list = Object.keys(snapshots).sort(function (h1, h2) {
-            var s1 = snapshots[h1];
-            var s2 = snapshots[h2];
-            return s1.time - s2.time;
-        }).map(function (hash) {
-            var s = snapshots[hash];
-
-            var openButton = h('button.cp-snapshot-view.btn.btn-light', [
-                h('i.fa.fa-eye'),
-                h('span', Messages.snapshots_open)
-            ]);
-            $(openButton).click(function () {
-                load(hash, s);
-                if (modal && modal.closeModal) {
-                    modal.closeModal();
-                }
-            });
-
-            var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
-                h('i.fa.fa-trash'),
-                h('span', Messages.snapshots_delete)
-            ]);
-            UI.confirmButton(deleteButton, {
-                classes: 'btn-danger'
-            }, function () {
-                remove(hash, s);
-                if (modal && modal.closeModal) {
-                    modal.closeModal();
-                    UIElements.openSnapshotsModal(common, load, make, remove);
-                }
-            });
-
-            return h('span.cp-snapshot-element', {tabindex:0}, [
-                h('i.fa.fa-camera'),
-                h('span.cp-snapshot-title', [
-                    h('span', s.title),
-                    h('span.cp-snapshot-time', new Date(s.time).toLocaleString())
-                ]),
-                h('span.cp-snapshot-buttons', [
-                    readOnly ? undefined : deleteButton,
-                    openButton,
-                ])
-            ]);
-        });
+        var container = h('div.cp-snapshots-container', {tabindex:0});
+        var $container = $(container);
 
         var input = h('input', {
             placeholder: Messages.snapshots_placeholder
@@ -3372,11 +3327,66 @@ define([
         var $input = $(input);
         var content = h('div.cp-snapshots-modal', [
             h('h5', Messages.snapshots_button),
-            h('div.cp-snapshots-container', list),
+            container,
             readOnly ? undefined : h('h6', Messages.snapshots_new),
             readOnly ? undefined : input
         ]);
 
+        var refresh = function () {
+            var metadataMgr = common.getMetadataMgr();
+            var md = metadataMgr.getMetadata();
+            var snapshots = md.snapshots || {};
+
+            var list = Object.keys(snapshots).sort(function (h1, h2) {
+                var s1 = snapshots[h1];
+                var s2 = snapshots[h2];
+                return s1.time - s2.time;
+            }).map(function (hash) {
+                var s = snapshots[hash];
+
+                var openButton = h('button.cp-snapshot-view.btn.btn-light', [
+                    h('i.fa.fa-eye'),
+                    h('span', Messages.snapshots_open)
+                ]);
+                $(openButton).click(function () {
+                    load(hash, s);
+                    if (modal && modal.closeModal) {
+                        modal.closeModal();
+                    }
+                });
+
+                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
+                    h('i.fa.fa-trash'),
+                    h('span', Messages.snapshots_delete)
+                ]);
+                UI.confirmButton(deleteButton, {
+                    classes: 'btn-danger'
+                }, function () {
+                    remove(hash, s);
+                    refresh();
+                });
+
+                return h('span.cp-snapshot-element', {tabindex:0}, [
+                    h('i.fa.fa-camera'),
+                    h('span.cp-snapshot-title', [
+                        h('span', s.title),
+                        h('span.cp-snapshot-time', new Date(s.time).toLocaleString())
+                    ]),
+                    h('span.cp-snapshot-buttons', [
+                        readOnly ? undefined : deleteButton,
+                        openButton,
+                    ])
+                ]);
+            });
+
+            $container.html('').append(list);
+            setTimeout(function () {
+                if (list.length) { return void $container.focus(); }
+                $input.focus();
+            });
+        };
+        refresh();
+
         var buttons = [{
             className: 'cancel',
             name: Messages.filePicker_close,
@@ -3391,23 +3401,19 @@ define([
                 onClick: function () {
                     var val = $input.val();
                     if (!val) { return true; }
-                    make(val);
-                    setTimeout(function () {
-                        UIElements.openSnapshotsModal(common, load, make, remove);
+                    $container.html('');
+                    UI.spinner($container).get().show();
+                    make(val, function (err) {
+                        if (err) { return; }
+                        refresh();
                     });
+                    return true;
                 },
                 keys: [],
             });
         }
 
         modal = UI.openCustomModal(UI.dialog.customModal(content, {buttons: buttons }));
-        setTimeout(function () {
-            if (list.length) {
-                $(list[0]).focus();
-                return;
-            }
-            $input.focus();
-        });
     };
 
     return UIElements;
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index cddbd30fc..912f635f9 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -137,21 +137,22 @@ define([
             cpNfInner.metadataMgr.updateMetadata(md);
             onLocal();
         };
-        var makeSnapshot = function (title) {
+        var makeSnapshot = function (title, cb) {
             var sframeChan = common.getSframeChannel();
             sframeChan.query("Q_GET_LAST_HASH", null, function (err, obj) {
                 if (err || (obj && obj.error)) { return void UI.warn(Messages.error); }
                 var hash = obj.hash;
-                if (!hash) { return void UI.warn(Messages.error); }
+                if (!hash) { cb('NO_HASH'); return void UI.warn(Messages.error); }
                 var md = Util.clone(cpNfInner.metadataMgr.getMetadata());
                 var snapshots = md.snapshots = md.snapshots || {};
-                if (snapshots[hash]) { return void UI.warn(Messages.error); } // XXX EEXISTS
+                if (snapshots[hash]) { cb('EEXISTS'); return void UI.warn(Messages.error); } // XXX
                 snapshots[hash] = {
                     title: title,
                     time: +new Date()
                 };
                 cpNfInner.metadataMgr.updateMetadata(md);
                 onLocal();
+                cpNfInner.chainpad.onSettle(cb);
             });
         };
 

From 07a6de4dab11278f2b8db1c3b677fde144bea388 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 15:17:24 +0200
Subject: [PATCH 09/14] Preserve realtime userlist when restoring history

---
 www/common/sframe-common-history.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index 45411726f..f2f254336 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -247,8 +247,10 @@ define([
                 var metadataMgr = common.getMetadataMgr();
                 var lastMd = config.getLastMetadata();
                 var _snapshots = lastMd.snapshots;
+                var _users = lastMd.users;
                 var md = Util.clone(metadataMgr.getMetadata());
                 md.snapshots = _snapshots;
+                md.users = _users;
                 metadataMgr.updateMetadata(md);
             }
 
@@ -323,7 +325,7 @@ define([
 
             var idx = getIndex(i);
             if (semantic && i !== c) {
-                // If semantic is truc, jump to the next patch from a different netflux ID
+                // If semantic is true, jump to the next patch from a different netflux ID
                 var author = getAuthor(idx, semantic);
                 var forward = i > c;
                 for (var j = idx; (j > 0 && j < states.length ); (forward ? j++ : j--)) {

From e65dcdc7667b025b7514ac1a55f908cb786073d1 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 16:02:30 +0200
Subject: [PATCH 10/14] Snapshot toolbar UI

---
 .../src/less2/include/modals-ui-elements.less |  5 ++---
 customize.dist/src/less2/include/toolbar.less | 19 +++++++++++++++++--
 www/common/common-ui-elements.js              | 15 ++++++++++-----
 www/common/inner/snapshots.js                 | 17 ++++++++++++++---
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index 9e1f6ea24..200f39b29 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -113,9 +113,6 @@
     }
 
     .cp-snapshots-modal {
-        h6 {
-            margin-bottom: 0;
-        }
         & > input:last-child {
             margin-bottom: 0 !important;
         }
@@ -129,10 +126,12 @@
         max-height: 245px;
         overflow: auto;
         min-height: 100px;
+        outline: none;
         .cp-snapshot-element {
             display: flex;
             align-items: center;
             padding: 5px 0;
+            outline: none;
             & > i {
                 margin-left: @snapshot_spacing;
                 text-align: center;
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 863e828a7..ca75dd0d9 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -910,9 +910,24 @@
         display: none;
         text-align: center;
         width: 100%;
-        padding: 10px 0;
+        padding: 5px 0;
         align-items: center;
-        justify-content: center;
+        justify-content: space-between;
+        .cp-toolbar-snapshots-info {
+            i {
+                width: 30px;
+            }
+        }
+        .cp-toolbar-snapshots-actions {
+            button {
+                margin: 0 5px;
+                border: 1px solid @cryptpad_text_col;
+                text-transform: uppercase;
+                i:not(:last-child) {
+                    margin-right: 5px;
+                }
+            }
+        }
     }
     .cp-toolbar-bottom {
         background-color: @toolbar-bg-color-light;
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 7d1015482..3ae4ffedd 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -3318,17 +3318,18 @@ define([
         var modal;
         var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
 
-        var container = h('div.cp-snapshots-container', {tabindex:0});
+        var container = h('div.cp-snapshots-container', {tabindex:1});
         var $container = $(container);
 
         var input = h('input', {
+            tabindex: 1,
             placeholder: Messages.snapshots_placeholder
         });
         var $input = $(input);
         var content = h('div.cp-snapshots-modal', [
             h('h5', Messages.snapshots_button),
             container,
-            readOnly ? undefined : h('h6', Messages.snapshots_new),
+            readOnly ? undefined : h('label', Messages.snapshots_new),
             readOnly ? undefined : input
         ]);
 
@@ -3344,7 +3345,9 @@ define([
             }).map(function (hash) {
                 var s = snapshots[hash];
 
-                var openButton = h('button.cp-snapshot-view.btn.btn-light', [
+                var openButton = h('button.cp-snapshot-view.btn.btn-light', {
+                    tabindex: 1,
+                }, [
                     h('i.fa.fa-eye'),
                     h('span', Messages.snapshots_open)
                 ]);
@@ -3355,7 +3358,9 @@ define([
                     }
                 });
 
-                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', [
+                var deleteButton = h('button.cp-snapshot-delete.btn.btn-light', {
+                    tabindex: 1,
+                }, [
                     h('i.fa.fa-trash'),
                     h('span', Messages.snapshots_delete)
                 ]);
@@ -3366,7 +3371,7 @@ define([
                     refresh();
                 });
 
-                return h('span.cp-snapshot-element', {tabindex:0}, [
+                return h('span.cp-snapshot-element', {tabindex:1}, [
                     h('i.fa.fa-camera'),
                     h('span.cp-snapshot-title', [
                         h('span', s.title),
diff --git a/www/common/inner/snapshots.js b/www/common/inner/snapshots.js
index e7b55c00f..dbbf41bf5 100644
--- a/www/common/inner/snapshots.js
+++ b/www/common/inner/snapshots.js
@@ -64,6 +64,16 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
         var display = function () {
             var data = config.data || {};
 
+            var actions = h('span.cp-toolbar-snapshots-actions');
+            var $actions = $(actions);
+            var content = [
+                h('span.cp-toolbar-snapshots-info', [
+                    h('i.fa.fa-camera'),
+                    h('span.cp-toolbar-snapshots-title', data.title + ' - ' + new Date(data.time).toLocaleString()),
+                ]),
+                actions
+            ];
+
             if (!config.readOnly) {
                 $(h('button.cp-toolbar-snapshots-restore', [
                     h('i.fa.fa-check'),
@@ -77,10 +87,9 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
                     $bottom.show();
                     $cke.show();
                     Snapshots.loading = false;
-                }).appendTo($snap);
+                }).appendTo($actions);
             }
 
-            $(h('span.cp-toolbar-snapshots-title', data.title)).appendTo($snap);
 
             $(h('button.cp-toolbar-snapshots-close', [
                 h('i.fa.fa-times'),
@@ -91,7 +100,9 @@ Messages.snapshots_cantRestore = "Can't restore now. Disconnected...";
                 $cke.show();
                 Snapshots.loading = false;
                 config.close(false);
-            }).appendTo($snap);
+            }).appendTo($actions);
+
+            $snap.append(content);
         };
 
         display();

From b0b1a9687a3c75ce32596b4ba82c4dc927ec57e9 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 16:14:56 +0200
Subject: [PATCH 11/14] Make snapshot toolbar responsive

---
 customize.dist/src/less2/include/toolbar.less | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index ca75dd0d9..9adef38ce 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -914,10 +914,21 @@
         align-items: center;
         justify-content: space-between;
         .cp-toolbar-snapshots-info {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex: 1;
+            min-width: 0;
             i {
                 width: 30px;
             }
         }
+        @media screen and (max-width: @browser_media-medium-screen) {
+            flex-flow: column;
+            .cp-toolbar-snapshots-info {
+                max-width: 100%;
+            }
+        }
         .cp-toolbar-snapshots-actions {
             button {
                 margin: 0 5px;

From a9452060600ed85b0017bbe1a8aad56db11eb100 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 17:16:34 +0200
Subject: [PATCH 12/14] Responsive history

---
 .../src/less2/include/toolbar-history.less    | 38 +++++++++++++++++++
 customize.dist/src/less2/include/toolbar.less |  2 +-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index fa9decc01..904027193 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -22,6 +22,35 @@
             font: @colortheme_app-font;
         }
 
+
+        @media screen and (max-width: 870px) {
+            flex-flow: column;
+            .cp-toolbar-history-actions {
+                width: 100%;
+                .cp-history-actions-first {
+                    margin-right: 0 !important;
+                }
+            }
+            .cp-toolbar-history-timeline {
+                width: ~"calc(100% - 20px)";
+                margin-right: 10px !important;
+            }
+        }
+
+        @media screen and (max-height: 500px) {
+            padding-top: 0px;
+            .cp-history-timeline-line {
+                display: none !important;
+            }
+            .cp-toolbar-history-timeline {
+                width: 100% !important;
+                margin: 0 !important;
+            }
+            .cp-history-timeline-actions {
+                margin-left: 0 !important;
+            }
+        }
+
         &.cp-history-init {
             padding: 0;
             height: 32px;
@@ -33,6 +62,15 @@
             flex: 1;
             margin-left: 10px;
             margin-right: @fill-width;
+            .cp-history-timeline-time {
+                font-size: 12px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                flex: 1;
+                min-width: 0;
+                text-align: center;
+            }
         }
         .cp-toolbar-history-actions {
             display: flex;
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 9adef38ce..7611e7540 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -923,7 +923,7 @@
                 width: 30px;
             }
         }
-        @media screen and (max-width: @browser_media-medium-screen) {
+        @media screen and (max-width: 600px) {
             flex-flow: column;
             .cp-toolbar-snapshots-info {
                 max-width: 100%;

From 014d968b3784d4756935c918621577ec0923bc2f Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 17:27:54 +0200
Subject: [PATCH 13/14] Enable history in readonly mode

---
 customize.dist/src/less2/include/alertify.less        | 2 +-
 customize.dist/src/less2/include/toolbar-history.less | 7 +++++++
 customize.dist/src/less2/include/toolbar.less         | 2 +-
 www/common/sframe-app-framework.js                    | 1 -
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/customize.dist/src/less2/include/alertify.less b/customize.dist/src/less2/include/alertify.less
index 11820db00..aa983c755 100644
--- a/customize.dist/src/less2/include/alertify.less
+++ b/customize.dist/src/less2/include/alertify.less
@@ -198,7 +198,7 @@
                             background-color: @alertify-light-bg;
                         }
                         &.disabled {
-                            color: #949494;
+                            color: @colortheme_alertify-cancel-border;
                             cursor: not-allowed;
                         }
                     }
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 904027193..10af320ae 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -89,6 +89,13 @@
                 .fa:not(:last-child) {
                     margin-right: 5px;
                 }
+                &:disabled {
+                    cursor: not-allowed !important;
+                    opacity: 0.6;
+                    &:hover, &:active {
+                        background-color: transparent;
+                    }
+                }
             }
         }
 
diff --git a/customize.dist/src/less2/include/toolbar.less b/customize.dist/src/less2/include/toolbar.less
index 7611e7540..9adef38ce 100644
--- a/customize.dist/src/less2/include/toolbar.less
+++ b/customize.dist/src/less2/include/toolbar.less
@@ -923,7 +923,7 @@
                 width: 30px;
             }
         }
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: @browser_media-medium-screen) {
             flex-flow: column;
             .cp-toolbar-snapshots-info {
                 max-width: 100%;
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 912f635f9..4ed047eb8 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -817,7 +817,6 @@ define([
                 $toolbar: $(toolbarContainer)
             };
             var $hist = common.createButton('history', true, {histConfig: histConfig});
-            $hist.addClass('cp-hidden-if-readonly');
             toolbar.$drawer.append($hist);
 
             var $snapshot = common.createButton('snapshots', true, {

From b5f48a43e3e63f5a3bd2a906f65d1d88e71aa948 Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Wed, 30 Sep 2020 18:44:04 +0200
Subject: [PATCH 14/14] Block snapshot creation while disconnected

---
 .../src/less2/include/modals-ui-elements.less        |  5 ++++-
 .../src/less2/include/toolbar-history.less           |  1 +
 www/common/common-ui-elements.js                     | 12 +++++++++---
 www/common/sframe-app-framework.js                   |  4 ++++
 www/common/sframe-common-history.js                  |  2 +-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/customize.dist/src/less2/include/modals-ui-elements.less b/customize.dist/src/less2/include/modals-ui-elements.less
index 200f39b29..a0b439c45 100644
--- a/customize.dist/src/less2/include/modals-ui-elements.less
+++ b/customize.dist/src/less2/include/modals-ui-elements.less
@@ -125,8 +125,11 @@
         margin-bottom: @snapshot_spacing;
         max-height: 245px;
         overflow: auto;
-        min-height: 100px;
         outline: none;
+        .cp-snapshot-spinner {
+            min-height: 90px;
+            text-align: center;
+        }
         .cp-snapshot-element {
             display: flex;
             align-items: center;
diff --git a/customize.dist/src/less2/include/toolbar-history.less b/customize.dist/src/less2/include/toolbar-history.less
index 10af320ae..7f64f4c72 100644
--- a/customize.dist/src/less2/include/toolbar-history.less
+++ b/customize.dist/src/less2/include/toolbar-history.less
@@ -197,6 +197,7 @@
                     right: 1px;
                     top: 1px;
                     bottom: 1px;
+                    cursor: pointer;
                     .cp-history-snapshot {
                         position: absolute;
                         border: 2px solid @cryptpad_text_col;
diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index 3ae4ffedd..899363b06 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -3314,6 +3314,7 @@ define([
     Messages.snapshots_placeholder = "Snapshot title"; // XXX
     Messages.snapshots_open = "View";
     Messages.snapshots_delete = "Delete";
+    Messages.snapshots_cantMake = "Disconnected. Can't create a new snapshot now.";
     UIElements.openSnapshotsModal = function (common, load, make, remove) {
         var modal;
         var readOnly = common.getMetadataMgr().getPrivateData().readOnly;
@@ -3406,10 +3407,15 @@ define([
                 onClick: function () {
                     var val = $input.val();
                     if (!val) { return true; }
-                    $container.html('');
-                    UI.spinner($container).get().show();
+                    $container.html('').append(h('div.cp-snapshot-spinner'));
+                    var to = setTimeout(function () {
+                        UI.spinner($container.find('div')).get().show();
+                    });
                     make(val, function (err) {
-                        if (err) { return; }
+                        clearTimeout(to);
+                        if (err) {
+                            return void UI.alert(Messages.snapshots_cantMake);
+                        }
                         refresh();
                     });
                     return true;
diff --git a/www/common/sframe-app-framework.js b/www/common/sframe-app-framework.js
index 4ed047eb8..2df62c73a 100644
--- a/www/common/sframe-app-framework.js
+++ b/www/common/sframe-app-framework.js
@@ -138,6 +138,9 @@ define([
             onLocal();
         };
         var makeSnapshot = function (title, cb) {
+            if (state !== STATE.READY) {
+                return void cb('NOT_READY');
+            }
             var sframeChan = common.getSframeChannel();
             sframeChan.query("Q_GET_LAST_HASH", null, function (err, obj) {
                 if (err || (obj && obj.error)) { return void UI.warn(Messages.error); }
@@ -357,6 +360,7 @@ define([
         };
         var setLastMetadata = function (md) {
             if (!unsyncMode) { return; }
+            if (state !== STATE.READY) { return; }
             var newContentStr = cpNfInner.chainpad.getAuthDoc();
             var newContent = JSON.parse(newContentStr);
             if (Array.isArray(newContent)) {
diff --git a/www/common/sframe-common-history.js b/www/common/sframe-common-history.js
index f2f254336..1ccec88be 100644
--- a/www/common/sframe-common-history.js
+++ b/www/common/sframe-common-history.js
@@ -396,7 +396,7 @@ define([
                     time: block.time ? (+new Date(block.time)) : +new Date()
                 };
                 var sent = config.setLastMetadata(md);
-                if (!sent) { return void UI.warn(Messages.error); }
+                if (!sent) { return void UI.alert(Messages.snapshots_cantMake); }
                 refreshBar();
             } catch (e) {
                 console.error(e);