Bug 1788536 - [devtools] Use descriptorType instead of a type decipher from toolbox URL. r=jdescottes

This helps having the right type, even if we open the toolbox without any search params
in about:devtools-toolbox URL.

Differential Revision: https://phabricator.services.mozilla.com/D156134
This commit is contained in:
Alexandre Poirot 2022-09-02 09:10:01 +00:00
parent bd186cfb62
commit f962367d28
4 changed files with 31 additions and 40 deletions

View File

@ -9,8 +9,8 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const {
CONNECTION_TYPES,
DEBUG_TARGET_TYPES,
} = require("devtools/client/shared/remote-debugging/constants");
const DESCRIPTOR_TYPES = require("devtools/client/fronts/descriptors/descriptor-types");
/**
* This is header that should be displayed on top of the toolbox when using
@ -28,7 +28,7 @@ class DebugTargetInfo extends PureComponent {
name: PropTypes.string.isRequired,
version: PropTypes.string.isRequired,
}).isRequired,
targetType: PropTypes.oneOf(Object.values(DEBUG_TARGET_TYPES))
descriptorType: PropTypes.oneOf(Object.values(DESCRIPTOR_TYPES))
.isRequired,
}).isRequired,
L10N: PropTypes.object.isRequired,
@ -53,15 +53,15 @@ class DebugTargetInfo extends PureComponent {
updateTitle() {
const { L10N, debugTargetData, toolbox } = this.props;
const title = toolbox.target.name;
const targetTypeStr = L10N.getStr(
this.getAssetsForDebugTargetType().l10nId
const descriptorTypeStr = L10N.getStr(
this.getAssetsForDebugDescriptorType().l10nId
);
const { connectionType } = debugTargetData;
if (connectionType === CONNECTION_TYPES.THIS_FIREFOX) {
toolbox.doc.title = L10N.getFormatStr(
"toolbox.debugTargetInfo.tabTitleLocal",
targetTypeStr,
descriptorTypeStr,
title
);
} else {
@ -71,7 +71,7 @@ class DebugTargetInfo extends PureComponent {
toolbox.doc.title = L10N.getFormatStr(
"toolbox.debugTargetInfo.tabTitleRemote",
connectionTypeStr,
targetTypeStr,
descriptorTypeStr,
title
);
}
@ -115,31 +115,31 @@ class DebugTargetInfo extends PureComponent {
}
}
getAssetsForDebugTargetType() {
const { targetType } = this.props.debugTargetData;
getAssetsForDebugDescriptorType() {
const { descriptorType } = this.props.debugTargetData;
// TODO: https://bugzilla.mozilla.org/show_bug.cgi?id=1520723
// Show actual favicon (currently toolbox.target.activeTab.favicon
// is unpopulated)
const favicon = "chrome://devtools/skin/images/globe.svg";
switch (targetType) {
case DEBUG_TARGET_TYPES.EXTENSION:
switch (descriptorType) {
case DESCRIPTOR_TYPES.EXTENSION:
return {
image: "chrome://devtools/skin/images/debugging-addons.svg",
l10nId: "toolbox.debugTargetInfo.targetType.extension",
};
case DEBUG_TARGET_TYPES.PROCESS:
case DESCRIPTOR_TYPES.PROCESS:
return {
image: "chrome://devtools/skin/images/settings.svg",
l10nId: "toolbox.debugTargetInfo.targetType.process",
};
case DEBUG_TARGET_TYPES.TAB:
case DESCRIPTOR_TYPES.TAB:
return {
image: favicon,
l10nId: "toolbox.debugTargetInfo.targetType.tab",
};
case DEBUG_TARGET_TYPES.WORKER:
case DESCRIPTOR_TYPES.WORKER:
return {
image: "chrome://devtools/skin/images/debugging-workers.svg",
l10nId: "toolbox.debugTargetInfo.targetType.worker",
@ -222,7 +222,7 @@ class DebugTargetInfo extends PureComponent {
renderTargetTitle() {
const title = this.props.toolbox.target.name;
const { image, l10nId } = this.getAssetsForDebugTargetType();
const { image, l10nId } = this.getAssetsForDebugDescriptorType();
return dom.span(
{
@ -237,8 +237,8 @@ class DebugTargetInfo extends PureComponent {
renderTargetURI() {
const url = this.props.toolbox.target.url;
const { targetType } = this.props.debugTargetData;
const isURLEditable = targetType === DEBUG_TARGET_TYPES.TAB;
const { descriptorType } = this.props.debugTargetData;
const isURLEditable = descriptorType === DESCRIPTOR_TYPES.TAB;
return dom.span(
{
@ -287,11 +287,11 @@ class DebugTargetInfo extends PureComponent {
renderNavigation() {
const { debugTargetData } = this.props;
const { targetType } = debugTargetData;
const { descriptorType } = debugTargetData;
if (
targetType !== DEBUG_TARGET_TYPES.TAB &&
targetType !== DEBUG_TARGET_TYPES.EXTENSION
descriptorType !== DESCRIPTOR_TYPES.TAB &&
descriptorType !== DESCRIPTOR_TYPES.EXTENSION
) {
return null;
}
@ -301,7 +301,7 @@ class DebugTargetInfo extends PureComponent {
// There is little value in exposing back/forward for WebExtensions
if (
this.props.toolbox.target.getTrait("navigation") &&
targetType === DEBUG_TARGET_TYPES.TAB
descriptorType === DESCRIPTOR_TYPES.TAB
) {
items.push(
this.renderNavigationButton({

View File

@ -125,7 +125,7 @@ class ToolboxToolbar extends Component {
// Data to show debug target info, if needed
debugTargetData: PropTypes.shape({
runtimeInfo: PropTypes.object.isRequired,
targetType: PropTypes.string.isRequired,
descriptorType: PropTypes.string.isRequired,
}),
// The loaded Fluent localization bundles.
fluentBundles: PropTypes.array.isRequired,

View File

@ -14,8 +14,8 @@ const DebugTargetInfo = React.createFactory(
);
const {
CONNECTION_TYPES,
DEBUG_TARGET_TYPES,
} = require("devtools/client/shared/remote-debugging/constants");
const DESCRIPTOR_TYPES = require("devtools/client/fronts/descriptors/descriptor-types");
/**
* Stub for the L10N property expected by the DebugTargetInfo component.
@ -79,7 +79,7 @@ const USB_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.USB,
runtimeInfo: USB_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
descriptorType: DESCRIPTOR_TYPES.TAB,
},
toolbox: TEST_TOOLBOX,
L10N: stubL10N,
@ -89,7 +89,7 @@ const THIS_FIREFOX_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.THIS_FIREFOX,
runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
descriptorType: DESCRIPTOR_TYPES.TAB,
},
toolbox: TEST_TOOLBOX,
L10N: stubL10N,
@ -99,7 +99,7 @@ const THIS_FIREFOX_NO_NAME_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.THIS_FIREFOX,
runtimeInfo: THIS_FIREFOX_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
descriptorType: DESCRIPTOR_TYPES.TAB,
},
toolbox: TEST_TOOLBOX_NO_NAME,
L10N: stubL10N,
@ -172,7 +172,7 @@ describe("DebugTargetInfo component", () => {
it("renders the expected snapshot for a tab target", () => {
const props = buildProps(USB_TARGET_INFO, {
targetType: DEBUG_TARGET_TYPES.TAB,
descriptorType: DESCRIPTOR_TYPES.TAB,
});
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
@ -180,7 +180,7 @@ describe("DebugTargetInfo component", () => {
it("renders the expected snapshot for a worker target", () => {
const props = buildProps(USB_TARGET_INFO, {
targetType: DEBUG_TARGET_TYPES.WORKER,
descriptorType: DESCRIPTOR_TYPES.WORKER,
});
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
@ -188,7 +188,7 @@ describe("DebugTargetInfo component", () => {
it("renders the expected snapshot for an extension target", () => {
const props = buildProps(USB_TARGET_INFO, {
targetType: DEBUG_TARGET_TYPES.EXTENSION,
descriptorType: DESCRIPTOR_TYPES.EXTENSION,
});
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
@ -196,7 +196,7 @@ describe("DebugTargetInfo component", () => {
it("renders the expected snapshot for a process target", () => {
const props = buildProps(USB_TARGET_INFO, {
targetType: DEBUG_TARGET_TYPES.PROCESS,
descriptorType: DESCRIPTOR_TYPES.PROCESS,
});
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();

View File

@ -173,11 +173,6 @@ loader.lazyGetter(this, "domNodeConstants", () => {
return require("devtools/shared/dom-node-constants");
});
loader.lazyGetter(this, "DEBUG_TARGET_TYPES", () => {
return require("devtools/client/shared/remote-debugging/constants")
.DEBUG_TARGET_TYPES;
});
loader.lazyRequireGetter(
this,
"NodeFront",
@ -1323,11 +1318,7 @@ Toolbox.prototype = {
_getDebugTargetData() {
const url = new URL(this.win.location);
const searchParams = new this.win.URLSearchParams(url.search);
const targetType = searchParams.get("type") || DEBUG_TARGET_TYPES.TAB;
const remoteId = searchParams.get("remoteId");
const remoteId = url.searchParams.get("remoteId");
const runtimeInfo = remoteClientManager.getRuntimeInfoByRemoteId(remoteId);
const connectionType = remoteClientManager.getConnectionTypeByRemoteId(
remoteId
@ -1336,7 +1327,7 @@ Toolbox.prototype = {
return {
connectionType,
runtimeInfo,
targetType,
descriptorType: this.descriptorFront.descriptorType,
};
},