add console.diffPush

README.md

@@ -10,9 +10,16 @@ Example
 console.diff(left, right);
 console.diffLeft(left);
 console.diffRight(right);
+console.diffPush(next);
 ```
 ![screenshot](./doc/screenshot.png)
 
+Usage basics
+===
+Left side for old state, right side for new.
+To track changes of the same object in timed manner you can push it with `diffPush` command, 
+that will shift objects from right to left, showing differences with previous push state. 
+
 Based on 
 ===
 [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by benjamine

src/js/app/panel.vue.js

@@ -130,7 +130,7 @@ define(['api'], function (api) {
                 console.log('$_onRuntimeMessage', req);
 
                 if (req.source === 'jsdiff-devtools-extension-api') {
-                    this.$_onDiffRequest(req.payload.left, req.payload.right);
+                    this.$_onDiffRequest(req.payload);
                 }
             },
 
@@ -147,12 +147,18 @@ define(['api'], function (api) {
                 return false;
             },
 
-            $_onDiffRequest(left, right) {
-                if (left) {
-                    this.compare.left = left;
+            $_onDiffRequest({left, right, push}) {
+                if (push) {
+                    this.compare.left = this.compare.right;
+                    this.compare.right = push;
                 }
-                if (right) {
-                    this.compare.right = right;
+                else {
+                    if (left) {
+                        this.compare.left = left;
+                    }
+                    if (right) {
+                        this.compare.right = right;
+                    }
                 }
 
                 this.$_restartLastUpdated();

src/js/jsdiff-devtools.js

@@ -46,16 +46,15 @@ function injectScripts () {
 }
 
 function jsdiff_devtools_extension_api () {
-    'use strict';
-
     if (console.diff) {return;/*nothing to do*/}
     const source = 'jsdiff-devtools-extension-api';
     const w = window;
 
     Object.assign(console, {
         diff(left, right) {w.postMessage({payload: {left, right}, source}, '*');},
         diffLeft(left) {w.postMessage({payload: {left}, source}, '*');},
-        diffRight(right) {w.postMessage({payload: {right}, source}, '*');}
+        diffRight(right) {w.postMessage({payload: {right}, source}, '*');},
+        diffPush(push) {w.postMessage({payload: {push}, source}, '*');}
     });
 
     console.log(
@@ -67,7 +66,7 @@ function jsdiff_devtools_extension_api () {
             border: 1px solid #bbb;
             border-radius: 4px;
         `,
-        `console.diff(left, right); console.diffLeft(left); console.diffRight(right);`
+        `console.diff(left, right); console.diffLeft(left); console.diffRight(right); console.diffPush(next);`
     );
 }