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 522044 f7ddbfe2a1af8037356c8460723b0614c9f12a25
parent 522043 d90a1637fab6ccc787109aca40f2ebeb46f6abd8
child 522045 7fbc06e8b06d9aca28c154bc07597ecdd98f517a
push id10871
push usercbrindusan@mozilla.com
push dateMon, 18 Mar 2019 15:49:32 +0000
treeherdermozilla-beta@018abdd16060 [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);
 });