Skip to content

Commit 7df40c8

Browse files
zendivezendive
committed
POC as chrome devtools extension
1 parent 68dbc20 commit 7df40c8

21 files changed

+8520
-22
lines changed

‎.gitignore‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,6 @@ typings/
5151
# Output of 'npm pack'
5252
*.tgz
5353

54-
# Yarn Integrity file
55-
.yarn-integrity
56-
5754
# dotenv environment variables file
5855
.env
5956

@@ -62,3 +59,5 @@ typings/
6259

6360
# os
6461
.DS_Store
62+
63+
*.zip

‎.jshintrc‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"expr": true,
3+
"eqnull": true,
4+
"laxbreak":true,
5+
"unused": false,
6+
"debug": true,
7+
"supernew": true,
8+
"esversion": 6,
9+
"loopfunc": true,
10+
"curly": true,
11+
"maxdepth": 4
12+
}
13+

‎README.md‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,18 @@
1-
# jsdiff
2-
Show diff between 2 objects in a popup window
1+
jsdiff
2+
---
3+
This is goolge-chrome devtools extension
4+
intended to display result of in-memory object comparisons with the help of dedicated commands invoked via console.
35

4-
Example
5-
====
6-
![screenshot](./doc/screenshot.png)
7-
8-
```javascript
9-
// api is exposed to global context
10-
jsdiff.show(objLeft, objRight);
116

12-
// and/or could be used as amd module
13-
define(['path/to/jsdiff'], function (jsdiff) {
14-
jsdiff.show(objLeft, objRight);
15-
});
7+
Example
8+
===
9+
console.diff(left, right);
10+
console.diffLeft(left);
11+
console.diffRight(right);
1612
```
13+
![screenshot](./doc/screenshot.png)
1714
18-
Could be useful while comparing complex objects with big amount of data.
19-
20-
TODO
21-
====
22-
[-] DevTools chrome extension
2315
2416
Based on
25-
====
17+
===
2618
[jsondiffpatch](https://github.com/benjamine/jsondiffpatch) by benjamine

‎manifest.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "JSDiff Devtool",
3+
"version": "0.1",
4+
"manifest_version": 2,
5+
"minimum_chrome_version": "64.0",
6+
"devtools_page": "src/jsdiff-devtools.html",
7+
"icons": {
8+
"16": "src/img/panel-icon16.png"
9+
},
10+
"background": {
11+
"persistent": false,
12+
"scripts": [
13+
"src/js/jsdiff-background.js"
14+
]
15+
},
16+
"content_security_policy": "script-src 'self'; object-src 'self'",
17+
"permissions": [
18+
"http://*/*",
19+
"https://*/*",
20+
"file:///*",
21+
"activeTab",
22+
"tabs"
23+
]
24+
}

