Title: [108058] trunk
Revision
108058
Author
[email protected]
Date
2012-02-17 03:40:45 -0800 (Fri, 17 Feb 2012)

Log Message

Web Inspector: split innerUpdate into rebuildUpdate and refreshUpdate, make computed styles load lazily.
https://bugs.webkit.org/show_bug.cgi?id=78827

Reviewed by Vsevolod Vlasov.

Source/WebCore:

* inspector/front-end/StylesSidebarPane.js:
(WebInspector.StylesSidebarPane.prototype.update):
(WebInspector.StylesSidebarPane.prototype._refreshUpdate.computedStyleCallback):
(WebInspector.StylesSidebarPane.prototype._refreshUpdate):
(WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
(WebInspector.StylesSidebarPane.prototype._validateNode):
(WebInspector.StylesSidebarPane.prototype._styleSheetOrMediaQueryResultChanged):
(WebInspector.StylesSidebarPane.prototype._attributesModified):
(WebInspector.StylesSidebarPane.prototype._attributesRemoved):
(WebInspector.StylesSidebarPane.prototype._styleInvalidated):
(WebInspector.StylesSidebarPane.prototype._innerRefreshUpdate):
(WebInspector.StylesSidebarPane.prototype._innerRebuildUpdate):
(WebInspector.StylesSidebarPane.prototype._nodeStylesUpdatedForTest):
(WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
(WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
(WebInspector.StylesSidebarPane.prototype._showUserAgentStylesSettingChanged):
(WebInspector.ComputedStyleSidebarPane.prototype.expand):
(WebInspector.StylePropertyTreeElement.prototype):

LayoutTests:

* http/tests/inspector/elements-test.js:
(initialize_ElementTest.InspectorTest.waitForStyles):
* inspector/styles/undo-add-property.html:
* inspector/styles/undo-change-property.html:
* inspector/styles/updates-during-dom-traversal.html:
* inspector/styles/updates-throttled.html:

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (108057 => 108058)


--- trunk/LayoutTests/ChangeLog	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/ChangeLog	2012-02-17 11:40:45 UTC (rev 108058)
@@ -1,3 +1,17 @@
+2012-02-17  Pavel Feldman  <[email protected]>
+
+        Web Inspector: split innerUpdate into rebuildUpdate and refreshUpdate, make computed styles load lazily.
+        https://bugs.webkit.org/show_bug.cgi?id=78827
+
+        Reviewed by Vsevolod Vlasov.
+
+        * http/tests/inspector/elements-test.js:
+        (initialize_ElementTest.InspectorTest.waitForStyles):
+        * inspector/styles/undo-add-property.html:
+        * inspector/styles/undo-change-property.html:
+        * inspector/styles/updates-during-dom-traversal.html:
+        * inspector/styles/updates-throttled.html:
+
 2012-02-17  Noel Gordon  <[email protected]>
 
         [chromium] Rebaseline JPEG image results after r107389

Modified: trunk/LayoutTests/http/tests/inspector/elements-test.js (108057 => 108058)


--- trunk/LayoutTests/http/tests/inspector/elements-test.js	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/http/tests/inspector/elements-test.js	2012-02-17 11:40:45 UTC (rev 108058)
@@ -69,13 +69,13 @@
     InspectorTest.nodeWithId(idValue, onNodeFound);
 }
 
-InspectorTest.waitForStyles = function(idValue, callback)
+InspectorTest.waitForStyles = function(idValue, callback, requireRebuild)
 {
     callback = InspectorTest.safeWrap(callback);
 
-    (function sniff(node)
+    (function sniff(node, rebuild)
     {
-        if (node && node.getAttribute("id") === idValue) {
+        if ((rebuild || !requireRebuild) && node && node.getAttribute("id") === idValue) {
             callback();
             return;
         }
@@ -91,7 +91,7 @@
 
     var targetNode;
 
-    InspectorTest.waitForStyles(idValue, stylesUpdated);
+    InspectorTest.waitForStyles(idValue, stylesUpdated, true);
     InspectorTest.selectNodeWithId(idValue, nodeSelected);
 
     function nodeSelected(node)

Modified: trunk/LayoutTests/inspector/styles/undo-add-property.html (108057 => 108058)


--- trunk/LayoutTests/inspector/styles/undo-add-property.html	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/inspector/styles/undo-add-property.html	2012-02-17 11:40:45 UTC (rev 108058)
@@ -41,7 +41,7 @@
         InspectorTest.dumpSelectedElementStyles(true);
 
         WebInspector.domAgent.redo();
-        InspectorTest.selectNodeAndWaitForStyles("other", step4);
+        InspectorTest.selectNodeAndWaitForStyles("container", step4);
     }
 
     function step4()

Modified: trunk/LayoutTests/inspector/styles/undo-change-property.html (108057 => 108058)


--- trunk/LayoutTests/inspector/styles/undo-change-property.html	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/inspector/styles/undo-change-property.html	2012-02-17 11:40:45 UTC (rev 108058)
@@ -40,7 +40,7 @@
         InspectorTest.dumpSelectedElementStyles(true);
 
         WebInspector.domAgent.redo();
-        InspectorTest.selectNodeAndWaitForStyles("other", step4);
+        InspectorTest.selectNodeAndWaitForStyles("container", step4);
     }
 
     function step4()

Modified: trunk/LayoutTests/inspector/styles/updates-during-dom-traversal.html (108057 => 108058)


--- trunk/LayoutTests/inspector/styles/updates-during-dom-traversal.html	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/inspector/styles/updates-during-dom-traversal.html	2012-02-17 11:40:45 UTC (rev 108058)
@@ -13,7 +13,7 @@
     InspectorTest.selectNodeAndWaitForStyles("inspected", selectCallback);
     function selectCallback()
     {
-        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", sniffUpdate, true);
+        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_innerRebuildUpdate", sniffUpdate, true);
         var element = WebInspector.panels.elements.treeOutline.element;
         for (var i = 0; i < keydownCount; ++i)
             element.dispatchEvent(InspectorTest.createKeyEvent("Up"));

Modified: trunk/LayoutTests/inspector/styles/updates-throttled.html (108057 => 108058)


--- trunk/LayoutTests/inspector/styles/updates-throttled.html	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/LayoutTests/inspector/styles/updates-throttled.html	2012-02-17 11:40:45 UTC (rev 108058)
@@ -13,7 +13,7 @@
     InspectorTest.selectNodeAndWaitForStyles("inspected", selectCallback);
     function selectCallback()
     {
-        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_rebuildUpdate", sniffRebuild, true);
+        InspectorTest.addSniffer(WebInspector.StylesSidebarPane.prototype, "_innerRebuildUpdate", sniffRebuild, true);
         var stylesPane = WebInspector.panels.elements.sidebarPanes.styles;
         for (var i = 0; i < UPDATE_COUNT; ++i)
             stylesPane.update(stylesPane.node, true);

Modified: trunk/Source/WebCore/ChangeLog (108057 => 108058)


--- trunk/Source/WebCore/ChangeLog	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/Source/WebCore/ChangeLog	2012-02-17 11:40:45 UTC (rev 108058)
@@ -1,3 +1,29 @@
+2012-02-17  Pavel Feldman  <[email protected]>
+
+        Web Inspector: split innerUpdate into rebuildUpdate and refreshUpdate, make computed styles load lazily.
+        https://bugs.webkit.org/show_bug.cgi?id=78827
+
+        Reviewed by Vsevolod Vlasov.
+
+        * inspector/front-end/StylesSidebarPane.js:
+        (WebInspector.StylesSidebarPane.prototype.update):
+        (WebInspector.StylesSidebarPane.prototype._refreshUpdate.computedStyleCallback):
+        (WebInspector.StylesSidebarPane.prototype._refreshUpdate):
+        (WebInspector.StylesSidebarPane.prototype._rebuildUpdate):
+        (WebInspector.StylesSidebarPane.prototype._validateNode):
+        (WebInspector.StylesSidebarPane.prototype._styleSheetOrMediaQueryResultChanged):
+        (WebInspector.StylesSidebarPane.prototype._attributesModified):
+        (WebInspector.StylesSidebarPane.prototype._attributesRemoved):
+        (WebInspector.StylesSidebarPane.prototype._styleInvalidated):
+        (WebInspector.StylesSidebarPane.prototype._innerRefreshUpdate):
+        (WebInspector.StylesSidebarPane.prototype._innerRebuildUpdate):
+        (WebInspector.StylesSidebarPane.prototype._nodeStylesUpdatedForTest):
+        (WebInspector.StylesSidebarPane.prototype._toggleElementStatePane):
+        (WebInspector.StylesSidebarPane.prototype._createElementStatePane.clickListener):
+        (WebInspector.StylesSidebarPane.prototype._showUserAgentStylesSettingChanged):
+        (WebInspector.ComputedStyleSidebarPane.prototype.expand):
+        (WebInspector.StylePropertyTreeElement.prototype):
+
 2012-02-17  No'am Rosenthal  <[email protected]>
 
         [Qt][WK2] Allow partial updates

Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (108057 => 108058)


--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2012-02-17 11:11:55 UTC (rev 108057)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js	2012-02-17 11:40:45 UTC (rev 108058)
@@ -226,20 +226,80 @@
         else
             node = this.node;
 
-        this._innerUpdate(refresh);
+        if (refresh)
+            this._refreshUpdate();
+        else
+            this._rebuildUpdate();
     },
 
-    _executeRebuildUpdate: function(node, callback)
+    /**
+     * @param {WebInspector.StylePropertiesSection=} editedSection
+     * @param {boolean=} forceFetchComputedStyle
+     * @param {function()=} userCallback
+     */
+    _refreshUpdate: function(editedSection, forceFetchComputedStyle, userCallback)
     {
+        if (this._refreshUpdateInProgress) {
+            this._lastNodeForInnerRefresh = this.node;
+            return;
+        }
+
+        var node = this._validateNode(userCallback);
+        if (!node)
+            return;
+
+        function computedStyleCallback(computedStyle)
+        {
+            delete this._refreshUpdateInProgress;
+
+            if (this._lastNodeForInnerRefresh) {
+                delete this._lastNodeForInnerRefresh;
+                this._refreshUpdate(editedSection, forceFetchComputedStyle, userCallback);
+                return;
+            }
+
+            if (this.node === node && computedStyle)
+                this._innerRefreshUpdate(node, computedStyle, editedSection);
+
+            if (userCallback)
+                userCallback();
+        }
+
+        if (this._computedStylePane.expanded || forceFetchComputedStyle) {
+            this._refreshUpdateInProgress = true;
+            WebInspector.cssModel.getComputedStyleAsync(node.id, this._forcedPseudoClasses, computedStyleCallback.bind(this));
+        } else {
+            this._innerRefreshUpdate(node, null, editedSection);
+            if (userCallback)
+                userCallback();
+        }
+    },
+
+    /**
+     * @param {function()=} userCallback
+     */
+    _rebuildUpdate: function(userCallback)
+    {
+        if (this._rebuildUpdateInProgress) {
+            this._lastNodeForInnerRebuild = this.node;
+            return;
+        }
+
+        var node = this._validateNode(userCallback);
+        if (!node)
+            return;
+
+        this._rebuildUpdateInProgress = true;
+
         var resultStyles = {};
 
         function stylesCallback(matchedResult)
         {
-            delete this._innerUpdateInProgress;
+            delete this._rebuildUpdateInProgress;
 
-            if (this._lastNodeForInnerUpdate) {
-                delete this._lastNodeForInnerUpdate;
-                this._innerUpdate(false, null, callback);
+            if (this._lastNodeForInnerRebuild) {
+                delete this._lastNodeForInnerRebuild;
+                this._rebuildUpdate(userCallback);
                 return;
             }
 
@@ -247,10 +307,10 @@
                 resultStyles.matchedCSSRules = matchedResult.matchedCSSRules;
                 resultStyles.pseudoElements = matchedResult.pseudoElements;
                 resultStyles.inherited = matchedResult.inherited;
-                this._rebuildUpdate(node, resultStyles);
+                this._innerRebuildUpdate(node, resultStyles);
             }
-            if (callback)
-                callback();
+            if (userCallback)
+                userCallback();
         }
 
         function inlineCallback(inlineStyle, attributesStyle)
@@ -270,55 +330,17 @@
         WebInspector.cssModel.getMatchedStylesAsync(node.id, this._forcedPseudoClasses, true, true, stylesCallback.bind(this));
     },
 
-    _refreshComputedStyleSection: function(callback)
+    _validateNode: function(userCallback)
     {
-        this._innerUpdate(true, null, callback);
-    },
-
-    /**
-     * @param {WebInspector.StylePropertiesSection=} editedSection
-     * @param {function()=} userCallback
-     */
-    _innerUpdate: function(refresh, editedSection, userCallback)
-    {
-        if (this._innerUpdateInProgress) {
-            this._lastNodeForInnerUpdate = this.node;
-            return;
-        }
-
-        var node = this.node;
-        if (!node) {
+        if (!this.node) {
             this._sectionsContainer.removeChildren();
             this._computedStylePane.bodyElement.removeChildren();
             this.sections = {};
             if (userCallback)
                 userCallback();
-            return;
+            return null;
         }
-
-        function computedStyleCallback(computedStyle)
-        {
-            delete this._innerUpdateInProgress;
-
-            if (this._lastNodeForInnerUpdate) {
-                delete this._lastNodeForInnerUpdate;
-                this._innerUpdate(refresh, editedSection, userCallback);
-                return;
-            }
-
-            if (this.node === node && computedStyle)
-                this._refreshUpdate(node, computedStyle, editedSection);
-
-            if (userCallback)
-                userCallback();
-        }
-
-        this._innerUpdateInProgress = true;
-
-        if (refresh)
-            WebInspector.cssModel.getComputedStyleAsync(node.id, this._forcedPseudoClasses, computedStyleCallback.bind(this));
-        else
-            this._executeRebuildUpdate(node, userCallback);
+        return this.node;
     },
 
     _styleSheetOrMediaQueryResultChanged: function()
@@ -326,7 +348,7 @@
         if (this._userOperation || this._isEditingStyle)
             return;
 
-        this._innerUpdate(false);
+        this._rebuildUpdate();
     },
 
     _attributesModified: function(event)
@@ -340,7 +362,7 @@
 
         // "class" (or any other) attribute might have changed. Update styles unless they are being edited.
         if (!this._isEditingStyle && !this._userOperation)
-            this._innerUpdate(false);
+            this._rebuildUpdate();
     },
 
     _attributesRemoved: function(event)
@@ -350,7 +372,7 @@
 
         // "style" attribute might have been removed.
         if (!this._isEditingStyle && !this._userOperation)
-            this._innerUpdate(false);
+            this._rebuildUpdate();
     },
 
     _styleInvalidated: function(event)
@@ -359,10 +381,10 @@
             return;
 
         if (!this._isEditingStyle && !this._userOperation)
-            this._innerUpdate(false);
+            this._rebuildUpdate();
     },
 
-    _refreshUpdate: function(node, computedStyle, editedSection)
+    _innerRefreshUpdate: function(node, computedStyle, editedSection)
     {
         for (var pseudoId in this.sections) {
             var styleRules = this._refreshStyleRules(this.sections[pseudoId], computedStyle);
@@ -370,13 +392,13 @@
             this._markUsedProperties(styleRules, usedProperties);
             this._refreshSectionsForStyleRules(styleRules, usedProperties, editedSection);
         }
-        // Trace the computed style.
-        this.sections[0][0].rebuildComputedTrace(this.sections[0]);
+        if (computedStyle)
+            this.sections[0][0].rebuildComputedTrace(this.sections[0]);
 
-        this._nodeStylesUpdatedForTest(node, true);
+        this._nodeStylesUpdatedForTest(node, false);
     },
 
-    _rebuildUpdate: function(node, styles)
+    _innerRebuildUpdate: function(node, styles)
     {
         this._sectionsContainer.removeChildren();
         this._computedStylePane.bodyElement.removeChildren();
@@ -386,9 +408,10 @@
         this._markUsedProperties(styleRules, usedProperties);
         this.sections[0] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, 0, null);
         var anchorElement = this.sections[0].inheritedPropertiesSeparatorElement;
-        // Trace the computed style.
-        this.sections[0][0].rebuildComputedTrace(this.sections[0]);
 
+        if (styles.computedStyle)        
+            this.sections[0][0].rebuildComputedTrace(this.sections[0]);
+
         for (var i = 0; i < styles.pseudoElements.length; ++i) {
             var pseudoElementCSSRules = styles.pseudoElements[i];
 
@@ -408,10 +431,10 @@
             this.sections[pseudoId] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, pseudoId, anchorElement);
         }
 
-        this._nodeStylesUpdatedForTest(node, false);
+        this._nodeStylesUpdatedForTest(node, true);
     },
 
-    _nodeStylesUpdatedForTest: function(node, refresh)
+    _nodeStylesUpdatedForTest: function(node, rebuild)
     {
         // Tests override this method.
     },
@@ -783,7 +806,7 @@
                 for (var i = 0; i < this._elementStatePane.inputs.length; ++i)
                     this._elementStatePane.inputs[i].checked = false;
                 delete this._forcedPseudoClasses;
-                this._innerUpdate(false);
+                this._rebuildUpdate();
             }
         }
     },
