Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

Directory restructure #1184

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 1 addition & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 6 additions & 11 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -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/

4 changes: 2 additions & 2 deletions .storybook/config.js
Original file line number Diff line number Diff line change
@@ -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);
4 changes: 2 additions & 2 deletions .stylelintignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
public/js/components/SplitBox.css
public/js/components/reps.css
src/components/SplitBox.css
src/components/reps.css
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
4 changes: 2 additions & 2 deletions bin/cypress-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions bin/import-deps.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down
16 changes: 8 additions & 8 deletions bin/make-firefox-bundle
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion bin/mocha-server.js
Original file line number Diff line number Diff line change
Expand Up @@ -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, {});
Expand Down
12 changes: 6 additions & 6 deletions bin/run-mochitests-docker
Original file line number Diff line number Diff line change
Expand Up @@ -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 \
Expand Down
2 changes: 1 addition & 1 deletion circle.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,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:
Expand Down
50 changes: 24 additions & 26 deletions docs/debugger-html-react-redux-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -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.
Expand Down
6 changes: 3 additions & 3 deletions docs/local-development.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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)
4 changes: 2 additions & 2 deletions docs/mochitests.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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:

Expand Down
Loading