Visual queued / request / response split of bars in Network Panel

Task

We want to display the duration of a request split up in its phases: queued / request / response

The colors are not set yet. (reference to bug: https://github.com/devtools-html/perf.html/issues/1122#issuecomment-403977560)

Available data

(added some examples in Milliseconds to make it more readable)

  ...
  startTime: 16782.946656687498 // When did the request start?
  endTime: 17488.4473996875 // When did the request end?
  domainLookupStart: 10282.385487000001 // When did the domain lookup start?
  domainLookupEnd: 10316.28916 // When did the domain lookup end?
  connectStart: 10316.416874 // When did the connection start?
  tcpConnectEnd: 10413.609102 // When did the TCP connection end?
  secureConnectionStart: 10423.863593 // When did the secure connection start?
  connectEnd: 10778.486192 // When did the secure connection end?
  requestStart: 10778.62857 // When did the request start?
  responseStart: 10873.93451 // When did the response start?
  responseEnd: 10874.023116 // When did the response end?

​

How the duration is slipt up in the 3 phases

const queued = domainLookupEnd - domainLookupStart
const request = requestStart - connectStart
const response = responseEnd - responseStart

Any thoughts? @digitarald @gregtatum @mstange @jesup

[digitarald]

So we would need to go with the scrollable column?

I’ll try some other alternatives, @zoepage . Hiding content with scrolling does not support the ease of scanning the resource list to identify domains and file names. Maybe a hover to extend works as well, as long as we add some text affect to increase contrast (just a claim).

[digitarald]

Is this correct?

Some slight corrections to reflect my understanding. I use (domainLookupStart || connectStart || tcpConnectEnd || requestStart) for any request start metric, as some requests don’t seem to have the lookup/connect parts, presumably due to sharing H2 pipes. I also moved all requestEnd to responseStart, so the request duration includes the time the server takes to start returning a response (time to first byte, I assume).

requestProcessStart = domainLookupStart || connectStart || tcpConnectEnd || secureConnectionStart || requestStart

duration of request queue = requestProcessStart - startTime
duration of request = responseStart - requestProcessStart
duration of response = responseEnd - responseStart
duration of response queue = endTime - requestEnd

How would we make sure users do not confuse those with the categories in the thread.

Aside, I noticed that I mixed up my colors in the mockup, green should be purple. We probably want to make the category colors less vibrant (especially yellow), so they work across the UI and for the boxes. Generally the types of resources should map well with the timeline categories:

• blue: DOM - (HTML files)
• purple: layout - (CSS files)
• green: graphics - (Images)
• yellow: JS
• gray: other

I think it is, but we would need to check with the background as we alternate it per row.

I had zebra striping in my mockup at some point but disabled it after it reduced contrast even more on light gray.

Agreed. Does this bring us back to #1259?

I did try to use the cropping described there, but filenames is all what seems to fit and even that cuts off a lot.