@@ -805,7 +828,7 @@
                     pseudoClasses.push(inputs[i].state);
             }
             this._forcedPseudoClasses = pseudoClasses.length ? pseudoClasses : undefined;
-            this._innerUpdate(false);
+            this._rebuildUpdate();
         }
 
         function createCheckbox(state)
@@ -838,7 +861,7 @@
 
     _showUserAgentStylesSettingChanged: function()
     {
-        this._innerUpdate(false);
+        this._rebuildUpdate();
     }
 }
 
@@ -881,7 +904,7 @@
             WebInspector.SidebarPane.prototype.expand.call(this);
         }
 
-        this._stylesSidebarPane._refreshComputedStyleSection(callback.bind(this));
+        this._stylesSidebarPane._refreshUpdate(null, true, callback.bind(this));
     }
 }
 
@@ -1866,7 +1889,7 @@
     _updatePane: function(userCallback)
     {
         if (this.treeOutline && this.treeOutline.section && this.treeOutline.section.pane)
-            this.treeOutline.section.pane._innerUpdate(true, this.treeOutline.section, userCallback);
+            this.treeOutline.section.pane._refreshUpdate(this.treeOutline.section, false, userCallback);
         else  {
             if (userCallback)
                 userCallback();
_______________________________________________
webkit-changes mailing list
[email protected]
http://lists.webkit.org/mailman/listinfo.cgi/webkit-changes

Reply via email to