Adding upstream version 124.0.1.upstream/124.0.1

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

1 files changed, 220 insertions, 0 deletions

diff --git a/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
new file mode 100644
index 0000000000..d83b413a01
--- /dev/null
+++ b/devtools/client/debugger/src/components/SecondaryPanes/Frames/index.js
@@ -0,0 +1,220 @@
+/* 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 React, { Component } from "devtools/client/shared/vendor/react";
+import { connect } from "devtools/client/shared/vendor/react-redux";
+import PropTypes from "devtools/client/shared/vendor/react-prop-types";
+
+import FrameComponent from "./Frame";
+import Group from "./Group";
+
+import actions from "../../../actions/index";
+import { collapseFrames } from "../../../utils/pause/frames/index";
+
+import {
+  getFrameworkGroupingState,
+  getSelectedFrame,
+  getCurrentThreadFrames,
+  getCurrentThread,
+  getShouldSelectOriginalLocation,
+} from "../../../selectors/index";
+
+const NUM_FRAMES_SHOWN = 7;
+
+class Frames extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      showAllFrames: !!props.disableFrameTruncate,
+    };
+  }
+
+  static get propTypes() {
+    return {
+      disableContextMenu: PropTypes.bool.isRequired,
+      disableFrameTruncate: PropTypes.bool.isRequired,
+      displayFullUrl: PropTypes.bool.isRequired,
+      frames: PropTypes.array.isRequired,
+      frameworkGroupingOn: PropTypes.bool.isRequired,
+      getFrameTitle: PropTypes.func,
+      panel: PropTypes.oneOf(["debugger", "webconsole"]).isRequired,
+      selectFrame: PropTypes.func.isRequired,
+      selectLocation: PropTypes.func,
+      selectedFrame: PropTypes.object,
+      showFrameContextMenu: PropTypes.func,
+      shouldDisplayOriginalLocation: PropTypes.bool,
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    const {
+      frames,
+      selectedFrame,
+      frameworkGroupingOn,
+      shouldDisplayOriginalLocation,
+    } = this.props;
+    const { showAllFrames } = this.state;
+    return (
+      frames !== nextProps.frames ||
+      selectedFrame !== nextProps.selectedFrame ||
+      showAllFrames !== nextState.showAllFrames ||
+      frameworkGroupingOn !== nextProps.frameworkGroupingOn ||
+      shouldDisplayOriginalLocation !== nextProps.shouldDisplayOriginalLocation
+    );
+  }
+
+  toggleFramesDisplay = () => {
+    this.setState(prevState => ({
+      showAllFrames: !prevState.showAllFrames,
+    }));
+  };
+
+  collapseFrames(frames) {
+    const { frameworkGroupingOn } = this.props;
+    if (!frameworkGroupingOn) {
+      return frames;
+    }
+
+    return collapseFrames(frames);
+  }
+
+  truncateFrames(frames) {
+    const numFramesToShow = this.state.showAllFrames
+      ? frames.length
+      : NUM_FRAMES_SHOWN;
+
+    return frames.slice(0, numFramesToShow);
+  }
+
+  renderFrames(frames) {
+    const {
+      selectFrame,
+      selectLocation,
+      selectedFrame,
+      displayFullUrl,
+      getFrameTitle,
+      disableContextMenu,
+      panel,
+      shouldDisplayOriginalLocation,
+      showFrameContextMenu,
+    } = this.props;
+
+    const framesOrGroups = this.truncateFrames(this.collapseFrames(frames));
+
+    // We're not using a <ul> because it adds new lines before and after when
+    // the user copies the trace. Needed for the console which has several
+    // places where we don't want to have those new lines.
+    return React.createElement(
+      "div",
+      {
+        role: "list",
+      },
+      framesOrGroups.map(frameOrGroup =>
+        frameOrGroup.id
+          ? React.createElement(FrameComponent, {
+              frame: frameOrGroup,
+              showFrameContextMenu: showFrameContextMenu,
+              selectFrame: selectFrame,
+              selectLocation: selectLocation,
+              selectedFrame: selectedFrame,
+              shouldDisplayOriginalLocation: shouldDisplayOriginalLocation,
+              key: String(frameOrGroup.id),
+              displayFullUrl: displayFullUrl,
+              getFrameTitle: getFrameTitle,
+              disableContextMenu: disableContextMenu,
+              panel: panel,
+            })
+          : React.createElement(Group, {
+              group: frameOrGroup,
+              showFrameContextMenu: showFrameContextMenu,
+              selectFrame: selectFrame,
+              selectLocation: selectLocation,
+              selectedFrame: selectedFrame,
+              key: frameOrGroup[0].id,
+              displayFullUrl: displayFullUrl,
+              getFrameTitle: getFrameTitle,
+              disableContextMenu: disableContextMenu,
+              panel: panel,
+            })
+      )
+    );
+  }
+
+  renderToggleButton(frames) {
+    const { l10n } = this.context;
+    const buttonMessage = this.state.showAllFrames
+      ? l10n.getStr("callStack.collapse")
+      : l10n.getStr("callStack.expand");
+
+    frames = this.collapseFrames(frames);
+    if (frames.length <= NUM_FRAMES_SHOWN) {
+      return null;
+    }
+    return React.createElement(
+      "div",
+      {
+        className: "show-more-container",
+      },
+      React.createElement(
+        "button",
+        {
+          className: "show-more",
+          onClick: this.toggleFramesDisplay,
+        },
+        buttonMessage
+      )
+    );
+  }
+
+  render() {
+    const { frames, disableFrameTruncate } = this.props;
+
+    if (!frames) {
+      return React.createElement(
+        "div",
+        {
+          className: "pane frames",
+        },
+        React.createElement(
+          "div",
+          {
+            className: "pane-info empty",
+          },
+          L10N.getStr("callStack.notPaused")
+        )
+      );
+    }
+    return React.createElement(
+      "div",
+      {
+        className: "pane frames",
+      },
+      this.renderFrames(frames),
+      disableFrameTruncate ? null : this.renderToggleButton(frames)
+    );
+  }
+}
+
+Frames.contextTypes = { l10n: PropTypes.object };
+
+const mapStateToProps = state => ({
+  frames: getCurrentThreadFrames(state),
+  frameworkGroupingOn: getFrameworkGroupingState(state),
+  selectedFrame: getSelectedFrame(state, getCurrentThread(state)),
+  shouldDisplayOriginalLocation: getShouldSelectOriginalLocation(state),
+  disableFrameTruncate: false,
+  disableContextMenu: false,
+  displayFullUrl: false,
+});
+
+export default connect(mapStateToProps, {
+  selectFrame: actions.selectFrame,
+  selectLocation: actions.selectLocation,
+  showFrameContextMenu: actions.showFrameContextMenu,
+})(Frames);
+
+// Export the non-connected component in order to use it outside of the debugger
+// panel (e.g. console, netmonitor, …).
+export { Frames };