devtools/client/aboutdebugging/aboutdebugging.js

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 "use strict";
   6
   7 const {
   8   bindActionCreators,
   9 } = require("resource://devtools/client/shared/vendor/redux.js");
  10 const {
  11   createFactory,
  12 } = require("resource://devtools/client/shared/vendor/react.js");
  13 const {
  14   render,
  15   unmountComponentAtNode,
  16 } = require("resource://devtools/client/shared/vendor/react-dom.js");
  17 const Provider = createFactory(
  18   require("resource://devtools/client/shared/vendor/react-redux.js").Provider
  19 );
  20
  21 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
  22 const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
  23
  24 const actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
  25 const {
  26   configureStore,
  27 } = require("resource://devtools/client/aboutdebugging/src/create-store.js");
  28 const {
  29   setDebugTargetCollapsibilities,
  30 } = require("resource://devtools/client/aboutdebugging/src/modules/debug-target-collapsibilities.js");
  31
  32 const {
  33   l10n,
  34 } = require("resource://devtools/client/aboutdebugging/src/modules/l10n.js");
  35
  36 const {
  37   addNetworkLocationsObserver,
  38   getNetworkLocations,
  39   removeNetworkLocationsObserver,
  40 } = require("resource://devtools/client/aboutdebugging/src/modules/network-locations.js");
  41 const {
  42   addUSBRuntimesObserver,
  43   getUSBRuntimes,
  44   removeUSBRuntimesObserver,
  45 } = require("resource://devtools/client/aboutdebugging/src/modules/usb-runtimes.js");
  46
  47 loader.lazyRequireGetter(
  48   this,
  49   "adb",
  50   "resource://devtools/client/shared/remote-debugging/adb/adb.js",
  51   true
  52 );
  53 loader.lazyRequireGetter(
  54   this,
  55   "adbAddon",
  56   "resource://devtools/client/shared/remote-debugging/adb/adb-addon.js",
  57   true
  58 );
  59 loader.lazyRequireGetter(
  60   this,
  61   "adbProcess",
  62   "resource://devtools/client/shared/remote-debugging/adb/adb-process.js",
  63   true
  64 );
  65
  66 const Router = createFactory(
  67   require("resource://devtools/client/shared/vendor/react-router-dom.js")
  68     .HashRouter
  69 );
  70 const App = createFactory(
  71   require("resource://devtools/client/aboutdebugging/src/components/App.js")
  72 );
  73
  74 const AboutDebugging = {
  75   async init() {
  76     const direction = Services.locale.isAppLocaleRTL ? "rtl" : "ltr";
  77     document.documentElement.setAttribute("dir", direction);
  78
  79     this.onAdbAddonUpdated = this.onAdbAddonUpdated.bind(this);
  80     this.onAdbProcessReady = this.onAdbProcessReady.bind(this);
  81     this.onNetworkLocationsUpdated = this.onNetworkLocationsUpdated.bind(this);
  82     this.onUSBRuntimesUpdated = this.onUSBRuntimesUpdated.bind(this);
  83
  84     this.store = configureStore();
  85     this.actions = bindActionCreators(actions, this.store.dispatch);
  86
  87     const width = this.getRoundedViewportWidth();
  88     this.actions.recordTelemetryEvent("open_adbg", { width });
  89
  90     await l10n.init([
  91       "branding/brand.ftl",
  92       "devtools/client/aboutdebugging.ftl",
  93     ]);
  94
  95     this.actions.createThisFirefoxRuntime();
  96
  97     // Listen to Network locations updates and retrieve the initial list of locations.
  98     addNetworkLocationsObserver(this.onNetworkLocationsUpdated);
  99     await this.onNetworkLocationsUpdated();
 100
 101     // Listen to USB runtime updates and retrieve the initial list of runtimes.
 102
 103     // If ADB is already started, wait for the initial runtime list to be able to restore
 104     // already connected runtimes.
 105     const isProcessStarted = await adb.isProcessStarted();
 106     const onAdbRuntimesReady = isProcessStarted
 107       ? adb.once("runtime-list-ready")
 108       : null;
 109     addUSBRuntimesObserver(this.onUSBRuntimesUpdated);
 110     await onAdbRuntimesReady;
 111
 112     await this.onUSBRuntimesUpdated();
 113
 114     render(
 115       Provider(
 116         {
 117           store: this.store,
 118         },
 119         LocalizationProvider(
 120           { bundles: l10n.getBundles() },
 121           Router({}, App({}))
 122         )
 123       ),
 124       this.mount
 125     );
 126
 127     adbAddon.on("update", this.onAdbAddonUpdated);
 128     this.onAdbAddonUpdated();
 129     adbProcess.on("adb-ready", this.onAdbProcessReady);
 130     // get the initial status of adb process, in case it's already started
 131     this.onAdbProcessReady();
 132   },
 133
 134   onAdbAddonUpdated() {
 135     this.actions.updateAdbAddonStatus(adbAddon.status);
 136   },
 137
 138   onAdbProcessReady() {
 139     this.actions.updateAdbReady(adbProcess.ready);
 140   },
 141
 142   onNetworkLocationsUpdated() {
 143     return this.actions.updateNetworkLocations(getNetworkLocations());
 144   },
 145
 146   async onUSBRuntimesUpdated() {
 147     const runtimes = await getUSBRuntimes();
 148     return this.actions.updateUSBRuntimes(runtimes);
 149   },
 150
 151   async destroy() {
 152     const width = this.getRoundedViewportWidth();
 153     this.actions.recordTelemetryEvent("close_adbg", { width });
 154
 155     const state = this.store.getState();
 156     const currentRuntimeId = state.runtimes.selectedRuntimeId;
 157     if (currentRuntimeId) {
 158       await this.actions.unwatchRuntime(currentRuntimeId);
 159     }
 160
 161     // Remove all client listeners.
 162     this.actions.removeRuntimeListeners();
 163
 164     removeNetworkLocationsObserver(this.onNetworkLocationsUpdated);
 165     removeUSBRuntimesObserver(this.onUSBRuntimesUpdated);
 166     adbAddon.off("update", this.onAdbAddonUpdated);
 167     adbProcess.off("adb-ready", this.onAdbProcessReady);
 168     setDebugTargetCollapsibilities(state.ui.debugTargetCollapsibilities);
 169     unmountComponentAtNode(this.mount);
 170   },
 171
 172   get mount() {
 173     return document.getElementById("mount");
 174   },
 175
 176   /**
 177    * Computed viewport width, rounded at 50px. Used for telemetry events.
 178    */
 179   getRoundedViewportWidth() {
 180     return Math.ceil(window.outerWidth / 50) * 50;
 181   },
 182 };
 183
 184 window.addEventListener(
 185   "DOMContentLoaded",
 186   () => {
 187     AboutDebugging.init();
 188   },
 189   { once: true }
 190 );
 191
 192 window.addEventListener(
 193   "unload",
 194   () => {
 195     AboutDebugging.destroy();
 196   },
 197   { once: true }
 198 );
 199
 200 // Expose AboutDebugging to tests so that they can access to the store.
 201 window.AboutDebugging = AboutDebugging;