Merge pull request njx#4 from sebaslv/related-docs

Get related documents from the browser page

documents/LiveHTMLDocument.js

@@ -57,6 +57,7 @@ define(function (require, exports, module) {
         LiveDocument.apply(this, arguments);
 
         this._instrumentationEnabled = false;
+        this._relatedDocuments = null;
 
         this._onChange = this._onChange.bind(this);
         $(this.doc).on("change", this._onChange);
@@ -88,6 +89,20 @@ define(function (require, exports, module) {
                 // TODO: handle error, wasThrown?
                 self.protocol.evaluate([clientId], command);
             });
+
+            //TODO: getRelated at this point just retrieves an initial status. Need to monitor changes 
+            //by listening to events triggered from the browser or check status in other places.
+            //TODO:Should we listen some sort of 'ready' event from the page rather than perform 
+            //this call as part of the connection handler? 
+            if (!self._relatedDocuments) {
+                self.protocol.getRelated([clientId])
+                    .then(function(msg){
+                        self._relatedDocuments = msg.related;
+                    })
+                    .fail(function(err){
+                        console.log("error trying to get related documents:" + err);
+                    });
+            }
         }
 
         // TODO: race condition if the version of the instrumented HTML that the browser loaded is out of sync with
@@ -274,6 +289,16 @@ define(function (require, exports, module) {
             });
         }
     };
+
+     /**
+     * For the given path, check if the document is related to te live HTML document.
+     * Related means that is an external Javascript or CSS file that is included as part of the DOM.
+     * @param {String} fullPath.
+     * @return {boolean} - is related or not.
+     */
+    LiveHTMLDocument.prototype.isRelated = function(fullPath) {
+        return _.contains(this._relatedDocuments, this.urlResolver(fullPath));
+    };
 
     // Export the class
     module.exports = LiveHTMLDocument;

protocol/LiveDevProtocol.js

@@ -175,6 +175,24 @@ define(function (require, exports, module) {
         );
     }
 
+    /**
+     * Protocol method. Retrieves related docs (external JS files and stylesheets), and returns a promise
+     * that will be fulfilled with an object that contains two collections of URLs (scripts and stylesheets).
+     * @param {number|Array.<number>} clients A client ID or array of client IDs to retrieve related docs from.
+     * @return {$.Promise} A promise that's resolved with the return value from the first client that responds
+     *      to the operation.
+     * TODO: we should probably take a particular client  as the reference for the query if we assume that DOM 
+     * is always the same for all clients?
+     */
+    function getRelated(clients) {
+        return _send(
+            clients,
+            {
+                method: "Document.getRelated",
+                params: {}
+            }
+        );
+    }
     /**
      * Closes the connection to the given client. Proxies to the transport.
      * @param {number} clientId
@@ -187,5 +205,6 @@ define(function (require, exports, module) {
     exports.getRemoteScript = getRemoteScript;
     exports.launch = launch;
     exports.evaluate = evaluate;
+    exports.getRelated = getRelated;
     exports.close = close;
 });

protocol/remote/LiveDevProtocolRemote.js

@@ -59,6 +59,37 @@
                     result: JSON.stringify(result) // TODO: in original protocol this is an object handle
                 });
             }
+            //TODO: Decouple stylesheets from scripts and provide events to track changes (added/removed). 
+            //Mechanism for extending protocol should probably change first.
+            if (msg.method === "Document.getRelated") {
+                console.log("Document.getRelated");
+                var related = {scripts: {}, stylesheets: {}};
+
+                //iterate on document scripts (HTMLCollection doesn't provide forEach iterator).
+                for (var i=0; i < document.scripts.length ; i++){
+                    //add only external scripts
+                    if (document.scripts[i].src) { 
+                        related.scripts[document.scripts[i].src] = true; 
+                    }
+                }
+                //iterate on document.stylesheets (StyleSheetList doesn't provide forEach iterator).
+                for (var j=0; j < document.styleSheets.length ; j++){
+                    var s = document.styleSheets[j];
+                    if (s.href) { 
+                        related.stylesheets[s.href] = true; 
+                    }
+                    //check for @import rules
+                    var rules = s.cssRules;
+                    for (var k=0; k < rules.length; k++){
+                        if (rules[k].href) {
+                            related.stylesheets[rules[k].styleSheet.href] = true;
+                        }
+                    }
+                }
+                this.respond(msg, {
+                    related: JSON.stringify(related)
+                });
+            }
         },
 
         /**