Skip to content

Commit 4ce2953

Browse files
juliandescottesjasonLaster
authored andcommitted
Transpile debugger modules for DevTools loader (firefox-devtools#6220)
1 parent 12d04e8 commit 4ce2953

17 files changed

+534
-90
lines changed

.babel/transform-mc.js

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
const _path = require("path");
2+
const fs = require("fs");
3+
4+
const mappings = require("../configs/mozilla-central-mappings");
5+
6+
// Add two additional mappings that cannot be reused when creating the
7+
// webpack bundles.
8+
mappings["devtools-reps"] = "devtools/client/shared/components/reps/reps.js";
9+
mappings["devtools-source-map"] = "devtools/client/shared/source-map/index.js";
10+
11+
function isRequire(t, node) {
12+
return node && t.isCallExpression(node) && node.callee.name == "require";
13+
}
14+
15+
// List of vendored modules.
16+
// Should be synchronized with vendors.js
17+
const VENDORS = [
18+
"classnames",
19+
"devtools-components",
20+
"devtools-config",
21+
"devtools-contextmenu",
22+
"devtools-environment",
23+
"devtools-modules",
24+
"devtools-splitter",
25+
"devtools-utils",
26+
"fuzzaldrin-plus",
27+
"react-transition-group/Transition",
28+
"reselect",
29+
"Svg",
30+
"url",
31+
];
32+
33+
/**
34+
* This Babel plugin is used to transpile a single Debugger module into a module that
35+
* can be loaded in Firefox via the regular DevTools loader.
36+
*/
37+
module.exports = function({ types: t }) {
38+
return {
39+
visitor: {
40+
ModuleDeclaration(path, state) {
41+
const source = path.node.source;
42+
const value = source && source.value;
43+
if (value && value.includes(".css")) {
44+
path.remove();
45+
}
46+
},
47+
48+
StringLiteral(path, state) {
49+
const { filePath } = state.opts;
50+
let value = path.node.value;
51+
52+
if (!isRequire(t, path.parent)) {
53+
return;
54+
}
55+
56+
// Handle require() to files mapped to other mozilla-central files.
57+
// e.g. require("devtools-reps")
58+
// -> require("devtools/client/shared/components/reps/reps.js")
59+
if (Object.keys(mappings).includes(value)) {
60+
path.replaceWith(t.stringLiteral(mappings[value]));
61+
return;
62+
}
63+
64+
// Handle require() to loadash submodules
65+
// e.g. require("lodash/escapeRegExp")
66+
// -> require("devtools/client/shared/vendor/lodash").escapeRegExp
67+
if (value.startsWith("lodash/")) {
68+
const lodashSubModule = value.split("/").pop();
69+
path.replaceWith(
70+
t.stringLiteral(mappings.lodash)
71+
);
72+
path.parentPath.replaceWith(
73+
t.memberExpression(
74+
path.parent,
75+
t.identifier(lodashSubModule)
76+
)
77+
);
78+
return;
79+
}
80+
81+
// Handle require() to files bundled in vendor.js.
82+
// e.g. require("some-module");
83+
// -> require("devtools/client/debugger/new/dist/vendors").vendored["some-module"];
84+
const isVendored = VENDORS.some(vendored => value.endsWith(vendored));
85+
if (isVendored) {
86+
// components/shared/Svg is required using various relative paths.
87+
// Transform paths such as "../shared/Svg" to "Svg".
88+
if (value.endsWith("/Svg")) {
89+
value = "Svg";
90+
}
91+
92+
// Transform the required path to require vendors.js
93+
path.replaceWith(
94+
t.stringLiteral("devtools/client/debugger/new/dist/vendors")
95+
);
96+
97+
// Append `.vendored["some-module"]` after the require().
98+
path.parentPath.replaceWith(
99+
t.memberExpression(
100+
t.memberExpression(
101+
path.parent,
102+
t.identifier("vendored")
103+
),
104+
t.stringLiteral(value),
105+
true
106+
)
107+
);
108+
return;
109+
}
110+
111+
// Handle implicit index.js requires:
112+
// in a node environment, require("my/folder") will automatically load
113+
// my/folder/index.js if available. The DevTools load does not handle
114+
// this case, so we need to explicitly transform such requires to point
115+
// to the index.js file.
116+
const dir = _path.dirname(filePath);
117+
const depPath = _path.join(dir, `${value}.js`);
118+
const exists = fs.existsSync(depPath);
119+
if (
120+
!exists &&
121+
!value.endsWith("index") &&
122+
!value.startsWith("devtools")
123+
) {
124+
path.replaceWith(t.stringLiteral(`${value}/index`));
125+
return;
126+
}
127+
}
128+
}
129+
};
130+
};

.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,4 @@ src/test/mochitest/**
77
bin/
88
packages/**/fixtures/**
99
node_modules
10+
out

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@ tags
2020
*~
2121
webpack-stats/
2222
package-lock.json
23+
out

.travis.yml

+2
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,8 @@ script:
4444
- node --version
4545
- du -sh firefox
4646
- node ./bin/copy-assets.js --mc ./firefox
47+
- node ./bin/copy-modules.js --mc ./firefox
48+
- ./bin/ci/build-firefox.sh
4749
- node ./bin/ci/check-file-sizes.js
4850
- ./node_modules/.bin/mochii --ci --mc ./firefox --headless devtools/client/debugger/new
4951
- ./node_modules/.bin/mochii --ci --mc ./firefox --headless

.vscode/launch.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "attach",
10+
"name": "Attach",
11+
"port": 9229
12+
},
13+
{
14+
"type": "node",
15+
"request": "launch",
16+
"name": "Launch Program",
17+
"program": "${workspaceFolder}/bin/copy-modules.js"
18+
}
19+
]
20+
}

assets/panel/dist.moz.build

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# vim: set filetype=python:
2+
# This Source Code Form is subject to the terms of the Mozilla Public
3+
# License, v. 2.0. If a copy of the MPL was not distributed with this
4+
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
5+
6+
DevToolsModules(
7+
'parser-worker.js',
8+
'pretty-print-worker.js',
9+
'search-worker.js',
10+
'vendors.js'
11+
)

assets/panel/index.html

+22-26
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,25 @@
33
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
44
<!DOCTYPE html>
55
<html dir="">
6-
<head>
7-
<link rel="stylesheet"
8-
type="text/css"
9-
href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" />
10-
<link rel="stylesheet"
11-
type="text/css"
12-
href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" />
13-
<link rel="stylesheet"
14-
type="text/css"
15-
href="chrome://devtools/content/sourceeditor/codemirror/mozilla.css" />
16-
<link rel="stylesheet" type="text/css" href="resource://devtools/client/debugger/new/debugger.css" />
17-
</head>
18-
<body>
19-
<div id="mount"></div>
20-
<script type="application/javascript"
21-
src="chrome://devtools/content/shared/theme-switching.js"></script>
22-
<script type="text/javascript">
23-
const { BrowserLoader } = ChromeUtils.import("resource://devtools/client/shared/browser-loader.js", {});
24-
const { require } = BrowserLoader({
25-
baseURI: "resource://devtools/client/debugger/new/",
26-
window,
27-
});
28-
Debugger = require("devtools/client/debugger/new/debugger");
29-
</script>
30-
</body>
31-
</html>
6+
7+
<head>
8+
<link rel="stylesheet" type="text/css" href="chrome://devtools/content/sourceeditor/codemirror/lib/codemirror.css" />
9+
<link rel="stylesheet" type="text/css" href="chrome://devtools/content/sourceeditor/codemirror/addon/dialog/dialog.css" />
10+
<link rel="stylesheet" type="text/css" href="chrome://devtools/content/sourceeditor/codemirror/mozilla.css" />
11+
<link rel="stylesheet" type="text/css" href="resource://devtools/client/debugger/new/debugger.css" />
12+
</head>
13+
14+
<body>
15+
<div id="mount"></div>
16+
<script type="application/javascript" src="chrome://devtools/content/shared/theme-switching.js"></script>
17+
<script type="text/javascript">
18+
const { BrowserLoader } = ChromeUtils.import("resource://devtools/client/shared/browser-loader.js", {});
19+
const { require } = BrowserLoader({
20+
baseURI: "resource://devtools/client/debugger/new",
21+
window,
22+
});
23+
Debugger = require("devtools/client/debugger/new/src/main");
24+
</script>
25+
</body>
26+
27+
</html>

assets/panel/moz.build

+5-3
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
# License, v. 2.0. If a copy of the MPL was not distributed with this
44
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
55

6+
DIRS += [
7+
'dist',
8+
'src',
9+
]
10+
611
DevToolsModules(
712
'debugger.css',
813
'debugger.js',
914
'panel.js',
10-
'parser-worker.js',
11-
'pretty-print-worker.js',
12-
'search-worker.js',
1315
)

0 commit comments

Comments
 (0)