Bug 1628325 - Disable the Inspect button for zombie tabs in about:debugging r=daisuke,fluent-reviewers,flod

Depends on D77497

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

devtools/client/aboutdebugging/src/components/RuntimePage.js

@@ -48,6 +48,9 @@ const ServiceWorkersWarning = createFactory(
 const ProcessDetail = createFactory(
   require("devtools/client/aboutdebugging/src/components/debugtarget/ProcessDetail")
 );
+const TabAction = createFactory(
+  require("devtools/client/aboutdebugging/src/components/debugtarget/TabAction")
+);
 const TabDetail = createFactory(
   require("devtools/client/aboutdebugging/src/components/debugtarget/TabDetail")
 );
@@ -216,7 +219,7 @@ class RuntimePage extends PureComponent {
         this.getIconByType(DEBUG_TARGETS.TAB),
         tabs,
         null,
-        InspectAction,
+        TabAction,
         null,
         TabDetail,
         DEBUG_TARGET_PANE.TAB,

devtools/client/aboutdebugging/src/components/debugtarget/TabAction.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("devtools/client/shared/vendor/react");
+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 InspectAction = createFactory(
+  require("devtools/client/aboutdebugging/src/components/debugtarget/InspectAction")
+);
+
+const Types = require("devtools/client/aboutdebugging/src/types/index");
+
+/**
+ * This component displays the inspect button for tabs.
+ */
+class TabAction extends PureComponent {
+  static get propTypes() {
+    return {
+      dispatch: PropTypes.func.isRequired,
+      target: Types.debugTarget.isRequired,
+    };
+  }
+
+  render() {
+    const isZombieTab = this.props.target.details.isZombieTab;
+    return Localized(
+      {
+        id: "about-debugging-zombie-tab-inspect-action-disabled",
+        attrs: {
+          // Show an explanatory title only if the action is disabled.
+          title: isZombieTab,
+        },
+      },
+      InspectAction({
+        disabled: isZombieTab,
+        dispatch: this.props.dispatch,
+        target: this.props.target,
+      })
+    );
+  }
+}
+
+module.exports = FluentReact.withLocalization(TabAction);

devtools/client/aboutdebugging/src/components/debugtarget/moz.build

@@ -17,6 +17,7 @@ DevToolsModules(
     'ServiceWorkerAction.css',
     'ServiceWorkerAction.js',
     'ServiceWorkerAdditionalActions.js',
+    'TabAction.js',
     'TabDetail.js',
     'TemporaryExtensionAdditionalActions.js',
     'TemporaryExtensionDetail.js',

devtools/client/aboutdebugging/src/middleware/tab-component-data.js

@@ -34,13 +34,14 @@ function toComponentData(tabs) {
         )}`
       : "chrome://devtools/skin/images/globe.svg";
     const name = tab.title || tab.url;
-    const url = tab.url;
+    const { url, isZombieTab } = tab;
     return {
       name,
       icon,
       id,
       type,
       details: {
+        isZombieTab,
         url,
       },
     };

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

@@ -359,6 +359,10 @@ about-debugging-worker-push-service =
 about-debugging-worker-inspect-action-disabled =
   .title = Service Worker inspection is currently disabled for multiprocess { -brand-shorter-name }
 
+# Displayed as title of the inspect button for zombie tabs (e.g. tabs loaded via a session restore).
+about-debugging-zombie-tab-inspect-action-disabled =
+  .title = Tab is not fully loaded and cannot be inspected
+
 # Displayed as name for the Main Process debug target in the Processes category. Only for
 # remote runtimes, if `devtools.aboutdebugging.process-debugging` is true.
 about-debugging-main-process-name = Main Process