firefox-devtools / firefox-devtools/profiler
[Draft] Landing Page 2.0
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 491
- Avg merge
- 3d 46m
- Merged PRs (30d)
- 27
Description
When opening up Profiler to a larger audience, we need to have a better onboarding for new users, which usually starts on the homepage.
## Use Cases
### First-time User _(P1)_
> _When_ landing on profiler.firefox.com the first time,
_I want to_ have all the information to understand the purpose of the profiler and to set me up for profiling and analyzing performance,
_so that I can_ start using the tool with confidence.
**Messaging**
1. Statement: "Collaborative performance recording & analysis tool"
1. Capabilities:
* Approachable: Everybody can record performance issues
* Powerful: Insights into web platform
* Collaborative: Analyze recordings as a team
1. Get started
1. Examples & documentation
**Requirements**
1. **Setup**: Allow upload profiles from disk in various supported formats
* On **Nightly**, Users should be guided to open DevTools or to set up the toolbar icon, and then onboarded to record their first profile
* When not on Nightly: Users should be guided to install the extension, and then onboarded to record their first profile
* Video content?
1. Alternative **Setup + First Run**: Interactive page that guides the user through enabling the profiler and using it for analyzing slow JS (inspired by http://devtoolschallenger.com/)
1. **Example recordings**: The empty state for existing profiles could link users to examples profile (brainstorming: slow animation, slow scrolling, unresponsive page, slow JS?)
### Returning User _(P2)_
> When coming back to profiler.firefox.com,
I want to see the profiles that I have published so far,
so that I can a) continue analysis, b) re-share or c) delete them.
**Requirements**
1. **List previously published profiles** Open _(P1)_, Copy Link _(P1)_, Delete _(P2)_
* Same format as window title (#1055), just formatted?
1. **Open profile from file/URL**
* Drag & drop area
1. **Compare _(P2)_**: Select 2 profiles to compare directly
### Foxfooder _(P3)_
> _When_ being linked to profiler.firefox.com to file a performance bug,
_I want to_ get quickly set up with the workflow,
_so that I can_ record the issue and share the recording.
Worth its own landing page, probably.
## Non-Functional Requirements
1. Photon theme and Firefox branding
1. New message about privacy of uploaded profiles
1. Localizable
## Related
Developer sites:
* http://developer.mozilla.org/
* https://extensionworkshop.com/
Recent new sites:
* https://monitor.firefox.com/
Design systems:
* Firefox: http://design.firefox.com/photon/
* Mozilla: https://protocol.mozilla.org/
* Concepts (experimentation template): https://github.com/mozilla/concepts
_Edit Mar 3 2019: Added design system links and focused user story_
_Edit Nov 22 2019: Added requirements and use cases_
┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-129)
Contributor guide
Assessment
This issue has not been assessed yet.