mozilla / notes

DEPRECATED - A notepad for Firefox

Firefox Notes

A notepad for Firefox

Discussion Forum: https://discourse.mozilla.org/c/archives/test-pilot

Releases

The releases are packaged by CircleCI for Android and the WebExtension.

Contribute

• Step 0: If you plan on sending a pull-request, you should fork the repository.
• Step 1: Clone the notes repository or your fork.

git clone https://github.com/mozilla/notes.git
# or
git clone https://github.com/[yourusername]/notes.git

• Step 2: Navigate to the root of the directory you cloned and run:

Make sure to use Node.js 8+.

Command	Description
npm install	Installs required Node.js dependencies.
npm run build	Builds the application as a Web Extension.
npm start	Launches Firefox with the Web Extension.

You can also open the test/index.html file in your browser to run the automated tests.

WebExtension Permissions

Permission	Description
contextMenus	Used for "Send to Note" feature, sends text from pages to the Notes sidebar.
storage	Storage for Notes.
identity	OAuth login to Firefox Accounts to sync your notes.

Release

See RELEASE.md for release steps.

Localization

Firefox Notes localization is managed via Pontoon, not direct pull requests to the repository. If you want to fix a typo, add a new language, or simply know more about localization, please get in touch with the existing localization team for your language, or Mozilla’s l10n-drivers for guidance.

Licenses

• Mozilla Public License Version 2.0
• CKEditor Text Editor License used under MPL licence

Design

• Design for reference: https://mozilla.invisionapp.com/share/6VBUYHMRB#/281041484_Firefox_Notes
• Mobile design for reference: https://mozilla.invisionapp.com/share/BTGS26C2FE4

Screenshot

notes's Issues

"Show sidebars" button is still highlighted after closing the sidebar and opening a new window

[Notes]:

• The issue is intermittent:
  • on Mac, 5/10 times.
  • on Windows, 9/10 times.
• The issue is not reproducible without "Firefox Notes" add-on installed.

[Affected versions]:

• Firefox 53.0 and up
• Firefox Notes v1.2

[Affected Platforms]:

• All Windows
• All Linux
• All Mac

[Prerequisites]:

• Have a Firefox profile with the latest Notes add-on version (1.2 -dev, built on 16/06/2017) installed.

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Open a new window and click on the "Show sidebars" button in order to hide the "Firefox Notes" sidebar.
3. Open a new window and observe the "Show sidebars" button.

[Expected result]:

• The "Show sidebars" button is no longer highlighted in the browser toolbar.

[Actual result]:

• The "Show sidebars" button is still highlighted in the browser toolbar.

[Notes]:

• Attached a screen recording of the issue:
  

list items too padded

Use JWE for notes encryption

JSON Web Encryption is an industry standard to stored blobs of data in encrypted form inside a JSON envelope. We should consider using it instead of a custom encryption format for notes.

Switch custom crypto to use js-jose

See https://github.com/square/js-jose/blob/master/examples/jose-jwe-example2.html

It will greatly simplfiy the code of the add-ons and we would benefit from a shared security monitoring of the lib.

Add quill and kinto-http as npm dependencies?

This would make building and bundling a bit trickier (npm install and potentially moving files), but would keep some 3rd party code out of our codebase and make it easier to upgrade libraries in the future.

For example, it looks like we're bundling [email protected] in our repo, but the latest is v1.2.6.

The minified kinto-http file doesn't even have a copyright header or version number I can find, so I don't even know what version of the library it is, and if it is out of date. Looks like the latest version on npm is v4.3.4 though.

Toolbar does not fit on small sidebar width

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Bullets and numbered are one sized

Is this just the library we're using?

Enable greenkeeper

Ensure pad has scripting disabled

We should make sure people can't paste in onclick handlers or anything. Maybe CSP rules could apply or using the sandbox tag?

Add Polling strategies

Add metrics events from the provided spec

Draft metrics specification: https://gist.github.com/chuckharmston/adb9df1aaed2d769b2a3ff1a41f766c8

Should I get signed out of Notes when I sign out of Sync?

(sorry if there's a mailing list I should ask this on instead, I couldn't find one in my notes)

I'm trying to make sure I have my head around the relationship between being logged in to Firefox Sync, and being logged in to the Notes webextension. IIUC the intention is for these to be two separate and independent login states despite co-existing in the same browser, right?

If I'm signed in to sync, and I go to sign in to the Notes webextension, then I get a nice experience where it already knows who I am and I just have to re-enter my password to enable Notes to start syncing. I think that feels pretty solid.

But what happens if I then sign out of sync in my browser? Will the Notes webextension stay signed in and keep syncing? Is the user going to find that surprising? They may not have a good mental model of the two things being distinct.

Should I get disconnected from Notes if I change/reset my FxA password?

