Changeset 27999 in webkit

Timestamp:

Nov 24, 2007, 11:18:45 AM (17 years ago)

Author:

timothy@apple.com

Message:

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.

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/inspector/DocumentPanel.js (modified) (6 diffs)
• page/inspector/NetworkPanel.js (modified) (1 diff)
• page/inspector/inspector.html (modified) (2 diffs)

trunk/WebCore/ChangeLog

@@ +1 @@
+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>
 

trunk/WebCore/page/inspector/DocumentPanel.js

@@ -40 +40 @@
     domView.show = function() {
         InspectorController.highlightDOMNode(panel.focusedDOMNode);
-        panel.updateBreadcrumbSizes();
+        panel.updateBreadcrumb();
         panel.updateTreeSelection();
     };
@@ -185 +185 @@
     updateBreadcrumb: function()
     {
+        if (!this.visible)
+            return;
+
         var crumbs = this.views.dom.innerCrumbsElement;
 
@@ -377 +380 @@
     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)
@@ -383 +396 @@
         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.
@@ -741 +754 @@
             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");
@@ -798 +818 @@
     {
         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);
     },
 

trunk/WebCore/page/inspector/NetworkPanel.js

@@ -301 +301 @@
         }
 
+        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;

trunk/WebCore/page/inspector/inspector.html

@@ -30 +30 @@
 <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>
@@ -50 +51 @@
     <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">