nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1561435 - Format devtools/client/, a=automatic-formatting

Browse source 
# ignore-this-changeset

Differential Revision: https://phabricator.services.mozilla.com/D35884

--HG--
extra : source : 60e4496cf9699dc59f2f4738cb60f87cbdb01e67
This commit is contained in:
Victor Porof 2019-07-05 11:24:38 +02:00
parent 7676fc16e4
commit f6db0ee557
2792 changed files with 96115 additions and 52865 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

8
.eslintrc.js
View file

@ -43,14 +43,6 @@ module.exports = {
"mozilla"
],
"overrides": [{
"files": [
"devtools/**",
],
"rules": {
// Temporarily disable the curly everywhere, pending Prettier.
"curly": "off"
}
}, {
"files": [
"*.html",
"*.xhtml",

25
.prettierignore
View file

@ -40,31 +40,6 @@ toolkit/components/telemetry/datareporting-prefs.js
toolkit/components/telemetry/healthreport-prefs.js
# Ignore all devtools directories for now, except the debugger.
devtools/client/*.js
devtools/client/aboutdebugging/**
devtools/client/aboutdebugging-new/**
devtools/client/accessibility/**
devtools/client/application/**
devtools/client/bin/**
devtools/client/dom/**
devtools/client/framework/**
devtools/client/inspector/**
devtools/client/jsonview/**
devtools/client/locales/**
devtools/client/memory/**
devtools/client/netmonitor/**
devtools/client/performance/**
devtools/client/performance-new/**
devtools/client/preferences/**
devtools/client/responsive.html/**
devtools/client/scratchpad/**
devtools/client/shared/**
devtools/client/storage/**
devtools/client/styleeditor/**
devtools/client/themes/**
devtools/client/webconsole/**
devtools/client/webide/**
devtools/client/webreplay/**
devtools/docs/**
devtools/platform/**
devtools/server/**

65
devtools/client/aboutdebugging-new/aboutdebugging.js
View file

@ -8,10 +8,13 @@ const Services = require("Services");
const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
const { createFactory } = require("devtools/client/shared/vendor/react");
const { render, unmountComponentAtNode } =
require("devtools/client/shared/vendor/react-dom");
const Provider =
createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
const {
render,
unmountComponentAtNode,
} = require("devtools/client/shared/vendor/react-dom");
const Provider = createFactory(
require("devtools/client/shared/vendor/react-redux").Provider
);
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
@ -36,10 +39,22 @@ const {
} = require("./src/modules/usb-runtimes");
loader.lazyRequireGetter(this, "adb", "devtools/shared/adb/adb", true);
loader.lazyRequireGetter(this, "adbAddon", "devtools/shared/adb/adb-addon", true);
loader.lazyRequireGetter(this, "adbProcess", "devtools/shared/adb/adb-process", true);
loader.lazyRequireGetter(
this,
"adbAddon",
"devtools/shared/adb/adb-addon",
true
);
loader.lazyRequireGetter(
this,
"adbProcess",
"devtools/shared/adb/adb-process",
true
);
const Router = createFactory(require("devtools/client/shared/vendor/react-router-dom").HashRouter);
const Router = createFactory(
require("devtools/client/shared/vendor/react-router-dom").HashRouter
);
const App = createFactory(require("./src/components/App"));
const AboutDebugging = {
@ -61,10 +76,7 @@ const AboutDebugging = {
const width = this.getRoundedViewportWidth();
this.actions.recordTelemetryEvent("open_adbg", { width });
await l10n.init([
"branding/brand.ftl",
"devtools/aboutdebugging.ftl",
]);
await l10n.init(["branding/brand.ftl", "devtools/aboutdebugging.ftl"]);
this.actions.createThisFirefoxRuntime();
@ -77,7 +89,9 @@ const AboutDebugging = {
// If ADB is already started, wait for the initial runtime list to be able to restore
// already connected runtimes.
const isProcessStarted = await adb.isProcessStarted();
const onAdbRuntimesReady = isProcessStarted ? adb.once("runtime-list-ready") : null;
const onAdbRuntimesReady = isProcessStarted
? adb.once("runtime-list-ready")
: null;
addUSBRuntimesObserver(this.onUSBRuntimesUpdated);
await onAdbRuntimesReady;
@ -90,12 +104,7 @@ const AboutDebugging = {
},
LocalizationProvider(
{ messages: l10n.getBundles() },
Router(
{},
App(
{}
)
)
Router({}, App({}))
)
),
this.mount
@ -161,13 +170,21 @@ const AboutDebugging = {
},
};
window.addEventListener("DOMContentLoaded", () => {
AboutDebugging.init();
}, { once: true });
window.addEventListener(
"DOMContentLoaded",
() => {
AboutDebugging.init();
},
{ once: true }
);
window.addEventListener("unload", () => {
AboutDebugging.destroy();
}, {once: true});
window.addEventListener(
"unload",
() => {
AboutDebugging.destroy();
},
{ once: true }
);
// Expose AboutDebugging to tests so that they can access to the store.
window.AboutDebugging = AboutDebugging;

5
devtools/client/aboutdebugging-new/initializer.js
View file

@ -4,8 +4,9 @@
"use strict";
const { BrowserLoader } =
ChromeUtils.import("resource://devtools/client/shared/browser-loader.js");
const { BrowserLoader } = ChromeUtils.import(
"resource://devtools/client/shared/browser-loader.js"
);
const { require } = BrowserLoader({
baseURI: "resource://devtools/client/aboutdebugging-new/",
window,

67
devtools/client/aboutdebugging-new/src/actions/debug-targets.js
View file

@ -5,13 +5,16 @@
"use strict";
const { AddonManager } = require("resource://gre/modules/AddonManager.jsm");
const { remoteClientManager } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
const {
remoteClientManager,
} = require("devtools/client/shared/remote-debugging/remote-client-manager");
const Services = require("Services");
const { l10n } = require("../modules/l10n");
const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
const {
isSupportedDebugTargetPane,
} = require("../modules/debug-target-support");
const {
openTemporaryExtension,
@ -54,14 +57,19 @@ function isCachedActorNeeded(runtime, type, id) {
// older browsers, the id falls back to the actor ID. Check if the target id is a worker
// actorID (which means getActor() should return an actor with id).
// Can be removed when Firefox 68 is in Release channel.
return type === DEBUG_TARGETS.WORKER &&
runtime.runtimeDetails.clientWrapper.client.getActor(id);
return (
type === DEBUG_TARGETS.WORKER &&
runtime.runtimeDetails.clientWrapper.client.getActor(id)
);
}
function getTabForUrl(url) {
for (const navigator of Services.wm.getEnumerator("navigator:browser")) {
for (const browser of navigator.gBrowser.browsers) {
if (browser.contentWindow && browser.contentWindow.location.href === url) {
if (
browser.contentWindow &&
browser.contentWindow.location.href === url
) {
return navigator.gBrowser.getTabForBrowser(browser);
}
}
@ -76,7 +84,10 @@ function inspectDebugTarget(type, id) {
id = encodeURIComponent(id);
let url;
if (runtime.id === RUNTIMES.THIS_FIREFOX && !isCachedActorNeeded(runtime, type, id)) {
if (
runtime.id === RUNTIMES.THIS_FIREFOX &&
!isCachedActorNeeded(runtime, type, id)
) {
// Even when debugging on This Firefox we need to re-use the client since the worker
// actor is cached in the client instance. Instead we should pass an id that does
// not depend on the client (such as the worker url). This will be fixed in
@ -88,7 +99,10 @@ function inspectDebugTarget(type, id) {
// will fail. See Bug 1534201.
url = `about:devtools-toolbox?type=${type}&id=${id}`;
} else {
const remoteId = remoteClientManager.getRemoteId(runtime.id, runtime.type);
const remoteId = remoteClientManager.getRemoteId(
runtime.id,
runtime.type
);
url = `about:devtools-toolbox?type=${type}&id=${id}&remoteId=${remoteId}`;
}
@ -101,15 +115,19 @@ function inspectDebugTarget(type, id) {
window.open(url);
}
dispatch(Actions.recordTelemetryEvent("inspect", {
"target_type": type.toUpperCase(),
"runtime_type": runtime.type,
}));
dispatch(
Actions.recordTelemetryEvent("inspect", {
target_type: type.toUpperCase(),
runtime_type: runtime.type,
})
);
};
}
function installTemporaryExtension() {
const message = l10n.getString("about-debugging-tmp-extension-install-message");
const message = l10n.getString(
"about-debugging-tmp-extension-install-message"
);
return async (dispatch, getState) => {
dispatch({ type: TEMPORARY_EXTENSION_INSTALL_START });
const file = await openTemporaryExtension(window, message);
@ -169,9 +187,13 @@ function requestTabs() {
const clientWrapper = getCurrentClient(getState().runtimes);
try {
const isSupported = isSupportedDebugTargetPane(runtime.runtimeDetails.info.type,
DEBUG_TARGET_PANE.TAB);
const tabs = isSupported ? (await clientWrapper.listTabs({ favicons: true })) : [];
const isSupported = isSupportedDebugTargetPane(
runtime.runtimeDetails.info.type,
DEBUG_TARGET_PANE.TAB
);
const tabs = isSupported
? await clientWrapper.listTabs({ favicons: true })
: [];
dispatch({ type: REQUEST_TABS_SUCCESS, tabs });
} catch (e) {
@ -189,8 +211,9 @@ function requestExtensions() {
try {
const isIconDataURLRequired = runtime.type !== RUNTIMES.THIS_FIREFOX;
const addons =
await clientWrapper.listAddons({ iconDataURL: isIconDataURLRequired });
const addons = await clientWrapper.listAddons({
iconDataURL: isIconDataURLRequired,
});
let extensions = addons.filter(a => a.debuggable);
// Filter out hidden & system addons unless the dedicated preference is set to true.
@ -209,8 +232,12 @@ function requestExtensions() {
});
}
const installedExtensions = extensions.filter(e => !e.temporarilyInstalled);
const temporaryExtensions = extensions.filter(e => e.temporarilyInstalled);
const installedExtensions = extensions.filter(
e => !e.temporarilyInstalled
);
const temporaryExtensions = extensions.filter(
e => e.temporarilyInstalled
);
dispatch({
type: REQUEST_EXTENSIONS_SUCCESS,

139
devtools/client/aboutdebugging-new/src/actions/runtimes.js
View file

@ -20,8 +20,9 @@ const {
isSupportedDebugTargetPane,
} = require("../modules/debug-target-support");
const { remoteClientManager } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
const {
remoteClientManager,
} = require("devtools/client/shared/remote-debugging/remote-client-manager");
const {
CONNECT_RUNTIME_CANCEL,
@ -67,8 +68,8 @@ async function getRuntimeIcon(runtime, channel) {
}
}
return (channel === "release" || channel === "beta" || channel === "aurora")
? `chrome://devtools/skin/images/aboutdebugging-firefox-${ channel }.svg`
return channel === "release" || channel === "beta" || channel === "aurora"
? `chrome://devtools/skin/images/aboutdebugging-firefox-${channel}.svg`
: "chrome://devtools/skin/images/aboutdebugging-firefox-nightly.svg";
}
@ -92,9 +93,12 @@ function connectRuntime(id) {
// don't have a default value but will be overridden during our tests.
const connectionTimingOutDelay = Services.prefs.getIntPref(
"devtools.aboutdebugging.test-connection-timing-out-delay",
CONNECTION_TIMING_OUT_DELAY);
CONNECTION_TIMING_OUT_DELAY
);
const connectionCancelDelay = Services.prefs.getIntPref(
"devtools.aboutdebugging.test-connection-cancel-delay", CONNECTION_CANCEL_DELAY);
"devtools.aboutdebugging.test-connection-cancel-delay",
CONNECTION_CANCEL_DELAY
);
const connectionNotRespondingTimer = setTimeout(() => {
// If connecting to the runtime takes time over CONNECTION_TIMING_OUT_DELAY,
@ -124,12 +128,18 @@ function connectRuntime(id) {
PERMANENT_PRIVATE_BROWSING,
SERVICE_WORKERS_ENABLED,
} = RUNTIME_PREFERENCE;
const connectionPromptEnabled =
await clientWrapper.getPreference(CONNECTION_PROMPT, false);
const privateBrowsing =
await clientWrapper.getPreference(PERMANENT_PRIVATE_BROWSING, false);
const serviceWorkersEnabled =
await clientWrapper.getPreference(SERVICE_WORKERS_ENABLED, true);
const connectionPromptEnabled = await clientWrapper.getPreference(
CONNECTION_PROMPT,
false
);
const privateBrowsing = await clientWrapper.getPreference(
PERMANENT_PRIVATE_BROWSING,
false
);
const serviceWorkersEnabled = await clientWrapper.getPreference(
SERVICE_WORKERS_ENABLED,
true
);
const serviceWorkersAvailable = serviceWorkersEnabled && !privateBrowsing;
// Fenix specific workarounds are needed until we can get proper server side APIs
@ -138,12 +148,15 @@ function connectRuntime(id) {
// For Fenix runtimes, the ADB runtime name is more accurate than the one returned
// by the Device actor.
const runtimeName = runtime.isFenix ? runtime.name : deviceDescription.name;
const runtimeName = runtime.isFenix
? runtime.name
: deviceDescription.name;
// For Fenix runtimes, the version we should display is the application version
// retrieved from ADB, and not the Gecko version returned by the Device actor.
const version = runtime.isFenix ?
runtime.extra.adbPackageVersion : deviceDescription.version;
const version = runtime.isFenix
? runtime.extra.adbPackageVersion
: deviceDescription.version;
const runtimeDetails = {
clientWrapper,
@ -203,7 +216,10 @@ function createThisFirefoxRuntime() {
name: l10n.getString("about-debugging-this-firefox-runtime-name"),
type: RUNTIMES.THIS_FIREFOX,
};
dispatch({ type: THIS_FIREFOX_RUNTIME_CREATED, runtime: thisFirefoxRuntime });
dispatch({
type: THIS_FIREFOX_RUNTIME_CREATED,
runtime: thisFirefoxRuntime,
});
};
}
@ -224,7 +240,9 @@ function disconnectRuntime(id, shouldRedirect = false) {
}
await clientWrapper.close();
if (shouldRedirect) {
await dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX));
await dispatch(
Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX)
);
}
dispatch({
@ -247,13 +265,21 @@ function updateConnectionPromptSetting(connectionPromptEnabled) {
const runtime = getCurrentRuntime(getState().runtimes);
const { clientWrapper } = runtime.runtimeDetails;
const promptPrefName = RUNTIME_PREFERENCE.CONNECTION_PROMPT;
await clientWrapper.setPreference(promptPrefName, connectionPromptEnabled);
await clientWrapper.setPreference(
promptPrefName,
connectionPromptEnabled
);
// Re-get actual value from the runtime.
connectionPromptEnabled =
await clientWrapper.getPreference(promptPrefName, connectionPromptEnabled);
connectionPromptEnabled = await clientWrapper.getPreference(
promptPrefName,
connectionPromptEnabled
);
dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
runtime, connectionPromptEnabled });
dispatch({
type: UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS,
runtime,
connectionPromptEnabled,
});
} catch (e) {
dispatch({ type: UPDATE_CONNECTION_PROMPT_SETTING_FAILURE, error: e });
}
@ -269,7 +295,11 @@ function updateMultiE10s() {
// Re-get actual value from the runtime.
const { isMultiE10s } = await clientWrapper.getDeviceDescription();
dispatch({ type: UPDATE_RUNTIME_MULTIE10S_SUCCESS, runtime, isMultiE10s });
dispatch({
type: UPDATE_RUNTIME_MULTIE10S_SUCCESS,
runtime,
isMultiE10s,
});
} catch (e) {
dispatch({ type: UPDATE_RUNTIME_MULTIE10S_FAILURE, error: e });
}
@ -294,8 +324,12 @@ function watchRuntime(id) {
dispatch(Actions.requestTabs());
dispatch(Actions.requestWorkers());
if (isSupportedDebugTargetPane(runtime.runtimeDetails.info.type,
DEBUG_TARGET_PANE.PROCESSES)) {
if (
isSupportedDebugTargetPane(
runtime.runtimeDetails.info.type,
DEBUG_TARGET_PANE.PROCESSES
)
) {
dispatch(Actions.requestProcesses());
}
} catch (e) {
@ -325,7 +359,7 @@ function unwatchRuntime(id) {
function updateNetworkRuntimes(locations) {
const runtimes = locations.map(location => {
const [ host, port ] = location.split(":");
const [host, port] = location.split(":");
return {
id: location,
extra: {
@ -381,8 +415,8 @@ function updateUSBRuntimes(adbRuntimes) {
*/
function _isRuntimeValid(runtime, runtimes) {
const isRuntimeAvailable = runtimes.some(r => r.id === runtime.id);
const isConnectionValid = runtime.runtimeDetails &&
!runtime.runtimeDetails.clientWrapper.isClosed();
const isConnectionValid =
runtime.runtimeDetails && !runtime.runtimeDetails.clientWrapper.isClosed();
return isRuntimeAvailable && isConnectionValid;
}
@ -392,8 +426,11 @@ function updateRemoteRuntimes(runtimes, type) {
// Check if the updated remote runtimes should trigger a navigation out of the current
// runtime page.
if (currentRuntime && currentRuntime.type === type &&
!_isRuntimeValid(currentRuntime, runtimes)) {
if (
currentRuntime &&
currentRuntime.type === type &&
!_isRuntimeValid(currentRuntime, runtimes)
) {
// Since current remote runtime is invalid, move to this firefox page.
// This case is considered as followings and so on:
// * Remove ADB addon
@ -403,7 +440,9 @@ function updateRemoteRuntimes(runtimes, type) {
// Current runtime can not be retrieved after REMOTE_RUNTIMES_UPDATED action, since
// that updates runtime state. So, before that we fire selectPage action to execute
// `unwatchRuntime` correctly.
await dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX));
await dispatch(
Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX)
);
}
// For existing runtimes, transfer all properties that are not available in the
@ -416,16 +455,25 @@ function updateRemoteRuntimes(runtimes, type) {
// - isConnectionTimeout (set by about:debugging if connection was timeout)
runtimes.forEach(runtime => {
const existingRuntime = findRuntimeById(runtime.id, getState().runtimes);
const isConnectionValid = existingRuntime && existingRuntime.runtimeDetails &&
!existingRuntime.runtimeDetails.clientWrapper.isClosed();
runtime.runtimeDetails = isConnectionValid ? existingRuntime.runtimeDetails : null;
runtime.isConnecting = existingRuntime ? existingRuntime.isConnecting : false;
runtime.isConnectionFailed =
existingRuntime ? existingRuntime.isConnectionFailed : false;
runtime.isConnectionNotResponding =
existingRuntime ? existingRuntime.isConnectionNotResponding : false;
runtime.isConnectionTimeout =
existingRuntime ? existingRuntime.isConnectionTimeout : false;
const isConnectionValid =
existingRuntime &&
existingRuntime.runtimeDetails &&
!existingRuntime.runtimeDetails.clientWrapper.isClosed();
runtime.runtimeDetails = isConnectionValid
? existingRuntime.runtimeDetails
: null;
runtime.isConnecting = existingRuntime
? existingRuntime.isConnecting
: false;
runtime.isConnectionFailed = existingRuntime
? existingRuntime.isConnectionFailed
: false;
runtime.isConnectionNotResponding = existingRuntime
? existingRuntime.isConnectionNotResponding
: false;
runtime.isConnectionTimeout = existingRuntime
? existingRuntime.isConnectionTimeout
: false;
});
const existingRuntimes = getAllRuntimes(getState().runtimes);
@ -449,7 +497,10 @@ function updateRemoteRuntimes(runtimes, type) {
// Reconnect clients already available in the RemoteClientManager.
const isConnected = !!runtime.runtimeDetails;
const hasConnectedClient = remoteClientManager.hasClient(runtime.id, runtime.type);
const hasConnectedClient = remoteClientManager.hasClient(
runtime.id,
runtime.type
);
if (!isConnected && hasConnectedClient) {
await dispatch(connectRuntime(runtime.id));
}
@ -465,7 +516,9 @@ function updateRemoteRuntimes(runtimes, type) {
function removeRuntimeListeners() {
return (dispatch, getState) => {
const allRuntimes = getAllRuntimes(getState().runtimes);
const remoteRuntimes = allRuntimes.filter(r => r.type !== RUNTIMES.THIS_FIREFOX);
const remoteRuntimes = allRuntimes.filter(
r => r.type !== RUNTIMES.THIS_FIREFOX
);
for (const runtime of remoteRuntimes) {
if (runtime.runtimeDetails) {
const { clientWrapper } = runtime.runtimeDetails;

4
devtools/client/aboutdebugging-new/src/actions/telemetry.js
View file

@ -4,9 +4,7 @@
"use strict";
const {
TELEMETRY_RECORD,
} = require("../constants");
const { TELEMETRY_RECORD } = require("../constants");
/**
* If a given event cannot be mapped to an existing action, use this action that will only

53
devtools/client/aboutdebugging-new/src/components/App.js
View file

@ -5,16 +5,25 @@
"use strict";
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const Route = createFactory(require("devtools/client/shared/vendor/react-router-dom").Route);
const Switch = createFactory(require("devtools/client/shared/vendor/react-router-dom").Switch);
const Redirect = createFactory(require("devtools/client/shared/vendor/react-router-dom").Redirect);
const Route = createFactory(
require("devtools/client/shared/vendor/react-router-dom").Route
);
const Switch = createFactory(
require("devtools/client/shared/vendor/react-router-dom").Switch
);
const Redirect = createFactory(
require("devtools/client/shared/vendor/react-router-dom").Redirect
);
const Types = require("../types/index");
const { PAGE_TYPES, RUNTIMES } = require("../constants");
@ -50,19 +59,18 @@ class App extends PureComponent {
updateTitle() {
const { getString, selectedPage, selectedRuntimeId } = this.props;
const pageTitle = selectedPage === PAGE_TYPES.RUNTIME ?
getString("about-debugging-page-title-runtime-page", { selectedRuntimeId }) :
getString("about-debugging-page-title-setup-page");
const pageTitle =
selectedPage === PAGE_TYPES.RUNTIME
? getString("about-debugging-page-title-runtime-page", {
selectedRuntimeId,
})
: getString("about-debugging-page-title-setup-page");
document.title = pageTitle;
}
renderConnect() {
const {
adbAddonStatus,
dispatch,
networkLocations,
} = this.props;
const { adbAddonStatus, dispatch, networkLocations } = this.props;
return ConnectPage({
adbAddonStatus,
@ -125,10 +133,14 @@ class App extends PureComponent {
// about:debugging#workers, about:debugging#addons and about:debugging#tabs.
// Such links can still be found in external documentation pages.
// We redirect to This Firefox rather than the Setup Page here.
if (pathname === "/workers" || pathname === "/addons" || pathname === "/tabs") {
return Redirect({ to: `/runtime/${RUNTIMES.THIS_FIREFOX}`});
if (
pathname === "/workers" ||
pathname === "/addons" ||
pathname === "/tabs"
) {
return Redirect({ to: `/runtime/${RUNTIMES.THIS_FIREFOX}` });
}
return Redirect({ to: "/setup"});
return Redirect({ to: "/setup" });
},
})
);
@ -147,7 +159,7 @@ class App extends PureComponent {
} = this.props;
return Localized(
{ },
{},
dom.div(
{ className: "app" },
Sidebar({
@ -184,6 +196,9 @@ const mapDispatchToProps = dispatch => ({
dispatch,
});
module.exports = FluentReact
.withLocalization(
connect(mapStateToProps, mapDispatchToProps)(App));
module.exports = FluentReact.withLocalization(
connect(
mapStateToProps,
mapDispatchToProps
)(App)
);

26
devtools/client/aboutdebugging-new/src/components/CompatibilityWarning.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
@ -13,9 +16,12 @@ const Localized = createFactory(FluentReact.Localized);
const Message = createFactory(require("./shared/Message"));
const { MESSAGE_LEVEL } = require("../constants");
const { COMPATIBILITY_STATUS } = require("devtools/client/shared/remote-debugging/version-checker");
const {
COMPATIBILITY_STATUS,
} = require("devtools/client/shared/remote-debugging/version-checker");
const TROUBLESHOOTING_URL = "https://developer.mozilla.org/docs/Tools/about:debugging#Troubleshooting";
const TROUBLESHOOTING_URL =
"https://developer.mozilla.org/docs/Tools/about:debugging#Troubleshooting";
const Types = require("../types/index");
@ -27,8 +33,14 @@ class CompatibilityWarning extends PureComponent {
}
render() {
const { localID, localVersion, minVersion, runtimeID, runtimeVersion, status } =
this.props.compatibilityReport;
const {
localID,
localVersion,
minVersion,
runtimeID,
runtimeVersion,
status,
} = this.props.compatibilityReport;
if (status === COMPATIBILITY_STATUS.COMPATIBLE) {
return null;
@ -72,8 +84,8 @@ class CompatibilityWarning extends PureComponent {
{
className: `qa-compatibility-warning ${statusClassName}`,
},
localizationId,
),
localizationId
)
)
);
}

11
devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -31,8 +34,8 @@ class ConnectionPromptSetting extends PureComponent {
const { className, connectionPromptEnabled } = this.props;
const localizedState = connectionPromptEnabled
? "about-debugging-connection-prompt-disable-button"
: "about-debugging-connection-prompt-enable-button";
? "about-debugging-connection-prompt-disable-button"
: "about-debugging-connection-prompt-enable-button";
return Localized(
{
@ -40,7 +43,7 @@ class ConnectionPromptSetting extends PureComponent {
},
dom.button(
{
className: `${ className } default-button qa-connection-prompt-toggle-button`,
className: `${className} default-button qa-connection-prompt-toggle-button`,
onClick: () => this.onToggleClick(),
},
localizedState

17
devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -54,7 +57,7 @@ class ProfilerDialog extends PureComponent {
{
className: "profiler-dialog__header__title",
},
"about-debugging-profiler-dialog-title2",
"about-debugging-profiler-dialog-title2"
)
),
dom.button(
@ -62,17 +65,15 @@ class ProfilerDialog extends PureComponent {
className: "ghost-button qa-profiler-dialog-close",
onClick: () => this.hide(),
},
dom.img(
{
src: "chrome://devtools/skin/images/close.svg",
}
)
dom.img({
src: "chrome://devtools/skin/images/close.svg",
})
)
),
dom.iframe({
className: "profiler-dialog__frame",
src: clientWrapper.getPerformancePanelUrl(),
onLoad: (e) => {
onLoad: e => {
clientWrapper.loadPerformanceProfiler(e.target.contentWindow);
},
})

47
devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
View file

@ -4,14 +4,19 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const ConnectionPromptSetting = createFactory(require("./ConnectionPromptSetting"));
const ConnectionPromptSetting = createFactory(
require("./ConnectionPromptSetting")
);
const Actions = require("../actions/index");
const { RUNTIMES } = require("../constants");
@ -35,30 +40,30 @@ class RuntimeActions extends PureComponent {
const { connectionPromptEnabled } = runtimeDetails;
// do not show the connection prompt setting in 'This Firefox'
return runtimeId !== RUNTIMES.THIS_FIREFOX
? ConnectionPromptSetting({
connectionPromptEnabled,
dispatch,
})
: null;
? ConnectionPromptSetting({
connectionPromptEnabled,
dispatch,
})
: null;
}
renderProfileButton() {
const { runtimeId } = this.props;
return runtimeId !== RUNTIMES.THIS_FIREFOX
? Localized(
{
id: "about-debugging-runtime-profile-button2",
},
dom.button(
{
className: "default-button qa-profile-runtime-button",
onClick: () => this.onProfilerButtonClick(),
},
"about-debugging-runtime-profile-button2"
),
)
: null;
? Localized(
{
id: "about-debugging-runtime-profile-button2",
},
dom.button(
{
className: "default-button qa-profile-runtime-button",
onClick: () => this.onProfilerButtonClick(),
},
"about-debugging-runtime-profile-button2"
)
)
: null;
}
render() {
@ -67,7 +72,7 @@ class RuntimeActions extends PureComponent {
className: "runtime-actions__toolbar",
},
this.renderProfileButton(),
this.renderConnectionPromptSetting(),
this.renderConnectionPromptSetting()
);
}
}

58
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -35,12 +38,10 @@ class RuntimeInfo extends PureComponent {
{
className: "main-heading runtime-info",
},
dom.img(
{
className: "main-heading__icon runtime-info__icon qa-runtime-icon",
src: icon,
}
),
dom.img({
className: "main-heading__icon runtime-info__icon qa-runtime-icon",
src: icon,
}),
Localized(
{
id: "about-debugging-runtime-name",
@ -51,31 +52,34 @@ class RuntimeInfo extends PureComponent {
{
className: "qa-runtime-name runtime-info__title",
},
`${ name } (${ version })`
`${name} (${version})`
)
),
deviceName ?
dom.label(
{
className: "main-heading-subtitle runtime-info__subtitle",
},
deviceName
) : null,
runtimeId !== RUNTIMES.THIS_FIREFOX ?
Localized(
{
id: "about-debugging-runtime-disconnect-button",
},
dom.button(
deviceName
? dom.label(
{
className: "default-button runtime-info__action qa-runtime-info__action",
onClick() {
dispatch(Actions.disconnectRuntime(runtimeId, true));
},
className: "main-heading-subtitle runtime-info__subtitle",
},
"Disconnect"
deviceName
)
) : null,
: null,
runtimeId !== RUNTIMES.THIS_FIREFOX
? Localized(
{
id: "about-debugging-runtime-disconnect-button",
},
dom.button(
{
className:
"default-button runtime-info__action qa-runtime-info__action",
onClick() {
dispatch(Actions.disconnectRuntime(runtimeId, true));
},
},
"Disconnect"
)
)
: null
);
}
}

213
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
View file

@ -5,7 +5,10 @@
"use strict";
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -19,25 +22,40 @@ const InspectAction = createFactory(require("./debugtarget/InspectAction"));
const ProfilerDialog = createFactory(require("./ProfilerDialog"));
const RuntimeActions = createFactory(require("./RuntimeActions"));
const RuntimeInfo = createFactory(require("./RuntimeInfo"));
const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
const ServiceWorkerAdditionalActions =
createFactory(require("./debugtarget/ServiceWorkerAdditionalActions"));
const ServiceWorkerAction = createFactory(
require("./debugtarget/ServiceWorkerAction")
);
const ServiceWorkerAdditionalActions = createFactory(
require("./debugtarget/ServiceWorkerAdditionalActions")
);
const ServiceWorkersWarning = createFactory(require("./ServiceWorkersWarning"));
const ProcessDetail = createFactory(require("./debugtarget/ProcessDetail"));
const TabDetail = createFactory(require("./debugtarget/TabDetail"));
const TemporaryExtensionAdditionalActions =
createFactory(require("./debugtarget/TemporaryExtensionAdditionalActions"));
const TemporaryExtensionDetail = createFactory(require("./debugtarget/TemporaryExtensionDetail"));
const TemporaryExtensionInstallSection =
createFactory(require("./debugtarget/TemporaryExtensionInstallSection"));
const TemporaryExtensionAdditionalActions = createFactory(
require("./debugtarget/TemporaryExtensionAdditionalActions")
);
const TemporaryExtensionDetail = createFactory(
require("./debugtarget/TemporaryExtensionDetail")
);
const TemporaryExtensionInstallSection = createFactory(
require("./debugtarget/TemporaryExtensionInstallSection")
);
const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
const Actions = require("../actions/index");
const { DEBUG_TARGETS, DEBUG_TARGET_PANE, PAGE_TYPES } = require("../constants");
const {
DEBUG_TARGETS,
DEBUG_TARGET_PANE,
PAGE_TYPES,
} = require("../constants");
const Types = require("../types/index");
const { getCurrentRuntimeDetails } = require("../modules/runtimes-state-helper");
const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
const {
getCurrentRuntimeDetails,
} = require("../modules/runtimes-state-helper");
const {
isSupportedDebugTargetPane,
} = require("../modules/debug-target-support");
class RuntimePage extends PureComponent {
static get propTypes() {
@ -77,12 +95,20 @@ class RuntimePage extends PureComponent {
return "chrome://devtools/skin/images/debugging-workers.svg";
}
throw new Error(`Unsupported type [${ type }]`);
throw new Error(`Unsupported type [${type}]`);
}
renderDebugTargetPane(name, icon, targets, children, actionComponent,
additionalActionsComponent, detailComponent,
paneKey, localizationId) {
renderDebugTargetPane(
name,
icon,
targets,
children,
actionComponent,
additionalActionsComponent,
detailComponent,
paneKey,
localizationId
) {
const { collapsibilities, dispatch, runtimeDetails } = this.props;
if (!isSupportedDebugTargetPane(runtimeDetails.info.type, paneKey)) {
@ -112,13 +138,20 @@ class RuntimePage extends PureComponent {
}
renderTemporaryExtensionInstallSection() {
if (!isSupportedDebugTargetPane(this.props.runtimeDetails.info.type,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)) {
if (
!isSupportedDebugTargetPane(
this.props.runtimeDetails.info.type,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION
)
) {
return null;
}
const { dispatch, temporaryInstallError } = this.props;
return TemporaryExtensionInstallSection({ dispatch, temporaryInstallError });
return TemporaryExtensionInstallSection({
dispatch,
temporaryInstallError,
});
}
render() {
@ -152,71 +185,85 @@ class RuntimePage extends PureComponent {
RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
CompatibilityWarning({ compatibilityReport }),
this.renderDebugTargetPane("Tabs",
this.getIconByType(DEBUG_TARGETS.TAB),
tabs,
null,
InspectAction,
null,
TabDetail,
DEBUG_TARGET_PANE.TAB,
"about-debugging-runtime-tabs"),
this.renderDebugTargetPane("Temporary Extensions",
this.getIconByType(DEBUG_TARGETS.EXTENSION),
temporaryExtensions,
this.renderTemporaryExtensionInstallSection(),
InspectAction,
TemporaryExtensionAdditionalActions,
TemporaryExtensionDetail,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
"about-debugging-runtime-temporary-extensions"),
this.renderDebugTargetPane("Extensions",
this.getIconByType(DEBUG_TARGETS.EXTENSION),
installedExtensions,
null,
InspectAction,
null,
ExtensionDetail,
DEBUG_TARGET_PANE.INSTALLED_EXTENSION,
"about-debugging-runtime-extensions"),
this.renderDebugTargetPane("Service Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
serviceWorkers,
null,
ServiceWorkerAction,
ServiceWorkerAdditionalActions,
WorkerDetail,
DEBUG_TARGET_PANE.SERVICE_WORKER,
"about-debugging-runtime-service-workers"),
this.renderDebugTargetPane("Shared Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
sharedWorkers,
null,
InspectAction,
null,
WorkerDetail,
DEBUG_TARGET_PANE.SHARED_WORKER,
"about-debugging-runtime-shared-workers"),
this.renderDebugTargetPane("Other Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
otherWorkers,
null,
InspectAction,
null,
WorkerDetail,
DEBUG_TARGET_PANE.OTHER_WORKER,
"about-debugging-runtime-other-workers"),
this.renderDebugTargetPane("Processes",
this.getIconByType(DEBUG_TARGETS.PROCESS),
processes,
null,
InspectAction,
null,
ProcessDetail,
DEBUG_TARGET_PANE.PROCESSES,
"about-debugging-runtime-processes"),
this.renderDebugTargetPane(
"Tabs",
this.getIconByType(DEBUG_TARGETS.TAB),
tabs,
null,
InspectAction,
null,
TabDetail,
DEBUG_TARGET_PANE.TAB,
"about-debugging-runtime-tabs"
),
this.renderDebugTargetPane(
"Temporary Extensions",
this.getIconByType(DEBUG_TARGETS.EXTENSION),
temporaryExtensions,
this.renderTemporaryExtensionInstallSection(),
InspectAction,
TemporaryExtensionAdditionalActions,
TemporaryExtensionDetail,
DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
"about-debugging-runtime-temporary-extensions"
),
this.renderDebugTargetPane(
"Extensions",
this.getIconByType(DEBUG_TARGETS.EXTENSION),
installedExtensions,
null,
InspectAction,
null,
ExtensionDetail,
DEBUG_TARGET_PANE.INSTALLED_EXTENSION,
"about-debugging-runtime-extensions"
),
this.renderDebugTargetPane(
"Service Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
serviceWorkers,
null,
ServiceWorkerAction,
ServiceWorkerAdditionalActions,
WorkerDetail,
DEBUG_TARGET_PANE.SERVICE_WORKER,
"about-debugging-runtime-service-workers"
),
this.renderDebugTargetPane(
"Shared Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
sharedWorkers,
null,
InspectAction,
null,
WorkerDetail,
DEBUG_TARGET_PANE.SHARED_WORKER,
"about-debugging-runtime-shared-workers"
),
this.renderDebugTargetPane(
"Other Workers",
this.getIconByType(DEBUG_TARGETS.WORKER),
otherWorkers,
null,
InspectAction,
null,
WorkerDetail,
DEBUG_TARGET_PANE.OTHER_WORKER,
"about-debugging-runtime-other-workers"
),
this.renderDebugTargetPane(
"Processes",
this.getIconByType(DEBUG_TARGETS.PROCESS),
processes,
null,
InspectAction,
null,
ProcessDetail,
DEBUG_TARGET_PANE.PROCESSES,
"about-debugging-runtime-processes"
),
showProfilerDialog ? ProfilerDialog({ dispatch, runtimeDetails }) : null,
showProfilerDialog ? ProfilerDialog({ dispatch, runtimeDetails }) : null
);
}
}

12
devtools/client/aboutdebugging-new/src/components/ServiceWorkersWarning.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
@ -13,7 +16,8 @@ const Localized = createFactory(FluentReact.Localized);
const Message = createFactory(require("./shared/Message"));
const { MESSAGE_LEVEL } = require("../constants");
const DOC_URL = "https://developer.mozilla.org/docs/Tools/about:debugging#Service_workers_not_compatible";
const DOC_URL =
"https://developer.mozilla.org/docs/Tools/about:debugging#Service_workers_not_compatible";
class ServiceWorkersWarning extends PureComponent {
render() {
@ -34,8 +38,8 @@ class ServiceWorkersWarning extends PureComponent {
{
className: "qa-service-workers-warning",
},
"about-debugging-runtime-service-workers-not-compatible",
),
"about-debugging-runtime-service-workers-not-compatible"
)
)
);
}

118
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
View file

@ -4,22 +4,30 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const {
USB_STATES,
} = require("../../constants");
const { USB_STATES } = require("../../constants");
const Actions = require("../../actions/index");
loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
loader.lazyRequireGetter(
this,
"ADB_ADDON_STATES",
"devtools/shared/adb/adb-addon",
true
);
const Link = createFactory(require("devtools/client/shared/vendor/react-router-dom").Link);
const Link = createFactory(
require("devtools/client/shared/vendor/react-router-dom").Link
);
const ConnectSection = createFactory(require("./ConnectSection"));
const ConnectSteps = createFactory(require("./ConnectSteps"));
const NetworkLocationsForm = createFactory(require("./NetworkLocationsForm"));
@ -28,8 +36,10 @@ const NetworkLocationsList = createFactory(require("./NetworkLocationsList"));
const { PAGE_TYPES, RUNTIMES } = require("../../constants");
const Types = require("../../types/index");
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 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 =
"https://developer.mozilla.org/docs/Tools/Remote_Debugging/Debugging_over_USB";
@ -87,8 +97,8 @@ class ConnectPage extends PureComponent {
{
className: "connect-page__usb-section__heading__status",
},
statusTextId,
),
statusTextId
)
);
}
@ -138,45 +148,45 @@ class ConnectPage extends PureComponent {
{
className: "connect-page__usb-section__heading__title",
},
"USB",
),
"USB"
)
),
this.renderUsbStatus(),
this.renderUsbToggleButton(),
this.renderUsbToggleButton()
),
},
isAddonInstalled
? ConnectSteps(
{
? ConnectSteps({
steps: [
{
localizationId: "about-debugging-setup-usb-step-enable-dev-menu2",
localizationId:
"about-debugging-setup-usb-step-enable-dev-menu2",
},
{
localizationId: "about-debugging-setup-usb-step-enable-debug2",
},
{
localizationId: "about-debugging-setup-usb-step-enable-debug-firefox2",
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",
id: "about-debugging-setup-usb-disabled",
},
"Enabling this will download and add the required Android USB debugging " +
"components to Firefox."
)
),
this.renderTroubleshootText(RUNTIMES.USB),
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)
);
}
@ -196,24 +206,26 @@ class ConnectPage extends PureComponent {
{},
NetworkLocationsList({ dispatch, networkLocations }),
NetworkLocationsForm({ dispatch, networkLocations }),
this.renderTroubleshootText(RUNTIMES.NETWORK),
this.renderTroubleshootText(RUNTIMES.NETWORK)
),
},
)
})
);
}
renderTroubleshootText(connectionType) {
const localizationId = connectionType === RUNTIMES.USB
? "about-debugging-setup-usb-troubleshoot"
: "about-debugging-setup-network-troubleshoot";
const localizationId =
connectionType === RUNTIMES.USB
? "about-debugging-setup-usb-troubleshoot"
: "about-debugging-setup-network-troubleshoot";
const className = "connect-page__troubleshoot connect-page__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;
const url =
connectionType === RUNTIMES.USB
? TROUBLESHOOT_USB_URL
: TROUBLESHOOT_NETWORK_URL;
return dom.aside(
{
@ -222,17 +234,12 @@ class ConnectPage extends PureComponent {
Localized(
{
id: localizationId,
a: dom.a(
{
href: url,
target: "_blank",
}
),
a: dom.a({
href: url,
target: "_blank",
}),
},
dom.p(
{},
localizationId,
),
dom.p({}, localizationId)
)
);
}
@ -251,7 +258,7 @@ class ConnectPage extends PureComponent {
className: "alt-heading alt-heading--larger",
},
"Setup"
),
)
),
Localized(
{
@ -269,10 +276,7 @@ class ConnectPage extends PureComponent {
to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
}),
},
dom.p(
{},
"about-debugging-setup-this-firefox",
),
dom.p({}, "about-debugging-setup-this-firefox")
),
dom.section(
{
@ -286,12 +290,12 @@ class ConnectPage extends PureComponent {
{
className: "alt-heading",
},
"Connect a device",
),
"Connect a device"
)
),
this.renderUsb(),
this.renderNetwork()
),
)
);
}
}

28
devtools/client/aboutdebugging-new/src/components/connect/ConnectSection.js
View file

@ -25,7 +25,7 @@ class ConnectSection extends PureComponent {
{
className: "connect-section__extra",
},
extraContent,
extraContent
);
}
@ -40,28 +40,26 @@ class ConnectSection extends PureComponent {
{
className: "connect-section__header",
},
dom.img(
{
className: "connect-section__header__icon",
src: this.props.icon,
},
),
dom.img({
className: "connect-section__header__icon",
src: this.props.icon,
}),
dom.h1(
{
className: "card__heading connect-section__header__title",
},
this.props.title,
),
this.props.title
)
),
this.props.children
? dom.div(
{
className: "connect-section__content",
},
this.props.children
)
{
className: "connect-section__content",
},
this.props.children
)
: null,
extraContent ? this.renderExtraContent() : null,
extraContent ? this.renderExtraContent() : null
);
}
}

7
devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.js
View file

@ -4,7 +4,10 @@
"use strict";
const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
const {
PureComponent,
createFactory,
} = 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");
@ -17,7 +20,7 @@ class ConnectSteps extends PureComponent {
steps: PropTypes.arrayOf(
PropTypes.shape({
localizationId: PropTypes.string.isRequired,
}).isRequired,
}).isRequired
),
};
}

22
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -73,8 +76,9 @@ class NetworkLocationsForm extends PureComponent {
return Message(
{
className: "connect-page__network-form__error-message " +
"qa-connect-page__network-form__error-message",
className:
"connect-page__network-form__error-message " +
"qa-connect-page__network-form__error-message",
level: MESSAGE_LEVEL.ERROR,
isCloseable: true,
},
@ -85,11 +89,11 @@ class NetworkLocationsForm extends PureComponent {
},
dom.p(
{
className: "technical-text",
className: "technical-text",
},
errorMessageId
)
),
)
);
}
@ -97,7 +101,7 @@ class NetworkLocationsForm extends PureComponent {
return dom.form(
{
className: "connect-page__network-form",
onSubmit: (e) => this.onSubmit(e),
onSubmit: e => this.onSubmit(e),
},
this.renderError(),
Localized(
@ -108,7 +112,7 @@ class NetworkLocationsForm extends PureComponent {
{
htmlFor: "about-debugging-network-locations-host-input",
},
"Host",
"Host"
)
),
dom.input({
@ -117,7 +121,7 @@ class NetworkLocationsForm extends PureComponent {
placeholder: "localhost:6080",
type: "text",
value: this.state.value,
onChange: (e) => {
onChange: e => {
const value = e.target.value;
this.setState({ value });
},
@ -132,7 +136,7 @@ class NetworkLocationsForm extends PureComponent {
},
"Add"
)
),
)
);
}
}

12
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -48,8 +51,8 @@ class NetworkLocationsList extends PureComponent {
this.props.dispatch(Actions.removeNetworkLocation(location));
},
},
"Remove",
),
"Remove"
)
)
)
)
@ -57,8 +60,7 @@ class NetworkLocationsList extends PureComponent {
}
render() {
return this.props.networkLocations.length > 0 ?
this.renderList() : null;
return this.props.networkLocations.length > 0 ? this.renderList() : null;
}
}

8
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
View file

@ -30,7 +30,7 @@ class DebugTargetItem extends PureComponent {
{
className: "debug-target-item__action",
},
actionComponent({ dispatch, target }),
actionComponent({ dispatch, target })
);
}
@ -45,7 +45,7 @@ class DebugTargetItem extends PureComponent {
{
className: "debug-target-item__additional_actions",
},
additionalActionsComponent({ dispatch, target }),
additionalActionsComponent({ dispatch, target })
);
}
@ -67,7 +67,7 @@ class DebugTargetItem extends PureComponent {
className: "debug-target-item__name ellipsis-text",
title: this.props.target.name,
},
this.props.target.name,
this.props.target.name
);
}
@ -80,7 +80,7 @@ class DebugTargetItem extends PureComponent {
this.renderName(),
this.renderAction(),
this.renderDetail(),
this.renderAdditionalActions(),
this.renderAdditionalActions()
);
}
}

34
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
View file

@ -4,8 +4,10 @@
"use strict";
const { createFactory, PureComponent } =
require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -56,20 +58,20 @@ class DebugTargetList extends PureComponent {
return targets.length === 0
? this.renderEmptyList()
: dom.ul(
{
className: "debug-target-list qa-debug-target-list",
},
targets.map((target, key) =>
DebugTargetItem({
actionComponent,
additionalActionsComponent,
detailComponent,
dispatch,
key,
target,
})
),
);
{
className: "debug-target-list qa-debug-target-list",
},
targets.map((target, key) =>
DebugTargetItem({
actionComponent,
additionalActionsComponent,
detailComponent,
dispatch,
key,
target,
})
)
);
}
}

55
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
View file

@ -4,7 +4,11 @@
"use strict";
const { createFactory, createRef, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
createRef,
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");
@ -53,8 +57,10 @@ class DebugTargetPane extends PureComponent {
animation.cancel();
}
el.animate({ maxHeight: [`${ snapshot }px`, `${ el.clientHeight }px`] },
{ duration: 150, easing: "cubic-bezier(.07, .95, 0, 1)" });
el.animate(
{ maxHeight: [`${snapshot}px`, `${el.clientHeight}px`] },
{ duration: 150, easing: "cubic-bezier(.07, .95, 0, 1)" }
);
}
getSnapshotBeforeUpdate(prevProps) {
@ -67,7 +73,9 @@ class DebugTargetPane extends PureComponent {
toggleCollapsibility() {
const { collapsibilityKey, dispatch, isCollapsed } = this.props;
dispatch(Actions.updateDebugTargetCollapsibility(collapsibilityKey, !isCollapsed));
dispatch(
Actions.updateDebugTargetCollapsibility(collapsibilityKey, !isCollapsed)
);
}
render() {
@ -92,33 +100,32 @@ class DebugTargetPane extends PureComponent {
},
dom.a(
{
className: "undecorated-link debug-target-pane__title " +
"qa-debug-target-pane-title",
className:
"undecorated-link debug-target-pane__title " +
"qa-debug-target-pane-title",
title,
onClick: e => this.toggleCollapsibility(),
},
dom.h2(
{ className: "main-subheading debug-target-pane__heading" },
dom.img(
{
className: "main-subheading__icon",
src: icon,
}
),
`${ name } (${ targets.length })`,
dom.img(
{
className: "main-subheading__icon debug-target-pane__icon" +
(isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
src: "chrome://devtools/skin/images/arrow-e.svg",
}
),
dom.img({
className: "main-subheading__icon",
src: icon,
}),
`${name} (${targets.length})`,
dom.img({
className:
"main-subheading__icon debug-target-pane__icon" +
(isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
src: "chrome://devtools/skin/images/arrow-e.svg",
})
)
),
dom.div(
{
className: "debug-target-pane__collapsable qa-debug-target-pane__collapsable" +
(isCollapsed ? " debug-target-pane__collapsable--collapsed" : ""),
className:
"debug-target-pane__collapsable qa-debug-target-pane__collapsable" +
(isCollapsed ? " debug-target-pane__collapsable--collapsed" : ""),
ref: this.collapsableRef,
},
children,
@ -129,8 +136,8 @@ class DebugTargetPane extends PureComponent {
dispatch,
isCollapsed,
targets,
}),
),
})
)
);
}
}

53
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -58,7 +61,7 @@ class ExtensionDetail extends PureComponent {
className: "technical-text",
},
warning
),
)
)
);
})
@ -76,12 +79,10 @@ class ExtensionDetail extends PureComponent {
id: "about-debugging-extension-uuid",
attrs: { label: true },
},
FieldPair(
{
label: "Internal UUID",
value: uuid,
}
)
FieldPair({
label: "Internal UUID",
value: uuid,
})
);
}
@ -93,12 +94,10 @@ class ExtensionDetail extends PureComponent {
id: "about-debugging-extension-id",
attrs: { label: true },
},
FieldPair(
{
label: "Extension ID",
value: id,
}
)
FieldPair({
label: "Extension ID",
value: id,
})
);
}
@ -113,12 +112,10 @@ class ExtensionDetail extends PureComponent {
id: "about-debugging-extension-location",
attrs: { label: true },
},
FieldPair(
{
label: "Location",
value: location,
}
)
FieldPair({
label: "Location",
value: location,
})
);
}
@ -134,7 +131,7 @@ class ExtensionDetail extends PureComponent {
href: manifestURL,
target: "_blank",
},
manifestURL,
manifestURL
);
return Localized(
@ -142,12 +139,10 @@ class ExtensionDetail extends PureComponent {
id: "about-debugging-extension-manifest-url",
attrs: { label: true },
},
FieldPair(
{
label: "Manifest URL",
value: link,
}
)
FieldPair({
label: "Manifest URL",
value: link,
})
);
}
@ -163,8 +158,8 @@ class ExtensionDetail extends PureComponent {
this.renderExtensionId(),
this.renderUUID(),
this.renderManifest(),
this.props.children,
),
this.props.children
)
);
}
}

18
devtools/client/aboutdebugging-new/src/components/debugtarget/FieldPair.js
View file

@ -26,16 +26,20 @@ class FieldPair extends PureComponent {
},
dom.dt(
{
className: "fieldpair__title " +
(this.props.className ? this.props.className : ""),
className:
"fieldpair__title " +
(this.props.className ? this.props.className : ""),
},
label
),
value ? dom.dd(
{
className: "fieldpair__description ellipsis-text",
},
value) : null,
value
? dom.dd(
{
className: "fieldpair__description ellipsis-text",
},
value
)
: null
);
}
}

5
devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");

5
devtools/client/aboutdebugging-new/src/components/debugtarget/ProcessDetail.js
View file

@ -20,7 +20,10 @@ class ProcessDetail extends PureComponent {
render() {
const { description } = this.props.target.details;
return dom.p({ className: "debug-target-item__subname ellipsis-text" }, description);
return dom.p(
{ className: "debug-target-item__subname ellipsis-text" },
description
);
}
}

25
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 { connect } = require("devtools/client/shared/vendor/react-redux");
@ -12,7 +15,9 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const { getCurrentRuntimeDetails } = require("../../modules/runtimes-state-helper");
const {
getCurrentRuntimeDetails,
} = require("../../modules/runtimes-state-helper");
const InspectAction = createFactory(require("./InspectAction"));
@ -34,8 +39,9 @@ class ServiceWorkerAction extends PureComponent {
_renderInspectAction() {
const { status } = this.props.target.details;
const shallRenderInspectAction = status === SERVICE_WORKER_STATUSES.RUNNING ||
status === SERVICE_WORKER_STATUSES.REGISTERING;
const shallRenderInspectAction =
status === SERVICE_WORKER_STATUSES.RUNNING ||
status === SERVICE_WORKER_STATUSES.REGISTERING;
if (!shallRenderInspectAction) {
return null;
@ -64,8 +70,10 @@ class ServiceWorkerAction extends PureComponent {
_renderStatus() {
const status = this.props.target.details.status.toLowerCase();
const statusClassName = status === SERVICE_WORKER_STATUSES.RUNNING.toLowerCase()
? "service-worker-action__status--running" : "";
const statusClassName =
status === SERVICE_WORKER_STATUSES.RUNNING.toLowerCase()
? "service-worker-action__status--running"
: "";
return Localized(
{
@ -73,8 +81,7 @@ class ServiceWorkerAction extends PureComponent {
},
dom.span(
{
className:
`service-worker-action__status qa-worker-status ${ statusClassName }`,
className: `service-worker-action__status qa-worker-status ${statusClassName}`,
},
status
)
@ -87,7 +94,7 @@ class ServiceWorkerAction extends PureComponent {
className: "service-worker-action",
},
this._renderStatus(),
this._renderInspectAction(),
this._renderInspectAction()
);
}
}

26
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAdditionalActions.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 { connect } = require("devtools/client/shared/vendor/react-redux");
@ -12,7 +15,9 @@ const { connect } = require("devtools/client/shared/vendor/react-redux");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const { getCurrentRuntimeDetails } = require("../../modules/runtimes-state-helper");
const {
getCurrentRuntimeDetails,
} = require("../../modules/runtimes-state-helper");
const Actions = require("../../actions/index");
const Types = require("../../types/index");
@ -60,7 +65,7 @@ class ServiceWorkerAdditionalActions extends PureComponent {
disabled,
onClick: e => onClick(),
},
labelId,
labelId
)
);
}
@ -99,17 +104,11 @@ class ServiceWorkerAdditionalActions extends PureComponent {
switch (status) {
case SERVICE_WORKER_STATUSES.RUNNING:
return [
this._renderUnregisterButton(),
this._renderPushButton(),
];
return [this._renderUnregisterButton(), this._renderPushButton()];
case SERVICE_WORKER_STATUSES.REGISTERING:
return null;
case SERVICE_WORKER_STATUSES.STOPPED:
return [
this._renderUnregisterButton(),
this._renderStartButton(),
];
return [this._renderUnregisterButton(), this._renderStartButton()];
default:
console.error("Unexpected service worker status: " + status);
return null;
@ -121,7 +120,7 @@ class ServiceWorkerAdditionalActions extends PureComponent {
{
className: "toolbar toolbar--right-align",
},
this._renderActionButtons(),
this._renderActionButtons()
);
}
}
@ -133,4 +132,5 @@ const mapStateToProps = state => {
};
module.exports = FluentReact.withLocalization(
connect(mapStateToProps)(ServiceWorkerAdditionalActions));
connect(mapStateToProps)(ServiceWorkerAdditionalActions)
);

6
devtools/client/aboutdebugging-new/src/components/debugtarget/TabDetail.js
View file

@ -19,8 +19,10 @@ class TabDetail extends PureComponent {
}
render() {
return dom.div({ className: "debug-target-item__subname ellipsis-text" },
this.props.target.details.url);
return dom.div(
{ className: "debug-target-item__subname ellipsis-text" },
this.props.target.details.url
);
}
}

23
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -61,7 +64,7 @@ class TemporaryExtensionAdditionalActions extends PureComponent {
className: "technical-text",
},
reloadError
),
)
)
);
}
@ -79,11 +82,12 @@ class TemporaryExtensionAdditionalActions extends PureComponent {
},
dom.button(
{
className: "default-button default-button--micro " +
"qa-temporary-extension-reload-button",
className:
"default-button default-button--micro " +
"qa-temporary-extension-reload-button",
onClick: e => this.reload(),
},
"Reload",
"Reload"
)
),
Localized(
@ -92,13 +96,14 @@ class TemporaryExtensionAdditionalActions extends PureComponent {
},
dom.button(
{
className: "default-button default-button--micro " +
"qa-temporary-extension-remove-button",
className:
"default-button default-button--micro " +
"qa-temporary-extension-remove-button",
onClick: e => this.remove(),
},
"Remove",
"Remove"
)
),
)
),
this.renderReloadError(),
];

9
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -43,7 +46,7 @@ class TemporaryExtensionDetail extends PureComponent {
},
dom.div({
className: "qa-temporary-id-message",
}),
})
);
}
@ -52,7 +55,7 @@ class TemporaryExtensionDetail extends PureComponent {
{
target: this.props.target,
},
FieldPair({ label: this.renderTemporaryIdMessage() }),
FieldPair({ label: this.renderTemporaryIdMessage() })
);
}
}

19
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -13,8 +16,9 @@ const Localized = createFactory(FluentReact.Localized);
const DetailsLog = createFactory(require("../shared/DetailsLog"));
const Message = createFactory(require("../shared/Message"));
const TemporaryExtensionInstaller =
createFactory(require("./TemporaryExtensionInstaller"));
const TemporaryExtensionInstaller = createFactory(
require("./TemporaryExtensionInstaller")
);
const { MESSAGE_LEVEL } = require("../../constants");
@ -61,10 +65,7 @@ class TemporaryExtensionInstallSection extends PureComponent {
{
id: "about-debugging-tmp-extension-install-error",
},
dom.p(
{ },
"about-debugging-tmp-extension-install-error"
)
dom.p({}, "about-debugging-tmp-extension-install-error")
),
DetailsLog(
{
@ -84,9 +85,9 @@ class TemporaryExtensionInstallSection extends PureComponent {
{
className: "temporary-extension-install-section__toolbar",
},
TemporaryExtensionInstaller({ dispatch }),
TemporaryExtensionInstaller({ dispatch })
),
this.renderError(),
this.renderError()
);
}
}

8
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -37,8 +40,7 @@ class TemporaryExtensionInstaller extends PureComponent {
},
dom.button(
{
className:
`${ className } default-button qa-temporary-extension-install-button`,
className: `${className} default-button qa-temporary-extension-install-button`,
onClick: e => this.install(),
},
"Load Temporary Add-on…"

71
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
View file

@ -4,16 +4,17 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 FluentReact = require("devtools/client/shared/vendor/fluent-react");
const Localized = createFactory(FluentReact.Localized);
const {
SERVICE_WORKER_FETCH_STATES,
} = require("../../constants");
const { SERVICE_WORKER_FETCH_STATES } = require("../../constants");
const FieldPair = createFactory(require("./FieldPair"));
@ -35,8 +36,8 @@ class WorkerDetail extends PureComponent {
const { fetch } = this.props.target.details;
const isListening = fetch === SERVICE_WORKER_FETCH_STATES.LISTENING;
const localizationId = isListening
? "about-debugging-worker-fetch-listening"
: "about-debugging-worker-fetch-not-listening";
? "about-debugging-worker-fetch-listening"
: "about-debugging-worker-fetch-not-listening";
return Localized(
{
@ -46,15 +47,14 @@ class WorkerDetail extends PureComponent {
value: true,
},
},
FieldPair(
{
className: isListening ?
"qa-worker-fetch-listening" : "qa-worker-fetch-not-listening",
label: "Fetch",
slug: "fetch",
value: "about-debugging-worker-fetch-value",
}
)
FieldPair({
className: isListening
? "qa-worker-fetch-listening"
: "qa-worker-fetch-not-listening",
label: "Fetch",
slug: "fetch",
value: "about-debugging-worker-fetch-value",
})
);
}
@ -66,18 +66,16 @@ class WorkerDetail extends PureComponent {
id: "about-debugging-worker-push-service",
attrs: { label: true },
},
FieldPair(
{
slug: "push-service",
label: "Push Service",
value: dom.span(
{
className: "qa-worker-push-service-value",
},
pushServiceEndpoint,
),
}
),
FieldPair({
slug: "push-service",
label: "Push Service",
value: dom.span(
{
className: "qa-worker-push-service-value",
},
pushServiceEndpoint
),
})
);
}
@ -89,13 +87,11 @@ class WorkerDetail extends PureComponent {
id: "about-debugging-worker-scope",
attrs: { label: true },
},
FieldPair(
{
slug: "scope",
label: "Scope",
value: scope,
}
),
FieldPair({
slug: "scope",
label: "Scope",
value: scope,
})
);
}
@ -106,12 +102,13 @@ class WorkerDetail extends PureComponent {
return dom.dl(
{
className: "debug-target-item__detail" +
(isEmptyList ? " debug-target-item__detail--empty" : ""),
className:
"debug-target-item__detail" +
(isEmptyList ? " debug-target-item__detail--empty" : ""),
},
pushServiceEndpoint ? this.renderPushService() : null,
fetch ? this.renderFetch() : null,
scope ? this.renderScope() : null,
scope ? this.renderScope() : null
);
}
}

15
devtools/client/aboutdebugging-new/src/components/shared/DetailsLog.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -45,13 +48,11 @@ class DetailsLog extends PureComponent {
{
className: "details--log",
},
Localized({
Localized(
{
id: this.getLocalizationString(),
},
dom.summary(
{},
this.getLocalizationString()
)
},
dom.summary({}, this.getLocalizationString())
),
children
);

12
devtools/client/aboutdebugging-new/src/components/shared/IconLabel.js
View file

@ -32,13 +32,11 @@ class IconLabel extends PureComponent {
{
className: `icon-label icon-label--${level} ${className || ""}`,
},
dom.img(
{
className: "icon-label__icon",
src: ICONS[level],
}
),
children,
dom.img({
className: "icon-label__icon",
src: ICONS[level],
}),
children
);
}
}

45
devtools/client/aboutdebugging-new/src/components/shared/Message.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -14,8 +17,10 @@ const Localized = createFactory(FluentReact.Localized);
const { MESSAGE_LEVEL } = require("../../constants");
const ICONS = {
[MESSAGE_LEVEL.ERROR]: "chrome://devtools/skin/images/aboutdebugging-error.svg",
[MESSAGE_LEVEL.INFO]: "chrome://devtools/skin/images/aboutdebugging-information.svg",
[MESSAGE_LEVEL.ERROR]:
"chrome://devtools/skin/images/aboutdebugging-error.svg",
[MESSAGE_LEVEL.INFO]:
"chrome://devtools/skin/images/aboutdebugging-information.svg",
[MESSAGE_LEVEL.WARNING]: "chrome://global/skin/icons/warning.svg",
};
const CLOSE_ICON_SRC = "chrome://devtools/skin/images/close.svg";
@ -49,7 +54,8 @@ class Message extends PureComponent {
renderButton(level) {
return dom.button(
{
className: `ghost-button message__button message__button--${level} ` +
className:
`ghost-button message__button message__button--${level} ` +
`qa-message-button-close-button`,
onClick: () => this.closeMessage(),
},
@ -60,13 +66,11 @@ class Message extends PureComponent {
alt: true,
},
},
dom.img(
{
className: "qa-message-button-close-icon",
src: CLOSE_ICON_SRC,
},
),
),
dom.img({
className: "qa-message-button-close-icon",
src: CLOSE_ICON_SRC,
})
)
);
}
@ -80,15 +84,14 @@ class Message extends PureComponent {
return dom.aside(
{
className: `message message--level-${level} qa-message` +
(className ? ` ${ className }` : ""),
className:
`message message--level-${level} qa-message` +
(className ? ` ${className}` : ""),
},
dom.img(
{
className: "message__icon",
src: ICONS[level],
}
),
dom.img({
className: "message__icon",
src: ICONS[level],
}),
dom.div(
{
className: "message__body",
@ -96,9 +99,7 @@ class Message extends PureComponent {
children
),
// if the message is closeable, render a closing button
isCloseable
? this.renderButton(level)
: null,
isCloseable ? this.renderButton(level) : null
);
}
}

5
devtools/client/aboutdebugging-new/src/components/sidebar/RefreshDevicesButton.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const dom = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");

68
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -13,17 +16,25 @@ const Localized = createFactory(FluentReact.Localized);
const { ICON_LABEL_LEVEL, PAGE_TYPES, RUNTIMES } = require("../../constants");
const Types = require("../../types/index");
loader.lazyRequireGetter(this, "ADB_ADDON_STATES", "devtools/shared/adb/adb-addon", true);
loader.lazyRequireGetter(
this,
"ADB_ADDON_STATES",
"devtools/shared/adb/adb-addon",
true
);
const IconLabel = createFactory(require("../shared/IconLabel"));
const SidebarItem = createFactory(require("./SidebarItem"));
const SidebarFixedItem = createFactory(require("./SidebarFixedItem"));
const SidebarRuntimeItem = createFactory(require("./SidebarRuntimeItem"));
const RefreshDevicesButton = createFactory(require("./RefreshDevicesButton"));
const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
const FIREFOX_ICON =
"chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
const CONNECT_ICON = "chrome://devtools/skin/images/settings.svg";
const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
const USB_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
const GLOBE_ICON =
"chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
const USB_ICON =
"chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
class Sidebar extends PureComponent {
static get propTypes() {
@ -41,13 +52,15 @@ class Sidebar extends PureComponent {
}
renderAdbStatus() {
const isUsbEnabled = this.props.isAdbReady &&
const isUsbEnabled =
this.props.isAdbReady &&
this.props.adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
const localizationId = isUsbEnabled ? "about-debugging-sidebar-usb-enabled" :
"about-debugging-sidebar-usb-disabled";
const localizationId = isUsbEnabled
? "about-debugging-sidebar-usb-enabled"
: "about-debugging-sidebar-usb-disabled";
return IconLabel(
{
level: isUsbEnabled ? ICON_LABEL_LEVEL.OK : ICON_LABEL_LEVEL.INFO,
level: isUsbEnabled ? ICON_LABEL_LEVEL.OK : ICON_LABEL_LEVEL.INFO,
},
Localized(
{
@ -100,8 +113,8 @@ class Sidebar extends PureComponent {
return runtimes.map(runtime => {
const keyId = `${runtime.type}-${runtime.id}`;
const runtimeHasDetails = !!runtime.runtimeDetails;
const isSelected = selectedPage === PAGE_TYPES.RUNTIME &&
runtime.id === selectedRuntimeId;
const isSelected =
selectedPage === PAGE_TYPES.RUNTIME && runtime.id === selectedRuntimeId;
let name = runtime.name;
if (runtime.type === RUNTIMES.USB && runtimeHasDetails) {
@ -130,7 +143,8 @@ class Sidebar extends PureComponent {
renderFooter() {
const HELP_ICON_SRC = "chrome://global/skin/icons/help.svg";
const SUPPORT_URL = "https://developer.mozilla.org/docs/Tools/about:debugging";
const SUPPORT_URL =
"https://developer.mozilla.org/docs/Tools/about:debugging";
return dom.footer(
{
@ -154,27 +168,30 @@ class Sidebar extends PureComponent {
alt: true,
},
},
dom.img(
{
className: "sidebar__footer__icon",
src: HELP_ICON_SRC,
}
),
dom.img({
className: "sidebar__footer__icon",
src: HELP_ICON_SRC,
})
),
Localized(
{
id: "about-debugging-sidebar-support",
},
dom.span({}, "about-debugging-sidebar-support"),
dom.span({}, "about-debugging-sidebar-support")
)
)
),
)
)
);
}
render() {
const { dispatch, selectedPage, selectedRuntimeId, isScanningUsb } = this.props;
const {
dispatch,
selectedPage,
selectedRuntimeId,
isScanningUsb,
} = this.props;
return dom.aside(
{
@ -197,7 +214,8 @@ class Sidebar extends PureComponent {
{ id: "about-debugging-sidebar-this-firefox", attrs: { name: true } },
SidebarFixedItem({
icon: FIREFOX_ICON,
isSelected: PAGE_TYPES.RUNTIME === selectedPage &&
isSelected:
PAGE_TYPES.RUNTIME === selectedPage &&
selectedRuntimeId === RUNTIMES.THIS_FIREFOX,
key: RUNTIMES.THIS_FIREFOX,
name: "This Firefox",
@ -209,7 +227,7 @@ class Sidebar extends PureComponent {
className: "sidebar__adb-status",
},
dom.hr({ className: "separator separator--breathe" }),
this.renderAdbStatus(),
this.renderAdbStatus()
),
this.renderDevices(),
SidebarItem(
@ -221,9 +239,9 @@ class Sidebar extends PureComponent {
dispatch,
isScanning: isScanningUsb,
})
),
)
),
this.renderFooter(),
this.renderFooter()
);
}
}

22
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarFixedItem.js
View file

@ -4,7 +4,10 @@
"use strict";
const { PureComponent, createFactory } = require("devtools/client/shared/vendor/react");
const {
PureComponent,
createFactory,
} = 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");
@ -24,12 +27,7 @@ class SidebarFixedItem extends PureComponent {
}
render() {
const {
icon,
isSelected,
name,
to,
} = this.props;
const { icon, isSelected, name, to } = this.props;
return SidebarItem(
{
@ -41,12 +39,10 @@ class SidebarFixedItem extends PureComponent {
{
className: "sidebar-fixed-item__container",
},
dom.img(
{
className: "sidebar-fixed-item__icon",
src: icon,
}
),
dom.img({
className: "sidebar-fixed-item__icon",
src: icon,
}),
dom.span(
{
className: "ellipsis-text",

49
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
View file

@ -4,10 +4,15 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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 Link = createFactory(require("devtools/client/shared/vendor/react-router-dom").Link);
const Link = createFactory(
require("devtools/client/shared/vendor/react-router-dom").Link
);
/**
* This component is used as a wrapper by items in the sidebar.
@ -36,20 +41,20 @@ class SidebarItem extends PureComponent {
return isExternalUrl
? dom.a(
{
className: "sidebar-item__link",
href: to,
target: "_blank",
},
children,
)
{
className: "sidebar-item__link",
href: to,
target: "_blank",
},
children
)
: Link(
{
className: "sidebar-item__link qa-sidebar-link",
to,
},
children,
);
{
className: "sidebar-item__link qa-sidebar-link",
to,
},
children
);
}
return children;
@ -60,13 +65,13 @@ class SidebarItem extends PureComponent {
return dom.li(
{
className: "sidebar-item qa-sidebar-item" +
(className ? ` ${className}` : "") +
(isSelected ?
" sidebar-item--selected qa-sidebar-item-selected" :
""
) +
(to ? " sidebar-item--selectable" : ""),
className:
"sidebar-item qa-sidebar-item" +
(className ? ` ${className}` : "") +
(isSelected
? " sidebar-item--selected qa-sidebar-item-selected"
: "") +
(to ? " sidebar-item--selectable" : ""),
},
this.renderContent()
);

53
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
View file

@ -4,7 +4,10 @@
"use strict";
const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
const {
createFactory,
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");
@ -43,8 +46,8 @@ class SidebarRuntimeItem extends PureComponent {
renderConnectButton() {
const { isConnecting } = this.props;
const localizationId = isConnecting
? "about-debugging-sidebar-item-connect-button-connecting"
: "about-debugging-sidebar-item-connect-button";
? "about-debugging-sidebar-item-connect-button-connecting"
: "about-debugging-sidebar-item-connect-button";
return Localized(
{
id: localizationId,
@ -84,14 +87,22 @@ class SidebarRuntimeItem extends PureComponent {
}
renderName() {
const { deviceName, getString, isUnavailable, isUnplugged, name } = this.props;
const {
deviceName,
getString,
isUnavailable,
isUnplugged,
name,
} = this.props;
let displayName, qaClassName;
if (isUnplugged) {
displayName = getString("about-debugging-sidebar-runtime-item-unplugged");
qaClassName = "qa-runtime-item-unplugged";
} else if (isUnavailable) {
displayName = getString("about-debugging-sidebar-runtime-item-waiting-for-browser");
displayName = getString(
"about-debugging-sidebar-runtime-item-waiting-for-browser"
);
qaClassName = "qa-runtime-item-waiting-for-browser";
} else {
displayName = name;
@ -116,8 +127,8 @@ class SidebarRuntimeItem extends PureComponent {
{
className: `sidebar-runtime-item__runtime__details ${qaClassName}`,
},
displayName,
),
displayName
)
);
}
@ -127,7 +138,7 @@ class SidebarRuntimeItem extends PureComponent {
className,
title: localizationId,
},
displayName,
displayName
);
}
@ -138,7 +149,7 @@ class SidebarRuntimeItem extends PureComponent {
$deviceName: deviceName,
$displayName: displayName,
},
deviceName ? renderWithDevice() : renderNoDevice(),
deviceName ? renderWithDevice() : renderNoDevice()
);
}
@ -155,9 +166,11 @@ class SidebarRuntimeItem extends PureComponent {
runtimeId,
} = this.props;
const connectionStatus = isConnected ?
getString("aboutdebugging-sidebar-runtime-connection-status-connected") :
getString("aboutdebugging-sidebar-runtime-connection-status-disconnected");
const connectionStatus = isConnected
? getString("aboutdebugging-sidebar-runtime-connection-status-connected")
: getString(
"aboutdebugging-sidebar-runtime-connection-status-disconnected"
);
return SidebarItem(
{
@ -168,14 +181,12 @@ class SidebarRuntimeItem extends PureComponent {
{
className: "sidebar-runtime-item__container",
},
dom.img(
{
className: "sidebar-runtime-item__icon ",
src: icon,
alt: connectionStatus,
title: connectionStatus,
}
),
dom.img({
className: "sidebar-runtime-item__icon ",
src: icon,
alt: connectionStatus,
title: connectionStatus,
}),
this.renderName(),
!isUnavailable && !isConnected ? this.renderConnectButton() : null
),
@ -196,7 +207,7 @@ class SidebarRuntimeItem extends PureComponent {
MESSAGE_LEVEL.WARNING,
"about-debugging-sidebar-item-connect-button-connection-not-responding",
"qa-connection-not-responding"
),
)
);
}
}

45
devtools/client/aboutdebugging-new/src/constants.js
View file

@ -4,8 +4,10 @@
"use strict";
const { CONNECTION_TYPES, DEBUG_TARGET_TYPES } =
require("devtools/client/shared/remote-debugging/constants");
const {
CONNECTION_TYPES,
DEBUG_TARGET_TYPES,
} = require("devtools/client/shared/remote-debugging/constants");
const actionTypes = {
ADB_ADDON_INSTALL_START: "ADB_ADDON_INSTALL_START",
@ -58,9 +60,12 @@ const actionTypes = {
UNWATCH_RUNTIME_FAILURE: "UNWATCH_RUNTIME_FAILURE",
UNWATCH_RUNTIME_START: "UNWATCH_RUNTIME_START",
UNWATCH_RUNTIME_SUCCESS: "UNWATCH_RUNTIME_SUCCESS",
UPDATE_CONNECTION_PROMPT_SETTING_FAILURE: "UPDATE_CONNECTION_PROMPT_SETTING_FAILURE",
UPDATE_CONNECTION_PROMPT_SETTING_START: "UPDATE_CONNECTION_PROMPT_SETTING_START",
UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS: "UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS",
UPDATE_CONNECTION_PROMPT_SETTING_FAILURE:
"UPDATE_CONNECTION_PROMPT_SETTING_FAILURE",
UPDATE_CONNECTION_PROMPT_SETTING_START:
"UPDATE_CONNECTION_PROMPT_SETTING_START",
UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS:
"UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS",
UPDATE_RUNTIME_MULTIE10S_FAILURE: "UPDATE_RUNTIME_MULTIE10S_FAILURE",
UPDATE_RUNTIME_MULTIE10S_START: "UPDATE_RUNTIME_MULTIE10S_START",
UPDATE_RUNTIME_MULTIE10S_SUCCESS: "UPDATE_RUNTIME_MULTIE10S_SUCCESS",
@ -142,16 +147,20 @@ const USB_STATES = {
};
// flatten constants
module.exports = Object.assign({}, {
DEBUG_TARGETS,
DEBUG_TARGET_PANE,
ICON_LABEL_LEVEL,
MESSAGE_LEVEL,
PAGE_TYPES,
PREFERENCES,
RUNTIME_PREFERENCE,
RUNTIMES,
SERVICE_WORKER_FETCH_STATES,
SERVICE_WORKER_STATUSES,
USB_STATES,
}, actionTypes);
module.exports = Object.assign(
{},
{
DEBUG_TARGETS,
DEBUG_TARGET_PANE,
ICON_LABEL_LEVEL,
MESSAGE_LEVEL,
PAGE_TYPES,
PREFERENCES,
RUNTIME_PREFERENCE,
RUNTIMES,
SERVICE_WORKER_FETCH_STATES,
SERVICE_WORKER_STATUSES,
USB_STATES,
},
actionTypes
);

39
devtools/client/aboutdebugging-new/src/create-store.js
View file

@ -6,9 +6,14 @@
const Services = require("Services");
const { applyMiddleware, createStore } = require("devtools/client/shared/vendor/redux");
const {
applyMiddleware,
createStore,
} = require("devtools/client/shared/vendor/redux");
const { thunk } = require("devtools/client/shared/redux/middleware/thunk.js");
const { waitUntilService } = require("devtools/client/shared/redux/middleware/wait-service.js");
const {
waitUntilService,
} = require("devtools/client/shared/redux/middleware/wait-service.js");
const rootReducer = require("./reducers/index");
const { DebugTargetsState } = require("./reducers/debug-targets-state");
@ -21,7 +26,9 @@ const extensionComponentDataMiddleware = require("./middleware/extension-compone
const processComponentDataMiddleware = require("./middleware/process-component-data");
const tabComponentDataMiddleware = require("./middleware/tab-component-data");
const workerComponentDataMiddleware = require("./middleware/worker-component-data");
const { getDebugTargetCollapsibilities } = require("./modules/debug-target-collapsibilities");
const {
getDebugTargetCollapsibilities,
} = require("./modules/debug-target-collapsibilities");
const { getNetworkLocations } = require("./modules/network-locations");
const { PREFERENCES } = require("./constants");
@ -33,15 +40,17 @@ function configureStore() {
ui: getUiState(),
};
const middleware = applyMiddleware(thunk,
debugTargetListenerMiddleware,
errorLoggingMiddleware,
eventRecordingMiddleware,
extensionComponentDataMiddleware,
processComponentDataMiddleware,
tabComponentDataMiddleware,
workerComponentDataMiddleware,
waitUntilService);
const middleware = applyMiddleware(
thunk,
debugTargetListenerMiddleware,
errorLoggingMiddleware,
eventRecordingMiddleware,
extensionComponentDataMiddleware,
processComponentDataMiddleware,
tabComponentDataMiddleware,
workerComponentDataMiddleware,
waitUntilService
);
return createStore(rootReducer, initialState, middleware);
}
@ -49,8 +58,10 @@ function configureStore() {
function getUiState() {
const collapsibilities = getDebugTargetCollapsibilities();
const locations = getNetworkLocations();
const showHiddenAddons = Services.prefs.getBoolPref(PREFERENCES.SHOW_HIDDEN_ADDONS,
false);
const showHiddenAddons = Services.prefs.getBoolPref(
PREFERENCES.SHOW_HIDDEN_ADDONS,
false
);
return new UiState(locations, collapsibilities, showHiddenAddons);
}

4
devtools/client/aboutdebugging-new/src/middleware/error-logging.js
View file

@ -18,7 +18,9 @@ function errorLoggingMiddleware() {
// All failure actions should dispatch an error object instead of a message.
// We allow some flexibility to still provide some error logging.
console.error(`[ACTION FAILED] ${action.type}: ${error}`);
console.error(`[ACTION FAILED] ${action.type} should dispatch the error object!`);
console.error(
`[ACTION FAILED] ${action.type} should dispatch the error object!`
);
}
if (error.stack) {

105
devtools/client/aboutdebugging-new/src/middleware/event-recording.js
View file

@ -7,7 +7,9 @@
const Telemetry = require("devtools/client/shared/telemetry");
loader.lazyGetter(this, "telemetry", () => new Telemetry());
// This is a unique id that should be submitted with all about:debugging events.
loader.lazyGetter(this, "sessionId", () => parseInt(telemetry.msSinceProcessStart(), 10));
loader.lazyGetter(this, "sessionId", () =>
parseInt(telemetry.msSinceProcessStart(), 10)
);
const {
CONNECT_RUNTIME_CANCEL,
@ -32,7 +34,7 @@ const {
function recordEvent(method, details) {
// Add the session id to the event details.
const eventDetails = Object.assign({}, details, { "session_id": sessionId });
const eventDetails = Object.assign({}, details, { session_id: sessionId });
telemetry.recordEvent(method, "aboutdebugging", null, eventDetails);
}
@ -56,14 +58,14 @@ function getRuntimeEventExtras(runtime) {
const { extra, runtimeDetails } = runtime;
// deviceName can be undefined for non-usb devices, but we should not log "undefined".
const deviceName = extra && extra.deviceName || "";
const deviceName = (extra && extra.deviceName) || "";
const runtimeShortName = runtime.type === RUNTIMES.USB ? runtime.name : "";
const runtimeName = runtimeDetails && runtimeDetails.info.name || "";
const runtimeName = (runtimeDetails && runtimeDetails.info.name) || "";
return {
"connection_type": runtime.type,
"device_name": deviceName,
"runtime_id": getTelemetryRuntimeId(runtime.id),
"runtime_name": runtimeName || runtimeShortName,
connection_type: runtime.type,
device_name: deviceName,
runtime_id: getTelemetryRuntimeId(runtime.id),
runtime_name: runtimeName || runtimeShortName,
};
}
@ -74,13 +76,16 @@ function onConnectRuntimeSuccess(action, store) {
}
// When we just connected to a runtime, the runtimeDetails are not in the store yet,
// so we merge it here to retrieve the expected telemetry data.
const storeRuntime = findRuntimeById(action.runtime.id, store.getState().runtimes);
const storeRuntime = findRuntimeById(
action.runtime.id,
store.getState().runtimes
);
const runtime = Object.assign({}, storeRuntime, {
runtimeDetails: action.runtime.runtimeDetails,
});
const extras = Object.assign({}, getRuntimeEventExtras(runtime), {
"runtime_os": action.runtime.runtimeDetails.info.os,
"runtime_version": action.runtime.runtimeDetails.info.version,
runtime_os: action.runtime.runtimeDetails.info.os,
runtime_version: action.runtime.runtimeDetails.info.version,
});
recordEvent("runtime_connected", extras);
}
@ -114,13 +119,18 @@ function onRemoteRuntimesUpdated(action, store) {
// Using device names as unique IDs is inaccurate. See Bug 1544582.
const oldDeviceNames = new Set(oldRuntimes.map(r => r.extra.deviceName));
for (const oldDeviceName of oldDeviceNames) {
const newRuntime = newRuntimes.find(r => r.extra.deviceName === oldDeviceName);
const oldRuntime = oldRuntimes.find(r => r.extra.deviceName === oldDeviceName);
const isUnplugged = newRuntime && newRuntime.isUnplugged && !oldRuntime.isUnplugged;
const newRuntime = newRuntimes.find(
r => r.extra.deviceName === oldDeviceName
);
const oldRuntime = oldRuntimes.find(
r => r.extra.deviceName === oldDeviceName
);
const isUnplugged =
newRuntime && newRuntime.isUnplugged && !oldRuntime.isUnplugged;
if (oldDeviceName && (!newRuntime || isUnplugged)) {
recordEvent("device_removed", {
"connection_type": action.runtimeType,
"device_name": oldDeviceName,
connection_type: action.runtimeType,
device_name: oldDeviceName,
});
}
}
@ -137,14 +147,19 @@ function onRemoteRuntimesUpdated(action, store) {
// Using device names as unique IDs is inaccurate. See Bug 1544582.
const newDeviceNames = new Set(newRuntimes.map(r => r.extra.deviceName));
for (const newDeviceName of newDeviceNames) {
const newRuntime = newRuntimes.find(r => r.extra.deviceName === newDeviceName);
const oldRuntime = oldRuntimes.find(r => r.extra.deviceName === newDeviceName);
const isPlugged = oldRuntime && oldRuntime.isUnplugged && !newRuntime.isUnplugged;
const newRuntime = newRuntimes.find(
r => r.extra.deviceName === newDeviceName
);
const oldRuntime = oldRuntimes.find(
r => r.extra.deviceName === newDeviceName
);
const isPlugged =
oldRuntime && oldRuntime.isUnplugged && !newRuntime.isUnplugged;
if (newDeviceName && (!oldRuntime || isPlugged)) {
recordEvent("device_added", {
"connection_type": action.runtimeType,
"device_name": newDeviceName,
connection_type: action.runtimeType,
device_name: newDeviceName,
});
}
}
@ -158,10 +173,10 @@ function recordConnectionAttempt(connectionId, runtimeId, status, store) {
}
recordEvent("connection_attempt", {
"connection_id": connectionId,
"connection_type": runtime.type,
"runtime_id": getTelemetryRuntimeId(runtimeId),
"status": status,
connection_id: connectionId,
connection_type: runtime.type,
runtime_id: getTelemetryRuntimeId(runtimeId),
status: status,
});
}
@ -172,19 +187,39 @@ function eventRecordingMiddleware(store) {
return next => action => {
switch (action.type) {
case CONNECT_RUNTIME_CANCEL:
recordConnectionAttempt(action.connectionId, action.id, "cancelled", store);
recordConnectionAttempt(
action.connectionId,
action.id,
"cancelled",
store
);
break;
case CONNECT_RUNTIME_FAILURE:
recordConnectionAttempt(action.connectionId, action.id, "failed", store);
recordConnectionAttempt(
action.connectionId,
action.id,
"failed",
store
);
break;
case CONNECT_RUNTIME_NOT_RESPONDING:
recordConnectionAttempt(action.connectionId, action.id, "not responding", store);
recordConnectionAttempt(
action.connectionId,
action.id,
"not responding",
store
);
break;
case CONNECT_RUNTIME_START:
recordConnectionAttempt(action.connectionId, action.id, "start", store);
break;
case CONNECT_RUNTIME_SUCCESS:
recordConnectionAttempt(action.connectionId, action.runtime.id, "success", store);
recordConnectionAttempt(
action.connectionId,
action.runtime.id,
"success",
store
);
onConnectRuntimeSuccess(action, store);
break;
case DISCONNECT_RUNTIME_SUCCESS:
@ -194,11 +229,11 @@ function eventRecordingMiddleware(store) {
onRemoteRuntimesUpdated(action, store);
break;
case SELECT_PAGE_SUCCESS:
recordEvent("select_page", { "page_type": action.page });
recordEvent("select_page", { page_type: action.page });
break;
case SHOW_PROFILER_DIALOG:
recordEvent("show_profiler", {
"runtime_id": getCurrentRuntimeIdForTelemetry(store),
runtime_id: getCurrentRuntimeIdForTelemetry(store),
});
break;
case TELEMETRY_RECORD:
@ -206,13 +241,15 @@ function eventRecordingMiddleware(store) {
if (method) {
recordEvent(method, details);
} else {
console.error(`[RECORD EVENT FAILED] ${action.type}: no "method" property`);
console.error(
`[RECORD EVENT FAILED] ${action.type}: no "method" property`
);
}
break;
case UPDATE_CONNECTION_PROMPT_SETTING_SUCCESS:
recordEvent("update_conn_prompt", {
"prompt_enabled": `${action.connectionPromptEnabled}`,
"runtime_id": getCurrentRuntimeIdForTelemetry(store),
prompt_enabled: `${action.connectionPromptEnabled}`,
runtime_id: getCurrentRuntimeIdForTelemetry(store),
});
break;
}

27
devtools/client/aboutdebugging-new/src/middleware/extension-component-data.js
View file

@ -4,10 +4,7 @@
"use strict";
const {
DEBUG_TARGETS,
REQUEST_EXTENSIONS_SUCCESS,
} = require("../constants");
const { DEBUG_TARGETS, REQUEST_EXTENSIONS_SUCCESS } = require("../constants");
const {
getExtensionUuid,
@ -32,9 +29,11 @@ const extensionComponentDataMiddleware = store => next => action => {
function getFilePath(extension) {
// Only show file system paths, and only for temporarily installed add-ons.
if (!extension.temporarilyInstalled ||
!extension.url ||
!extension.url.startsWith("file://")) {
if (
!extension.temporarilyInstalled ||
!extension.url ||
!extension.url.startsWith("file://")
) {
return null;
}
@ -44,9 +43,19 @@ function getFilePath(extension) {
function toComponentData(extensions) {
return extensions.map(extension => {
const type = DEBUG_TARGETS.EXTENSION;
const { actor, iconDataURL, iconURL, id, manifestURL, name, warnings } = extension;
const {
actor,
iconDataURL,
iconURL,
id,
manifestURL,
name,
warnings,
} = extension;
const icon =
iconDataURL || iconURL || "chrome://mozapps/skin/extensions/extensionGeneric.svg";
iconDataURL ||
iconURL ||
"chrome://mozapps/skin/extensions/extensionGeneric.svg";
const location = getFilePath(extension);
const uuid = getExtensionUuid(extension);
return {

13
devtools/client/aboutdebugging-new/src/middleware/process-component-data.js
View file

@ -6,10 +6,7 @@
const { l10n } = require("../modules/l10n");
const {
DEBUG_TARGETS,
REQUEST_PROCESSES_SUCCESS,
} = require("../constants");
const { DEBUG_TARGETS, REQUEST_PROCESSES_SUCCESS } = require("../constants");
/**
* This middleware converts tabs object that get from DebuggerClient.listProcesses() to
@ -18,7 +15,9 @@ const {
const processComponentDataMiddleware = store => next => action => {
switch (action.type) {
case REQUEST_PROCESSES_SUCCESS: {
const mainProcessComponentData = toMainProcessComponentData(action.mainProcess);
const mainProcessComponentData = toMainProcessComponentData(
action.mainProcess
);
action.processes = [mainProcessComponentData];
break;
}
@ -32,7 +31,9 @@ function toMainProcessComponentData(process) {
const id = process.processFront.actorID;
const icon = "chrome://devtools/skin/images/aboutdebugging-process-icon.svg";
const name = l10n.getString("about-debugging-main-process-name");
const description = l10n.getString("about-debugging-main-process-description2");
const description = l10n.getString(
"about-debugging-main-process-description2"
);
return {
name,

9
devtools/client/aboutdebugging-new/src/middleware/tab-component-data.js
View file

@ -4,10 +4,7 @@
"use strict";
const {
DEBUG_TARGETS,
REQUEST_TABS_SUCCESS,
} = require("../constants");
const { DEBUG_TARGETS, REQUEST_TABS_SUCCESS } = require("../constants");
/**
* This middleware converts tabs object that get from DebuggerClient.listTabs() to data
@ -29,7 +26,9 @@ function toComponentData(tabs) {
const type = DEBUG_TARGETS.TAB;
const id = tab.outerWindowID;
const icon = tab.favicon
? `data:image/png;base64,${ btoa(String.fromCharCode.apply(String, tab.favicon)) }`
? `data:image/png;base64,${btoa(
String.fromCharCode.apply(String, tab.favicon)
)}`
: "chrome://devtools/skin/images/globe.svg";
const name = tab.title || tab.url;
const url = tab.url;

13
devtools/client/aboutdebugging-new/src/middleware/worker-component-data.js
View file

@ -49,20 +49,15 @@ function toComponentData(workers, isServiceWorker) {
const type = DEBUG_TARGETS.WORKER;
const icon = "chrome://devtools/skin/images/debugging-workers.svg";
let { fetch } = worker;
const {
id,
name,
registrationFront,
scope,
subscription,
} = worker;
const { id, name, registrationFront, scope, subscription } = worker;
let pushServiceEndpoint = null;
let status = null;
if (isServiceWorker) {
fetch = fetch ? SERVICE_WORKER_FETCH_STATES.LISTENING
: SERVICE_WORKER_FETCH_STATES.NOT_LISTENING;
fetch = fetch
? SERVICE_WORKER_FETCH_STATES.LISTENING
: SERVICE_WORKER_FETCH_STATES.NOT_LISTENING;
status = getServiceWorkerStatus(worker);
pushServiceEndpoint = subscription ? subscription.endpoint : null;
}

25
devtools/client/aboutdebugging-new/src/modules/client-wrapper.js
View file

@ -4,12 +4,12 @@
"use strict";
const { checkVersionCompatibility } =
require("devtools/client/shared/remote-debugging/version-checker");
const {
checkVersionCompatibility,
} = require("devtools/client/shared/remote-debugging/version-checker");
const { RUNTIME_PREFERENCE } = require("../constants");
const { WorkersListener } =
require("devtools/client/shared/workers-listener");
const { WorkersListener } = require("devtools/client/shared/workers-listener");
const PREF_TYPES = {
BOOL: "BOOL",
@ -25,10 +25,7 @@ const PREF_TO_TYPE = {
};
// Some events are fired by mainRoot rather than client.
const MAIN_ROOT_EVENTS = [
"addonListChanged",
"tabListChanged",
];
const MAIN_ROOT_EVENTS = ["addonListChanged", "tabListChanged"];
/**
* The ClientWrapper class is used to isolate aboutdebugging from the DevTools client API
@ -107,8 +104,10 @@ class ClientWrapper {
async getPreference(prefName, defaultValue) {
if (typeof defaultValue === "undefined") {
throw new Error("Default value is mandatory for getPreference, the actor will " +
"throw if the preference is not set on the target runtime");
throw new Error(
"Default value is mandatory for getPreference, the actor will " +
"throw if the preference is not set on the target runtime"
);
}
const prefType = PREF_TO_TYPE[prefName];
@ -150,7 +149,11 @@ class ClientWrapper {
}
async listWorkers() {
const { other, service, shared } = await this.client.mainRoot.listAllWorkers();
const {
other,
service,
shared,
} = await this.client.mainRoot.listAllWorkers();
return {
otherWorkers: other,

23
devtools/client/aboutdebugging-new/src/modules/debug-target-support.js
View file

@ -10,12 +10,18 @@ const Services = require("Services");
// Process target debugging is disabled by default.
function isProcessDebuggingSupported() {
return Services.prefs.getBoolPref(PREFERENCES.PROCESS_DEBUGGING_ENABLED, false);
return Services.prefs.getBoolPref(
PREFERENCES.PROCESS_DEBUGGING_ENABLED,
false
);
}
// Process target debugging is disabled by default.
function isLocalTabDebuggingSupported() {
return Services.prefs.getBoolPref(PREFERENCES.LOCAL_TAB_DEBUGGING_ENABLED, false);
return Services.prefs.getBoolPref(
PREFERENCES.LOCAL_TAB_DEBUGGING_ENABLED,
false
);
}
// Installing extensions can be disabled in enterprise policy.
@ -33,12 +39,15 @@ const ALL_DEBUG_TARGET_PANES = [
DEBUG_TARGET_PANE.SERVICE_WORKER,
DEBUG_TARGET_PANE.SHARED_WORKER,
DEBUG_TARGET_PANE.TAB,
...(isTemporaryExtensionSupported() ? [DEBUG_TARGET_PANE.TEMPORARY_EXTENSION] : []),
...(isTemporaryExtensionSupported()
? [DEBUG_TARGET_PANE.TEMPORARY_EXTENSION]
: []),
];
// All debug target panes except temporary extensions
const REMOTE_DEBUG_TARGET_PANES = ALL_DEBUG_TARGET_PANES.filter(p =>
p !== DEBUG_TARGET_PANE.TEMPORARY_EXTENSION);
const REMOTE_DEBUG_TARGET_PANES = ALL_DEBUG_TARGET_PANES.filter(
p => p !== DEBUG_TARGET_PANE.TEMPORARY_EXTENSION
);
const THIS_FIREFOX_DEBUG_TARGET_PANES = ALL_DEBUG_TARGET_PANES
// Main process debugging is not available for This Firefox.
@ -59,6 +68,8 @@ const SUPPORTED_TARGET_PANE_BY_RUNTIME = {
* a DEBUG_TARGET but INSTALLED_EXTENSION and TEMPORARY_EXTENSION are DEBUG_TARGET_PANES.
*/
function isSupportedDebugTargetPane(runtimeType, debugTargetPaneKey) {
return SUPPORTED_TARGET_PANE_BY_RUNTIME[runtimeType].includes(debugTargetPaneKey);
return SUPPORTED_TARGET_PANE_BY_RUNTIME[runtimeType].includes(
debugTargetPaneKey
);
}
exports.isSupportedDebugTargetPane = isSupportedDebugTargetPane;

35
devtools/client/aboutdebugging-new/src/modules/extensions-helper.js
View file

@ -6,11 +6,20 @@
const { Cc, Ci } = require("chrome");
const Services = require("Services");
loader.lazyImporter(this, "AddonManager", "resource://gre/modules/AddonManager.jsm");
loader.lazyRequireGetter(this, "FileUtils", "resource://gre/modules/FileUtils.jsm", true);
loader.lazyImporter(
this,
"AddonManager",
"resource://gre/modules/AddonManager.jsm"
);
loader.lazyRequireGetter(
this,
"FileUtils",
"resource://gre/modules/FileUtils.jsm",
true
);
const {Toolbox} = require("devtools/client/framework/toolbox");
const {gDevTools} = require("devtools/client/framework/devtools");
const { Toolbox } = require("devtools/client/framework/toolbox");
const { gDevTools } = require("devtools/client/framework/devtools");
const { PREFERENCES } = require("../constants");
@ -91,8 +100,10 @@ exports.openTemporaryExtension = function(win, message) {
// Try to set the last directory used as "displayDirectory".
try {
const lastDirPath =
Services.prefs.getCharPref(PREFERENCES.TEMPORARY_EXTENSION_PATH, "");
const lastDirPath = Services.prefs.getCharPref(
PREFERENCES.TEMPORARY_EXTENSION_PATH,
""
);
const lastDir = new FileUtils.File(lastDirPath);
fp.displayDirectory = lastDir;
} catch (e) {
@ -106,13 +117,19 @@ exports.openTemporaryExtension = function(win, message) {
let file = fp.file;
// AddonManager.installTemporaryAddon accepts either
// addon directory or final xpi file.
if (!file.isDirectory() &&
!file.leafName.endsWith(".xpi") && !file.leafName.endsWith(".zip")) {
if (
!file.isDirectory() &&
!file.leafName.endsWith(".xpi") &&
!file.leafName.endsWith(".zip")
) {
file = file.parent;
}
// We are about to resolve, store the path to the file for the next call.
Services.prefs.setCharPref(PREFERENCES.TEMPORARY_EXTENSION_PATH, file.path);
Services.prefs.setCharPref(
PREFERENCES.TEMPORARY_EXTENSION_PATH,
file.path
);
resolve(file);
});

4
devtools/client/aboutdebugging-new/src/modules/l10n.js
View file

@ -4,7 +4,9 @@
"use strict";
const { FluentL10n } = require("devtools/client/shared/fluent-l10n/fluent-l10n");
const {
FluentL10n,
} = require("devtools/client/shared/fluent-l10n/fluent-l10n");
// exports a singleton, which will be used across all aboutdebugging-new modules
exports.l10n = new FluentL10n();

12
devtools/client/aboutdebugging-new/src/modules/network-locations.js
View file

@ -51,8 +51,10 @@ function addNetworkLocation(location) {
const locationsSet = new Set(locations);
locationsSet.add(location);
Services.prefs.setStringPref(NETWORK_LOCATIONS_PREF,
JSON.stringify([...locationsSet]));
Services.prefs.setStringPref(
NETWORK_LOCATIONS_PREF,
JSON.stringify([...locationsSet])
);
}
exports.addNetworkLocation = addNetworkLocation;
@ -61,7 +63,9 @@ function removeNetworkLocation(location) {
const locationsSet = new Set(locations);
locationsSet.delete(location);
Services.prefs.setStringPref(NETWORK_LOCATIONS_PREF,
JSON.stringify([...locationsSet]));
Services.prefs.setStringPref(
NETWORK_LOCATIONS_PREF,
JSON.stringify([...locationsSet])
);
}
exports.removeNetworkLocation = removeNetworkLocation;

5
devtools/client/aboutdebugging-new/src/modules/runtime-client-factory.js
View file

@ -8,8 +8,9 @@ const { prepareTCPConnection } = require("devtools/shared/adb/commands/index");
const { DebuggerClient } = require("devtools/shared/client/debugger-client");
const { DebuggerServer } = require("devtools/server/main");
const { ClientWrapper } = require("./client-wrapper");
const { remoteClientManager } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
const {
remoteClientManager,
} = require("devtools/client/shared/remote-debugging/remote-client-manager");
const { RUNTIMES } = require("../constants");

7
devtools/client/aboutdebugging-new/src/modules/usb-runtimes.js
View file

@ -80,7 +80,8 @@ async function getUSBRuntimes() {
// Get devices found by ADB, but without any available runtime.
const runtimeDevices = runtimes.map(r => r.deviceId);
const unavailableRuntimes = adb.getDevices()
const unavailableRuntimes = adb
.getDevices()
.filter(d => !runtimeDevices.includes(d.id))
.map(d => new UnavailableUsbRuntime(d));
@ -93,7 +94,9 @@ async function getUSBRuntimes() {
// Get devices previously found by ADB but no longer available.
const currentDevices = allRuntimes.map(r => r.deviceId);
const detectedDevices = [...devices.keys()];
const unpluggedDevices = detectedDevices.filter(id => !currentDevices.includes(id));
const unpluggedDevices = detectedDevices.filter(
id => !currentDevices.includes(id)
);
const unpluggedRuntimes = unpluggedDevices.map(deviceId => {
const deviceName = devices.get(deviceId);
return new UnpluggedUsbRuntime(deviceId, deviceName);

21
devtools/client/aboutdebugging-new/src/reducers/debug-targets-state.js
View file

@ -43,7 +43,10 @@ function debugTargetsReducer(state = DebugTargetsState(), action) {
}
case REQUEST_EXTENSIONS_SUCCESS: {
const { installedExtensions, temporaryExtensions } = action;
return Object.assign({}, state, { installedExtensions, temporaryExtensions });
return Object.assign({}, state, {
installedExtensions,
temporaryExtensions,
});
}
case REQUEST_PROCESSES_SUCCESS: {
const { processes } = action;
@ -55,18 +58,24 @@ function debugTargetsReducer(state = DebugTargetsState(), action) {
}
case REQUEST_WORKERS_SUCCESS: {
const { otherWorkers, serviceWorkers, sharedWorkers } = action;
return Object.assign({}, state, { otherWorkers, serviceWorkers, sharedWorkers });
return Object.assign({}, state, {
otherWorkers,
serviceWorkers,
sharedWorkers,
});
}
case TEMPORARY_EXTENSION_RELOAD_FAILURE: {
const { id, error } = action;
const temporaryExtensions =
updateTemporaryExtension(state, id, { reloadError: error.message });
const temporaryExtensions = updateTemporaryExtension(state, id, {
reloadError: error.message,
});
return Object.assign({}, state, { temporaryExtensions });
}
case TEMPORARY_EXTENSION_RELOAD_START: {
const { id } = action;
const temporaryExtensions =
updateTemporaryExtension(state, id, { reloadError: null });
const temporaryExtensions = updateTemporaryExtension(state, id, {
reloadError: null,
});
return Object.assign({}, state, { temporaryExtensions });
}

19
devtools/client/aboutdebugging-new/src/reducers/runtimes-state.js
View file

@ -19,12 +19,11 @@ const {
THIS_FIREFOX_RUNTIME_CREATED,
} = require("../constants");
const {
findRuntimeById,
} = require("../modules/runtimes-state-helper");
const { findRuntimeById } = require("../modules/runtimes-state-helper");
const { remoteClientManager } =
require("devtools/client/shared/remote-debugging/remote-client-manager");
const {
remoteClientManager,
} = require("devtools/client/shared/remote-debugging/remote-client-manager");
// Map between known runtime types and nodes in the runtimes state.
const TYPE_TO_RUNTIMES_KEY = {
@ -146,8 +145,9 @@ function runtimesReducer(state = RuntimesState(), action) {
const { connectionPromptEnabled } = action;
const { id: runtimeId } = action.runtime;
const runtime = findRuntimeById(runtimeId, state);
const runtimeDetails =
Object.assign({}, runtime.runtimeDetails, { connectionPromptEnabled });
const runtimeDetails = Object.assign({}, runtime.runtimeDetails, {
connectionPromptEnabled,
});
return _updateRuntimeById(runtimeId, { runtimeDetails }, state);
}
@ -155,8 +155,9 @@ function runtimesReducer(state = RuntimesState(), action) {
const { isMultiE10s } = action;
const { id: runtimeId } = action.runtime;
const runtime = findRuntimeById(runtimeId, state);
const runtimeDetails =
Object.assign({}, runtime.runtimeDetails, { isMultiE10s });
const runtimeDetails = Object.assign({}, runtime.runtimeDetails, {
isMultiE10s,
});
return _updateRuntimeById(runtimeId, { runtimeDetails }, state);
}

11
devtools/client/aboutdebugging-new/src/reducers/ui-state.js
View file

@ -18,8 +18,11 @@ const {
USB_RUNTIMES_SCAN_SUCCESS,
} = require("../constants");
function UiState(locations = [], debugTargetCollapsibilities = {},
showHiddenAddons = false) {
function UiState(
locations = [],
debugTargetCollapsibilities = {},
showHiddenAddons = false
) {
return {
adbAddonStatus: null,
debugTargetCollapsibilities,
@ -47,7 +50,9 @@ function uiReducer(state = UiState(), action) {
case DEBUG_TARGET_COLLAPSIBILITY_UPDATED: {
const { isCollapsed, key } = action;
const debugTargetCollapsibilities = new Map(state.debugTargetCollapsibilities);
const debugTargetCollapsibilities = new Map(
state.debugTargetCollapsibilities
);
debugTargetCollapsibilities.set(key, isCollapsed);
return Object.assign({}, state, { debugTargetCollapsibilities });
}

13
devtools/client/aboutdebugging-new/src/types/index.js
View file

@ -8,8 +8,11 @@ const debugTargetTypes = require("./debug-target");
const runtimeTypes = require("./runtime");
const uiTypes = require("./ui");
module.exports = Object.assign({}, {
...debugTargetTypes,
...runtimeTypes,
...uiTypes,
});
module.exports = Object.assign(
{},
{
...debugTargetTypes,
...runtimeTypes,
...uiTypes,
}
);

4
devtools/client/aboutdebugging-new/src/types/runtime.js
View file

@ -6,7 +6,9 @@
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const { ClientWrapper } = require("../modules/client-wrapper");
const { COMPATIBILITY_STATUS } = require("devtools/client/shared/remote-debugging/version-checker");
const {
COMPATIBILITY_STATUS,
} = require("devtools/client/shared/remote-debugging/version-checker");
const runtimeInfo = {
// device name which is running the runtime,

20
devtools/client/aboutdebugging-new/src/types/ui.js
View file

@ -12,12 +12,14 @@ function makeCollapsibilitiesType(isRequired) {
return (props, propName, componentName, _, propFullName) => {
if (isRequired && props[propName] === null) {
return new Error(
`Missing prop ${propFullName} marked as required in ${componentName}`);
`Missing prop ${propFullName} marked as required in ${componentName}`
);
}
const error = new Error(
`Invalid prop ${propFullName} (${props[propName]}) supplied to ` +
`${componentName}. Collapsibilities needs to be a Map<DEBUG_TARGET_PANE, bool>`);
`${componentName}. Collapsibilities needs to be a Map<DEBUG_TARGET_PANE, bool>`
);
const map = props[propName];
@ -27,8 +29,9 @@ function makeCollapsibilitiesType(isRequired) {
}
// check that the keys refer to debug target panes
const areKeysValid = [...map.keys()]
.every(x => Object.values(DEBUG_TARGET_PANE).includes(x));
const areKeysValid = [...map.keys()].every(x =>
Object.values(DEBUG_TARGET_PANE).includes(x)
);
// check that the values are boolean
const areValuesValid = [...map.values()].every(x => typeof x === "boolean");
// error if values or keys fail their checks
@ -44,13 +47,16 @@ function makeLocationType(isRequired) {
return (props, propName, componentName, _, propFullName) => {
if (isRequired && props[propName] === null) {
return new Error(
`Missing prop ${propFullName} marked as required in ${componentName}`);
`Missing prop ${propFullName} marked as required in ${componentName}`
);
}
// check that location is a string with a semicolon in it
if (!/\:/.test(props[propName])) {
return new Error(`Invalid prop ${propFullName} (${props[propName]}) supplied to ` +
`${componentName}. Location needs to be a string with a host:port format`);
return new Error(
`Invalid prop ${propFullName} (${props[propName]}) supplied to ` +
`${componentName}. Location needs to be a string with a host:port format`
);
}
return null;

43
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_console.js
View file

@ -7,7 +7,9 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
// There are shutdown issues for which multiple rejections are left uncaught.
// See bug 1018184 for resolving these issues.
const { PromiseTestUtils } = ChromeUtils.import("resource://testing-common/PromiseTestUtils.jsm");
const { PromiseTestUtils } = ChromeUtils.import(
"resource://testing-common/PromiseTestUtils.jsm"
);
PromiseTestUtils.whitelistRejectionsGlobally(/File closed/);
// Avoid test timeouts that can occur while waiting for the "addon-console-works" message.
@ -29,19 +31,28 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
background: function() {
window.myWebExtensionAddonFunction = function() {
console.log("Background page function called",
this.browser.runtime.getManifest());
};
await installTemporaryExtensionFromXPI(
{
background: function() {
window.myWebExtensionAddonFunction = function() {
console.log(
"Background page function called",
this.browser.runtime.getManifest()
);
};
},
id: ADDON_ID,
name: ADDON_NAME,
},
id: ADDON_ID,
name: ADDON_NAME,
}, document);
document
);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, ADDON_NAME);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window,
ADDON_NAME
);
const toolbox = getToolbox(devtoolsWindow);
const onToolboxClose = gDevTools.once("toolbox-destroyed");
@ -60,9 +71,8 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
function toolboxTestScript(toolbox, devtoolsTab) {
function findMessages(hud, text, selector = ".message") {
const messages = hud.ui.outputNode.querySelectorAll(selector);
const elements = Array.prototype.filter.call(
messages,
(el) => el.textContent.includes(text)
const elements = Array.prototype.filter.call(messages, el =>
el.textContent.includes(text)
);
return elements;
}
@ -73,7 +83,8 @@ function toolboxTestScript(toolbox, devtoolsTab) {
}
}
toolbox.selectTool("webconsole")
toolbox
.selectTool("webconsole")
.then(async console => {
const { hud } = console;
const { jsterm } = hud;

47
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_debugger.js
View file

@ -11,40 +11,53 @@ add_task(async () => {
await enableExtensionDebugging();
info("The debugger should show the source codes of extension even if " +
"devtools.chrome.enabled and devtools.debugger.remote-enabled are off");
info(
"The debugger should show the source codes of extension even if " +
"devtools.chrome.enabled and devtools.debugger.remote-enabled are off"
);
await pushPref("devtools.chrome.enabled", false);
await pushPref("devtools.debugger.remote-enabled", false);
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
background: function() {
window.someRandomMethodName = () => {
// This will not be referred from anywhere.
// However this is necessary to show as the source code in the debugger.
};
await installTemporaryExtensionFromXPI(
{
background: function() {
window.someRandomMethodName = () => {
// This will not be referred from anywhere.
// However this is necessary to show as the source code in the debugger.
};
},
id: EXTENSION_ID,
name: EXTENSION_NAME,
},
id: EXTENSION_ID,
name: EXTENSION_NAME,
}, document);
document
);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, EXTENSION_NAME);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window,
EXTENSION_NAME
);
const toolbox = getToolbox(devtoolsWindow);
await toolbox.selectTool("jsdebugger");
const { panelWin } = toolbox.getCurrentPanel();
info("Check the state of redux");
ok(panelWin.dbg.store.getState().debuggee.isWebExtension,
"isWebExtension flag in debuggee is true");
ok(
panelWin.dbg.store.getState().debuggee.isWebExtension,
"isWebExtension flag in debuggee is true"
);
info("Check whether the element displays correctly");
const sourceList = panelWin.document.querySelector(".sources-list");
ok(sourceList, "Source list element displays correctly");
ok(sourceList.textContent.includes("temporary-web-extension"),
"Extension name displays correctly");
ok(
sourceList.textContent.includes("temporary-web-extension"),
"Extension name displays correctly"
);
await closeAboutDevtoolsToolbox(document, devtoolsTab, window);
await removeTemporaryExtension(EXTENSION_NAME, document);

36
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_inspector.js
View file

@ -7,7 +7,9 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
// There are shutdown issues for which multiple rejections are left uncaught.
// See bug 1018184 for resolving these issues.
const { PromiseTestUtils } = ChromeUtils.import("resource://testing-common/PromiseTestUtils.jsm");
const { PromiseTestUtils } = ChromeUtils.import(
"resource://testing-common/PromiseTestUtils.jsm"
);
PromiseTestUtils.whitelistRejectionsGlobally(/File closed/);
// Avoid test timeouts that can occur while waiting for the "addon-console-works" message.
@ -29,17 +31,24 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
background: function() {
document.body.innerText = "Background Page Body Test Content";
await installTemporaryExtensionFromXPI(
{
background: function() {
document.body.innerText = "Background Page Body Test Content";
},
id: ADDON_ID,
name: ADDON_NAME,
},
id: ADDON_ID,
name: ADDON_NAME,
}, document);
document
);
info("Open a toolbox to debug the addon");
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, ADDON_NAME);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window,
ADDON_NAME
);
const toolbox = getToolbox(devtoolsWindow);
const onToolboxClose = gDevTools.once("toolbox-destroyed");
@ -56,18 +65,19 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
});
async function toolboxTestScript(toolbox, devtoolsTab) {
toolbox.selectTool("inspector")
toolbox
.selectTool("inspector")
.then(inspector => {
return inspector.walker.querySelector(inspector.walker.rootNode, "body");
})
.then((nodeActor) => {
.then(nodeActor => {
if (!nodeActor) {
throw new Error("nodeActor not found");
}
dump("Got a nodeActor\n");
if (!(nodeActor.inlineTextChild)) {
if (!nodeActor.inlineTextChild) {
throw new Error("inlineTextChild not found");
}
@ -86,7 +96,7 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
return Promise.resolve();
})
.then(() => removeTab(devtoolsTab))
.catch((error) => {
.catch(error => {
dump("Error while running code in the browser toolbox process:\n");
dump(error + "\n");
dump("stack:\n" + error.stack + "\n");

81
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_nobg.js
View file

@ -7,7 +7,9 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
// There are shutdown issues for which multiple rejections are left uncaught.
// See bug 1018184 for resolving these issues.
const { PromiseTestUtils } = ChromeUtils.import("resource://testing-common/PromiseTestUtils.jsm");
const { PromiseTestUtils } = ChromeUtils.import(
"resource://testing-common/PromiseTestUtils.jsm"
);
PromiseTestUtils.whitelistRejectionsGlobally(/File closed/);
const ADDON_NOBG_ID = "test-devtools-webextension-nobg@mozilla.org";
@ -26,15 +28,22 @@ add_task(async function testWebExtensionsToolboxNoBackgroundPage() {
const store = window.AboutDebugging.store;
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
// Do not pass any `background` script.
id: ADDON_NOBG_ID,
name: ADDON_NOBG_NAME,
}, document);
await installTemporaryExtensionFromXPI(
{
// Do not pass any `background` script.
id: ADDON_NOBG_ID,
name: ADDON_NOBG_NAME,
},
document
);
info("Open a toolbox to debug the addon");
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, ADDON_NOBG_NAME);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window,
ADDON_NOBG_NAME
);
const toolbox = getToolbox(devtoolsWindow);
const onToolboxClose = gDevTools.once("toolbox-destroyed");
@ -60,31 +69,37 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
throw new Error("Toolbox doesn't have the expected target");
}
toolbox.selectTool("inspector").then(async inspector => {
let nodeActor;
toolbox
.selectTool("inspector")
.then(async inspector => {
let nodeActor;
dump(`Wait the fallback window to be fully loaded\n`);
await asyncWaitUntil(async () => {
nodeActor = await inspector.walker.querySelector(inspector.walker.rootNode, "h1");
return nodeActor && nodeActor.inlineTextChild;
dump(`Wait the fallback window to be fully loaded\n`);
await asyncWaitUntil(async () => {
nodeActor = await inspector.walker.querySelector(
inspector.walker.rootNode,
"h1"
);
return nodeActor && nodeActor.inlineTextChild;
});
dump("Got a nodeActor with an inline text child\n");
const expectedValue = "Your addon does not have any document opened yet.";
const actualValue = nodeActor.inlineTextChild._form.nodeValue;
if (actualValue !== expectedValue) {
throw new Error(
`mismatched inlineTextchild value: "${actualValue}" !== "${expectedValue}"`
);
}
dump("Got the expected inline text content in the selected node\n");
await removeTab(devtoolsTab);
})
.catch(error => {
dump("Error while running code in the browser toolbox process:\n");
dump(error + "\n");
dump("stack:\n" + error.stack + "\n");
});
dump("Got a nodeActor with an inline text child\n");
const expectedValue = "Your addon does not have any document opened yet.";
const actualValue = nodeActor.inlineTextChild._form.nodeValue;
if (actualValue !== expectedValue) {
throw new Error(
`mismatched inlineTextchild value: "${actualValue}" !== "${expectedValue}"`
);
}
dump("Got the expected inline text content in the selected node\n");
await removeTab(devtoolsTab);
}).catch((error) => {
dump("Error while running code in the browser toolbox process:\n");
dump(error + "\n");
dump("stack:\n" + error.stack + "\n");
});
}

147
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_popup.js
View file

@ -7,7 +7,9 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
// There are shutdown issues for which multiple rejections are left uncaught.
// See bug 1018184 for resolving these issues.
const { PromiseTestUtils } = ChromeUtils.import("resource://testing-common/PromiseTestUtils.jsm");
const { PromiseTestUtils } = ChromeUtils.import(
"resource://testing-common/PromiseTestUtils.jsm"
);
PromiseTestUtils.whitelistRejectionsGlobally(/File closed/);
// Avoid test timeouts that can occur while waiting for the "addon-console-works" message.
@ -36,13 +38,19 @@ const ADDON_NAME = "test-devtools-webextension";
add_task(async function testWebExtensionsToolboxWebConsole() {
await enableExtensionDebugging();
is(Services.prefs.getBoolPref("ui.popup.disable_autohide"), false,
"disable_autohide should be initially false");
is(
Services.prefs.getBoolPref("ui.popup.disable_autohide"),
false,
"disable_autohide should be initially false"
);
info("Create promises waiting for the messages emitted by the test addon");
let onReadyForOpenPopup;
let onPopupCustomMessage;
const { Management } = ChromeUtils.import("resource://gre/modules/Extension.jsm", null);
const { Management } = ChromeUtils.import(
"resource://gre/modules/Extension.jsm",
null
);
Management.on("startup", function listener(event, extension) {
if (extension.name != ADDON_NAME) {
return;
@ -53,7 +61,7 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
function waitForExtensionTestMessage(expectedMessage) {
return new Promise(done => {
extension.on("test-message", function testLogListener(evt, ...args) {
const [message ] = args;
const [message] = args;
if (message !== expectedMessage) {
return;
@ -71,27 +79,37 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
// Wait for a notification sent by a script evaluated the test addon via
// the web console.
onPopupCustomMessage = waitForExtensionTestMessage("popupPageFunctionCalled");
onPopupCustomMessage = waitForExtensionTestMessage(
"popupPageFunctionCalled"
);
});
const { document, tab, window: aboutDebuggingWindow } = await openAboutDebugging();
await selectThisFirefoxPage(document, aboutDebuggingWindow.AboutDebugging.store);
const {
document,
tab,
window: aboutDebuggingWindow,
} = await openAboutDebugging();
await selectThisFirefoxPage(
document,
aboutDebuggingWindow.AboutDebugging.store
);
await installTemporaryExtensionFromXPI({
background: function() {
const {browser} = this;
window.myWebExtensionShowPopup = function() {
browser.test.sendMessage("readyForOpenPopup");
};
},
extraProperties: {
browser_action: {
default_title: "WebExtension Popup Debugging",
default_popup: "popup.html",
await installTemporaryExtensionFromXPI(
{
background: function() {
const { browser } = this;
window.myWebExtensionShowPopup = function() {
browser.test.sendMessage("readyForOpenPopup");
};
},
},
files: {
"popup.html": `<!DOCTYPE html>
extraProperties: {
browser_action: {
default_title: "WebExtension Popup Debugging",
default_popup: "popup.html",
},
},
files: {
"popup.html": `<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
@ -102,21 +120,29 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
</body>
</html>
`,
"popup.js": function() {
const {browser} = this;
window.myWebExtensionPopupAddonFunction = function() {
browser.test.sendMessage("popupPageFunctionCalled",
browser.runtime.getManifest());
};
"popup.js": function() {
const { browser } = this;
window.myWebExtensionPopupAddonFunction = function() {
browser.test.sendMessage(
"popupPageFunctionCalled",
browser.runtime.getManifest()
);
};
},
},
id: ADDON_ID,
name: ADDON_NAME,
},
id: ADDON_ID,
name: ADDON_NAME,
}, document);
document
);
info("Open a toolbox to debug the addon");
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, aboutDebuggingWindow, ADDON_NAME);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
aboutDebuggingWindow,
ADDON_NAME
);
const toolbox = getToolbox(devtoolsWindow);
const onToolboxClose = gDevTools.once("toolbox-destroyed");
@ -136,14 +162,20 @@ add_task(async function testWebExtensionsToolboxWebConsole() {
const args = await onPopupCustomMessage;
ok(true, "Received console message from the popup page function as expected");
is(args[0], "popupPageFunctionCalled", "Got the expected console message");
is(args[1] && args[1].name, ADDON_NAME,
"Got the expected manifest from WebExtension API");
is(
args[1] && args[1].name,
ADDON_NAME,
"Got the expected manifest from WebExtension API"
);
info("Wait for the toolbox to close");
await onToolboxClose;
is(Services.prefs.getBoolPref("ui.popup.disable_autohide"), false,
"disable_autohide should be reset to false when the toolbox is closed");
is(
Services.prefs.getBoolPref("ui.popup.disable_autohide"),
false,
"disable_autohide should be reset to false when the toolbox is closed"
);
// The test script will not close the toolbox and will timeout if it fails, so reaching
// this point in the test is enough to assume the test was successful.
@ -157,7 +189,7 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
let jsterm;
const popupFramePromise = new Promise(resolve => {
const listener = data => {
if (data.frames.some(({url}) => url && url.endsWith("popup.html"))) {
if (data.frames.some(({ url }) => url && url.endsWith("popup.html"))) {
toolbox.target.off("frame-update", listener);
resolve();
}
@ -167,17 +199,23 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
const waitForFrameListUpdate = toolbox.target.once("frame-update");
toolbox.selectTool("webconsole")
.then(async (console) => {
toolbox
.selectTool("webconsole")
.then(async console => {
const clickNoAutoHideMenu = () => {
return new Promise(resolve => {
toolbox.doc.getElementById("toolbox-meatball-menu-button").click();
toolbox.doc.addEventListener("popupshown", () => {
const menuItem =
toolbox.doc.getElementById("toolbox-meatball-menu-noautohide");
menuItem.click();
resolve();
}, { once: true });
toolbox.doc.addEventListener(
"popupshown",
() => {
const menuItem = toolbox.doc.getElementById(
"toolbox-meatball-menu-noautohide"
);
menuItem.click();
resolve();
},
{ once: true }
);
});
};
@ -206,9 +244,13 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
throw Error(`Number of frames found is wrong: ${frames.length} != 2`);
}
const popupFrameBtn = frames.filter((frame) => {
return frame.querySelector(".label").textContent.endsWith("popup.html");
}).pop();
const popupFrameBtn = frames
.filter(frame => {
return frame
.querySelector(".label")
.textContent.endsWith("popup.html");
})
.pop();
if (!popupFrameBtn) {
throw Error("Extension Popup frame not found in the listed frames");
@ -218,7 +260,10 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
popupFrameBtn.click();
// Clicking the menu item may do highlighting.
await waitUntil(() => toolbox.highlighter);
await Promise.race([toolbox.highlighter.once("node-highlight"), wait(1000)]);
await Promise.race([
toolbox.highlighter.once("node-highlight"),
wait(1000),
]);
await waitForNavigated;
await jsterm.execute("myWebExtensionPopupAddonFunction()");
@ -227,7 +272,7 @@ async function toolboxTestScript(toolbox, devtoolsTab) {
await removeTab(devtoolsTab);
})
.catch((error) => {
.catch(error => {
dump("Error while running code in the browser toolbox process:\n");
dump(error + "\n");
dump("stack:\n" + error.stack + "\n");

22
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_manifest_url.js
View file

@ -13,8 +13,10 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-adb.js", this);
// Test that manifest URLs for addon targets show the manifest correctly in a new tab.
// This test reuses the ADB extension to be sure to have a valid manifest URL to open.
add_task(async function() {
await pushPref("devtools.remote.adb.extensionURL",
CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
await pushPref(
"devtools.remote.adb.extensionURL",
CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi"
);
await checkAdbNotRunning();
const { document, tab, window } = await openAboutDebugging();
@ -40,13 +42,21 @@ add_task(async function() {
await BrowserTestUtils.browserLoaded(target.linkedBrowser);
info("Retrieve the text content of the new tab");
const textContent = await ContentTask.spawn(target.linkedBrowser, {}, function() {
return content.wrappedJSObject.document.body.textContent;
});
const textContent = await ContentTask.spawn(
target.linkedBrowser,
{},
function() {
return content.wrappedJSObject.document.body.textContent;
}
);
const manifestObject = JSON.parse(textContent);
ok(manifestObject, "The displayed content is a valid JSON object");
is(manifestObject.name, ABD_ADDON_NAME, "Manifest tab shows the expected content");
is(
manifestObject.name,
ABD_ADDON_NAME,
"Manifest tab shows the expected content"
);
info("Close the manifest.json tab");
await removeTab(target);

51
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_remote_runtime.js
View file

@ -26,7 +26,11 @@ add_task(async function() {
info("Test addons in runtime page for USB client");
await connectToRuntime(USB_RUNTIME_DEVICE_NAME, document);
await selectRuntime(USB_RUNTIME_DEVICE_NAME, USB_RUNTIME_APP_NAME, document);
await testAddonsOnMockedRemoteClient(usbClient, mocks.thisFirefoxClient, document);
await testAddonsOnMockedRemoteClient(
usbClient,
mocks.thisFirefoxClient,
document
);
info("Prepare Network client mock");
const networkClient = mocks.createNetworkRuntime(NETWORK_RUNTIME_HOST, {
@ -36,7 +40,11 @@ add_task(async function() {
info("Test addons in runtime page for Network client");
await connectToRuntime(NETWORK_RUNTIME_HOST, document);
await selectRuntime(NETWORK_RUNTIME_HOST, NETWORK_RUNTIME_APP_NAME, document);
await testAddonsOnMockedRemoteClient(networkClient, mocks.thisFirefoxClient, document);
await testAddonsOnMockedRemoteClient(
networkClient,
mocks.thisFirefoxClient,
document
);
await removeTab(tab);
});
@ -44,11 +52,17 @@ add_task(async function() {
/**
* Check that addons are visible in the runtime page for a remote client (USB or network).
*/
async function testAddonsOnMockedRemoteClient(remoteClient, firefoxClient, document) {
async function testAddonsOnMockedRemoteClient(
remoteClient,
firefoxClient,
document
) {
const extensionPane = getDebugTargetPane("Extensions", document);
info("Check an empty target pane message is displayed");
ok(extensionPane.querySelector(".qa-debug-target-list-empty"),
"Extensions list is empty");
ok(
extensionPane.querySelector(".qa-debug-target-list-empty"),
"Extensions list is empty"
);
info("Add an extension to the remote client");
const addon = { name: "Test extension name", debuggable: true };
@ -56,9 +70,14 @@ async function testAddonsOnMockedRemoteClient(remoteClient, firefoxClient, docum
remoteClient._eventEmitter.emit("addonListChanged");
info("Wait until the extension appears");
await waitUntil(() => !extensionPane.querySelector(".qa-debug-target-list-empty"));
await waitUntil(
() => !extensionPane.querySelector(".qa-debug-target-list-empty")
);
const extensionTarget = findDebugTargetByText("Test extension name", document);
const extensionTarget = findDebugTargetByText(
"Test extension name",
document
);
ok(extensionTarget, "Extension target appeared for the remote runtime");
// The goal here is to check that runtimes addons are only updated when the remote
@ -78,12 +97,20 @@ async function testAddonsOnMockedRemoteClient(remoteClient, firefoxClient, docum
const testTab = { outerWindowID: 0, url: "http://some.random/url.com" };
remoteClient.listTabs = () => [testTab];
remoteClient._eventEmitter.emit("tabListChanged");
await waitUntil(() => findDebugTargetByText("http://some.random/url.com", document));
await waitUntil(() =>
findDebugTargetByText("http://some.random/url.com", document)
);
ok(findDebugTargetByText("Test extension name", document),
"The test extension is still visible");
ok(
findDebugTargetByText("Test extension name", document),
"The test extension is still visible"
);
info("Emit `addonListChanged` on remoteClient and wait for the target list to update");
info(
"Emit `addonListChanged` on remoteClient and wait for the target list to update"
);
remoteClient._eventEmitter.emit("addonListChanged");
await waitUntil(() => !findDebugTargetByText("Test extension name", document));
await waitUntil(
() => !findDebugTargetByText("Test extension name", document)
);
}

88
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_addon_buttons.js
View file

@ -14,38 +14,62 @@ add_task(async function() {
const UPDATED_EXTENSION_NAME = "Temporary web extension (updated)";
const EXTENSION_ID = "test-devtools@mozilla.org";
const addonFile = await installTemporaryExtensionFromXPI({
id: EXTENSION_ID,
name: ORIGINAL_EXTENSION_NAME,
}, document);
const addonFile = await installTemporaryExtensionFromXPI(
{
id: EXTENSION_ID,
name: ORIGINAL_EXTENSION_NAME,
},
document
);
const originalTarget = findDebugTargetByText(ORIGINAL_EXTENSION_NAME, document);
ok(!!originalTarget, "The temporary extension isinstalled with the expected name");
const originalTarget = findDebugTargetByText(
ORIGINAL_EXTENSION_NAME,
document
);
ok(
!!originalTarget,
"The temporary extension isinstalled with the expected name"
);
info("Update the name of the temporary extension in the manifest");
updateTemporaryXPI({ id: EXTENSION_ID, name: UPDATED_EXTENSION_NAME }, addonFile);
updateTemporaryXPI(
{ id: EXTENSION_ID, name: UPDATED_EXTENSION_NAME },
addonFile
);
info("Click on the reload button for the temporary extension");
const reloadButton =
originalTarget.querySelector(".qa-temporary-extension-reload-button");
const reloadButton = originalTarget.querySelector(
".qa-temporary-extension-reload-button"
);
reloadButton.click();
info("Wait until the debug target with the original extension name disappears");
await waitUntil(() => !findDebugTargetByText(ORIGINAL_EXTENSION_NAME, document));
info(
"Wait until the debug target with the original extension name disappears"
);
await waitUntil(
() => !findDebugTargetByText(ORIGINAL_EXTENSION_NAME, document)
);
info("Wait until the debug target with the updated extension name appears");
await waitUntil(() => findDebugTargetByText(UPDATED_EXTENSION_NAME, document));
await waitUntil(() =>
findDebugTargetByText(UPDATED_EXTENSION_NAME, document)
);
const updatedTarget = findDebugTargetByText(UPDATED_EXTENSION_NAME, document);
ok(!!updatedTarget, "The temporary extension name has been updated");
info("Click on the remove button for the temporary extension");
const removeButton =
updatedTarget.querySelector(".qa-temporary-extension-remove-button");
const removeButton = updatedTarget.querySelector(
".qa-temporary-extension-remove-button"
);
removeButton.click();
info("Wait until the debug target with the updated extension name disappears");
await waitUntil(() => !findDebugTargetByText(UPDATED_EXTENSION_NAME, document));
info(
"Wait until the debug target with the updated extension name disappears"
);
await waitUntil(
() => !findDebugTargetByText(UPDATED_EXTENSION_NAME, document)
);
await removeTab(tab);
});
@ -57,18 +81,36 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installRegularExtension("resources/packaged-extension/packaged-extension.xpi");
await installRegularExtension(
"resources/packaged-extension/packaged-extension.xpi"
);
info("Wait until extension appears in about:debugging");
await waitUntil(() => findDebugTargetByText(PACKAGED_EXTENSION_NAME, document));
await waitUntil(() =>
findDebugTargetByText(PACKAGED_EXTENSION_NAME, document)
);
const target = findDebugTargetByText(PACKAGED_EXTENSION_NAME, document);
const reloadButton = target.querySelector(".qa-temporary-extension-reload-button");
ok(!reloadButton, "No reload button displayed for a regularly installed extension");
const reloadButton = target.querySelector(
".qa-temporary-extension-reload-button"
);
ok(
!reloadButton,
"No reload button displayed for a regularly installed extension"
);
const removeButton = target.querySelector(".qa-temporary-extension-remove-button");
ok(!removeButton, "No remove button displayed for a regularly installed extension");
const removeButton = target.querySelector(
".qa-temporary-extension-remove-button"
);
ok(
!removeButton,
"No remove button displayed for a regularly installed extension"
);
await removeExtension(PACKAGED_EXTENSION_ID, PACKAGED_EXTENSION_NAME, document);
await removeExtension(
PACKAGED_EXTENSION_ID,
PACKAGED_EXTENSION_NAME,
document
);
await removeTab(tab);
});

30
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_id_message.js
View file

@ -14,10 +14,13 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
id: EXTENSION_ID,
name: EXTENSION_NAME,
}, document);
await installTemporaryExtensionFromXPI(
{
id: EXTENSION_ID,
name: EXTENSION_NAME,
},
document
);
info("Wait until a debug target item appears");
await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
@ -42,15 +45,26 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installRegularExtension("resources/packaged-extension/packaged-extension.xpi");
await installRegularExtension(
"resources/packaged-extension/packaged-extension.xpi"
);
info("Wait until extension appears in about:debugging");
await waitUntil(() => findDebugTargetByText(PACKAGED_EXTENSION_NAME, document));
await waitUntil(() =>
findDebugTargetByText(PACKAGED_EXTENSION_NAME, document)
);
const target = findDebugTargetByText(PACKAGED_EXTENSION_NAME, document);
const tmpIdMessage = target.querySelector(".qa-temporary-id-message");
ok(!tmpIdMessage, "No temporary id message is displayed for a regular extension");
ok(
!tmpIdMessage,
"No temporary id message is displayed for a regular extension"
);
await removeExtension(PACKAGED_EXTENSION_ID, PACKAGED_EXTENSION_NAME, document);
await removeExtension(
PACKAGED_EXTENSION_ID,
PACKAGED_EXTENSION_NAME,
document
);
await removeTab(tab);
});

43
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_install_error.js
View file

@ -11,7 +11,8 @@ Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
* extensions.
*/
const INVALID_JSON_EXTENSION_PATH = "resources/bad-extensions/invalid-json/manifest.json";
const INVALID_JSON_EXTENSION_PATH =
"resources/bad-extensions/invalid-json/manifest.json";
const INVALID_PROP_EXTENSION_PATH =
"resources/bad-extensions/invalid-property/manifest.json";
const EXTENSION_PATH = "resources/test-temporary-extension/manifest.json";
@ -23,15 +24,22 @@ add_task(async function testInvalidJsonExtension() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const installError = await installBadExtension(INVALID_JSON_EXTENSION_PATH, document);
ok(installError.textContent.includes("JSON.parse: unexpected keyword"),
"The expected installation error is displayed: " + installError.textContent);
const installError = await installBadExtension(
INVALID_JSON_EXTENSION_PATH,
document
);
ok(
installError.textContent.includes("JSON.parse: unexpected keyword"),
"The expected installation error is displayed: " + installError.textContent
);
info("Install a valid extension to make the message disappear");
await installTemporaryExtension(EXTENSION_PATH, EXTENSION_NAME, document);
info("Wait until the error message disappears");
await waitUntil(() => !document.querySelector(".qa-tmp-extension-install-error"));
await waitUntil(
() => !document.querySelector(".qa-tmp-extension-install-error")
);
info("Wait for the temporary addon to be displayed as a debug target");
await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
@ -47,13 +55,22 @@ add_task(async function testInvalidPropertyExtension() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const installError = await installBadExtension(INVALID_PROP_EXTENSION_PATH, document);
const installError = await installBadExtension(
INVALID_PROP_EXTENSION_PATH,
document
);
ok(installError.textContent.includes("Extension is invalid"),
"The basic installation error is displayed: " + installError.textContent);
ok(installError.textContent.includes(
"Reading manifest: Error processing content_scripts.0.matches"),
"The detailed installation error is also displayed: " + installError.textContent);
ok(
installError.textContent.includes("Extension is invalid"),
"The basic installation error is displayed: " + installError.textContent
);
ok(
installError.textContent.includes(
"Reading manifest: Error processing content_scripts.0.matches"
),
"The detailed installation error is also displayed: " +
installError.textContent
);
await removeTab(tab);
});
@ -65,6 +82,8 @@ async function installBadExtension(path, document) {
document.querySelector(".qa-temporary-extension-install-button").click();
info("Wait until the install error message appears");
await waitUntil(() => document.querySelector(".qa-tmp-extension-install-error"));
await waitUntil(() =>
document.querySelector(".qa-tmp-extension-install-error")
);
return document.querySelector(".qa-tmp-extension-install-error");
}

6
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_install_path.js
View file

@ -55,7 +55,11 @@ add_task(async function testPreferenceRetrievedWhenInstallingExtension() {
info("Check whether the shown dir is same as the pref");
const fp = await onFilePickerShown;
is(fp.displayDirectory.path, selectedDir, "Shown directory sets as same as the pref");
is(
fp.displayDirectory.path,
selectedDir,
"Shown directory sets as same as the pref"
);
await removeTab(tab);
});

43
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_reload_error.js
View file

@ -13,10 +13,13 @@ add_task(async function() {
const EXTENSION_ID = "test-devtools@mozilla.org";
const EXTENSION_NAME = "Temporary web extension";
let addonFile = await installTemporaryExtensionFromXPI({
id: EXTENSION_ID,
name: EXTENSION_NAME,
}, document);
let addonFile = await installTemporaryExtensionFromXPI(
{
id: EXTENSION_ID,
name: EXTENSION_NAME,
},
document
);
const target = findDebugTargetByText(EXTENSION_NAME, document);
ok(!!target, "The temporary extension is installed with the expected name");
@ -25,25 +28,37 @@ add_task(async function() {
addonFile = updateTemporaryXPI({ id: EXTENSION_ID }, addonFile);
info("Click on the reload button for the invalid temporary extension");
const waitForError =
waitForDispatch(window.AboutDebugging.store, "TEMPORARY_EXTENSION_RELOAD_FAILURE");
const reloadButton = target.querySelector(".qa-temporary-extension-reload-button");
const waitForError = waitForDispatch(
window.AboutDebugging.store,
"TEMPORARY_EXTENSION_RELOAD_FAILURE"
);
const reloadButton = target.querySelector(
".qa-temporary-extension-reload-button"
);
reloadButton.click();
await waitForError;
ok(target.querySelector(".qa-temporary-extension-reload-error"),
"The error message of reloading appears");
ok(
target.querySelector(".qa-temporary-extension-reload-error"),
"The error message of reloading appears"
);
info("Click on the reload button for the valid temporary extension");
const waitForSuccess =
waitForDispatch(window.AboutDebugging.store, "TEMPORARY_EXTENSION_RELOAD_SUCCESS");
const waitForSuccess = waitForDispatch(
window.AboutDebugging.store,
"TEMPORARY_EXTENSION_RELOAD_SUCCESS"
);
updateTemporaryXPI({ id: EXTENSION_ID, name: EXTENSION_NAME }, addonFile);
reloadButton.click();
await waitForSuccess;
ok(!target.querySelector(".qa-temporary-extension-reload-error"),
"The error message of reloading disappears");
ok(
!target.querySelector(".qa-temporary-extension-reload-error"),
"The error message of reloading disappears"
);
info("Click on the remove button for the temporary extension");
const removeButton = target.querySelector(".qa-temporary-extension-remove-button");
const removeButton = target.querySelector(
".qa-temporary-extension-remove-button"
);
removeButton.click();
info("Wait until the debug target with the extension disappears");

27
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_warnings.js
View file

@ -14,24 +14,33 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
await installTemporaryExtensionFromXPI({
id: EXTENSION_ID,
name: EXTENSION_NAME,
extraProperties: {
// This property is not expected in the manifest and should trigger a warning!
"wrongProperty": {},
await installTemporaryExtensionFromXPI(
{
id: EXTENSION_ID,
name: EXTENSION_NAME,
extraProperties: {
// This property is not expected in the manifest and should trigger a warning!
wrongProperty: {},
},
},
}, document);
document
);
info("Wait until a debug target item appears");
await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
const target = findDebugTargetByText(EXTENSION_NAME, document);
const warningMessage = target.querySelector(".qa-message");
ok(!!warningMessage, "A warning message is displayed for the installed addon");
ok(
!!warningMessage,
"A warning message is displayed for the installed addon"
);
const warningText = warningMessage.textContent;
ok(warningText.includes("wrongProperty"), "The warning message mentions wrongProperty");
ok(
warningText.includes("wrongProperty"),
"The warning message mentions wrongProperty"
);
await removeTemporaryExtension(EXTENSION_NAME, document);
await removeTab(tab);

60
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_networklocations.js
View file

@ -17,48 +17,66 @@ add_task(async function() {
await selectConnectPage(document);
let networkLocations = document.querySelectorAll(".qa-network-location");
is(networkLocations.length, 0, "By default, no network locations are displayed");
is(
networkLocations.length,
0,
"By default, no network locations are displayed"
);
info("Check whether error message should show if the input value is invalid");
addNetworkLocation(TEST_NETWORK_LOCATION_INVALID, document);
await waitUntil(() =>
document.querySelector(".qa-connect-page__network-form__error-message"));
document.querySelector(".qa-connect-page__network-form__error-message")
);
info("Wait until the new network location is visible in the list");
addNetworkLocation(TEST_NETWORK_LOCATION, document);
await waitUntil(() => document.querySelectorAll(".qa-network-location").length === 1);
await waitUntil(() =>
!document.querySelector(".qa-connect-page__network-form__error-message"));
await waitUntil(
() => document.querySelectorAll(".qa-network-location").length === 1
);
await waitUntil(
() =>
!document.querySelector(".qa-connect-page__network-form__error-message")
);
networkLocations = document.querySelectorAll(".qa-network-location");
const networkLocationValue =
networkLocations[0].querySelector(".qa-network-location-value");
is(networkLocationValue.textContent, TEST_NETWORK_LOCATION,
"Added network location has the expected value");
const networkLocationValue = networkLocations[0].querySelector(
".qa-network-location-value"
);
is(
networkLocationValue.textContent,
TEST_NETWORK_LOCATION,
"Added network location has the expected value"
);
info("Check whether error message should show if the input value was duplicate");
info(
"Check whether error message should show if the input value was duplicate"
);
addNetworkLocation(TEST_NETWORK_LOCATION, document);
await waitUntil(() =>
document.querySelector(".qa-connect-page__network-form__error-message"));
document.querySelector(".qa-connect-page__network-form__error-message")
);
info("Wait until the new network location is removed from the list");
removeNetworkLocation(TEST_NETWORK_LOCATION, document);
await waitUntil(() => document.querySelectorAll(".qa-network-location").length === 0);
await waitUntil(
() => document.querySelectorAll(".qa-network-location").length === 0
);
await removeTab(tab);
});
function addNetworkLocation(location, document) {
info("Setting a value in the network form input");
const networkLocationInput =
document.querySelector(".qa-network-form-input");
const networkLocationInput = document.querySelector(".qa-network-form-input");
networkLocationInput.value = "";
networkLocationInput.focus();
EventUtils.sendString(location, networkLocationInput.ownerGlobal);
info("Click on network form submit button");
const networkLocationSubmitButton =
document.querySelector(".qa-network-form-submit-button");
const networkLocationSubmitButton = document.querySelector(
".qa-network-form-submit-button"
);
networkLocationSubmitButton.click();
}
@ -67,8 +85,9 @@ function removeNetworkLocation(location, document) {
ok(networkLocation, "Network location container found.");
info("Click on the remove button for the provided network location");
const removeButton =
networkLocation.querySelector(".qa-network-location-remove-button");
const removeButton = networkLocation.querySelector(
".qa-network-location-remove-button"
);
removeButton.click();
}
@ -76,6 +95,9 @@ function getNetworkLocation(location, document) {
info("Find the container for network location: " + location);
const networkLocations = document.querySelectorAll(".qa-network-location");
return [...networkLocations].find(element => {
return element.querySelector(".qa-network-location-value").textContent === location;
return (
element.querySelector(".qa-network-location-value").textContent ===
location
);
});
}

43
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_toggle_usb_devices.js
View file

@ -12,8 +12,10 @@ const { AddonManager } = require("resource://gre/modules/AddonManager.jsm");
* Check that USB Devices scanning can be enabled and disabled from the connect page.
*/
add_task(async function() {
await pushPref("devtools.remote.adb.extensionURL",
CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
await pushPref(
"devtools.remote.adb.extensionURL",
CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi"
);
await checkAdbNotRunning();
const { document, tab } = await openAboutDebugging();
@ -24,27 +26,40 @@ add_task(async function() {
await waitUntil(() => document.querySelector(".qa-connect-page"));
info("Check that by default USB devices are disabled");
const usbDisabledMessage = document.querySelector(".qa-connect-usb-disabled-message");
const usbDisabledMessage = document.querySelector(
".qa-connect-usb-disabled-message"
);
ok(usbDisabledMessage, "A message about enabling USB devices is rendered");
const usbToggleButton = document.querySelector(".qa-connect-usb-toggle-button");
const usbToggleButton = document.querySelector(
".qa-connect-usb-toggle-button"
);
ok(usbToggleButton, "The button to toggle USB devices debugging is rendered");
ok(usbToggleButton.textContent.includes("Enable"),
"The text of the toggle USB button is correct");
ok(
usbToggleButton.textContent.includes("Enable"),
"The text of the toggle USB button is correct"
);
info("Click on the toggle button");
usbToggleButton.click();
info("Wait until the toggle button text is updated");
await waitUntil(() => usbToggleButton.textContent.includes("Disable"));
ok(!document.querySelector(".qa-connect-usb-disabled-message"),
"The message about enabling USB devices is no longer rendered");
ok(
!document.querySelector(".qa-connect-usb-disabled-message"),
"The message about enabling USB devices is no longer rendered"
);
info("Check that the addon was installed with the proper source");
const adbExtensionId = Services.prefs.getCharPref("devtools.remote.adb.extensionID");
const adbExtensionId = Services.prefs.getCharPref(
"devtools.remote.adb.extensionID"
);
const addon = await AddonManager.getAddonByID(adbExtensionId);
Assert.deepEqual(addon.installTelemetryInfo, { source: "about:debugging" },
"Got the expected addon.installTelemetryInfo");
Assert.deepEqual(
addon.installTelemetryInfo,
{ source: "about:debugging" },
"Got the expected addon.installTelemetryInfo"
);
// Right now we are resuming as soon as "USB enabled" is displayed, but ADB
// might still be starting up. If we move to uninstall directly, the ADB startup will
@ -57,8 +72,10 @@ add_task(async function() {
info("Wait until the toggle button text is updated");
await waitUntil(() => usbToggleButton.textContent.includes("Enable"));
ok(document.querySelector(".qa-connect-usb-disabled-message"),
"The message about enabling USB devices is rendered again");
ok(
document.querySelector(".qa-connect-usb-disabled-message"),
"The message about enabling USB devices is rendered again"
);
await stopAdbProcess();

32
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
View file

@ -30,28 +30,40 @@ add_task(async function() {
await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
info("Check whether connection prompt toggle button exists");
let connectionPromptToggleButton =
document.querySelector(".qa-connection-prompt-toggle-button");
let connectionPromptToggleButton = document.querySelector(
".qa-connection-prompt-toggle-button"
);
ok(connectionPromptToggleButton, "Toggle button existed");
ok(connectionPromptToggleButton.textContent.includes("Disable"),
"Toggle button shows 'Disable'");
ok(
connectionPromptToggleButton.textContent.includes("Disable"),
"Toggle button shows 'Disable'"
);
info("Click on the toggle button");
connectionPromptToggleButton =
document.querySelector(".qa-connection-prompt-toggle-button");
connectionPromptToggleButton = document.querySelector(
".qa-connection-prompt-toggle-button"
);
connectionPromptToggleButton.click();
info("Wait until the toggle button text is updated");
await waitUntil(() => connectionPromptToggleButton.textContent.includes("Enable"));
await waitUntil(() =>
connectionPromptToggleButton.textContent.includes("Enable")
);
info("Check the preference");
const disabledPref = runtime.getPreference("devtools.debugger.prompt-connection");
const disabledPref = runtime.getPreference(
"devtools.debugger.prompt-connection"
);
is(disabledPref, false, "The preference should be updated");
info("Click on the toggle button again");
connectionPromptToggleButton.click();
info("Wait until the toggle button text is updated");
await waitUntil(() => connectionPromptToggleButton.textContent.includes("Disable"));
await waitUntil(() =>
connectionPromptToggleButton.textContent.includes("Disable")
);
info("Check the preference");
const enabledPref = runtime.getPreference("devtools.debugger.prompt-connection");
const enabledPref = runtime.getPreference(
"devtools.debugger.prompt-connection"
);
is(enabledPref, true, "The preference should be updated");
await removeTab(tab);

15
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test that collapsibilities of DebugTargetPane on RuntimePage by mouse clicking.
@ -37,8 +40,9 @@ async function assertDebugTargetCollapsed(paneEl, title) {
is(targetEl.clientHeight, 0, "Height of list element is zero");
// check title
const titleEl = paneEl.querySelector(".qa-debug-target-pane-title");
const expectedTitle =
`${ title } (${ targetEl.querySelectorAll(".qa-debug-target-item").length })`;
const expectedTitle = `${title} (${
targetEl.querySelectorAll(".qa-debug-target-item").length
})`;
is(titleEl.textContent, expectedTitle, "Collapsed title is correct");
}
@ -51,7 +55,8 @@ async function assertDebugTargetExpanded(paneEl, title) {
ok(true, "Height of list element is greater than zero");
// check title
const titleEl = paneEl.querySelector(".qa-debug-target-pane-title");
const expectedTitle =
`${ title } (${ targetEl.querySelectorAll(".qa-debug-target-item").length })`;
const expectedTitle = `${title} (${
targetEl.querySelectorAll(".qa-debug-target-item").length
})`;
is(titleEl.textContent, expectedTitle, "Expanded title is correct");
}

11
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_preference.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test for preference of DebugTargetPane collapsibilities.
@ -28,6 +31,10 @@ add_task(async function() {
await waitUntil(() => document.querySelector(".app") === null);
for (const { pref } of TARGET_PANES) {
is(Services.prefs.getBoolPref(pref), true, `${ pref } preference should be true`);
is(
Services.prefs.getBoolPref(pref),
true,
`${pref} preference should be true`
);
}
});

56
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_empty.js
View file

@ -6,7 +6,10 @@
/* import-globals-from helper-addons.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-addons.js", this);
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test that an "empty" message is displayed when there are no debug targets in a debug
@ -23,37 +26,58 @@ add_task(async function() {
await selectThisFirefoxPage(document, window.AboutDebugging.store);
info("Check that the temporary extensions pane is empty");
const temporaryExtensionPane = getDebugTargetPane("Temporary Extensions", document);
ok(!temporaryExtensionPane.querySelector(".qa-debug-target-item"),
"Temporary Extensions pane contains no debug target");
const temporaryExtensionPane = getDebugTargetPane(
"Temporary Extensions",
document
);
ok(
!temporaryExtensionPane.querySelector(".qa-debug-target-item"),
"Temporary Extensions pane contains no debug target"
);
info("Check an empty target pane message is displayed");
ok(temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"An empty target list message is displayed");
ok(
temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"An empty target list message is displayed"
);
info("Install a temporary extension");
await installTemporaryExtension(EXTENSION_PATH, EXTENSION_NAME, document);
info("Wait until a debug target item appears");
await waitUntil(() => temporaryExtensionPane.querySelector(".qa-debug-target-item"));
await waitUntil(() =>
temporaryExtensionPane.querySelector(".qa-debug-target-item")
);
info("Check the empty target pane message is no longer displayed");
ok(!temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"The empty target list message is no longer displayed");
ok(
!temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"The empty target list message is no longer displayed"
);
const temporaryExtensionItem =
temporaryExtensionPane.querySelector(".qa-debug-target-item");
ok(temporaryExtensionItem, "Temporary Extensions pane now shows debug target");
const temporaryExtensionItem = temporaryExtensionPane.querySelector(
".qa-debug-target-item"
);
ok(
temporaryExtensionItem,
"Temporary Extensions pane now shows debug target"
);
info("Remove the temporary extension");
temporaryExtensionItem.querySelector(".qa-temporary-extension-remove-button").click();
temporaryExtensionItem
.querySelector(".qa-temporary-extension-remove-button")
.click();
info("Wait until the debug target item disappears");
await waitUntil(() => !temporaryExtensionPane.querySelector(".qa-debug-target-item"));
await waitUntil(
() => !temporaryExtensionPane.querySelector(".qa-debug-target-item")
);
info("Check the empty target pane message is displayed again");
ok(temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"An empty target list message is displayed again");
ok(
temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
"An empty target list message is displayed again"
);
await removeTab(tab);
});

15
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_usb_runtime.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
const RUNTIME_ID = "test-runtime-id";
const RUNTIME_DEVICE_NAME = "test device name";
@ -15,13 +18,17 @@ add_task(async function() {
const mocks = new Mocks();
await checkTargetPanes({ enableLocalTabs: false }, mocks);
info("Check that enableLocalTabs has no impact on the categories displayed for remote" +
" runtimes.");
info(
"Check that enableLocalTabs has no impact on the categories displayed for remote" +
" runtimes."
);
await checkTargetPanes({ enableLocalTabs: true }, mocks);
});
async function checkTargetPanes({ enableLocalTabs }, mocks) {
const { document, tab, window } = await openAboutDebugging({ enableLocalTabs });
const { document, tab, window } = await openAboutDebugging({
enableLocalTabs,
});
await selectThisFirefoxPage(document, window.AboutDebugging.store);
mocks.createUSBRuntime(RUNTIME_ID, {

5
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Check that DevTools are not closed when leaving This Firefox runtime page.

57
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_contextmenu.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test context menu on about:devtools-toolbox page.
@ -15,13 +18,20 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsBrowser, devtoolsTab } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsBrowser, devtoolsTab } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
info("Check whether the menu item which opens devtools is disabled");
const rootDocument = devtoolsTab.ownerDocument;
await assertContextMenu(rootDocument, devtoolsBrowser,
".debug-target-info", false);
await assertContextMenu(
rootDocument,
devtoolsBrowser,
".debug-target-info",
false
);
info("Force to select about:debugging page");
gBrowser.selectedTab = tab;
@ -32,7 +42,12 @@ add_task(async function() {
await removeTab(tab);
});
async function assertContextMenu(rootDocument, browser, targetSelector, shouldBeEnabled) {
async function assertContextMenu(
rootDocument,
browser,
targetSelector,
shouldBeEnabled
) {
if (shouldBeEnabled) {
await assertContextMenuEnabled(rootDocument, browser, targetSelector);
} else {
@ -40,15 +55,22 @@ async function assertContextMenu(rootDocument, browser, targetSelector, shouldBe
}
}
async function assertContextMenuDisabled(rootDocument, browser, targetSelector) {
async function assertContextMenuDisabled(
rootDocument,
browser,
targetSelector
) {
const contextMenu = rootDocument.getElementById("contentAreaContextMenu");
let isPopupShown = false;
const listener = () => {
isPopupShown = true;
};
contextMenu.addEventListener("popupshown", listener);
BrowserTestUtils.synthesizeMouseAtCenter(targetSelector,
{ type: "contextmenu" }, browser);
BrowserTestUtils.synthesizeMouseAtCenter(
targetSelector,
{ type: "contextmenu" },
browser
);
await wait(1000);
ok(!isPopupShown, `Context menu should not be shown`);
contextMenu.removeEventListener("popupshown", listener);
@ -57,14 +79,23 @@ async function assertContextMenuDisabled(rootDocument, browser, targetSelector)
async function assertContextMenuEnabled(rootDocument, browser, targetSelector) {
// Show content context menu.
const contextMenu = rootDocument.getElementById("contentAreaContextMenu");
const popupShownPromise = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
BrowserTestUtils.synthesizeMouseAtCenter(targetSelector,
{ type: "contextmenu" }, browser);
const popupShownPromise = BrowserTestUtils.waitForEvent(
contextMenu,
"popupshown"
);
BrowserTestUtils.synthesizeMouseAtCenter(
targetSelector,
{ type: "contextmenu" },
browser
);
await popupShownPromise;
ok(true, `Context menu should be shown`);
// Hide content context menu.
const popupHiddenPromise = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
const popupHiddenPromise = BrowserTestUtils.waitForEvent(
contextMenu,
"popuphidden"
);
contextMenu.hidePopup();
await popupHiddenPromise;
}

20
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_contextmenu_markupview.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test context menu of markup view on about:devtools-toolbox page.
@ -15,8 +18,11 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
info("Select inspector tool");
const toolbox = getToolbox(devtoolsWindow);
@ -24,9 +30,11 @@ add_task(async function() {
info("Show context menu of markup view");
const markupDocument = toolbox.getPanel("inspector").markup.doc;
EventUtils.synthesizeMouseAtCenter(markupDocument.body,
{ type: "contextmenu" },
markupDocument.ownerGlobal);
EventUtils.synthesizeMouseAtCenter(
markupDocument.body,
{ type: "contextmenu" },
markupDocument.ownerGlobal
);
info("Check whether proper context menu of markup view will be shown");
await waitUntil(() => toolbox.topDoc.querySelector("#node-menu-edithtml"));

67
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_focus.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test whether the focus transfers to a tab which is already inspected .
@ -13,39 +16,56 @@ add_task(async function() {
info("Force all debug target panes to be expanded");
prepareCollapsibilitiesTest();
info("Select 'performance' panel as the initial tool since the tool does not listen " +
"any changes of the document without user action");
info(
"Select 'performance' panel as the initial tool since the tool does not listen " +
"any changes of the document without user action"
);
await pushPref("devtools.toolbox.selectedTool", "performance");
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const inspectionTarget = "about:debugging";
info(`Open ${ inspectionTarget } as inspection target`);
info(`Open ${inspectionTarget} as inspection target`);
await waitUntil(() => findDebugTargetByText(inspectionTarget, document));
info(`Inspect ${ inspectionTarget } page in about:devtools-toolbox`);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, inspectionTarget);
info(`Inspect ${inspectionTarget} page in about:devtools-toolbox`);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window,
inspectionTarget
);
info("Check the tab state after clicking inspect button " +
"when another tab was selected");
info(
"Check the tab state after clicking inspect button " +
"when another tab was selected"
);
gBrowser.selectedTab = tab;
clickInspectButton(inspectionTarget, document);
const devtoolsURL = devtoolsWindow.location.href;
assertDevtoolsToolboxTabState(devtoolsURL);
info("Check the tab state after clicking inspect button " +
"when the toolbox tab is in another window");
info(
"Check the tab state after clicking inspect button " +
"when the toolbox tab is in another window"
);
const newNavigator = gBrowser.replaceTabWithWindow(devtoolsTab);
await waitUntil(() =>
newNavigator.gBrowser &&
newNavigator.gBrowser.selectedTab.linkedBrowser
.contentWindow.location.href === devtoolsURL);
info("Create a tab in the window and select the tab " +
"so that the about:devtools-toolbox tab loses focus");
newNavigator.gBrowser.selectedTab = newNavigator.gBrowser.addTab("about:blank", {
triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
});
await waitUntil(
() =>
newNavigator.gBrowser &&
newNavigator.gBrowser.selectedTab.linkedBrowser.contentWindow.location
.href === devtoolsURL
);
info(
"Create a tab in the window and select the tab " +
"so that the about:devtools-toolbox tab loses focus"
);
newNavigator.gBrowser.selectedTab = newNavigator.gBrowser.addTab(
"about:blank",
{
triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
}
);
clickInspectButton(inspectionTarget, document);
assertDevtoolsToolboxTabState(devtoolsURL);
@ -71,14 +91,17 @@ function assertDevtoolsToolboxTabState(devtoolsURL) {
for (const navigator of Services.wm.getEnumerator("navigator:browser")) {
for (const browser of navigator.gBrowser.browsers) {
if (browser.contentWindow && browser.contentWindow.location.href === devtoolsURL) {
if (
browser.contentWindow &&
browser.contentWindow.location.href === devtoolsURL
) {
const tab = navigator.gBrowser.getTabForBrowser(browser);
existingTabs.push(tab);
}
}
}
is(existingTabs.length, 1, `Only one tab is opened for ${ devtoolsURL }`);
is(existingTabs.length, 1, `Only one tab is opened for ${devtoolsURL}`);
const tab = existingTabs[0];
const navigator = tab.ownerGlobal;
is(navigator.gBrowser.selectedTab, tab, "The tab is selected");

27
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_menubar.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test the status of menu items when open about:devtools-toolbox.
@ -15,8 +18,11 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
info("Check whether the menu items are disabled");
const rootDocument = devtoolsTab.ownerDocument;
@ -48,10 +54,14 @@ async function assertMenusItems(rootDocument, shouldBeEnabled) {
const menuItem = rootDocument.getElementById("menu_devToolbox");
await waitUntil(() => menuItem.hidden === !shouldBeEnabled);
info("Check that the state of the Toggle Tools menu-item depends on the page");
info(
"Check that the state of the Toggle Tools menu-item depends on the page"
);
assertMenuItem(rootDocument, "menu_devToolbox", shouldBeEnabled);
info("Check that the tools menu-items are always enabled regardless of the page");
info(
"Check that the tools menu-items are always enabled regardless of the page"
);
for (const toolDefinition of gDevTools.getToolDefinitionArray()) {
if (!toolDefinition.inMenu) {
continue;
@ -63,6 +73,9 @@ async function assertMenusItems(rootDocument, shouldBeEnabled) {
function assertMenuItem(rootDocument, menuItemId, shouldBeEnabled) {
const menuItem = rootDocument.getElementById(menuItemId);
is(menuItem.hidden, !shouldBeEnabled,
`"hidden" attribute of menu item(${ menuItemId }) should be correct`);
is(
menuItem.hidden,
!shouldBeEnabled,
`"hidden" attribute of menu item(${menuItemId}) should be correct`
);
}

22
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_performance.js
View file

@ -7,7 +7,10 @@
requestLongerTimeout(2);
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Check that graphs used by the old performance panel are correctly displayed.
@ -21,20 +24,27 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
info("Select performance panel");
const toolbox = getToolbox(devtoolsWindow);
await toolbox.selectTool("performance");
// Retrieve shared helpers for the old performance panel.
const { startRecording, stopRecording } =
require("devtools/client/performance/test/helpers/actions");
const {
startRecording,
stopRecording,
} = require("devtools/client/performance/test/helpers/actions");
const performancePanel = toolbox.getCurrentPanel();
await startRecording(performancePanel);
const { idleWait } = require("devtools/client/performance/test/helpers/wait-utils");
const {
idleWait,
} = require("devtools/client/performance/test/helpers/wait-utils");
await idleWait(100);
info("Stop recording");

18
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_reload.js
View file

@ -7,7 +7,10 @@
requestLongerTimeout(5);
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
const TOOLS = [
"inspector",
@ -36,8 +39,11 @@ add_task(async function() {
async function testReloadAboutDevToolsToolbox(toolId) {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsBrowser, devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const {
devtoolsBrowser,
devtoolsTab,
devtoolsWindow,
} = await openAboutDevtoolsToolbox(document, tab, window);
info(`Select tool: ${toolId}`);
const toolbox = getToolbox(devtoolsWindow);
@ -49,8 +55,10 @@ async function testReloadAboutDevToolsToolbox(toolId) {
ok(true, "Toolbox is re-created again");
info("Check whether about:devtools-toolbox page displays correctly");
ok(devtoolsBrowser.contentDocument.querySelector(".debug-target-info"),
"about:devtools-toolbox page displays correctly");
ok(
devtoolsBrowser.contentDocument.querySelector(".debug-target-info"),
"about:devtools-toolbox page displays correctly"
);
await closeAboutDevtoolsToolbox(document, devtoolsTab, window);
await removeTab(tab);

53
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_shortcuts.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test shortcut keys on about:devtools-toolbox page.
@ -15,8 +18,11 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsBrowser, devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const {
devtoolsBrowser,
devtoolsTab,
devtoolsWindow,
} = await openAboutDevtoolsToolbox(document, tab, window);
info("Check whether the shortcut keys which opens devtools is disabled");
await assertShortcutKeys(devtoolsBrowser, false);
@ -25,13 +31,19 @@ add_task(async function() {
const toolbox = getToolbox(devtoolsWindow);
await toolbox.selectTool("inspector");
info("Use the Webconsole keyboard shortcut and wait for the panel to be selected");
info(
"Use the Webconsole keyboard shortcut and wait for the panel to be selected"
);
const onToolReady = toolbox.once("webconsole-ready");
EventUtils.synthesizeKey("K", {
accelKey: true,
shiftKey: !navigator.userAgent.match(/Mac/),
altKey: navigator.userAgent.match(/Mac/),
}, devtoolsWindow);
EventUtils.synthesizeKey(
"K",
{
accelKey: true,
shiftKey: !navigator.userAgent.match(/Mac/),
altKey: navigator.userAgent.match(/Mac/),
},
devtoolsWindow
);
await onToolReady;
info("Force to select about:debugging page");
@ -45,15 +57,20 @@ add_task(async function() {
async function assertShortcutKeys(browser, shouldBeEnabled) {
await assertShortcutKey(browser.contentWindow, "VK_F12", {}, shouldBeEnabled);
await assertShortcutKey(browser.contentWindow, "I", {
accelKey: true,
shiftKey: !navigator.userAgent.match(/Mac/),
altKey: navigator.userAgent.match(/Mac/),
}, shouldBeEnabled);
await assertShortcutKey(
browser.contentWindow,
"I",
{
accelKey: true,
shiftKey: !navigator.userAgent.match(/Mac/),
altKey: navigator.userAgent.match(/Mac/),
},
shouldBeEnabled
);
}
async function assertShortcutKey(win, key, modifiers, shouldBeEnabled) {
info(`Assert shortcut key [${ key }]`);
info(`Assert shortcut key [${key}]`);
if (shouldBeEnabled) {
await assertShortcutKeyEnabled(win, key, modifiers);
@ -71,7 +88,7 @@ async function assertShortcutKeyDisabled(win, key, modifiers) {
EventUtils.synthesizeKey(key, modifiers, win);
await wait(1000);
ok(!isReadyCalled, `Devtools should not be opened by ${ key }`);
ok(!isReadyCalled, `Devtools should not be opened by ${key}`);
gDevTools.off("toolbox-ready", toolboxListener);
}
@ -81,11 +98,11 @@ async function assertShortcutKeyEnabled(win, key, modifiers) {
const onToolboxReady = gDevTools.once("toolbox-ready");
EventUtils.synthesizeKey(key, modifiers, win);
await onToolboxReady;
ok(true, `Devtools should be opened by ${ key }`);
ok(true, `Devtools should be opened by ${key}`);
// Close devtools
const onToolboxDestroyed = gDevTools.once("toolbox-destroyed");
EventUtils.synthesizeKey(key, modifiers, win);
await onToolboxDestroyed;
ok(true, `Devtopls should be closed by ${ key }`);
ok(true, `Devtopls should be closed by ${key}`);
}

12
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_splitconsole_key.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test that the split console key shortcut works on about:devtools-toolbox.
@ -15,8 +18,11 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsTab, devtoolsWindow } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
// Select any tool that is not the Webconsole, since we will assert the split-console.
info("Select inspector tool");

21
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_target_destroyed.js
View file

@ -12,16 +12,25 @@ add_task(async function() {
// go to This Firefox and inspect the new tab
info("Inspecting a new tab in This Firefox");
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsDocument, devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window, "about:home");
const targetInfoHeader = devtoolsDocument.querySelector(".qa-debug-target-info");
ok(targetInfoHeader.textContent.includes("about:home"),
"about:devtools-toolbox is open for the target");
const {
devtoolsDocument,
devtoolsTab,
devtoolsWindow,
} = await openAboutDevtoolsToolbox(document, tab, window, "about:home");
const targetInfoHeader = devtoolsDocument.querySelector(
".qa-debug-target-info"
);
ok(
targetInfoHeader.textContent.includes("about:home"),
"about:devtools-toolbox is open for the target"
);
// close the inspected tab and check that error page is shown
info("removing the inspected tab");
await removeTab(targetTab);
await waitUntil(() => devtoolsWindow.document.querySelector(".qa-error-page"));
await waitUntil(() =>
devtoolsWindow.document.querySelector(".qa-error-page")
);
info("closing the toolbox");
await removeTab(devtoolsTab);

66
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_tooltip_markupview.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Test tooltip of markup view on about:devtools-toolbox page.
@ -18,8 +21,11 @@ add_task(async function() {
const { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
const { devtoolsDocument, devtoolsTab, devtoolsWindow } =
await openAboutDevtoolsToolbox(document, tab, window);
const {
devtoolsDocument,
devtoolsTab,
devtoolsWindow,
} = await openAboutDevtoolsToolbox(document, tab, window);
info("Select inspector tool");
const toolbox = getToolbox(devtoolsWindow);
@ -27,37 +33,67 @@ add_task(async function() {
const inspector = toolbox.getPanel("inspector");
const markupDocument = inspector.markup.doc;
const eventBadge = markupDocument.querySelector(".inspector-badge.interactive");
const eventBadge = markupDocument.querySelector(
".inspector-badge.interactive"
);
info("Check tooltip visibility after clicking on an element in the markup view");
info(
"Check tooltip visibility after clicking on an element in the markup view"
);
await checkTooltipVisibility(inspector, eventBadge, markupDocument.body);
info("Check tooltip visibility after clicking on an element in the DevTools document");
info(
"Check tooltip visibility after clicking on an element in the DevTools document"
);
await checkTooltipVisibility(
inspector, eventBadge, devtoolsDocument.querySelector(".debug-target-info"));
inspector,
eventBadge,
devtoolsDocument.querySelector(".debug-target-info")
);
info("Check tooltip visibility after clicking on an element in the root document");
info(
"Check tooltip visibility after clicking on an element in the root document"
);
const rootDocument = devtoolsWindow.windowRoot.ownerGlobal.document;
await checkTooltipVisibility(
inspector, eventBadge, rootDocument.querySelector("#titlebar"));
inspector,
eventBadge,
rootDocument.querySelector("#titlebar")
);
await closeAboutDevtoolsToolbox(document, devtoolsTab, window);
await removeTab(tab);
});
async function checkTooltipVisibility(inspector, elementForShowing, elementForHiding) {
async function checkTooltipVisibility(
inspector,
elementForShowing,
elementForHiding
) {
info("Show event tooltip");
elementForShowing.click();
const tooltip = inspector.markup.eventDetailsTooltip;
await tooltip.once("shown");
is(tooltip.container.classList.contains("tooltip-visible"), true,
"The tooltip should be shown");
is(
tooltip.container.classList.contains("tooltip-visible"),
true,
"The tooltip should be shown"
);
info("Hide event tooltip");
EventUtils.synthesizeMouse(elementForHiding, 1, 1, {}, elementForHiding.ownerGlobal);
EventUtils.synthesizeMouse(
elementForHiding,
1,
1,
{},
elementForHiding.ownerGlobal
);
await tooltip.once("hidden");
is(tooltip.container.classList.contains("tooltip-visible"), false,
"Tooltip should be hidden");
is(
tooltip.container.classList.contains("tooltip-visible"),
false,
"Tooltip should be hidden"
);
if (inspector._updateProgress) {
info("Need to wait for the inspector to update");

48
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_fenix_runtime_display.js
View file

@ -10,7 +10,8 @@ const ADB_RUNTIME_NAME = "Firefox Preview";
const SERVER_VERSION = "v7.3.31";
const ADB_VERSION = "v1.3.37";
const FENIX_RELEASE_ICON_SRC = "chrome://devtools/skin/images/aboutdebugging-fenix.svg";
const FENIX_RELEASE_ICON_SRC =
"chrome://devtools/skin/images/aboutdebugging-fenix.svg";
const FENIX_NIGHTLY_ICON_SRC =
"chrome://devtools/skin/images/aboutdebugging-fenix-nightly.svg";
@ -42,15 +43,23 @@ add_task(async function() {
const runtimeInfoText = runtimeInfo.textContent;
ok(runtimeInfoText.includes(ADB_RUNTIME_NAME), "Name is the ADB name");
ok(!runtimeInfoText.includes(SERVER_RUNTIME_NAME),
"Name does not include the server name");
ok(
!runtimeInfoText.includes(SERVER_RUNTIME_NAME),
"Name does not include the server name"
);
ok(runtimeInfoText.includes(ADB_VERSION), "Version contains the ADB version");
ok(!runtimeInfoText.includes(SERVER_VERSION),
"Version does not contain the server version");
ok(
!runtimeInfoText.includes(SERVER_VERSION),
"Version does not contain the server version"
);
const runtimeIcon = document.querySelector(".qa-runtime-icon");
is(runtimeIcon.src, FENIX_RELEASE_ICON_SRC, "The runtime icon is the Fenix icon");
is(
runtimeIcon.src,
FENIX_RELEASE_ICON_SRC,
"The runtime icon is the Fenix icon"
);
info("Remove USB runtime");
mocks.removeUSBRuntime(RUNTIME_ID);
@ -98,21 +107,33 @@ add_task(async function() {
await connectToRuntime(DEVICE_NAME, document);
await selectRuntime(DEVICE_NAME, ADB_RUNTIME_NAME, document);
info("Wait for requests to finish the USB runtime is backed by a real local client");
info(
"Wait for requests to finish the USB runtime is backed by a real local client"
);
await onRequestSuccess;
info("Wait for the about:debugging target to be available");
await waitUntil(() => findDebugTargetByText("about:debugging", document));
const { devtoolsDocument, devtoolsTab } =
await openAboutDevtoolsToolbox(document, tab, window);
const { devtoolsDocument, devtoolsTab } = await openAboutDevtoolsToolbox(
document,
tab,
window
);
const runtimeInfo = devtoolsDocument.querySelector(".qa-runtime-info");
const runtimeInfoText = runtimeInfo.textContent;
ok(runtimeInfoText.includes(ADB_RUNTIME_NAME), "Name is the ADB runtime name");
ok(
runtimeInfoText.includes(ADB_RUNTIME_NAME),
"Name is the ADB runtime name"
);
ok(runtimeInfoText.includes(ADB_VERSION), "Version is the ADB version");
const runtimeIcon = devtoolsDocument.querySelector(".qa-runtime-icon");
is(runtimeIcon.src, FENIX_NIGHTLY_ICON_SRC, "The runtime icon is the Fenix icon");
is(
runtimeIcon.src,
FENIX_NIGHTLY_ICON_SRC,
"The runtime icon is the Fenix icon"
);
info("Wait for all pending requests to settle on the DebuggerClient");
await clientWrapper.client.waitForRequestsToSettle();
@ -132,8 +153,9 @@ async function createLocalClientWrapper() {
info("Create a local DebuggerClient");
const { DebuggerServer } = require("devtools/server/main");
const { DebuggerClient } = require("devtools/shared/client/debugger-client");
const { ClientWrapper } =
require("devtools/client/aboutdebugging-new/src/modules/client-wrapper");
const {
ClientWrapper,
} = require("devtools/client/aboutdebugging-new/src/modules/client-wrapper");
DebuggerServer.init();
DebuggerServer.registerAllActors();

48
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_hidden_addons.js
View file

@ -6,12 +6,24 @@
// Test that system and hidden addons are only displayed when the showSystemAddons
// preferences is true.
const SYSTEM_ADDON =
createAddonData({ id: "system", name: "System Addon", isSystem: true, hidden: true });
const HIDDEN_ADDON =
createAddonData({ id: "hidden", name: "Hidden Addon", isSystem: false, hidden: true });
const NORMAL_ADDON =
createAddonData({ id: "normal", name: "Normal Addon", isSystem: false, hidden: false });
const SYSTEM_ADDON = createAddonData({
id: "system",
name: "System Addon",
isSystem: true,
hidden: true,
});
const HIDDEN_ADDON = createAddonData({
id: "hidden",
name: "Hidden Addon",
isSystem: false,
hidden: true,
});
const NORMAL_ADDON = createAddonData({
id: "normal",
name: "Normal Addon",
isSystem: false,
hidden: false,
});
add_task(async function testShowSystemAddonsTrue() {
info("Test with showHiddenAddons set to true");
@ -23,7 +35,11 @@ add_task(async function testShowSystemAddonsTrue() {
async function testAddonsDisplay(showHidden) {
const thisFirefoxClient = setupThisFirefoxMock();
thisFirefoxClient.listAddons = () => ([SYSTEM_ADDON, HIDDEN_ADDON, NORMAL_ADDON]);
thisFirefoxClient.listAddons = () => [
SYSTEM_ADDON,
HIDDEN_ADDON,
NORMAL_ADDON,
];
info("Set showHiddenAddons to " + showHidden);
await pushPref("devtools.aboutdebugging.showHiddenAddons", showHidden);
@ -34,10 +50,16 @@ async function testAddonsDisplay(showHidden) {
const hasSystemAddon = !!findDebugTargetByText("System Addon", document);
const hasHiddenAddon = !!findDebugTargetByText("Hidden Addon", document);
const hasInstalledAddon = !!findDebugTargetByText("Normal Addon", document);
is(hasSystemAddon, showHidden,
"System addon display is correct when showHiddenAddons is " + showHidden);
is(hasHiddenAddon, showHidden,
"Hidden addon display is correct when showHiddenAddons is " + showHidden);
is(
hasSystemAddon,
showHidden,
"System addon display is correct when showHiddenAddons is " + showHidden
);
is(
hasHiddenAddon,
showHidden,
"Hidden addon display is correct when showHiddenAddons is " + showHidden
);
ok(hasInstalledAddon, "Installed addon is always displayed");
await removeTab(tab);
@ -49,7 +71,9 @@ function setupThisFirefoxMock() {
const runtimeClientFactoryMock = createRuntimeClientFactoryMock();
const thisFirefoxClient = createThisFirefoxClientMock();
runtimeClientFactoryMock.createClientForRuntime = runtime => {
const { RUNTIMES } = require("devtools/client/aboutdebugging-new/src/constants");
const {
RUNTIMES,
} = require("devtools/client/aboutdebugging-new/src/constants");
if (runtime.id === RUNTIMES.THIS_FIREFOX) {
return thisFirefoxClient;
}

30
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
View file

@ -28,7 +28,9 @@ add_task(async function() {
});
async function testCloseMessageWithIcon(warningMessage, doc) {
const closeIcon = warningMessage.querySelector(".qa-message-button-close-icon");
const closeIcon = warningMessage.querySelector(
".qa-message-button-close-icon"
);
ok(!!closeIcon, "The warning message has a close icon");
info("Closing the message and waiting for it to disappear");
@ -39,7 +41,9 @@ async function testCloseMessageWithIcon(warningMessage, doc) {
}
async function testCloseMessageWithButton(warningMessage, doc) {
const closeButton = warningMessage.querySelector(".qa-message-button-close-button");
const closeButton = warningMessage.querySelector(
".qa-message-button-close-button"
);
ok(!!closeButton, "The warning message has a close button");
info("Click on the button and wait for the message to disappear");
@ -50,21 +54,27 @@ async function testCloseMessageWithButton(warningMessage, doc) {
}
async function installExtensionWithWarning(doc) {
await installTemporaryExtensionFromXPI({
id: EXTENSION_ID,
name: EXTENSION_NAME,
extraProperties: {
// This property is not expected in the manifest and should trigger a warning!
"wrongProperty": {},
await installTemporaryExtensionFromXPI(
{
id: EXTENSION_ID,
name: EXTENSION_NAME,
extraProperties: {
// This property is not expected in the manifest and should trigger a warning!
wrongProperty: {},
},
},
}, doc);
doc
);
info("Wait until a debug target item appears");
await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, doc));
const target = findDebugTargetByText(EXTENSION_NAME, doc);
const warningMessage = target.querySelector(".qa-message");
ok(!!warningMessage, "A warning message is displayed for the installed addon");
ok(
!!warningMessage,
"A warning message is displayed for the installed addon"
);
return warningMessage;
}

44
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
View file

@ -4,7 +4,10 @@
"use strict";
/* import-globals-from helper-collapsibilities.js */
Services.scriptloader.loadSubScript(CHROME_URL_ROOT + "helper-collapsibilities.js", this);
Services.scriptloader.loadSubScript(
CHROME_URL_ROOT + "helper-collapsibilities.js",
this
);
/**
* Check that navigating from This Firefox to Connect and back to This Firefox works and
@ -27,11 +30,18 @@ add_task(async function() {
ok(connectSidebarItem, "Found the Connect sidebar item");
const thisFirefoxString = getThisFirefoxString(window);
const thisFirefoxSidebarItem = findSidebarItemByText(thisFirefoxString, document);
const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".qa-sidebar-link");
const thisFirefoxSidebarItem = findSidebarItemByText(
thisFirefoxString,
document
);
const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(
".qa-sidebar-link"
);
ok(thisFirefoxSidebarItem, "Found the ThisFirefox sidebar item");
ok(isSidebarItemSelected(thisFirefoxSidebarItem),
"ThisFirefox sidebar item is selected by default");
ok(
isSidebarItemSelected(thisFirefoxSidebarItem),
"ThisFirefox sidebar item is selected by default"
);
info("Open a new background tab TAB1");
const backgroundTab1 = await addTab(TAB_URL_1, { background: true });
@ -48,7 +58,10 @@ add_task(async function() {
// we need to wait here because the sidebar isn't updated after mounting the page
info("Wait until Connect sidebar item is selected");
await waitUntil(() => isSidebarItemSelected(connectSidebarItem));
ok(!document.querySelector(".qa-runtime-page"), "Runtime page no longer rendered");
ok(
!document.querySelector(".qa-runtime-page"),
"Runtime page no longer rendered"
);
info("Open a new tab which should be listed when we go back to This Firefox");
const backgroundTab2 = await addTab(TAB_URL_2, { background: true });
@ -62,9 +75,14 @@ add_task(async function() {
info("Wait until ThisFirefox page is displayed");
await waitUntil(() => document.querySelector(".qa-runtime-page"));
ok(isSidebarItemSelected(thisFirefoxSidebarItem),
"ThisFirefox sidebar item is selected again");
ok(!document.querySelector(".qa-connect-page"), "Connect page no longer rendered");
ok(
isSidebarItemSelected(thisFirefoxSidebarItem),
"ThisFirefox sidebar item is selected again"
);
ok(
!document.querySelector(".qa-connect-page"),
"Connect page no longer rendered"
);
info("TAB2 should already be displayed in the debug targets");
await waitUntil(() => findDebugTargetByText("TAB2", document));
@ -72,13 +90,17 @@ add_task(async function() {
info("Remove first background tab");
await removeTab(backgroundTab1);
info("Check TAB1 disappears, meaning ThisFirefox client is correctly connected");
info(
"Check TAB1 disappears, meaning ThisFirefox client is correctly connected"
);
await waitUntil(() => !findDebugTargetByText("TAB1", document));
info("Remove second background tab");
await removeTab(backgroundTab2);
info("Check TAB2 disappears, meaning ThisFirefox client is correctly connected");
info(
"Check TAB2 disappears, meaning ThisFirefox client is correctly connected"
);
await waitUntil(() => !findDebugTargetByText("TAB2", document));
await waitForRequestsToSettle(AboutDebugging.store);

17
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_persist_connection.js
View file

@ -41,8 +41,10 @@ add_task(async function() {
});
});
async function testRemoteClientPersistConnection(mocks,
{ client, id, runtimeName, sidebarName, type }) {
async function testRemoteClientPersistConnection(
mocks,
{ client, id, runtimeName, sidebarName, type }
) {
info("Open about:debugging and connect to the test runtime");
let { document, tab, window } = await openAboutDebugging();
await selectThisFirefoxPage(document, window.AboutDebugging.store);
@ -70,13 +72,18 @@ async function testRemoteClientPersistConnection(mocks,
info("Remove the runtime from the list of remote runtimes");
mocks.removeRuntime(id);
info("Emit 'closed' on the client and wait for the sidebar item to disappear");
info(
"Emit 'closed' on the client and wait for the sidebar item to disappear"
);
client._eventEmitter.emit("closed");
if (type === "usb") {
await waitUntilUsbDeviceIsUnplugged(sidebarName, document);
} else {
await waitUntil(() => !findSidebarItemByText(sidebarName, document) &&
!findSidebarItemByText(runtimeName, document));
await waitUntil(
() =>
!findSidebarItemByText(sidebarName, document) &&
!findSidebarItemByText(runtimeName, document)
);
}
info("Remove the tab");

Some files were not shown because too many files have changed in this diff Show more