Adding upstream version 124.0.1.upstream/124.0.1

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

1 files changed, 89 insertions, 0 deletions

diff --git a/devtools/client/debugger/src/components/shared/Accordion.js b/devtools/client/debugger/src/components/shared/Accordion.js
new file mode 100644
index 0000000000..3b5d5ae516
--- /dev/null
+++ b/devtools/client/debugger/src/components/shared/Accordion.js
@@ -0,0 +1,89 @@
+/* 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/>. */
+
+import { cloneElement, Component } from "devtools/client/shared/vendor/react";
+import {
+  aside,
+  button,
+  div,
+  h2,
+} from "devtools/client/shared/vendor/react-dom-factories";
+import PropTypes from "devtools/client/shared/vendor/react-prop-types";
+
+class Accordion extends Component {
+  static get propTypes() {
+    return {
+      items: PropTypes.array.isRequired,
+    };
+  }
+
+  handleHeaderClick(i) {
+    const item = this.props.items[i];
+    const opened = !item.opened;
+    item.opened = opened;
+
+    if (item.onToggle) {
+      item.onToggle(opened);
+    }
+
+    // We force an update because otherwise the accordion
+    // would not re-render
+    this.forceUpdate();
+  }
+
+  renderContainer = (item, i) => {
+    const { opened } = item;
+    const contentElementId = `${item.id}-content`;
+
+    return aside(
+      {
+        className: item.className,
+        key: item.id,
+        "aria-labelledby": item.id,
+        role: item.role,
+      },
+      h2(
+        {
+          className: "_header",
+        },
+        button(
+          {
+            id: item.id,
+            className: "header-label",
+            "aria-expanded": `${opened ? "true" : "false"}`,
+            "aria-controls": opened ? contentElementId : undefined,
+            onClick: () => this.handleHeaderClick(i),
+          },
+          item.header
+        ),
+        item.buttons
+          ? div(
+              {
+                className: "header-buttons",
+              },
+              item.buttons
+            )
+          : null
+      ),
+      opened &&
+        div(
+          {
+            className: "_content",
+            id: contentElementId,
+          },
+          cloneElement(item.component, item.componentProps || {})
+        )
+    );
+  };
+  render() {
+    return div(
+      {
+        className: "accordion",
+      },
+      this.props.items.map(this.renderContainer)
+    );
+  }
+}
+
+export default Accordion;