Bug 1505128 - Add feature to disconnect from a device, r=ladybenko,daisuke
authorOla Gasidlo <ogasidlo@mozilla.com>
Fri, 15 Mar 2019 14:19:17 +0000
changeset 464381 f7ddbfe2a1af
parent 464380 d90a1637fab6
child 464382 7fbc06e8b06d
push id35716
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:42:17 +0000
treeherdermozilla-central@8ee97c045359 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersladybenko, daisuke
bugs1505128
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1505128 - Add feature to disconnect from a device, r=ladybenko,daisuke Added disconnect from device funtion + button to be displayed in runtime page when device is connected Differential Revision: https://phabricator.services.mozilla.com/D18588
devtools/client/aboutdebugging-new/src/actions/runtimes.js
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
devtools/client/aboutdebugging-new/test/browser/browser.ini
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
--- a/devtools/client/aboutdebugging-new/src/actions/runtimes.js
+++ b/devtools/client/aboutdebugging-new/src/actions/runtimes.js
@@ -143,33 +143,35 @@ function createThisFirefoxRuntime() {
       isUnknown: false,
       name: l10n.getString("about-debugging-this-firefox-runtime-name"),
       type: RUNTIMES.THIS_FIREFOX,
     };
     dispatch({ type: THIS_FIREFOX_RUNTIME_CREATED, runtime: thisFirefoxRuntime });
   };
 }
 
