Adding upstream version 115.7.0esr.upstream/115.7.0esr

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

1 files changed, 178 insertions, 0 deletions

diff --git a/devtools/client/netmonitor/src/components/previews/SourcePreview.js b/devtools/client/netmonitor/src/components/previews/SourcePreview.js
new file mode 100644
index 0000000000..7e9d011bad
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/previews/SourcePreview.js
@@ -0,0 +1,178 @@
+/* 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 {
+  Component,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
+const {
+  connect,
+} = require("resource://devtools/client/shared/redux/visibility-handler-connect.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const Editor = require("resource://devtools/client/shared/sourceeditor/editor.js");
+const {
+  setTargetSearchResult,
+} = require("resource://devtools/client/netmonitor/src/actions/search.js");
+const { div } = dom;
+/**
+ * CodeMirror editor as a React component
+ */
+class SourcePreview extends Component {
+  static get propTypes() {
+    return {
+      // Source editor syntax highlight mode, which is a mime type defined in CodeMirror
+      mode: PropTypes.string,
+      // Source editor content
+      text: PropTypes.string,
+      // Search result text to select
+      targetSearchResult: PropTypes.object,
+      // Reset target search result that has been used for navigation in this panel.
+      // This is done to avoid second navigation the next time.
+      resetTargetSearchResult: PropTypes.func,
+    };
+  }
+
+  componentDidMount() {
+    const { mode, text } = this.props;
+    this.loadEditor(mode, text);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return (
+      nextProps.mode !== this.props.mode ||
+      nextProps.text !== this.props.text ||
+      nextProps.targetSearchResult !== this.props.targetSearchResult
+    );
+  }
+
+  componentDidUpdate(prevProps) {
+    const { mode, targetSearchResult, text } = this.props;
+
+    if (prevProps.text !== text) {
+      // When updating from editor to editor
+      this.updateEditor(mode, text);
+    } else if (prevProps.targetSearchResult !== targetSearchResult) {
+      this.findSearchResult();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unloadEditor();
+  }
+
+  loadEditor(mode, text) {
+    this.editor = new Editor({
+      lineNumbers: true,
+      lineWrapping: false,
+      mode: null, // Disable auto syntax detection, but then we set mode asynchronously
+      readOnly: true,
+      theme: "mozilla",
+      value: text,
+    });
+
+    // Delay to CodeMirror initialization content to prevent UI freezing
+    this.editorTimeout = setTimeout(() => {
+      this.editorTimeout = null;
+      this.editor.appendToLocalElement(this.refs.editorElement);
+
+      // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+      // processing large content, so we enable it asynchronously within the setTimeout
+      // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+      this.editorSetModeTimeout = setTimeout(() => {
+        this.editorSetModeTimeout = null;
+        this.editor.setMode(mode);
+        this.findSearchResult();
+      });
+    });
+  }
+
+  updateEditor(mode, text) {
+    // Reset the existed 'mode' attribute in order to make setText() process faster
+    // to prevent drawing unnecessary syntax highlight.
+    if (this?.editor?.hasCodeMirror) {
+      this.editor.setMode(null);
+      this.editor.setText(text);
+    }
+
+    if (this.editorSetModeTimeout) {
+      clearTimeout(this.editorSetModeTimeout);
+    }
+
+    // CodeMirror's setMode() (syntax highlight) is the performance bottleneck when
+    // processing large content, so we enable it asynchronously within the setTimeout
+    // to avoid UI blocking. (rendering source code -> drawing syntax highlight)
+    this.editorSetModeTimeout = setTimeout(() => {
+      this.editorSetModeTimeout = null;
+      this.editor.setMode(mode);
+      this.findSearchResult();
+    });
+  }
+
+  unloadEditor() {
+    clearTimeout(this.editorTimeout);
+    clearTimeout(this.editorSetModeTimeout);
+    if (this.editor) {
+      this.editor.destroy();
+      this.editor = null;
+    }
+  }
+
+  findSearchResult() {
+    const { targetSearchResult, resetTargetSearchResult } = this.props;
+
+    if (targetSearchResult?.line) {
+      const { line } = targetSearchResult;
+      // scroll the editor to center the line
+      // with the target search result
+      if (this.editor) {
+        this.editor.setCursor({ line: line - 1 }, "center");
+      }
+    }
+
+    resetTargetSearchResult();
+  }
+
+  // Scroll to specified line if the user clicks on search results.
+  scrollToLine(element) {
+    const { targetSearchResult, resetTargetSearchResult } = this.props;
+
+    // The following code is responsible for scrolling given line
+    // to visible view-port.
+    // It gets the <div> child element representing the target
+    // line (by index) and uses `scrollIntoView` API to make sure
+    // it's visible to the user.
+    if (element && targetSearchResult && targetSearchResult.line) {
+      const child = element.children[targetSearchResult.line - 1];
+      if (child) {
+        const range = document.createRange();
+        range.selectNode(child);
+        document.getSelection().addRange(range);
+        child.scrollIntoView({ block: "center" });
+      }
+      resetTargetSearchResult();
+    }
+  }
+
+  renderEditor() {
+    return div(
+      { className: "editor-row-container" },
+      div({
+        ref: "editorElement",
+        className: "source-editor-mount devtools-monospace",
+      })
+    );
+  }
+
+  render() {
+    return div(
+      { key: "EDITOR_CONFIG", className: "editor-row-container" },
+      this.renderEditor()
+    );
+  }
+}
+
+module.exports = connect(null, dispatch => ({
+  resetTargetSearchResult: () => dispatch(setTargetSearchResult(null)),
+}))(SourcePreview);