What is the meaning of the line and bar for each request in the "Network" section of Performance panel?

Question

In the Network section of the Performance panel of Chrome DevTools (Chrome 59), each request has a line and bar. For example, look at ados.js in the screenshot below.

Here's the timing breakdown for ados.js.

How do these two representations map to each other?

Answer 1

• The left line is everything up to Initial connection (inclusive).
• The light portion of the bar is Request sent and Waiting (TTFB).
• The dark portion of the bar is Content Download.
• The right line is essentially time spent waiting for the main thread. This is not represented in the Timing tab.

Source: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/reference#network

P.S. there's now a feature request to show a timing breakdown when hovering over a request in the Network section of Performance panel: https://crbug.com/703335