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

Build Firefox for Android

When do you need to build Firefox for Android

If a remote debugging change impacts the server (file located in devtools/server or in devtools/shared), you will not be able to test it with a device which runs the release version of Firefox for Android. For the purpose of remote debugging, your local build of Firefox Desktop where you will test about:debugging runs the content of devtools/client (including devtools/client/aboutdebugging-new). And devtools/server runs on the device. So as soon as you are developing or testing a patch that needs to update the server and is about USB debugging, you need to build Firefox for Android and deploy it on a test device.

Setup your environment

This will be a short documentation focused on the typical patches you may write for about:debugging. For a more complete documentation, you can refer to https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Simple_Firefox_for_Android_build.

juliandescottes

diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
@@ -8,24 +8,27 @@
  */
 
 add_task(async function() {
   prepareCollapsibilitiesTest();
 
   const { document, tab } = await openAboutDebugging();

juliandescottes

# HG changeset patch
# User Julian Descottes <[email protected]>
# Date 1543267098 -3600
#      Mon Nov 26 22:18:18 2018 +0100
# Node ID f92035925ff9210741b524eb68455d1bb5f6cb3e
# Parent  bd490139b395d47c6f1b4af6cf34f572a1902fe2
Bug 1497457 - Fix aboutdebugging systemaddons test after signature change;r=test-only

diff --git a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_system_addons.js b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_system_addons.js
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_system_addons.js

juliandescottes

class Front {
  async initialize() {
    throw new Error("initialize Mandatory");
  }

  static async createFront() {
    const front = new this();
    await front.initialize(); 
    return front;
  }

juliandescottes

/* 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/. */

"use strict";

const {
  DEBUG_TARGETS,
  REQUEST_WORKERS_SUCCESS,
  SERVICE_WORKER_FETCH_STATES,

juliandescottes

Running Tests for the new about:debugging

Tests overview

Tests are located in devtools/client/aboutdebugging-new/test. There are two subfolders, browser and unit. browser contains our browser mochitests. Most of our tests are browser mochitests. unit contains our xpc-shell unit tests. At the moment of writing we only have one.

Test coverage

You can get some code coverage information at https://codecov.io/gh/mozilla/gecko-dev/tree/master/devtools/client/aboutdebugging-new/src . The service is sometimes very slow, be patient! You might have to reload the page several times to get a result.

juliandescottes

What is the original test about?

Read the existing test, run it and understand what it is asserting. The shared methods used in those tests should be in one of the following files

• devtools/client/aboutdebugging/test/head.js
• devtools/client/shared/test/shared-head.js

Is this already ported?

Sometimes we may already have implemented the test as a side-effect of another bug, so try to check if by any chance this has not already been ported to the new about:debugging.

Can it be ported?

Identify if the features used in the test to migrate are already implemented in the new about:debugging. If they are not, either:

juliandescottes

ac_add_options --enable-artifact-builds

# ac_add_options --with-ccache=/usr/local/bin/ccache
ac_add_options --enable-debug-js-modules
# ac_add_options --enable-debug

# ac_add_options --with-branding=browser/branding/official
# ac_add_options --with-branding=browser/branding/aurora
# ac_add_options --enable-official-branding

juliandescottes

# HG changeset patch
# User Julian Descottes <[email protected]>
# Date 1547839671 -3600
#      Fri Jan 18 20:27:51 2019 +0100
# Node ID dc839e90091d78c21d4933c1bcf1ded7ef00e7d2
# Parent  3aa256c255f664c500714c34a3b9e353e545d196
WIP reduced coverage test case

diff --git a/devtools/client/aboutdebugging-new/test/browser/browser.ini b/devtools/client/aboutdebugging-new/test/browser/browser.ini
--- a/devtools/client/aboutdebugging-new/test/browser/browser.ini