summaryrefslogtreecommitdiffstats
path: root/devtools/client/webconsole/components/Input/JSTerm.js
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/webconsole/components/Input/JSTerm.js')
-rw-r--r--devtools/client/webconsole/components/Input/JSTerm.js1605
1 files changed, 1605 insertions, 0 deletions
diff --git a/devtools/client/webconsole/components/Input/JSTerm.js b/devtools/client/webconsole/components/Input/JSTerm.js
new file mode 100644
index 0000000000..f00ddd66b0
--- /dev/null
+++ b/devtools/client/webconsole/components/Input/JSTerm.js
@@ -0,0 +1,1605 @@
+/* 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 { debounce } = require("resource://devtools/shared/debounce.js");
+const isMacOS = Services.appinfo.OS === "Darwin";
+
+loader.lazyRequireGetter(this, "Debugger", "Debugger");
+loader.lazyRequireGetter(
+ this,
+ "EventEmitter",
+ "resource://devtools/shared/event-emitter.js"
+);
+loader.lazyRequireGetter(
+ this,
+ "AutocompletePopup",
+ "resource://devtools/client/shared/autocomplete-popup.js"
+);
+
+loader.lazyRequireGetter(
+ this,
+ "PropTypes",
+ "resource://devtools/client/shared/vendor/react-prop-types.js"
+);
+loader.lazyRequireGetter(
+ this,
+ "KeyCodes",
+ "resource://devtools/client/shared/keycodes.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ "Editor",
+ "resource://devtools/client/shared/sourceeditor/editor.js"
+);
+loader.lazyRequireGetter(
+ this,
+ "getFocusableElements",
+ "resource://devtools/client/shared/focus.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ "l10n",
+ "resource://devtools/client/webconsole/utils/messages.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ "saveAs",
+ "resource://devtools/shared/DevToolsUtils.js",
+ true
+);
+loader.lazyRequireGetter(
+ this,
+ "beautify",
+ "resource://devtools/shared/jsbeautify/beautify.js"
+);
+
+// React & Redux
+const {
+ Component,
+ createFactory,
+} = require("resource://devtools/client/shared/vendor/react.js");
+const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+const {
+ connect,
+} = require("resource://devtools/client/shared/vendor/react-redux.js");
+
+// History Modules
+const {
+ getHistory,
+ getHistoryValue,
+} = require("resource://devtools/client/webconsole/selectors/history.js");
+const {
+ getAutocompleteState,
+} = require("resource://devtools/client/webconsole/selectors/autocomplete.js");
+const actions = require("resource://devtools/client/webconsole/actions/index.js");
+
+const EvaluationContextSelector = createFactory(
+ require("resource://devtools/client/webconsole/components/Input/EvaluationContextSelector.js")
+);
+
+// Constants used for defining the direction of JSTerm input history navigation.
+const {
+ HISTORY_BACK,
+ HISTORY_FORWARD,
+} = require("resource://devtools/client/webconsole/constants.js");
+
+const JSTERM_CODEMIRROR_ORIGIN = "jsterm";
+
+/**
+ * Create a JSTerminal (a JavaScript command line). This is attached to an
+ * existing HeadsUpDisplay (a Web Console instance). This code is responsible
+ * with handling command line input and code evaluation.
+ */
+class JSTerm extends Component {
+ static get propTypes() {
+ return {
+ // Returns previous or next value from the history
+ // (depending on direction argument).
+ getValueFromHistory: PropTypes.func.isRequired,
+ // History of executed expression (state).
+ history: PropTypes.object.isRequired,
+ // Console object.
+ webConsoleUI: PropTypes.object.isRequired,
+ // Needed for opening context menu
+ serviceContainer: PropTypes.object.isRequired,
+ // Handler for clipboard 'paste' event (also used for 'drop' event, callback).
+ onPaste: PropTypes.func,
+ // Evaluate provided expression.
+ evaluateExpression: PropTypes.func.isRequired,
+ // Update position in the history after executing an expression (action).
+ updateHistoryPosition: PropTypes.func.isRequired,
+ // Update autocomplete popup state.
+ autocompleteUpdate: PropTypes.func.isRequired,
+ autocompleteClear: PropTypes.func.isRequired,
+ // Data to be displayed in the autocomplete popup.
+ autocompleteData: PropTypes.object.isRequired,
+ // Toggle the editor mode.
+ editorToggle: PropTypes.func.isRequired,
+ // Dismiss the editor onboarding UI.
+ editorOnboardingDismiss: PropTypes.func.isRequired,
+ // Set the last JS input value.
+ terminalInputChanged: PropTypes.func.isRequired,
+ // Is the input in editor mode.
+ editorMode: PropTypes.bool,
+ editorWidth: PropTypes.number,
+ editorPrettifiedAt: PropTypes.number,
+ showEditorOnboarding: PropTypes.bool,
+ autocomplete: PropTypes.bool,
+ showEvaluationContextSelector: PropTypes.bool,
+ autocompletePopupPosition: PropTypes.string,
+ inputEnabled: PropTypes.bool,
+ };
+ }
+
+ constructor(props) {
+ super(props);
+
+ const { webConsoleUI } = props;
+
+ this.webConsoleUI = webConsoleUI;
+ this.hudId = this.webConsoleUI.hudId;
+
+ this._onEditorChanges = this._onEditorChanges.bind(this);
+ this._onEditorBeforeChange = this._onEditorBeforeChange.bind(this);
+ this._onEditorKeyHandled = this._onEditorKeyHandled.bind(this);
+ this.onContextMenu = this.onContextMenu.bind(this);
+ this.imperativeUpdate = this.imperativeUpdate.bind(this);
+
+ // We debounce the autocompleteUpdate so we don't send too many requests to the server
+ // as the user is typing.
+ // The delay should be small enough to be unnoticed by the user.
+ this.autocompleteUpdate = debounce(this.props.autocompleteUpdate, 75, this);
+
+ // Updates to the terminal input which can trigger eager evaluations are
+ // similarly debounced.
+ this.terminalInputChanged = debounce(
+ this.props.terminalInputChanged,
+ 75,
+ this
+ );
+
+ // Because the autocomplete has a slight delay (75ms), there can be time where the
+ // codeMirror completion text is out-of-date, which might lead to issue when the user
+ // accept the autocompletion while the update of the completion text is still pending.
+ // In order to account for that, we put any future value of the completion text in
+ // this property.
+ this.pendingCompletionText = null;
+
+ /**
+ * Last input value.
+ * @type string
+ */
+ this.lastInputValue = "";
+
+ this.autocompletePopup = null;
+
+ EventEmitter.decorate(this);
+ webConsoleUI.jsterm = this;
+ }
+
+ componentDidMount() {
+ if (this.props.editorMode) {
+ this.setEditorWidth(this.props.editorWidth);
+ }
+
+ const autocompleteOptions = {
+ onSelect: this.onAutocompleteSelect.bind(this),
+ onClick: this.acceptProposedCompletion.bind(this),
+ listId: "webConsole_autocompletePopupListBox",
+ position: this.props.autocompletePopupPosition,
+ autoSelect: true,
+ useXulWrapper: true,
+ };
+
+ const doc = this.webConsoleUI.document;
+ const { toolbox } = this.webConsoleUI.wrapper;
+ const tooltipDoc = toolbox ? toolbox.doc : doc;
+ // The popup will be attached to the toolbox document or HUD document in the case
+ // such as the browser console which doesn't have a toolbox.
+ this.autocompletePopup = new AutocompletePopup(
+ tooltipDoc,
+ autocompleteOptions
+ );
+
+ if (this.node) {
+ const onArrowUp = () => {
+ let inputUpdated;
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectPreviousItem();
+ return null;
+ }
+
+ if (this.props.editorMode === false && this.canCaretGoPrevious()) {
+ inputUpdated = this.historyPeruse(HISTORY_BACK);
+ }
+
+ return inputUpdated ? null : "CodeMirror.Pass";
+ };
+
+ const onArrowDown = () => {
+ let inputUpdated;
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectNextItem();
+ return null;
+ }
+
+ if (this.props.editorMode === false && this.canCaretGoNext()) {
+ inputUpdated = this.historyPeruse(HISTORY_FORWARD);
+ }
+
+ return inputUpdated ? null : "CodeMirror.Pass";
+ };
+
+ const onArrowLeft = () => {
+ if (this.autocompletePopup.isOpen || this.getAutoCompletionText()) {
+ this.clearCompletion();
+ }
+ return "CodeMirror.Pass";
+ };
+
+ const onArrowRight = () => {
+ // We only want to complete on Right arrow if the completion text is
+ // displayed.
+ if (this.getAutoCompletionText()) {
+ this.acceptProposedCompletion();
+ return null;
+ }
+
+ this.clearCompletion();
+ return "CodeMirror.Pass";
+ };
+
+ const onCtrlCmdEnter = () => {
+ if (this.hasAutocompletionSuggestion()) {
+ return this.acceptProposedCompletion();
+ }
+
+ this._execute();
+ return null;
+ };
+
+ this.editor = new Editor({
+ autofocus: true,
+ enableCodeFolding: this.props.editorMode,
+ lineNumbers: this.props.editorMode,
+ lineWrapping: true,
+ mode: {
+ name: "javascript",
+ globalVars: true,
+ },
+ styleActiveLine: false,
+ tabIndex: "0",
+ viewportMargin: Infinity,
+ disableSearchAddon: true,
+ extraKeys: {
+ Enter: () => {
+ // No need to handle shift + Enter as it's natively handled by CodeMirror.
+
+ const hasSuggestion = this.hasAutocompletionSuggestion();
+ if (
+ !hasSuggestion &&
+ !Debugger.isCompilableUnit(this._getValue())
+ ) {
+ // incomplete statement
+ return "CodeMirror.Pass";
+ }
+
+ if (hasSuggestion) {
+ return this.acceptProposedCompletion();
+ }
+
+ if (!this.props.editorMode) {
+ this._execute();
+ return null;
+ }
+ return "CodeMirror.Pass";
+ },
+
+ "Cmd-Enter": onCtrlCmdEnter,
+ "Ctrl-Enter": onCtrlCmdEnter,
+
+ [Editor.accel("S")]: () => {
+ const value = this._getValue();
+ if (!value) {
+ return null;
+ }
+
+ const date = new Date();
+ const suggestedName =
+ `console-input-${date.getFullYear()}-` +
+ `${date.getMonth() + 1}-${date.getDate()}_${date.getHours()}-` +
+ `${date.getMinutes()}-${date.getSeconds()}.js`;
+ const data = new TextEncoder().encode(value);
+ return saveAs(window, data, suggestedName, [
+ {
+ pattern: "*.js",
+ label: l10n.getStr("webconsole.input.openJavaScriptFileFilter"),
+ },
+ ]);
+ },
+
+ [Editor.accel("O")]: async () => this._openFile(),
+
+ Tab: () => {
+ if (this.hasEmptyInput()) {
+ this.editor.codeMirror.getInputField().blur();
+ return false;
+ }
+
+ if (
+ this.props.autocompleteData &&
+ this.props.autocompleteData.getterPath
+ ) {
+ this.props.autocompleteUpdate(
+ true,
+ this.props.autocompleteData.getterPath
+ );
+ return false;
+ }
+
+ const isSomethingSelected = this.editor.somethingSelected();
+ const hasSuggestion = this.hasAutocompletionSuggestion();
+
+ if (hasSuggestion && !isSomethingSelected) {
+ this.acceptProposedCompletion();
+ return false;
+ }
+
+ if (!isSomethingSelected) {
+ this.insertStringAtCursor("\t");
+ return false;
+ }
+
+ // Something is selected, let the editor handle the indent.
+ return true;
+ },
+
+ "Shift-Tab": () => {
+ if (this.hasEmptyInput()) {
+ this.focusPreviousElement();
+ return false;
+ }
+
+ const hasSuggestion = this.hasAutocompletionSuggestion();
+
+ if (hasSuggestion) {
+ return false;
+ }
+
+ return "CodeMirror.Pass";
+ },
+
+ Up: onArrowUp,
+ "Cmd-Up": onArrowUp,
+
+ Down: onArrowDown,
+ "Cmd-Down": onArrowDown,
+
+ Left: onArrowLeft,
+ "Ctrl-Left": onArrowLeft,
+ "Cmd-Left": onArrowLeft,
+ "Alt-Left": onArrowLeft,
+ // On OSX, Ctrl-A navigates to the beginning of the line.
+ "Ctrl-A": isMacOS ? onArrowLeft : undefined,
+
+ Right: onArrowRight,
+ "Ctrl-Right": onArrowRight,
+ "Cmd-Right": onArrowRight,
+ "Alt-Right": onArrowRight,
+
+ "Ctrl-N": () => {
+ // Control-N differs from down arrow: it ignores autocomplete state.
+ // Note that we preserve the default 'down' navigation within
+ // multiline text.
+ if (
+ Services.appinfo.OS === "Darwin" &&
+ this.props.editorMode === false &&
+ this.canCaretGoNext() &&
+ this.historyPeruse(HISTORY_FORWARD)
+ ) {
+ return null;
+ }
+
+ this.clearCompletion();
+ return "CodeMirror.Pass";
+ },
+
+ "Ctrl-P": () => {
+ // Control-P differs from up arrow: it ignores autocomplete state.
+ // Note that we preserve the default 'up' navigation within
+ // multiline text.
+ if (
+ Services.appinfo.OS === "Darwin" &&
+ this.props.editorMode === false &&
+ this.canCaretGoPrevious() &&
+ this.historyPeruse(HISTORY_BACK)
+ ) {
+ return null;
+ }
+
+ this.clearCompletion();
+ return "CodeMirror.Pass";
+ },
+
+ PageUp: () => {
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectPreviousPageItem();
+ } else {
+ const { outputScroller } = this.webConsoleUI;
+ const { scrollTop, clientHeight } = outputScroller;
+ outputScroller.scrollTop = Math.max(0, scrollTop - clientHeight);
+ }
+
+ return null;
+ },
+
+ PageDown: () => {
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectNextPageItem();
+ } else {
+ const { outputScroller } = this.webConsoleUI;
+ const { scrollTop, scrollHeight, clientHeight } = outputScroller;
+ outputScroller.scrollTop = Math.min(
+ scrollHeight,
+ scrollTop + clientHeight
+ );
+ }
+
+ return null;
+ },
+
+ Home: () => {
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectItemAtIndex(0);
+ return null;
+ }
+
+ if (!this._getValue()) {
+ this.webConsoleUI.outputScroller.scrollTop = 0;
+ return null;
+ }
+
+ if (this.getAutoCompletionText()) {
+ this.clearCompletion();
+ }
+
+ return "CodeMirror.Pass";
+ },
+
+ End: () => {
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.selectItemAtIndex(
+ this.autocompletePopup.itemCount - 1
+ );
+ return null;
+ }
+
+ if (!this._getValue()) {
+ const { outputScroller } = this.webConsoleUI;
+ outputScroller.scrollTop = outputScroller.scrollHeight;
+ return null;
+ }
+
+ if (this.getAutoCompletionText()) {
+ this.clearCompletion();
+ }
+
+ return "CodeMirror.Pass";
+ },
+
+ "Ctrl-Space": () => {
+ if (!this.autocompletePopup.isOpen) {
+ this.props.autocompleteUpdate(
+ true,
+ null,
+ this._getExpressionVariables()
+ );
+ return null;
+ }
+
+ return "CodeMirror.Pass";
+ },
+
+ Esc: false,
+ // Don't handle Ctrl/Cmd + F so it can be listened by a parent node
+ [Editor.accel("F")]: false,
+ },
+ });
+
+ this.editor.on("changes", this._onEditorChanges);
+ this.editor.on("beforeChange", this._onEditorBeforeChange);
+ this.editor.on("blur", this._onEditorBlur);
+ this.editor.on("keyHandled", this._onEditorKeyHandled);
+
+ this.editor.appendToLocalElement(this.node);
+ const cm = this.editor.codeMirror;
+ cm.on("paste", (_, event) => this.props.onPaste(event));
+ cm.on("drop", (_, event) => this.props.onPaste(event));
+
+ this.node.addEventListener("keydown", event => {
+ if (event.keyCode === KeyCodes.DOM_VK_ESCAPE) {
+ if (this.autocompletePopup.isOpen) {
+ this.clearCompletion();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ if (
+ this.props.autocompleteData &&
+ this.props.autocompleteData.getterPath
+ ) {
+ this.props.autocompleteClear();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ });
+
+ this.resizeObserver = new ResizeObserver(() => {
+ // If we don't have the node reference, or if the node isn't connected
+ // anymore, we disconnect the resize observer (componentWillUnmount is never
+ // called on this component, so we have to do it here).
+ if (!this.node || !this.node.isConnected) {
+ this.resizeObserver.disconnect();
+ return;
+ }
+ // Calling `refresh` will update the cursor position, and all the selection blocks.
+ this.editor.codeMirror.refresh();
+ });
+ this.resizeObserver.observe(this.node);
+
+ // Update the character width needed for the popup offset calculations.
+ this._inputCharWidth = this._getInputCharWidth();
+ this.lastInputValue && this._setValue(this.lastInputValue);
+ }
+ }
+
+ // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
+ UNSAFE_componentWillReceiveProps(nextProps) {
+ this.imperativeUpdate(nextProps);
+ }
+
+ shouldComponentUpdate(nextProps) {
+ return (
+ this.props.showEditorOnboarding !== nextProps.showEditorOnboarding ||
+ this.props.editorMode !== nextProps.editorMode
+ );
+ }
+
+ /**
+ * Do all the imperative work needed after a Redux store update.
+ *
+ * @param {Object} nextProps: props passed from shouldComponentUpdate.
+ */
+ imperativeUpdate(nextProps) {
+ if (!nextProps) {
+ return;
+ }
+
+ if (
+ nextProps.autocompleteData !== this.props.autocompleteData &&
+ nextProps.autocompleteData.pendingRequestId === null
+ ) {
+ this.updateAutocompletionPopup(nextProps.autocompleteData);
+ }
+
+ if (nextProps.editorMode !== this.props.editorMode) {
+ if (this.editor) {
+ this.editor.setOption("lineNumbers", nextProps.editorMode);
+ this.editor.setOption("enableCodeFolding", nextProps.editorMode);
+ }
+
+ if (nextProps.editorMode && nextProps.editorWidth) {
+ this.setEditorWidth(nextProps.editorWidth);
+ } else {
+ this.setEditorWidth(null);
+ }
+
+ if (this.autocompletePopup.isOpen) {
+ this.autocompletePopup.hidePopup();
+ }
+ }
+
+ if (
+ nextProps.autocompletePopupPosition !==
+ this.props.autocompletePopupPosition &&
+ this.autocompletePopup
+ ) {
+ this.autocompletePopup.position = nextProps.autocompletePopupPosition;
+ }
+
+ if (
+ nextProps.editorPrettifiedAt &&
+ nextProps.editorPrettifiedAt !== this.props.editorPrettifiedAt
+ ) {
+ this._setValue(
+ beautify.js(this._getValue(), {
+ // Read directly from prefs because this.editor.config.indentUnit and
+ // this.editor.getOption('indentUnit') are not really synced with
+ // prefs.
+ indent_size: Services.prefs.getIntPref("devtools.editor.tabsize"),
+ indent_with_tabs: !Services.prefs.getBoolPref(
+ "devtools.editor.expandtab"
+ ),
+ })
+ );
+ }
+ }
+
+ /**
+ *
+ * @param {Number|null} editorWidth: The width to set the node to. If null, removes any
+ * `width` property on node style.
+ */
+ setEditorWidth(editorWidth) {
+ if (!this.node) {
+ return;
+ }
+
+ if (editorWidth) {
+ this.node.style.width = `${editorWidth}px`;
+ } else {
+ this.node.style.removeProperty("width");
+ }
+ }
+
+ focus() {
+ if (this.editor) {
+ this.editor.focus();
+ }
+ }
+
+ focusPreviousElement() {
+ const inputField = this.editor.codeMirror.getInputField();
+
+ const findPreviousFocusableElement = el => {
+ if (!el || !el.querySelectorAll) {
+ return null;
+ }
+
+ // We only want to get visible focusable element, and for that we can assert that
+ // the offsetParent isn't null. We can do that because we don't have fixed position
+ // element in the console.
+ const items = getFocusableElements(el).filter(
+ ({ offsetParent }) => offsetParent !== null
+ );
+ const inputIndex = items.indexOf(inputField);
+
+ if (items.length === 0 || (inputIndex > -1 && items.length === 1)) {
+ return findPreviousFocusableElement(el.parentNode);
+ }
+
+ const index = inputIndex > 0 ? inputIndex - 1 : items.length - 1;
+ return items[index];
+ };
+
+ const focusableEl = findPreviousFocusableElement(this.node.parentNode);
+ if (focusableEl) {
+ focusableEl.focus();
+ }
+ }
+
+ /**
+ * Execute a string. Execution happens asynchronously in the content process.
+ */
+ _execute() {
+ const value = this._getValue();
+ // In editor mode, we only evaluate the text selection if there's one. The feature isn't
+ // enabled in inline mode as it can be confusing since input is cleared when evaluating.
+ const executeString = this.props.editorMode
+ ? this.getSelectedText() || value
+ : value;
+
+ if (!executeString) {
+ return;
+ }
+
+ if (!this.props.editorMode) {
+ // Calling this.props.terminalInputChanged instead of this.terminalInputChanged
+ // because we want to instantly hide the instant evaluation result, and don't want
+ // the delay we have in this.terminalInputChanged.
+ this.props.terminalInputChanged("");
+ this._setValue("");
+ }
+ this.clearCompletion();
+ this.props.evaluateExpression(executeString);
+ }
+
+ /**
+ * Sets the value of the input field.
+ *
+ * @param string newValue
+ * The new value to set.
+ * @returns void
+ */
+ _setValue(newValue = "") {
+ this.lastInputValue = newValue;
+ this.terminalInputChanged(newValue);
+
+ if (this.editor) {
+ // In order to get the autocomplete popup to work properly, we need to set the
+ // editor text and the cursor in the same operation. If we don't, the text change
+ // is done before the cursor is moved, and the autocompletion call to the server
+ // sends an erroneous query.
+ this.editor.codeMirror.operation(() => {
+ this.editor.setText(newValue);
+
+ // Set the cursor at the end of the input.
+ const lines = newValue.split("\n");
+ this.editor.setCursor({
+ line: lines.length - 1,
+ ch: lines[lines.length - 1].length,
+ });
+ this.editor.setAutoCompletionText();
+ });
+ }
+
+ this.emitForTests("set-input-value");
+ }
+
+ /**
+ * Gets the value from the input field
+ * @returns string
+ */
+ _getValue() {
+ return this.editor ? this.editor.getText() || "" : "";
+ }
+
+ /**
+ * Open the file picker for the user to select a javascript file and open it.
+ *
+ */
+ async _openFile() {
+ const fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
+ fp.init(
+ this.webConsoleUI.document.defaultView,
+ l10n.getStr("webconsole.input.openJavaScriptFile"),
+ Ci.nsIFilePicker.modeOpen
+ );
+
+ // Append file filters
+ fp.appendFilter(
+ l10n.getStr("webconsole.input.openJavaScriptFileFilter"),
+ "*.js"
+ );
+
+ function readFile(file) {
+ return new Promise(resolve => {
+ IOUtils.read(file.path).then(data => {
+ const decoder = new TextDecoder();
+ resolve(decoder.decode(data));
+ });
+ });
+ }
+
+ const content = await new Promise(resolve => {
+ fp.open(rv => {
+ if (rv == Ci.nsIFilePicker.returnOK) {
+ const file = Cc["@mozilla.org/file/local;1"].createInstance(
+ Ci.nsIFile
+ );
+ file.initWithPath(fp.file.path);
+ readFile(file).then(resolve);
+ }
+ });
+ });
+
+ this._setValue(content);
+ }
+
+ getSelectionStart() {
+ return this.getInputValueBeforeCursor().length;
+ }
+
+ getSelectedText() {
+ return this.editor.getSelection();
+ }
+
+ /**
+ * Even handler for the "beforeChange" event fired by codeMirror. This event is fired
+ * when codeMirror is about to make a change to its DOM representation.
+ */
+ _onEditorBeforeChange(cm, change) {
+ // If the user did not type a character that matches the completion text, then we
+ // clear it before the change is done to prevent a visual glitch.
+ // See Bugs 1491776 & 1558248.
+ const { from, to, origin, text } = change;
+ const isAddedText =
+ from.line === to.line && from.ch === to.ch && origin === "+input";
+
+ // if there was no changes (hitting delete on an empty input, or suppr when at the end
+ // of the input), we bail out.
+ if (
+ !isAddedText &&
+ origin === "+delete" &&
+ from.line === to.line &&
+ from.ch === to.ch
+ ) {
+ return;
+ }
+
+ const addedText = text.join("");
+ const completionText = this.getAutoCompletionText();
+
+ const addedCharacterMatchCompletion =
+ isAddedText && completionText.startsWith(addedText);
+
+ const addedCharacterMatchPopupItem =
+ isAddedText &&
+ this.autocompletePopup.items.some(({ preLabel, label }) =>
+ label.startsWith(preLabel + addedText)
+ );
+ const nextSelectedAutocompleteItemIndex =
+ addedCharacterMatchPopupItem &&
+ this.autocompletePopup.items.findIndex(({ preLabel, label }) =>
+ label.startsWith(preLabel + addedText)
+ );
+
+ if (addedCharacterMatchPopupItem) {
+ this.autocompletePopup.selectItemAtIndex(
+ nextSelectedAutocompleteItemIndex,
+ { preventSelectCallback: true }
+ );
+ }
+
+ if (!completionText || change.canceled || !addedCharacterMatchCompletion) {
+ this.setAutoCompletionText("");
+ }
+
+ if (!addedCharacterMatchCompletion && !addedCharacterMatchPopupItem) {
+ this.autocompletePopup.hidePopup();
+ } else if (
+ !change.canceled &&
+ (completionText ||
+ addedCharacterMatchCompletion ||
+ addedCharacterMatchPopupItem)
+ ) {
+ // The completion text will be updated when the debounced autocomplete update action
+ // is done, so in the meantime we set the pending value to pendingCompletionText.
+ // See Bug 1595068 for more information.
+ this.pendingCompletionText = completionText.substring(text.length);
+ // And we update the preLabel of the matching autocomplete items that may be used
+ // in the acceptProposedAutocompletion function.
+ this.autocompletePopup.items.forEach(item => {
+ if (item.label.startsWith(item.preLabel + addedText)) {
+ item.preLabel += addedText;
+ }
+ });
+ }
+ }
+
+ /**
+ * Even handler for the "blur" event fired by codeMirror.
+ */
+ _onEditorBlur(cm) {
+ if (cm.somethingSelected()) {
+ // If there's a selection when the input is blurred, then we remove it by setting
+ // the cursor at the position that matches the start of the first selection.
+ const [{ head }] = cm.listSelections();
+ cm.setCursor(head, { scroll: false });
+ }
+ }
+
+ /**
+ * Fired after a key is handled through a key map.
+ *
+ * @param {CodeMirror} cm: codeMirror instance
+ * @param {String} key: The key that was handled
+ * @param {Event} e: The keypress event
+ */
+ _onEditorKeyHandled(cm, key, e) {
+ // The autocloseBracket addon handle closing brackets keys when they're typed, but
+ // there's already an existing closing bracket.
+ // ex:
+ // 1. input is `foo(x|)` (where | represents the cursor)
+ // 2. user types `)`
+ // 3. input is now `foo(x)|` (i.e. the typed character wasn't inserted)
+ // In such case, _onEditorBeforeChange isn't triggered, so we need to hide the popup
+ // here. We can do that because this function won't be called when codeMirror _do_
+ // insert the closing char.
+ const closingKeys = [`']'`, `')'`, "'}'"];
+ if (this.autocompletePopup.isOpen && closingKeys.includes(key)) {
+ this.clearCompletion();
+ }
+ }
+
+ /**
+ * Retrieve variable declared in the expression from the CodeMirror state, in order
+ * to display them in the autocomplete popup.
+ */
+ _getExpressionVariables() {
+ const cm = this.editor.codeMirror;
+ const { state } = cm.getTokenAt(cm.getCursor());
+ const variables = [];
+
+ if (state.context) {
+ for (let c = state.context; c; c = c.prev) {
+ for (let v = c.vars; v; v = v.next) {
+ if (v.name) {
+ variables.push(v.name);
+ }
+ }
+ }
+ }
+
+ const keys = ["localVars", "globalVars"];
+ for (const key of keys) {
+ if (state[key]) {
+ for (let v = state[key]; v; v = v.next) {
+ if (v.name) {
+ variables.push(v.name);
+ }
+ }
+ }
+ }
+
+ return variables;
+ }
+
+ /**
+ * The editor "changes" event handler.
+ */
+ _onEditorChanges(cm, changes) {
+ const value = this._getValue();
+
+ if (this.lastInputValue !== value) {
+ // We don't autocomplete if the changes were made by JsTerm (e.g. autocomplete was
+ // accepted).
+ const isJsTermChangeOnly = changes.every(
+ ({ origin }) => origin === JSTERM_CODEMIRROR_ORIGIN
+ );
+
+ if (
+ !isJsTermChangeOnly &&
+ (this.props.autocomplete || this.hasAutocompletionSuggestion())
+ ) {
+ this.autocompleteUpdate(false, null, this._getExpressionVariables());
+ }
+ this.lastInputValue = value;
+ this.terminalInputChanged(value);
+ }
+ }
+
+ /**
+ * Go up/down the history stack of input values.
+ *
+ * @param number direction
+ * History navigation direction: HISTORY_BACK or HISTORY_FORWARD.
+ *
+ * @returns boolean
+ * True if the input value changed, false otherwise.
+ */
+ historyPeruse(direction) {
+ const { history, updateHistoryPosition, getValueFromHistory } = this.props;
+
+ if (!history.entries.length) {
+ return false;
+ }
+
+ const newInputValue = getValueFromHistory(direction);
+ const expression = this._getValue();
+ updateHistoryPosition(direction, expression);
+
+ if (newInputValue != null) {
+ this._setValue(newInputValue);
+ return true;
+ }
+
+ return false;
+ }
+
+ /**
+ * Test for empty input.
+ *
+ * @return boolean
+ */
+ hasEmptyInput() {
+ return this._getValue() === "";
+ }
+
+ /**
+ * Check if the caret is at a location that allows selecting the previous item
+ * in history when the user presses the Up arrow key.
+ *
+ * @return boolean
+ * True if the caret is at a location that allows selecting the
+ * previous item in history when the user presses the Up arrow key,
+ * otherwise false.
+ */
+ canCaretGoPrevious() {
+ if (!this.editor) {
+ return false;
+ }
+
+ const inputValue = this._getValue();
+ const { line, ch } = this.editor.getCursor();
+ return (line === 0 && ch === 0) || (line === 0 && ch === inputValue.length);
+ }
+
+ /**
+ * Check if the caret is at a location that allows selecting the next item in
+ * history when the user presses the Down arrow key.
+ *
+ * @return boolean
+ * True if the caret is at a location that allows selecting the next
+ * item in history when the user presses the Down arrow key, otherwise
+ * false.
+ */
+ canCaretGoNext() {
+ if (!this.editor) {
+ return false;
+ }
+
+ const inputValue = this._getValue();
+ const multiline = /[\r\n]/.test(inputValue);
+
+ const { line, ch } = this.editor.getCursor();
+ return (
+ (!multiline && ch === 0) ||
+ this.editor.getDoc().getRange({ line: 0, ch: 0 }, { line, ch }).length ===
+ inputValue.length
+ );
+ }
+
+ /**
+ * Takes the data returned by the server and update the autocomplete popup state (i.e.
+ * its visibility and items).
+ *
+ * @param {Object} data
+ * The autocompletion data as returned by the webconsole actor's autocomplete
+ * service. Should be of the following shape:
+ * {
+ * matches: {Array} array of the properties matching the input,
+ * matchProp: {String} The string used to filter the properties,
+ * isElementAccess: {Boolean} True when the input is an element access,
+ * i.e. `document["addEve`.
+ * }
+ * @fires autocomplete-updated
+ */
+ async updateAutocompletionPopup(data) {
+ if (!this.editor) {
+ return;
+ }
+
+ const { matches, matchProp, isElementAccess } = data;
+ if (!matches.length) {
+ this.clearCompletion();
+ return;
+ }
+
+ const inputUntilCursor = this.getInputValueBeforeCursor();
+
+ const items = matches.map(label => {
+ let preLabel = label.substring(0, matchProp.length);
+ // If the user is performing an element access, and if they did not typed a quote,
+ // then we need to adjust the preLabel to match the quote from the label + what
+ // the user entered.
+ if (isElementAccess && /^['"`]/.test(matchProp) === false) {
+ preLabel = label.substring(0, matchProp.length + 1);
+ }
+ return { preLabel, label, isElementAccess };
+ });
+
+ if (items.length) {
+ const { preLabel, label } = items[0];
+ let suffix = label.substring(preLabel.length);
+ if (isElementAccess) {
+ if (!matchProp) {
+ suffix = label;
+ }
+ const inputAfterCursor = this._getValue().substring(
+ inputUntilCursor.length
+ );
+ // If there's not a bracket after the cursor, add it to the completionText.
+ if (!inputAfterCursor.trimLeft().startsWith("]")) {
+ suffix = suffix + "]";
+ }
+ }
+ this.setAutoCompletionText(suffix);
+ }
+
+ const popup = this.autocompletePopup;
+ // We don't want to trigger the onSelect callback since we already set the completion
+ // text a few lines above.
+ popup.setItems(items, 0, {
+ preventSelectCallback: true,
+ });
+
+ const minimumAutoCompleteLength = 2;
+
+ // We want to show the autocomplete popup if:
+ // - there are at least 2 matching results
+ // - OR, if there's 1 result, but whose label does not start like the input (this can
+ // happen with insensitive search: `num` will match `Number`).
+ // - OR, if there's 1 result, but we can't show the completionText (because there's
+ // some text after the cursor), unless the text in the popup is the same as the input.
+ if (
+ items.length >= minimumAutoCompleteLength ||
+ (items.length === 1 && items[0].preLabel !== matchProp) ||
+ (items.length === 1 &&
+ !this.canDisplayAutoCompletionText() &&
+ items[0].label !== matchProp)
+ ) {
+ // We need to show the popup at the "." or "[".
+ const xOffset = -1 * matchProp.length * this._inputCharWidth;
+ const yOffset = 5;
+ const popupAlignElement =
+ this.props.serviceContainer.getJsTermTooltipAnchor();
+ this._openPopupPendingPromise = popup.openPopup(
+ popupAlignElement,
+ xOffset,
+ yOffset,
+ 0,
+ {
+ preventSelectCallback: true,
+ }
+ );
+ await this._openPopupPendingPromise;
+ this._openPopupPendingPromise = null;
+ } else if (
+ items.length < minimumAutoCompleteLength &&
+ (popup.isOpen || this._openPopupPendingPromise)
+ ) {
+ if (this._openPopupPendingPromise) {
+ await this._openPopupPendingPromise;
+ }
+ popup.hidePopup();
+ }
+
+ // Eager evaluation results incorporate the current autocomplete item. We need to
+ // trigger it here as well as in onAutocompleteSelect as we set the items with
+ // preventSelectCallback (which means we won't trigger onAutocompleteSelect when the
+ // popup is open).
+ this.terminalInputChanged(
+ this.getInputValueWithCompletionText().expression
+ );
+
+ this.emit("autocomplete-updated");
+ }
+
+ onAutocompleteSelect() {
+ const { selectedItem } = this.autocompletePopup;
+ if (selectedItem) {
+ const { preLabel, label, isElementAccess } = selectedItem;
+ let suffix = label.substring(preLabel.length);
+
+ // If the user is performing an element access, we need to check if we should add
+ // starting and ending quotes, as well as a closing bracket.
+ if (isElementAccess) {
+ const inputBeforeCursor = this.getInputValueBeforeCursor();
+ if (inputBeforeCursor.trim().endsWith("[")) {
+ suffix = label;
+ }
+
+ const inputAfterCursor = this._getValue().substring(
+ inputBeforeCursor.length
+ );
+ // If there's no closing bracket after the cursor, add it to the completionText.
+ if (!inputAfterCursor.trimLeft().startsWith("]")) {
+ suffix = suffix + "]";
+ }
+ }
+ this.setAutoCompletionText(suffix);
+ } else {
+ this.setAutoCompletionText("");
+ }
+ // Eager evaluation results incorporate the current autocomplete item.
+ this.terminalInputChanged(
+ this.getInputValueWithCompletionText().expression
+ );
+ }
+
+ /**
+ * Clear the current completion information, cancel any pending autocompletion update
+ * and close the autocomplete popup, if needed.
+ * @fires autocomplete-updated
+ */
+ clearCompletion() {
+ this.autocompleteUpdate.cancel();
+ // Update Eager evaluation result as the completion text was removed.
+ this.terminalInputChanged(this._getValue());
+
+ this.setAutoCompletionText("");
+ let onPopupClosed = Promise.resolve();
+ if (this.autocompletePopup) {
+ this.autocompletePopup.clearItems();
+
+ if (this.autocompletePopup.isOpen || this._openPopupPendingPromise) {
+ onPopupClosed = this.autocompletePopup.once("popup-closed");
+
+ if (this._openPopupPendingPromise) {
+ this._openPopupPendingPromise.then(() =>
+ this.autocompletePopup.hidePopup()
+ );
+ } else {
+ this.autocompletePopup.hidePopup();
+ }
+ onPopupClosed.then(() => this.focus());
+ }
+ }
+ onPopupClosed.then(() => this.emit("autocomplete-updated"));
+ }
+
+ /**
+ * Accept the proposed input completion.
+ */
+ acceptProposedCompletion() {
+ const {
+ completionText,
+ numberOfCharsToMoveTheCursorForward,
+ numberOfCharsToReplaceCharsBeforeCursor,
+ } = this.getInputValueWithCompletionText();
+
+ this.autocompleteUpdate.cancel();
+ this.props.autocompleteClear();
+
+ // If the code triggering the opening of the popup was already triggered but not yet
+ // settled, then we need to wait until it's resolved in order to close the popup (See
+ // Bug 1655406).
+ if (this._openPopupPendingPromise) {
+ this._openPopupPendingPromise.then(() =>
+ this.autocompletePopup.hidePopup()
+ );
+ }
+
+ if (completionText) {
+ this.insertStringAtCursor(
+ completionText,
+ numberOfCharsToReplaceCharsBeforeCursor
+ );
+
+ if (numberOfCharsToMoveTheCursorForward) {
+ const { line, ch } = this.editor.getCursor();
+ this.editor.setCursor({
+ line,
+ ch: ch + numberOfCharsToMoveTheCursorForward,
+ });
+ }
+ }
+ }
+
+ /**
+ * Returns an object containing the expression we would get if the user accepted the
+ * current completion text. This is more than the current input + the completion text,
+ * as there are special cases for element access and case-insensitive matches.
+ *
+ * @return {Object}: An object of the following shape:
+ * - {String} expression: The complete expression
+ * - {String} completionText: the completion text only, which should be used
+ * with the next property
+ * - {Integer} numberOfCharsToReplaceCharsBeforeCursor: The number of chars that
+ * should be removed from the current input before the cursor to
+ * cleanly apply the completionText. This is handy when we only want
+ * to insert the completionText.
+ * - {Integer} numberOfCharsToMoveTheCursorForward: The number of chars that the
+ * cursor should be moved after the completion is done. This can
+ * be useful for element access where there's already a closing
+ * quote and/or bracket.
+ */
+ getInputValueWithCompletionText() {
+ const inputBeforeCursor = this.getInputValueBeforeCursor();
+ const inputAfterCursor = this._getValue().substring(
+ inputBeforeCursor.length
+ );
+ let completionText = this.getAutoCompletionText();
+ let numberOfCharsToReplaceCharsBeforeCursor;
+ let numberOfCharsToMoveTheCursorForward = 0;
+
+ // If the autocompletion popup is open, we always get the selected element from there,
+ // since the autocompletion text might not be enough (e.g. `dOcUmEn` should
+ // autocomplete to `document`, but the autocompletion text only shows `t`).
+ if (this.autocompletePopup.isOpen && this.autocompletePopup.selectedItem) {
+ const { selectedItem } = this.autocompletePopup;
+ const { label, preLabel, isElementAccess } = selectedItem;
+
+ completionText = label;
+ numberOfCharsToReplaceCharsBeforeCursor = preLabel.length;
+
+ // If the user is performing an element access, we need to check if we should add
+ // starting and ending quotes, as well as a closing bracket.
+ if (isElementAccess) {
+ const lastOpeningBracketIndex = inputBeforeCursor.lastIndexOf("[");
+ if (lastOpeningBracketIndex > -1) {
+ numberOfCharsToReplaceCharsBeforeCursor = inputBeforeCursor.substring(
+ lastOpeningBracketIndex + 1
+ ).length;
+ }
+
+ // If the autoclose bracket option is enabled, the input might be in a state where
+ // there's already the closing quote and the closing bracket, e.g.
+ // `document["activeEl|"]`, so we don't need to add
+ // Let's retrieve the completionText last character, to see if it's a quote.
+ const completionTextLastChar =
+ completionText[completionText.length - 1];
+ const endingQuote = [`"`, `'`, "`"].includes(completionTextLastChar)
+ ? completionTextLastChar
+ : "";
+ if (
+ endingQuote &&
+ inputAfterCursor.trimLeft().startsWith(endingQuote)
+ ) {
+ completionText = completionText.substring(
+ 0,
+ completionText.length - 1
+ );
+ numberOfCharsToMoveTheCursorForward++;
+ }
+
+ // If there's not a closing bracket already, we add one.
+ if (
+ !inputAfterCursor.trimLeft().match(new RegExp(`^${endingQuote}?]`))
+ ) {
+ completionText = completionText + "]";
+ } else {
+ // if there's already one, we want to move the cursor after the closing bracket.
+ numberOfCharsToMoveTheCursorForward++;
+ }
+ }
+ }
+
+ const expression =
+ inputBeforeCursor.substring(
+ 0,
+ inputBeforeCursor.length -
+ (numberOfCharsToReplaceCharsBeforeCursor || 0)
+ ) +
+ completionText +
+ inputAfterCursor;
+
+ return {
+ completionText,
+ expression,
+ numberOfCharsToMoveTheCursorForward,
+ numberOfCharsToReplaceCharsBeforeCursor,
+ };
+ }
+
+ getInputValueBeforeCursor() {
+ return this.editor
+ ? this.editor
+ .getDoc()
+ .getRange({ line: 0, ch: 0 }, this.editor.getCursor())
+ : null;
+ }
+
+ /**
+ * Insert a string into the console at the cursor location,
+ * moving the cursor to the end of the string.
+ *
+ * @param {string} str
+ * @param {int} numberOfCharsToReplaceCharsBeforeCursor - defaults to 0
+ */
+ insertStringAtCursor(str, numberOfCharsToReplaceCharsBeforeCursor = 0) {
+ if (!this.editor) {
+ return;
+ }
+
+ const cursor = this.editor.getCursor();
+ const from = {
+ line: cursor.line,
+ ch: cursor.ch - numberOfCharsToReplaceCharsBeforeCursor,
+ };
+
+ this.editor
+ .getDoc()
+ .replaceRange(str, from, cursor, JSTERM_CODEMIRROR_ORIGIN);
+ }
+
+ /**
+ * Set the autocompletion text of the input.
+ *
+ * @param string suffix
+ * The proposed suffix for the input value.
+ */
+ setAutoCompletionText(suffix) {
+ if (!this.editor) {
+ return;
+ }
+
+ this.pendingCompletionText = null;
+
+ if (suffix && !this.canDisplayAutoCompletionText()) {
+ suffix = "";
+ }
+
+ this.editor.setAutoCompletionText(suffix);
+ }
+
+ getAutoCompletionText() {
+ const renderedCompletionText =
+ this.editor && this.editor.getAutoCompletionText();
+ return typeof this.pendingCompletionText === "string"
+ ? this.pendingCompletionText
+ : renderedCompletionText;
+ }
+
+ /**
+ * Indicate if the input has an autocompletion suggestion, i.e. that there is either
+ * something in the autocompletion text or that there's a selected item in the
+ * autocomplete popup.
+ */
+ hasAutocompletionSuggestion() {
+ // We can have cases where the popup is opened but we can't display the autocompletion
+ // text.
+ return (
+ this.getAutoCompletionText() ||
+ (this.autocompletePopup.isOpen &&
+ Number.isInteger(this.autocompletePopup.selectedIndex) &&
+ this.autocompletePopup.selectedIndex > -1)
+ );
+ }
+
+ /**
+ * Returns a boolean indicating if we can display an autocompletion text in the input,
+ * i.e. if there is no characters displayed on the same line of the cursor and after it.
+ */
+ canDisplayAutoCompletionText() {
+ if (!this.editor) {
+ return false;
+ }
+
+ const { ch, line } = this.editor.getCursor();
+ const lineContent = this.editor.getLine(line);
+ const textAfterCursor = lineContent.substring(ch);
+ return textAfterCursor === "";
+ }
+
+ /**
+ * Calculates and returns the width of a single character of the input box.
+ * This will be used in opening the popup at the correct offset.
+ *
+ * @returns {Number|null}: Width off the "x" char, or null if the input does not exist.
+ */
+ _getInputCharWidth() {
+ return this.editor ? this.editor.defaultCharWidth() : null;
+ }
+
+ onContextMenu(e) {
+ this.props.serviceContainer.openEditContextMenu(e);
+ }
+
+ destroy() {
+ this.autocompleteUpdate.cancel();
+ this.terminalInputChanged.cancel();
+ this._openPopupPendingPromise = null;
+
+ if (this.autocompletePopup) {
+ this.autocompletePopup.destroy();
+ this.autocompletePopup = null;
+ }
+
+ if (this.editor) {
+ this.resizeObserver.disconnect();
+ this.editor.destroy();
+ this.editor = null;
+ }
+
+ this.webConsoleUI = null;
+ }
+
+ renderOpenEditorButton() {
+ if (this.props.editorMode) {
+ return null;
+ }
+
+ return dom.button({
+ className:
+ "devtools-button webconsole-input-openEditorButton" +
+ (this.props.showEditorOnboarding ? " devtools-feature-callout" : ""),
+ title: l10n.getFormatStr("webconsole.input.openEditorButton.tooltip2", [
+ isMacOS ? "Cmd + B" : "Ctrl + B",
+ ]),
+ onClick: this.props.editorToggle,
+ });
+ }
+
+ renderEvaluationContextSelector() {
+ if (this.props.editorMode || !this.props.showEvaluationContextSelector) {
+ return null;
+ }
+
+ return EvaluationContextSelector(this.props);
+ }
+
+ renderEditorOnboarding() {
+ if (!this.props.showEditorOnboarding) {
+ return null;
+ }
+
+ // We deliberately use getStr, and not getFormatStr, because we want keyboard
+ // shortcuts to be wrapped in their own span.
+ const label = l10n.getStr("webconsole.input.editor.onboarding.label");
+ let [prefix, suffix] = label.split("%1$S");
+ suffix = suffix.split("%2$S");
+
+ const enterString = l10n.getStr("webconsole.enterKey");
+
+ return dom.header(
+ { className: "editor-onboarding" },
+ dom.img({
+ className: "editor-onboarding-fox",
+ src: "chrome://devtools/skin/images/fox-smiling.svg",
+ }),
+ dom.p(
+ {},
+ prefix,
+ dom.span({ className: "editor-onboarding-shortcut" }, enterString),
+ suffix[0],
+ dom.span({ className: "editor-onboarding-shortcut" }, [
+ isMacOS ? `Cmd+${enterString}` : `Ctrl+${enterString}`,
+ ]),
+ suffix[1]
+ ),
+ dom.button(
+ {
+ className: "editor-onboarding-dismiss-button",
+ onClick: () => this.props.editorOnboardingDismiss(),
+ },
+ l10n.getStr("webconsole.input.editor.onboarding.dismiss.label")
+ )
+ );
+ }
+
+ render() {
+ if (!this.props.inputEnabled) {
+ return null;
+ }
+
+ return dom.div(
+ {
+ className: "jsterm-input-container devtools-input",
+ key: "jsterm-container",
+ "aria-live": "off",
+ tabIndex: -1,
+ onContextMenu: this.onContextMenu,
+ ref: node => {
+ this.node = node;
+ },
+ },
+ dom.div(
+ { className: "webconsole-input-buttons" },
+ this.renderEvaluationContextSelector(),
+ this.renderOpenEditorButton()
+ ),
+ this.renderEditorOnboarding()
+ );
+ }
+}
+
+// Redux connect
+
+function mapStateToProps(state) {
+ return {
+ history: getHistory(state),
+ getValueFromHistory: direction => getHistoryValue(state, direction),
+ autocompleteData: getAutocompleteState(state),
+ showEditorOnboarding: state.ui.showEditorOnboarding,
+ showEvaluationContextSelector: state.ui.showEvaluationContextSelector,
+ autocompletePopupPosition: state.prefs.eagerEvaluation ? "top" : "bottom",
+ editorPrettifiedAt: state.ui.editorPrettifiedAt,
+ };
+}
+
+function mapDispatchToProps(dispatch) {
+ return {
+ updateHistoryPosition: (direction, expression) =>
+ dispatch(actions.updateHistoryPosition(direction, expression)),
+ autocompleteUpdate: (force, getterPath, expressionVars) =>
+ dispatch(actions.autocompleteUpdate(force, getterPath, expressionVars)),
+ autocompleteClear: () => dispatch(actions.autocompleteClear()),
+ evaluateExpression: expression =>
+ dispatch(actions.evaluateExpression(expression)),
+ editorToggle: () => dispatch(actions.editorToggle()),
+ editorOnboardingDismiss: () => dispatch(actions.editorOnboardingDismiss()),
+ terminalInputChanged: value =>
+ dispatch(actions.terminalInputChanged(value)),
+ };
+}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JSTerm);
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-17 23:41:27 +0000