rafaelw / mutation-summary Goto Github PK

Hi Rafael,

First of all I want to thank you for your efforts maintaining this library, it's been integral for detecting changes and maintaining undo history for an inline editor I've been working on.

Recently I ran into a problem where characterDataChanged was empty for a summary in which a text node is first emptied (node.data = "") and then removed from the dom. The resulting summary lists the removal of the node but not the changed characterData ( open console on http://jsfiddle.net/f153aczu/2/ )

This is causing problems with performing undo/redo as the node can be restored, but the text content of the Node is lost. That's why I suggest the following change (aartrost/mutation-summary@7936be7):

if (2 /* STAYED_IN */ !== this.treeChanges.reachabilityChange(target))

->

if ([2 /* STAYED_IN */, 5 /* EXITED */].indexOf(this.treeChanges.reachabilityChange(target)) === -1)

This change will enable the reporting of characterDataChanged for removed nodes, enabling users to properly restore said nodes.

PS: If you're interested I can propose an example based on my custom undo/redo build on top on mutation-summary.

I was trying the PageMirror extension a several pages, and upon trying http://snapsvg.io/#, I found that the SVG was not being rendered on the mirror!

original page:

mirrored page:

Instead, as you can see, the text of the svg element is displayed.
Looking in the DOM, I see that the svg tag and all it's children are indeed mirrored into the mirror's DOM. I just don't understand why they don't display.

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

I’m using mutation-summary, great work by the developer(s). The problem I’m facing is when I’m doing page mirroring inside an iframe instead of HTML page it does not work in firefox but works fine is every other available browser

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=35

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_Query, as we will start seeing reparented in response

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=33

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

we are using tree_mirror and mutation_summery we are trying to mirror angular application.
when we startmirroring it is not sending all dom element to the agent

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=27

(from bruce.krysiak)
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.

Actually, it wasn't too hard to also throw in the rest of the missing attribute selectors:

[foo$=bar]
[foo*=bar]
[foo|=bar]

I almost skipped the hyphen matcher, but since I did the rest I figured it was worthwhile. The others seem valuable at least. All in the same cloned repo: https://code.google.com/r/brucekrysiak-mutation-summary/source/browse

Title says it all.

Great project. I love what you've done. I've played with it through Live Helper.https://livehelperchat.com/ and the co-browsing feature they have. At the moment it doesn't seem to support SVGs.

I have a site that requires the use of SVG and this project doesn't seem to send through that data. Is there any reason that SVG support is left out?

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=36

Hello!
I' am using this lib to build a chrome extension. I want to organize the code under the AMD standard. However, mutation-summary seems to be a non-AMD lib. I have read about the some instructions. So can it be done by following the instructions? Or any examples about how to use this lib under AMD?

Thank you all!

Is there a way to mark what changes happened during the callback?

var observerNew = new MutationSummary({
    queries: [
      {
        element: 'input[type=password]'
      }
    ],
    callback: function(mutations) {
        console.log('inside the callback');
    },
  });

This is the code i have been using. it worked before but stopped working after i updated my OS to mac high sierra (version 10.13.1).

This is in chrome.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

The Map and WeakMap primordial has been part of ECMAScript (and thus JavaScript) for many years now. I'm reasonably certain that, among the browsers listed on the MutationObserver page, most have reached end-of-life for the versions that don't support Map or WeakMap a long time ago.

WeakMap would be preferable. The only place NodeMap.prototype.keys is used is line 670 of the current code (change.maybeMoved.keys().forEach(isMoved);).

I have been using mutation summary with one of the firefox addon I have developed.
I used it observer anchors with mailto link. It was all working fine.
Recently our colleque reported its system gets clogged when pages loads.
Myself looked at the page I see a very large data being loaded via ajax and firefox memory get exhaust. Suddenly the page gets hanged and after sometime popup error shows that it stopped while executing the mutation summary.
Please Advise

Hi, I've been taking a look at mutation-summary for a project I'm working on. Great library, very impressive, thanks to all for their work on it.

For my use case, it would be helpful to have something specific to detecting and working with style changes. At present, if you change a style of some element (let's say you set background-color to "red" or whatever using the browser's dev tools / inspector panel), the MutationSummary picks that up as an attribute-level change on the "style" attribute. This is of course very helpful already, but it would be even better to be able to set some kind of optional flag that also gave me the CSS styles that had changed/added/removed on each element, etc.

Does anyone know if I'm missing something that's already in place somewhere that I'm just missing? If not, and if I were to write a bit of code that "notices" the additions/removals/changes, which I suspect would be pretty straightforward, would you be interested in a PR contribution etc., or do you feel that this kind of thing should stay out of the library's scope?

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=32

I'm trying to use this library with a version of the TreeMirror to have support staff for our application be able to watch a user.

This is currently working pretty well (if we make our form inputs mirror their values to an attribute on the input as well)... however, invariably, the mirror will get lost at some stage and stop recognising where various changes go ('ouch' errors thrown), and I was hoping that the client watching could just tell the mirror to re-initialise the page, send the whole DOM again.

However, I've tried this a number of ways, and none seem to work (see the commented out bits to see what I've tried):

