From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../client/aboutdebugging/src/components/App.css | 71 +++++ .../client/aboutdebugging/src/components/App.js | 213 ++++++++++++++ .../src/components/CompatibilityWarning.js | 110 +++++++ .../src/components/ConnectionPromptSetting.js | 55 ++++ .../src/components/ProfilerDialog.css | 63 +++++ .../src/components/ProfilerDialog.js | 168 +++++++++++ .../src/components/RuntimeActions.css | 9 + .../src/components/RuntimeActions.js | 82 ++++++ .../aboutdebugging/src/components/RuntimeInfo.css | 42 +++ .../aboutdebugging/src/components/RuntimeInfo.js | 89 ++++++ .../aboutdebugging/src/components/RuntimePage.js | 306 ++++++++++++++++++++ .../src/components/ServiceWorkersWarning.js | 52 ++++ .../src/components/connect/ConnectPage.css | 50 ++++ .../src/components/connect/ConnectPage.js | 315 +++++++++++++++++++++ .../src/components/connect/ConnectSection.css | 50 ++++ .../src/components/connect/ConnectSection.js | 69 +++++ .../src/components/connect/ConnectSteps.css | 13 + .../src/components/connect/ConnectSteps.js | 51 ++++ .../components/connect/NetworkLocationsForm.css | 23 ++ .../src/components/connect/NetworkLocationsForm.js | 148 ++++++++++ .../components/connect/NetworkLocationsList.css | 20 ++ .../src/components/connect/NetworkLocationsList.js | 67 +++++ .../src/components/connect/moz.build | 11 + .../src/components/debugtarget/DebugTargetItem.css | 97 +++++++ .../src/components/debugtarget/DebugTargetItem.js | 91 ++++++ .../src/components/debugtarget/DebugTargetList.css | 7 + .../src/components/debugtarget/DebugTargetList.js | 80 ++++++ .../src/components/debugtarget/DebugTargetPane.css | 43 +++ .../src/components/debugtarget/DebugTargetPane.js | 147 ++++++++++ .../src/components/debugtarget/ExtensionDetail.css | 27 ++ .../src/components/debugtarget/ExtensionDetail.js | 243 ++++++++++++++++ .../src/components/debugtarget/FieldPair.css | 29 ++ .../src/components/debugtarget/FieldPair.js | 49 ++++ .../src/components/debugtarget/InspectAction.js | 58 ++++ .../src/components/debugtarget/ProcessDetail.js | 32 +++ .../components/debugtarget/ServiceWorkerAction.css | 26 ++ .../components/debugtarget/ServiceWorkerAction.js | 124 ++++++++ .../debugtarget/ServiceWorkerAdditionalActions.js | 176 ++++++++++++ .../src/components/debugtarget/TabAction.js | 52 ++++ .../src/components/debugtarget/TabDetail.js | 34 +++ .../TemporaryExtensionAdditionalActions.js | 182 ++++++++++++ .../debugtarget/TemporaryExtensionDetail.js | 67 +++++ .../TemporaryExtensionInstallSection.css | 8 + .../TemporaryExtensionInstallSection.js | 101 +++++++ .../debugtarget/TemporaryExtensionInstaller.js | 52 ++++ .../src/components/debugtarget/WorkerDetail.js | 120 ++++++++ .../src/components/debugtarget/moz.build | 22 ++ .../client/aboutdebugging/src/components/moz.build | 21 ++ .../src/components/shared/DetailsLog.js | 64 +++++ .../src/components/shared/IconLabel.css | 27 ++ .../src/components/shared/IconLabel.js | 48 ++++ .../src/components/shared/Message.css | 79 ++++++ .../src/components/shared/Message.js | 109 +++++++ .../aboutdebugging/src/components/shared/moz.build | 9 + .../src/components/sidebar/RefreshDevicesButton.js | 46 +++ .../src/components/sidebar/Sidebar.css | 43 +++ .../src/components/sidebar/Sidebar.js | 259 +++++++++++++++++ .../src/components/sidebar/SidebarFixedItem.css | 29 ++ .../src/components/sidebar/SidebarFixedItem.js | 60 ++++ .../src/components/sidebar/SidebarItem.css | 71 +++++ .../src/components/sidebar/SidebarItem.js | 81 ++++++ .../src/components/sidebar/SidebarRuntimeItem.css | 41 +++ .../src/components/sidebar/SidebarRuntimeItem.js | 216 ++++++++++++++ .../src/components/sidebar/moz.build | 11 + 64 files changed, 5158 insertions(+) create mode 100644 devtools/client/aboutdebugging/src/components/App.css create mode 100644 devtools/client/aboutdebugging/src/components/App.js create mode 100644 devtools/client/aboutdebugging/src/components/CompatibilityWarning.js create mode 100644 devtools/client/aboutdebugging/src/components/ConnectionPromptSetting.js create mode 100644 devtools/client/aboutdebugging/src/components/ProfilerDialog.css create mode 100644 devtools/client/aboutdebugging/src/components/ProfilerDialog.js create mode 100644 devtools/client/aboutdebugging/src/components/RuntimeActions.css create mode 100644 devtools/client/aboutdebugging/src/components/RuntimeActions.js create mode 100644 devtools/client/aboutdebugging/src/components/RuntimeInfo.css create mode 100644 devtools/client/aboutdebugging/src/components/RuntimeInfo.js create mode 100644 devtools/client/aboutdebugging/src/components/RuntimePage.js create mode 100644 devtools/client/aboutdebugging/src/components/ServiceWorkersWarning.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectPage.css create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectPage.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectSection.css create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectSection.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectSteps.css create mode 100644 devtools/client/aboutdebugging/src/components/connect/ConnectSteps.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.css create mode 100644 devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/NetworkLocationsList.css create mode 100644 devtools/client/aboutdebugging/src/components/connect/NetworkLocationsList.js create mode 100644 devtools/client/aboutdebugging/src/components/connect/moz.build create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetItem.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetList.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetList.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ExtensionDetail.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ExtensionDetail.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/FieldPair.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/InspectAction.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ProcessDetail.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAdditionalActions.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TabAction.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TabDetail.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionAdditionalActions.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionDetail.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionInstallSection.css create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionInstallSection.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionInstaller.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js create mode 100644 devtools/client/aboutdebugging/src/components/debugtarget/moz.build create mode 100644 devtools/client/aboutdebugging/src/components/moz.build create mode 100644 devtools/client/aboutdebugging/src/components/shared/DetailsLog.js create mode 100644 devtools/client/aboutdebugging/src/components/shared/IconLabel.css create mode 100644 devtools/client/aboutdebugging/src/components/shared/IconLabel.js create mode 100644 devtools/client/aboutdebugging/src/components/shared/Message.css create mode 100644 devtools/client/aboutdebugging/src/components/shared/Message.js create mode 100644 devtools/client/aboutdebugging/src/components/shared/moz.build create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/RefreshDevicesButton.js create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/Sidebar.css create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/Sidebar.js create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.css create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarFixedItem.js create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.css create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarItem.js create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.css create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/SidebarRuntimeItem.js create mode 100644 devtools/client/aboutdebugging/src/components/sidebar/moz.build (limited to 'devtools/client/aboutdebugging/src/components') diff --git a/devtools/client/aboutdebugging/src/components/App.css b/devtools/client/aboutdebugging/src/components/App.css new file mode 100644 index 0000000000..5196ce8e2e --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/App.css @@ -0,0 +1,71 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +/* + * The current layout of about:debugging is + * + * +-------------+-------------------------------+ + * | Sidebar | Page (Runtime or Connect) | + * | (240px) | | + * | | | + * +-------------+-------------------------------+ + * + * Some of the values (font sizes, widths, etc.) are the same as + * about:preferences, which uses the shared common.css + */ + +.app { + /* from common */ + --sidebar-width: 280px; + --app-top-padding: 70px; + --app-bottom-padding: 40px; + --app-left-padding: 32px; + --app-right-padding: 32px; + + box-sizing: border-box; + width: 100vw; + height: 100vh; + overflow: hidden; /* we don't want the sidebar to scroll, only the main content */ + + display: grid; + grid-column-gap: 40px; + grid-template-columns: var(--sidebar-width) auto; + + font-size: var(--base-font-size); + font-weight: var(--base-font-weight); + line-height: var(--base-line-height); +} + +.app__sidebar { + padding-block-start: var(--app-top-padding); + padding-block-end: var(--app-bottom-padding); + padding-inline-start: var(--app-left-padding); +} + +.app__content { + /* we want to scroll only the main content, not the sidebar */ + overflow-y: auto; + + /* padding will give space for card shadow to appear and + margin will correct the alignment */ + margin-inline-start: calc(var(--card-shadow-blur-radius) * -1); + padding-inline: var(--card-shadow-blur-radius); + padding-block-start: var(--app-top-padding); +} + +/* Workaround for Gecko clipping the padding-bottom of a scrollable container; + we create a block to act as the bottom padding instead. */ +.app__content::after { + content: ""; + display: block; + height: var(--app-bottom-padding); +} + +.page { + max-width: var(--page-width); + min-width: min-content; + font-size: var(--body-20-font-size); + font-weight: var(--body-20-font-weight); + padding-inline-end: var(--app-right-padding); +} diff --git a/devtools/client/aboutdebugging/src/components/App.js b/devtools/client/aboutdebugging/src/components/App.js new file mode 100644 index 0000000000..7bdf3eb0c5 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/App.js @@ -0,0 +1,213 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Route = createFactory( + require("resource://devtools/client/shared/vendor/react-router-dom.js").Route +); +const Switch = createFactory( + require("resource://devtools/client/shared/vendor/react-router-dom.js").Switch +); +const Redirect = createFactory( + require("resource://devtools/client/shared/vendor/react-router-dom.js") + .Redirect +); + +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); +const { + PAGE_TYPES, + RUNTIMES, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); + +const ConnectPage = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/connect/ConnectPage.js") +); +const RuntimePage = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/RuntimePage.js") +); +const Sidebar = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/sidebar/Sidebar.js") +); + +class App extends PureComponent { + static get propTypes() { + return { + adbAddonStatus: Types.adbAddonStatus, + // The "dispatch" helper is forwarded to the App component via connect. + // From that point, components are responsible for forwarding the dispatch + // property to all components who need to dispatch actions. + dispatch: PropTypes.func.isRequired, + // getString prop is injected by the withLocalization wrapper + getString: PropTypes.func.isRequired, + isAdbReady: PropTypes.bool.isRequired, + isScanningUsb: PropTypes.bool.isRequired, + networkLocations: PropTypes.arrayOf(Types.location).isRequired, + networkRuntimes: PropTypes.arrayOf(Types.runtime).isRequired, + selectedPage: Types.page, + selectedRuntimeId: PropTypes.string, + usbRuntimes: PropTypes.arrayOf(Types.runtime).isRequired, + }; + } + + componentDidUpdate() { + this.updateTitle(); + } + + 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"); + + document.title = pageTitle; + } + + renderConnect() { + const { adbAddonStatus, dispatch, networkLocations } = this.props; + + return ConnectPage({ + adbAddonStatus, + dispatch, + networkLocations, + }); + } + + // The `match` object here is passed automatically by the Route object. + // We are using it to read the route path. + // See react-router docs: + // https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/match.md + renderRuntime({ match }) { + const isRuntimeAvailable = id => { + const runtimes = [ + ...this.props.networkRuntimes, + ...this.props.usbRuntimes, + ]; + const runtime = runtimes.find(x => x.id === id); + return runtime?.runtimeDetails; + }; + + const { dispatch } = this.props; + + let runtimeId = match.params.runtimeId || RUNTIMES.THIS_FIREFOX; + if (match.params.runtimeId !== RUNTIMES.THIS_FIREFOX) { + const rawId = decodeURIComponent(match.params.runtimeId); + if (isRuntimeAvailable(rawId)) { + runtimeId = rawId; + } else { + // Also redirect to "This Firefox" if runtime is not found + return Redirect({ to: `/runtime/${RUNTIMES.THIS_FIREFOX}` }); + } + } + + // we need to pass a key so the component updates when we want to showcase + // a different runtime + return RuntimePage({ dispatch, key: runtimeId, runtimeId }); + } + + renderRoutes() { + return Switch( + {}, + Route({ + path: "/setup", + render: () => this.renderConnect(), + }), + Route({ + path: "/runtime/:runtimeId", + render: routeProps => this.renderRuntime(routeProps), + }), + // default route when there's no match which includes "/" + // TODO: the url does not match "/" means invalid URL, + // in this case maybe we'd like to do something else than a redirect. + // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1509897 + Route({ + render: routeProps => { + const { pathname } = routeProps.location; + // The old about:debugging supported the following routes: + // 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}` }); + } + return Redirect({ to: "/setup" }); + }, + }) + ); + } + + render() { + const { + adbAddonStatus, + dispatch, + isAdbReady, + isScanningUsb, + networkRuntimes, + selectedPage, + selectedRuntimeId, + usbRuntimes, + } = this.props; + + return Localized( + {}, + dom.div( + { className: "app" }, + Sidebar({ + adbAddonStatus, + className: "app__sidebar", + dispatch, + isAdbReady, + isScanningUsb, + networkRuntimes, + selectedPage, + selectedRuntimeId, + usbRuntimes, + }), + dom.main({ className: "app__content" }, this.renderRoutes()) + ) + ); + } +} + +const mapStateToProps = state => { + return { + adbAddonStatus: state.ui.adbAddonStatus, + isAdbReady: state.ui.isAdbReady, + isScanningUsb: state.ui.isScanningUsb, + networkLocations: state.ui.networkLocations, + networkRuntimes: state.runtimes.networkRuntimes, + selectedPage: state.ui.selectedPage, + selectedRuntimeId: state.runtimes.selectedRuntimeId, + usbRuntimes: state.runtimes.usbRuntimes, + }; +}; + +const mapDispatchToProps = dispatch => ({ + dispatch, +}); + +module.exports = FluentReact.withLocalization( + connect(mapStateToProps, mapDispatchToProps)(App) +); diff --git a/devtools/client/aboutdebugging/src/components/CompatibilityWarning.js b/devtools/client/aboutdebugging/src/components/CompatibilityWarning.js new file mode 100644 index 0000000000..42284fa672 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/CompatibilityWarning.js @@ -0,0 +1,110 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Message = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/shared/Message.js") +); + +const { + MESSAGE_LEVEL, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); +const { + COMPATIBILITY_STATUS, +} = require("resource://devtools/client/shared/remote-debugging/version-checker.js"); + +const TROUBLESHOOTING_URL = + "https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/"; +const FENNEC_TROUBLESHOOTING_URL = + "https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#connection-to-firefox-for-android-68"; + +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); + +class CompatibilityWarning extends PureComponent { + static get propTypes() { + return { + compatibilityReport: Types.compatibilityReport.isRequired, + }; + } + + render() { + const { + localID, + localVersion, + minVersion, + runtimeID, + runtimeVersion, + status, + } = this.props.compatibilityReport; + + if (status === COMPATIBILITY_STATUS.COMPATIBLE) { + return null; + } + + let localizationId, statusClassName; + switch (status) { + case COMPATIBILITY_STATUS.TOO_OLD: + statusClassName = "qa-compatibility-warning-too-old"; + localizationId = "about-debugging-browser-version-too-old"; + break; + case COMPATIBILITY_STATUS.TOO_RECENT: + statusClassName = "qa-compatibility-warning-too-recent"; + localizationId = "about-debugging-browser-version-too-recent"; + break; + case COMPATIBILITY_STATUS.TOO_OLD_FENNEC: + statusClassName = "qa-compatibility-warning-too-old-fennec"; + localizationId = "about-debugging-browser-version-too-old-fennec"; + break; + } + + const troubleshootingUrl = + status === COMPATIBILITY_STATUS.TOO_OLD_FENNEC + ? FENNEC_TROUBLESHOOTING_URL + : TROUBLESHOOTING_URL; + + const messageLevel = + status === COMPATIBILITY_STATUS.TOO_OLD_FENNEC + ? MESSAGE_LEVEL.ERROR + : MESSAGE_LEVEL.WARNING; + + return Message( + { + level: messageLevel, + isCloseable: true, + }, + Localized( + { + id: localizationId, + a: dom.a({ + href: troubleshootingUrl, + target: "_blank", + }), + $localID: localID, + $localVersion: localVersion, + $minVersion: minVersion, + $runtimeID: runtimeID, + $runtimeVersion: runtimeVersion, + }, + dom.p( + { + className: `qa-compatibility-warning ${statusClassName}`, + }, + localizationId + ) + ) + ); + } +} + +module.exports = CompatibilityWarning; diff --git a/devtools/client/aboutdebugging/src/components/ConnectionPromptSetting.js b/devtools/client/aboutdebugging/src/components/ConnectionPromptSetting.js new file mode 100644 index 0000000000..d4773bb298 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/ConnectionPromptSetting.js @@ -0,0 +1,55 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); + +class ConnectionPromptSetting extends PureComponent { + static get propTypes() { + return { + className: PropTypes.string, + connectionPromptEnabled: PropTypes.bool.isRequired, + dispatch: PropTypes.func.isRequired, + }; + } + + onToggleClick() { + const { connectionPromptEnabled, dispatch } = this.props; + dispatch(Actions.updateConnectionPromptSetting(!connectionPromptEnabled)); + } + + render() { + const { className, connectionPromptEnabled } = this.props; + + const localizedState = connectionPromptEnabled + ? "about-debugging-connection-prompt-disable-button" + : "about-debugging-connection-prompt-enable-button"; + + return Localized( + { + id: localizedState, + }, + dom.button( + { + className: `${className} default-button qa-connection-prompt-toggle-button`, + onClick: () => this.onToggleClick(), + }, + localizedState + ) + ); + } +} + +module.exports = ConnectionPromptSetting; diff --git a/devtools/client/aboutdebugging/src/components/ProfilerDialog.css b/devtools/client/aboutdebugging/src/components/ProfilerDialog.css new file mode 100644 index 0000000000..d5352bbea2 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/ProfilerDialog.css @@ -0,0 +1,63 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.profiler-dialog__frame { + border: none; + height: 100%; + width: 100%; +} + +/* + * The current layout of the dialog header is + * + * +-----------------------------+---+ + * | dialog title (auto) | X | + * +-----------------------------+---+ + */ +.profiler-dialog__header { + align-items: center; + background-color: var(--popup-header-background-color); + color: var(--popup-header-color); + display: grid; + grid-template-columns: 1fr max-content; + padding: var(--base-unit); +} + +.profiler-dialog__header__title { + margin-inline-start: calc(var(--base-unit) * 2); + + /* Reset