If the account password gets reset, the encryption keys will need to change, so ISTM it makes sense for any connected Notes clients to get disconnected straight away. Does it also make sense to disconnect on password change? IIRC that's the current behaviour for sync, all devices get disconnected on password change or reset.

Verify microphone div is the highest z-index

Fix Notes in multi Firefox windows

John suggest to find the easiest solution for this. This is a bit of an edge case. Let's just not lose data.

cc @Natim

Add vendor licenses for Jose and Kinto?

Currently we bundle the quill license in /src/quill-license. Not sure if we should be doing the same w/ the kinto-http and jose-jwe-jws licenses as well.

Plus, do we want to include them in the repo (in /src/sidebar/vendor/ perhaps) versus just copy them from node_modules via /scripts/postinstall.sh (in case the text changes in the future)?

Tooltips are missing from the formatting option buttons

[Affected versions]:

• Firefox 53.0 and up
• Firefox Notes v1.2

[Affected Platforms]:

• All Windows
• All Linux
• All Mac

[Prerequisites]:

• Have a Firefox profile with the latest Notes add-on version (1.2 -dev, built on 16/06/2017).

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Hover the formatting option buttons("Bold","Italic","Ordered list", etc.) from "Notes" sidebar and observe.

[Expected result]:

• The corresponding tooltip is displayed for each formatting option button.

[Actual result]:

• No tooltip is displayed.

[Notes]:

• Attached a screen recording of the issue:
  

string review on the onboarding string

from meeting: @johngruen will send it to review

Polling for changes is annoying

If you take more than a second to select a piece of text and edit or style it, you will loose your selection.
This is pretty annoying and it is due to the polling + refresh strategy.

I already have an idea of how to fix that (like looking at the content and refresh only if it changed) but I also filed a Bugzilla issue to see if we can come up with a better strategy for this Sidebar API.

Use minimized vendor libraries?

Per some earlier PR comments on using minified versions of the vendor libraries:

• #68 (comment)
• #68 (comment)
• #77 (comment)

➜  notes git:(master) $ ls -lash src/sidebar/vendor

 104 -rw-r--r--   1 pdehaan  staff    51K Jun 16 07:59 jose.js
2024 -rw-r--r--   1 pdehaan  staff   1.0M Jun 16 07:59 kinto-http.js
 824 -rw-r--r--   1 pdehaan  staff   409K Jun 16 07:59 quill.js
  48 -rw-r--r--   1 pdehaan  staff    24K Jun 16 07:59 quill.snow.css

➜  notes git:(master) $ du -sh src/sidebar/vendor
1.5M	src/sidebar/vendor

But, if we modify the scripts/postinstall.sh to copy the vendor minified files, we can save oodles of filesize (~480K vs ~1.5M):

➜  notes git:(master) $ ls -lash src/sidebar/vendor-min

 40 -rw-r--r--   1 pdehaan  staff    19K Jun 16 08:42 jose.min.js
464 -rw-r--r--   1 pdehaan  staff   230K Jun 16 08:42 kinto-http.min.js
408 -rw-r--r--   1 pdehaan  staff   202K Jun 16 08:42 quill.min.js
 48 -rw-r--r--   1 pdehaan  staff    24K Jun 16 08:42 quill.snow.css

➜  notes git:(master) $ du -sh src/sidebar/vendor-min
480K	src/sidebar/vendor-min

#!/usr/bin/env bash

set -e

cp node_modules/testpilot-metrics/testpilot-metrics.js src/vendor

cp node_modules/kinto-http/dist/kinto-http.min.js src/sidebar/vendor-min
cp node_modules/quill/dist/quill.min.js src/sidebar/vendor-min
cp node_modules/quill/dist/quill.snow.css src/sidebar/vendor-min
cp node_modules/jose-jwe-jws/dist/jose.min.js src/sidebar/vendor-min

Add the Quill license to our code

We can either append to our LICENSE file or just copy their license next to their code

Edge Case: FullScreen view (OS X), when Enabling Sync the login window can get lost

After V1

Do not merge conflict Intro Text

Hey @Natim, merge conflict worked well. Only thing is we don't want to merge conflict the intro text.

Not sure if it is easy to detect the intro text or not

Optimize line-height for font size and content width

I noticed some line height problems at some sizes. If we’re going with five font sizes, we should complement them with matching line-heights recommended by the Golden Rule Calculator.

Font:

1. 12px/18px
2. 14px/20px
3. 16px/22px
4. 18px/25px
5. 20px/27px

Add prettier to auto-format code?

Here was my local config, although the indenting is a bit different between ESLint and Prettier, so I think we'd need to disable the indenting rules in ESLint.

"format": "prettier 'src/**/!(kinto-http|quill|quill.snow).{css,js}' --single-quote --write",

And here's my output (showing the processed files):

➜  notes git:(fix-eslint) $ npm run format

