DevTools: Resource Timing: expand table in detailed view.

Screenshots:

Before / popover:
http://picpaste.com/before1.png

Before / details:
http://picpaste.com/before2.png

After / popover:
http://picpaste.com/after1.png

After / details:
http://picpaste.com/after2.png

BUG=403508

Review URL: https://codereview.chromium.org/471163005

git-svn-id: svn://svn.chromium.org/blink/trunk@183670 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/network/NetworkPanel.js

@@ -1062,10 +1062,13 @@ WebInspector.NetworkLogView.prototype = {
     _showPopover: function(anchor, popover)
     {
         var content;
-        if (anchor.classList.contains("network-script-initiated"))
+        if (anchor.classList.contains("network-script-initiated")) {
             content = this._generateScriptInitiatedPopoverContent(anchor.request);
-        else
+            popover.setCanShrink(true);
+        } else {
             content = WebInspector.RequestTimingView.createTimingTable(anchor.parentElement.request);
+            popover.setCanShrink(false);
+        }
         popover.show(content, anchor);
     },
 

third_party/WebKit/Source/devtools/front_end/network/RequestTimingView.js

@@ -90,6 +90,7 @@ WebInspector.RequestTimingView.prototype = {
 WebInspector.RequestTimingView.createTimingTable = function(request)
 {
     var tableElement = document.createElementWithClass("table", "network-timing-table");
+    tableElement.createChild("colgroup").createChild("col", "labels");
 
     /**
      * @param {string} title
@@ -99,22 +100,22 @@ WebInspector.RequestTimingView.createTimingTable = function(request)
      */
     function addRow(title, className, start, end)
     {
+        if ((start === -1) || (start >= end))
+            return;
         var tr = tableElement.createChild("tr");
         tr.createChild("td").createTextChild(title);
-        var td = tr.createChild("td");
-        td.width = chartWidth + "px";
-        var row = td.createChild("div", "network-timing-row");
+        var row = tr.createChild("td").createChild("div", "network-timing-row");
 
         var bar = row.createChild("span", "network-timing-bar " + className);
-        bar.style.left = Math.floor(scale * start) + "px";
-        bar.style.right = Math.floor(scale * (total - end)) + "px";
+        bar.style.left = (scale * start) + "%";
+        bar.style.right = (scale * (total - end)) + "%";
         bar.textContent = "\u200B"; // Important for 0-time items to have 0 width.
 
         var label = row.createChild("span", "network-timing-bar-title");
         if (total - end < start)
-            label.style.right = (scale * (total - end)) + "px";
+            label.style.right = (scale * (total - end)) + "%";
         else
-            label.style.left = (scale * start) + "px";
+            label.style.left = (scale * start) + "%";
         label.textContent = Number.secondsToString((end - start) / 1000, true);
     }
 
@@ -133,51 +134,36 @@ WebInspector.RequestTimingView.createTimingTable = function(request)
 
     function createCommunicationTimingTable()
     {
-        if (blocking > 0)
-            addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking);
-
-        if (timing.proxyStart !== -1)
-            addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
-
-        if (timing.dnsStart !== -1)
-            addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
-
-        if (timing.connectStart !== -1)
-            addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
-
-        if (timing.sslStart !== -1)
-            addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
-
+        addRow(WebInspector.UIString("Stalled"), "blocking", 0, blocking || 0);
+        addRow(WebInspector.UIString("Proxy negotiation"), "proxy", timing.proxyStart, timing.proxyEnd);
+        addRow(WebInspector.UIString("DNS Lookup"), "dns", timing.dnsStart, timing.dnsEnd);
+        addRow(WebInspector.UIString("Initial connection"), "connecting", timing.connectStart, timing.connectEnd);
+        addRow(WebInspector.UIString("SSL"), "ssl", timing.sslStart, timing.sslEnd);
         addRow(WebInspector.UIString("Request sent"), "sending", timing.sendStart, timing.sendEnd);
         addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.sendEnd, timing.receiveHeadersEnd);
-
-        if (request.endTime !== -1)
-            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
     }
 
     function createServiceWorkerTimingTable()
     {
         addRow(WebInspector.UIString("Stalled"), "blocking", 0, timing.serviceWorkerFetchStart);
-
         addRow(WebInspector.UIString("Request to ServiceWorker"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchEnd);
         addRow(WebInspector.UIString("ServiceWorker Preparation"), "serviceworker", timing.serviceWorkerFetchStart, timing.serviceWorkerFetchReady);
         addRow(WebInspector.UIString("Waiting (TTFB)"), "waiting", timing.serviceWorkerFetchEnd, timing.receiveHeadersEnd);
-
-        if (request.endTime !== -1)
-            addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
     }
 
     var timing = request.timing;
     var blocking = firstPositive([timing.dnsStart, timing.connectStart, timing.sendStart]);
     var endTime = firstPositive([request.endTime, request.responseReceivedTime, timing.requestTime]);
     var total = (endTime - timing.requestTime) * 1000;
-    const chartWidth = 200;
-    var scale = chartWidth / total;
+    var scale = 100 / total;
 
+    addRow(WebInspector.UIString("Total"), "total", 0, total);
     if (request.fetchedViaServiceWorker)
         createServiceWorkerTimingTable();
     else
         createCommunicationTimingTable();
+    if (request.endTime !== -1)
+        addRow(WebInspector.UIString("Content Download"), "receiving", (request.responseReceivedTime - timing.requestTime) * 1000, total);
 
     if (!request.finished) {
         var cell = tableElement.createChild("tr").createChild("td", "caution");

third_party/WebKit/Source/devtools/front_end/networkPanel.css

@@ -87,11 +87,18 @@
     color: rgb(30%, 30%, 30%);
 }
 
-.resource-timing-view table {
-    border-spacing: 21px 0;
+/* Network timing is shared between popover and network item view pane */
+
+.network-timing-table {
+    width: 328px;
+    border-spacing: 0;
+    padding-left: 4px;
+    padding-right: 4px;
 }
 
-/* Network timing is shared between popover and network item view pane */
+.network-timing-table col.labels {
+    width: 120px;
+}
 
 .network-timing-table td {
     padding: 2px 0;
@@ -122,6 +129,10 @@
     line-height: 15px;
 }
 
+.network-timing-bar.total {
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
 .network-timing-bar.blocking,
 .network-timing-bar.proxy {
     background-color: rgb(205, 205, 205);
@@ -153,6 +164,10 @@
     display: block;
 }
 
+.resource-timing-view .network-timing-table {
+    width: 100%;
+}
+
 .panel.network .split-view {
     flex: auto;
     position: relative;