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,31 @@ 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
+    /**
+     * Get a style sheet for a url
      * @param {string} url
+     * @return {CSS.CSSStyleSheetHeader}
      */
     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) {
@@ -87,37 +92,112 @@ define(function CSSAgent(require, exports, module) {
         return urls;
     }
 
-    /** Reload a CSS style sheet from a document
+    /**
+     * Reload a CSS style sheet from a document
      * @param {Document} document
+     * @return {jQuery.Promise}
      */
     function reloadCSSForDocument(doc) {
         var style = styleForURL(doc.url);
         console.assert(style, "Style Sheet for document not loaded: " + doc.url);
-        Inspector.CSS.setStyleSheetText(style.styleSheetId, doc.getText());
+        return Inspector.CSS.setStyleSheetText(style.styleSheetId, doc.getText());
     }
 
-    /** Empties a CSS style sheet given a document that has been deleted
+    /**
+     * Empties a CSS style sheet given a document that has been deleted
      * @param {Document} document
+     * @return {jQuery.Promise}
      */
     function clearCSSForDocument(doc) {
         var style = styleForURL(doc.url);
         console.assert(style, "Style Sheet for document not loaded: " + doc.url);
-        Inspector.CSS.setStyleSheetText(style.styleSheetId, "");
+        return Inspector.CSS.setStyleSheetText(style.styleSheetId, "");
+    }
+
+    /**
+     * @private
+     * @param {jQuery.Event} event
+     * @param {header: CSSStyleSheetHeader}
+     */
+    function _styleSheetAdded(event, res) {
+        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, res.header]);
+    }
+
+    /**
+     * @private
+     * @param {jQuery.Event} event
+     * @param {styleSheetId: StyleSheetId}
+     */
+    function _styleSheetRemoved(event, res) {
+        var url = _styleSheetIdToUrl[res.styleSheetId],
+            header = url && _urlToStyle[url];
+
+        if (url) {
+            delete _urlToStyle[url];
+        }
+
+        delete _styleSheetIdToUrl[res.styleSheetId];
+
+        $(exports).triggerHandler("styleSheetRemoved", [url, header]);
+    }
+
+    /**
+     * @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/Documents/CSSDocument.js

@@ -48,7 +48,8 @@
 define(function CSSDocumentModule(require, exports, module) {
     "use strict";
 
-    var CSSAgent        = require("LiveDevelopment/Agents/CSSAgent"),
+    var _               = require("thirdparty/lodash"),
+        CSSAgent        = require("LiveDevelopment/Agents/CSSAgent"),
         CSSUtils        = require("language/CSSUtils"),
         EditorManager   = require("editor/EditorManager"),
         HighlightAgent  = require("LiveDevelopment/Agents/HighlightAgent"),
@@ -69,6 +70,7 @@ define(function CSSDocumentModule(require, exports, module) {
         this.doc.addRef();
         this.onChange = this.onChange.bind(this);
         this.onDeleted = this.onDeleted.bind(this);
+
         $(this.doc).on("change.CSSDocument", this.onChange);
         $(this.doc).on("deleted.CSSDocument", this.onDeleted);
 
@@ -81,33 +83,37 @@ define(function CSSDocumentModule(require, exports, module) {
         }
     };
 
-    /** Get the browser version of the StyleSheet object */
-    CSSDocument.prototype.getStyleSheetFromBrowser = function getStyleSheetFromBrowser() {
-        var deferred = new $.Deferred();
-
-        // WebInspector Command: CSS.getStyleSheet
-        Inspector.CSS.getStyleSheet(this.styleSheet.styleSheetId, function callback(res) {
-            // res = {styleSheet}
-            if (res.styleSheet) {
-                deferred.resolve(res.styleSheet);
-            } else {
-                deferred.reject();
-            }
-        });
+    /**
+     * @private
+     * Get the CSSStyleSheetHeader for this document
+     */
+    CSSDocument.prototype._getStyleSheetHeader = function () {
+        return CSSAgent.styleForURL(this.doc.url);
+    };
 
-        return deferred.promise();
+    /**
+     * @deprecated
+     * CSSStyleSheetBody was removed in protocol 1.1. This method is unused in Brackets 36.
+     * Get the browser version of the StyleSheet object
+     * @return {jQuery.promise}
+     */
+    CSSDocument.prototype.getStyleSheetFromBrowser = function getStyleSheetFromBrowser() {
+        return new $.Deferred().reject().promise();
     };
 
-    /** Get the browser version of the source */
+    /**
+     * Get the browser version of the source
+     * @return {jQuery.promise} Promise resolved with the text content of this CSS document
+     */
     CSSDocument.prototype.getSourceFromBrowser = function getSourceFromBrowser() {
-        var deferred = new $.Deferred();
-
-        this.getStyleSheetFromBrowser().done(function onDone(styleSheet) {
-            deferred.resolve(styleSheet.text);
-        }).fail(function onFail() {
-            deferred.reject();
-        });
-
+        var deferred = new $.Deferred(),
+            styleSheetId = this._getStyleSheetHeader().styleSheetId,
+            inspectorPromise = Inspector.CSS.getStyleSheetText(styleSheetId);
+
+        inspectorPromise.then(function (res) {
+            deferred.resolve(res.text);
+        }, deferred.reject);
+        
         return deferred.promise();
     };
 
@@ -118,17 +124,16 @@ define(function CSSDocumentModule(require, exports, module) {
         this.doc.releaseRef();
         this.detachFromEditor();
     };
- 
+
     /**
-     * Force the browser to update if the file is dirty
+     * @private
+     * Update the style sheet text content and redraw highlights
      */
     CSSDocument.prototype._updateBrowser = function () {
-        // get the style sheet
-        this.styleSheet = CSSAgent.styleForURL(this.doc.url);
+        var reloadPromise = CSSAgent.reloadCSSForDocument(this.doc);
 
-        // If the CSS document is dirty, push the changes into the browser now
-        if (this.doc.isDirty) {
-            CSSAgent.reloadCSSForDocument(this.doc);
+        if (Inspector.config.highlight) {
+            reloadPromise.done(HighlightAgent.redraw);
         }
     };
 
@@ -200,11 +205,7 @@ define(function CSSDocumentModule(require, exports, module) {
 
     /** Triggered whenever the Document is edited */
     CSSDocument.prototype.onChange = function onChange(event, editor, change) {
-        // brute force: update the CSS
-        CSSAgent.reloadCSSForDocument(this.doc);
-        if (Inspector.config.highlight) {
-            HighlightAgent.redraw();
-        }
+        this._updateBrowser();
     };
 
     /** Triggered if the Document's file is deleted */
@@ -241,11 +242,13 @@ define(function CSSDocumentModule(require, exports, module) {
         // WebInspector Command: CSS.getMatchedStylesForNode
         Inspector.CSS.getMatchedStylesForNode(node.nodeId, function onGetMatchesStyles(res) {
             // res = {matchedCSSRules, pseudoElements, inherited}
-            var codeMirror = this.editor._codeMirror;
+            var codeMirror = this.editor._codeMirror,
+                styleSheetId = this._getStyleSheetHeader().styleSheetId;
+
             var i, rule, from, to;
             for (i in res.matchedCSSRules) {
                 rule = res.matchedCSSRules[i];
-                if (rule.ruleId && rule.ruleId.styleSheetId === this.styleSheet.styleSheetId) {
+                if (rule.ruleId && rule.ruleId.styleSheetId === styleSheetId) {
                     from = codeMirror.posFromIndex(rule.selectorRange.start);
                     to = codeMirror.posFromIndex(rule.style.range.end);
                     this._highlight.push(codeMirror.markText(from, to, { className: "highlight" }));