Use styleSheetAdded and styleSheetRemoved, replaces getAllStylesheets

src/LiveDevelopment/Agents/CSSAgent.js

@@ -28,17 +28,25 @@
 /**
  * CSSAgent keeps track of loaded style sheets and allows reloading them
  * from a {Document}.
+ *
+ * CSSAgent dispatches styleSheetAdded and styleSheetRemoved events, passing
+ * the URL for the added/removed style sheet.
  */
-
 define(function CSSAgent(require, exports, module) {
     "use strict";
 
     require("thirdparty/path-utils/path-utils.min");
 
     var Inspector = require("LiveDevelopment/Inspector/Inspector");
 
-    var _load; // {$.Deferred} load promise
-    var _urlToStyle; // {url -> loaded} style definition
+    /** @type {Object.<string, CSS.CSSStyleSheetHeader>} */
+    var _urlToStyle;
+
+    /** @type {Object.<string, string>} */
+    var _styleSheetIdToUrl;
+
+    /** @type {boolean} */
+    var _getAllStyleSheetsNotFound = false;
 
     /** 
      * Create a canonicalized version of the given URL, stripping off query strings and hashes.
@@ -49,34 +57,29 @@ define(function CSSAgent(require, exports, module) {
         return PathUtils.parseUrl(url).hrefNoSearch;
     }
 
-    // WebInspector Event: Page.loadEventFired
-    function _onLoadEventFired(event, res) {
-        // res = {timestamp}
+    /**
+     * @private
+     * WebInspector Event: Page.frameNavigated
+     * @param {jQuery.Event} event
+     * @param {frame: Frame} res
+     */
+    function _onFrameNavigated(event, res) {
+        // Clear maps when navigating to a new page
         _urlToStyle = {};
-        Inspector.CSS.enable().done(function () {
-            Inspector.CSS.getAllStyleSheets(function onGetAllStyleSheets(res) {
-                var i, header;
-                for (i in res.headers) {
-                    header = res.headers[i];
-                    _urlToStyle[_canonicalize(header.sourceURL)] = header;
-                }
-                _load.resolve();
-            });
-        });
+        _styleSheetIdToUrl = {};
     }
 
     /** Get a style sheet for a url
      * @param {string} url
      */
     function styleForURL(url) {
-        if (_urlToStyle) {
-            return _urlToStyle[_canonicalize(url)];
-        }
-
-        return null;
+        return _urlToStyle[_canonicalize(url)];
     }
 
-    /** Get a list of all loaded stylesheet files by URL */
+    /**
+     * @deprecated Use styleSheetAdded and styleSheetRemoved events
+     * Get a list of all loaded stylesheet files by URL
+     */
     function getStylesheetURLs() {
         var urls = [], url;
         for (url in _urlToStyle) {
@@ -104,20 +107,98 @@ define(function CSSAgent(require, exports, module) {
         console.assert(style, "Style Sheet for document not loaded: " + doc.url);
         Inspector.CSS.setStyleSheetText(style.styleSheetId, "");
     }
+
+    /**
+     * @private
+     * @param {jQuery.Event} event
+     * @param {header: CSSStyleSheetHeader}
+     */
+    function _styleSheetAdded(event, res) {
+        if (!_urlToStyle) {
+            return;
+        }
+
+        var url = _canonicalize(res.header.sourceURL),
+            existing = _urlToStyle[url];
+
+        // detect duplicates
+        if (existing && existing.styleSheetId === res.header.styleSheetId) {
+            return;
+        }
+
+        _urlToStyle[url] = res.header;
+        _styleSheetIdToUrl[res.header.styleSheetId] = url;
+
+        $(exports).triggerHandler("styleSheetAdded", [url]);
+    }
+
+    /**
+     * @private
+     * @param {jQuery.Event} event
+     * @param {styleSheetId: StyleSheetId}
+     */
+    function _styleSheetRemoved(event, res) {
+        if (!_urlToStyle) {
+            return;
+        }
+
+        var url = _styleSheetIdToUrl[res.styleSheetId];
+
+        if (url) {
+            delete _urlToStyle[url];
+        }
+
+        delete _styleSheetIdToUrl[res.styleSheetId];
+
+        $(exports).triggerHandler("styleSheetRemoved", [url]);
+    }
+
+    /**
+     * @private
+     * Attempt to use deleted API CSS.getAllStyleSheets
+     * @param {jQuery.Event} event
+     * @param {frameId: Network.FrameId}
+     */
+    function _onFrameStoppedLoading(event, res) {
+        // Manually fire getAllStyleSheets since it will be removed from
+        // Inspector.json in a future update
+        Inspector.send("CSS", "getAllStyleSheets").done(function (res) {
+            res.headers.forEach(function (header) {
+                // _styleSheetAdded will ignore duplicates
+                _styleSheetAdded(null, { header: header });
+            });
+        }).fail(function (err) {
+            // Disable getAllStyleSheets if the first call fails
+            _getAllStyleSheetsNotFound = (err.code === -32601);
+            $(Inspector.Page).off("frameStoppedLoading.CSSAgent", _onFrameStoppedLoading);
+        });
+    }
+
+    /** Enable the domain */
+    function enable() {
+        return Inspector.CSS.enable();
+    }
 
     /** Initialize the agent */
     function load() {
-        _load = new $.Deferred();
-        $(Inspector.Page).on("loadEventFired.CSSAgent", _onLoadEventFired);
-        return _load.promise();
+        $(Inspector.Page).on("frameNavigated.CSSAgent", _onFrameNavigated);
+        $(Inspector.CSS).on("styleSheetAdded.CSSAgent", _styleSheetAdded);
+        $(Inspector.CSS).on("styleSheetRemoved.CSSAgent", _styleSheetRemoved);
+
+        // getAllStyleSheets was deleted beginning with Chrome 34
+        if (!_getAllStyleSheetsNotFound) {
+            $(Inspector.Page).on("frameStoppedLoading.CSSAgent", _onFrameStoppedLoading);
+        }
     }
 
     /** Clean up */
     function unload() {
         $(Inspector.Page).off(".CSSAgent");
+        $(Inspector.CSS).off(".CSSAgent");
     }
 
     // Export public functions
+    exports.enable = enable;
     exports.styleForURL = styleForURL;
     exports.getStylesheetURLs = getStylesheetURLs;
     exports.reloadCSSForDocument = reloadCSSForDocument;

src/LiveDevelopment/Inspector/Inspector.js

@@ -134,8 +134,12 @@ define(function Inspector(require, exports, module) {
         } else {
             var deferred = new $.Deferred();
             promise = deferred.promise();
-            callback = function (result) {
-                deferred.resolve(result);
+            callback = function (result, error) {
+                if (error) {
+                    deferred.reject(error);
+                } else {
+                    deferred.resolve(result);
+                }
             };
         }
 
@@ -144,16 +148,30 @@ define(function Inspector(require, exports, module) {
 
         // verify the parameters against the method signature
         // this also constructs the params object of type {name -> value}
-        for (i in signature) {
-            if (_verifySignature(args[i], signature[i])) {
-                params[signature[i].name] = args[i];
+        if (signature) {
+            for (i in signature) {
+                if (_verifySignature(args[i], signature[i])) {
+                    params[signature[i].name] = args[i];
+                }
             }
         }
+
         _socket.send(JSON.stringify({ method: method, id: id, params: params }));
 
         return promise;
     }
 
+    /**
+     * Manually send a message to the remote debugger
+     * All passed arguments after the command are passed on as parameters.
+     * If the last argument is a function, it is used as the callback function.
+     * @param {string} domain
+     * @param {string} command
+     */
+    function send(domain, command, varargs) {
+        return _send(domain + "." + command, null, varargs);
+    }
+
     /** WebSocket did close */
     function _onDisconnect() {
         _socket = undefined;
@@ -186,20 +204,27 @@ define(function Inspector(require, exports, module) {
      * @param {object} message
      */
     function _onMessage(message) {
-        var response = JSON.parse(message.data);
+        var response = JSON.parse(message.data),
+            callback = _messageCallbacks[response.id];
+
+        if (callback) {
+            // Messages with an ID are a response to a command, fire callback
+            callback(response.result, response.error);
+            delete _messageCallbacks[response.id];
+        } else if (response.method) {
+            // Messages with a method are an event, trigger event handlers
+            var domainAndMethod = response.method.split("."),
+                domain = domainAndMethod[0],
+                method = domainAndMethod[1];
+
+            $(exports[domain]).triggerHandler(method, response.params);
+        }
+
+        // Always fire event handlers for all messages/errors
         $exports.triggerHandler("message", [response]);
+
         if (response.error) {
             $exports.triggerHandler("error", [response.error]);
-        } else if (response.result) {
-            if (_messageCallbacks[response.id]) {
-                _messageCallbacks[response.id](response.result);
-                delete _messageCallbacks[response.id];
-            }
-        } else {
-            var domainAndMethod = response.method.split(".");
-            var domain = domainAndMethod[0];
-            var method = domainAndMethod[1];
-            $(exports[domain]).triggerHandler(method, response.params);
         }
     }
 
@@ -363,5 +388,6 @@ define(function Inspector(require, exports, module) {
     exports.connect = connect;
     exports.connectToURL = connectToURL;
     exports.connected = connected;
+    exports.send = send;
     exports.init = init;
 });