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 {
connect,
const {
createFactory,
PureComponent,
const Localized = createFactory(FluentReact.Localized);
const CompatibilityWarning = createFactory(
);
const DebugTargetPane = createFactory(
);
const ExtensionDetail = createFactory(
);
const InspectAction = createFactory(
);
const ProfilerDialog = createFactory(
);
const RuntimeActions = createFactory(
);
const RuntimeInfo = createFactory(
);
const ServiceWorkerAction = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.js")
);
const ServiceWorkerAdditionalActions = createFactory(
);
const ServiceWorkersWarning = createFactory(
);
const ProcessDetail = createFactory(
);
const TabAction = createFactory(
);
const TabDetail = createFactory(
);
const TemporaryExtensionAdditionalActions = createFactory(
);
const TemporaryExtensionDetail = createFactory(
require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionDetail.js")
);
const TemporaryExtensionInstallSection = createFactory(
);
const WorkerDetail = createFactory(
);
const {
DEBUG_TARGETS,
DEBUG_TARGET_PANE,
PAGE_TYPES,
const {
getCurrentRuntimeDetails,
const {
isSupportedDebugTargetPane,
supportsTemporaryExtensionInstaller,
class RuntimePage extends PureComponent {
static get propTypes() {
return {
collapsibilities: Types.collapsibilities.isRequired,
dispatch: PropTypes.func.isRequired,
installedExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
otherWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
runtimeDetails: Types.runtimeDetails,
runtimeId: PropTypes.string.isRequired,
processes: PropTypes.arrayOf(PropTypes.object).isRequired,
serviceWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
sharedWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
showProfilerDialog: PropTypes.bool.isRequired,
tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
temporaryExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
temporaryInstallError: PropTypes.object,
};
}
// TODO: avoid the use of this method
UNSAFE_componentWillMount() {
const { dispatch, runtimeId } = this.props;
dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, runtimeId));
}
getIconByType(type) {
switch (type) {
case DEBUG_TARGETS.EXTENSION:
case DEBUG_TARGETS.PROCESS:
case DEBUG_TARGETS.TAB:
case DEBUG_TARGETS.WORKER:
}
throw new Error(`Unsupported type [${type}]`);
}
renderDebugTargetPane({
actionComponent,
additionalActionsComponent,
children,
detailComponent,
icon,
localizationId,
name,
paneKey,
targets,
}) {
const { collapsibilities, dispatch, runtimeDetails } = this.props;
if (!isSupportedDebugTargetPane(runtimeDetails.info.type, paneKey)) {
return null;
}
return Localized(
{
id: localizationId,
attrs: { name: true },
},
DebugTargetPane(
{
actionComponent,
additionalActionsComponent,
collapsibilityKey: paneKey,
detailComponent,
dispatch,
icon,
isCollapsed: collapsibilities.get(paneKey),
name,
targets,
},
children
)
);
}
renderTemporaryExtensionInstallSection() {
const runtimeType = this.props.runtimeDetails.info.type;
if (
!isSupportedDebugTargetPane(
runtimeType,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION
) ||
!supportsTemporaryExtensionInstaller(runtimeType)
) {
return null;
}
const { dispatch, temporaryInstallError } = this.props;
return TemporaryExtensionInstallSection({
dispatch,
temporaryInstallError,
});
}
render() {
const {
dispatch,
installedExtensions,
otherWorkers,
processes,
runtimeDetails,
runtimeId,
serviceWorkers,
sharedWorkers,
showProfilerDialog,
tabs,
temporaryExtensions,
} = this.props;
if (!runtimeDetails) {
// runtimeInfo can be null when the selectPage action navigates from a runtime A
// to a runtime B (between unwatchRuntime and watchRuntime).
return null;
}
const { compatibilityReport } = runtimeDetails;
return dom.article(
{
className: "page qa-runtime-page",
},
RuntimeInfo({ ...runtimeDetails.info, runtimeId, dispatch }),
RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
CompatibilityWarning({ compatibilityReport }),
this.renderDebugTargetPane({
actionComponent: TabAction,
detailComponent: TabDetail,
icon: this.getIconByType(DEBUG_TARGETS.TAB),
localizationId: "about-debugging-runtime-tabs",
name: "Tabs",
paneKey: DEBUG_TARGET_PANE.TAB,
targets: tabs,
}),
this.renderDebugTargetPane({
actionComponent: InspectAction,
additionalActionsComponent: TemporaryExtensionAdditionalActions,
children: this.renderTemporaryExtensionInstallSection(),
detailComponent: TemporaryExtensionDetail,
icon: this.getIconByType(DEBUG_TARGETS.EXTENSION),
localizationId: "about-debugging-runtime-temporary-extensions",
name: "Temporary Extensions",
paneKey: DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
targets: temporaryExtensions,
}),
this.renderDebugTargetPane({
actionComponent: InspectAction,
detailComponent: ExtensionDetail,
icon: this.getIconByType(DEBUG_TARGETS.EXTENSION),
localizationId: "about-debugging-runtime-extensions",
name: "Extensions",
paneKey: DEBUG_TARGET_PANE.INSTALLED_EXTENSION,
targets: installedExtensions,
}),
this.renderDebugTargetPane({
actionComponent: ServiceWorkerAction,
additionalActionsComponent: ServiceWorkerAdditionalActions,
detailComponent: WorkerDetail,
icon: this.getIconByType(DEBUG_TARGETS.WORKER),
localizationId: "about-debugging-runtime-service-workers",
name: "Service Workers",
paneKey: DEBUG_TARGET_PANE.SERVICE_WORKER,
targets: serviceWorkers,
}),
this.renderDebugTargetPane({
actionComponent: InspectAction,
detailComponent: WorkerDetail,
icon: this.getIconByType(DEBUG_TARGETS.WORKER),
localizationId: "about-debugging-runtime-shared-workers",
name: "Shared Workers",
paneKey: DEBUG_TARGET_PANE.SHARED_WORKER,
targets: sharedWorkers,
}),
this.renderDebugTargetPane({
actionComponent: InspectAction,
detailComponent: WorkerDetail,
icon: this.getIconByType(DEBUG_TARGETS.WORKER),
localizationId: "about-debugging-runtime-other-workers",
name: "Other Workers",
paneKey: DEBUG_TARGET_PANE.OTHER_WORKER,
targets: otherWorkers,
}),
this.renderDebugTargetPane({
actionComponent: InspectAction,
detailComponent: ProcessDetail,
icon: this.getIconByType(DEBUG_TARGETS.PROCESS),
localizationId: "about-debugging-runtime-processes",
name: "Processes",
paneKey: DEBUG_TARGET_PANE.PROCESSES,
targets: processes,
}),
showProfilerDialog ? ProfilerDialog({ dispatch, runtimeDetails }) : null
);
}
}
const mapStateToProps = state => {
return {
collapsibilities: state.ui.debugTargetCollapsibilities,
installedExtensions: state.debugTargets.installedExtensions,
processes: state.debugTargets.processes,
otherWorkers: state.debugTargets.otherWorkers,
runtimeDetails: getCurrentRuntimeDetails(state.runtimes),
serviceWorkers: state.debugTargets.serviceWorkers,
sharedWorkers: state.debugTargets.sharedWorkers,
showProfilerDialog: state.ui.showProfilerDialog,
tabs: state.debugTargets.tabs,
temporaryExtensions: state.debugTargets.temporaryExtensions,
temporaryInstallError: state.ui.temporaryInstallError,
};
};
module.exports = connect(mapStateToProps)(RuntimePage);