Directory restructure (#1184)

* Clean up lint warnings

@Garbee helped us expand the scope of our js lints recently. One of the
consequences was that there were some matched files that were ignored,
which showed up in eslint warnings.

This addressees that by:
1. moving tree.js to the sham modules package
2. burning imstruct
3. narrowing the scope of the glob to just the toolbox, the other
packages don't matter.
   * devtools-modules we don't want to change,
   * devtools-sham-modules are copy paste and tweaks from devtools-modules. so we don't want to match
   * devtools-config is tiny and will likely go away with the toolbox work
   * network-config is even smaller and could likely go away soon too...

* Initial file moving for debugger to new structure.

* File moving for the toolbox, changing references in config files.

* Change more references in the source and documentation.

* Fix references in unit test files.

* Change some more references in the configs and index files to get the debugger rendering

* Fix failing test

.babelrc

@@ -8,7 +8,7 @@
 
     ["module-resolver", {
       "root": [
-        "./packages/devtools-local-toolbox/public/js",
+        "./packages/devtools-local-toolbox/src",
       ],
       "alias": {
         "devtools/client/shared/vendor/react": "react",

.eslintignore

@@ -1,14 +1,9 @@
-public/build/*
-public/js/lib/tree.js
-public/js/utils/imstruct.js
-public/js/test/examples/**
-public/js/test/integration/**
-public/js/test/unit-sources/**
-public/js/test/mochitest/head.js
-public/js/test/mochitest/examples/**
+assets/*
+src/test/examples/**
+src/test/integration/**
+src/test/unit-sources/**
+src/test/mochitest/head.js
+src/test/mochitest/examples/**
 webpack.config.*
-
-packages/devtools-modules/**/*.js
-packages/devtools-sham-modules/**/*.js
 bin/
 

.storybook/config.js

@@ -1,11 +1,11 @@
 const { configure } = require("@kadira/storybook");
 const { setConfig } = require("../config/feature");
 
-require("../public/js/lib/themes/light-theme.css");
+require("../src/lib/themes/light-theme.css");
 setConfig(DebuggerConfig);
 
 function loadStories() {
-  require("../public/js/components/stories");
+  require("../src/components/stories");
 }
 
 configure(loadStories, module);

.stylelintignore

@@ -1,2 +1,2 @@
-public/js/components/SplitBox.css
-public/js/components/reps.css
+src/components/SplitBox.css
+src/components/reps.css

bin/cypress-server.js

@@ -6,14 +6,14 @@ const fs = require('fs');
 const path = require('path');
 
 /**
- saves a fixture file to public/js/test/fixtures
+ saves a fixture file to src/test/fixtures
 
  @param name - name of the fixture file
  @param text - fixture json text
 */
 function saveFixture(name, text) {
   function getFixtureFile(name) {
-    const fixturePath = path.join(__dirname, "../public/js/test/fixtures");
+    const fixturePath = path.join(__dirname, "../src/test/fixtures");
     const fixtureFile = path.join(fixturePath, name + ".json");
     if (!fs.existsSync(fixturePath)) {
       throw new Error("Could not find fixture " + name);

bin/import-deps.js

@@ -14,10 +14,10 @@ if (!geckoDir) {
   exit();
 }
 
-glob("public/js/lib/devtools/**/*.js").forEach((debuggerFile) => {
+glob("src/lib/devtools/**/*.js").forEach((debuggerFile) => {
   const geckoFilePath = path.join(
     geckoDir,
-    path.relative("public/js/lib/", debuggerFile)
+    path.relative("src/lib/", debuggerFile)
   );
 
   if (fs.existsSync(geckoFilePath)) {

bin/make-firefox-bundle

@@ -31,18 +31,18 @@ fi
 
 TARGET=firefox-panel node_modules/.bin/webpack
 
-echo "// Generated from: $REV\n" | cat - public/build/bundle.js > "$DEBUGGER_PATH/bundle.js"
-cp public/build/source-map-worker.js "$DEBUGGER_PATH"
-cp public/build/pretty-print-worker.js "$DEBUGGER_PATH"
-cp public/build/styles.css "$DEBUGGER_PATH"
-cp public/images/* "$DEBUGGER_PATH/images"
-cp public/debugger.properties "$PROPERTIES_PATH"
+echo "// Generated from: $REV\n" | cat - assets/build/bundle.js > "$DEBUGGER_PATH/bundle.js"
+cp assets/build/source-map-worker.js "$DEBUGGER_PATH"
+cp assets/build/pretty-print-worker.js "$DEBUGGER_PATH"
+cp assets/build/styles.css "$DEBUGGER_PATH"
+cp assets/images/* "$DEBUGGER_PATH/images"
+cp assets/locales/debugger.properties "$PROPERTIES_PATH"
 
 rm -r "$DEBUGGER_PATH/test/mochitest"
 if [ -n "$SYMLINK_MOCHITESTS" ]; then
-    ln -s `pwd -P`"/$ROOT/../public/js/test/mochitest/" "$DEBUGGER_PATH/test/mochitest"
+    ln -s `pwd -P`"/$ROOT/../src/test/mochitest/" "$DEBUGGER_PATH/test/mochitest"
 else
-    rsync -avz public/js/test/mochitest/ "$DEBUGGER_PATH/test/mochitest"
+    rsync -avz src/test/mochitest/ "$DEBUGGER_PATH/test/mochitest"
 fi
 
 # Make sure a rebuild uses the new tests

bin/mocha-server.js

@@ -35,7 +35,7 @@ function getTestPaths(dir) {
   });
 }
 
-const testPaths = getTestPaths(path.join(__dirname, "../public/js"));
+const testPaths = getTestPaths(path.join(__dirname, "../src"));
 
 projectConfig.entry.bundle = projectConfig.entry.bundle.concat(testPaths);
 const config = Object.assign({}, projectConfig, {});

bin/run-mochitests-docker

@@ -3,12 +3,12 @@
 TARGET=firefox-panel node_modules/.bin/webpack
 
 docker run -it \
-  -v `pwd`/public/build/bundle.js:/firefox/devtools/client/debugger/new/bundle.js \
-  -v `pwd`/public/build/source-map-worker.js:/firefox/devtools/client/debugger/new/source-map-worker.js \
-  -v `pwd`/public/build/pretty-print-worker.js:/firefox/devtools/client/debugger/new/pretty-print-worker.js \
-  -v `pwd`/public/build/styles.css:/firefox/devtools/client/debugger/new/styles.css \
-  -v `pwd`/public/images:/firefox/devtools/client/debugger/new/images \
-  -v `pwd`/public/js/test/mochitest:/firefox/devtools/client/debugger/new/test/mochitest \
+  -v `pwd`/assets/build/bundle.js:/firefox/devtools/client/debugger/new/bundle.js \
+  -v `pwd`/assets/build/source-map-worker.js:/firefox/devtools/client/debugger/new/source-map-worker.js \
+  -v `pwd`/assets/build/pretty-print-worker.js:/firefox/devtools/client/debugger/new/pretty-print-worker.js \
+  -v `pwd`/assets/build/styles.css:/firefox/devtools/client/debugger/new/styles.css \
+  -v `pwd`/assets/images:/firefox/devtools/client/debugger/new/images \
+  -v `pwd`/src/test/mochitest:/firefox/devtools/client/debugger/new/test/mochitest \
   -v "/tmp/.X11-unix:/tmp/.X11-unix:rw" \
   -e "DISPLAY=unix$DISPLAY" \
   --ipc host \

circle.yml

@@ -17,7 +17,7 @@ checkout:
 test:
   override:
     - mkdir -p $CIRCLE_TEST_REPORTS/mocha
-    - node public/js/test/node-unit-tests.js --ci
+    - node src/test/node-unit-tests.js --ci
     - ./bin/run-mochitests-docker
     - npm run firefox-unit-test
   pre:

docs/debugger-html-react-redux-overview.md

@@ -54,12 +54,12 @@ is not modified.
 React uses a Virtual DOM; only required changes to the
 actual DOM will be rendered.
 
-#[Components](https://github.com/devtools-html/debugger.html/tree/master/public/js/components) <a name="components"></a>
+#[Components](https://github.com/devtools-html/debugger.html/tree/master/src/components) <a name="components"></a>
 
 
-debbuger.html uses React [Components](https://github.com/devtools-html/debugger.html/tree/master/public/js/components) to render portions of the
+debbuger.html uses React [Components](https://github.com/devtools-html/debugger.html/tree/master/src/components) to render portions of the
 application. Each component’s source code is located under the
-public/js/components folder. In this section we will cover how the
+src/components folder. In this section we will cover how the
 presentation pieces fit together; later we will discuss
 how debugger.html uses Redux to wire up data to each of the components.
 
@@ -167,10 +167,10 @@ the Redux state. Finally, all of the actions in the actions folder are
 combined and the contained <code>actionCreators</code> in each of the files are setup
 so the actions can be called directly from the component.
 
-#[Reducers](https://github.com/devtools-html/debugger.html/tree/master/public/js/reducers) <a name="reducers"></a> 
+#[Reducers](https://github.com/devtools-html/debugger.html/tree/master/src/reducers) <a name="reducers"></a>
 
 
-The [Reducers](https://github.com/devtools-html/debugger.html/tree/master/public/js/reducers) are all located in the public/js/reducers folder and are
+The [Reducers](https://github.com/devtools-html/debugger.html/tree/master/src/reducers) are all located in the src/reducers folder and are
 all combined using Redux’s <code>combineReducters()</code> function. This function is
 executed in main.js as follows:
 
@@ -243,7 +243,7 @@ The following action types are handled:
     removing a breakpoint. If the breakpoint is being disabled the
     disabled attribute of the breakpoint is set to <code>false</code>. If
     the breakpoint is removed it is deleted from the breakpoints state.
-    
+
 
 The breakpoints reducer additionally supplies functions to
 retrieve information from the breakpoints state. For example the
@@ -431,10 +431,10 @@ The tabs reducer handles the following action types:
 -   <code>SELECT\_TAB</code> – This action type is triggered when a specific
     application is selected for debugging.
 
-#[Actions](https://github.com/devtools-html/debugger.html/tree/master/public/js/actions) <a name="actions"></a>
+#[Actions](https://github.com/devtools-html/debugger.html/tree/master/src/actions) <a name="actions"></a>
 
-The [actions](https://github.com/devtools-html/debugger.html/tree/master/public/js/actions) in debugger.html are all located in the
-public/js/actions folder; there is an action file corresponding to
+The [actions](https://github.com/devtools-html/debugger.html/tree/master/src/actions) in debugger.html are all located in the
+src/actions folder; there is an action file corresponding to
  each reducer, which is responsible for dispatching the
 proper event when the application state needs to be modified. In this
 section we will cover each action file. As stated earlier, many of the
@@ -497,16 +497,16 @@ The event-listeners file exports the following functions:
     currently have listeners bound for the application being debugged.
     Once retrieved the <code>fetchEventListeners()</code> function dispatches the
     <code>FETCH\_EVENT\_LISTENERS</code> action.
-    
+
 ##pause
 
 The **pause** action file handles all functions responsible for
 pausing, resuming and manipulating the debugger by stepping through
 code. The functions contained in this file handle several calls back and
 forth with the connected client (Firefox, Chrome, Node). Most of the
 client functions are defined in the
-public/js/clients/specificclient/events.js and
-public/js/clients/specificclient/commands.js files. The pause action
+src/clients/specificclient/events.js and
+src/clients/specificclient/commands.js files. The pause action
 file exports the following functions:
 
 -   <code>addExpression()</code> – Called from the
@@ -543,7 +543,7 @@ file exports the following functions:
     RightSideBar component. This is a generic function that sends
     different commands to the connected client. After the command is
     executed the <code>COMMAND</code> action is dispatched. The client commands are
-    defined in the public/js/clients/specificclient/commands.js file.
+    defined in the src/clients/specificclient/commands.js file.
 
 -   <code>stepIn()</code> – This function is called from the RightSideBar. This
     function calls the <code>command()</code> function to pass it
@@ -565,7 +565,7 @@ file exports the following functions:
     pause button is pressed and the debugger is currently not paused.
     This function calls the connected clients <code>breakOnNext()</code> function,
     which is defined in the
-    public/js/clients/specificclient/commands.js file. After returning
+    src/clients/specificclient/commands.js file. After returning
     from the client call the <code>BREAK\_ON\_NEXT</code> action is dispatched.
 
 -   <code>selectFrame()</code> – This function is called from the Frames component when
@@ -581,8 +581,8 @@ file exports the following functions:
     the variable tree is expanded. The function calls the connected
     client to retrieve the values and dispatches the
     <code>LOAD\_OBJECT\_PROPERTIES</code> action.
-    
-    
+
+
 ##sources
 
 The **sources** action is responsible for providing functions that
@@ -591,7 +591,7 @@ editor and supplying black box and pretty print functionality. The sources
 action file exports the following functions:
 
 -   <code>newSource()</code> – This function is called from the connected
-    client as defined in public/js/clients/specificclient/events.js when
+    client as defined in src/clients/specificclient/events.js when
     a project is loaded. In addition <code>newSource()</code> is called whenever a
     source map is loaded to add it to the project. This function checks
     to see if a source map needs to be loaded and if so dispatches the
@@ -612,7 +612,7 @@ action file exports the following functions:
     promise completes and the text is loaded.
 
 -   <code>selectSourceURL()</code> – Currently this function is only exposed in the
-    public/js/main.js file to external clients. The function first
+    src/main.js file to external clients. The function first
     dispatches a <code>SELECT\_SOURCE</code> action and then dispatches the
     <code>SELECT\_SOURCE\_URL</code> action. As stated above the text is loaded with
     the <code>selectSource()</code> function.
@@ -634,7 +634,7 @@ action file exports the following functions:
     adds the new file to the project. Next, the function dispatches a
     <code>TOGGLE\_PRETTY\_PRINT</code> action, which contains a promise that starts a
     Worker thread to transform the source. The worker is defined
-    in public/build/pretty-print-worker.js. The <code>selectSource()</code> function is then
+    in assets/build/pretty-print-worker.js. The <code>selectSource()</code> function is then
     called to select the new source.
 
 -   <code>loadSourceText()</code> – This function is called whenever a source is
@@ -654,22 +654,20 @@ action file exports the following functions:
 -   <code>getTextForSources()</code> – This function takes a set of source files and
     calls <code>loadSourceText()</code> to load each file. Currently this function is
     not used in debugger.html.
-    
+
 ##tabs
 
 The **tabs** action is responsible for gathering all connected
 clients that can be debugged, and gathering the tabs for each application that can be debugged on the connected client. The tabs action
 file exports the following functions:
 
--   <code>newTabs()</code> – This function is called from public/js/main.js and sets
+-   <code>newTabs()</code> – This function is called from src/main.js and sets
     the action type to <code>ADD\_TABS</code>. The action is dispatched from the
-    public/js/main.js when debugger.html is loading and displaying
+    src/main.js when debugger.html is loading and displaying
     the main page or when starting to debug when a specific tab
     is selected.
 
--   <code>selectTab()</code> – This function is called from public/js/main.js when a
+-   <code>selectTab()</code> – This function is called from src/main.js when a
     user has selected a specific tab from a connected application
     to debug. It sets the action type to <code>SELECT\_TAB</code> and the action is
-    then dispatched in public/js/main.js.
-
-
+    then dispatched in src/main.js.

docs/local-development.md

@@ -57,7 +57,7 @@ The Debugger supports two types of internationalization RTL (right to left) layo
 
 **L10N**
 
-[L10N](https://github.com/devtools-html/debugger.html/blob/master/packages/devtools-local-toolbox/public/js/utils/L10N.js) is a global module with two methods `getStr` and `getFormatStr`.
+[L10N](https://github.com/devtools-html/debugger.html/blob/master/packages/devtools-local-toolbox/src/utils/L10N.js) is a global module with two methods `getStr` and `getFormatStr`.
 
 ```js
 L10N.getStr("scopes.header")
@@ -91,7 +91,7 @@ html[dir="rtl"] .source-footer .command-bar {
 }
 ```
 
-Translated strings are added to the local [strings](https://github.com/devtools-html/debugger.html/blob/master/public/js/strings.json)
+Translated strings are added to the local [strings](https://github.com/devtools-html/debugger.html/blob/master/src/strings.json)
 file and m-c [debugger properties](https://dxr.mozilla.org/mozilla-central/source/devtools/client/locales/en-US/debugger.properties) file.
 
 ### Flow
@@ -129,6 +129,6 @@ Storybook is a local development environment for react components for viewing co
 **Getting Started:**
 * install storybook `npm i -g @kadira/storybook`
 + start storybook `npm run storybook`
-+ edit a component story in `public/js/components/stories`
++ edit a component story in `src/components/stories`
 
 ![](./screenshots/storybook.png)

docs/mochitests.md

@@ -2,7 +2,7 @@ We use [mochitests](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Mo
 
 Mochitests require a local checkout of the Firefox source code. This is because they are used to test a lot of Firefox, and you would usually run them inside Firefox. We are developing the debugger outside of Firefox, but still want to test it as a devtools panel, so we've figured out a way to use them. It may not be elegant, but it allows us to ensure a high quality Firefox debugger.
 
-Mochitests live in `public/js/test/mochitest`.
+Mochitests live in `src/test/mochitest`.
 
 ## Getting Started
 
@@ -28,7 +28,7 @@ cd firefox
 ./mach mochitest --subsuite devtools devtools/client/debugger/new/test/mochitest/
 ```
 
-This works because we've symlinked the local mochitests into where the debugger lives in Firefox. Any changes to the tests in `public/js/test/mochitest` will be reflected and you can re-run the tests.
+This works because we've symlinked the local mochitests into where the debugger lives in Firefox. Any changes to the tests in `src/test/mochitest` will be reflected and you can re-run the tests.
 
 Visit the [mochitest](https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Mochitest) MDN page to learn more about mochitests and more advanced arguments. A few tips: