DevTools/Features/TimelineView

Please use "Edit with form" above to edit this page.

Status

Network TImeline View
Stage	Definition
Status	`
Release target	`
Health	OK
Status note	`

{{#set:Feature name=Network TImeline View

|Feature stage=Definition |Feature status=` |Feature version=` |Feature health=OK |Feature status note=` }}

Team

Product manager	Kevin Dangoor
Directly Responsible Individual	Kevin Dangoor
Lead engineer	`
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	`
UX lead	`
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=` |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

The Timeline view provides a graphical representation of events that happen during and after a page load. The initial focus of this feature is on network events and this view might be renamed "Network" view depending on the final user experience.

2. Users & use cases

Tracking Slow Page Loads

Page load time is very important for the user experience of a website. There a few ways to help users improve their page load times. You could provide a list of events that occur during loading or specific recommendations about ways to improve performance. However, a graphical timeline is a quick way for a user to visualize load time bottlenecks and slow loading resources.

3. Dependencies

`

4. Requirements

1. View start time, completion time and duration for a request
2. View URL
3. View response status and resource type (image, js, css, html)
4. Be able to view the details of a request
5. support for console.markTimeline
6. highlight errors (4xx, 5xx statuses)
7. Filter requests based on type (image, stylesheet, script, xhr, fonts, websockets, documents, error/success)
8. Display load time statistics (number of requests, amount transferred, time to onload/DOMContentLoaded)

Optional:

1. View images in place
2. View JSON data as an object
3. Resend a request
4. Make a new request

Non-goals

`

Stage 2: Design

5. Functional specification

• Request/response bodies without pain
• JSON support, ideally
• Filter on types (list types!)
• sort by columns (like size)
• summary data
• remote capable (not necessarily remote from the get-go)
• images on tooltips

6. User experience design

`

Stage 3: Planning

7. Implementation plan

`

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=The Timeline view provides a graphical representation of events that happen during and after a page load. The initial focus of this feature is on network events and this view might be renamed "Network" view depending on the final user experience. |Feature users and use cases===== Tracking Slow Page Loads ====

Page load time is very important for the user experience of a website. There a few ways to help users improve their page load times. You could provide a list of events that occur during loading or specific recommendations about ways to improve performance. However, a graphical timeline is a quick way for a user to visualize load time bottlenecks and slow loading resources. |Feature dependencies=` |Feature requirements=# View start time, completion time and duration for a request

1. View URL
2. View response status and resource type (image, js, css, html)
3. Be able to view the details of a request
4. support for console.markTimeline
5. highlight errors (4xx, 5xx statuses)
6. Filter requests based on type (image, stylesheet, script, xhr, fonts, websockets, documents, error/success)
7. Display load time statistics (number of requests, amount transferred, time to onload/DOMContentLoaded)

Optional:

1. View images in place
2. View JSON data as an object
3. Resend a request
4. Make a new request

|Feature non-goals=` |Feature functional spec=* Request/response bodies without pain

• JSON support, ideally
• Filter on types (list types!)
• sort by columns (like size)
• summary data
• remote capable (not necessarily remote from the get-go)
• images on tooltips

|Feature ux design=` |Feature implementation plan=` |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}

Feature details

Priority	P1
Rank	7
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P1

|Feature rank=7 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}

Team status notes

	status	notes
Products	`	`
Engineering	`	`
Security	`	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	`
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}