Moving code base to React #550

Natim · 2018-01-05T18:40:37Z

Migrate code to react JS
Refactor using react syntax
Implement Redux pattern to sync states

Move all js in app folder, and keep static files next to it. Current version still work without react. Webpack is integrated, but not used yet.

No redux yet, and no refactoring.

pdehaan · 2018-01-05T19:35:39Z

It'd be nice to also add the eslint-plugin-react module and extend the "plugin:react/recommended" config.
Since we're now using React/JSX, we could also add the eslint-plugin-jsx-a11y module and extend the "plugin:jsx-a11y/recommended" config to give some basic a11y linting.

Natim · 2018-01-08T09:27:34Z

Since we're noq using React/JSX

AFAIK, we are using JSX.

vladikoff · 2018-01-08T15:04:53Z

.gitignore

 test/dist/*
 ckeditor-build/build/*
 build/
+.DS_Store


Please add this to your global git ignore on your machine, not this file

Done! should have been done a long time ago, thanks

vladikoff · 2018-01-08T15:06:10Z

package-lock.json

+{
+  "name": "notes",
+  "version": "2.2.0dev",
+  "lockfileVersion": 1,


if we are using a package-lock, could we please specify the npm version required for this project in package.json, see example at https://docs.npmjs.com/files/package.json#engines

vladikoff · 2018-01-08T15:11:40Z

src/sidebar/app/components/Footer.js

+ *                                  if false, animate to savingLayout (sync icon on left)
+ * @param {Boolean} warning         Apply yellow warning styling on toolbar
+ */
+function setAnimation( animateSyncIcon = true, syncingLayout, warning ) { // animateSyncIcon, syncingLayout, warning


nit: can we please remove the extra spaces between args here, as above there are no spaces in formatFooterTime(date) between ( ) and date

Prettier should be used to make sure this is no longer a problem. I guess some configurations are needed. So you think travis should fail pull request if prettier return syntax error ?

vladikoff · 2018-01-08T15:12:15Z

src/sidebar/app/components/Footer.js

+    footerButtons.classList.replace('savingLayout', 'syncingLayout');
+    enableSync.style.backgroundColor = 'transparent';
+    // Start blink animation on saving-indicator
+    savingIndicator.classList.add('blink');


are we gonna use any react magic for this animation or leave it like it is right now?

First step was migration, refactoring is coming 👍

vladikoff · 2018-01-08T15:13:47Z

src/sidebar/app/components/Footer.js

+const SURVEY_PATH = 'https://qsurvey.mozilla.com/s3/notes?ref=sidebar';
+
+
+class Footer extends React.Component {


The functions above for this component make this component file really long and complex, can we move the utils above out of here?

Agree, refactoring is coming.

vladikoff · 2018-01-08T15:15:34Z

src/sidebar/app/components/Panel.js

+import React from 'react';
+
+import Editor from './Editor';
+import Footer from './Footer';


👍 excellent style here for separating libs and local modules

vladikoff · 2018-01-08T15:17:02Z

webpack.config.js

+      {from: path.join('src')}
+    ], {
+      ignore: [
+          '.DS_Store',


this is strange

Can't remember why it's here. Has been removed.

vladikoff · 2018-01-08T15:17:35Z

webpack.config.js

@@ -0,0 +1,52 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.


We can probably remove these headers, isn't this our webpack file now?

vladikoff · 2018-01-08T15:18:02Z

webpack.watch.js

@@ -0,0 +1,10 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.


also can be removed?

vladikoff · 2018-01-08T15:19:00Z

webpack.config.js

+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  devtool: 'source-map',


do we need a source-map because i don't think we are minifying anything?

I will look on that, but Babel compile jsx files into js during build process. My guess is that sourcemap is needed for debugging and identify correct files or lines of code.

sebastienbarbier · 2018-02-07T03:45:33Z

This pull request was the result of a one day sprint with Natim to answer some questions regarding integrating React and having a working prototype. Will spend next few days finishing the integration and have a clean merge to do, thanks everyone for your your feedbacks 👍

vladikoff · 2018-02-07T03:54:31Z

yaaaay!!!!!

pdehaan · 2018-02-07T04:06:01Z

src/sidebar/app/components/Footer.js

+    enableSync.style.backgroundColor = 'transparent';
+    // Start blink animation on saving-indicator
+    savingIndicator.classList.add('blink');
+    // Reset CSS animation by removeing class


nit: "removing"

Thanks, just fixed it.

pdehaan · 2018-02-07T04:28:25Z

I made a few tweaks, but this seems to get ESLint a bit happier (note changes in parserOptions, extends, and plugins):

env:
  browser: true
  es6: true
  webextensions: true

parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 2017
  sourceType: module

extends:
  - eslint:recommended
  - plugin:react/recommended
  - plugin:jsx-a11y/recommended

globals:
  BrowserStorageCredentials: false
  ClassicEditor: false
  Jose: false
  JoseJWE: false
  Kinto: false
  KintoClient: false
  Quill: false
  TestPilotGA: false
  customizeEditor: false
  disconnectFromKinto: false
  formatFooterTime: false
  fxaCryptoRelier: false
  fxaFetchProfile: false
  fxaRenewCredential: false
  getPadStats: false
  loadFromKinto: false
  localizeEditorButtons: false
  migrationCheck: false
  retrieveNote: false
  saveToKinto: false
  setAnimation: false

plugins:
  - jsx-a11y
  - react

root: true

rules:
  eqeqeq: error
  linebreak-style: [error, unix]
  no-console: warn
  no-var: error
  prefer-const: error
  quotes: [error, single]
  semi: [error, always]

(And we'd need to add the new ESLint plugins — npm i eslint-plugin-{react,jsx-a11y} -D)

pdehaan · 2018-02-07T04:31:03Z

Travis-CI is bombing with the following:

Error: Cannot find module 'babel-minify-webpack-plugin'

Oddly, I also saw that locally and had to manually install the dependency. ¯\_(ツ)_/¯

pdehaan · 2018-02-07T04:34:27Z

Also curious, I get a Webpack error when I try running npm run build or npm run build-ck:

$ npm run build-ck

> notes@2.2.0-dev build-ck /Users/pdehaan/dev/github/mozilla/notes
> cd ckeditor-build && webpack && cd ..

Hash: 79574a7e2d83670383b1
Version: webpack 3.10.0
Time: 19750ms
          Asset     Size  Chunks                    Chunk Names
    ckeditor.js   351 kB       0  [emitted]  [big]  main
ckeditor.js.map  2.12 MB       0  [emitted]         main
 [255] ./src/ckeditor.js 1.5 kB {0} [built]
 [460] ./src/strike.js 1.47 kB {0} [built]
 [461] ./src/strikeengine.js 1.86 kB {0} [built]
 [462] ./src/icons/strike.svg 1.3 kB {0} [built]
    + 476 hidden modules

ERROR in ./src/ckeditor.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-autoformat/src/autoformat' in '/Users/pdehaan/dev/github/mozilla/notes/ckeditor-build/src'
 @ ./src/ckeditor.js 8:0-77

ERROR in ./src/ckeditor.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-heading/src/heading' in '/Users/pdehaan/dev/github/mozilla/notes/ckeditor-build/src'
 @ ./src/ckeditor.js 14:0-68

I was trying to figure out if running webpack minifies the bundle, or if we need to explicitly say NODE_ENV=production webpack ....

…ling config file

Mostly refacotring syntax based on new eslint config file. However code is currently broken, will be fixed in next commit

pdehaan · 2018-02-07T17:21:07Z

src/sidebar/app/panel.js

@@ -0,0 +1,288 @@
+/* exported TEXT_ALIGN_DIR */


Should we just delete this file? It looks 100% commented out.

I did split content between Editor and Footer component, commenting section by section while progressing. Main reason I kept it is because the TEXT_ALIGN_DIR seams not used anymore and I want to do more test. Will be removed yes.

pdehaan · 2018-02-07T17:22:18Z

src/sidebar/index.html

+  </body>
+  <script src="vendor/ckeditor.js"></script>
+  <script defer src="vendor/material.js"></script>
+  <script src="app.js"></script>


Nit: the <script> tags should probably be within the <body> tag, instead of orphaned here.

Until yesteday, we were powering react directly on body, which clear its content and explain why script were after body. That's bad practice and has been changed now using a div. I will move those back inside body, thanks.

pdehaan · 2018-02-07T17:25:35Z

src/sync.js

 */
-function loadFromKinto(client, credentials) {
+function loadFromKinto(client, credentials) { // eslint-disable-line no-unused-vars
+  console.log('loadFromKinto', client, credentials);


Nit: not sure if we want to remove these debugging console.log() messages (here and L293 below).

😆, definitely should be removed. Was debugging late and and forgot those, thanks 👍

…lint

Related to: #671

vladikoff · 2018-02-12T15:22:11Z

package.json

  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-minify-webpack-plugin": "^0.2.0",


do we need this module?

It is used in ckeditor-build/webpack.config.js, so don't really know much about it but was not part of this PR.
Should we create an issue to try simplifing ckeditor build process ?

Ah yes, to avoid this in the future hopefully we can merge the two webpack files together :)

vladikoff · 2018-02-12T15:22:45Z

src/sidebar/app/app.js

+
+import Panel from './components/Panel';
+
+import '../static/scss/styles.scss';


vladikoff · 2018-02-12T15:23:56Z

src/sidebar/app/components/editor/data/initialContent.js

+  <p>${browser.i18n.getMessage('welcomeThatsIt')}</p>
+`.replace(/(?:\n(?:\s*))+/g, '').trim();
+
+export default INITIAL_CONTENT;


vladikoff · 2018-02-12T15:25:45Z

src/sidebar/static/scss/footer.scss

+.savingLayout #give-feedback-button {
+  opacity: 1;
+  z-index: 1;
+  visiblity: visible;


typo here, maybe we had this before as well

Next line was also very funny: transition: visibity 0s var(--sync-animation-duration); 🤣. Has been fixed, was messing up with animations, thanks for finding it.

vladikoff · 2018-02-12T15:25:58Z

src/sidebar/static/scss/footer.scss

+  opacity: 0;
+  z-index: 0;
+  cursor: default;
+  visiblity: hidden;


same typo as mentioned above

vladikoff · 2018-02-12T15:28:55Z

webpack.config.js

+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: ['babel-loader?presets[]=env&presets[]=react&presets[]=stage-2&sourceMaps=true'],


What issue does react cause if we do not use babel? i.e What is not supported in FF that we had to use it?
I'm all for using it just wondering, maybe worth adding a comment.

Babel compile jsx syntax to js. Sound confusing since we store jsx code in js files (could be .jsx to be more explicit but react use .js by default). I will add a comment 👍.

vladikoff · 2018-02-12T15:29:34Z

package.json

-    "test:karma": "webpack --config webpack.test-unit.js && NODE_ENV=test karma start"
+    "test:karma": "webpack --config webpack.test-unit.js && NODE_ENV=test karma start",
+    "webpack": "webpack --config webpack.config.js",
+    "webpack:watch": "webpack --config webpack.watch.js"


do you need webpack.watch.js file or can u just tweak this command and add --watch ?

You're perfectly right. Can't remember why we did it like this (I guess had extra config for this watch case during refactoring), but definitely can be remove now.

sebastienbarbier · 2018-02-14T15:50:54Z

First version using React : notes_2.3.0dev1.zip

Natim · 2018-02-14T16:17:48Z

Titles are wrong Add the long form names in heading formatting. #606
Give Feedback but should use the tabs.create API Open feedback form in a new tab #635
The wording of Synced at changed too sync footer fixed #639

function giveFeedbackCallback(e) {
  e.preventDefault();
  browser.tabs.create({
    url: SURVEY_PATH
  });
}

sebastienbarbier · 2018-02-14T16:50:28Z

New version for testing: notes_2.3.0dev2.zip

Natim · 2018-02-14T16:57:27Z

I am shipping this and we will follow up on smaller PR if needed. 🇫🇷 Lâchez vos comm!!

vladikoff · 2018-02-14T18:07:07Z

wowowo!

cedricium · 2018-03-26T17:56:15Z

@pdehaan I'm running into a similar situation as outlined in your comment here where I can't build ckeditor using npm start or npm run build-ck commands, do you know if you had a solution for this?

I opened an issue with my console error output, see #798.

pdehaan · 2018-03-26T19:46:21Z

@cedricium I just did an $ npm cache clean, $ nvm use 8, $ rm -rf node_modules package-lock.json, and $ npm install against latest master branch but I'm still getting errors. Not sure how CI is passing, or if it's using some cached version of the dependencies and stuff has changed recently with regards to file locations, etc. But I'm getting the same output from $ npm install (with it's postinstall hooks) and running $ npm run build directly:

> cd ckeditor-build && webpack && cd ..

Hash: 7dfdab6d45a0a2cd2e2c
Version: webpack 3.11.0
Time: 26467ms
          Asset     Size  Chunks                    Chunk Names
    ckeditor.js   364 kB       0  [emitted]  [big]  main
ckeditor.js.map  2.32 MB       0  [emitted]         main
 [260] ./src/ckeditor.js 1.5 kB {0} [built]
 [481] ./src/strike.js 1.47 kB {0} [built]
 [482] ./src/strikeengine.js 1.86 kB {0} [built]
 [483] ./src/icons/strike.svg 1.3 kB {0} [built]
    + 506 hidden modules

ERROR in ../node_modules/css-loader??ref--1-1!../node_modules/sass-loader/lib/loader.js!../node_modules/@ckeditor/ckeditor5-heading/theme/theme.scss
Module build failed:
@import '~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing';
^
      File to import not found or unreadable: ~@ckeditor/ckeditor5-theme-lark/theme/helpers/_spacing.
      in /Users/pdehaan/dev/github/mozilla/notes/node_modules/@ckeditor/ckeditor5-heading/theme/theme.scss (line 4, column 1)
 @ ../node_modules/@ckeditor/ckeditor5-heading/theme/theme.scss 4:14-113
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/heading.js
 @ ./src/ckeditor.js

ERROR in ./src/strikeengine.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter' in '/Users/pdehaan/dev/github/mozilla/notes/ckeditor-build/src'
 @ ./src/strikeengine.js 11:0-96
 @ ./src/strike.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-heading/src/headingengine.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-engine/src/conversion/buildmodelconverter' in '/Users/pdehaan/dev/github/mozilla/notes/node_modules/@ckeditor/ckeditor5-heading/src'
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/headingengine.js 11:0-96
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/heading.js
 @ ./src/ckeditor.js

ERROR in ./src/strikeengine.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter' in '/Users/pdehaan/dev/github/mozilla/notes/ckeditor-build/src'
 @ ./src/strikeengine.js 12:0-94
 @ ./src/strike.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-heading/src/headingengine.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-engine/src/conversion/buildviewconverter' in '/Users/pdehaan/dev/github/mozilla/notes/node_modules/@ckeditor/ckeditor5-heading/src'
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/headingengine.js 12:0-94
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/heading.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-heading/src/heading.js
Module not found: Error: Can't resolve '@ckeditor/ckeditor5-ui/src/dropdown/list/createlistdropdown' in '/Users/pdehaan/dev/github/mozilla/notes/node_modules/@ckeditor/ckeditor5-heading/src'
 @ ../node_modules/@ckeditor/ckeditor5-heading/src/heading.js 12:0-93
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/toolbar/toolbar.css
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| @import "../../mixins/_unselectable.css";
|
| .ck-toolbar {
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/toolbar/toolbarview.js 18:0-52
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/button/button.css
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| @import "../../mixins/_unselectable.css";
| @import "../tooltip/mixins/_tooltip.css";
|
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js 16:0-50
 @ ./src/strike.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/globals/globals.css
Module parse failed: Unexpected character '@' (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| @import "./_hidden.css";
| @import "./_reset.css";
| @import "./_zindex.css";
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/view.js 19:0-38
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js
 @ ./src/strike.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-basic-styles/theme/code.css
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .ck-content code {
| 	background-color: hsla(0, 0%, 78%, 0.3);
| 	padding: .15em;
 @ ../node_modules/@ckeditor/ckeditor5-basic-styles/src/code.js 14:0-27
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/panel/stickypanel.css
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .ck-editor {
| 	& .ck-sticky-panel {
| 		& .ck-sticky-panel__content_sticky {
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/panel/sticky/stickypanelview.js 15:0-57
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-editor-classic/theme/classiceditor.css
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .ck-editor {
| 	/* All the elements within `.ck-editor` are positioned relatively to it.
| 	 If any element needs to be positioned with respect to the <body>, etc.,
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js 15:0-36
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/label/label.css
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .ck-label {
| 	display: block;
| }
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/label/labelview.js 12:0-48
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/editorui/boxed/boxededitoruiview.js
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditoruiview.js
 @ ../node_modules/@ckeditor/ckeditor5-editor-classic/src/classiceditor.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/tooltip/tooltip.css
Module parse failed: Unexpected token (6:0)
You may need an appropriate loader to handle this file type.
|  */
|
| .ck-tooltip,
| .ck-tooltip__text::after {
| 	position: absolute;
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/tooltip/tooltipview.js 12:0-52
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js
 @ ./src/strike.js
 @ ./src/ckeditor.js

ERROR in ../node_modules/@ckeditor/ckeditor5-ui/theme/components/icon/icon.css
Module parse failed: Unexpected token (6:12)
You may need an appropriate loader to handle this file type.
|  */
|
| svg.ck-icon {
| 	vertical-align: middle;
| }
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/icon/iconview.js 14:0-46
 @ ../node_modules/@ckeditor/ckeditor5-ui/src/button/buttonview.js
 @ ./src/strike.js
 @ ./src/ckeditor.js

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! notes@3.2.0-dev build-ck: `cd ckeditor-build && webpack && cd ..`
npm ERR! Exit status 2

sebastienbarbier added 4 commits January 5, 2018 11:39

Refactor scaffolding of sidebar to prepare React integration

ca83e8c

Move all js in app folder, and keep static files next to it. Current version still work without react. Webpack is integrated, but not used yet.

Using webpack to load current sidebar code

7e600dc

Use webpack to build on watch and web-ext to refresh browser.

7ff02e4

Migrate code structure to react components

20409b5

No redux yet, and no refactoring.

vladikoff reviewed Jan 8, 2018

View reviewed changes

johngruen added the Multiple Notes label Jan 8, 2018

pdehaan reviewed Feb 7, 2018

View reviewed changes

sebastienbarbier added 8 commits February 7, 2018 11:37

Apply fixes based on code review

360d789

Improve eslint and fix package.json with missing packages

0baaf90

Prettify sidebar and settings code using npm run format and latest es…

c05934e

…ling config file

Fix eslint errors

cd30cf7

Mostly refacotring syntax based on new eslint config file. However code is currently broken, will be fixed in next commit

Migrate version from January to react

3b96114

Merge branch 'master' into react

ba924c0

Remove deprecated files from master

99cd22d

Perform npm run format to fix lint errors in travis

f823112

pdehaan reviewed Feb 7, 2018

View reviewed changes

sebastienbarbier added 5 commits February 8, 2018 10:48

Remove console.log and move script back in body

2d4a907

Reformat INITIAL_CONTENT in editor

a12c96c

Remove commented panel.js

7be513d

Fix build which was including jsx and causing crash on npm run lint

6a5764e

Configure travis to build on lint job and be able to perform web-ext …

6706932

…lint

sebastienbarbier mentioned this pull request Feb 9, 2018

"All changes saved" action text is wrongly displayed in gray, when Dark Theme is enabled #671

Closed

sebastienbarbier added 4 commits February 9, 2018 17:45

Change footer text as grey is not clickable.

28cdffd

Related to: #671

Merge branch 'master' into react

92b8b1d

Fix issue with INITIAL_CONTENT removed during sync

6f16706

Simplify conditions in footer animation

b052762

Natim changed the title ~~WIP: Moving code base to React~~ Moving code base to React Feb 12, 2018

Remove PadState from authenticate event since it is no sended

1242afc

vladikoff reviewed Feb 12, 2018

View reviewed changes

vladikoff reviewed Feb 13, 2018

View reviewed changes

sebastienbarbier added 4 commits February 14, 2018 10:09

Fix typo with visibility in CSS and fix context menu animation

5bbf1de

Remove webpack watch file and add comment about using babel

fe430d7

Refactor loading process to display only when everything is ready

ddbc487

Merge branch 'master' into react

a24ec18

sebastienbarbier mentioned this pull request Feb 14, 2018

Login animation briefly appears after you reopen the "Notes" sidebar #486

Closed

Merge branch 'master' into react

a393ce7

Fix missing translation in editor heading options

870ba21

pdehaan mentioned this pull request Feb 14, 2018

Add stylelint for more linting greatness? #682

Closed

sebastienbarbier added 2 commits February 14, 2018 17:40

Fix give Feedback button to use the tabs.create API

fae3841

Fix the wording of Synced at changed too

723b25a

Natim merged commit 40a6fa0 into mozilla:master Feb 14, 2018

Natim mentioned this pull request Feb 15, 2018

Switch to React.js to guarantee the plugin UI integrity #537

Closed

vladikoff mentioned this pull request Feb 16, 2018

Preparing 3.0.0 release #697

Merged

pdehaan mentioned this pull request Mar 26, 2018

Unable to build Notes #798

Closed

		const SURVEY_PATH = 'https://qsurvey.mozilla.com/s3/notes?ref=sidebar';


		class Footer extends React.Component {

		@@ -0,0 +1,52 @@
		/**
		* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.

		@@ -0,0 +1,10 @@
		/**
		* @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.


		import Panel from './components/Panel';

		import '../static/scss/styles.scss';

Moving code base to React #550

Moving code base to React #550

Uh oh!

Conversation

Natim commented Jan 5, 2018 • edited by sebastienbarbier Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pdehaan commented Jan 5, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Natim commented Jan 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sebastienbarbier commented Feb 7, 2018

Uh oh!

vladikoff commented Feb 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pdehaan commented Feb 7, 2018

Uh oh!

pdehaan commented Feb 7, 2018

Uh oh!

pdehaan commented Feb 7, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Natim commented Jan 5, 2018 •

edited by sebastienbarbier

Loading

pdehaan commented Jan 5, 2018 •

edited

Loading

Natim commented Jan 8, 2018 •

edited

Loading

sebastienbarbier Feb 14, 2018 •

edited

Loading

Natim commented Feb 14, 2018 •

edited by sebastienbarbier

Loading

Natim commented Feb 14, 2018 •

edited

Loading