DevTools: Track CSSStyleSheetHeaders in the front-end real time

Source/devtools/protocol.json

 {
     "version": { "major": "1", "minor": "0" },
     "domains": [{
         "domain": "Inspector",
         "hidden": true,
         "types": [],
         "commands": [
             {
                 "name": "enable",
                 "description": "Enables inspector domain notifications."
@@ skipping 2151 matching lines @@
                     { "name": "rootId", "$ref": "NodeId", "description": "Shadow root id." }
                 ],
                 "description": "Called when shadow root is popped from the element.",
                 "hidden": true
             }
         ]
     },
     {
         "domain": "CSS",
         "hidden": true,
-        "description": "This domain exposes CSS read/write operations. All CSS objects, like stylesheets, rules, and styles, have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). Alternatively, a client can discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
+        "description": "This domain exposes CSS read/write operations. All CSS objects (stylesheets, rules, and styles) have an associated <code>id</code> used in subsequent operations on the related object. Each object type has a specific <code>id</code> structure, and those are not interchangeable between objects of different kinds. CSS objects can be loaded using the <code>get*ForNode()</code> calls (which accept a DOM node id). A client can also discover all the existing stylesheets with the <code>getAllStyleSheets()</code> method (or keeping track of the <code>styleSheetAdded</code>/<code>styleSheetRemoved</code> events) and subsequently load the required stylesheet contents using the <code>getStyleSheet[Text]()</code> methods.",
         "types": [
             {
                 "id": "StyleSheetId",
                 "type": "string"
             },
             {
                 "id": "CSSStyleId",
                 "type": "object",
                 "properties": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Enclosing stylesheet identifier." },
@@ skipping 398 matching lines @@
                 "description": "Fires whenever a MediaQuery result changes (for example, after a browser window has been resized.) The current implementation considers only viewport-dependent media features."
             },
             {
                 "name": "styleSheetChanged",
                 "parameters": [
                     { "name": "styleSheetId", "$ref": "StyleSheetId" }
                 ],
                 "description": "Fired whenever a stylesheet is changed as a result of the client operation."
             },
             {
+                "name": "styleSheetAdded",
+                "parameters": [
+                    { "name": "header", "$ref": "CSSStyleSheetHeader", "description": "Added stylesheet metainfo." }
+                ],
+                "description": "Fired whenever an active document stylesheet is added."
+            },
+            {
+                "name": "styleSheetRemoved",
+                "parameters": [
+                    { "name": "styleSheetId", "$ref": "StyleSheetId", "description": "Identifier of the removed stylesheet." }
+                ],
+                "description": "Fired whenever an active document stylesheet is removed."
+            },
+            {
                 "name": "namedFlowCreated",
                 "parameters": [
                     { "name": "namedFlow", "$ref": "NamedFlow", "description": "The new Named Flow." }
                 ],
                 "description": "Fires when a Named Flow is created.",
                 "hidden": true
             },
             {
                 "name": "namedFlowRemoved",
                 "parameters": [
@@ skipping 1074 matching lines @@
                 ]
             }
         ],
         "events": [
             {
                 "name": "layerTreeDidChange"
             }
         ]
     }]
 }