firefox-devtools / devtools-core Goto Github PK
View Code? Open in Web Editor NEW:rocket: Packages for Firefox DevTools
:rocket: Packages for Firefox DevTools
This issue is a copy of firefox-devtools/debugger#1142.
There are strings, which we would like to pluralize in the debugger.
A good place to start is to pluralize the source.search
results summary.
here are some relevant links
We should display a message when we do have a filterString !== ""
and no tabs match it
Blocked by #33
There are two main operations sync-assets
publish-assets
sync-assets
- when a tool wants to copy assets to a local m-c for running in the panel or tests
publish-assets
- when a tool wants to publish assets to a dist directory before bumping a version.
It'd be neat if storybook were published to github pages.
Advantages:
Links
It would be nice for the launch pad to check every second or so for new tabs on the open browsers.
Here's a patch to help get started
curl https://gist.githubusercontent.com/jasonLaster/854a5f3a2f0db707522c830ea906ab27/raw/3cbeec0d10a15147ca3562479e2f21ea5f653b5b/foo.diff | git apply
we want the individual tools to share eslint configs
we can have a base config that they pull in like dev-server
or use eslints extends
api
// Extend from the shared list of defined globals for mochitests.
"extends": "../../../../../.eslintrc.mochitests.js"
Maybe we should make it more clear why there isn't any tabs shown, either by making the "first time" message bigger, or by having a dedicated message in the center, with an icon/illustration.
PS: http://emptystat.es has tons of great examples on how empty states are handled.
@wldcordeiro and I worked on a quick patch for chrome, but here's the gist of it:
diff --git a/packages/devtools-launchpad/bin/chrome-driver.js b/packages/devtools-launchpad/bin/chrome-driver.js
index 7670a01..764bf44 100644
--- a/packages/devtools-launchpad/bin/chrome-driver.js
+++ b/packages/devtools-launchpad/bin/chrome-driver.js
@@ -1,8 +1,12 @@
#!/usr/bin/env node
const spawn = require('child_process').spawn;
+const isLinux = /^linux/.test(process.platform);
-const chromeBinary = "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
+let chromeBinary= = "/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome";
+if (isLinux) {
+ chromeBinary = /* some linuxy solution for finding the path */
+}
It is hardcoded to "Firefox Debugger" ATM (https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/index.html#L4), which can be a bit weird for other tool using it (like devtools-reps)
The launchpad establishes a connection with firefox and chrome. It also has browser drivers for launching them with a debugger port.
It would be pretty cool if the launchpad provided a button for launching chrome or firefox if one of the browsers wasn't already running.
Here's a patch:
diff --git a/packages/devtools-launchpad/bin/development-server.js b/packages/devtools-launchpad/bin/development-server.js
index 0825b80..2f8153c 100755
--- a/packages/devtools-launchpad/bin/development-server.js
+++ b/packages/devtools-launchpad/bin/development-server.js
@@ -64,6 +64,19 @@ function handleNetworkRequest(req, res) {
}
}
+function handleLaunch(req, res) {
+ const browser = req.query.browser;
+
+ const location = "https://devtools-html.github.io/debugger-examples/"
+ if (browser == "firefox") {
+ return ps.spawn(`./firefox-driver --start --location ${location}`)
+ }
+
+ if (browser == "chrome") {
+ return ps.spawn(`./chrome-driver`)
+ }
+}
+
function onRequest(err, result) {
const serverPort = getValue("development.serverPort");
@@ -98,6 +111,9 @@ function startDevServer(devConfig, webpackConfig) {
app.get("/", serveRoot);
}
app.get("/get", handleNetworkRequest);
+
+ app.post("/launch", handleLaunch)
+
const serverPort = getValue("development.serverPort");
app.listen(serverPort, "0.0.0.0", onRequest);
diff --git a/packages/devtools-launchpad/src/components/LandingPage.js b/packages/devtools-launchpad/src/components/LandingPage.js
index af85435..e2b574c 100644
--- a/packages/devtools-launchpad/src/components/LandingPage.js
+++ b/packages/devtools-launchpad/src/components/LandingPage.js
@@ -23,6 +23,13 @@ function firstTimeMessage(title, urlPart) {
);
}
+function launchBrowser(browser) {
+ fetch("/launch", { // this is p
+ params: { browser },
+ method: "post"
+ });
+}
+
function getTabURL(tab, paramName) {
const tabID = tab.get("id");
return `/?${paramName}=${tabID}`;
@@ -68,7 +75,15 @@ const LandingPage = React.createClass({
renderTabs(tabs, paramName) {
if (!tabs || tabs.count() == 0) {
- return dom.div({}, "");
+ // show the button in here
+ return dom.div({},
+ dom.button(
+ {
+ onClick: launchBrowser(browser)
+ },
+ `Launch ${browser}`
+ )
+ );
}
curl https://gist.githubusercontent.com/jasonLaster/a4c49c719ca8ea6441e8c0b5ae25ef1b/raw/de81e11aca91476007dcf3d617753f15e8bcd513/foo.diff | git apply
The debugger currently cannot fetch source maps from debugger-example projects because github uses HTTPS.
STR:
yarn start
https://devtools-html.github.io/debugger-examples/examples/increment/
localhost:8000
and select incrementThis should be an easy fix here
diff --git a/packages/devtools-launchpad/bin/development-server.js b/packages/devtools-launchpad/bin/development-server.js
index 0825b80..31d9bea 100755
--- a/packages/devtools-launchpad/bin/development-server.js
+++ b/packages/devtools-launchpad/bin/development-server.js
@@ -18,6 +18,7 @@ const setConfig = require("devtools-config").setConfig;
const isDevelopment = require("devtools-config").isDevelopment;
function httpGet(url, onResponse) {
+ // we should also support https
return http.get(url, (response) => {
if (response.statusCode !== 200) {
console.error(`error response: ${response.statusCode} to ${url}`);
diff --git a/packages/devtools-launchpad/webpack.config.js b/packages/devtools-launchpad/webpack.config.js
index b50f552..2dab874 100644
--- a/packages/devtools-launchpad/webpack.config.js
+++ b/packages/devtools-launchpad/webpack.config.js
@@ -48,7 +48,7 @@ module.exports = (webpackCo
To test this, you'll want to make the change in devtools-core and either re-install devtools-core or link the repos: info
Error:
Error: Protocol "https:" not supported. Expected "http:"
at new ClientRequest (_http_client.js:54:11)
at Object.request (http.js:26:10)
at Object.get (http.js:30:21)
at httpGet (/Users/jlaster/src/mozilla/debugger.html/node_modules/devtools-launchpad/bin/development-server.js:21:15)
at handleNetworkRequest (/Users/jlaster/src/mozilla/debugger.html/node_modules/devtools-launchpad/bin/development-server.js:48:21)
at Layer.handle [as handle_request] (/Users/jlaster/src/mozilla/debugger.html/node_modules/express/lib/router/layer.js:95:5)
at next (/Users/jlaster/src/mozilla/debugger.html/node_modules/express/lib/router/route.js:131:13)
at Route.dispatch (/Users/jlaster/src/mozilla/debugger.html/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/Users/jlaster/src/mozilla/debugger.html/node_modules/express/lib/router/layer.js:95:5)
at /Users/jlaster/src/mozilla/debugger.html/node_modules/express/lib/router/index.js:277:22
Splitter not resizable when Debugger is docked to side of browser window
BUGS
NOTES
dir
attribute and do the switch in JS.devtools-html
orgThis URL: https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/src/components/LandingPage.js#L19 isn't correct for Node or Chrome.
Probably a quick string fix required here.
Here's Node:
https://github.com/devtools-html/debugger.html/blob/master/docs/getting-setup.md#starting-node
And here's Chrome:
https://github.com/devtools-html/debugger.html/blob/master/docs/getting-setup.md#starting-chrome
The tab should have a dedicated style (with a blue background, like when we hover the tabs in the sidebar).
Maybe we could just directly focus the element (so pressing enter would work out of the box since the onClick
would be triggered), but if we're typing in the input, it might be weird.
Or maybe we can only add proper tab indexes and some style for :focus
to make the app easy to operate with the keyboard only.
It would be great if the launchpad used the prefs-loader.
This would let us have a prefs file per tool and track that file in github.
When building a tool to be used in the Firefox panel, we combine the usual webpack config with the webpack.config.devtools.
This translates all require
calls to external dependencies found in devtools (such as react), wrapping them in devtoolsRequire
call. However this is quite debugger specific (devtoolsRequire is defined in the index.html of the debugger).
Reps for instance are fine simply using require("devtools/client/shared/vendor/react") as they are always loaded by a browserLoader. At the moment this prevents building a valid bundle for reps.
We could fix it by making this part configurable? cc @jasonLaster @nchevobbe
We are currently adding linting. I assume we'll soon add node unit testing.
The last piece, which would really help is a small setup that would clone the tools that use the shared modules and run the integration tests.
I suppose the one caveat is perhaps there is an intentional breaking change that would fail, but it could still be nice to see the tests fail to see if in fact they do fail for the reasons you expect. And i'm sure we would catch un-anticipated failures as well.
I used webpack-bundle-analyzer
to help see what was going into the debugger bundle and it helped a lot
firefox-devtools/debugger#1730
Its fairly easy to add and can be a useful resource
react-dom has an index.js file with just a module.exports = require('react/lib/reactDOM), which our single-module-plugin turns into module.exports = require() and fails to load react dom.
From https://bugzilla.mozilla.org/show_bug.cgi?id=1327984 (we should mark this bug as resolved when this issue and #83 lands in mc)
Another issue I found when testing this:
- Open DevTools and select the Inspector panel
- Start changing width of the Sidebar (using vertical splitter)
- Move mouse over to the content (page) document area
- Release the mouse button
- Move mouse back to the Inspector panel -> the dragging is still in progress even if the mouse button isn't pressed -> BUG
It would be great if you could work on splitbox with storybook.
Actually, I see storybook being useful for several devtools-modules that are self contained components
We really don't have that many modules in devtools-modules at tho moment:
could all use a storybook
The debugger currently has an Svg module that can load Svgs and add them to the bundle with react.
We should move this to the launchpad so that other tools can use it.
Svg and ManagedTree are the two blockers for devtools reps using the object inspector
Key Shortcuts is an important shared modules that is currently in devtools-sham-modules
because it needed to use the shammed event emitter.
Back in October, I explored adding a settings pane, which would be easier for contributors than editing the settings through the local.json
.
I created this branch with the backend support for reading and editing the local.json.
I think step 1 would be to add a couple simple features:
And then perhaps next we could add toggle features.
What do you guys think?
In #74 a change to webpack.config.js is causing an error running the debugger.html.
I noted it here: f0a17da#commitcomment-20430954
Not every item in entry
is an array so the push
method fails. Not sure if the fix is here or the debugger config.
https://github.com/devtools-html/debugger.html/blob/master/webpack.config.js#L10-L14
Here's the error I'm seeing.
$ yarn start
yarn start v0.18.1
$ node bin/dev-server
/Users/clarkbw/src/mozilla/debugger.html/node_modules/devtools-launchpad/webpack.config.js:92
webpackConfig.entry[key].push("webpack-hot-middleware/client");
^
TypeError: webpackConfig.entry[key].push is not a function
at Object.keys.forEach.key (/Users/clarkbw/src/mozilla/debugger.html/node_modules/devtools-launchpad/webpack.config.js:92:34)
at Array.forEach (native)
at Object.module.exports [as toolboxConfig] (/Users/clarkbw/src/mozilla/debugger.html/node_modules/devtools-launchpad/webpack.config.js:91:40)
at buildConfig (/Users/clarkbw/src/mozilla/debugger.html/webpack.config.js:32:18)
at Object.<anonymous> (/Users/clarkbw/src/mozilla/debugger.html/webpack.config.js:37:18)
at Module._compile (module.js:571:32)
at loader (/Users/clarkbw/src/mozilla/debugger.html/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/clarkbw/src/mozilla/debugger.html/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
error Command failed with exit code 1.
copy of firefox-devtools/debugger#1030
We currently load our translation strings from public/js/strings.json. This works well, but it does mean we need to maintain two sets of strings in github and m-c.
It would be better if we could load strings from debugger.properties and when we publish copy the debugger.properties file to m-c.
This patch. Is close to working.
Reproduce step:
node bin/dev-server.js
in https://github.com/devtools-html/devtools-reps
It shows error
webpackConfig.entry.bundle.push("webpack-hot-middleware/client")
^
TypeError: Cannot read property 'push' of undefine
possible fix:
To run dev-server properly, I add default
entry {
bundle: []
}
to prevent undefined
issue.
if (getValue("hotReloading")) {
+ webpackConfig.entry = webpackConfig.entry || {};
+ webpackConfig.entry.bundle = webpackConfig.entry.bundle || [];
webpackConfig.entry.bundle.push("webpack-hot-middleware/client");
...
After patch I can see http://localhost:8000/ without error, but it still shows blank page though
We've seen several issues with linking the debugger to devtools-core packages
yarn link client-devtools-adapters
yarn link devtools-modules
yarn link devtools-launchpad
Some of the reported issues are
It's possible to link multiple repos i.e. run yarn link client-devtools-adapters
and yarn link devtools-launchpad
which might be causing issues.
Is it possible to run yarn unlink client-devtools-adapters
? If so we might want to document that.
If not we should document the good old rm -r node_modules
approach as devs should know how to uninstall.
Webpack 2 will help us in many concrete ways
The migration guide lays out the steps, which seem very doable
https://webpack.js.org/guides/migrating/
Currently the docs for ltr suggest manually editing the launchpad's root dir attribute.
We should improve this by having a default dir in the development config, that can be changed in the local.json.
Here's a quick patch:
diff --git a/packages/devtools-launchpad/bin/development-server.js b/packages/devtools-launchpad/bin/development-server.js
index 8e97213..0825b80 100755
--- a/packages/devtools-launchpad/bin/development-server.js
+++ b/packages/devtools-launchpad/bin/development-server.js
@@ -35,7 +35,10 @@ function httpGet(url, onResponse) {
function serveRoot(req, res) {
const tplPath = path.join(__dirname, "../index.html");
const tplFile = fs.readFileSync(tplPath, "utf8");
- res.send(Mustache.render(tplFile, { isDevelopment: isDevelopment() }));
+ res.send(Mustache.render(tplFile, {
+ isDevelopment: isDevelopment(),
+ dir: getValue("dir") || "ltr"
+ }));
}
function handleNetworkRequest(req, res) {
diff --git a/packages/devtools-launchpad/index.html b/packages/devtools-launchpad/index.html
index 858e130..79ea9aa 100644
--- a/packages/devtools-launchpad/index.html
+++ b/packages/devtools-launchpad/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html dir="ltr">
+<html dir="{{dir}}">
<head>
<title>Firefox Debugger</title>
<meta charset="utf8" />
If you have a lot of tabs (like I do), it could be difficult to find the one you want in the list
Bonus point:
I've seen alreadyPaused packets cause errors in the client adapter. I'm not sure exactly how to reproduce this.
I believe this would be the fix though:
diff --git a/packages/devtools-client-adapters/src/firefox/events.js b/packages/devtools-client-adapters/src/firefox/events.js
index f76b6fc..1f61ccb 100644
--- a/packages/devtools-client-adapters/src/firefox/events.js
+++ b/packages/devtools-client-adapters/src/firefox/events.js
@@ -30,7 +30,8 @@ async function paused(_: "paused", packet: PausedPacket) {
// If paused by an explicit interrupt, which are generated by the
// slow script dialog and internal events such as setting
// breakpoints, ignore the event.
- if (packet.why.type === "interrupted" && !packet.why.onNext) {
+ if (packet.why.type === "alreadyPaused" ||
+ (packet.why.type === "interrupted" && !packet.why.onNext)) {
return;
}
yarn run chrome
should automatically load the debugger examples page
https://devtools-html.github.io/debugger-examples/
as yarn run firefox
There are some challenges that are unique to working on a shared package like launchpad or client-adapters:
yarn link
yarn install <relative-path>
we should write up some notes on best practices
Copy of firefox-devtools/debugger#1137.
The Landing Page tries to connect to node and does not catch the network error if node is not running.
Upon running 'npm start', the debugger console shows this error. I'm sure that I'm not utilizing that port for any other purpose, as the only other window open was http://localhost:7999/todomvc/ in Firefox for the backbone app.
From https://bugzilla.mozilla.org/show_bug.cgi?id=1327984 (we should mark this bug as resolved when this issue and #84 lands in mc)
There are mochitests for Services, Splitter, Key Shortcuts in MC that we should be able to move to devtools-modules.
This might also be a good time to explore porting the tests to another testing tool like mocha or jest as they don't need to run in a priviledged environment.
when you're debugging a firefox tab and the connection drops it sucks!
We should provide a helpful UI (maybe a modal, or top bar pane) that does two things:
The key-shortcuts
module is in devtools-sham-modules
because it uses the sham version of Event Emitter.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.