Bug 1497447: Show a button which reflects the state of "devtools.debugger.prompt-connection" preference of selected runtime. r=jdescottes,ladybenko
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 23 Oct 2018 13:18:03 +0000
changeset 490897 9cc63b9b3506e7f7d37ecf9ee30ffa2511145a50
parent 490896 3d81c51cff40762dc072c89c81458bd3b548e913
child 490898 9ea7d4eba90f391f32164969ddc2d17b1cb84f40
push id247
push userfmarier@mozilla.com
push dateSat, 27 Oct 2018 01:06:44 +0000
reviewersjdescottes, ladybenko
bugs1497447
milestone65.0a1
Bug 1497447: Show a button which reflects the state of "devtools.debugger.prompt-connection" preference of selected runtime. r=jdescottes,ladybenko Differential Revision: https://phabricator.services.mozilla.com/D9066
devtools/client/aboutdebugging-new/aboutdebugging.css
devtools/client/aboutdebugging-new/src/actions/runtimes.js
devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
devtools/client/aboutdebugging-new/src/components/RuntimePage.css
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
devtools/client/aboutdebugging-new/src/components/moz.build
devtools/client/aboutdebugging-new/src/constants.js
devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
devtools/client/aboutdebugging-new/src/types.js
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
--- a/devtools/client/aboutdebugging-new/aboutdebugging.css
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.css
@@ -8,16 +8,17 @@
 @import "resource://devtools/client/themes/variables.css";
 @import "resource://devtools/client/aboutdebugging-new/src/base.css";
 
 /*
 * Components
 */
 @import "resource://devtools/client/aboutdebugging-new/src/components/App.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css";
+@import "resource://devtools/client/aboutdebugging-new/src/components/RuntimePage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/ConnectSteps.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.css";
 @import "resource://devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.css";
--- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js
+++ b/devtools/client/aboutdebugging-new/src/actions/runtimes.js
@@ -18,16 +18,17 @@ const { isSupportedDebugTarget } = requi
 const {
   CONNECT_RUNTIME_FAILURE,
   CONNECT_RUNTIME_START,
   CONNECT_RUNTIME_SUCCESS,
   DEBUG_TARGETS,
   DISCONNECT_RUNTIME_FAILURE,
   DISCONNECT_RUNTIME_START,
   DISCONNECT_RUNTIME_SUCCESS,
+  RUNTIME_PREFERENCE,
   RUNTIMES,
   UNWATCH_RUNTIME_FAILURE,
   UNWATCH_RUNTIME_START,
   UNWATCH_RUNTIME_SUCCESS,
   USB_RUNTIMES_UPDATED,
   WATCH_RUNTIME_FAILURE,
   WATCH_RUNTIME_START,
   WATCH_RUNTIME_SUCCESS,
@@ -90,17 +91,20 @@ async function getRuntimeInfo(runtime, c
 
 function connectRuntime(id) {
   return async (dispatch, getState) => {
     dispatch({ type: CONNECT_RUNTIME_START });
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
       const { client, transportDetails } = await createClientForRuntime(runtime);
       const info = await getRuntimeInfo(runtime, client);
-      const connection = { client, info, transportDetails };
+      const preferenceFront = await client.mainRoot.getFront("preference");
+      const connectionPromptEnabled =
+        await preferenceFront.getBoolPref(RUNTIME_PREFERENCE.CONNECTION_PROMPT);
+      const connection = { connectionPromptEnabled, client, info, transportDetails };
 
       dispatch({
         type: CONNECT_RUNTIME_SUCCESS,
         runtime: {
           id,
           connection,
           type: runtime.type,
         },
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
@@ -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/. */
+
+"use strict";
+
+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);
+
+class ConnectionPromptSetting extends PureComponent {
+  static get propTypes() {
+    return {
+      connectionPromptEnabled: PropTypes.bool.isRequired,
+    };
+  }
+
+  render() {
+    const { 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: "default-button",
+        },
+        localizedState
+      )
+    );
+  }
+}
+
+module.exports = ConnectionPromptSetting;
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.css
@@ -3,17 +3,16 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
  /* NOTE: refactor these two rules into a more generic component if we ever need
           a main heading with an icon */
 
 .runtime-info {
   align-items: center;
   display: flex;
-  margin-block-end: 40px;
   white-space: nowrap;
 }
 
 .runtime-info__icon {
   height: 64px;
   margin-inline-end: 12px;
   width: 64px;
 }
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.css
@@ -0,0 +1,8 @@
+/* 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/. */
+
+.connection-prompt-setting {
+  margin-block-end: var(--base-distance);
+  text-align: right;
+}
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -7,46 +7,62 @@
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 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 DebugTargetPane = createFactory(require("./debugtarget/DebugTargetPane"));
 const ExtensionDetail = createFactory(require("./debugtarget/ExtensionDetail"));
 const InspectAction = createFactory(require("./debugtarget/InspectAction"));
 const RuntimeInfo = createFactory(require("./RuntimeInfo"));
 const ServiceWorkerAction = createFactory(require("./debugtarget/ServiceWorkerAction"));
 const TabDetail = createFactory(require("./debugtarget/TabDetail"));
 const TemporaryExtensionAction = createFactory(require("./debugtarget/TemporaryExtensionAction"));
 const TemporaryExtensionInstaller =
   createFactory(require("./debugtarget/TemporaryExtensionInstaller"));
 const WorkerDetail = createFactory(require("./debugtarget/WorkerDetail"));
 
 const { DEBUG_TARGET_PANE } = require("../constants");
-const { getCurrentRuntimeInfo } = require("../modules/runtimes-state-helper");
+const {
+  getCurrentConnectionPromptSetting,
+  getCurrentRuntimeInfo,
+} = require("../modules/runtimes-state-helper");
 const { isSupportedDebugTargetPane } = require("../modules/debug-target-support");
 
 class RuntimePage extends PureComponent {
   static get propTypes() {
     return {
       collapsibilities: PropTypes.object.isRequired,
+      connectionPromptEnabled: PropTypes.bool.isRequired,
       dispatch: PropTypes.func.isRequired,
       installedExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
       otherWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       runtimeInfo: PropTypes.object,
       serviceWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       sharedWorkers: PropTypes.arrayOf(PropTypes.object).isRequired,
       tabs: PropTypes.arrayOf(PropTypes.object).isRequired,
       temporaryExtensions: PropTypes.arrayOf(PropTypes.object).isRequired,
     };
   }
 
+  renderConnectionPromptSetting() {
+    const { connectionPromptEnabled } = this.props;
+
+    return dom.div(
+      {
+        className: "connection-prompt-setting",
+      },
+      ConnectionPromptSetting({ connectionPromptEnabled }),
+    );
+  }
+
   renderDebugTargetPane(name, targets, actionComponent,
                         detailComponent, paneKey, localizationId) {
     const { collapsibilities, dispatch, runtimeInfo } = this.props;
 
     if (!isSupportedDebugTargetPane(runtimeInfo.type, paneKey)) {
       return null;
     }
 
@@ -85,16 +101,17 @@ class RuntimePage extends PureComponent 
       return null;
     }
 
     return dom.article(
       {
         className: "page js-runtime-page",
       },
       RuntimeInfo(runtimeInfo),
+      this.renderConnectionPromptSetting(),
       isSupportedDebugTargetPane(runtimeInfo.type, DEBUG_TARGET_PANE.TEMPORARY_EXTENSION)
         ? TemporaryExtensionInstaller({ dispatch })
         : null,
       this.renderDebugTargetPane("Temporary Extensions",
                                  temporaryExtensions,
                                  TemporaryExtensionAction,
                                  ExtensionDetail,
                                  DEBUG_TARGET_PANE.TEMPORARY_EXTENSION,
@@ -130,16 +147,17 @@ class RuntimePage extends PureComponent 
                                  DEBUG_TARGET_PANE.OTHER_WORKER,
                                  "about-debugging-runtime-other-workers"),
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
+    connectionPromptEnabled: getCurrentConnectionPromptSetting(state.runtimes),
     collapsibilities: state.ui.debugTargetCollapsibilities,
     installedExtensions: state.debugTargets.installedExtensions,
     otherWorkers: state.debugTargets.otherWorkers,
     runtimeInfo: getCurrentRuntimeInfo(state.runtimes),
     serviceWorkers: state.debugTargets.serviceWorkers,
     sharedWorkers: state.debugTargets.sharedWorkers,
     tabs: state.debugTargets.tabs,
     temporaryExtensions: state.debugTargets.temporaryExtensions,
--- a/devtools/client/aboutdebugging-new/src/components/moz.build
+++ b/devtools/client/aboutdebugging-new/src/components/moz.build
@@ -6,12 +6,14 @@ DIRS += [
     'connect',
     'debugtarget',
     'sidebar',
 ]
 
 DevToolsModules(
     'App.css',
     'App.js',
+    'ConnectionPromptSetting.js',
     'RuntimeInfo.css',
     'RuntimeInfo.js',
+    'RuntimePage.css',
     'RuntimePage.js',
 )
--- a/devtools/client/aboutdebugging-new/src/constants.js
+++ b/devtools/client/aboutdebugging-new/src/constants.js
@@ -54,16 +54,20 @@ const DEBUG_TARGET_PANE = {
   TEMPORARY_EXTENSION: "temporaryExtension",
 };
 
 const PAGES = {
   THIS_FIREFOX: "this-firefox",
   CONNECT: "connect",
 };
 
+const RUNTIME_PREFERENCE = {
+  CONNECTION_PROMPT: "devtools.debugger.prompt-connection",
+};
+
 const RUNTIMES = {
   NETWORK: "network",
   THIS_FIREFOX: "this-firefox",
   USB: "usb",
 };
 
 const SERVICE_WORKER_FETCH_STATES = {
   LISTENING: "LISTENING",
@@ -82,13 +86,14 @@ const USB_STATES = {
   UPDATING_USB: "UPDATING_USB",
 };
 
 // flatten constants
 module.exports = Object.assign({}, {
   DEBUG_TARGETS,
   DEBUG_TARGET_PANE,
   PAGES,
+  RUNTIME_PREFERENCE,
   RUNTIMES,
   SERVICE_WORKER_FETCH_STATES,
   SERVICE_WORKER_STATUSES,
   USB_STATES,
 }, actionTypes);
--- a/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
+++ b/devtools/client/aboutdebugging-new/src/modules/runtimes-state-helper.js
@@ -17,16 +17,22 @@ function getCurrentClient(runtimesState)
 exports.getCurrentClient = getCurrentClient;
 
 function getCurrentRuntimeInfo(runtimesState) {
   const connection = getCurrentConnection(runtimesState);
   return connection ? connection.info : null;
 }
 exports.getCurrentRuntimeInfo = getCurrentRuntimeInfo;
 
+function getCurrentConnectionPromptSetting(runtimesState) {
+  const connection = getCurrentConnection(runtimesState);
+  return connection ? connection.connectionPromptEnabled : false;
+}
+exports.getCurrentConnectionPromptSetting = getCurrentConnectionPromptSetting;
+
 function findRuntimeById(id, runtimesState) {
   const allRuntimes = [
     ...runtimesState.networkRuntimes,
     ...runtimesState.thisFirefoxRuntimes,
     ...runtimesState.usbRuntimes,
   ];
   return allRuntimes.find(r => r.id === id);
 }
--- a/devtools/client/aboutdebugging-new/src/types.js
+++ b/devtools/client/aboutdebugging-new/src/types.js
@@ -28,16 +28,19 @@ const runtimeTransportDetails = {
   // port number of tcp connection to debugger server
   port: PropTypes.number.isRequired,
 };
 
 const runtimeConnection = {
   // debugger client instance
   client: PropTypes.object.isRequired,
 
+  // reflect devtools.debugger.prompt-connection preference of this runtime
+  connectionPromptEnabled: PropTypes.bool.isRequired,
+
   // runtime information
   info: PropTypes.shape(runtimeInfo).isRequired,
 
   // tcp connection information,
   // unavailable on this-firefox runtime
   transportDetails: PropTypes.shape(runtimeTransportDetails),
 };
 
--- a/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -190,8 +190,16 @@ about-debugging-worker-status-registerin
 # { $version } is version such as "64.0a1"
 about-debugging-runtime-info = { $name } ({ $version })
 
 # Displayed for runtime info in runtime page when we display the device model as well.
 # { $name } is brand name such as "Firefox Nightly"
 # { $version } is version such as "64.0a1"
 # { $deviceName } is model name of device
 about-debugging-runtime-info-with-model = { $name } on { $deviceName } ({ $version })
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is false on the target runtime.
+about-debugging-connection-prompt-enable-button = Enable connection prompt
+
+# Text of the connection prompt button displayed in Runtime pages, when the preference
+# "devtools.debugger.prompt-connection" is true on the target runtime.
+about-debugging-connection-prompt-disable-button = Disable connection prompt