Bug 1505131: Show warning when the connecting is taking time. r=jdescottes,flod

Depends on D25033

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/actions/runtimes.js

@@ -24,6 +24,7 @@ const { remoteClientManager } =
 
 const {
   CONNECT_RUNTIME_FAILURE,
+  CONNECT_RUNTIME_NOT_RESPONDING,
   CONNECT_RUNTIME_START,
   CONNECT_RUNTIME_SUCCESS,
   DEBUG_TARGET_PANE,
@@ -52,6 +53,8 @@ const {
   WATCH_RUNTIME_SUCCESS,
 } = require("../constants");
 
+const CONNECTION_TIMING_OUT_DELAY = 3000;
+
 async function getRuntimeIcon(channel) {
   return (channel === "release" || channel === "beta" || channel === "aurora")
     ? `chrome://devtools/skin/images/aboutdebugging-firefox-${ channel }.svg`
@@ -70,6 +73,13 @@ function onMultiE10sUpdated() {
 function connectRuntime(id) {
   return async (dispatch, getState) => {
     dispatch({ type: CONNECT_RUNTIME_START, id });
+    const connectionNotRespondingTimer = setTimeout(() => {
+      // If connecting to the runtime takes time over CONNECTION_TIMING_OUT_DELAY,
+      // we assume the connection prompt is showing on the runtime, show a dialog
+      // to let user know that.
+      dispatch({ type: CONNECT_RUNTIME_NOT_RESPONDING, id });
+    }, CONNECTION_TIMING_OUT_DELAY);
+
     try {
       const runtime = findRuntimeById(id, getState().runtimes);
       const clientWrapper = await createClientForRuntime(runtime);
@@ -136,6 +146,8 @@ function connectRuntime(id) {
       });
     } catch (e) {
       dispatch({ type: CONNECT_RUNTIME_FAILURE, id, error: e });
+    } finally {
+      clearTimeout(connectionNotRespondingTimer);
     }
   };
 }
@@ -146,6 +158,7 @@ function createThisFirefoxRuntime() {
       id: RUNTIMES.THIS_FIREFOX,
       isConnecting: false,
       isConnectionFailed: false,
+      isConnectionNotResponding: false,
       isUnknown: false,
       name: l10n.getString("about-debugging-this-firefox-runtime-name"),
       type: RUNTIMES.THIS_FIREFOX,
@@ -306,6 +319,7 @@ function updateNetworkRuntimes(locations) {
       },
       isConnecting: false,
       isConnectionFailed: false,
+      isConnectionNotResponding: false,
       isUnknown: false,
       name: location,
       type: RUNTIMES.NETWORK,
@@ -328,6 +342,7 @@ function updateUSBRuntimes(adbRuntimes) {
       },
       isConnecting: false,
       isConnectionFailed: false,
+      isConnectionNotResponding: false,
       isUnknown: adbRuntime.isUnknown(),
       name: adbRuntime.shortName,
       type: RUNTIMES.USB,
@@ -374,6 +389,8 @@ function updateRemoteRuntimes(runtimes, type) {
     // - runtimeDetails (set by about:debugging after a successful connection)
     // - isConnecting (set by about:debugging during the connection)
     // - isConnectionFailed (set by about:debugging if connection was failed)
+    // - isConnectionNotResponding
+    //     (set by about:debugging if connection is taking too much time)
     runtimes.forEach(runtime => {
       const existingRuntime = findRuntimeById(runtime.id, getState().runtimes);
       const isConnectionValid = existingRuntime && existingRuntime.runtimeDetails &&
@@ -382,6 +399,8 @@ function updateRemoteRuntimes(runtimes, type) {
       runtime.isConnecting = existingRuntime ? existingRuntime.isConnecting : false;
       runtime.isConnectionFailed =
         existingRuntime ? existingRuntime.isConnectionFailed : false;
+      runtime.isConnectionNotResponding =
+        existingRuntime ? existingRuntime.isConnectionNotResponding : false;
     });
 
     const existingRuntimes = getAllRuntimes(getState().runtimes);

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

@@ -115,6 +115,7 @@ class Sidebar extends PureComponent {
         isConnected: runtimeHasDetails,
         isConnecting: runtime.isConnecting,
         isConnectionFailed: runtime.isConnectionFailed,
+        isConnectionNotResponding: runtime.isConnectionNotResponding,
         isSelected,
         isUnknown: runtime.isUnknown,
         name,

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

@@ -30,6 +30,7 @@ class SidebarRuntimeItem extends PureComponent {
       isConnected: PropTypes.bool.isRequired,
       isConnecting: PropTypes.bool.isRequired,
       isConnectionFailed: PropTypes.bool.isRequired,
+      isConnectionNotResponding: PropTypes.bool.isRequired,
       isSelected: PropTypes.bool.isRequired,
       isUnknown: PropTypes.bool.isRequired,
       name: PropTypes.string.isRequired,
@@ -84,6 +85,30 @@ class SidebarRuntimeItem extends PureComponent {
     );
   }
 
+  renderConnectionNotResponding() {
+    const { isConnectionNotResponding } = this.props;
+
+    if (!isConnectionNotResponding) {
+      return null;
+    }
+
+    const localizationId =
+      "about-debugging-sidebar-item-connect-button-connection-not-responding";
+
+    return Message(
+      {
+        level: MESSAGE_LEVEL.WARNING,
+        key: "connection-not-responding",
+      },
+      Localized(
+        {
+          id: localizationId,
+        },
+        dom.p({ className: "word-wrap-anywhere" }, localizationId)
+      )
+    );
+  }
+
   renderName() {
     const { deviceName, getString, isUnknown, name } = this.props;
 
@@ -173,6 +198,7 @@ class SidebarRuntimeItem extends PureComponent {
         ),
       ),
       this.renderConnectionError(),
+      this.renderConnectionNotResponding(),
     ];
   }
 }

devtools/client/aboutdebugging-new/src/constants.js

@@ -16,6 +16,7 @@ const actionTypes = {
   ADB_ADDON_UNINSTALL_FAILURE: "ADB_ADDON_UNINSTALL_FAILURE",
   ADB_ADDON_STATUS_UPDATED: "ADB_ADDON_STATUS_UPDATED",
   CONNECT_RUNTIME_FAILURE: "CONNECT_RUNTIME_FAILURE",
+  CONNECT_RUNTIME_NOT_RESPONDING: "CONNECT_RUNTIME_NOT_RESPONDING",
   CONNECT_RUNTIME_START: "CONNECT_RUNTIME_START",
   CONNECT_RUNTIME_SUCCESS: "CONNECT_RUNTIME_SUCCESS",
   DEBUG_TARGET_COLLAPSIBILITY_UPDATED: "DEBUG_TARGET_COLLAPSIBILITY_UPDATED",

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

@@ -6,6 +6,7 @@
 
 const {
   CONNECT_RUNTIME_FAILURE,
+  CONNECT_RUNTIME_NOT_RESPONDING,
   CONNECT_RUNTIME_START,
   CONNECT_RUNTIME_SUCCESS,
   DISCONNECT_RUNTIME_SUCCESS,
@@ -76,21 +77,39 @@ function runtimesReducer(state = RuntimesState(), action) {
   switch (action.type) {
     case CONNECT_RUNTIME_START: {
       const { id } = action;
-      return _updateRuntimeById(
-        id, { isConnecting: true, isConnectionFailed: false }, state);
+      const updatedState = {
+        isConnecting: true,
+        isConnectionFailed: false,
+        isConnectionNotResponding: false,
+      };
+      return _updateRuntimeById(id, updatedState, state);
+    }
+
+    case CONNECT_RUNTIME_NOT_RESPONDING: {
+      const { id } = action;
+      return _updateRuntimeById(id, { isConnectionNotResponding: true }, state);
     }
 
     case CONNECT_RUNTIME_SUCCESS: {
       const { id, runtimeDetails, type } = action.runtime;
       remoteClientManager.setClient(id, type, runtimeDetails.clientWrapper.client);
-      return _updateRuntimeById(
-        id, { isConnecting: false, isConnectionFailed: false, runtimeDetails }, state);
+      const updatedState = {
+        isConnecting: false,
+        isConnectionFailed: false,
+        isConnectionNotResponding: false,
+        runtimeDetails,
+      };
+      return _updateRuntimeById(id, updatedState, state);
     }
 
     case CONNECT_RUNTIME_FAILURE: {
       const { id } = action;
-      return _updateRuntimeById(
-        id, { isConnecting: false, isConnectionFailed: true }, state);
+      const updatedState = {
+        isConnecting: false,
+        isConnectionFailed: true,
+        isConnectionNotResponding: false,
+      };
+      return _updateRuntimeById(id, updatedState, state);
     }
 
     case DISCONNECT_RUNTIME_SUCCESS: {

devtools/client/aboutdebugging-new/src/types/runtime.js

@@ -122,6 +122,10 @@ const runtime = {
   // this flag will be true when the connection failed.
   isConnectionFailed: PropTypes.bool.isRequired,
 
+  // will be true if connecting to runtime is taking time, will be false after connecting
+  // or failing.
+  isConnectionNotResponding: PropTypes.bool.isRequired,
+
   // unknown runtimes are placeholders for devices where the runtime has not been started
   // yet. For instance an ADB device connected without a compatible runtime running.
   isUnknown: PropTypes.bool.isRequired,

devtools/client/locales/en-US/aboutdebugging.ftl

@@ -52,6 +52,10 @@ about-debugging-sidebar-item-connect-button-connecting = Connecting…
 # Text displayed in buttons found in sidebar items when the connection failed.
 about-debugging-sidebar-item-connect-button-connection-failed = Connection failed
 
+# Text displayed in connection warning on sidebar item of the runtime when connecting to
+# the runtime is taking too much time.
+about-debugging-sidebar-item-connect-button-connection-not-responding = Connection still pending, check for messages on the target browser
+
 # Temporary text displayed in sidebar items representing remote runtimes after
 # successfully connecting to them. Temporary UI, do not localize.
 about-debugging-sidebar-item-connected-label = Connected