DevTools: Track CSSStyleSheetHeaders in the front-end real time

Source/devtools/front_end/CSSStyleModel.js

Index: Source/devtools/front_end/CSSStyleModel.js
diff --git a/Source/devtools/front_end/CSSStyleModel.js b/Source/devtools/front_end/CSSStyleModel.js
index 125a46d9a68eabf66642f68a9e3831f48c6d62cb..03d05612ddf0d2018805c2fe4072178564b55e2a 100644
--- a/Source/devtools/front_end/CSSStyleModel.js
+++ b/Source/devtools/front_end/CSSStyleModel.js
@@ -73,7 +73,9 @@ WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(matchArray)
 }
 
 WebInspector.CSSStyleModel.Events = {
+    StyleSheetAdded: "StyleSheetAdded",
     StyleSheetChanged: "StyleSheetChanged",
+    StyleSheetRemoved: "StyleSheetRemoved",
     MediaQueryResultChanged: "MediaQueryResultChanged",
     NamedFlowCreated: "NamedFlowCreated",
     NamedFlowRemoved: "NamedFlowRemoved",
@@ -358,6 +360,14 @@ WebInspector.CSSStyleModel.prototype = {
     },
 
     /**
+     * @return {Array.<CSSAgent.CSSStyleSheetHeader>}
+     */
+    styleSheetHeaders: function()
+    {
+        return Object.values(this._resourceBinding._styleSheetIdToHeader);
+    },
+
+    /**
      * @param {DOMAgent.NodeId} nodeId
      */
     _ownerDocumentId: function(nodeId)
@@ -384,6 +394,20 @@ WebInspector.CSSStyleModel.prototype = {
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetChanged, { styleSheetId: styleSheetId, majorChange: majorChange });
     },
 
+    _styleSheetAdded: function(header)
+    {
+        this._resourceBinding._setHeaderForStyleSheetId(header.styleSheetId, header);
+        this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetAdded, header);
+    },
+
+    _styleSheetRemoved: function(id)
+    {
+        var header = this._resourceBinding._styleSheetIdToHeader[id];
+        console.assert(header);
+        this._resourceBinding._setHeaderForStyleSheetId(id, null);
+        this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, header);
+    },
+
     /**
      * @param {CSSAgent.NamedFlow} namedFlowPayload
      */
