juliandescottes

about:debugging-new

What is about:debugging-new

The purpose of about:debugging is to be a debugging hub to start inspecting your addons, processes, tabs and processes. This new version of about:debugging will also allow you to debug remote devices (Firefox for Android on a smartphone). The user should be able to connect either via USB or WiFi. This solution is supposed to replace the various existing remote debugging solutions available in Firefox DevTools, WebIDE and the Connect page.

To try about:debugging-new, the preference devtools.aboutdebugging.new-enabled needs to be set to true in about:config. After that, the UI is available by going to about:debugging.

Technical overview

The about:debugging-new UI is built using React and Redux. The various React/Redux files should be organized as follows:

juliandescottes

[alias]
wip = log --graph --rev=wip --template=wip
who = !$HG anno -u $1 | awk '{print $$1}' | sort | uniq -c | sort -r
amend = commit --amend
nuke = !$HG revert --all --no-backup ; $HG purge
now = !$HG parent | grep summary
next = !$HG up $($HG log -r . --template '{children}\n')
prev = up .^

juliandescottes

# HG changeset patch
# User David Walsh <[email protected]>
# Date 1539048226 18000
#      Mon Oct 08 20:23:46 2018 -0500
# Node ID 7931d57e3eae80a92ee485f9277762c713f37e6c
# Parent  b37cb2cbe0872efd25c46050302a28a51efd5dc5
Bug 1314057 - Move worker actor and console tests to shared

diff --git a/devtools/client/debugger/test/mochitest/browser2.ini b/devtools/client/debugger/test/mochitest/browser2.ini
--- a/devtools/client/debugger/test/mochitest/browser2.ini

juliandescottes

createTargetForTab, step by step

• DebuggerServer.init() This actually doesn't do much. It creates a _connections map/object, initializes the actor registry with this map (currently empty). Despite the name, this mostly does nothing.

• DebuggerServer.registerAllActors() This does two things. First it registers all the browser and target actors in the actor-registry. This will allow to dynamically create any of those actors later on. Then it creates a factory for the root actor. In the same way as the other actor, the root actor is not created here, but a factory is prepared and we will invoke it as soon as we establish connections for this Server

• new DebuggerClient(transport)

juliandescottes

createTargetForTab, step by step

- DebuggerServer.init()
  This actually doesn't do much. It creates a _connections map/object, initializes the
  actor registry with this map (currently empty). Despite the name, this mostly does nothing.

- DebuggerServer.registerAllActors()
  This does two things. First it registers all the browser and target actors in the actor-registry. This will allow to dynamically create any of those actors later on. Then it creates a factory for the root actor. In the same way as the other actor, the root actor is not created here, but a factory is prepared and we will invoke it as soon as we establish connections for this Server

- new DebuggerClient(transport)

juliandescottes

# HG changeset patch
# User Julian Descottes <[email protected]>
# Date 1538465251 -7200
#      Tue Oct 02 09:27:31 2018 +0200
# Node ID 4edce7cd93d3d1d2d3020d26427945b837a84dd7
# Parent  ceeb1c7d62517f4ac960f1adaf75b2a506c1183a
add static helper WIP WIP WIP

diff --git a/devtools/client/webide/modules/addons.js b/devtools/client/webide/modules/addons.js
--- a/devtools/client/webide/modules/addons.js

juliandescottes

# HG changeset patch
# User Julian Descottes <[email protected]>
# Date 1537770943 -7200
#      Mon Sep 24 08:35:43 2018 +0200
# Node ID e5d16a78efe5dc96a0540cc0d54db18ba01e455a
# Parent  3e0166df6ac292dd863b1bc62672b27a7a1f1dfa
WIP WIP WIP ADB EXTENSION HELPER

diff --git a/devtools/client/aboutdebugging-new/src/modules/usb-runtimes.js b/devtools/client/aboutdebugging-new/src/modules/usb-runtimes.js
--- a/devtools/client/aboutdebugging-new/src/modules/usb-runtimes.js

juliandescottes

diff --git a/src/js/utils/serialization/Deserializer.js b/src/js/utils/serialization/Deserializer.js
index f8f532c..bcb3c26 100644
--- a/src/js/utils/serialization/Deserializer.js
+++ b/src/js/utils/serialization/Deserializer.js
@@ -36,6 +36,7 @@
 
     var descriptor = new pskl.model.piskel.Descriptor(name, description);
     this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, piskelData.fps, descriptor);
+    this.hiddenFrames = piskelData.hiddenFrames || [];
 

juliandescottes

NetworkLocations module?

I have several options to handle network locations. First of all, let's assume I am using preferences to store the value.

Basically the code to add a location to the prefs looks like:

  function addLocation(location) {
    const Services = require("Services");
    const PREF = "devtools.aboutdebugging.network-locations";

juliandescottes

diff --git a/dom/base/CustomElementRegistry.cpp b/dom/base/CustomElementRegistry.cpp
--- a/dom/base/CustomElementRegistry.cpp
+++ b/dom/base/CustomElementRegistry.cpp
@@ -1,22 +1,26 @@
 /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=8 sts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */