Bug 1433078 - Update readme file; r=jdescottes draft
authorJan Odvarko <odvarko@gmail.com>
Thu, 25 Jan 2018 12:08:32 +0100
changeset 737890 3b54a8e8d09a2553dfec6249da830ec88dad498c
parent 724404 32b850fa28ae1c29039cb7ddcdfd71b324762c05
push id96795
push userjodvarko@mozilla.com
push dateThu, 25 Jan 2018 11:08:56 +0000
reviewersjdescottes
bugs1433078
milestone60.0a1
Bug 1433078 - Update readme file; r=jdescottes MozReview-Commit-ID: HA2Fe9TlgEo
devtools/client/netmonitor/README.md
--- a/devtools/client/netmonitor/README.md
+++ b/devtools/client/netmonitor/README.md
@@ -4,17 +4,17 @@ The Network Monitor (netmonitor) shows y
 
 ## Prerequisite
 
 If you want to build the Network Monitor inside of the DevTools toolbox (Firefox Devtools Panels), follow the [simple Firefox build](https://developer.mozilla.org/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_build) document in MDN. Start your compiled firefox and open the Firefox developer tool, you can see the Network Monitor inside.
 
 If you would like to run the Network Monitor in the browser tab (experimental), you need following packages:
 
 * [node](https://nodejs.org/) >= 6.9.x JavaScript runtime.
-* [yarn](https://yarnpkg.com/docs/install) >= 0.21.x the pacakage dependency management tool.
+* [yarn](https://yarnpkg.com/docs/install) >= 0.21.x the package dependency management tool.
 * [Firefox](https://www.mozilla.org/firefox/new/) any version or build from the source code.
 
 ## Quick Setup
 
 Navigate to the `mozilla-central/devtools/client/netmonitor` folder with your terminal.
 Note that this folder is available after `mozilla-central` was cloned in order to get a local copy of the repository. Then run the following commands:
 
 ```bash
@@ -60,17 +60,17 @@ Then open `localhost:8000` in any browse
 The Network Monitor uses [webpack](https://webpack.js.org/) and several packages from [devtools-core](https://github.com/devtools-html/devtools-core) to run the Network Monitor as a normal web page. The Network Monitor uses [Mozilla remote debugging protocol](http://searchfox.org/mozilla-central/source/devtools/docs/backend/protocol.md) to fetch result and execute commands from Firefox browser.
 
 ![](https://hacks.mozilla.org/files/2017/06/image4.png)
 
 Open `localhost:8000` in any browser to see the [launchpad](https://github.com/devtools-html/devtools-core/tree/master/packages/devtools-launchpad) interface. Devtools Launchpad will communicate with Firefox (the remote debugging server) and list all opened tabs from Firefox. Click one of the browser tab entry, now you can see the Network Monitor runs in a browser tab.
 
 ### Develop with related modules
 
-When working on make the Network Monitor running in the browser tab, you may need to work on external modules. Besides the third party modules, here are modules required for the Network Monitor and is hosted under `devtools-html` (modules shared accross Devtools):
+When working on make the Network Monitor running in the browser tab, you may need to work on external modules. Besides the third party modules, here are modules required for the Network Monitor and is hosted under `devtools-html` (modules shared across Devtools):
 
 * [devtools-config](https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-config/#readme) config used in dev server
 * [devtools-launchpad](https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/#readme) provide the dev server, landing page and the bootstrap functions to run devtools in the browser tab.
 * [devtools-modules](https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-modules/#readme) Devtools shared and shim modules.
 * [devtools-source-editor](https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-source-editor/#readme) Source Editor component.
 * [devtools-reps](https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-reps/#readme) remote object formatter for variables representation.
 
 Do `yarn link` modules in related module directory, then do `yarn link [module-name]` after `yarn install` modules.
@@ -104,26 +104,26 @@ To run in the browser tab, the Network M
 ### UI
 
 The Network Monitor UI is built using [React](http://searchfox.org/mozilla-central/source/devtools/docs/frontend/react.md) components (in `src/components/`).
 
 * **MonitorPanel** in `MonitorPanel.js` is the root element.
 * Three major container components are
   - **Toolbar** Panel related functions.
   - **RequestList** Show each request information.
-  - **NetworkDetailsPanel** Show detailed infomation per request.
+  - **NetworkDetailsPanel** Show detailed information per request.
   - **StatusBar** Show statistics while loading.
 * `src/assets` Styles that affect the Network Monitor panel.
 
 We prefer stateless component (define by function) instead of stateful component (define by class) unless the component has to maintain its internal state.
 
 ### State
 
 ![](https://hacks.mozilla.org/files/2017/06/image8.png)
 
 Besides the UI, the Network Monitor manages the app state via [Redux](http://searchfox.org/mozilla-central/source/devtools/docs/frontend/redux.md). The following locations define the app state:
 
 * `src/constants.js` constants used across the tool including action and event names.
 * `src/actions/` for all actions that change the state.
 * `src/reducers/` for all reducers that change the state.
 * `src/selectors/` functions that return a formatted version of parts of the app state.
 
-We use [immutable.js](http://facebook.github.io/immutable-js/) and [reselect](https://github.com/reactjs/reselect) libraries to return a new state object efficiently.
+We use [reselect](https://github.com/reactjs/reselect) library to perform state calculations efficiently.