firefox-devtools / devtools-core Goto Github PK

This PR started replacing tcomb with flow.

We should finish that up and then we can export those types so that we simplify the debugger's client types here

Depending on how many tabs you have/ how long the url are, the page can end up being not optimal.

We could reduce the spacing between the source title (here Firefox) and the list of tabs, and have the long url wrap and not having an horizontal scrolling.

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.

Webpack 2 will help us in many concrete ways

• linking will not have duplicate files
• builds will be deterministic and more reliable

The migration guide lays out the steps, which seem very doable
https://webpack.js.org/guides/migrating/

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.

This is blocked by #33 Update: #33 is now merged

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;
   }

screenshot

It'd be neat if storybook were published to github pages.

Advantages:

• Users can see our components,
• we can link to them in docs
• eventually we can also publish branches and do visual diffs

Links

• https://getstorybook.io/docs/react-storybook/basics/exporting-storybook
• https://github.com/kadirahq/storybook-deployer
• https://github.com/kadirahq/storybook-deployer

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"

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:

• splitbox
• draggable
• Services

could all use a storybook

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.

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)

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

When building a tool to be used in the Firefox panel, we combine the usual webpack config with the webpack.config.devtools.

https://github.com/devtools-html/devtools-core/blob/master/packages/devtools-launchpad/webpack.config.devtools.js#L45-L50

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

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.

smikhalevski/single-module-instance-webpack-plugin#2

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.

The key-shortcuts module is in devtools-sham-modules because it uses the sham version of Event Emitter.

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)

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:

• Enter key press automatically select the tab if there is only one (so you can debug/interact with the tab you want really quickly)

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:

• select theme
• toggle RTL
• toggle hot reloading

And then perhaps next we could add toggle features.

What do you guys think?

Relatively easy fix, just need to add the proper background color to the input.

Reproduce step:

1. run command 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

• Lets create a hello world project in the devtools-html org
• Add documentation for getting started

• rename directory
• rename package (can we change it on npm)?

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

• https://dxr.mozilla.org/mozilla-central/source/toolkit/locales/en-US/chrome/global/intl.properties
• http://searchfox.org/mozilla-central/source/devtools/shared/plural-form.js
• http://searchfox.org/mozilla-central/source/devtools/client/webconsole/new-console-output/components/message-repeat.js#31
• http://searchfox.org/mozilla-central/source/devtools/client/locales/en-US/webconsole.properties#131

The debugger currently cannot fetch source maps from debugger-example projects because github uses HTTPS.

STR:

• launch debugger yarn start
• launch firefox and go to https://devtools-html.github.io/debugger-examples/examples/increment/
• go to localhost:8000 and select increment
• observe the terminal error below

This 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

yarn run chrome should automatically load the debugger examples page
https://devtools-html.github.io/debugger-examples/
as yarn run firefox

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

• sources do not show up (likely an issue with client adapters)
• prefs is not defined (likely a devtools-modules issue)

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.

I heard you liked stories, so I put stories in stories in stories :)

Eventually, it breaks the story navigation too (clicking on another story doesn't do anything)

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

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

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

We should display a message when we do have a filterString !== "" and no tabs match it

Blocked by #33

There are some challenges that are unique to working on a shared package like launchpad or client-adapters:

• trade-offs of yarn link yarn install <relative-path>
• versioning
• patches that span packages

we should write up some notes on best practices

Splitter not resizable when Debugger is docked to side of browser window

BUGS

• firefox-devtools/debugger#1378
• https://bugzilla.mozilla.org/show_bug.cgi?id=1322062

NOTES

• This is caused by some simplifications in how we calculate screen width and mouse position in order to work with chromium.
• This is complicated in part because we want to support RTL out of the box. I wonder if we can handle this concern in JS and check the root dir attribute and do the switch in JS.

• Add basic CI #60
• Add flow to CI
• Add debugger mochitests #8

With @clarkbw and @ppold's work with client flow types, we're finally close to being able to remove tcomb.

@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 */
+}

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:

1. lets them know
2. provides a link back to the launchpad

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#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.

Screenshot attached.

Key Shortcuts is an important shared modules that is currently in devtools-sham-modules because it needed to use the shammed event emitter.

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.

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" />

This 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

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:

1. Open DevTools and select the Inspector panel
2. Start changing width of the Sidebar (using vertical splitter)
3. Move mouse over to the content (page) document area
4. Release the mouse button
5. Move mouse back to the Inspector panel -> the dragging is still in progress even if the mouse button isn't pressed -> BUG

• The landing page tabs could line up nicely with the left sidebar tabs if we update the vertical heights.
• also we can cleanup to focus border to be less obnoxious

Should be easy to do.

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.