styles */ + font-size: 15px; + font-weight: normal; +} + +.profiler-dialog__inner { + background-color: var(--box-background); + display: grid; + grid-template-rows: max-content auto; + max-height: calc(100% - calc(var(--base-unit) * 25)); /* 100% - 100px */ + position: fixed; +} + +.profiler-dialog__inner--medium { + width: calc(var(--base-unit) * 150); /* 600px */ + height: calc(var(--base-unit) * 150); /* 600px */ +} + +.profiler-dialog__inner--large { + width: calc(var(--base-unit) * 200); /* 800px */ + height: calc(var(--base-unit) * 175); /* 700px */ +} + +.profiler-dialog__mask { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: var(--grey-90-a60); + display: flex; + align-items: center; + justify-content: center; +} diff --git a/devtools/client/aboutdebugging/src/components/ProfilerDialog.js b/devtools/client/aboutdebugging/src/components/ProfilerDialog.js new file mode 100644 index 0000000000..f4bb583464 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/ProfilerDialog.js @@ -0,0 +1,168 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); +const { + PROFILER_PAGE_CONTEXT, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); + +/** + * This component is a modal dialog containing the performance profiler UI. It uses + * the simplified DevTools panel located in devtools/client/performance-new. When + * using a custom preset, and editing the settings, the page context switches + * to about:profiling, which receives the PerfFront of the remote debuggee. + */ +class ProfilerDialog extends PureComponent { + static get propTypes() { + return { + runtimeDetails: Types.runtimeDetails.isRequired, + profilerContext: PropTypes.string.isRequired, + hideProfilerDialog: PropTypes.func.isRequired, + switchProfilerContext: PropTypes.func.isRequired, + }; + } + + hide() { + this.props.hideProfilerDialog(); + } + + setProfilerIframeDirection(frameWindow) { + // Set iframe direction according to the parent document direction. + const { documentElement } = document; + const dir = window.getComputedStyle(documentElement).direction; + frameWindow.document.documentElement.setAttribute("dir", dir); + } + + /** + * The profiler iframe can either be the simplified devtools recording panel, + * or the more detailed about:profiling settings page. + */ + renderProfilerIframe() { + const { + runtimeDetails: { clientWrapper }, + switchProfilerContext, + profilerContext, + } = this.props; + + let src, onLoad; + + switch (profilerContext) { + case PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE: + src = clientWrapper.getPerformancePanelUrl(); + onLoad = e => { + const frameWindow = e.target.contentWindow; + this.setProfilerIframeDirection(frameWindow); + + clientWrapper.loadPerformanceProfiler(frameWindow, () => { + switchProfilerContext(PROFILER_PAGE_CONTEXT.ABOUTPROFILING_REMOTE); + }); + }; + break; + + case PROFILER_PAGE_CONTEXT.ABOUTPROFILING_REMOTE: + src = "about:profiling#remote"; + onLoad = e => { + const frameWindow = e.target.contentWindow; + this.setProfilerIframeDirection(frameWindow); + + clientWrapper.loadAboutProfiling(frameWindow, () => { + switchProfilerContext(PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE); + }); + }; + break; + + default: + throw new Error(`Unhandled profiler context: "${profilerContext}"`); + } + + return dom.iframe({ + key: profilerContext, + className: "profiler-dialog__frame", + src, + onLoad, + }); + } + + render() { + const { profilerContext, switchProfilerContext } = this.props; + const dialogSizeClassName = + profilerContext === PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE + ? "profiler-dialog__inner--medium" + : "profiler-dialog__inner--large"; + + return dom.div( + { + className: "profiler-dialog__mask qa-profiler-dialog-mask", + onClick: () => this.hide(), + }, + dom.article( + { + className: `profiler-dialog__inner ${dialogSizeClassName} qa-profiler-dialog`, + onClick: e => e.stopPropagation(), + }, + dom.header( + { + className: "profiler-dialog__header", + }, + Localized( + { + id: "about-debugging-profiler-dialog-title2", + }, + dom.h1( + { + className: "profiler-dialog__header__title", + }, + "about-debugging-profiler-dialog-title2" + ) + ), + dom.button( + { + className: "ghost-button qa-profiler-dialog-close", + onClick: () => { + if (profilerContext === PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE) { + this.hide(); + } else { + switchProfilerContext(PROFILER_PAGE_CONTEXT.DEVTOOLS_REMOTE); + } + }, + }, + dom.img({ + src: "chrome://devtools/skin/images/close.svg", + }) + ) + ), + this.renderProfilerIframe() + ) + ); + } +} + +const mapStateToProps = state => { + return { + profilerContext: state.ui.profilerContext, + }; +}; + +const mapDispatchToProps = { + hideProfilerDialog: Actions.hideProfilerDialog, + switchProfilerContext: Actions.switchProfilerContext, +}; + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ProfilerDialog); diff --git a/devtools/client/aboutdebugging/src/components/RuntimeActions.css b/devtools/client/aboutdebugging/src/components/RuntimeActions.css new file mode 100644 index 0000000000..6333560d4b --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/RuntimeActions.css @@ -0,0 +1,9 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.runtime-actions__toolbar { + column-gap: var(--base-unit); + display: flex; + justify-content: end; +} diff --git a/devtools/client/aboutdebugging/src/components/RuntimeActions.js b/devtools/client/aboutdebugging/src/components/RuntimeActions.js new file mode 100644 index 0000000000..eefa8b500b --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/RuntimeActions.js @@ -0,0 +1,82 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const ConnectionPromptSetting = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/ConnectionPromptSetting.js") +); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); +const { + RUNTIMES, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); + +class RuntimeActions extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + runtimeDetails: Types.runtimeDetails, + runtimeId: PropTypes.string.isRequired, + }; + } + + onProfilerButtonClick() { + this.props.dispatch(Actions.showProfilerDialog()); + } + + renderConnectionPromptSetting() { + const { dispatch, runtimeDetails, runtimeId } = this.props; + const { connectionPromptEnabled } = runtimeDetails; + // do not show the connection prompt setting in 'This Firefox' + return runtimeId !== RUNTIMES.THIS_FIREFOX + ? 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; + } + + render() { + return dom.div( + { + className: "runtime-actions__toolbar", + }, + this.renderProfileButton(), + this.renderConnectionPromptSetting() + ); + } +} + +module.exports = RuntimeActions; diff --git a/devtools/client/aboutdebugging/src/components/RuntimeInfo.css b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css new file mode 100644 index 0000000000..e6fcd9dd7e --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/RuntimeInfo.css @@ -0,0 +1,42 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + + +/** + * Layout for the runtime info container is: + * + * <- 68px --x--------- 1fr ----------><---- max ----> + * ∧ +---------+------------------------+--------------+ + * 1fr | | Runtime Info | [Action] | + * | | Icon | eg "Firefox (70.0a1)" | | + * x | +------------------------+ | + * max | | Device Name (optional) | | + * ∨ +---------+------------------------+--------------+ + */ +.runtime-info { + align-items: center; + display: grid; + + grid-column-gap: var(--main-heading-icon-gap); + grid-template-areas: + "icon title action" + "icon subtitle ."; + grid-template-columns: var(--main-heading-icon-size) 1fr max-content; + grid-template-rows: 1fr max-content; + + margin-block-end: calc(var(--base-unit) * 5); +} + +.runtime-info__icon { + grid-area: icon; +} +.runtime-info__title { + grid-area: title; +} +.runtime-info__subtitle { + grid-area: subtitle; +} +.runtime-info__action { + grid-area: action; +} diff --git a/devtools/client/aboutdebugging/src/components/RuntimeInfo.js b/devtools/client/aboutdebugging/src/components/RuntimeInfo.js new file mode 100644 index 0000000000..6a8c67dd33 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/RuntimeInfo.js @@ -0,0 +1,89 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const { + RUNTIMES, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); + +/** + * This component displays runtime information. + */ +class RuntimeInfo extends PureComponent { + static get propTypes() { + return { + dispatch: PropTypes.func.isRequired, + icon: PropTypes.string.isRequired, + deviceName: PropTypes.string, + name: PropTypes.string.isRequired, + version: PropTypes.string.isRequired, + runtimeId: PropTypes.string.isRequired, + }; + } + render() { + const { icon, deviceName, name, version, runtimeId, dispatch } = this.props; + + return dom.h1( + { + className: "main-heading runtime-info", + }, + dom.img({ + className: "main-heading__icon runtime-info__icon qa-runtime-icon", + src: icon, + }), + Localized( + { + id: "about-debugging-runtime-name", + $name: name, + $version: version, + }, + dom.label( + { + className: "qa-runtime-name runtime-info__title", + }, + `${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( + { + className: + "default-button runtime-info__action qa-runtime-info__action", + onClick() { + dispatch(Actions.disconnectRuntime(runtimeId, true)); + }, + }, + "Disconnect" + ) + ) + : null + ); + } +} + +module.exports = RuntimeInfo; diff --git a/devtools/client/aboutdebugging/src/components/RuntimePage.js b/devtools/client/aboutdebugging/src/components/RuntimePage.js new file mode 100644 index 0000000000..e2dae9b0cd --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/RuntimePage.js @@ -0,0 +1,306 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + connect, +} = require("resource://devtools/client/shared/vendor/react-redux.js"); +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); +const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const CompatibilityWarning = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/CompatibilityWarning.js") +); +const DebugTargetPane = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/DebugTargetPane.js") +); +const ExtensionDetail = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ExtensionDetail.js") +); +const InspectAction = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/InspectAction.js") +); +const ProfilerDialog = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/ProfilerDialog.js") +); +const RuntimeActions = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/RuntimeActions.js") +); +const RuntimeInfo = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/RuntimeInfo.js") +); +const ServiceWorkerAction = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAction.js") +); +const ServiceWorkerAdditionalActions = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAdditionalActions.js") +); +const ServiceWorkersWarning = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/ServiceWorkersWarning.js") +); +const ProcessDetail = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/ProcessDetail.js") +); +const TabAction = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TabAction.js") +); +const TabDetail = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TabDetail.js") +); +const TemporaryExtensionAdditionalActions = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionAdditionalActions.js") +); +const TemporaryExtensionDetail = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionDetail.js") +); +const TemporaryExtensionInstallSection = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/TemporaryExtensionInstallSection.js") +); +const WorkerDetail = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/debugtarget/WorkerDetail.js") +); + +const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js"); +const { + DEBUG_TARGETS, + DEBUG_TARGET_PANE, + PAGE_TYPES, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); +const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js"); + +const { + getCurrentRuntimeDetails, +} = require("resource://devtools/client/aboutdebugging/src/modules/runtimes-state-helper.js"); +const { + isSupportedDebugTargetPane, + supportsTemporaryExtensionInstaller, +} = require("resource://devtools/client/aboutdebugging/src/modules/debug-target-support.js"); + +class RuntimePage extends PureComponent { + static get propTypes() { + return { + collapsibilities: Types.collapsibilities.isRequired, + dispatch: PropTypes.func.isRequired, + installedExtensions: PropTypes.arrayOf(PropTypes.object).isRequired, + otherWorkers: PropTypes.arrayOf(PropTypes.object).isRequired, + runtimeDetails: Types.runtimeDetails, + runtimeId: PropTypes.string.isRequired, + processes: PropTypes.arrayOf(PropTypes.object).isRequired, + serviceWorkers: PropTypes.arrayOf(PropTypes.object).isRequired, + sharedWorkers: PropTypes.arrayOf(PropTypes.object).isRequired, + showProfilerDialog: PropTypes.bool.isRequired, + tabs: PropTypes.arrayOf(PropTypes.object).isRequired, + temporaryExtensions: PropTypes.arrayOf(PropTypes.object).isRequired, + temporaryInstallError: PropTypes.object, + }; + } + + // TODO: avoid the use of this method + // https://bugzilla.mozilla.org/show_bug.cgi?id=1774507 + UNSAFE_componentWillMount() { + const { dispatch, runtimeId } = this.props; + dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, runtimeId)); + } + + getIconByType(type) { + switch (type) { + case DEBUG_TARGETS.EXTENSION: + return "chrome://devtools/skin/images/debugging-addons.svg"; + case DEBUG_TARGETS.PROCESS: + return "chrome://devtools/skin/images/aboutdebugging-process-icon.svg"; + case DEBUG_TARGETS.TAB: + return "chrome://devtools/skin/images/debugging-tabs.svg"; + case DEBUG_TARGETS.WORKER: + return "chrome://devtools/skin/images/debugging-workers.svg"; + } + + throw new Error(`Unsupported type [${type}]`); + } + + renderDebugTargetPane({ + actionComponent, + additionalActionsComponent, + children, + detailComponent, + icon, + localizationId, + name, + paneKey, + targets, + }) { + const { collapsibilities, dispatch, runtimeDetails } = this.props; + + if (!isSupportedDebugTargetPane(runtimeDetails.info.type, paneKey)) { + return null; + } + + return Localized( + { + id: localizationId, + attrs: { name: true }, + }, + DebugTargetPane( + { + actionComponent, + additionalActionsComponent, + collapsibilityKey: paneKey, + detailComponent, + dispatch, + icon, + isCollapsed: collapsibilities.get(paneKey), + name, + targets, + }, + children + ) + ); + } + + renderTemporaryExtensionInstallSection() { + const runtimeType = this.props.runtimeDetails.info.type; + if ( + !isSupportedDebugTargetPane( + runtimeType, + DEBUG_TARGET_PANE.TEMPORARY_EXTENSION + ) || + !supportsTemporaryExtensionInstaller(runtimeType) + ) { + return null; + } + + const { dispatch, temporaryInstallError } = this.props; + return TemporaryExtensionInstallSection({ + dispatch, + temporaryInstallError, + }); + } + + render() { + const { + dispatch, + installedExtensions, + otherWorkers, + processes, + runtimeDetails, + runtimeId, + serviceWorkers, + sharedWorkers, + showProfilerDialog, + tabs, + temporaryExtensions, + } = this.props; + + if (!runtimeDetails) { + // runtimeInfo can be null when the selectPage action navigates from a runtime A + // to a runtime B (between unwatchRuntime and watchRuntime). + return null; + } + + const { compatibilityReport } = runtimeDetails; + + return dom.article( + { + className: "page qa-runtime-page", + }, + RuntimeInfo({ ...runtimeDetails.info, runtimeId, dispatch }), + RuntimeActions({ dispatch, runtimeId, runtimeDetails }), + runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(), + CompatibilityWarning({ compatibilityReport }), + this.renderDebugTargetPane({ + actionComponent: TabAction, + detailComponent: TabDetail, + icon: this.getIconByType(DEBUG_TARGETS.TAB), + localizationId: "about-debugging-runtime-tabs", + name: "Tabs", + paneKey: DEBUG_TARGET_PANE.TAB, + targets: tabs, + }), + this.renderDebugTargetPane({ + actionComponent: InspectAction, + additionalActionsComponent: TemporaryExtensionAdditionalActions, + children: this.renderTemporaryExtensionInstallSection(), + detailComponent: TemporaryExtensionDetail, + icon: this.getIconByType(DEBUG_TARGETS.EXTENSION), + localizationId: "about-debugging-runtime-temporary-extensions", + name: "Temporary Extensions", + paneKey: DEBUG_TARGET_PANE.TEMPORARY_EXTENSION, + targets: temporaryExtensions, + }), + this.renderDebugTargetPane({ + actionComponent: InspectAction, + detailComponent: ExtensionDetail, + icon: this.getIconByType(DEBUG_TARGETS.EXTENSION), + localizationId: "about-debugging-runtime-extensions", + name: "Extensions", + paneKey: DEBUG_TARGET_PANE.INSTALLED_EXTENSION, + targets: installedExtensions, + }), + this.renderDebugTargetPane({ + actionComponent: ServiceWorkerAction, + additionalActionsComponent: ServiceWorkerAdditionalActions, + detailComponent: WorkerDetail, + icon: this.getIconByType(DEBUG_TARGETS.WORKER), + localizationId: "about-debugging-runtime-service-workers", + name: "Service Workers", + paneKey: DEBUG_TARGET_PANE.SERVICE_WORKER, + targets: serviceWorkers, + }), + this.renderDebugTargetPane({ + actionComponent: InspectAction, + detailComponent: WorkerDetail, + icon: this.getIconByType(DEBUG_TARGETS.WORKER), + localizationId: "about-debugging-runtime-shared-workers", + name: "Shared Workers", + paneKey: DEBUG_TARGET_PANE.SHARED_WORKER, + targets: sharedWorkers, + }), + this.renderDebugTargetPane({ + actionComponent: InspectAction, + detailComponent: WorkerDetail, + icon: this.getIconByType(DEBUG_TARGETS.WORKER), + localizationId: "about-debugging-runtime-other-workers", + name: "Other Workers", + paneKey: DEBUG_TARGET_PANE.OTHER_WORKER, + targets: otherWorkers, + }), + this.renderDebugTargetPane({ + actionComponent: InspectAction, + detailComponent: ProcessDetail, + icon: this.getIconByType(DEBUG_TARGETS.PROCESS), + localizationId: "about-debugging-runtime-processes", + name: "Processes", + paneKey: DEBUG_TARGET_PANE.PROCESSES, + targets: processes, + }), + + showProfilerDialog ? ProfilerDialog({ dispatch, runtimeDetails }) : null + ); + } +} + +const mapStateToProps = state => { + return { + collapsibilities: state.ui.debugTargetCollapsibilities, + installedExtensions: state.debugTargets.installedExtensions, + processes: state.debugTargets.processes, + otherWorkers: state.debugTargets.otherWorkers, + runtimeDetails: getCurrentRuntimeDetails(state.runtimes), + serviceWorkers: state.debugTargets.serviceWorkers, + sharedWorkers: state.debugTargets.sharedWorkers, + showProfilerDialog: state.ui.showProfilerDialog, + tabs: state.debugTargets.tabs, + temporaryExtensions: state.debugTargets.temporaryExtensions, + temporaryInstallError: state.ui.temporaryInstallError, + }; +}; + +module.exports = connect(mapStateToProps)(RuntimePage); diff --git a/devtools/client/aboutdebugging/src/components/ServiceWorkersWarning.js b/devtools/client/aboutdebugging/src/components/ServiceWorkersWarning.js new file mode 100644 index 0000000000..4f9dc93d7f --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/ServiceWorkersWarning.js @@ -0,0 +1,52 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createFactory, + PureComponent, +} = require("resource://devtools/client/shared/vendor/react.js"); +const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js"); + +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); +const Localized = createFactory(FluentReact.Localized); + +const Message = createFactory( + require("resource://devtools/client/aboutdebugging/src/components/shared/Message.js") +); + +const { + MESSAGE_LEVEL, +} = require("resource://devtools/client/aboutdebugging/src/constants.js"); +const DOC_URL = + "https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#service-workers-not-compatible"; + +class ServiceWorkersWarning extends PureComponent { + render() { + return Message( + { + level: MESSAGE_LEVEL.WARNING, + isCloseable: true, + }, + Localized( + { + id: "about-debugging-runtime-service-workers-not-compatible", + a: dom.a({ + href: DOC_URL, + target: "_blank", + }), + }, + dom.p( + { + className: "qa-service-workers-warning", + }, + "about-debugging-runtime-service-workers-not-compatible" + ) + ) + ); + } +} + +module.exports = ServiceWorkersWarning; diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css new file mode 100644 index 0000000000..a693bf4113 --- /dev/null +++ b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.css @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +.connect-page__breather { + margin-block-start: calc(var(--base-unit) * 6); +} + +/* + * +--------+----------------------+ + * | USB | |