Reviewed by Adam Roben.
authortimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 24 Nov 2007 19:18:45 +0000 (19:18 +0000)
committertimothy@apple.com <timothy@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 24 Nov 2007 19:18:45 +0000 (19:18 +0000)
        Bug 16112: Some Web Inspector UI elements use offsetWidth and offsetHeight before the stylesheet loads
        http://bugs.webkit.org/show_bug.cgi?id=16112

        In the places where we use offsetWidth and offsetHeight before
        the stylesheet loads there is now a check. If the body's
        offsetWidth is not greater than zero, then set a timeout
        to do the updates requiring the stylesheet later.

        The three places this happened:
        - DOM tree selection highlight would show up at the wrong height
          when using Inspect Element to open the inspector.
        - DOM tree breadcrumbs would not collapse when using Inspect Element
          to open the inspector.
        - Network Timeline divider lines would not show when opening directly
          into the timeline.

        * page/inspector/DocumentPanel.js: Check if the stylesheet loaded.
        * page/inspector/NetworkPanel.js: Ditto.
        * page/inspector/inspector.html: Include the stylesheet before
          any scripts, this will help get it loaded sooner.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27999 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebCore/ChangeLog
WebCore/page/inspector/DocumentPanel.js
WebCore/page/inspector/NetworkPanel.js
WebCore/page/inspector/inspector.html

index 73e3e0b..6263ebc 100644 (file)
@@ -1,3 +1,28 @@
+2007-11-24  Timothy Hatcher  <timothy@apple.com>
+
+        Reviewed by Adam Roben.
+
+        Bug 16112: Some Web Inspector UI elements use offsetWidth and offsetHeight before the stylesheet loads
+        http://bugs.webkit.org/show_bug.cgi?id=16112
+
+        In the places where we use offsetWidth and offsetHeight before
+        the stylesheet loads there is now a check. If the body's
+        offsetWidth is not greater than zero, then set a timeout
+        to do the updates requiring the stylesheet later.
+
+        The three places this happened:
+        - DOM tree selection highlight would show up at the wrong height
+          when using Inspect Element to open the inspector.
+        - DOM tree breadcrumbs would not collapse when using Inspect Element
+          to open the inspector.
+        - Network Timeline divider lines would not show when opening directly
+          into the timeline.
+
+        * page/inspector/DocumentPanel.js: Check if the stylesheet loaded.
+        * page/inspector/NetworkPanel.js: Ditto.
+        * page/inspector/inspector.html: Include the stylesheet before
+          any scripts, this will help get it loaded sooner.
+
 2007-11-24  Kevin Ollivier  <kevino@theolliviers.com>
 
         Add wx implementation for pathGetFilename
index 333b98e..2285050 100644 (file)
@@ -39,7 +39,7 @@ WebInspector.DocumentPanel = function(resource, views)
     domView.hide = function() { InspectorController.hideDOMNodeHighlight() };
     domView.show = function() {
         InspectorController.highlightDOMNode(panel.focusedDOMNode);
-        panel.updateBreadcrumbSizes();
+        panel.updateBreadcrumb();
         panel.updateTreeSelection();
     };
 
@@ -184,6 +184,9 @@ WebInspector.DocumentPanel.prototype = {
 
     updateBreadcrumb: function()
     {
+        if (!this.visible)
+            return;
+
         var crumbs = this.views.dom.innerCrumbsElement;
 
         var handled = false;
@@ -376,13 +379,23 @@ WebInspector.DocumentPanel.prototype = {
 
     updateBreadcrumbSizes: function(focusedCrumb)
     {
+        if (!this.visible)
+            return;
+
+        if (document.body.offsetWidth <= 0) {
+            // The stylesheet hasn't loaded yet, so we need to update later.
+            var panel = this;
+            setTimeout(function() { panel.updateBreadcrumbSizes() }, 0);
+            return;
+        }
+
         var crumbs = this.views.dom.innerCrumbsElement;
         if (!crumbs.childNodes.length)
             return; // No crumbs, do nothing.
 
         var crumbsContainer = this.views.dom.crumbsElement;
         if (crumbsContainer.offsetWidth <= 0 || crumbs.offsetWidth <= 0)
-            return; // The cumbs are not visible yet, do nothing.
+            return;
 
         // A Zero index is the right most child crumb in the breadcrumb.
         var selectedIndex = 0;
@@ -740,6 +753,13 @@ WebInspector.DOMNodeTreeElement.prototype = {
         if (!listItemElement)
             return;
 
+        if (document.body.offsetWidth <= 0) {
+            // The stylesheet hasn't loaded yet, so we need to update later.
+            var element = this;
+            setTimeout(function() { element.updateSelection() }, 0);
+            return;
+        }
+
         if (!this.selectionElement) {
             this.selectionElement = document.createElement("div");
             this.selectionElement.className = "selection selected";
@@ -797,13 +817,7 @@ WebInspector.DOMNodeTreeElement.prototype = {
     onselect: function()
     {
         this.treeOutline.panel.focusedDOMNode = this.representedObject;
-
-        // Call updateSelection twice to make sure the height is correct,
-        // the first time might have a bad height because we are in a weird tree state
         this.updateSelection();
-
-        var element = this;
-        setTimeout(function() { element.updateSelection() }, 0);
     },
 
     onmousedown: function(event)
index 21eaa41..c6fbdb4 100644 (file)
@@ -300,9 +300,16 @@ WebInspector.NetworkPanel.prototype = {
             return;
         }
 
+        if (document.body.offsetWidth <= 0) {
+            // The stylesheet hasn't loaded yet, so we need to update later.
+            var panel = this;
+            setTimeout(function () { panel.updateTimelineDividersIfNeeded() }, 0);
+            return;
+        }
+
         var dividerCount = Math.round(this.dividersElement.offsetWidth / 64);
         var timeSlice = this.totalDuration / dividerCount;
-        
+
         if (this.lastDividerTimeSlice === timeSlice)
             return;
 
index 4c9d641..7c39869 100644 (file)
@@ -29,6 +29,7 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <link rel="stylesheet" type="text/css" href="inspector.css" />
     <script type="text/javascript" src="utilities.js"></script>
     <script type="text/javascript" src="treeoutline.js"></script>
     <script type="text/javascript" src="inspector.js"></script>
@@ -49,7 +50,6 @@ THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     <script type="text/javascript" src="FontPanel.js"></script>
     <script type="text/javascript" src="ImagePanel.js"></script>
     <script type="text/javascript" src="NetworkPanel.js"></script>
-    <link rel="stylesheet" type="text/css" href="inspector.css" />
 </head>
 <body class="detached">
     <div id="toolbar">