‎src/css/jsondiffpatch-formatter.css‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
.jsondiffpatch-delta {
2+
font-family: monospace;
3+
font-size: 12px;
4+
margin: 0;
5+
padding: 0 0 0 12px;
6+
display: inline-block
7+
}
8+
9+
.jsondiffpatch-delta pre {
10+
font-family: monospace;
11+
font-size: 12px;
12+
margin: 0;
13+
padding: 0;
14+
display: inline-block
15+
}
16+
17+
ul.jsondiffpatch-delta {
18+
list-style-type: none;
19+
padding: 0 0 0 20px;
20+
margin: 0
21+
}
22+
23+
.jsondiffpatch-delta ul {
24+
list-style-type: none;
25+
padding: 0 0 0 20px;
26+
margin: 0
27+
}
28+
29+
.jsondiffpatch-added .jsondiffpatch-property-name, .jsondiffpatch-added .jsondiffpatch-value pre, .jsondiffpatch-modified .jsondiffpatch-right-value pre, .jsondiffpatch-textdiff-added {
30+
background: #bfb
31+
}
32+
33+
.jsondiffpatch-deleted .jsondiffpatch-property-name, .jsondiffpatch-deleted pre, .jsondiffpatch-modified .jsondiffpatch-left-value pre, .jsondiffpatch-textdiff-deleted {
34+
background: #fbb;
35+
text-decoration: line-through
36+
}
37+
38+
.jsondiffpatch-unchanged, .jsondiffpatch-movedestination {
39+
color: gray
40+
}
41+
42+
.jsondiffpatch-unchanged, .jsondiffpatch-movedestination > .jsondiffpatch-value {
43+
transition: all 0.5s;
44+
-webkit-transition: all 0.5s;
45+
overflow-y: hidden
46+
}
47+
48+
.jsondiffpatch-unchanged-showing .jsondiffpatch-unchanged, .jsondiffpatch-unchanged-showing .jsondiffpatch-movedestination > .jsondiffpatch-value {
49+
max-height: 100px
50+
}
51+
52+
.jsondiffpatch-unchanged-hidden .jsondiffpatch-unchanged, .jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
53+
max-height: 0
54+
}
55+
56+
.jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value, .jsondiffpatch-unchanged-hidden .jsondiffpatch-movedestination > .jsondiffpatch-value {
57+
display: block
58+
}
59+
60+
.jsondiffpatch-unchanged-visible .jsondiffpatch-unchanged, .jsondiffpatch-unchanged-visible .jsondiffpatch-movedestination > .jsondiffpatch-value {
61+
max-height: 100px
62+
}
63+
64+
.jsondiffpatch-unchanged-hiding .jsondiffpatch-unchanged, .jsondiffpatch-unchanged-hiding .jsondiffpatch-movedestination > .jsondiffpatch-value {
65+
max-height: 0
66+
}
67+
68+
.jsondiffpatch-unchanged-showing .jsondiffpatch-arrow, .jsondiffpatch-unchanged-hiding .jsondiffpatch-arrow {
69+
display: none
70+
}
71+
72+
.jsondiffpatch-value {
73+
display: inline-block
74+
}
75+
76+
.jsondiffpatch-property-name {
77+
display: inline-block;
78+
padding-right: 5px;
79+
vertical-align: top
80+
}
81+
82+
.jsondiffpatch-property-name:after {
83+
content: ': '
84+
}
85+
86+
.jsondiffpatch-child-node-type-array > .jsondiffpatch-property-name:after {
87+
content: ': ['
88+
}
89+
90+
.jsondiffpatch-child-node-type-array:after {
91+
content: '],'
92+
}
93+
94+
div.jsondiffpatch-child-node-type-array:before {
95+
content: '['
96+
}
97+
98+
div.jsondiffpatch-child-node-type-array:after {
99+
content: ']'
100+
}
101+
102+
.jsondiffpatch-child-node-type-object > .jsondiffpatch-property-name:after {
103+
content: ': {'
104+
}
105+
106+
.jsondiffpatch-child-node-type-object:after {
107+
content: '},'
108+
}
109+
110+
div.jsondiffpatch-child-node-type-object:before {
111+
content: '{'
112+
}
113+
114+
div.jsondiffpatch-child-node-type-object:after {
115+
content: '}'
116+
}
117+
118+
.jsondiffpatch-value pre:after {
119+
content: ','
120+
}
121+
122+
li:last-child > .jsondiffpatch-value pre:after, .jsondiffpatch-modified > .jsondiffpatch-left-value pre:after {
123+
content: ''
124+
}
125+
126+
.jsondiffpatch-modified .jsondiffpatch-value {
127+
display: inline-block
128+
}
129+
130+
.jsondiffpatch-modified .jsondiffpatch-right-value {
131+
margin-left: 5px
132+
}
133+
134+
.jsondiffpatch-moved .jsondiffpatch-value {
135+
display: none
136+
}
137+
138+
.jsondiffpatch-moved .jsondiffpatch-moved-destination {
139+
display: inline-block;
140+
background: #ffb;
141+
color: #888
142+
}
143+
144+
.jsondiffpatch-moved .jsondiffpatch-moved-destination:before {
145+
content: ' => '
146+
}
147+
148+
ul.jsondiffpatch-textdiff {
149+
padding: 0
150+
}
151+
152+
.jsondiffpatch-textdiff-location {
153+
color: #bbb;
154+
display: inline-block;
155+
min-width: 60px
156+
}
157+
158+
.jsondiffpatch-textdiff-line {
159+
display: inline-block
160+
}
161+
162+
.jsondiffpatch-textdiff-line-number:after {
163+
content: ','
164+
}
165+
166+
.jsondiffpatch-error {
167+
background: red;
168+
color: white;
169+
font-weight: 700
170+
}

‎src/css/style.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/style.css.map‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/style.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
body {
2+
margin: 18px 0 0 4px;
3+
background-color: #fff;
4+
}

‎src/img/panel-icon16.png‎

1.28 KB
Loading

‎src/js/app/panel.vue.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
define([
2+
'vue',
3+
'jsondiffpatch',
4+
'formatter'
5+
], function (Vue, jsondiffpatch, formatter) {
6+
'use strict';
7+
// language=Vue
8+
return Vue.extend({
9+
name: 'app',
10+
11+
render(ce) {
12+
return ce('div', {}, [
13+
ce('h1', {}, 'JSDiff'),
14+
this.compare.timestamp,
15+
ce('div', [
16+
ce('button', {
17+
on: {click: this.onToggleUnchanged}
18+
}, 'Toggle Unchanged')
19+
]),
20+
ce('div', {
21+
domProps: {innerHTML: this.deltaHtml}
22+
})
23+
]);
24+
},
25+
26+
data() {
27+
return {
28+
showUnchanged: true,
29+
compare: {
30+
timestamp: null,
31+
left: {},
32+
right: {}
33+
}
34+
};
35+
},
36+
37+
mounted() {
38+
this.$on('on-runtime-message', this.$_onRuntimeMessage);
39+
},
40+
41+
computed: {
42+
deltaHtml() {
43+
try {
44+
return formatter.html.format(
45+
jsondiffpatch.diff(this.compare.left, this.compare.right),
46+
this.compare.left
47+
);
48+
}
49+
catch (bug) {
50+
return JSON.stringify(bug);
51+
}
52+
}
53+
},
54+
55+
methods: {
56+
$_onRuntimeMessage(req, sender, sendResponse) {
57+
console.log('$_onRuntimeMessage', req);
58+
59+
if (req.source === 'jsdiff-devtools-extension-api') {
60+
this.$_onDiffRequest(req.payload.left, req.payload.right);
61+
}
62+
},
63+
64+
$_onDiffRequest(left, right) {
65+
if (left && typeof(left) === 'object') {
66+
this.compare.left = left;
67+
}
68+
if (right && typeof(right) === 'object') {
69+
this.compare.right = right;
70+
}
71+
72+
this.compare.timestamp = Date.now();
73+
},
74+
75+
onToggleUnchanged(e) {
76+
this.showUnchanged = !this.showUnchanged;
77+
formatter.html.showUnchanged(this.showUnchanged, document.body);
78+
}
79+
}
80+
81+
});
82+
});

0 commit comments

Comments
 (0)