Changeset 64144 in webkit

Timestamp:

Jul 27, 2010 11:32:43 AM (14 years ago)

Author:

pfeldman@chromium.org

Message:

2010-07-27 Pavel Feldman <​pfeldman@chromium.org>

Reviewed by Joseph Pecoraro.

Web Inspector: render network timing as gant chart in popover.

​https://bugs.webkit.org/show_bug.cgi?id=43051

• inspector/InspectorResource.cpp: (WebCore::InspectorResource::buildObjectForTiming):
• inspector/front-end/ResourcesPanel.js: (WebInspector.ResourcesPanel.prototype._showPopover):
• inspector/front-end/inspector.css: (.resource-timing-row): (.resource-timing-bar): (.resource-timing-bar-title):
• inspector/front-end/utilities.js:

Location:

trunk/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/InspectorResource.cpp (modified) (1 diff)
• inspector/front-end/ResourcesPanel.js (modified) (1 diff)
• inspector/front-end/inspector.css (modified) (1 diff)
• inspector/front-end/utilities.js (modified) (1 diff)

trunk/WebCore/ChangeLog

@@ +1 @@
+2010-07-27  Pavel Feldman  <pfeldman@chromium.org>
+
+        Reviewed by Joseph Pecoraro.
+
+        Web Inspector: render network timing as gant chart in popover.
+
+        https://bugs.webkit.org/show_bug.cgi?id=43051
+
+        * inspector/InspectorResource.cpp:
+        (WebCore::InspectorResource::buildObjectForTiming):
+        * inspector/front-end/ResourcesPanel.js:
+        (WebInspector.ResourcesPanel.prototype._showPopover):
+        * inspector/front-end/inspector.css:
+        (.resource-timing-row):
+        (.resource-timing-bar):
+        (.resource-timing-bar-title):
+        * inspector/front-end/utilities.js:
+
 2010-07-27  Victor Wang  <victorw@chromium.org>
 

trunk/WebCore/inspector/InspectorResource.cpp

@@ -395 +395 @@
     ScriptObject jsonObject = frontend->newScriptObject();
     jsonObject.set("requestTime", timing->requestTime);
-    jsonObject.set("proxyDuration", timing->proxyStart == -1 ? -1 : (timing->proxyEnd - timing->proxyStart) / 1000.0);
-    jsonObject.set("dnsDuration", timing->dnsStart == -1 ? -1 : (timing->dnsEnd - timing->dnsStart) / 1000.0);
-    jsonObject.set("connectDuration", timing->connectStart == -1 ? -1 : (timing->connectEnd - timing->connectStart) / 1000.0);
-    jsonObject.set("sslDuration", timing->sslStart == -1 ? -1 : (timing->sslEnd - timing->sslStart) / 1000.0);
-    jsonObject.set("sendDuration", (timing->sendEnd - timing->sendStart) / 1000.0);
-    jsonObject.set("waitDuration", (timing->receiveHeadersEnd - timing->sendEnd)  / 1000.0);
+    jsonObject.set("proxyStart", timing->proxyStart);
+    jsonObject.set("proxyEnd", timing->proxyEnd);
+    jsonObject.set("dnsStart", timing->dnsStart);
+    jsonObject.set("dnsEnd", timing->dnsEnd);
+    jsonObject.set("connectStart", timing->connectStart);
+    jsonObject.set("connectEnd", timing->connectEnd);
+    jsonObject.set("sslStart", timing->sslStart);
+    jsonObject.set("sslEnd", timing->sslEnd);
+    jsonObject.set("sendStart", timing->sendStart);
+    jsonObject.set("sendEnd", timing->sendEnd);
+    jsonObject.set("receiveHeadersEnd", timing->receiveHeadersEnd);
     return jsonObject;
 }

trunk/WebCore/inspector/front-end/ResourcesPanel.js

@@ -793 +793 @@
         var tableElement = document.createElement("table");
         var resource = anchor.parentElement.resource;
