Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-21 01:05:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Backed out 3 changesets (bug 1539344) for devtools failures on browser_toolbox_target.js. CLOSED TREE

Browse Source 
Backed out changeset 878f78400ed7 (bug 1539344)
Backed out changeset 8b3d1e3ae296 (bug 1539344)
Backed out changeset 29b64aed3474 (bug 1539344)
This commit is contained in:
Cosmin Sabou 2019-04-09 14:03:07 +03:00
parent 8178d24334
commit a0d1e27a85
13 changed files with 151 additions and 477 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devtools/client/aboutdebugging-new/src/actions/debug-targets.js
View File

@ -57,14 +57,14 @@ function inspectDebugTarget(type, id) {
// updated so this is not an issue. On remote runtimes however, trying to inspect a
// worker a second time after closing the corresponding about:devtools-toolbox tab
// will fail. See Bug 1534201.
window.open(`about:devtools-toolbox?type=${type}&id=${id}`);
window.open(`about:devtools-toolbox?type=${type.toLowerCase()}&id=${id}`);
} else {
window.open(`about:devtools-toolbox?type=${type}&id=${id}` +
window.open(`about:devtools-toolbox?type=${type.toLowerCase()}&id=${id}` +
`&remoteId=${remoteId}`);
}
dispatch(Actions.recordTelemetryEvent("inspect", {
"target_type": type.toUpperCase(),
"target_type": type,
"runtime_type": runtime.type,
}));
};

11
devtools/client/aboutdebugging-new/src/constants.js
View File

