jnikles / mutation-summary Goto Github PK

Mutations done with SVG DOM APIs are not registered on Chrome Canary 
(23.0.1238.0).

// DOM3 - Works
$svgElement.setAttribute('x', 100);
$svgElement.setAttribute('transform', 'matrix(1, 0, 0, 1, 0 0)';

// SVG DOM - Doesn't work
$svgElement.x.baseVal.value = 0;
$svgElement.transform.baseVal.clear()

The extension does not load because Chrome 23 requires a Version 2 Manifest 
file.

What steps will reproduce the problem?
1. Follow the readme with Chrome 23

What is the expected output? What do you see instead?
  The extension manager complains that the manifest file is not version 2 and does not load the extension

What version of the product are you using? On what operating system?
  Chrome 24 on Mac OS Mountain Lion

Please provide any additional information below.
  The attached files fix the problem: 
  - replace manifest.json with the v2-compatible attached version
  - remove bg.html and replace it with bg.bs (javascript inline scripts must be in separate files)
  - replace mirror.html by the attached mirror.html and mirror.js (inline scripts must be in separate files)

What steps will reproduce the problem?
1. include this script in a combined script file and reference in IE8 

What is the expected output? What do you see instead?
I would expect the script to have no affect in IE8, instead I see script errors 
and hence any scripts that come after it are not executed.

I've worked around this by changing .delete and .class to ['delete'] and 
['class'].

On line 490 of src/mutation-summary.js you have `if (!change.attributes)` where 
you should have `if (!change || !change.attributes)`

I want to observe elements with attributes starting with a certain string.  
These may not be whitespace-separated, and I only want to match at the start - 
normal CSS matching like [foo^=bar]

I have a clone implementing this, but the instructions for how to request a 
pull/merge are very nonexistent.  Any suggestions?  I'm happy to update the 
wiki too once it's in if you like.

Thanks, great work on this library.  Hope you don't mind my reversing some test 
assertions to match the mocha signatures in order to get better test failure 
messages.

What steps will reproduce the problem?
1. using mutation_summary.js, tree_mirror.js to replicate DOM
2. source page sends the packaged 'initialize' object
3. destination page - on implementing the recieved 'initialize' object - falls 
into error trap instead. No custom implementation upto this place. It is all 
tree_mirror.js alone.

What is the expected output? What do you see instead?
Expect: tree mirror getting replicated.
Getting: SCRIPT5009: 'HTMLDocument' is undefined @tree_mirror.js, line 36 
character 5 -->var doc = this.root instanceof HTMLDocument

What version of the product are you using? On what operating system?
IE9, Windows 7 32-bit

Currently Firefox extension which use the Jetpack SDK can't refer to 
Element.prototype since its undefined which in turn make the entire script fail 
silently (it seems that it will be supported from Firefox version 21).

In order to fix it I just changed the mozMatchesSelect check and the order of 
the checks at lines 19 to 23.

Some extra info https://bugzilla.mozilla.org/show_bug.cgi?id=765837

what prevents the tree-mirror to work two ways? If I try to set up both 
TreeMirror and TreeMirrorClient on both sides, only one way works at any given 
time. Obviously something has to be done to prevent both clients to go into a 
spin and report the results of the other side, so for that the TreeMirrorClient 
has to be disabled temporarily. But sitll- it only works in one direction. Why 
is that so?

What steps will reproduce the problem?
1. Include mutation-summary.js
2. Try to instantiate a MutationSummary object

What is the expected output? What do you see instead?
I expect to see nothing in the log on instantiation. Instead, I see this:

ReferenceError: Can't find variable: MutationObserver (mutation-summary.js:7)

What version of the product are you using? On what operating system?
This broke after updating to the latest commit f008c03 from yesterday, 
2013-07-29. I use it on OS X 10.8.4 with Safari 6.0.5.

Please provide any additional information below.
This is how I fixed the issue:

7 var MutationObserver = window.MutationObserver || 
window.WebKitMutationObserver || window.MozMutationObserver;
8 if (typeof MutationObserver === "undefined") {

I would like to use the mutation summary library to be notified of any changes 
under a given html element. I know that the element query can give me this, but 
only for added, reparented or deleted mutations.

I need to know *all* changes however (including attribute but most importantly 
the character data changes) under a particular node.

At the moment I am using the all filter, and then when I receive the summary 
object, I iterate through all changes to compare against my "root" node to 
verify there is a relation;  which is rather expensive to do after the fact

Because the spec says that disconnect() clears pending records, it's not safe 
to disconnect() outside of a Mutation Observers callback.

MutationSummary should implement a (callable outside the callback) 
suspend/resume feature which uses "internal" mutation records as markers. 
When/if Mutation Observers add suspend/resume -- use that.

Paul had an excellent suggestion for elementFilter:

It'll be common for people to care about elements with a particular class. We 
could do something silly like

div[class='*foo*'], 

but it'd be more natural to just support

div.foo

This would extend naturally to just 

".foo" (all elements with the foo class).

The implementation of this match have to do substring matching, but it only 
needs to visit elements whose class attribute has changed, so I think it's 
probably worth doing.

What steps will reproduce the problem?
1. Load MutationSummary script
2. Notice window.MutationSummary is undefined
3. Notice window.WebKitMutationObserver is defined

In safari, typeof WebKitMutationObserver is object, not function.

What steps will reproduce the problem?
1. Deploy the library with an "all" filter over this page, with Chrome: 
http://www.nytimes.com/2013/12/02/technology/e-books-hold-tight-to-features-of-t
heir-print-predecessors.html?ref=business&_r=3 
2. Wait for the page to change. (It does, periodically.)
3. With some luck, you well see the crash

What is the expected output? What do you see instead?

I see this stack trace on console:

Uncaught TypeError: Cannot read property 'attributes' of undefined
mutation-summary.js:490
MutationProjection.attributeChangedNodes mutation-summary.js:490
Summary mutation-summary.js:781
MutationSummary.createSummaries mutation-summary.js:1552
MutationSummary.observerCallback mutation-summary.js:1603
(anonymous function)

What version of the product are you using? On what operating system?

64cb75af (master branch)

Please provide any additional information below.

Since the callback crashed, we missed a bunch of updates.

What steps will reproduce the problem?
1. Take complex webpage, enable mutation-summary page-wide
2. jquery to overwrite the html of container with the contents of container: 
$("#container").html($("#container").html()) 

What is the expected output? What do you see instead?

The expected output would be that the mutation summary should indicate zero 
changes. 
What mutation summary provides has every element inside container removed and 
the identical (newly allocated) elements added back in. 

What version of the product are you using? On what operating system?
Everything


Please provide any additional information below.
I realize that doing something like writing in HTML to replace everything is 
effectively erasing and re-creating DOM elements which are not related to each 
other as far as the DOM is concerned. However I was hoping that since the goal 
of mutation-summary is to provide a summary of mutations, that this sort of 
mutation would be possible to analyze and report changes. I am looking to use 
it to generate  "difference" indicators (think of it as a "diff" operation, but 
instead of lines of text, it is performed over a hierarchical structure) where 
my DOM is generated each time rather than directly mutated (where if directly 
mutated, mutation-summary will do a good job of tracking the changes to provide 
a minimal summary).

https://groups.google.com/forum/?fromgroups=#!topic/mutation-summary-discuss/ols
h5jJt7t8

The idea is that clients may want to only poll for changes on their timeline. 
suspendDelivery() will accumulate changes and all will be reported when 
takeSummaries() is called. resumeDelivery() would resume end-of-microtask 
delivery of changes.

I am having trouble with building I am getting "Could not find symbol" errors. 
Can you please provide steps/makefile for it?

There are two use cases where we need to be able to get the old previous 
sibling of a deleted node, which currently is not possible.

For the document viewer on chrome OS, we have our own DOM of the MS Office file 
in memory inside our NaCl c++ engine.  We use the mutation summary library to 
keep any edits to the document in sync with our representation.

To do this we sequence all the mutations and send commands to our NaCl plugin, 
which works fine except for the deleted nodes.  Since we need to send these 
commands in sequence (one at a time), we need enough contextual information for 
our core to apply the same mutation.

Our core however does not know about webkits "text nodes". Instead we know 
about the parent span or rather character run.  Thus when a text node is 
deleted, we have to work out the offset of that text node, which we can do by 
walking the previousSibling chain.  But since the node is deleted, we need the 
old previousSibling to walk that chain.

A secondary use case is the revert of the mutation.  Any mutation that has 
happened, we need to be able to revert (in the case an error happened on the 
NaCl side).  For the same reason as above, but in this case also for non text 
nodes, we need to know the old previous sibling in order to be able to put the 
node back where it came from.

Adding support for getOldPreviousSibling for deleted nodes might be costly from 
a performance perspective, but perhaps we can add this behind a configuration?

What steps will reproduce the problem?
While working we figured out that if a text node is moved within the document ( 
More specifically, if the parent of text node changes ) mutation summary 
library do not inform about this change.

What is the expected output? What do you see instead?
Ideally the client of the library should be notified if the parent of text node 
is changed

Please provide any additional information below.
 I believe allowing 'query.characterData' while initializing reparented  array ( https://code.google.com/p/mutation-summary/source/browse/src/mutation-summary.js#787 )should solve the issue.

Once that changes are done we can update the API reference as well - 
https://code.google.com/p/mutation-summary/wiki/APIReference#The_characterData_Q
uery, as we will start seeing reparented in response

What steps will reproduce the problem?
The problem occurs when the user hits enter inside a span inside a paragraph, 
thereby creating a new paragraph and splitting the span. Unfortunately only my 
dev build shows the problem; I'm trying to create a test html page to show it, 
but no luck so far

What is the expected output? What do you see instead?
The first time you do this, all is well.  We receive a single callback with a 
summary object which contains three 'added' nodes. One new paragraph, one new 
span and one new <br> tag.  However, if you hit enter again (thereby creating 
another empty paragraph), we expect to see again a single call back with three 
new added nodes. This is indeed what happens on my test page.  But in my 
particular setup, I actually end up with three separate callbacks.

Having multiple callbacks would not be a problem, if not for the fact that the 
information inside the callbacks overlaps.

The first callback says there are two added nodes: a new paragraph and a new 
span element
The second callback says there are again two added nodes: a new span (which is 
the same as the first callback!) and a new br tag
The third callback says there is one added node: the br tag (same as from 
second callback)


Note: i am still trying to produce a test html page, but thought I'd raise this 
in case there is some known race condition / error.  Also note: i'm not 
disconnecting or reconnecting to the observer, which might have explained it?

What steps will reproduce the problem?
1. Open attached zip
2. open the .html in browser
3.  read the console log in devtools

The zip file contains a .html, a copy of mutation_summary, and 
PatientSelector.js. 

The copy of mutation_summary has been slightly modified to mark MutationSummary 
objects with a UID and write console.log for creation, callback, and disconnect.

PatientSelector.whenSelectorAll(selector, text, callback) first calls 
querySelector then compares the text content of any hit to the 'text' arg. If 
this fails, it sets up a MutationSummary to wait for the selector match. When 
the MutationSummary selector match arrives, we set up a text matcher as well.

Once we find a match, we should disconnect() all of the pending observers.

The test calls whenSelectorAll twice, both on selector .output. One text match 
is 'W'; the other is 'WW'. Then we append 'W' five times to .output.

The output shows 4 observers created, numbered 1,2,3,4. We see 4 reports of 
disconnect() calls. However we see callbacks for 1 and 3 continuing after the 
disconnect() calls.

I must not be understanding something about the MutationSummary library, but I 
can't figure out how to disconnect.

mutation-summary.js and tree-mirror.js use underscores in the src and util 
directories, but the examples are looking for mutation_summary.js and 
tree_mirror.js

What steps will reproduce the problem?
1. Created an observer
2. Disconnected it
3. Reconnected after the page is loaded and some elements set to contentEditable

What is the expected output? What do you see instead?
I expected that changes introduced by editing the editable content would be 
seen by the observer and sent via the callback that I set.

What version of the product are you using? On what operating system?
Not sure, the only version I see is 0.0.0

Please provide any additional information below.
Test code:
var observer = new MutationSummary({
  callback: handleCardChanged,
  queries: [{ all: true }]
});
observer.disconnect();
function handleCardChanged(summaries) {
  var cardSummary = summaries[0];
  if (cardSummary.added) {
  cardSummary.added.forEach(function(newEl) {
    console.log('added '+newEl);
  });
 };
  if (cardSummary.characterChanged) {
  cardSummary.characterChanged.forEach(function(changedEl) {
    console.log('changed '+changedEl);
  });
 };
  if (cardSummary.removed) {
  cardSummary.removed.forEach(function(removedEl) {
    console.log('removed '+removedEl);
  });
 };
};
$( document ).ready( function() {
  console.log("ready");

  $(".card-slot").attr("contentEditable", 'true');
  observer.reconnect();
  debugger;
 console.log("debugged");
} )

Hello,

MutationObserver work fine when I want to observe single level childLists. I am 
trying to convert a more complex extension to MutationSummary but for some 
reason I am not understanding it because it isn't working for me as expected.

What I am trying to do is creating a Chrome Extension content script, which I 
can process "each" Google+ post. If you open up your Google+ Stream, I want the 
content script to read "each" card so I can process it (such as read the post, 
add a button next to the share button, etc).

It works fine with the older MutationEvents DOMNodeInserted, but for some 
reason, I can't get it to work for MutationSummary.

Here is my MutationSummary code, would appreciate any help!

https://gist.github.com/2382261

You could download the files below into a folder and load it in an extension.

Thanks,
Mohamed Mansour

Hey, 
this looks good. However, I hvae a hard time finding how/where you can srialize 
the output of MutationSummary to send over a network and how to use the 
tree-system to repoduce them. Just trying to do JSON.stringify on the output in 
the shuffle example gives an error.
 Is there anywhere you can point me to find out more about this? I have looked through the included examples, but have not gotten much further.

What steps will reproduce the problem?
1. open attached html
2. place cursor between two lines of text in the empty paragraph
3. insert a character eg 'x' (notice console log states mutation summary is 
correct for this mutation)
4. use undo and notice in the console log that the mutation summary for the 
undo is incorrect

What is the expected output? What do you see instead?
The "removed" text node on the undo mutation should still have textContent 'x', 
but it doesn't. Furthermore I should not be able to use 'getOldCharacterData' 
function on the removed node, since it is *not* listed in the char data changed 
array.
Alternatively the node is correct, but it should have been listed in the 
characterDataChanged array, rather than the removed array..

What steps will reproduce the problem?
1. Open http://closure-compiler.appspot.com/
2. Copy paste entire mutation_summary.js into the textarea
3. Hit compile

What is the expected output? What do you see instead?
It should compile fine and produce obfuscated code. Instead it gives lot of 
errors.

What steps will reproduce the problem?
1.  Open a new tab to about:blank
2.  Hit Ctrl-Shift-J to go to console
3.  type:
function hi(summaries) {
  console.log("here are the summaries!: ");
  console.log(summaries);
}
var summaryObserver = new MutationSummary({ callback: hi });

What is the expected output? What do you see instead?
Expected the MutationSummary to be created successfully, so:
'undefined'

should be returned from the var statement.  I thought my code would work since 
the main page on http://code.google.com/p/mutation-summary says this object was 
shipped in Chrome 18.

Instead, I get:
"ReferenceError: MutationSummary is not defined"

There's probably something important that I'm missing.  Sorry, I'm new to this, 
this is my first post!


What version of the product are you using? On what operating system?
Chrome Version 21.0.1145.0 dev


Please provide any additional information below.

What steps will reproduce the problem?
1. I just followed the instruction, but I changed the icon to another icon.
2. I went to Google, searched some random words.
3. I clicked the plugin icon

What is the expected output? What do you see instead?
There should be another mirror tab, but I could not get it

What version of the product are you using? On what operating system?
source code is "version": "2", while chrome is Version 25.0.1364.172 running on 
Mac OS 10.8.3

Sending reparanted node changes in case of characterData/TEXT_NODE also.

For More details - 
https://code.google.com/p/mutation-summary/issues/detail?id=35#makechanges

Need to figure out what escaping webkit supports for querySelector, e.g. so you 
can match

<foo:bar> or <foo.bar>

Hi, is there any reason why the npm package is not published?
A package.json is there...

Anyway, I packaged it from a temporary fork, and pushed an NPM package called 
`mutation-summary-x`.
I will delete if once an official package is available.
Here is the commit which does the packaging: 
https://github.com/csillag/mutation-summary/commit/31264668e372d0629cc8d40db0552
3d08f8daf5b

(It also changes the build process, so that the JS file is generated in the 
prepublish step, so it's no longer required to have it in GIT.) 

What steps will reproduce the problem?
1. Add an element to the DOM
2. Change an attribute of that element

What is the expected output?
The MutationSummary should record and output both an "added" event object and a 
"attributeChanged" event object.

What do you see instead?
The MutationSummary records an "added" event, but ignores the 
"attributeChanged" event.

What version of the product are you using?
Latest version from this project page and the hypothesis github.

On what operating system?
Window 7 (64bit)

Please provide any additional information below.
I have traced the problem down to line: 502 
https://github.com/hypothesis/mutation-summary/blob/master/src/mutation-summary.
js#L502

But was unable to find a solution. It appears that because the element is new 
on the page and it's old parent does not exist, 
"this.treeChanges.reachabilityChange(node)" returns "1", causing the loop to 
"continue;" and the program never gets to the part that takes care of adding 
elements to the "attributeChanged" event object.

I've copy-pasted the entire screensharing project and everything seems to run 
just fine, except on the receiving part.

Firebug inform of the error on mirror.js on line 51:
Uncaught TypeError: Function.prototype.apply: Arguments list has wrong type

Somehow it does not see msg.args as a list, which it does seems to be.

If I output msg.args to the console it does look like a list.

I have not changed anything in your code.

What steps will reproduce the problem?
1. Enable MutationSummary on a complicated dynamic site (Trello.com for example)
2. Query only for element:div


What is the expected output? What do you see instead?
Works for a few dozen summary events. Then I get maximum callstack exceeded 
exception, after which observer is dead.


What version of the product are you using? On what operating system?
Chrome 35 on new MacbookPro.   MutationSummary downloaded in the last 2 months.


Please provide any additional information below.
Looking for advice on how to prevent this.  Is it likely fact of life with 
MutationObserver on complicated site, or due to MutationSummary wrapper?

What steps will reproduce the problem?
1. Follow the README for the screen_sharing_extension

What is the expected output? What do you see instead?
Chrome extension manager complains that the manifest is not in version 2 format

What version of the product are you using? On what operating system?
Chrome 23 on Mac OS Mountain Lion

Please provide any additional information below.
As with issue 14, this is easy to fix:
- add "manifest_version": 2 in manifest.json
- replace "background_page" line in manifest.json by
  "background": {
    "scripts": ["bg.js"]
  },
- turn bg.html into bg.js (strip the non-Javascript part)