Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 315 insertions, 0 deletions

diff --git a/devtools/client/aboutdebugging/src/components/connect/ConnectPage.js b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.js
new file mode 100644
index 0000000000..97b1b01df7
--- /dev/null
+++ b/devtools/client/aboutdebugging/src/components/connect/ConnectPage.js
@@ -0,0 +1,315 @@
+/* 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("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const Localized = createFactory(FluentReact.Localized);
+
+const {
+  USB_STATES,
+} = require("resource://devtools/client/aboutdebugging/src/constants.js");
+
+const Actions = require("resource://devtools/client/aboutdebugging/src/actions/index.js");
+
+loader.lazyRequireGetter(
+  this,
+  "ADB_ADDON_STATES",
+  "resource://devtools/client/shared/remote-debugging/adb/adb-addon.js",
+  true
+);
+
+const Link = createFactory(
+  require("resource://devtools/client/shared/vendor/react-router-dom.js").Link
+);
+const ConnectSection = createFactory(
+  require("resource://devtools/client/aboutdebugging/src/components/connect/ConnectSection.js")
+);
+const ConnectSteps = createFactory(
+  require("resource://devtools/client/aboutdebugging/src/components/connect/ConnectSteps.js")
+);
+const NetworkLocationsForm = createFactory(
+  require("resource://devtools/client/aboutdebugging/src/components/connect/NetworkLocationsForm.js")
+);
+const NetworkLocationsList = createFactory(
+  require("resource://devtools/client/aboutdebugging/src/components/connect/NetworkLocationsList.js")
+);
+
+const {
+  PAGE_TYPES,
+  RUNTIMES,
+} = require("resource://devtools/client/aboutdebugging/src/constants.js");
+const Types = require("resource://devtools/client/aboutdebugging/src/types/index.js");
+
+const USB_ICON_SRC =
+  "chrome://devtools/skin/images/aboutdebugging-usb-icon.svg";
+const GLOBE_ICON_SRC =
+  "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
+
+const TROUBLESHOOT_USB_URL =
+  "https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#connecting-to-a-remote-device";
+const TROUBLESHOOT_NETWORK_URL =
+  "https://firefox-source-docs.mozilla.org/devtools-user/about_colon_debugging/index.html#connecting-over-the-network";
+
+class ConnectPage extends PureComponent {
+  static get propTypes() {
+    return {
+      adbAddonStatus: Types.adbAddonStatus,
+      dispatch: PropTypes.func.isRequired,
+      networkLocations: PropTypes.arrayOf(Types.location).isRequired,
+    };
+  }
+
+  // TODO: avoid the use of this method
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+  UNSAFE_componentWillMount() {
+    this.props.dispatch(Actions.selectPage(PAGE_TYPES.CONNECT));
+  }
+
+  onToggleUSBClick() {
+    const { adbAddonStatus } = this.props;
+    const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
+    if (isAddonInstalled) {
+      this.props.dispatch(Actions.uninstallAdbAddon());
+    } else {
+      this.props.dispatch(Actions.installAdbAddon());
+    }
+  }
+
+  getUsbStatus() {
+    switch (this.props.adbAddonStatus) {
+      case ADB_ADDON_STATES.INSTALLED:
+        return USB_STATES.ENABLED_USB;
+      case ADB_ADDON_STATES.UNINSTALLED:
+        return USB_STATES.DISABLED_USB;
+      default:
+        return USB_STATES.UPDATING_USB;
+    }
+  }
+
+  renderUsbStatus() {
+    const statusTextId = {
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-status-enabled",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-status-disabled",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-status-updating",
+    }[this.getUsbStatus()];
+
+    return Localized(
+      {
+        id: statusTextId,
+      },
+      dom.span(
+        {
+          className: "connect-page__usb-section__heading__status",
+        },
+        statusTextId
+      )
+    );
+  }
+
+  renderUsbToggleButton() {
+    const usbStatus = this.getUsbStatus();
+
+    const localizedStates = {
+      [USB_STATES.ENABLED_USB]: "about-debugging-setup-usb-disable-button",
+      [USB_STATES.DISABLED_USB]: "about-debugging-setup-usb-enable-button",
+      [USB_STATES.UPDATING_USB]: "about-debugging-setup-usb-updating-button",
+    };
+    const localizedState = localizedStates[usbStatus];
+
+    // Disable the button while the USB status is updating.
+    const disabled = usbStatus === USB_STATES.UPDATING_USB;
+
+    return Localized(
+      {
+        id: localizedState,
+      },
+      dom.button(
+        {
+          className:
+            "default-button connect-page__usb-section__heading__toggle " +
+            "qa-connect-usb-toggle-button",
+          disabled,
+          onClick: () => this.onToggleUSBClick(),
+        },
+        localizedState
+      )
+    );
+  }
+
+  renderUsb() {
+    const { adbAddonStatus } = this.props;
+    const isAddonInstalled = adbAddonStatus === ADB_ADDON_STATES.INSTALLED;
+    return ConnectSection(
+      {
+        icon: USB_ICON_SRC,
+        title: dom.div(
+          {
+            className: "connect-page__usb-section__heading",
+          },
+          Localized(
+            { id: "about-debugging-setup-usb-title" },
+            dom.span(
+              {
+                className: "connect-page__usb-section__heading__title",
+              },
+              "USB"
+            )
+          ),
+          this.renderUsbStatus(),
+          this.renderUsbToggleButton()
+        ),
+      },
+      isAddonInstalled
+        ? ConnectSteps({
+            steps: [
+              {
+                localizationId:
+                  "about-debugging-setup-usb-step-enable-dev-menu2",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-enable-debug2",
+              },
+              {
+                localizationId:
+                  "about-debugging-setup-usb-step-enable-debug-firefox2",
+              },
+              {
+                localizationId: "about-debugging-setup-usb-step-plug-device",
+              },
+            ],
+          })
+        : Localized(
+            {
+              id: "about-debugging-setup-usb-disabled",
+            },
+            dom.aside(
+              {
+                className: "qa-connect-usb-disabled-message",
+              },
+              "Enabling this will download and add the required Android USB debugging " +
+                "components to Firefox."
+            )
+          ),
+      this.renderTroubleshootText(RUNTIMES.USB)
+    );
+  }
+
+  renderNetwork() {
+    const { dispatch, networkLocations } = this.props;
+
+    return Localized(
+      {
+        id: "about-debugging-setup-network",
+        attrs: { title: true },
+      },
+      ConnectSection({
+        icon: GLOBE_ICON_SRC,
+        title: "Network Location",
+        extraContent: dom.div(
+          {},
+          NetworkLocationsList({ dispatch, networkLocations }),
+          NetworkLocationsForm({ dispatch, networkLocations }),
+          this.renderTroubleshootText(RUNTIMES.NETWORK)
+        ),
+      })
+    );
+  }
+
+  renderTroubleshootText(connectionType) {
+    const localizationId =
+      connectionType === RUNTIMES.USB
+        ? "about-debugging-setup-usb-troubleshoot"
+        : "about-debugging-setup-network-troubleshoot";
+
+    const className =
+      "connect-page__troubleshoot connect-page__troubleshoot--" +
+      `${connectionType === RUNTIMES.USB ? "usb" : "network"}`;
+
+    const url =
+      connectionType === RUNTIMES.USB
+        ? TROUBLESHOOT_USB_URL
+        : TROUBLESHOOT_NETWORK_URL;
+
+    return dom.aside(
+      {
+        className,
+      },
+      Localized(
+        {
+          id: localizationId,
+          a: dom.a({
+            href: url,
+            target: "_blank",
+          }),
+        },
+        dom.p({}, localizationId)
+      )
+    );
+  }
+
+  render() {
+    return dom.article(
+      {
+        className: "page connect-page qa-connect-page",
+      },
+      Localized(
+        {
+          id: "about-debugging-setup-title",
+        },
+        dom.h1(
+          {
+            className: "alt-heading alt-heading--larger",
+          },
+          "Setup"
+        )
+      ),
+      Localized(
+        {
+          id: "about-debugging-setup-intro",
+        },
+        dom.p(
+          {},
+          "Configure the connection method you wish to remotely debug your device with."
+        )
+      ),
+      Localized(
+        {
+          id: "about-debugging-setup-this-firefox2",
+          a: Link({
+            to: `/runtime/${RUNTIMES.THIS_FIREFOX}`,
+          }),
+        },
+        dom.p({}, "about-debugging-setup-this-firefox")
+      ),
+      dom.section(
+        {
+          className: "connect-page__breather",
+        },
+        Localized(
+          {
+            id: "about-debugging-setup-connect-heading",
+          },
+          dom.h2(
+            {
+              className: "alt-heading",
+            },
+            "Connect a device"
+          )
+        ),
+        this.renderUsb(),
+        this.renderNetwork()
+      )
+    );
+  }
+}
+
+module.exports = FluentReact.withLocalization(ConnectPage);