v2.0 (#7)

Tackle error handling + compare function code + serialise reoccurring references
zendive · Oct 5, 2020 · 3041d48 · 3041d48
1 parent fe02777
commit 3041d48
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 92 deletions.
diff --git a/README.md b/README.md
@@ -3,6 +3,11 @@
 Chrome devtools extension intended to display result of deep in-memory object
 comparisons with the help of dedicated console commands.
 
+### Features
+* compare objects from multiple tabs and/or between page reloads
+* function code included in comparison result in form of a string, may help to see if it was altered
+* document, dom-elements and other non-serializable objects are filtered-out from the results
+* self recurring references displayed only once, the rest of occurrences are filtered-out  
 
 ### API
 ```javascript
@@ -13,24 +18,28 @@ console.diffRight(right);   // update object on the right side only
 console.diffPush(next);     // shifts sides, right becomes left, next becomes right
 ```
 
-
 ### Usage basics
-Historicly, left side represents the old state and right side the new state.
-Things that are present on the left side but missing on the right side are colour-coded as red (old).
-Things that are missing on the left side but present on the right side are colour-coded as green (new).
-To track changes of the same variable in timed manner you can push it with `diffPush` command,
+Historically, left side represents the old state and right side the new state.
+* Things that are present on the left side but missing on the right side are colour-coded as red (old).
+* Things that are missing on the left side but present on the right side are colour-coded as green (new).
+
+To track changes of the same variable in timed manner you can push it with `diffPush` or `diff`
+with a single argument,
 that will shift objects from right to left, showing differences with previous push state.
-You can compare objects from different tabs (sites).
 
+### How it works
+* `jsdiff-devtools` registers devtools panel
+  * injects console commands that send data to `jsdiff-proxy` 
+  * injects `jsdiff-proxy` to farther communicate objects to the extension's `jsdiff-background`
+* when `console.diff` command invoked
+  * argument/s are cloned in a suitable form for sending between different window contexts and sent to `jsdiff-proxy`
+  * `jsdiff-proxy` catches the data and sends it to the `jsdiff-background` where it is stored for future consuming
+* when `jsdiff-panel` is mounted (visible in devtools) it listens to data expected to come from the `jsdiff-background`
+and displays it
 
 ### Screenshot
 ![screenshot](./src/img/screenshot-01.png)
 
-
-### Gotcha
-Comparred objects shouldn't contain functions or self-recurrent references, like DOM elements or view instances have.
-
-
 ### Based on
 - [jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by Benjamín Eidelman
 - [vuejs](https://github.com/vuejs) by Evan You
diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "console.diff(...)",
   "description": "Deep compare complex in-memory objects inside browser devtools panel with console.diff command.",
-  "version": "1.1",
+  "version": "2.0",
   "manifest_version": 2,
   "minimum_chrome_version": "64.0",
   "devtools_page": "src/jsdiff-devtools.html",
@@ -21,7 +21,6 @@
     "http://*/*",
     "https://*/*",
     "file:///*",
-    "clipboardWrite",
-    "tabs"
+    "clipboardWrite"
   ]
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jsdiff",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "![jsdiff](./src/img/panel-icon64.png) --- Chrome devtools extension intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.",
   "private": true,
   "directories": {
@@ -30,7 +30,7 @@
     "clean-webpack-plugin": "~1.0.1",
     "css-loader": "~2.1.0",
     "file-loader": "^3.0.1",
-    "node-sass": "~4.11.0",
+    "node-sass": "~4.14.1",
     "sass-loader": "~7.1.0",
     "style-loader": "~0.23.1",
     "vue-loader": "~15.6.2",
@@ -39,8 +39,8 @@
     "webpack-cli": "~3.2.1"
   },
   "dependencies": {
-    "jsondiffpatch": "~0.3.11",
-    "moment": "~2.24.0",
-    "vue": "~2.6.6"
+    "jsondiffpatch": "~0.4.1",
+    "moment": "~2.29.0",
+    "vue": "~2.6.12"
   }
 }
diff --git a/src/js/bundle/jsdiff-panel.js b/src/js/bundle/jsdiff-panel.js
diff --git a/src/js/jsdiff-background.js b/src/js/jsdiff-background.js
@@ -54,11 +54,13 @@ class Connection {
    */
   onApiMessage(req) {
     console.log('jsdiff-background message relay', req);
-    this.port.postMessage(req);
+    if (this.port !== null) {
+      this.port.postMessage(req);
+    }
   }
 
   onDisconnect() {
-    this.req = null;
+    this.port = null;
   }
 
 }
diff --git a/src/js/jsdiff-devtools.js b/src/js/jsdiff-devtools.js
@@ -35,7 +35,7 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 // us shown at: https://developer.chrome.com/extensions/devtools#content-script-to-devtools
 function injectScripts() {
   chrome.devtools.inspectedWindow.eval(
-      ';(' + jsdiff_devtools_extension_api.toString() + ')();', {
+      `;(${jsdiff_devtools_extension_api.toString()})();`, {
         useContentScriptContext: false // default: false
       }, (res, error) => {
         if (res && !error) {
@@ -48,36 +48,84 @@ function injectScripts() {
 }
 
 function jsdiff_devtools_extension_api() {
-  if (console.diff) {
+  if (typeof(console.diff) === 'function') {
     /*already injected*/
     return false;
   }
 
-  const source = 'jsdiff-devtools-extension-api';
-  const w = window;
+  function postDataAdapter(set, key, value) {
+    try {
+      if (
+        value instanceof Element ||
+        value instanceof Document
+      ) {
+        return undefined;
+      } else if (typeof(value) === 'function') {
+        return value.toString();
+      } else if (
+        value instanceof Object ||
+        typeof(value) === 'object'
+      ) {
+        if (set.has(value)) {
+          return undefined;
+        }
+        set.add(value);
+      }
+
+      return value;
+    } catch (ignore) {
+      return undefined;
+    }
+  }
+
+  function post(payload) {
+    try {
+      ['push', 'left', 'right'].forEach((key) => {
+        if (payload.hasOwnProperty(key)) {
+          let set = new Set();
+          payload[key] = JSON.parse(
+            JSON.stringify(
+              payload[key],
+              postDataAdapter.bind(null, set)
+            )
+          );
+          set.clear();
+          set = null;
+        }
+      });
+      window.postMessage({payload, source: 'jsdiff-devtools-extension-api'}, '*');
+    } catch (e) {
+      console.error('%cJSDiff', `
+        font-weight: 700;
+        color: #000;
+        background-color: yellow;
+        padding: 2px 4px;
+        border: 1px solid #bbb;
+        border-radius: 4px;
+      `, e);
+    }
+  }
 
   Object.assign(console, {
     diff(left, right) {
-      if (right === undefined) {
-        w.postMessage({payload: {push: left}, source}, '*');
-      }
-      else {
-        w.postMessage({payload: {left, right}, source}, '*');
-      }
+      post(right === undefined? {push: left} : {left, right});
     },
+
     diffLeft(left) {
-      w.postMessage({payload: {left}, source}, '*');
+      post({left});
     },
+
     diffRight(right) {
-      w.postMessage({payload: {right}, source}, '*');
+      post({right});
     },
+
     diffPush(push) {
-      w.postMessage({payload: {push}, source}, '*');
-    }
+      post({push});
+    },
   });
 
   console.log(
-    '%cJSDiff API', `
+    '%cJSDiff', `
       font-weight: 700;
       color: #000;
       background-color: yellow;

diff --git a/src/js/view/panel.vue b/src/js/view/panel.vue
@@ -3,7 +3,7 @@
         <section
             v-if="hasBothSides"
             class="-header">
-            
+
             <div class="-toolbox">
                 <button
                     v-if="hasBothSides"
@@ -22,7 +22,7 @@
             <div class="-last-updated">
                 <span>Last updated</span>
                 <span class="-value" v-text="lastUpdated"/>
-            </div>    
+            </div>
         </section>
 
         <a class="-icon" :href="git.self" target="_blank" :title="git.self">
@@ -63,7 +63,7 @@
   require('jsondiffpatch/dist/formatters-styles/html.css');
   const Vue = require('vue').default;
   const moment = require('moment');
-  
+
   module.exports = Vue.extend({
     name: 'jsdiff-panel',
 
@@ -103,7 +103,7 @@
 
     computed: {
       lastUpdated() {
-        return moment(this.compare.timestamp).fromNow();
+        return moment(this.compare.timestamp).from(this.now);
       },
 
       hasBothSides() {
@@ -119,7 +119,6 @@
 
       deltaHtml() {
         try {
-          this.$_adjustArrows();
           return formatters.html.format(
               jsondiffpatch.diff(this.compare.left, this.compare.right),
               this.compare.left
@@ -135,7 +134,6 @@
       onToggleUnchanged(e) {
         this.showUnchanged = !this.showUnchanged;
         formatters.html.showUnchanged(this.showUnchanged, this.$refs.delta);
-        this.$_adjustArrows();
       },
 
       onCopyDelta() {
@@ -177,52 +175,6 @@
 
         this.$_restartLastUpdated();
       },
-
-      $_adjustArrows() {
-        this.$nextTick(() => {
-          const t = document.body;
-          var e = function(t) {
-                return t.textContent || t.innerText;
-              },
-              o = function(t, e, o) {
-                for (var a = t.querySelectorAll(e), r = 0, i = a.length; i > r; r++) {
-                  o(a[r]);
-                }
-              },
-              a = function(t, e) {
-                for (var o = 0, a = t.children.length; a > o; o++) {
-                  e(t.children[o], o);
-                }
-              };
-
-          o(t, '.jsondiffpatch-arrow', function(t) {
-            var o = t.parentNode,
-                r = t.children[0],
-                i = r.children[1];
-            r.style.display = 'none';
-            var n,
-                s = e(o.querySelector('.jsondiffpatch-moved-destination')),
-                d = o.parentNode;
-            if (a(d, function(t) {
-              t.getAttribute('data-key') === s && (n = t);
-            }), n) {
-              try {
-                var f = n.offsetTop - o.offsetTop;
-                r.setAttribute('height', Math.abs(f) + 6);
-                t.style.top = -8 + (f > 0 ? 0 : f) + 'px';
-                var l = f > 0 ?
-                    'M30,0 Q-10,' + Math.round(f / 2) + ' 26,' + (f - 4) :
-                    'M30,' + -f + ' Q-10,' + Math.round(-f / 2) + ' 26,4';
-                i.setAttribute('d', l);
-                r.style.display = '';
-              } catch (c) {
-                return;
-              }
-            }
-          });
-        });
-      }
-
     }
 
   });