Skip to content

Commit 61fc8e1

Browse files
yescoyesco
committed
move diff to js/showDiff, "better diff", domdiff, called by default on page, saving last for testing
1 parent 5e70d39 commit 61fc8e1

File tree

4 files changed

+174
-108
lines changed

4 files changed

+174
-108
lines changed

‎background.js

Lines changed: 2 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
/*global chrome:true */
22

3-
String.prototype.times = function(n) { return n < 1 ? '':Array(n+1).join(this); };
4-
function ArrayCopy(arr) { return Array.prototype.slice.call(arr); }
5-
63
console.log("hello, guys");
74

85
chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {
@@ -96,108 +93,8 @@ function diffStored(url) {
9693
var currDiv = document.createElement("div");
9794
currDiv.innerHTML = getCurr(url);
9895
//document.body.appendChild(currDiv);
99-
100-
diffDOM(prevDiv, currDiv, function(event, level, prev, curr) {
101-
// TODO: make this annotate the DOM of the page to highlight changes
102-
switch (event) {
103-
case 'changed': {
104-
console.log('---DIFF.changed:', prev, curr);
105-
console.log(' DIFF.changed.prev:\n', prev.innerText)
106-
console.log(' DIFF.changed.curr:\n', curr.innerText);
107-
break;
108-
}
109-
case 'added' : {
110-
console.log('---DIFF.added:', curr);
111-
console.log(' DIFF.added.curr:\n', curr.innerText);
112-
break;
113-
}
114-
case 'removed': {
115-
console.log('---DIFF.removed:', prev);
116-
console.log(' DIFF.removed.prev:\n', prev.innerText);
117-
break;
118-
}
119-
}
120-
});
121-
}
122-
123-
function diffDOM(prev, curr, diffNotifier) {
124-
console.log("============================================================");
125-
console.log("diffDOM: ", prev, curr);
126-
console.log("DOM: ", document);
127-
return pTraverse(0, prev, curr, diffNotifier);
128-
}
129-
130-
function notHtml(node) {
131-
return (!node)
132-
|| (node instanceof Function)
133-
|| (node instanceof Number)
134-
|| (node instanceof String);
135-
}
136-
137-
function pTraverse(level, prev, curr, diffNotifier) {
138-
if (notHtml(prev) || notHtml(curr)) return;
139-
140-
var prevC = ArrayCopy(prev.childNodes);
141-
if (!prevC) return;
142-
143-
var currC = ArrayCopy(curr.childNodes);
144-
if (!currC) return;
145-
146-
console.log("pTraverse: ", prevC, currC);
147-
148-
// Find changed or added this one DOES recurse
149-
while (prevC.length || currC.length) {
150-
var nPrev = prevC.shift();
151-
var nCurr = currC.shift();
152-
if (nCurr && !(nCurr instanceof HTMLElement)) continue;
153-
154-
// if no change don't go down rabbit hole
155-
if (nPrev && nCurr && nPrev.innerText == nCurr.innerText) continue;
156-
157-
if (!nPrev || prevC.length < currC.length) {
158-
// assume something added
159-
160-
diffNotifier('added', level, null, nCurr);
161-
// try to sync up by "ignoring" changed/added item
162-
nCurr = currC.shift();
163-
pTraverse(level+1, nPrev, nCurr, diffNotifier);
164-
165-
} else if (!nCurr || prevC.length > currC.length) {
166-
// assume something removed
167-
168-
if (nPrev) diffNotifier('removed', level, nPrev, nCurr);
169-
// try to sync up by "ignoring" changed/removed item
170-
nPrev = currC.shift();
171-
pTraverse(level+1, nPrev, nCurr, diffNotifier);
172-
173-
} else {
174-
// same length, assume changed
175-
176-
diffNotifier('changed', level, nPrev, nCurr);
177-
pTraverse(level+1, nPrev, nCurr, diffNotifier);
178-
}
179-
}
180-
181-
// TODO: if any remaining stuff in prevC report as removed
182-
}
183-
184-
function traverse(level, node) {
185-
if (!node) return;
186-
if (node instanceof Function) return;
187-
if (node instanceof Number) return;
188-
if (node instanceof String) return;
189-
190-
var c = node.childNodes;
191-
if (!c) return;
192-
193-
for (var i in c) {
194-
//if (!(i instanceof Number)) return; // not HTML element?
195-
var n = c[i];
196-
if (n instanceof HTMLElement) {
197-
console.log(' '.times(level*2), "i=", i, n, n.innerText);
198-
}
199-
traverse(level+1, n);
200-
}
96+
97+
diffDOMConsole(prevDiv, currDiv);
20198
}
20299

203100
console.log("loaded...");

‎js/popup.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,14 @@ $(function ($) {
3333
*/
3434
});
3535
$('#checkDiffs').on('click', function (evt) {
36+
chrome.tabs.create({url:"list.html"});
37+
3638
var msg = { checkDiffs: true };
39+
alert("click on checkDiffs");
3740
chrome.extension.sendMessage(msg, function(response) {
3841
window.close();
3942
});
43+
alert("sent msg");
4044
});
4145
$('#showDiff').on('click', function (evt) {
4246
var msg = { showDiff: true };

‎js/showdiff.js

Lines changed: 166 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,166 @@
1-
console.log("I am here");
1+
console.log("I am here...");
2+
3+
String.prototype.times = function(n) { return n < 1 ? '':Array(n+1).join(this); };
4+
function ArrayCopy(arr) { return Array.prototype.slice.call(arr); }
5+
6+
// hack not to get called twice during reload/load page... (happends only for jsk)
7+
if (!document.domPageCalled) {
8+
diffDOMPage();
9+
}
10+
document.domPageCalled = 'true';
11+
12+
function equalishString(a, b) {
13+
if (a === b) return 'identical';
14+
if (a == b) return 'equal';
15+
if (a === undefined || b === undefined) return false;
16+
if (a.trim() == b.trim()) return 'trimEqual';
17+
18+
var sa = a.replace(/\s/g, '');
19+
var sb = b.replace(/\s/g, '');
20+
if (sa == sb) return 'nospaceEqual';
21+
if (a.length != b.length) return false; //'difflen(' + a.length + ', ' + b.length + ')';
22+
if (a > b) return false; //"bigger(a, b)";
23+
if (a < b) return false; //"less(a, b)";
24+
return false //'different?';
25+
}
26+
27+
function diffDOMPage() {
28+
var prevDiv = document.createElement("div");
29+
prevDiv.innerHTML = localStorage.getItem(document.URL);
30+
31+
var prev = prevDiv;
32+
var curr = document.body;
33+
34+
diffDOM(prev, curr, function(event, level, prev, curr) {
35+
// TODO: make this annotate the DOM of the page to highlight changes
36+
switch (event) {
37+
case 'changed': {
38+
curr.style.backgroundColor = 'lightblue';
39+
console.log('---DIFF.changed:', prev, curr, (prev.innerText == curr.innerText), equalishString(prev.innerText, curr.innerText));
40+
console.log(' DIFF.changed.prev:\n', prev.innerText)
41+
console.log(' DIFF.changed.curr:\n', curr.innerText);
42+
break;
43+
}
44+
case 'added' : {
45+
curr.style.backgroundColor = 'lightgreen';
46+
console.log('---DIFF.added:', curr);
47+
console.log(' DIFF.added.curr:\n', curr.innerText);
48+
break;
49+
}
50+
case 'removed': {
51+
// TODO: consider to insert removed element with lightred color...
52+
//curr.style.backgroundColor = 'pink';
53+
console.log('---DIFF.removed:', prev);
54+
console.log(' DIFF.removed.prev:\n', prev.innerText);
55+
break;
56+
}
57+
}
58+
});
59+
}
60+
61+
function diffDOMConsole(prev, curr) {
62+
diffDOM(prev, curr, function(event, level, prev, curr) {
63+
// TODO: make this annotate the DOM of the page to highlight changes
64+
switch (event) {
65+
case 'changed': {
66+
console.log('---DIFF.changed:', prev, curr);
67+
console.log(' DIFF.changed.prev:\n', prev.innerText)
68+
console.log(' DIFF.changed.curr:\n', curr.innerText);
69+
break;
70+
}
71+
case 'added' : {
72+
console.log('---DIFF.added:', curr);
73+
console.log(' DIFF.added.curr:\n', curr.innerText);
74+
break;
75+
}
76+
case 'removed': {
77+
console.log('---DIFF.removed:', prev);
78+
console.log(' DIFF.removed.prev:\n', prev.innerText);
79+
break;
80+
}
81+
}
82+
});
83+
}
84+
85+
function diffDOM(prev, curr, diffNotifier) {
86+
console.log("============================================================");
87+
console.log("diffDOM: ", prev, curr);
88+
console.log("DOM: ", document);
89+
return pTraverse(0, prev, curr, diffNotifier);
90+
}
91+
92+
function notHtml(node) {
93+
return (!node)
94+
|| (node instanceof Function)
95+
|| (node instanceof Number)
96+
|| (node instanceof String);
97+
}
98+
99+
function pTraverse(level, prev, curr, diffNotifier) {
100+
if (notHtml(prev) || notHtml(curr)) return;
101+
102+
var prevC = ArrayCopy(prev.childNodes);
103+
if (!prevC) return;
104+
105+
var currC = ArrayCopy(curr.childNodes);
106+
if (!currC) return;
107+
108+
console.log("pTraverse: ", prev.childNodes, curr.childNodes);
109+
110+
// Find changed or added this one DOES recurse
111+
var nPrev = prevC.shift();
112+
var nCurr = currC.shift();
113+
while (prevC.length || currC.length) {
114+
console.log("pTraverse.Q: ", nPrev, nCurr, prevC, currC);
115+
if (nCurr && !(nCurr instanceof HTMLElement)) {
116+
// nasty mess
117+
//if (!nPrev || prevC.length < currC.length) {
118+
//nCurr = currC.shift();
119+
//} else if (!nCurr || prevC.length > currC.length) {
120+
// nPrev = prevC.shift();
121+
//} else
122+
{
123+
nPrev = prevC.shift();
124+
nCurr = currC.shift();
125+
}
126+
continue;
127+
}
128+
129+
// if no change don't go down rabbit hole
130+
if (nPrev && nCurr && equalishString(nPrev.innerText, nCurr.innerText)) {
131+
nPrev = prevC.shift();
132+
nCurr = currC.shift();
133+
continue;
134+
}
135+
136+
if (!nPrev || prevC.length < currC.length) {
137+
// assume something added
138+
139+
diffNotifier('added', level, null, nCurr);
140+
// try to sync up by "ignoring" changed/added item
141+
nCurr = currC.shift();
142+
continue; // sync up
143+
} else if (!nCurr || prevC.length > currC.length) {
144+
// assume something removed
145+
146+
if (nPrev) diffNotifier('removed', level, nPrev, nCurr);
147+
// try to sync up by "ignoring" changed/removed item
148+
nPrev = prevC.shift();
149+
continue; // sync up
150+
} else {
151+
// same length, assume changed
152+
153+
diffNotifier('changed', level, nPrev, nCurr);
154+
pTraverse(level+1, nPrev, nCurr, diffNotifier);
155+
156+
nPrev = prevC.shift();
157+
nCurr = currC.shift();
158+
}
159+
}
160+
161+
// TODO: if any remaining stuff in prevC report as removed
162+
}
163+
164+
console.log("I am outta here!");
165+
166+

‎manifest.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,15 @@
99
"default_popup": "popup.html"
1010
},
1111
"background": {
12-
"scripts": ["background.js"]
12+
"scripts": ["js/showdiff.js", "background.js"]
1313
},
1414
"permissions": ["notifications", "storage", "tabs", "*://*/*"],
1515
"content_scripts": [
1616
{
1717
"matches": ["*://*/*"],
1818
"run_at": "document_idle",
1919
"css": ["mystyles.css"],
20-
"js": ["js/showdiff.js"]
20+
"js": ["js/showdiff.js", "js/showdiff.js"]
2121
}
2222
],
2323
"web_accessible_resources": [

0 commit comments

Comments
 (0)