mozilla / activity-stream Goto Github PK

Just a main.scss for our styles with normalize.css and some watch/build tasks.

What is the experience for users who download the addon? Do they opt-in explicitly? Do they receive updates automatically? Can we segment users (i.e. ship to x% of population)

This is used by PlacesProvider.

Porting it over allows us to run in versions of firefox < 45 Beta

• fonts
• icons
• some super basic grid system
• colors

We should determine required sample size given the reporting time period (April 1 to Early June) and method of collecting control data.

Possible options:

• We could segment users who download our addon
• We could have a separate addon that doesn’t change anything except instruments what we want for our baseline
• We could piggyback off another addon
• ??? (keep in mind we need to ship this by March 1)
• Determine numbers required for statistical significance on all KPIs we want to track
• What do other teams use to get control data?

Obtain Favicon data from the Firefox favicon service

Implement a readability data obtainer

Obtain data from web manifest if present

Since karma works really well with webpack/is a lot faster/easier to debug, let's use it for writing our content unit tests.

I believe that #70 caused a slight issue with the build.

I did a fresh git clone and npm start and get the following output.
I believe this is due to changing the dependencies in package.json but not updating the npm-shrinkwrap.json file.

$ npm start

> [email protected] start /Users/pdehaan/dev/github/activity-streams
> npm-run-all --parallel start:*

...

Hash: 864977f28f400c140287
Version: webpack 1.12.13
Time: 1822ms
    Asset    Size  Chunks             Chunk Names
bundle.js  795 kB       0  [emitted]  main
    + 193 hidden modules

ERROR in ./content-src/components/Routes/Routes.js
Module not found: Error: Cannot resolve module 'react-router' in /Users/pdehaan/dev/github/activity-streams/content-src/components/Routes
 @ ./content-src/components/Routes/Routes.js 5:15-38

ERROR in ./content-src/components/Routes/Routes.js
Module not found: Error: Cannot resolve module 'history' in /Users/pdehaan/dev/github/activity-streams/content-src/components/Routes
 @ ./content-src/components/Routes/Routes.js 11:16-34

ERROR in ./content-src/components/Header/Header.js
Module not found: Error: Cannot resolve module 'react-router' in /Users/pdehaan/dev/github/activity-streams/content-src/components/Header
 @ ./content-src/components/Header/Header.js 5:15-38

Workaround:

Install the dependencies from the package.json directly instead of the cached npm-shrinkwrap.json file.

$ rm -rf node_modules npm-shrinkrap.json && npm i && npm start

I wasn't sure if you were adding devDependencies to the npm-shrinkwrap.json file. I tried with and without, but it looks like the current npm-shrinkwrap.json file was generated using npm@3 versus trusty old npm@2, so i'm seeing a great big diff-tastrophe.

We will collect key metrics to determine the success of the experiment sent to our data pipeline through TestPilot.

The reporting period will be from April 1 to early June.

We will instrument our add-on to collect the metrics we want, as well as collect control data from existing experiences in order to perform a comparison.

On the back-end, we will create new tables/an api endpoint to use with TestPilot. We also need a front-end analysis interface, such as a static visualization of our key metrics.

We need to ensure that resources are released when:

1. an activity streams page is shut down
2. the addon is:
3. disabled/shut down
4. uninstalled

For instance, we need to ensure that on addon disable that we:

• relinquish observers
• un-init various modules we load if necessary to clear state

On uninstall, we need to do the above plus:

• remove prefs if need be

More on load/unload reasons here: https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload

We could use:

• 3rd party BI tools like https://chartio.com/ or https://www.birst.com/?
• re:dash
• Tableau (gross)
• Splice Reporting (lots of work)

Build basic architecture for add-on.

Notes:

• We will use React for UI component
• We will use a Redux-style messaging api from addon scripts, like we’re using with remote new tab
• Needs to override new tab
• Needs to add toolbar button to access timeline

Set up continuous integration on Travis-CI

Should include lead image, title, and description/short summary

I have a local, crude lint set up using https://github.com/sasstools/sass-lint and have it returning about 74 warnings and 4 errors (mostly sorting violations and nit-picky formatting)...

.sass-lint.yml

options:
  merge-default-rules: true

files:
  include: 'content-src/**/*.scss'


rules:
  extends-before-declarations: 2
  extends-before-mixins: 2
  hex-notation: [2, {style: uppercase}]
  indentation: [2, {size: 2}]
  leading-zero: [2, {include: true}]
  mixins-before-declarations: [2, {exclude: [breakpoint, mq]}]
  nesting-depth: [2, {max-depth: 4}]
  no-debug: 1
  no-ids: 1
  no-important: 1
  no-warn: 1
  placeholder-in-extend: 2
  property-sort-order: [1, {order: [display, margin], ignore-custom-properties: true}]

After you do an npm i sass-lint locally, you can run the following command to see the lint results:

