Update the metrics side bar pane and computed style pane after main frame resize.

Source/devtools/front_end/StylesSidebarPane.js

Index: Source/devtools/front_end/StylesSidebarPane.js
diff --git a/Source/devtools/front_end/StylesSidebarPane.js b/Source/devtools/front_end/StylesSidebarPane.js
index 7d19f883138c9339d300755888350ceb33453d73..24601d50013de71a40f13d6118ec95504f586899 100644
--- a/Source/devtools/front_end/StylesSidebarPane.js
+++ b/Source/devtools/front_end/StylesSidebarPane.js
@@ -104,6 +104,7 @@ WebInspector.StylesSidebarPane = function(computedStylePane, setPseudoClassCallb
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.AttrRemoved, this._attributeChanged, this);
     WebInspector.domAgent.addEventListener(WebInspector.DOMAgent.Events.PseudoStateChanged, this._pseudoStateChanged, this);
     WebInspector.settings.showUserAgentStyles.addChangeListener(this._showUserAgentStylesSettingChanged.bind(this));
+    WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.FrameResized, this._frameResized, this);
     this.element.addStyleClass("styles-pane");
     this.element.enableStyleClass("show-user-styles", WebInspector.settings.showUserAgentStyles.get());
     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
@@ -398,6 +399,20 @@ WebInspector.StylesSidebarPane.prototype = {
         this._rebuildUpdate();
     },
 
+    _frameResized: function()
+    {
+        function refreshContents()
+        {
+            this._rebuildUpdate();
+            delete this._activeTimer;
+        }
+
+        if (this._activeTimer)
+            clearTimeout(this._activeTimer);
+
+        this._activeTimer = setTimeout(refreshContents.bind(this), 100);

[pfeldman, 2013/12/02 12:28:26]

I'd rather throttle it once in the resource tree model.

+    },
+
     _attributeChanged: function(event)
     {
         // Any attribute removal or modification can affect the styles of "related" nodes.