--- a/browser/devtools/shared/widgets/Tooltip.js
+++ b/browser/devtools/shared/widgets/Tooltip.js
@@ -830,25 +830,33 @@ SwatchBasedEditorTooltip.prototype = {
    * @param {node} swatchEl
    *        The element to add
    * @param {object} callbacks
    *        Callbacks that will be executed when the editor wants to preview a
    *        value change, or revert a change, or commit a change.
    *        - onPreview: will be called when one of the sub-classes calls preview
    *        - onRevert: will be called when the user ESCapes out of the tooltip
    *        - onCommit: will be called when the user presses ENTER or clicks
-   *        outside the tooltip.
+   *        outside the tooltip. If the user-defined onCommit returns a value,
+   *        it will be used to replace originalValue, so that the swatch-based
+   *        tooltip always knows what is the current originalValue and can use
+   *        it when reverting
+   * @param {object} originalValue
+   *        The original value before the editor in the tooltip makes changes
+   *        This can be of any type, and will be passed, as is, in the revert
+   *        callback
    */
-  addSwatch: function(swatchEl, callbacks={}) {
+  addSwatch: function(swatchEl, callbacks={}, originalValue) {
     if (!callbacks.onPreview) callbacks.onPreview = function() {};
     if (!callbacks.onRevert) callbacks.onRevert = function() {};
     if (!callbacks.onCommit) callbacks.onCommit = function() {};
 
     this.swatches.set(swatchEl, {
-      callbacks: callbacks
+      callbacks: callbacks,
+      originalValue: originalValue
     });
     swatchEl.addEventListener("click", this._onSwatchClick, false);
   },
 
   removeSwatch: function(swatchEl) {
     if (this.swatches.has(swatchEl)) {
       if (this.activeSwatch === swatchEl) {
         this.hide();
@@ -879,27 +887,30 @@ SwatchBasedEditorTooltip.prototype = {
   },
 
   /**
    * This parent class only calls this on <esc> keypress
    */
   revert: function() {
     if (this.activeSwatch) {
       let swatch = this.swatches.get(this.activeSwatch);
-      swatch.callbacks.onRevert();
+      swatch.callbacks.onRevert(swatch.originalValue);
     }
   },
 
   /**
    * This parent class only calls this on <enter> keypress
    */
   commit: function() {
     if (this.activeSwatch) {
       let swatch = this.swatches.get(this.activeSwatch);
-      swatch.callbacks.onCommit();
+      let newValue = swatch.callbacks.onCommit();
+      if (typeof newValue !== "undefined") {
+        swatch.originalValue = newValue;
+      }
     }
   },
 
   destroy: function() {
     this.swatches.clear();
     this.activeSwatch = null;
     this.tooltip.off("keypress", this._onTooltipKeypress);
     this.tooltip.destroy();