-        var data = [];
-
-        if (resource.timing.proxyDuration !== -1) {
-            data.push(WebInspector.UIString("Proxy"));
-            data.push(Number.secondsToString(resource.timing.proxyDuration));
-        }
-
-        if (resource.timing.dnsDuration !== -1) {
-            data.push(WebInspector.UIString("DNS Lookup"));
-            data.push(Number.secondsToString(resource.timing.dnsDuration));
-        }
-
-        if (resource.timing.connectDuration !== -1) {
-            if (resource.connectionReused) {
-                data.push(WebInspector.UIString("Blocking"));
-                data.push(Number.secondsToString(resource.timing.connectDuration));
-            } else {
-                data.push(WebInspector.UIString("Connecting"));
+        var rows = [];
+
+        function addRow(title, start, end, color)
+        {
+            var row = {};
+            row.title = title;
+            row.start = start;
+            row.end = end;
+            rows.push(row);
+        }
+
+        if (resource.timing.proxyStart !== -1)
+            addRow(WebInspector.UIString("Proxy"), resource.timing.proxyStart, resource.timing.proxyEnd);
+
+        if (resource.timing.dnsStart !== -1) {
+            addRow(WebInspector.UIString("DNS Lookup"), resource.timing.dnsStart, resource.timing.dnsEnd);
+        }
+
+        if (resource.timing.connectStart !== -1) {
+            if (resource.connectionReused)
+                addRow(WebInspector.UIString("Blocking"), resource.timing.connectStart, resource.timing.connectEnd);
+            else {
+                var connectStart = resource.timing.connectStart;
                 // Connection includes DNS, subtract it here.
-                var connectDuration = resource.timing.connectDuration;
-                if (resource.timing.dnsDuration !== -1)
-                    connectDuration -= resource.timing.dnsDuration;
-                data.push(Number.secondsToString(connectDuration));
+                if (resource.timing.dnsStart !== -1)
+                    connectStart += resource.timing.dnsEnd - resource.timing.dnsStart;
+                addRow(WebInspector.UIString("Connecting"), connectStart, resource.timing.connectEnd);
             }
         }
 
-        if (resource.timing.sslDuration !== -1) {
-            data.push(WebInspector.UIString("SSL"));
-            data.push(Number.secondsToString(resource.timing.sslDuration));
-        }
-
-        data.push(WebInspector.UIString("Sending"));
-        data.push(Number.secondsToString(resource.timing.sendDuration));
-
-        data.push(WebInspector.UIString("Waiting"));
-        // Waiting includes SSL, subtract it here.
-        var waitDuration = resource.timing.waitDuration;
-        if (resource.timing.sslDuration !== -1)
-            waitDuration -= resource.timing.sslDuration;
-        data.push(Number.secondsToString(waitDuration));
-
-        data.push(WebInspector.UIString("Receiving"));
-        data.push(Number.secondsToString(resource.endTime - resource.responseReceivedTime));
-
-        for (var i = 0; i < data.length; i += 2) {
+        if (resource.timing.sslStart !== -1)
+            addRow(WebInspector.UIString("SSL"), resource.timing.sslStart, resource.timing.sslEnd);
+
+        var sendStart = resource.timing.sendStart;
+        if (resource.timing.sslStart !== -1)
+            sendStart += resource.timing.sslEnd - resource.timing.sslStart;
+        
+        addRow(WebInspector.UIString("Sending"), resource.timing.sendStart, resource.timing.sendEnd);
+        addRow(WebInspector.UIString("Waiting"), resource.timing.sendEnd, resource.timing.receiveHeadersEnd);
+        addRow(WebInspector.UIString("Receiving"), (resource.responseReceivedTime - resource.timing.requestTime) * 1000, (resource.endTime - resource.timing.requestTime) * 1000);
+
+        const chartWidth = 200;
+        var total = (resource.endTime - resource.timing.requestTime) * 1000;
+        var scale = chartWidth / total;
+
+        for (var i = 0; i < rows.length; ++i) {
             var tr = document.createElement("tr");
             tableElement.appendChild(tr);
 
             var td = document.createElement("td");
-            td.textContent = data[i];
+            td.textContent = rows[i].title;
             tr.appendChild(td);
 
             td = document.createElement("td");
-            td.align = "right";
-            td.textContent = data[i + 1];
+            td.width = chartWidth + "px";
+
+            var row = document.createElement("div");
+            row.className = "resource-timing-row";
+            td.appendChild(row);
+
+            var bar = document.createElement("span");
+            bar.className = "resource-timing-bar";
+            bar.style.left = scale * rows[i].start + "px";
+            bar.style.right = scale * (total - rows[i].end) + "px";
+            bar.style.backgroundColor = rows[i].color;
+            bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
+            row.appendChild(bar);
+
+            var title = document.createElement("span");
+            title.className = "resource-timing-bar-title";
+            if (i >= rows.length - 2)
+                title.style.right = (scale * (total - rows[i].end) + 3) + "px";
+            else
+                title.style.left = (scale * rows[i].start + 3) + "px";
+            title.textContent = Number.millisToString(rows[i].end - rows[i].start);
+            row.appendChild(title);
+
             tr.appendChild(td);
         }

trunk/WebCore/inspector/front-end/inspector.css

@@ -978 +978 @@
 }
 
+.resource-timing-row {
+    position: relative;
+    height: 12px;
+}
+
+.resource-timing-bar {
+    position: absolute;
+    background-color: red;
+    border-left: 1px solid red;
+    opacity: 0.4;
+}
+
+.resource-timing-bar-title {
+    position: absolute;
+}
+
 #elements-content {
     display: block;

trunk/WebCore/inspector/front-end/utilities.js

@@ -640 +640 @@
 }
 
+Number.millisToString = function(ms, formatterFunction, higherResolution)
+{
+    return Number.secondsToString(ms / 1000, formatterFunction, higherResolution);
+}
+
 Number.secondsToString = function(seconds, formatterFunction, higherResolution)
 {