@@ -462,15 +486,13 @@ WebInspector.CSSStyleModel.prototype = {
 
     /**
      * @param {WebInspector.CSSRule} rule
-     * @param {function(?WebInspector.Resource)} callback
+     * @return {?WebInspector.Resource}
      */
-    getViaInspectorResourceForRule: function(rule, callback)
+    viaInspectorResourceForRule: function(rule)

[apavlov, 2013/04/19 15:50:19]

I'm happy to retain the callbacks and convert these methods into plain getters
in the second pass if necessary.

     {
-        if (!rule.id) {
-            callback(null);
-            return;
-        }
-        this._resourceBinding._requestViaInspectorResource(rule.id.styleSheetId, callback);
+        if (!rule.id)
+            return null;
+        return this._resourceBinding._inspectorResource(rule.id.styleSheetId);
     },
 
     /**
@@ -1258,136 +1280,80 @@ WebInspector.CSSStyleModelResourceBinding = function()
 
 WebInspector.CSSStyleModelResourceBinding.prototype = {
     /**
-     * @param {WebInspector.Resource} resource
-     * @param {function(?CSSAgent.StyleSheetId)} callback
+     * @param {CSSAgent.StyleSheetId} styleSheetId
+     * @param {CSSAgent.CSSStyleSheetHeader} header
      */
-    requestStyleSheetIdForResource: function(resource, callback)
+    _setHeaderForStyleSheetId: function(styleSheetId, header)
     {
-        function innerCallback()
-        {
-            callback(this._styleSheetIdForResource(resource));
+        var oldHeader = this._styleSheetIdToHeader[styleSheetId];
+        if (oldHeader) {
+            delete this._styleSheetIdToHeader[styleSheetId];
+            delete this._frameAndURLToStyleSheetId[this._headerKey(oldHeader)];
+        }
+        if (header) {
+            this._styleSheetIdToHeader[styleSheetId] = header;
+            if (header.origin === "inspector")
+                this._createInspectorResource(header);
+            else
+                this._frameAndURLToStyleSheetId[this._headerKey(header)] = header.styleSheetId;
         }
-        
-        if (this._styleSheetIdForResource(resource))
-            innerCallback.call(this);
-        else
-            this._loadStyleSheetHeaders(innerCallback.bind(this));
     },
 
     /**
      * @param {CSSAgent.StyleSheetId} styleSheetId
-     * @param {function(?string)} callback
+     * @return {?string}
      */
-    requestResourceURLForStyleSheetId: function(styleSheetId, callback)
+    resourceURLForStyleSheetId: function(styleSheetId)
     {
-        function innerCallback()
-        {
-            var header = this._styleSheetIdToHeader[styleSheetId];
-            if (!header) {
-                callback(null);
-                return;
-            }
+        var header = this._styleSheetIdToHeader[styleSheetId];
+        if (!header)
+            return null;
 
-            var frame = WebInspector.resourceTreeModel.frameForId(header.frameId);
-            if (!frame) {
-                callback(null);
-                return;
-            }
+        var frame = WebInspector.resourceTreeModel.frameForId(header.frameId);
+        if (!frame)
+            return null;
 
-            var styleSheetURL = header.origin === "inspector" ? this._viaInspectorResourceURL(header.sourceURL) : header.sourceURL;
-            callback(styleSheetURL);
-        }
-        
-        if (this._styleSheetIdToHeader[styleSheetId])
-            innerCallback.call(this);
-        else
-            this._loadStyleSheetHeaders(innerCallback.bind(this));
+        var styleSheetURL = header.origin === "inspector" ? this._viaInspectorResourceURL(header.sourceURL) : header.sourceURL;
+        return styleSheetURL;
     },
 
     /**
      * @param {WebInspector.Resource} resource
-     * @return {CSSAgent.StyleSheetId}
+     * @return {CSSAgent.StyleSheetId|undefined}
      */
-    _styleSheetIdForResource: function(resource)
+    styleSheetIdForResource: function(resource)
     {
         return this._frameAndURLToStyleSheetId[resource.frameId + ":" + resource.url];
     },
 
     /**
-     * @param {function(?string)} callback
-     */
-    _loadStyleSheetHeaders: function(callback)
-    {
-        /**
-         * @param {?string} error
-         * @param {Array.<CSSAgent.CSSStyleSheetHeader>} infos
-         */
-        function didGetAllStyleSheets(error, infos)
-        {
-            if (error) {
-                callback(error);
-                return;
-            }
-
-            for (var i = 0; i < infos.length; ++i) {
-                var info = infos[i];
-                if (info.origin === "inspector") {
-                    this._getOrCreateInspectorResource(info);
-                    continue;
-                }
-                this._frameAndURLToStyleSheetId[info.frameId + ":" + info.sourceURL] = info.styleSheetId;
-                this._styleSheetIdToHeader[info.styleSheetId] = info;
-            }
-            callback(null);
-        }
-        CSSAgent.getAllStyleSheets(didGetAllStyleSheets.bind(this));
-    },
-
-    /**
-     * @param {CSSAgent.StyleSheetId} styleSheetId
-     * @param {function(?WebInspector.Resource)} callback
+     * @param {!CSSAgent.CSSStyleSheetHeader} header
+     * @return {string}
      */
-    _requestViaInspectorResource: function(styleSheetId, callback)
+    _headerKey: function(header)
     {
-        var header = this._styleSheetIdToHeader[styleSheetId];
-        if (header) {
-            callback(this._getOrCreateInspectorResource(header));
-            return;
-        }
-
-        function headersLoaded()
-        {
-            var header = this._styleSheetIdToHeader[styleSheetId];
-            if (header)
-                callback(this._getOrCreateInspectorResource(header));
-            else
-                callback(null);
-        }
-        this._loadStyleSheetHeaders(headersLoaded.bind(this));
+        return header.frameId + ":" + (header.origin === "inspector" ? this._viaInspectorResourceURL(header.sourceURL) : header.sourceURL);
     },
 
     /**
      * @param {CSSAgent.CSSStyleSheetHeader} header
-     * @return {?WebInspector.Resource}
      */
-    _getOrCreateInspectorResource: function(header)
+    _createInspectorResource: function(header)
     {
         var frame = WebInspector.resourceTreeModel.frameForId(header.frameId);
         if (!frame)
-            return null;
+            return;
 
         var viaInspectorURL = this._viaInspectorResourceURL(header.sourceURL);    
-        var inspectorResource = frame.resourceForURL(viaInspectorURL);
-        if (inspectorResource)
-            return inspectorResource;
+        console.assert(!frame.resourceForURL(viaInspectorURL));
 
         var resource = frame.resourceForURL(header.sourceURL);
         if (!resource)
-            return null;
+            return;
+
+        this._frameAndURLToStyleSheetId[this._headerKey(header)] = header.styleSheetId;
+        var inspectorResource = new WebInspector.Resource(null, viaInspectorURL, resource.documentURL, resource.frameId, resource.loaderId, WebInspector.resourceTypes.Stylesheet, "text/css", true);
 
-        this._frameAndURLToStyleSheetId[header.frameId + ":" + viaInspectorURL] = header.styleSheetId;
-        this._styleSheetIdToHeader[header.styleSheetId] = header;
-        inspectorResource = new WebInspector.Resource(null, viaInspectorURL, resource.documentURL, resource.frameId, resource.loaderId, WebInspector.resourceTypes.Stylesheet, "text/css", true);
         /**
          * @param {function(?string, boolean, string)} callback
          */
@@ -1401,7 +1367,23 @@ WebInspector.CSSStyleModelResourceBinding.prototype = {
         }
         inspectorResource.requestContent = overrideRequestContent;
         frame.addResource(inspectorResource);
-        return inspectorResource;
+    },
+
+    /**
+     * @param {CSSAgent.StyleSheetId} styleSheetId
+     * @return {?WebInspector.Resource}
+     */
+    _inspectorResource: function(styleSheetId)
+    {
+        var header = this._styleSheetIdToHeader[styleSheetId];
+        if (!header)
+            return null;
+        var frame = WebInspector.resourceTreeModel.frameForId(header.frameId);
+        if (!frame)
+            return null;
+
+        var viaInspectorURL = this._viaInspectorResourceURL(header.sourceURL);
+        return frame.resourceForURL(viaInspectorURL);
     },
 
     /**
@@ -1421,7 +1403,9 @@ WebInspector.CSSStyleModelResourceBinding.prototype = {
     _reset: function()
     {
         // Main frame navigation - clear history.
+        /** @type {!Object.<string, !CSSAgent.StyleSheetId>} */
         this._frameAndURLToStyleSheetId = {};
+        /** @type {!Object.<CSSAgent.StyleSheetId, !CSSAgent.CSSStyleSheetHeader>} */
         this._styleSheetIdToHeader = {};
     }
 }
@@ -1451,6 +1435,22 @@ WebInspector.CSSDispatcher.prototype = {
     },
 
     /**
+     * @param {CSSAgent.CSSStyleSheetHeader} header
+     */
+    styleSheetAdded: function(header)
+    {
+        this._cssModel._styleSheetAdded(header);
+    },
+
+    /**
+     * @param {CSSAgent.StyleSheetId} id
+     */
+    styleSheetRemoved: function(id)
+    {
+        this._cssModel._styleSheetRemoved(id);
+    },
+
+    /**
      * @param {CSSAgent.NamedFlow} namedFlowPayload
      */
     namedFlowCreated: function(namedFlowPayload)