@ -4,8 +4,8 @@
"use strict";
const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
require("devtools/client/shared/remote-debugging/constants");
const { CONNECTION_TYPES } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
const actionTypes = {
ADB_ADDON_INSTALL_START: "ADB_ADDON_INSTALL_START",
@ -67,7 +67,12 @@ const actionTypes = {
WATCH_RUNTIME_SUCCESS: "WATCH_RUNTIME_SUCCESS",
};
const DEBUG_TARGETS = DEBUG_TARGET_TYPES;
const DEBUG_TARGETS = {
EXTENSION: "EXTENSION",
PROCESS: "PROCESS",
TAB: "TAB",
WORKER: "WORKER",
};
const DEBUG_TARGET_PANE = {
INSTALLED_EXTENSION: "installedExtension",

5
devtools/client/aboutdebugging-new/src/types/debug-target.js
View File

@ -5,7 +5,6 @@
"use strict";
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { DEBUG_TARGETS } = require("../constants");
const extensionTargetDetails = {
// actor ID for this extention.
@ -60,8 +59,8 @@ const debugTarget = {
id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
// display name for the debug target.
name: PropTypes.string.isRequired,
// one of "extension", "tab", "worker", "process".
type: PropTypes.oneOf(Object.values(DEBUG_TARGETS)).isRequired,
// one of "EXTENSION", "TAB", "WORKER".
type: PropTypes.string.isRequired,
};
exports.debugTarget = PropTypes.shape(debugTarget);

72
devtools/client/framework/components/DebugTargetInfo.js
View File

@ -6,8 +6,8 @@
const { PureComponent } = require("devtools/client/shared/vendor/react");
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 { CONNECTION_TYPES } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
/**
* This is header that should be displayed on top of the toolbox when using
@ -16,15 +16,12 @@ const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
class DebugTargetInfo extends PureComponent {
static get propTypes() {
return {
debugTargetData: PropTypes.shape({
connectionType: PropTypes.oneOf(Object.values(CONNECTION_TYPES)).isRequired,
deviceDescription: PropTypes.shape({
brandName: PropTypes.string.isRequired,
channel: PropTypes.string.isRequired,
deviceName: PropTypes.string,
version: PropTypes.string.isRequired,
}).isRequired,
targetType: PropTypes.oneOf(Object.values(DEBUG_TARGET_TYPES)).isRequired,
deviceDescription: PropTypes.shape({
brandName: PropTypes.string.isRequired,
channel: PropTypes.string.isRequired,
connectionType: PropTypes.string.isRequired,
deviceName: PropTypes.string,
version: PropTypes.string.isRequired,
}).isRequired,
L10N: PropTypes.object.isRequired,
toolbox: PropTypes.object.isRequired,
@ -32,9 +29,8 @@ class DebugTargetInfo extends PureComponent {
}
getRuntimeText() {
const { debugTargetData, L10N } = this.props;
const { brandName, version } = debugTargetData.deviceDescription;
const { connectionType } = debugTargetData;
const { deviceDescription, L10N } = this.props;
const { brandName, version, connectionType } = deviceDescription;
return (connectionType === CONNECTION_TYPES.THIS_FIREFOX)
? L10N.getFormatStr("toolbox.debugTargetInfo.runtimeLabel.thisFirefox", version)
@ -42,7 +38,7 @@ class DebugTargetInfo extends PureComponent {
}
getAssetsForConnectionType() {
const { connectionType } = this.props.debugTargetData;
const { connectionType } = this.props.deviceDescription;
switch (connectionType) {
case CONNECTION_TYPES.USB:
@ -58,40 +54,8 @@ class DebugTargetInfo extends PureComponent {
}
}
getAssetsForDebugTargetType() {
const { targetType } = 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:
return {
image: "chrome://devtools/skin/images/debugging-addons.svg",
l10nId: "toolbox.debugTargetInfo.targetType.extension",
};
case DEBUG_TARGET_TYPES.PROCESS:
return {
image: "chrome://devtools/skin/images/settings.svg",
l10nId: "toolbox.debugTargetInfo.targetType.process",
};
case DEBUG_TARGET_TYPES.TAB:
return {
image: favicon,
l10nId: "toolbox.debugTargetInfo.targetType.tab",
};
case DEBUG_TARGET_TYPES.WORKER:
return {
image: "chrome://devtools/skin/images/debugging-workers.svg",
l10nId: "toolbox.debugTargetInfo.targetType.worker",
};
}
}
shallRenderConnection() {
const { connectionType } = this.props.debugTargetData;
const { connectionType } = this.props.deviceDescription;
const renderableTypes = [
CONNECTION_TYPES.USB,
CONNECTION_TYPES.NETWORK,
@ -101,7 +65,7 @@ class DebugTargetInfo extends PureComponent {
}
renderConnection() {
const { connectionType } = this.props.debugTargetData;
const { connectionType } = this.props.deviceDescription;
const { image, l10nId } = this.getAssetsForConnectionType();
return dom.span(
@ -114,7 +78,7 @@ class DebugTargetInfo extends PureComponent {
}
renderRuntime() {
const { channel, deviceName } = this.props.debugTargetData.deviceDescription;
const { channel, deviceName } = this.props.deviceDescription;
const channelIcon =
(channel === "release" || channel === "beta" || channel === "aurora") ?
@ -134,14 +98,16 @@ class DebugTargetInfo extends PureComponent {
renderTarget() {
const title = this.props.toolbox.target.name;
const url = this.props.toolbox.target.url;
const { image, l10nId } = this.getAssetsForDebugTargetType();
// 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/aboutdebugging-globe-icon.svg";
return dom.span(
{
className: "iconized-label",
},
dom.img({ src: image, alt: this.props.L10N.getStr(l10nId)}),
dom.img({ src: favicon, alt: "favicon"}),
title ? dom.b({ className: "devtools-ellipsis-text js-target-title"}, title) : null,
dom.span({ className: "devtools-ellipsis-text" }, url),
);

16
devtools/client/framework/components/ToolboxToolbar.js
View File

@ -96,11 +96,10 @@ class ToolboxToolbar extends Component {
// Because in the component we cannot compare the visibility since the
// button definition instance in toolboxButtons will be unchanged.
visibleToolboxButtonCount: PropTypes.number,
// Data to show debug target info, if needed
debugTargetData: PropTypes.shape({
deviceDescription: PropTypes.object.isRequired,
targetType: PropTypes.string.isRequired,
}),
// Flag whether need to show DebugTargetInfo.
showDebugTargetInfo: PropTypes.bool,
// Device description for DebugTargetInfo component.
deviceDescription: PropTypes.object,
};
}
@ -423,7 +422,7 @@ class ToolboxToolbar extends Component {
* render functions for how each of the sections is rendered.
*/
render() {
const { L10N, debugTargetData, toolbox} = this.props;
const {deviceDescription, L10N, showDebugTargetInfo, toolbox} = this.props;
const classnames = ["devtools-tabbar"];
const startButtons = this.renderToolboxButtonsStart();
const endButtons = this.renderToolboxButtonsEnd();
@ -449,9 +448,8 @@ class ToolboxToolbar extends Component {
)
: div({ className: classnames.join(" ") });
const debugTargetInfo = debugTargetData
? DebugTargetInfo({ debugTargetData, L10N, toolbox })
: null;
const debugTargetInfo =
showDebugTargetInfo ? DebugTargetInfo({ deviceDescription, L10N, toolbox }) : null;
if (toolbox.target.canRewind) {
return div(

324
devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
View File

@ -1,266 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.tab"
src="chrome://devtools/skin/images/globe.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.process"
src="chrome://devtools/skin/images/settings.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component Target icon renders the expected snapshot for a tab target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.tab"
src="chrome://devtools/skin/images/globe.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.worker"
src="chrome://devtools/skin/images/debugging-workers.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component Target icon renders the expected snapshot for an extension target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.extension"
src="chrome://devtools/skin/images/debugging-addons.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = `
exports[`DebugTargetInfo component renders the expected snapshot for This Firefox target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
@ -284,8 +24,8 @@ exports[`DebugTargetInfo component Target title renders the expected snapshot fo
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.tab"
src="chrome://devtools/skin/images/globe.svg"
alt="favicon"
src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
@ -301,7 +41,59 @@ exports[`DebugTargetInfo component Target title renders the expected snapshot fo
</header>
`;
exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
exports[`DebugTargetInfo component renders the expected snapshot for USB Release target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
<span
className="iconized-label js-connection-info"
>
<img
alt="usb icon"
src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
/>
toolbox.debugTargetInfo.connection.usb
</span>
<span
className="iconized-label"
>
<img
className="channel-icon"
src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
/>
<b
className="devtools-ellipsis-text"
>
toolbox.debugTargetInfo.runtimeLabel-usbRuntimeBrandName-1.0.0
</b>
<span
className="devtools-ellipsis-text"
>
usbDeviceName
</span>
</span>
<span
className="iconized-label"
>
<img
alt="favicon"
src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
/>
<b
className="devtools-ellipsis-text js-target-title"
>
Test Tab Name
</b>
<span
className="devtools-ellipsis-text"
>
http://some.target/url
</span>
</span>
</header>
`;
exports[`DebugTargetInfo component renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
<header
className="debug-target-info js-debug-target-info"
>
@ -325,8 +117,8 @@ exports[`DebugTargetInfo component Target title renders the expected snapshot fo
className="iconized-label"
>
<img
alt="toolbox.debugTargetInfo.targetType.tab"
src="chrome://devtools/skin/images/globe.svg"
alt="favicon"
src="chrome://devtools/skin/images/aboutdebugging-globe-icon.svg"
/>
<span
className="devtools-ellipsis-text"

121
devtools/client/framework/test/jest/components/debug-target-info.test.js
View File

@ -10,8 +10,7 @@
const renderer = require("react-test-renderer");
const React = require("devtools/client/shared/vendor/react");
const DebugTargetInfo = React.createFactory(require("devtools/client/framework/components/DebugTargetInfo"));
const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
require("devtools/client/shared/remote-debugging/constants");
const { CONNECTION_TYPES } = require("devtools/client/shared/remote-debugging/remote-client-manager");
/**
* Stub for the L10N property expected by the DebugTargetInfo component.
@ -42,6 +41,7 @@ const TEST_TOOLBOX_NO_NAME = {
const USB_DEVICE_DESCRIPTION = {
brandName: "usbRuntimeBrandName",
connectionType: CONNECTION_TYPES.USB,
channel: "release",
deviceName: "usbDeviceName",
version: "1.0.0",
@ -49,109 +49,62 @@ const USB_DEVICE_DESCRIPTION = {
const THIS_FIREFOX_DEVICE_DESCRIPTION = {
brandName: "thisFirefoxRuntimeBrandName",
connectionType: CONNECTION_TYPES.THIS_FIREFOX,
channel: "release",
version: "1.0.0",
};
const USB_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.USB,
deviceDescription: USB_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
},
const USB_TARGET_INFO = DebugTargetInfo({
deviceDescription: USB_DEVICE_DESCRIPTION,
toolbox: TEST_TOOLBOX,
L10N: stubL10N,
};
});
const THIS_FIREFOX_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.THIS_FIREFOX,
deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
},
const THIS_FIREFOX_TARGET_INFO = DebugTargetInfo({
deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
toolbox: TEST_TOOLBOX,
L10N: stubL10N,
};
});
const THIS_FIREFOX_NO_NAME_TARGET_INFO = {
debugTargetData: {
connectionType: CONNECTION_TYPES.THIS_FIREFOX,
deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
targetType: DEBUG_TARGET_TYPES.TAB,
},
const THIS_FIREFOX_NO_NAME_TARGET_INFO = DebugTargetInfo({
deviceDescription: THIS_FIREFOX_DEVICE_DESCRIPTION,
toolbox: TEST_TOOLBOX_NO_NAME,
L10N: stubL10N,
};
});
describe("DebugTargetInfo component", () => {
describe("Connection info", () => {
it("displays connection info for USB Release target", () => {
const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
expect(findByClassName(component.root, "js-connection-info").length).toEqual(1);
});
it("renders the expected snapshot for USB Release target", () => {
const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
expect(component.toJSON()).toMatchSnapshot();
});
it("hides the connection info for This Firefox target", () => {
const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
expect(findByClassName(component.root, "js-connection-info").length).toEqual(0);
});
it("displays connection info for USB Release target", () => {
const targetInfo = renderer.create(USB_TARGET_INFO);
expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(1);
});
describe("Target title", () => {
it("displays the target title if the target of the Toolbox has a name", () => {
const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
expect(findByClassName(component.root, "js-target-title").length).toEqual(1);
});
it("renders the expected snapshot for This Firefox target", () => {
const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
expect(component.toJSON()).toMatchSnapshot();
});
it("doesn't display the target title if the target of the Toolbox has no name", () => {
const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
expect(findByClassName(component.root, "js-target-title").length).toEqual(0);
});
it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
expect(component.toJSON()).toMatchSnapshot();
});
it("renders the expected snapshot for USB Release target", () => {
const targetInfo = renderer.create(USB_TARGET_INFO);
expect(targetInfo.toJSON()).toMatchSnapshot();
});
describe("Target icon", () => {
const buildProps = (base, extraDebugTargetData) => {
const props = Object.assign({}, base);
Object.assign(props.debugTargetData, extraDebugTargetData);
return props;
};
it("hides the connection info for This Firefox target", () => {
const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
expect(findByClassName(targetInfo.root, "js-connection-info").length).toEqual(0);
});
it("renders the expected snapshot for a tab target", () => {
const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.TAB });
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
});
it("displays the target title if the target of the Toolbox has a name", () => {
const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(1);
});
it("renders the expected snapshot for a worker target", () => {
const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.WORKER });
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
});
it("renders the expected snapshot for This Firefox target", () => {
const targetInfo = renderer.create(THIS_FIREFOX_TARGET_INFO);
expect(targetInfo.toJSON()).toMatchSnapshot();
});
it("renders the expected snapshot for an extension target", () => {
const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.EXTENSION });
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
});
it("doesn't display the target title if the target of the Toolbox has no name", () => {
const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
expect(findByClassName(targetInfo.root, "js-target-title").length).toEqual(0);
});
it("renders the expected snapshot for a process target", () => {
const props = buildProps(USB_TARGET_INFO, { targetType: DEBUG_TARGET_TYPES.PROCESS });
const component = renderer.create(DebugTargetInfo(props));
expect(component.toJSON()).toMatchSnapshot();
});
it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
const targetInfo = renderer.create(THIS_FIREFOX_NO_NAME_TARGET_INFO);
expect(targetInfo.toJSON()).toMatchSnapshot();
});
});

26
devtools/client/framework/toolbox.js
View File

@ -454,8 +454,9 @@ Toolbox.prototype = {
if (this.hostType === Toolbox.HostType.PAGE) {
// Displays DebugTargetInfo which shows the basic information of debug target,
// if `about:devtools-toolbox` URL opens directly.
// DebugTargetInfo requires this._debugTargetData to be populated
this._debugTargetData = await this._getDebugTargetData();
// DebugTargetInfo requires this._deviceDescription to be populated
this._showDebugTargetInfo = true;
this._deviceDescription = await this._getDeviceDescription();
}
const domHelper = new DOMHelpers(this.win);
@ -606,22 +607,12 @@ Toolbox.prototype = {
});
},
_getDebugTargetData: async function() {
const url = new URL(this.win.location);
const searchParams = new this.win.URLSearchParams(url.search);
const targetType = searchParams.get("type");
_getDeviceDescription: async function() {
const deviceFront = await this.target.client.mainRoot.getFront("device");
const deviceDescription = await deviceFront.getDescription();
const remoteId = searchParams.get("remoteId");
const description = await deviceFront.getDescription();
const remoteId = new this.win.URLSearchParams(this.win.location.href).get("remoteId");
const connectionType = remoteClientManager.getConnectionTypeByRemoteId(remoteId);
return {
connectionType,
deviceDescription,
targetType,
};
return Object.assign({}, description, { connectionType });
},
_onTargetClosed: async function() {
@ -1215,7 +1206,8 @@ Toolbox.prototype = {
closeToolbox: this.closeToolbox,
focusButton: this._onToolbarFocus,
toolbox: this,
debugTargetData: this._debugTargetData,
showDebugTargetInfo: this._showDebugTargetInfo,
deviceDescription: this._deviceDescription,
onTabsOrderUpdated: this._onTabsOrderUpdated,
});

8
devtools/client/locales/en-US/toolbox.properties
View File

@ -250,14 +250,6 @@ toolbox.debugTargetInfo.type.tab=tab
toolbox.debugTargetInfo.connection.usb=USB
toolbox.debugTargetInfo.connection.network=Network
# LOCALIZATION NOTE (toolbox.debugTargetInfo.targetType.*): This is displayed as the
# alt attribute for an icon in the toolbox header in about:devtools-toolbox,
# to indicate what is the type of the debug target being inspected.
toolbox.debugTargetInfo.targetType.extension=Extension
toolbox.debugTargetInfo.targetType.process=Process
toolbox.debugTargetInfo.targetType.tab=Tab
toolbox.debugTargetInfo.targetType.worker=Worker
# LOCALIZATION NOTE (browserToolbox.statusMessage): This is the label
# shown next to status details when the Browser Toolbox fails to connect or
# appears to be taking a while to do so.

24
devtools/client/shared/remote-debugging/constants.js
View File

@ -1,24 +0,0 @@
/* 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 CONNECTION_TYPES = {
NETWORK: "network",
THIS_FIREFOX: "this-firefox",
UNKNOWN: "unknown",
USB: "usb",
};
const DEBUG_TARGET_TYPES = {
EXTENSION: "extension",
PROCESS: "process",
TAB: "tab",
WORKER: "worker",
};
module.exports = {
CONNECTION_TYPES,
DEBUG_TARGET_TYPES,
};

1
devtools/client/shared/remote-debugging/moz.build
View File

@ -5,7 +5,6 @@
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
DevToolsModules(
'constants.js',
'remote-client-manager.js',
'version-checker.js',
)

9
devtools/client/shared/remote-debugging/remote-client-manager.js
View File

@ -4,7 +4,13 @@
"use strict";
const { CONNECTION_TYPES } = require("devtools/client/shared/remote-debugging/constants");
/* connection types for remote clients */
const CONNECTION_TYPES = {
NETWORK: "network",
THIS_FIREFOX: "this-firefox",
UNKNOWN: "unknown",
USB: "usb",
};
/**
* This class is designed to be a singleton shared by all DevTools to get access to
@ -120,4 +126,5 @@ class RemoteClientManager {
// Expose a singleton of RemoteClientManager.
module.exports = {
remoteClientManager: new RemoteClientManager(),
CONNECTION_TYPES,
};

5
devtools/client/themes/toolbox.css
View File

@ -38,11 +38,6 @@
border-inline-end: 1px solid var(--theme-splitter-color);
}
.debug-target-info .iconized-label img {
width: 20px;
height: 20px;
}
.debug-target-info img {
-moz-context-properties: fill;
fill: var(--theme-toolbar-icon-color);