> [email protected] format /Users/pdehaan/dev/github/mozilla/notes
> prettier 'src/**/!(kinto-http|quill|quill.snow).{css,js}' --single-quote --write

src/background.js 258ms
src/sidebar/options/options.js 23ms
src/sidebar/panel.js 190ms
src/sidebar/styles.css 120ms

launchWebAuthFlow should open a tab rather than a popup

After removing Firefox Notes, the "Show sidebars" button is still displayed in the browser toolbar

[Notes]:

• The same behavior can be observed also when disabling the "Firefox Notes" add-on.
• Since by default you don't have the "Show sidebars" button in the browser toolbar, it would be better if the button will be moved back after removing/disabling Firefox Notes.

[Affected versions]:

• Firefox 53.0 and up
• Firefox Notes v1.2

[Affected Platforms]:

• All Windows
• All Linux
• All Mac

[Prerequisites]:

• Have a Firefox profile with the latest Notes add-on version (1.2 -dev, built on 16/06/2017) installed.

[Steps to reproduce]:

1. Open the browser with the profile from prerequisites.
2. Go to "about:addons" and click on "Extensions".
3. Remove "Firefox Notes" add-on and observe the browser toolbar.

[Expected result]:

• The "Show sidebars" button is no longer displayed in the browser toolbar.

[Actual result]:

• The "Show sidebars" button is still displayed in the browser toolbar.

[Additional Notes]:

• Attached a screen recording of the issue:
  

Only ever display the microphone icon in a top level document

Meaning, disable functionality within frames

Check the magic number of opus files before processing them

according to the rfc, it's 0x4F70757348656164 ("OpusHead")

Figure out production client_ids and endpoints

Ensure POSTs have a size limit and a request rate limit

I think these can be set in nginx, so I'm ccing @jasonthomas

I don't have recommendations for values here.

Handle If-Match headers to avoid overridding when writing to Kinto

Now that we are polling changes from Kinto less often, it could happen that we are storing an update in Kinto without having loaded the last version from it.

To avoid that we should keep track of the Etag from the last time we read Kinto to avoid overriding if an update occurred in between.

The current implementation only handles conflict on loading from Kinto (with regards to the local pad) but not when writing to it.

Add localization support

See a good example: https://github.com/bwinton/SnoozeTabs

Reduce indent on lists

GitHub:

• has the left margin about right
• If you look at it

Add Circle-CI integration

We should run ESLint and run some tests on each commit to ensure we keep it all kosher.

Multiple note support

From what I understand, this just allows me to create a single note, not an infinite number of separate notes.

I understand it's probably out of scope for V1, but we should consider adding support for multiple notes, as it somewhat limits the utility of this add-on/experiment.

I'm a complex boy, with lots of varied interests. Trying to combine all my thoughts/notes into a single, consolidated text field makes it hard to keep all my information together and easy to find in the future.

Merge conflicts

Figure out simplest way

font sizes don't match

See quilljs/quill#1208 (comment)

(
Also see quilljs/quill#491
And maybe quilljs/quill#1493
)

Ensure Opus processing is sandboxed

@oremj is working on a solution to this

Share kinto backend URL between background.js and sidebar/panel.js?

🔍 https://github.com/mozilla/notes/search?utf8=%E2%9C%93&q=kinto.dev&type=

Both /src/background.js:1 and /src/sidebar/panel.js:1 hardcode a Kinto URL endpoint, https://kinto.dev.mozaws.net/v1. We should see if we can share that endpoint value somehow so we don't forget to change a value in one of the files.

Audit HTMLLint results

HTMLLint didn't bring up anything too interesting, but here they are in case anybody else finds them interesting:

# $ npm i htmllint-cli
$ $(npm bin)/htmllint 'src/**/*.html'

src/sidebar/options/options.html: line 4, col 1, the <head> tag must contain a title
src/sidebar/options/options.html: line 10, col 2, the `style` attribute is banned
src/sidebar/options/options.html: line 10, col 56, value must match the format: underscore
src/sidebar/panel.html: line 2, col 5, the <head> tag must contain a title
src/sidebar/panel.html: line 5, col 9, the style tag is banned
src/sidebar/panel.html: line 35, col 13, value must match the format: underscore

[htmllint] found 6 errors out of 2 files

And my config file, .htmllintrc, is:

{
  "class-style": "dash",
  "id-class-style": "dash",
  "indent-width": 2
}

Finish the Sync button design

From meeting: Sync button is extremely missable

Add Mozilla trademarks and legal links

Add the Testpilot metrics library

Pull notes from other devices on some timeout value

from June 5, this is a tracking issue to add faster note updates on other devices that have the sidebar open.

Update the manifest.json permissions to EXCLUDE *:/**. Only FxA should be there

Add production FxA derived key support ⚛️

Disable add-on functionality on non-ssl sites

We don't want to run code or display the microphone on sites that aren't served over SSL