DevTools: Track CSSStyleSheetHeaders in the front-end real time

Source/devtools/front_end/CSSStyleModel.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 55 matching lines @@
  */
 WebInspector.CSSStyleModel.parseRuleMatchArrayPayload = function(matchArray)
 {
     var result = [];
     for (var i = 0; i < matchArray.length; ++i)
         result.push(WebInspector.CSSRule.parsePayload(matchArray[i].rule, matchArray[i].matchingSelectors));
     return result;
 }
 
 WebInspector.CSSStyleModel.Events = {
+    StyleSheetAdded: "StyleSheetAdded",
     StyleSheetChanged: "StyleSheetChanged",
+    StyleSheetRemoved: "StyleSheetRemoved",
     MediaQueryResultChanged: "MediaQueryResultChanged",
     NamedFlowCreated: "NamedFlowCreated",
     NamedFlowRemoved: "NamedFlowRemoved",
     RegionLayoutUpdated: "RegionLayoutUpdated"
 }
 
 WebInspector.CSSStyleModel.MediaTypes = ["all", "braille", "embossed", "handheld", "print", "projection", "screen", "speech", "tty", "tv"];
 
 WebInspector.CSSStyleModel.prototype = {
     /**
@@ skipping 264 matching lines @@
         this._pendingCommandsMajorState.push(true);
         CSSAgent.addRule(nodeId, selector, callback.bind(this, successCallback, failureCallback, selector));
     },
 
     mediaQueryResultChanged: function()
     {
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged);
     },
 
     /**
+     * @return {Array.<CSSAgent.CSSStyleSheetHeader>}
+     */
+    styleSheetHeaders: function()
+    {
+        return Object.values(this._resourceBinding._styleSheetIdToHeader);
+    },
+
+    /**
      * @param {DOMAgent.NodeId} nodeId
      */
     _ownerDocumentId: function(nodeId)
     {
         var node = WebInspector.domAgent.nodeForId(nodeId);
         if (!node)
             return null;
         return node.ownerDocument ? node.ownerDocument.id : null;
     },
 
     /**
      * @param {CSSAgent.StyleSheetId} styleSheetId
      */
     _fireStyleSheetChanged: function(styleSheetId)
     {
         if (!this._pendingCommandsMajorState.length)
             return;
 
         var majorChange = this._pendingCommandsMajorState[this._pendingCommandsMajorState.length - 1];
 
         if (!majorChange || !styleSheetId || !this.hasEventListeners(WebInspector.CSSStyleModel.Events.StyleSheetChanged))
             return;
 
         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
      */
     _namedFlowCreated: function(namedFlowPayload)
     {
         var namedFlow = WebInspector.NamedFlow.parsePayload(namedFlowPayload);
         var namedFlowCollection = this._namedFlowCollections[namedFlow.documentNodeId];
 
         if (!namedFlowCollection)
             return;
@@ skipping 58 matching lines @@
         this._pendingCommandsMajorState.push(true);
     },
 
     _undoRedoCompleted: function()
     {
         this._pendingCommandsMajorState.pop();
     },
 
     /**
      * @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);
     },
 
     /**
      * @return {WebInspector.CSSStyleModelResourceBinding}
      */
     resourceBinding: function()
     {
         return this._resourceBinding;
     },
 
@@ skipping 767 matching lines @@
 /**
  * @constructor
  */
 WebInspector.CSSStyleModelResourceBinding = function()
 {
     this._reset();
 }
 
 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 (this._styleSheetIdForResource(resource))
-            innerCallback.call(this);
-        else
-            this._loadStyleSheetHeaders(innerCallback.bind(this));
+        if (header) {
+            this._styleSheetIdToHeader[styleSheetId] = header;
+            if (header.origin === "inspector")
+                this._createInspectorResource(header);
+            else
+                this._frameAndURLToStyleSheetId[this._headerKey(header)] = header.styleSheetId;
+        }
     },
 
     /**
      * @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
+     * @param {!CSSAgent.CSSStyleSheetHeader} header
+     * @return {string}
      */
-    _loadStyleSheetHeaders: function(callback)
+    _headerKey: function(header)
     {
-        /**
-         * @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
-     */
-    _requestViaInspectorResource: function(styleSheetId, callback)
-    {
-        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[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);
+        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);
+
         /**
          * @param {function(?string, boolean, string)} callback
          */
         function overrideRequestContent(callback)
         {
             function callbackWrapper(error, content)
             {
                 callback(error ? "" : content, false, "text/css");
             }
             CSSAgent.getStyleSheetText(header.styleSheetId, callbackWrapper);
         }
         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);
+    },
+
+    /**
      * @param {string} documentURL
      * @return {string}
      */
     _viaInspectorResourceURL: function(documentURL)
     {
         var parsedURL = new WebInspector.ParsedURL(documentURL);
         var fakeURL = "inspector://" + parsedURL.host + parsedURL.folderPathComponents;
         if (!fakeURL.endsWith("/"))
             fakeURL += "/";
         fakeURL += "inspector-stylesheet";
         return fakeURL;
     },
 
     _reset: function()
     {
         // Main frame navigation - clear history.
+        /** @type {!Object.<string, !CSSAgent.StyleSheetId>} */
         this._frameAndURLToStyleSheetId = {};
+        /** @type {!Object.<CSSAgent.StyleSheetId, !CSSAgent.CSSStyleSheetHeader>} */
         this._styleSheetIdToHeader = {};
     }
 }
 
 /**
  * @constructor
  * @implements {CSSAgent.Dispatcher}
  * @param {WebInspector.CSSStyleModel} cssModel
  */
 WebInspector.CSSDispatcher = function(cssModel)
 {
     this._cssModel = cssModel;
 }
 
 WebInspector.CSSDispatcher.prototype = {
     mediaQueryResultChanged: function()
     {
         this._cssModel.mediaQueryResultChanged();
     },
 
     /**
      * @param {CSSAgent.StyleSheetId} styleSheetId
      */
     styleSheetChanged: function(styleSheetId)
     {
         this._cssModel._fireStyleSheetChanged(styleSheetId);
     },
 
     /**
+     * @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)
     {
         this._cssModel._namedFlowCreated(namedFlowPayload);
     },
 
     /**
      * @param {DOMAgent.NodeId} documentNodeId
      * @param {string} flowName
@@ skipping 76 matching lines @@
 
         if (!namedFlow)
             return null;
         return namedFlow;
     }
 }
 /**
  * @type {WebInspector.CSSStyleModel}
  */
 WebInspector.cssModel = null;