$ ./node_modules/.bin/sass-lint -v -q #or just `sass-lint -v -q` in the package.json scripts section

We should add some basic stuff about how to get up and running

I was thinking about ways of making the communication between the firefox side/redux side easier, including having proper timeout/error handling, etc.

It would be cool if we could use the same "action definitions" on both ends, as well as some redux middleware to handle the timeout scenario (i.e. requesting some data and expecting a response)

will post more later, some initial thinking here: https://gist.github.com/k88hudson/59f92d271db944a3a630#file-redux-channel-js

We should have a way of determining the impact of the add-on on performance/load-time etc.

If we are collecting data in splice:

• what data do we need
• what are the constraints?

Notes:

• legal constraints are determined by TestPilot
• Product to fill in exact data requirements/KPIs

@tspurway do you want to add some clarification here?

Design comps here: https://invis.io/GA5RW90CW

Notes:

• Intended to replace "History experience", but for MVP the current "History" menu item will still point to the old experience
• UI is accessed through toolbar button
• Content that is visually interesting, i.e. has a lead image etc, should be prioritized/sorted to the top.

Nice to have (in mockups) but not essential to shipping:

• Spotlight section at top
• Downloads

In mockups, but won't be implemented for MVP

• Tabs sorting
• Filter search at top

Questions:

• What does the bookmark tab sorting look like v.s. default (design details needed)

The test runner runs tests in a Task if a generator is used.

Use a generator instead of returning a promise

Some add-on specific stuff:

• override the new tab
• button in the toolbar for launching the Timeline
• launching about:timeline or something similar for Timeline

We should grab some images, text, etc. for a few sites so we can test our UI with it, until the enhanced data api is ready. We could use something like https://www.npmjs.com/package/open-graph-scraper

We need to store and provide an api for enhanced data collected about urls.

Notes:

• Eventually, this will be a fully query-able database that should provide full text search and sorting. However, for the MVP implementation, we can use enhanced data for presentation only, and use existing queries/sorting for history/bookmarks

See https://github.com/mozilla/fxa/blob/master/CONTRIBUTING.md

Design here: https://invis.io/QM5RWBSFB

Notes:

• Should use a lot of the same UI elements as the Timeline page

Questions:

• What does the on-boarding experience look like for blank history/blank bookmarks/existing history and bookmarks without enhanced data?
• What is the "fallback" design for items without enhanced data?

We need to add jscs to this project

cc @marcoscaceres

Obtains recent links. Similar to top frecent sites, except ordered by last_visit_date.

Unlike top frecent sites, it returns a list of most recent links and does not group by rev_host

Implement a data processing task queue and worker infrastructure.

The workers need to have network access for obtaining for e.g.:

• manifest data and images
• readability extracts
• fallback image generation

We can obtain Opengraph metadata for a given url by using PageMetadata.jsm.

For now, we are going to use a manual process for signing and uploading the add-on.

We need to:

• document the process
• set up s3 bucket somewhere

We need a first pass at what happens when each component is empty/loading/an error happens.

We should definitely have a nice experience for a blank profile (i.e. no history, bookmarks)

This will need some design input.

We should ask for higher fidelity comps with uncompressed colors, correct icons

It would be nice to have a few more:

https://github.com/yannickcr/eslint-plugin-react

Design:

Should:

• have human-formatted dates (maybe with moment.js)
• include large, favicon, title, lead image, url
• have the ability to have separate groups: "Just now", normal, and a "more" section
• "more" section should be collapsable

Feel free to split off some details into follow-up tickets if necessary.

We will be using embedly for this, we will need to:

• verify we can use @nchapman's API key or
• write a small proxy server for http://embed.ly/extract (see https://github.com/mozilla/activity-streams/blob/master/embedly-server.js#L31 for exact endpoint)
• connect with ops to deploy the server

Ensure that tests exist for message passing, if only for regression testing

I just noticed right now in ActivityStreams we have:

  _setupListeners() {
    PlacesProvider.links.on("deleteURI", this._handlePlacesChanges.bind(this));
    ...

  _removeListeners() {
    PlacesProvider.links.on("deleteURI", this._handlePlacesChanges);
    ...

I think this.fn !== this.fn.bind(this), so we'll need to use a different strategy for this

We need to instrument our add-on to collect the metrics we want. This should integrate with TestPilot and our back-end reporting infrastructure/api end-points

Implement code in add-on to send messages to data-pipeline.

Maybe start with a few messages add-on side, we can do content in a follow-up ticket

This is useful for both timeline/new tab UIs:

Comps: https://invis.io/GA5RW90CW

Obtain and set bookmarks

PlacesProvider has been ported to the add-on because depending on levels of Firefox support, the module may not be available.

While the initial addon has a port of the module, the tests need to be ported as well.

Just a basic shell for the UI with Webpack and some watch tasks.

We need to add a second page for the timeline view, as well as a button in the toolbar to access it.