Re-write getting started docs

1. add getting started
2. add first activity
3. consolidate contributing
4. consolidate readme

README.md

@@ -10,66 +10,39 @@ debugger.html is a hackable debugger for modern times, built from the ground up
 [![npm version](https://img.shields.io/npm/v/debugger.html.svg)](https://www.npmjs.com/package/debugger.html)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-## Getting Started
+### Getting Setup
 
-Here are instructions to get the debugger.html application installed and running.
+Here's the *quick setup*, if you're getting started, I recommend the detailed [getting started][getting-started] instructions.
 
-### Linux or MacOs
 
-* `npm i -g [email protected]` - Install Yarn
-* `git clone [email protected]:devtools-html/debugger.html.git` - Clone Debugger
-* `yarn install` - Install dependencies
-* `yarn start` - Start development web server
+```bash
+npm i -g [email protected]
+git clone [email protected]:devtools-html/debugger.html.git
 
-NOTE: :cat2: We use [Yarn](https://yarnpkg.com) so that we all have the same setup.
+cd debugger.html
+yarn install
+yarn run firefox
 
-### Windows
+# create a new terminal tab
+cd debugger.html
+yarn start
+```
 
-It is recommended to use Git Shell which comes with [GitHub Desktop] application to emulate bash on Windows.
 
-* `npm i -g [email protected]` - Install Yarn
-* `git clone [email protected]:devtools-html/debugger.html.git` - Clone Debugger
-* `yarn install` - Install dependencies
-* `yarn start` - Start development web server
+### Getting Involved
 
-NOTE: :cat2: We use [Yarn](https://yarnpkg.com) so that we all have the same setup.
+This is an open source project and we would love your help. We have prepared a [CONTRIBUTING][contributing] guide to help you get started.
 
-### Open the Debugger
+We strive for collaboration with [mutual respect for each other][contributing].   Mozilla also has a set of [participation guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/) which goes into greater detail specific to Mozilla employees and contributors.
 
-After `yarn start`, the debugger will be running on [http://localhost:8000](http://localhost:8000) and you can open it in any browser. [screenshot](https://cloud.githubusercontent.com/assets/254562/20393011/44ca6a8a-aca8-11e6-99f7-05f21767ae6d.png)
-
-Now you have the debugger.html web app running, follow the instructions shown on that page to start up a debug target like a web browser or node.js.
-
-Please read [Getting Started][getting-started] in our [CONTRIBUTING][contributing] document for more detailed instructions.
-
-## Getting Involved
-
-This is an open source project and we would love your help. We have prepared a [CONTRIBUTING][contributing] guide to help you get started, here are some quick links to common questions.
-
-  * [Reporting Bugs][reporting-bugs]
-  * [Suggesting Enhancements][suggesting-enhancements]
-  * [Your First Code Contribution][your-first-code-contribution]
-  * [Pull Requests][pull-requests]
-  * [Writing Code][writing-code]
-    * [Hot Reloading][hot-reloading]
-    * [Tests][tests]
-      * [Unit Tests][unit-tests]
-      * [Integration Tests][integration-tests]
-      * [Linting][linting]
-
-We use the [up for grabs](https://github.com/devtools-html/debugger.html/labels/up%20for%20grabs) label to indicate this work is open for anyone to take.  If you already know what you're doing and want to dive in, take a look at those issues.
-
-We strive for collaboration with [mutual respect for each other](./CODE_OF_CONDUCT.md).   Mozilla also has a set of [participation guidelines](https://www.mozilla.org/en-US/about/governance/policies/participation/) which goes into greater detail specific to Mozilla employees and contributors.
-
-## Discussion
+### Discussion
 
 We're all on Mozilla's IRC in the [#devtools-html][irc-devtools-html] channel on irc.mozilla.org.
 
-
 * **Open Office Hours** Every Tuesday, Thursday at 3pm EST. [Event](https://calendar.google.com/calendar/render#eventpage_6%7Ceid-MzBtZHBhNm5jcW44dXR0dm1yajliOWQzamNfMjAxNjExMjJUMjAwMDAwWiBodWtoZG9rbzNuMm5oNzZiZGw2dWUya2pqb0Bn-1-0-)
 * **DevTools Call** Every Tuesday at 12pm EST. [info](https://wiki.mozilla.org/DevTools)
 
-## License
+### License
 
 [MPL 2](./LICENSE)
 
@@ -78,27 +51,8 @@ We're all on Mozilla's IRC in the [#devtools-html][irc-devtools-html] channel on
 [mozilla]:https://www.mozilla.org/
 [mozilla-firefox]:https://www.mozilla.org/firefox/
 
+[getting-started]:./docs/getting-setup.md
 [contributing]:./CONTRIBUTING.md
-[getting-started]:./CONTRIBUTING.md#getting-started
-
-[getting-started-firefox]:./CONTRIBUTING.md#firefox
-
-[getting-started-chrome]:./CONTRIBUTING.md#chrome
-
-[getting-started-node]:./CONTRIBUTING.md#nodejs
-
-[create-local-config]:./CONTRIBUTING.md#create-a-local-config-file
-
-[reporting-bugs]:./CONTRIBUTING.md#reporting-bugs-bug
-[suggesting-enhancements]:./CONTRIBUTING.md#suggesting-enhancements-new
-[your-first-code-contribution]:./CONTRIBUTING.md#your-first-code-contribution
-[pull-requests]:./CONTRIBUTING.md#pull-requests
-[writing-code]:./CONTRIBUTING.md#writing-code-computer
-[hot-reloading]:./CONTRIBUTING.md#hot-reloading-fire
-[tests]:./CONTRIBUTING.md#tests
-[unit-tests]:./CONTRIBUTING.md#unit-tests
-[integration-tests]:./CONTRIBUTING.md#integration-tests
-[linting]:./CONTRIBUTING.md#linting
 
 [irc-devtools-html]:irc://irc.mozilla.org/devtools-html
 

bin/chrome-driver.js

@@ -0,0 +1,22 @@
+const spawn = require('child_process').spawn;
+
+const chromeBinary = "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
+
+const chrome = spawn(chromeBinary, [
+  "--remote-debugging-port=9222",
+  "--no-first-run",
+  "--user-data-dir=/tmp/chrome-dev-profile"
+])
+
+chrome.stdout.on('data', data => console.log(`stdout: ${data}`));
+chrome.stderr.on('data', data => console.log(`stderr: ${data}`));
+chrome.on('close', code => console.log(`chrome exited with code ${code}`));
+chrome.on('error', error => {
+  if (error.code == "ENOENT") {
+    console.log(`Hmm, could not find the path ${chromeBinary}.`)
+    console.log(`Try looking for chrome with ls /Applications`)
+    return;
+  }
+
+  console.log(error)
+});

configs/local.sample.json

@@ -1,6 +1,6 @@
 {
   "theme": "light",
-  "hotReloading": true,
+  "hotReloading": false,
   "logging": {
     "actions": false
   },

docs/debugging-the-debugger.md

@@ -0,0 +1,101 @@
+# Debugging the Debugger
+
+Debugging the Debugger is one of the highest levels of inception. Before you begin, prepare yourself for a mind-bending trip of self discovery.
+
+### Playing with the debugger
+
+Setup the Debugger so that your environment looks like this [gif][debugger-intro-gif].
+
+If you have any questions, go back to the [getting setup][getting-setup]
+instructions.
+
+
+### Design a new theme :snowflake:
+
+Lets design a new theme for the debugger, it's not too hard! Our goal here is to style the source tree, editor, and other UI components.
+
+Share your a screenshot of your theme [here][getting-started-issue]! Here's an example camo [theme][camo-theme] that I designed the other day.
+
+
+### Make breakpoints dance :dancers:
+
+Adding a breakpoint is a critical piece in the inception game...
+Lets make the debugger do something special when a breakpoint is added.
+
+```diff
+diff --git a/src/components/Editor.js b/src/components/Editor.js
+index ae71d2d..66e0c04 100644
+--- a/src/components/Editor.js
++++ b/src/components/Editor.js
+@@ -78,11 +78,14 @@ const Editor = React.createClass({
+       return this.closeConditionalPanel(line);
+     }
+
++    // => hamster dance
++
+     this.toggleBreakpoint(line);
+   },
+```
+
+We currently don't have anything awesome as a demo. If you come up with something cool, feel free to share it  [here][getting-started-issue] and we can add it to the doc!
+
+### Pausing FTW :red_circle:
+
+When the debugger pauses, the fun begins. Here's a [gif](http://g.recordit.co/qutDioRQvy.gif) of what the debugger does normally when it pauses. You're mission if you choose to accept it, is to make it do something truly weird.
+
+Here's a patch to get you started where we check in the Editor to see if we're paused in a re-render.
+
+```diff
+diff --git a/src/components/Editor.js b/src/components/Editor.js
+index ae71d2d..6690d05 100644
+--- a/src/components/Editor.js
++++ b/src/components/Editor.js
+@@ -78,11 +78,14 @@ const Editor = React.createClass({
+       return this.closeConditionalPanel(line);
+     }
+
+     const line = this.editor.codeMirror.lineAtHeight(event.clientY);
+     const bp = breakpointAtLine(this.props.breakpoints, line);
+     this.showGutterMenu(event, line, bp);
+@@ -329,6 +332,11 @@ const Editor = React.createClass({
+       this.showSourceText(sourceText, selectedLocation);
+     }
+
++    // the debugger is paused
++    if (nextProps.selectedFrame) {
++      // do something really cool here
++    }
+```
+
+### Debugger Philosophy
+
+Here's the debugger philosophy in a nutshell.
+
+1. When you inspect the running debugger app, you're debugging a web app
+2. The Debugger like other applications has an API to communicate with the browser
+3. There's no magic here. If you can build a web app, you can hack on the debugger!
+4. You are the debugger's principal customer. Remember, the customer is always right!
+
+Please let us know if we're missing something zen  [here][getting-started-issue].
+
+
+### Next Steps
+
+Now that you've internalized the debugger philosophy, it's time to start putting this wisdom to use.
+
+**Share what you know** Give a talk in school, work, or a local meetup. I'm willing to bet your audience will not know the debugger is a web app!
+
+- here are @amitzur's [slides][amit-slides] from his [talk][amit-tweet]
+
+**Contribute back** take a look at how you can [contributing][contributing]. We would love the help!
+
+
+
+[contributing]:../CONTRIBUTING.md
+[getting-setup]:./getting-setup.md
+[getting-started-issue]:https://github.com/devtools-html/debugger.html/issues/1247
+
+[debugger-intro-gif]:http://g.recordit.co/WjHZaXKifZ.gif
+[amit-slides]:https://docs.google.com/presentation/d/1jdnvL-BwwxEuFbb9tiRxcT6UT-Ua0jGhy9FKBT4b43E/edit
+[amit-tweet]:https://twitter.com/amitzur/status/790153843946426369
+[camo-theme]:https://cloud.githubusercontent.com/assets/254562/20683683/ec030354-b57a-11e6-98bc-c8da75721e78.png