DevTools/Features/TimelineView: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(6 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{FeatureStatus
{{FeatureStatus
|Feature name=Timeline View
|Feature name=Event Timeline View
|Feature stage=Definition
|Feature stage=Planning
|Feature health=OK
|Feature health=OK
}}
}}
{{FeatureTeam
{{FeatureTeam
|Feature product manager=Kevin Dangoor
|Feature product manager=Kevin Dangoor
|Feature feature manager=Kevin Dangoor
|Feature feature manager=Rob Campbell
}}
}}
{{FeaturePageBody
{{FeaturePageBody
|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 overview=A graphical representation of things that are happening in a page.
|Feature users and use cases===== Tracking Slow Page Loads ====
|Feature users and use cases===== Why is my app slow? ====


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.
Browsers are quite complex environments. The timeline view can help developers visually spot why their application is slow. By plotting things like:
|Feature requirements=# View start time, completion time and duration for a request
# View URL
# View response status and resource type (image, js, css, html)
# Be able to view the details of a request
# support for console.markTimeline
# highlight errors (4xx, 5xx statuses)
# Filter requests based on type (image, stylesheet, script, xhr, fonts, websockets, documents, error/success)
# Display load time statistics (number of requests, amount transferred, time to onload/DOMContentLoaded)


Optional:
* network traffic
* JavaScript
* GC pauses
* reflow/repainting


# View images in place
together, users can correlate events that cause user interface slowness.
# View JSON data as an object
|Feature requirements=# incorporate a variety of data sources
# Resend a request
# should be remote-capable
# Make a new request
|Feature implementation notes=The [[DevTools/Timeline]] page has notes about the architecture for a feature like this.
}}
}}
{{FeatureInfo
{{FeatureInfo
|Feature priority=P2
|Feature priority=P2
|Feature rank=3
|Feature rank=8
|Feature roadmap=Developer Tools
|Feature list=Desktop
|Feature engineering team=DevTools
}}
}}
{{FeatureTeamStatus}}
{{FeatureTeamStatus}}

Latest revision as of 16:06, 4 April 2012

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

Status

Event Timeline View
Stage Planning
Status `
Release target `
Health OK
Status note `

{{#set:Feature name=Event Timeline View

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

Team

Product manager Kevin Dangoor
Directly Responsible Individual Rob Campbell
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=Rob Campbell |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

A graphical representation of things that are happening in a page.

2. Users & use cases

Why is my app slow?

Browsers are quite complex environments. The timeline view can help developers visually spot why their application is slow. By plotting things like:

  • network traffic
  • JavaScript
  • GC pauses
  • reflow/repainting

together, users can correlate events that cause user interface slowness.

3. Dependencies

`

4. Requirements

  1. incorporate a variety of data sources
  2. should be remote-capable

Non-goals

`

Stage 2: Design

5. Functional specification

`

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

The DevTools/Timeline page has notes about the architecture for a feature like this.

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=A graphical representation of things that are happening in a page. |Feature users and use cases===== Why is my app slow? ====

Browsers are quite complex environments. The timeline view can help developers visually spot why their application is slow. By plotting things like:

  • network traffic
  • JavaScript
  • GC pauses
  • reflow/repainting

together, users can correlate events that cause user interface slowness. |Feature dependencies=` |Feature requirements=# incorporate a variety of data sources

  1. should be remote-capable

|Feature non-goals=` |Feature functional spec=` |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=The DevTools/Timeline page has notes about the architecture for a feature like this. |Feature landing criteria=` }}

Feature details

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

{{#set:Feature priority=P2

|Feature rank=8 |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=` }}