REVIEW ONLY: Basic DOM manipulation via RemoteAgent

[jasonsanjose]

Injects jQuery via RemoteAgent. Exposes basic DOM manipulation via RemoteAgent.remoteElement(data-brackets-id). I used jQuery instead of the Inspector DOM APIs (https://developers.google.com/chrome-developer-tools/docs/protocol/tot/dom) for a few reasons:

• DOM API does not have a method for inserting new elements. The Inspector API can do just about everything else though: attribute CRUD, remove nodes (elements, attributes, text), etc.
• Lessens dependency on Chrome's Inspector API. Injecting jQuery may be desirable in the future for expanded live preview browser support.
• Using jQuery attribute selectors $("[data-brackets-id=n]") to modify DOM in-browser is easier than maintaining our own DOM tree (see DOMAgent and DOMNode modules), calling the DOM API, resolving the RemoteObject, and modifying the RemoteObject and requires less async calls :)
• Simplifies creation of new DOM elements, e.g.

// insert a new sibling before element N
RemoteAgent.remoteElement(N).before(htmlString);

Use HTMLInstrumentation._getTagIDAtDocumentPos(editor, cursor) to get the data-brackets-id for the given cursor position.

The jQuery methods currently exposed on a RemoteElement are the following: attr, removeAttr, before, after, append, prepend, text, detach (in case we want try getting undo to work re-insert a node), remove and finally html in case we want to blow up the entire content of an element for difficult use cases like mixed content.

[njx]

Just one general thought...I think it might be better if we used ordinary DOM APIs instead of jQuery, to avoid problems with injecting incompatible versions of jQuery, etc. Have you thought about whether that would be significantly harder? For the kinds of things we're trying to do (individual node addition/deletion), it seems like it might not be that hard to just use ordinary DOM APIs. (I'm not sure if there's an easy DOM API to search for a given data attribute value, but that also doesn't seem hard to roll our own.)

[gruehle]

You can use document.querySelector("[data-brackets-id='42']") or document.querySelectorAll("[data-brackets-id='42']") to find the element(s) with a given data attribute value.

[jasonsanjose]

Yep, @gruehle is right that document.querySelector works just fine.

@njx to avoid jQuery collisions I'm using http://api.jquery.com/jQuery.noConflict/. The docs don't recommend loading multiple versions of jQuery, but so far it works as advertised. Would using a custom jQuery build that only pulls in the DOM manipulation APIs that we need be a better alternative?

I also wanted to avoid reinventing the wheel for parsing an htmlString in-browser and dealing with character encode/decode and escaping issues...at least for this prototyping stage.

So far, this solution assumes that elements are the only nodes that have IDs. In the thread late last Friday we started talking about giving IDs to non element nodes like text and comments. Guess I need to think about that more.

[njx]

I think @dangoor was right that we don't actually have to worry about it for text and comments, since those nodes don't have behavior that we need to worry about clobbering (i.e., it's fine for us to completely replace a text node instead of preserving it and changing its text).

[jasonsanjose]

Closing. Merged into https://github.com/adobe/brackets/tree/ResearchLiveHTML branch