TreeMirrorClient.prototype.refreshDOM = function(){
        var rootId = this.serializeNode(this.target).id;
        var children = [];
        for (var child = this.target.firstChild; child; child = child.nextSibling)
            children.push(this.serializeNode(child, true));
        console.log("refreshDOM["+rootId+"] ",children);
        //this.mirror.initialize(rootId, children);
        this.mirror.applyChanged(children);//,children); //Remove all, add all
    };

Hi Rafael,
can you please help me on this as i type any this on admin side it not reflecting back on customer website.
customer side changes reflecting on Admin page. can you just explain me how we can achieve this.

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=19

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

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.

Hey,

over at http://github.com/marcelklehr/dom-ot it would be nice to have a way to find out the index a removed dom node had in its parent's childNodes NodeMap. Currently, there's only oldPreviousSibling, however, if that has also been removed, there's no way to find out which index it had.

Hi,

When I use mutationSummary to observe changes to images, I can see that each image has a currentSrc property.

I cannot observe this property with an attributes query and the items returned by the mutationSummary query do not have a currentSrc attached to them?

Is there an easy way to do this? With the increasing use of elements and srcsets, being able to reference the currentSrc with a mutationSummary would be very helpful.

Alternatively, is there a workaround, such a re-running the query at intervals to compare the output arrays?

Any good ideas? I'm a bit stuck.

Great library, by the way, it's just so easy and powerful.

Tom

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=28

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

I was wondering if you could go through it with me line by line. I'd love to contribute as I think this is an amazing project :)

In Firefox, mutation observer is considering textnode content change as added and removed.
since in tree-mirror.js we process nodes that are removed first and then process the one which are added, it result in textnode getting added multiple times. In Chrome, mutation observer considers the same textnode content change as valueChanged.

CHROME:
mutations- oldValue: oldText and target:text [data: newText, nodeName:#text, nodeValue: newText]
summaries- valueChanged:text [data: newText, nodeName:#text, nodeValue: newText]

FIREFOX:
mutations- [addedNodes 0: [data: newText, nodeName:#text, nodeValue: newText], removedNodes 0: [data: oldText, nodeName:#text, nodeValue: oldText]]
summaries- [added 0: [data: newText, nodeName:#text, nodeValue: newText], removed 0: [data: oldText, nodeName:#text, nodeValue: oldText]]

We have given both childList and subtree as true. I'm guessing chrome might be giving preference to subtree and hence returning oldValue/target while firefox might be giving preference to childList hence returning added/removed node. Am I right?

How do I make sure firefox picks it up as valueChanged instead of adding+removing the textnode? Can this be fixed here itself or should I do some kind of sequencing over the messages?

Hi, I just installed screen share plugin on developer mode on Chrome Version 54.0.2840.98 (64-bit) on OS X, but seems like it doesn't work.
I clicked on the extension icon and seems like nothing is happening. Can you please help me in resolving the same.

Moved from: https://code.google.com/p/mutation-summary/issues/detail?id=2

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

<foo:bar> or <foo.bar>

The way to do this is

querySelecto('foo\\:bar') or querySelector('foo\\.bar'). (Escape the character which , which itself needs to be escaped (weee....).

Need to update the selector parser to support this.

If anyone hits this bug, star it and add a comment that you'd like it fixed. (I'm not sure anyone is going to ever need this).

I need to monitor a specific nodes text change, But I don't want to add the characterData option on a global level since it seems too much overhead.
The change doesn't show up in the summary if I only specify the element.
How can I do that?

I noticed that the screen mirroring app does not seem to support the base urls correctly. What would be the best method to make sure the src and href attributes that are relative urls have the base url's prepended before sending them to node?

Hello there! I'm trying out the screen-mirror-extension and I must say it works very well! Only thing I notice is that scrolling is not mirrored, is that something you have to implement by yourself?