DevTools: defer styles delta calculation to until the end of the task.

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 151 matching lines @@
                 callback(cssFamilyName, fonts);
         }
         CSSAgent.getPlatformFontsForNode(nodeId, platformFontsCallback);
     },
 
     /**
      * @return {!Array.<!WebInspector.CSSStyleSheetHeader>}
      */
     allStyleSheets: function()
     {
-        return Object.values(this._styleSheetIdToHeader);
+        var values = Object.values(this._styleSheetIdToHeader);
+        /**
+         * @param {!WebInspector.CSSStyleSheetHeader} a
+         * @param {!WebInspector.CSSStyleSheetHeader} b
+         * @return {number}
+         */
+        function styleSheetComparator(a, b)
+        {
+            if (a.sourceURL < b.sourceURL)
+                return -1;
+            else if (a.sourceURL > b.sourceURL)
+                return 1;
+            return a.startLine - b.startLine || a.startColumn - b.startColumn;
+        }
+        values.sort(styleSheetComparator);
+
+        return values;
     },
 
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(?WebInspector.CSSStyleDeclaration, ?WebInspector.CSSStyleDeclaration)} userCallback
      */
     getInlineStylesAsync: function(nodeId, userCallback)
     {
         /**
          * @param {function(?WebInspector.CSSStyleDeclaration, ?WebInspector.CSSStyleDeclaration)} userCallback
@@ skipping 155 matching lines @@
             }
 
             callback(this._styleSheetIdToHeader[styleSheetId]);
         }
 
         CSSAgent.createStyleSheet(frameId, innerCallback.bind(this));
     },
 
     mediaQueryResultChanged: function()
     {
-        this._styleLoader.reset();
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.MediaQueryResultChanged);
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} id
      * @return {!WebInspector.CSSStyleSheetHeader}
      */
     styleSheetHeaderForId: function(id)
     {
         return this._styleSheetIdToHeader[id];
@@ skipping 17 matching lines @@
         if (!node)
             return null;
         return node.ownerDocument ? node.ownerDocument.id : null;
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} styleSheetId
      */
     _fireStyleSheetChanged: function(styleSheetId)
     {
-        this._styleLoader.reset();
         if (!this._pendingCommandsMajorState.length)
             return;
 
         var majorChange = this._pendingCommandsMajorState[this._pendingCommandsMajorState.length - 1];
 
         if (!styleSheetId || !this.hasEventListeners(WebInspector.CSSStyleModel.Events.StyleSheetChanged))
             return;
 
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetChanged, { styleSheetId: styleSheetId, majorChange: majorChange });
     },
 
     /**
      * @param {!CSSAgent.CSSStyleSheetHeader} header
      */
     _styleSheetAdded: function(header)
     {
         console.assert(!this._styleSheetIdToHeader[header.styleSheetId]);
         var styleSheetHeader = new WebInspector.CSSStyleSheetHeader(header);
         this._styleSheetIdToHeader[header.styleSheetId] = styleSheetHeader;
         var url = styleSheetHeader.resourceURL();
         if (!this._styleSheetIdsForURL[url])
             this._styleSheetIdsForURL[url] = {};
         var frameIdToStyleSheetIds = this._styleSheetIdsForURL[url];
         var styleSheetIds = frameIdToStyleSheetIds[styleSheetHeader.frameId];
         if (!styleSheetIds) {
             styleSheetIds = [];
             frameIdToStyleSheetIds[styleSheetHeader.frameId] = styleSheetIds;
         }
         styleSheetIds.push(styleSheetHeader.id);
-        this._styleLoader.reset();
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetAdded, styleSheetHeader);
     },
 
     /**
      * @param {!CSSAgent.StyleSheetId} id
      */
     _styleSheetRemoved: function(id)
     {
         var header = this._styleSheetIdToHeader[id];
         console.assert(header);
         delete this._styleSheetIdToHeader[id];
         var url = header.resourceURL();
         var frameIdToStyleSheetIds = this._styleSheetIdsForURL[url];
         frameIdToStyleSheetIds[header.frameId].remove(id);
         if (!frameIdToStyleSheetIds[header.frameId].length) {
             delete frameIdToStyleSheetIds[header.frameId];
             if (!Object.keys(this._styleSheetIdsForURL[url]).length)
                 delete this._styleSheetIdsForURL[url];
         }
-        this._styleLoader.reset();
         this.dispatchEventToListeners(WebInspector.CSSStyleModel.Events.StyleSheetRemoved, header);
     },
 
     /**
      * @param {string} url
      * @return {!Array.<!CSSAgent.StyleSheetId>}
      */
     styleSheetIdsForURL: function(url)
     {
         var frameIdToStyleSheetIds = this._styleSheetIdsForURL[url];
@@ skipping 1069 matching lines @@
  * @param {!WebInspector.CSSStyleModel} cssModel
  */
 WebInspector.CSSStyleModel.ComputedStyleLoader = function(cssModel)
 {
     this._cssModel = cssModel;
     /** @type {!Object.<*, !Array.<function(?WebInspector.CSSStyleDeclaration)>>} */
     this._nodeIdToCallbackData = {};
 }
 
 WebInspector.CSSStyleModel.ComputedStyleLoader.prototype = {
-    reset: function()
-    {
-        for (var nodeId in this._nodeIdToCallbackData) {
-            var callbacks = this._nodeIdToCallbackData[nodeId];
-            for (var i = 0; i < callbacks.length; ++i)
-                callbacks[i](null);
-        }
-        this._nodeIdToCallbackData = {};
-    },
-
     /**
      * @param {!DOMAgent.NodeId} nodeId
      * @param {function(?WebInspector.CSSStyleDeclaration)} userCallback
      */
     getComputedStyle: function(nodeId, userCallback)
     {
         if (this._nodeIdToCallbackData[nodeId]) {
             this._nodeIdToCallbackData[nodeId].push(userCallback);
             return;
         }
@@ skipping 21 matching lines @@
             for (var i = 0; i < callbacks.length; ++i)
                 callbacks[i](computedStyle);
         }
     }
 }
 
 /**
  * @type {!WebInspector.CSSStyleModel}
  */
 WebInspector.cssModel;