-function disconnectRuntime(id) {
+function disconnectRuntime(id, shouldRedirect = false) {
   return async (dispatch, getState) => {
     dispatch({ type: DISCONNECT_RUNTIME_START });
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
       const { clientWrapper } = runtime.runtimeDetails;
 
       const deviceFront = await clientWrapper.getFront("device");
       if (deviceFront) {
         deviceFront.off("multi-e10s-updated", onMultiE10sUpdated);
       }
 
       if (runtime.type !== RUNTIMES.THIS_FIREFOX) {
         clientWrapper.removeListener("closed", onRemoteDebuggerClientClosed);
       }
-
       await clientWrapper.close();
+      if (shouldRedirect) {
+        await dispatch(Actions.selectPage(PAGE_TYPES.RUNTIME, RUNTIMES.THIS_FIREFOX));
+      }
 
       dispatch({
         type: DISCONNECT_RUNTIME_SUCCESS,
         runtime: {
           id,
           type: runtime.type,
         },
       });
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
@@ -3,34 +3,38 @@
  * 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 Actions = require("../actions/index");
 const FluentReact = require("devtools/client/shared/vendor/fluent-react");
 const Localized = createFactory(FluentReact.Localized);
 
+const { RUNTIMES } = require("../constants");
+
 /**
  * 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 } = this.props;
+    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",
@@ -52,21 +56,23 @@ class RuntimeInfo extends PureComponent 
       ),
       deviceName ?
         dom.label(
           {
             className: "main-heading-subtitle runtime-info__subtitle",
           },
           deviceName
         ) : null,
-      dom.button(
-        {
-          className: "default-button runtime-info__action",
-          // Implementation ongoing in Bug 1505128.
-          disabled: true,
-        },
-        "Disconnect"
-      )
+      runtimeId !== RUNTIMES.THIS_FIREFOX ?
+        dom.button(
+          {
+            className: "default-button runtime-info__action qa-runtime-info__action",
+            onClick() {
+              dispatch(Actions.disconnectRuntime(runtimeId, true));
+            },
+          },
+          "Disconnect"
+        ) : null,
     );
   }
 }
 
 module.exports = RuntimeInfo;
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -169,17 +169,17 @@ class RuntimePage extends PureComponent 
     }
 
     const { compatibilityReport } = runtimeDetails;
 
     return dom.article(
       {
         className: "page js-runtime-page",
       },
-      RuntimeInfo(runtimeDetails.info),
+      RuntimeInfo({ ...runtimeDetails.info, runtimeId, dispatch }),
       RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
       runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
       CompatibilityWarning({ compatibilityReport }),
       this.renderTemporaryExtensionInstallError(),
       this.renderDebugTargetPane("Temporary Extensions",
                                  this.getIconByType(DEBUG_TARGETS.EXTENSION),
                                  temporaryExtensions,
                                  TemporaryExtensionAction,
--- a/devtools/client/aboutdebugging-new/test/browser/browser.ini
+++ b/devtools/client/aboutdebugging-new/test/browser/browser.ini
@@ -62,16 +62,17 @@ skip-if = (os == "win" && ccov) # Bug 15
 [browser_aboutdebugging_devtoolstoolbox_tooltip_markupview.js]
 [browser_aboutdebugging_navigate.js]
 [browser_aboutdebugging_persist_connection.js]
 [browser_aboutdebugging_profiler_dialog.js]
 [browser_aboutdebugging_real_usb_runtime_page_runtime_info.js]
 [browser_aboutdebugging_real_usb_sidebar.js]
 [browser_aboutdebugging_routes.js]
 [browser_aboutdebugging_runtime_compatibility_warning.js]
+[browser_aboutdebugging_runtime_disconnect_remote_runtime.js]
 [browser_aboutdebugging_runtime_remote_runtime_buttons.js]
 [browser_aboutdebugging_runtime_usbclient_closed.js]
 [browser_aboutdebugging_select_network_runtime.js]
 [browser_aboutdebugging_select_page_with_serviceworker.js]
 [browser_aboutdebugging_serviceworker_fetch_flag.js]
 [browser_aboutdebugging_serviceworker_multie10s.js]
 skip-if = debug || asan # Frequent intermittent failures, Bug 1527224
 [browser_aboutdebugging_serviceworker_not_compatible.js]
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
@@ -1,34 +1,38 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
 /**
  * Check whether can toggle enable/disable connection prompt setting.
  */
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
-  const runtime = mocks.createUSBRuntime("1337id", {
-    deviceName: "Fancy Phone",
-    name: "Lorem ipsum",
+  const runtime = mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
   });
 
   info("Set initial state for test");
   await pushPref("devtools.debugger.prompt-connection", true);
 
   // open a remote runtime page
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   mocks.emitUSBUpdate();
-  await connectToRuntime("Fancy Phone", document);
-  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
 
   info("Check whether connection prompt toggle button exists");
   let connectionPromptToggleButton =
     document.querySelector(".js-connection-prompt-toggle-button");
   ok(connectionPromptToggleButton, "Toggle button existed");
   ok(connectionPromptToggleButton.textContent.includes("Disable"),
     "Toggle button shows 'Disable'");
 
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js
@@ -0,0 +1,48 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
+const DEFAULT_PAGE = "#/runtime/this-firefox";
+
+/**
+ * Check if the disconnect button disconnects the remote runtime
+ * and redirects to the default page.
+ */
+add_task(async function() {
+  // enable USB devices mocks
+  const mocks = new Mocks();
+  mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
+  });
+
+  const { document, tab, window } = await openAboutDebugging();
+  await selectThisFirefoxPage(document, window.AboutDebugging.store);
+
+  mocks.emitUSBUpdate();
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
+
+  const disconnectRemoteRuntimeButton =
+  document.querySelector(".qa-runtime-info__action");
+
+  info("Check whether disconnect remote runtime button exists");
+  ok(!!disconnectRemoteRuntimeButton,
+    "Runtime contains the disconnect button");
+
+  info("Click on the disconnect button");
+  disconnectRemoteRuntimeButton.click();
+
+  info("Wait until the runtime is disconnected");
+  await waitUntil(() => document.querySelector(".js-connect-button"));
+
+  is(document.location.hash, DEFAULT_PAGE,
+    "Redirection to the default page (this-firefox)");
+
+  await removeTab(tab);
+});
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
@@ -1,36 +1,44 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
+const USB_RUNTIME_ID = "1337id";
+const USB_DEVICE_NAME = "Fancy Phone";
+const USB_APP_NAME = "Lorem ipsum";
+
 /**
  * Test that remote runtimes show action buttons that are hidden for 'This Firefox'.
  */
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
-  mocks.createUSBRuntime("1337id", {
-    deviceName: "Fancy Phone",
-    name: "Lorem ipsum",
+  mocks.createUSBRuntime(USB_RUNTIME_ID, {
+    deviceName: USB_DEVICE_NAME,
+    name: USB_APP_NAME,
   });
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   info("Checking This Firefox");
   ok(!document.querySelector(".js-connection-prompt-toggle-button"),
     "This Firefox does not contain the connection prompt button");
   ok(!document.querySelector(".js-profile-runtime-button"),
     "This Firefox does not contain the profile runtime button");
+  ok(!document.querySelector(".qa-runtime-info__action"),
+    "This Firefox does not contain the disconnect button");
 
   info("Checking a USB runtime");
   mocks.emitUSBUpdate();
-  await connectToRuntime("Fancy Phone", document);
-  await selectRuntime("Fancy Phone", "Lorem ipsum", document);
+  await connectToRuntime(USB_DEVICE_NAME, document);
+  await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
   ok(!!document.querySelector(".js-connection-prompt-toggle-button"),
     "Runtime contains the connection prompt button");
   ok(!!document.querySelector(".js-profile-runtime-button"),
     "Remote runtime contains the profile runtime button");
+  ok(!!document.querySelector(".qa-runtime-info__action"),
+    "Runtime contains the disconnect button");
 
   await removeTab(tab);
 });