Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
const {
createFactory,
PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
const Localized = createFactory(FluentReact.Localized);
const {
USB_STATES,
} = require("resource://devtools/client/aboutdebugging/src/constants.js");
const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
loader.lazyRequireGetter(
this,
"ADB_ADDON_STATES",
"resource://devtools/client/shared/remote-debugging/adb/adb-addon.js",
true
);
const Link = createFactory(
require("resource://devtools/client/shared/vendor/react-router-dom.js").Link
);
const ConnectSection = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/connect/ConnectSection.js")
);
const ConnectSteps = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/connect/ConnectSteps.js")
);
const NetworkLocationsForm = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js")
);
const NetworkLocationsList = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/connect/NetworkLocationsList.js")
);
const {
PAGE_TYPES,
RUNTIMES,
} = require("resource://devtools/client/aboutdebugging/src/constants.js");
const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
const USB_ICON_SRC =
"chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
const GLOBE_ICON_SRC =
"chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
const TROUBLESHOOT_USB_URL =
const TROUBLESHOOT_NETWORK_URL =
class ConnectPage extends PureComponent {
static get propTypes() {
return {
adbAddonStatus: Types.adbAddonStatus,
dispatch: PropTypes.func.isRequired,
networkLocations: PropTypes.arrayOf(Types.location).isRequired,
};
}
componentDidMount() {
this.props.dispatch(Actions.selectPage(PAGE_TYPES.CONNECT));
}
onToggleUSBClick() {
const { adbAddonStatus } = this.props;
const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
if (isAddonInstalled) {
this.props.dispatch(Actions.uninstallAdbAddon());
} else {
this.props.dispatch(Actions.installAdbAddon());
}
}
getUsbStatus() {
switch (this.props.adbAddonStatus) {
case ADB_ADDON_STATES.INSTALLED:
return USB_STATES.ENABLED_USB;
case ADB_ADDON_STATES.UNINSTALLED:
return USB_STATES.DISABLED_USB;
default:
return USB_STATES.UPDATING_USB;
}
}
renderUsbStatus() {
const statusTextId = {
[USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-status-enabled",
[USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-status-disabled",
[USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-status-updating",
}[this.getUsbStatus()];
return Localized(
{
id: statusTextId,
},
dom.span(
{
className: "connect-page__usb-section__heading__status",
},
statusTextId
)
);
}
renderUsbToggleButton() {
const usbStatus = this.getUsbStatus();
const localizedStates = {
[USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-disable-button",
[USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-enable-button",
[USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-updating-button",
};
const localizedState = localizedStates[usbStatus];
// Disable the button while the USB status is updating.
const disabled = usbStatus === USB_STATES.UPDATING_USB;
return Localized(
{
id: localizedState,
},
dom.button(
{
className:
"default-button connect-page__usb-section__heading__toggle " +
"qa-connect-usb-toggle-button",
disabled,
onClick: () => this.onToggleUSBClick(),
},
localizedState
)
);
}
renderUsb() {
const { adbAddonStatus } = this.props;
const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
return ConnectSection(
{
icon: USB_ICON_SRC,
title: dom.div(
{
className: "connect-page__usb-section__heading",
},
Localized(
{ id: "about-debugging-setup-usb-title" },
dom.span(
{
className: "connect-page__usb-section__heading__title",
},
"USB"
)
),
this.renderUsbStatus(),
this.renderUsbToggleButton()
),
},
isAddonInstalled
? ConnectSteps({
steps: [
{
localizationId:
"about-debugging-setup-usb-step-enable-dev-menu2",
},
{
localizationId: "about-debugging-setup-usb-step-enable-debug2",
},
{
localizationId:
"about-debugging-setup-usb-step-enable-file-transfer",
},
{
localizationId:
"about-debugging-setup-usb-step-enable-debug-firefox2",
},
{
localizationId: "about-debugging-setup-usb-step-plug-device",
},
],
})
: Localized(
{
id: "about-debugging-setup-usb-disabled",
},
dom.aside(
{
className: "qa-connect-usb-disabled-message",
},
"Enabling this will download and add the required Android USB debugging " +
"components to Firefox."
)
),
this.renderTroubleshootText(RUNTIMES.USB)
);
}
renderNetwork() {
const { dispatch, networkLocations } = this.props;
return Localized(
{
id: "about-debugging-setup-network",
attrs: { title: true },
},
ConnectSection({
icon: GLOBE_ICON_SRC,
title: "Network Location",
extraContent: dom.div(
{},
NetworkLocationsList({ dispatch, networkLocations }),
NetworkLocationsForm({ dispatch, networkLocations }),
this.renderTroubleshootText(RUNTIMES.NETWORK)
),
})
);
}
renderTroubleshootText(connectionType) {
const localizationId =
connectionType === RUNTIMES.USB
? "about-debugging-setup-usb-troubleshoot"
: "about-debugging-setup-network-troubleshoot";
const className =
"connect-page__troubleshoot connect-page__troubleshoot--" +
`${connectionType === RUNTIMES.USB ? "usb" : "network"}`;
const url =
connectionType === RUNTIMES.USB
? TROUBLESHOOT_USB_URL
: TROUBLESHOOT_NETWORK_URL;
return dom.aside(
{
className,
},
Localized(
{
id: localizationId,
a: dom.a({
href: url,
target: "_blank",
}),
},
dom.p({}, localizationId)
)
);
}
render() {
return dom.article(
{
className: "page connect-page qa-connect-page",
},
Localized(
{
id: "about-debugging-setup-title",
},
dom.h1(
{
className: "alt-heading alt-heading--larger",
},
"Setup"
)
),
Localized(
{
id: "about-debugging-setup-intro",
},
dom.p(
{},
"Configure the connection method you wish to remotely debug your device with."
)
),
Localized(
{
id: "about-debugging-setup-this-firefox2",
a: Link({
to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
}),
},
dom.p({}, "about-debugging-setup-this-firefox")
),
dom.section(
{
className: "connect-page__breather",
},
Localized(
{
id: "about-debugging-setup-connect-heading",
},
dom.h2(
{
className: "alt-heading",
},
"Connect a device"
)
),
this.renderUsb(),
this.renderNetwork()
)
);
}
}
module.exports = FluentReact.withLocalization(ConnectPage);