From cdf196c1d72bdc7c0f7eccbacb940ef3ea4f08e5 Mon Sep 17 00:00:00 2001
From: "A.Block" <calexblock@gmail.com>
Date: Sun, 22 Apr 2018 13:53:58 +0300
Subject: [PATCH] add console.diffPush

---
 README.md                 |  7 +++++++
 src/js/app/panel.vue.js   | 18 ++++++++++++------
 src/js/jsdiff-devtools.js |  7 +++----
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 4150241..4478431 100644
--- a/README.md
+++ b/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
diff --git a/src/js/app/panel.vue.js b/src/js/app/panel.vue.js
index b7a19c2..5b24908 100644
--- a/src/js/app/panel.vue.js
+++ b/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();
diff --git a/src/js/jsdiff-devtools.js b/src/js/jsdiff-devtools.js
index 2018d00..e63a000 100644
--- a/src/js/jsdiff-devtools.js
+++ b/src/js/jsdiff-devtools.js
@@ -46,8 +46,6 @@ 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;
@@ -55,7 +53,8 @@ function jsdiff_devtools_extension_api () {
     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);`
     );
 }