DevTools: Implement undo, redo operations for the DOMStorage views.

Source/devtools/front_end/DOMStorage.js

Index: Source/devtools/front_end/DOMStorage.js
diff --git a/Source/devtools/front_end/DOMStorage.js b/Source/devtools/front_end/DOMStorage.js
index 29094228273d83c168b18a6df240f0f1a201471c..89ca5ffb77bacc1f5223c5da70a523ed43b910d4 100644
--- a/Source/devtools/front_end/DOMStorage.js
+++ b/Source/devtools/front_end/DOMStorage.js
@@ -36,6 +36,7 @@ WebInspector.DOMStorage = function(securityOrigin, isLocalStorage)
 {
     this._securityOrigin = securityOrigin;
     this._isLocalStorage = isLocalStorage;
+    this._storageHistory = new WebInspector.DOMStorageHistory(this);
 }
 
 /**
@@ -82,7 +83,7 @@ WebInspector.DOMStorage.prototype = {
      */
     setItem: function(key, value)
     {
-        DOMStorageAgent.setDOMStorageItem(this.id, key, value);
+        this._storageHistory.perform(new WebInspector.DOMStorageSetItemAction(this, key, value));
     },
 
     /**
@@ -90,7 +91,218 @@ WebInspector.DOMStorage.prototype = {
      */
     removeItem: function(key)
     {
-        DOMStorageAgent.removeDOMStorageItem(this.id, key);
+        this._storageHistory.perform(new WebInspector.DOMStorageRemoveItemAction(this, key));
+    },
+
+    undo: function()
+    {
+        this._storageHistory.undo();
+    },
+
+    redo: function()
+    {
+        this._storageHistory.redo();
+    }
+}
+
+/**
+ * @constructor
+ * @param {WebInspector.DOMStorage} domStorage
+ */
+WebInspector.DOMStorageAction = function(domStorage)
+{
+    this._domStorage = domStorage;
+}
+
+WebInspector.DOMStorageAction.prototype = {
+    /**
+     * @param {function()} callback
+     */
+    perform: function(callback)
+    {
+    },
+
+    undo: function()
+    {
+    },
+
+    redo: function()
+    {
+    }
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.DOMStorageAction}
+ * @param {WebInspector.DOMStorage} domStorage
+ * @param {string} key
+ */
+WebInspector.DOMStorageRemoveItemAction = function(domStorage, key)
+{
+    WebInspector.DOMStorageAction.call(this, domStorage);
+    this._key = key;
+}
+
+WebInspector.DOMStorageRemoveItemAction.prototype = {
+    /**
+     * @override
+     */
+    perform: function(callback)
+    {
+        DOMStorageAgent.getDOMStorageItemValue(this._domStorage.id, this._key, valueReceived.bind(this));
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {string=} value
+         */
+        function valueReceived(error, value)
+        {
+            this._value = value;

[apavlov, 2013/08/05 09:53:00]

Ugh... hm... this doesn't handle the error, it seems.

[vivekg__, 2013/08/05 10:16:58]

Oops had missed this one. Sorry! Corrected now!

+            this.redo();
+            callback();
+        }
+    },
+
+    /**
+     * @override
+     */
+    undo: function()
+    {
+        DOMStorageAgent.setDOMStorageItem(this._domStorage.id, this._key, this._value);
+    },
+
+    /**
+     * @override
+     */
+    redo: function()
+    {
+        DOMStorageAgent.removeDOMStorageItem(this._domStorage.id, this._key);
+    },
+
+    __proto__: WebInspector.DOMStorageAction.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.DOMStorageAction}
+ * @param {WebInspector.DOMStorage} domStorage
+ * @param {string} key
+ * @param {string} value
+ */
+WebInspector.DOMStorageSetItemAction = function(domStorage, key, value)
+{
+    WebInspector.DOMStorageAction.call(this, domStorage);
+    this._key = key;
+    this._value = value;
+}
+
+WebInspector.DOMStorageSetItemAction.prototype = {
+    /**
+     * @override
+     */
+    perform: function(callback)
+    {
+        DOMStorageAgent.getDOMStorageItemValue(this._domStorage.id, this._key, valueReceived.bind(this));
+
+        /**
+         * @param {?Protocol.Error} error
+         * @param {string=} value
+         */
+        function valueReceived(error, value)
+        {
+            if (error)
+                return;

[apavlov, 2013/08/05 09:53:00]

So, you are leaving the callback to hang around forever in the event of error? I
seem to have given a sample of code to handle errors. It included the callback
invocation...

[vivekg__, 2013/08/05 10:16:58]

The history only processes the action only upon completion. No special error
handling is done by the history object. Hence in case of error, simply
returning!

+
+            if (typeof value === "undefined")
+                delete this._exists;
+            else {
+                this._exists = true;
+                this._oldValue = value;
+            }
+            this.redo();
+            callback();
+        }
+    },
+
+    /**
+     * @override
+     */
+    undo: function()
+    {
+        if (!this._exists)
+            DOMStorageAgent.removeDOMStorageItem(this._domStorage.id, this._key);
+        else
+            DOMStorageAgent.setDOMStorageItem(this._domStorage.id, this._key, this._oldValue);
+    },
+
+    /**
+     * @override
+     */
+    redo: function()
+    {
+        DOMStorageAgent.setDOMStorageItem(this._domStorage.id, this._key, this._value);
+    },
+
+    __proto__: WebInspector.DOMStorageAction.prototype
+}
+
+/**
+ * @constructor
+ * @param {WebInspector.DOMStorage} domStorage
+ */
+WebInspector.DOMStorageHistory = function(domStorage)
+{
+    this._domStorage = domStorage;
+
+    /** @type {!Array.<!WebInspector.DOMStorageAction>} */
+    this._actions = [];
+    this._redoableActionIndex = -1;
+}
+
+WebInspector.DOMStorageHistory.MAX_UNDO_STACK_DEPTH = 20;
+
+WebInspector.DOMStorageHistory.prototype = {
+    /**
+     * @param {WebInspector.DOMStorageAction} action
+     */
+    perform: function(action)
+    {
+        if (!action)
+            return;
+
+        action.perform(actionCompleted.bind(this));
+        function actionCompleted()
+        {
+            if (this._redoableActionIndex + 1 === WebInspector.DOMStorageHistory.MAX_UNDO_STACK_DEPTH) {
+                this._actions.shift();
+                --this._redoableActionIndex;
+            } else if (this._redoableActionIndex + 1 < this._actions.length)
+                this._actions.splice(this._redoableActionIndex + 1);
+
+            this._actions.push(action);
+            ++this._redoableActionIndex;
+        }
+    },
+
+    undo: function()
+    {
+        if (this._redoableActionIndex < 0)

[apavlov, 2013/08/05 09:53:00]

ugh... I got confused by the naming, sorry. This seems to actually be the
_undoable_ action index, right?

[vivekg__, 2013/08/05 10:16:58]

Done.

+            return;
+
+        var action = this._actions[this._redoableActionIndex];
+        console.assert(action);
+        action.undo();
+        --this._redoableActionIndex;
+    },
+
+    redo: function()
+    {
+        if (this._redoableActionIndex >= this._actions.length - 1)
+            return;
+
+        var action = this._actions[++this._redoableActionIndex];

[apavlov, 2013/08/05 09:53:00]

This confirms the previous comment. In order to redo an action, you increment
the index first.

[vivekg__, 2013/08/05 10:16:58]

Done.

+        console.assert(action);
+        action.redo();
     }
 }