diff --git a/src/web/static/fonts/MaterialIcons-Regular.ttf b/src/web/static/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 00000000..54938737
Binary files /dev/null and b/src/web/static/fonts/MaterialIcons-Regular.ttf differ
diff --git a/src/web/static/fonts/MaterialIcons-Regular.woff2 b/src/web/static/fonts/MaterialIcons-Regular.woff2
deleted file mode 100644
index 9fa21125..00000000
Binary files a/src/web/static/fonts/MaterialIcons-Regular.woff2 and /dev/null differ
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 7811144a..625b81f7 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -6,7 +6,24 @@
* @license Apache-2.0
*/
-#input-text,
+#input-text {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background-color: transparent;
+}
+
+.cm-editor {
+ height: 100%;
+}
+
+.cm-editor .cm-content {
+ font-family: var(--fixed-width-font-family);
+ font-size: var(--fixed-width-font-size);
+ color: var(--fixed-width-font-colour);
+}
+
#output-text,
#output-html {
position: relative;
@@ -163,14 +180,14 @@
#input-wrapper,
#output-wrapper,
-#input-wrapper > * ,
+#input-wrapper > :not(#input-text),
#output-wrapper > .textarea-wrapper > div,
#output-wrapper > .textarea-wrapper > textarea {
height: calc(100% - var(--title-height));
}
#input-wrapper.show-tabs,
-#input-wrapper.show-tabs > *,
+#input-wrapper.show-tabs > :not(#input-text),
#output-wrapper.show-tabs,
#output-wrapper.show-tabs > .textarea-wrapper > div,
#output-wrapper.show-tabs > .textarea-wrapper > textarea {
@@ -193,7 +210,9 @@
}
.textarea-wrapper textarea,
-.textarea-wrapper>div {
+.textarea-wrapper #output-text,
+.textarea-wrapper #output-html,
+.textarea-wrapper #output-highlighter {
font-family: var(--fixed-width-font-family);
font-size: var(--fixed-width-font-size);
color: var(--fixed-width-font-colour);
@@ -292,10 +311,6 @@
align-items: center;
}
-#input-info {
- line-height: 15px;
-}
-
.dropping-file {
border: 5px dashed var(--drop-file-border-colour) !important;
}
@@ -458,3 +473,73 @@
cursor: pointer;
filter: brightness(98%);
}
+
+
+/* Status bar */
+
+.cm-status-bar {
+ font-family: var(--fixed-width-font-family);
+ font-weight: normal;
+ font-size: 8pt;
+ margin: 0 5px;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.cm-status-bar i {
+ font-size: 12pt;
+ vertical-align: middle;
+ margin-left: 8px;
+}
+.cm-status-bar>div>span:first-child i {
+ margin-left: 0;
+}
+
+/* Dropup Button */
+.cm-status-bar-select-btn {
+ border: none;
+ cursor: pointer;
+}
+
+/* The container
- needed to position the dropup content */
+.cm-status-bar-select {
+ position: relative;
+ display: inline-block;
+}
+
+/* Dropup content (Hidden by Default) */
+.cm-status-bar-select-content {
+ display: none;
+ position: absolute;
+ bottom: 20px;
+ right: 0;
+ background-color: #f1f1f1;
+ min-width: 200px;
+ box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+/* Links inside the dropup */
+.cm-status-bar-select-content a {
+ color: black;
+ padding: 2px 5px;
+ text-decoration: none;
+ display: block;
+}
+
+/* Change color of dropup links on hover */
+.cm-status-bar-select-content a:hover {
+ background-color: #ddd
+}
+
+/* Show the dropup menu on hover */
+.cm-status-bar-select:hover .cm-status-bar-select-content {
+ display: block;
+}
+
+/* Change the background color of the dropup button when the dropup content is shown */
+.cm-status-bar-select:hover .cm-status-bar-select-btn {
+ background-color: #f1f1f1;
+}
diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index c06d3b8c..fa216836 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -13,7 +13,7 @@
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
- src: url("../static/fonts/MaterialIcons-Regular.woff2") format('woff2');
+ src: url("../static/fonts/MaterialIcons-Regular.ttf") format('truetype');
}
.material-icons {
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 5a9533f5..426107bb 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -140,7 +140,7 @@ class ControlsWaiter {
const params = [
includeRecipe ? ["recipe", recipeStr] : undefined,
- includeInput ? ["input", Utils.escapeHtml(input)] : undefined,
+ includeInput && input.length ? ["input", Utils.escapeHtml(input)] : undefined,
];
const hash = params
diff --git a/src/web/waiters/HighlighterWaiter.mjs b/src/web/waiters/HighlighterWaiter.mjs
index 664daef8..9f83b55c 100755
--- a/src/web/waiters/HighlighterWaiter.mjs
+++ b/src/web/waiters/HighlighterWaiter.mjs
@@ -155,12 +155,11 @@ class HighlighterWaiter {
this.mouseTarget = INPUT;
this.removeHighlights();
- const el = e.target;
- const start = el.selectionStart;
- const end = el.selectionEnd;
+ const sel = document.getSelection();
+ const start = sel.baseOffset;
+ const end = sel.extentOffset;
if (start !== 0 || end !== 0) {
- document.getElementById("input-selection-info").innerHTML = this.selectionInfo(start, end);
this.highlightOutput([{start: start, end: end}]);
}
}
@@ -248,12 +247,11 @@ class HighlighterWaiter {
this.mouseTarget !== INPUT)
return;
- const el = e.target;
- const start = el.selectionStart;
- const end = el.selectionEnd;
+ const sel = document.getSelection();
+ const start = sel.baseOffset;
+ const end = sel.extentOffset;
if (start !== 0 || end !== 0) {
- document.getElementById("input-selection-info").innerHTML = this.selectionInfo(start, end);
this.highlightOutput([{start: start, end: end}]);
}
}
@@ -328,7 +326,6 @@ class HighlighterWaiter {
removeHighlights() {
document.getElementById("input-highlighter").innerHTML = "";
document.getElementById("output-highlighter").innerHTML = "";
- document.getElementById("input-selection-info").innerHTML = "";
document.getElementById("output-selection-info").innerHTML = "";
}
diff --git a/src/web/waiters/InputWaiter.mjs b/src/web/waiters/InputWaiter.mjs
index b421d8d8..e8e71b12 100644
--- a/src/web/waiters/InputWaiter.mjs
+++ b/src/web/waiters/InputWaiter.mjs
@@ -7,9 +7,19 @@
import LoaderWorker from "worker-loader?inline=no-fallback!../workers/LoaderWorker.js";
import InputWorker from "worker-loader?inline=no-fallback!../workers/InputWorker.mjs";
-import Utils, { debounce } from "../../core/Utils.mjs";
-import { toBase64 } from "../../core/lib/Base64.mjs";
-import { isImage } from "../../core/lib/FileType.mjs";
+import Utils, {debounce} from "../../core/Utils.mjs";
+import {toBase64} from "../../core/lib/Base64.mjs";
+import {isImage} from "../../core/lib/FileType.mjs";
+
+import {
+ EditorView, keymap, highlightSpecialChars, drawSelection, rectangularSelection, crosshairCursor
+} from "@codemirror/view";
+import {EditorState, Compartment} from "@codemirror/state";
+import {defaultKeymap, insertTab, insertNewline, history, historyKeymap} from "@codemirror/commands";
+import {bracketMatching} from "@codemirror/language";
+import {search, searchKeymap, highlightSelectionMatches} from "@codemirror/search";
+
+import {statusBar} from "../extensions/statusBar.mjs";
/**
@@ -27,6 +37,9 @@ class InputWaiter {
this.app = app;
this.manager = manager;
+ this.inputTextEl = document.getElementById("input-text");
+ this.initEditor();
+
// Define keys that don't change the input so we don't have to autobake when they are pressed
this.badKeys = [
16, // Shift
@@ -61,6 +74,135 @@ class InputWaiter {
}
}
+ /**
+ * Sets up the CodeMirror Editor and returns the view
+ */
+ initEditor() {
+ this.inputEditorConf = {
+ eol: new Compartment,
+ lineWrapping: new Compartment
+ };
+
+ const initialState = EditorState.create({
+ doc: null,
+ extensions: [
+ history(),
+ highlightSpecialChars({render: this.renderSpecialChar}),
+ drawSelection(),
+ rectangularSelection(),
+ crosshairCursor(),
+ bracketMatching(),
+ highlightSelectionMatches(),
+ search({top: true}),
+ statusBar(this.inputEditorConf),
+ this.inputEditorConf.lineWrapping.of(EditorView.lineWrapping),
+ this.inputEditorConf.eol.of(EditorState.lineSeparator.of("\n")),
+ EditorState.allowMultipleSelections.of(true),
+ keymap.of([
+ // Explicitly insert a tab rather than indenting the line
+ { key: "Tab", run: insertTab },
+ // Explicitly insert a new line (using the current EOL char) rather
+ // than messing around with indenting, which does not respect EOL chars
+ { key: "Enter", run: insertNewline },
+ ...historyKeymap,
+ ...defaultKeymap,
+ ...searchKeymap
+ ]),
+ ]
+ });
+
+ this.inputEditorView = new EditorView({
+ state: initialState,
+ parent: this.inputTextEl
+ });
+ }
+
+ /**
+ * Override for rendering special characters.
+ * Should mirror the toDOM function in
+ * https://github.com/codemirror/view/blob/main/src/special-chars.ts#L150
+ * But reverts the replacement of line feeds with newline control pictures.
+ * @param {number} code
+ * @param {string} desc
+ * @param {string} placeholder
+ * @returns {element}
+ */
+ renderSpecialChar(code, desc, placeholder) {
+ const s = document.createElement("span");
+ // CodeMirror changes 0x0a to "NL" instead of "LF". We change it back.
+ s.textContent = code === 0x0a ? "\u240a" : placeholder;
+ s.title = desc;
+ s.setAttribute("aria-label", desc);
+ s.className = "cm-specialChar";
+ return s;
+ }
+
+ /**
+ * Handler for EOL Select clicks
+ * Sets the line separator
+ * @param {Event} e
+ */
+ eolSelectClick(e) {
+ e.preventDefault();
+
+ const eolLookup = {
+ "LF": "\u000a",
+ "VT": "\u000b",
+ "FF": "\u000c",
+ "CR": "\u000d",
+ "CRLF": "\u000d\u000a",
+ "NEL": "\u0085",
+ "LS": "\u2028",
+ "PS": "\u2029"
+ };
+ const eolval = eolLookup[e.target.getAttribute("data-val")];
+ const oldInputVal = this.getInput();
+
+ // Update the EOL value
+ this.inputEditorView.dispatch({
+ effects: this.inputEditorConf.eol.reconfigure(EditorState.lineSeparator.of(eolval))
+ });
+
+ // Reset the input so that lines are recalculated, preserving the old EOL values
+ this.setInput(oldInputVal);
+ }
+
+ /**
+ * Sets word wrap on the input editor
+ * @param {boolean} wrap
+ */
+ setWordWrap(wrap) {
+ this.inputEditorView.dispatch({
+ effects: this.inputEditorConf.lineWrapping.reconfigure(
+ wrap ? EditorView.lineWrapping : []
+ )
+ });
+ }
+
+ /**
+ * Gets the value of the current input
+ * @returns {string}
+ */
+ getInput() {
+ const doc = this.inputEditorView.state.doc;
+ const eol = this.inputEditorView.state.lineBreak;
+ return doc.sliceString(0, doc.length, eol);
+ }
+
+ /**
+ * Sets the value of the current input
+ * @param {string} data
+ */
+ setInput(data) {
+ this.inputEditorView.dispatch({
+ changes: {
+ from: 0,
+ to: this.inputEditorView.state.doc.length,
+ insert: data
+ }
+ });
+ }
+
/**
* Calculates the maximum number of tabs to display
*/
@@ -339,10 +481,8 @@ class InputWaiter {
const activeTab = this.manager.tabs.getActiveInputTab();
if (inputData.inputNum !== activeTab) return;
- const inputText = document.getElementById("input-text");
-
if (typeof inputData.input === "string") {
- inputText.value = inputData.input;
+ this.setInput(inputData.input);
const fileOverlay = document.getElementById("input-file"),
fileName = document.getElementById("input-file-name"),
fileSize = document.getElementById("input-file-size"),
@@ -355,17 +495,11 @@ class InputWaiter {
fileType.textContent = "";
fileLoaded.textContent = "";
- inputText.style.overflow = "auto";
- inputText.classList.remove("blur");
- inputText.scroll(0, 0);
-
- const lines = inputData.input.length < (this.app.options.ioDisplayThreshold * 1024) ?
- inputData.input.count("\n") + 1 : null;
- this.setInputInfo(inputData.input.length, lines);
+ this.inputTextEl.classList.remove("blur");
// Set URL to current input
const inputStr = toBase64(inputData.input, "A-Za-z0-9+/");
- if (inputStr.length > 0 && inputStr.length <= 68267) {
+ if (inputStr.length >= 0 && inputStr.length <= 68267) {
this.setUrl({
includeInput: true,
input: inputStr
@@ -414,7 +548,6 @@ class InputWaiter {
fileLoaded.textContent = inputData.progress + "%";
}
- this.setInputInfo(inputData.size, null);
this.displayFilePreview(inputData);
if (!silent) window.dispatchEvent(this.manager.statechange);
@@ -488,12 +621,10 @@ class InputWaiter {
*/
displayFilePreview(inputData) {
const activeTab = this.manager.tabs.getActiveInputTab(),
- input = inputData.input,
- inputText = document.getElementById("input-text");
+ input = inputData.input;
if (inputData.inputNum !== activeTab) return;
- inputText.style.overflow = "hidden";
- inputText.classList.add("blur");
- inputText.value = Utils.printable(Utils.arrayBufferToStr(input.slice(0, 4096)));
+ this.inputTextEl.classList.add("blur");
+ this.setInput(Utils.arrayBufferToStr(input.slice(0, 4096)));
this.renderFileThumb();
@@ -576,7 +707,7 @@ class InputWaiter {
*/
async getInputValue(inputNum) {
return await new Promise(resolve => {
- this.getInput(inputNum, false, r => {
+ this.getInputFromWorker(inputNum, false, r => {
resolve(r.data);
});
});
@@ -590,7 +721,7 @@ class InputWaiter {
*/
async getInputObj(inputNum) {
return await new Promise(resolve => {
- this.getInput(inputNum, true, r => {
+ this.getInputFromWorker(inputNum, true, r => {
resolve(r.data);
});
});
@@ -604,7 +735,7 @@ class InputWaiter {
* @param {Function} callback - The callback to execute when the input is returned
* @returns {ArrayBuffer | string | object}
*/
- getInput(inputNum, getObj, callback) {
+ getInputFromWorker(inputNum, getObj, callback) {
const id = this.callbackID++;
this.callbacks[id] = callback;
@@ -647,29 +778,6 @@ class InputWaiter {
});
}
-
- /**
- * Displays information about the input.
- *
- * @param {number} length - The length of the current input string
- * @param {number} lines - The number of the lines in the current input string
- */
- setInputInfo(length, lines) {
- let width = length.toString().length.toLocaleString();
- width = width < 2 ? 2 : width;
-
- const lengthStr = length.toString().padStart(width, " ").replace(/ /g, " ");
- let msg = "length: " + lengthStr;
-
- if (typeof lines === "number") {
- const linesStr = lines.toString().padStart(width, " ").replace(/ /g, " ");
- msg += "
lines: " + linesStr;
- }
-
- document.getElementById("input-info").innerHTML = msg;
-
- }
-
/**
* Handler for input change events.
* Debounces the input so we don't call autobake too often.
@@ -696,17 +804,13 @@ class InputWaiter {
// Remove highlighting from input and output panes as the offsets might be different now
this.manager.highlighter.removeHighlights();
- const textArea = document.getElementById("input-text");
- const value = (textArea.value !== undefined) ? textArea.value : "";
+ const value = this.getInput();
const activeTab = this.manager.tabs.getActiveInputTab();
this.app.progress = 0;
- const lines = value.length < (this.app.options.ioDisplayThreshold * 1024) ?
- (value.count("\n") + 1) : null;
- this.setInputInfo(value.length, lines);
this.updateInputValue(activeTab, value);
- this.manager.tabs.updateInputTabHeader(activeTab, value.replace(/[\n\r]/g, "").slice(0, 100));
+ this.manager.tabs.updateInputTabHeader(activeTab, value.slice(0, 100).replace(/[\n\r]/g, ""));
if (e && this.badKeys.indexOf(e.keyCode) < 0) {
// Fire the statechange event as the input has been modified
@@ -714,62 +818,6 @@ class InputWaiter {
}
}
- /**
- * Handler for input paste events
- * Checks that the size of the input is below the display limit, otherwise treats it as a file/blob
- *
- * @param {event} e
- */
- async inputPaste(e) {
- e.preventDefault();
- e.stopPropagation();
-
- const self = this;
- /**
- * Triggers the input file/binary data overlay
- *
- * @param {string} pastedData
- */
- function triggerOverlay(pastedData) {
- const file = new File([pastedData], "PastedData", {
- type: "text/plain",
- lastModified: Date.now()
- });
-
- self.loadUIFiles([file]);
- }
-
- const pastedData = e.clipboardData.getData("Text");
- const inputText = document.getElementById("input-text");
- const selStart = inputText.selectionStart;
- const selEnd = inputText.selectionEnd;
- const startVal = inputText.value.slice(0, selStart);
- const endVal = inputText.value.slice(selEnd);
- const val = startVal + pastedData + endVal;
-
- if (val.length >= (this.app.options.ioDisplayThreshold * 1024)) {
- // Data too large to display, use overlay
- triggerOverlay(val);
- return false;
- } else if (await this.preserveCarriageReturns(val)) {
- // Data contains a carriage return and the user doesn't wish to edit it, use overlay
- // We check this in a separate condition to make sure it is not run unless absolutely
- // necessary.
- triggerOverlay(val);
- return false;
- } else {
- // Pasting normally fires the inputChange() event before
- // changing the value, so instead change it here ourselves
- // and manually fire inputChange()
- inputText.value = val;
- inputText.setSelectionRange(selStart + pastedData.length, selStart + pastedData.length);
- // Don't debounce here otherwise the keyup event for the Ctrl key will cancel an autobake
- // (at least for large inputs)
- this.inputChange(e, true);
- }
- }
-
-
/**
* Handler for input dragover events.
* Gives the user a visual cue to show that items can be dropped here.
@@ -818,7 +866,7 @@ class InputWaiter {
if (text) {
// Append the text to the current input and fire inputChange()
- document.getElementById("input-text").value += text;
+ this.setInput(this.getInput() + text);
this.inputChange(e);
return;
}
@@ -843,44 +891,6 @@ class InputWaiter {
}
}
- /**
- * Checks if an input contains carriage returns.
- * If a CR is detected, checks if the preserve CR option has been set,
- * and if not, asks the user for their preference.
- *
- * @param {string} input - The input to be checked
- * @returns {boolean} - If true, the input contains a CR which should be
- * preserved, so display an overlay so it can't be edited
- */
- async preserveCarriageReturns(input) {
- if (input.indexOf("\r") < 0) return false;
-
- const optionsStr = "This behaviour can be changed in the
Options pane";
- const preserveStr = `A carriage return (\\r, 0x0d) was detected in your input. To preserve it, editing has been disabled.
${optionsStr}`;
- const dontPreserveStr = `A carriage return (\\r, 0x0d) was detected in your input. It has not been preserved.
${optionsStr}`;
-
- switch (this.app.options.preserveCR) {
- case "always":
- this.app.alert(preserveStr, 6000);
- return true;
- case "never":
- this.app.alert(dontPreserveStr, 6000);
- return false;
- }
-
- // Only preserve for high-entropy inputs
- const data = Utils.strToArrayBuffer(input);
- const entropy = Utils.calculateShannonEntropy(data);
-
- if (entropy > 6) {
- this.app.alert(preserveStr, 6000);
- return true;
- }
-
- this.app.alert(dontPreserveStr, 6000);
- return false;
- }
-
/**
* Load files from the UI into the inputWorker
*
@@ -1080,6 +1090,9 @@ class InputWaiter {
this.manager.worker.setupChefWorker();
this.addInput(true);
this.bakeAll();
+
+ // Fire the statechange event as the input has been modified
+ window.dispatchEvent(this.manager.statechange);
}
/**
diff --git a/src/web/waiters/OptionsWaiter.mjs b/src/web/waiters/OptionsWaiter.mjs
index 5ef517d4..52b81ab4 100755
--- a/src/web/waiters/OptionsWaiter.mjs
+++ b/src/web/waiters/OptionsWaiter.mjs
@@ -53,6 +53,9 @@ class OptionsWaiter {
selects[i].selectedIndex = 0;
}
}
+
+ // Initialise options
+ this.setWordWrap();
}
@@ -136,14 +139,13 @@ class OptionsWaiter {
* Sets or unsets word wrap on the input and output depending on the wordWrap option value.
*/
setWordWrap() {
- document.getElementById("input-text").classList.remove("word-wrap");
+ this.manager.input.setWordWrap(this.app.options.wordWrap);
document.getElementById("output-text").classList.remove("word-wrap");
document.getElementById("output-html").classList.remove("word-wrap");
document.getElementById("input-highlighter").classList.remove("word-wrap");
document.getElementById("output-highlighter").classList.remove("word-wrap");
if (!this.app.options.wordWrap) {
- document.getElementById("input-text").classList.add("word-wrap");
document.getElementById("output-text").classList.add("word-wrap");
document.getElementById("output-html").classList.add("word-wrap");
document.getElementById("input-highlighter").classList.add("word-wrap");
diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs
index 0eb6baec..8996edb0 100755
--- a/src/web/waiters/OutputWaiter.mjs
+++ b/src/web/waiters/OutputWaiter.mjs
@@ -1019,7 +1019,6 @@ class OutputWaiter {
}
document.getElementById("output-info").innerHTML = msg;
- document.getElementById("input-selection-info").innerHTML = "";
document.getElementById("output-selection-info").innerHTML = "";
}
@@ -1292,9 +1291,7 @@ class OutputWaiter {
if (this.outputs[activeTab].data.type === "string" &&
active.byteLength <= this.app.options.ioDisplayThreshold * 1024) {
const dishString = await this.getDishStr(this.getOutputDish(activeTab));
- if (!await this.manager.input.preserveCarriageReturns(dishString)) {
- active = dishString;
- }
+ active = dishString;
} else {
transferable.push(active);
}
diff --git a/tests/browser/nightwatch.js b/tests/browser/nightwatch.js
index 41aff9b2..ba6f5204 100644
--- a/tests/browser/nightwatch.js
+++ b/tests/browser/nightwatch.js
@@ -82,7 +82,7 @@ module.exports = {
// Enter input
browser
.useCss()
- .setValue("#input-text", "Don't Panic.")
+ .setValue("#input-text", "Don't Panic.") // TODO
.pause(1000)
.click("#bake");
diff --git a/tests/browser/ops.js b/tests/browser/ops.js
index bb18dc5d..d0933bb6 100644
--- a/tests/browser/ops.js
+++ b/tests/browser/ops.js
@@ -409,16 +409,16 @@ function bakeOp(browser, opName, input, args=[]) {
.click("#clr-recipe")
.click("#clr-io")
.waitForElementNotPresent("#rec-list li.operation")
- .expect.element("#input-text").to.have.property("value").that.equals("");
+ .expect.element("#input-text").to.have.property("value").that.equals(""); // TODO
browser
.perform(function() {
console.log(`Current test: ${opName}`);
})
.urlHash("recipe=" + recipeConfig)
- .setValue("#input-text", input)
+ .setValue("#input-text", input) // TODO
.waitForElementPresent("#rec-list li.operation")
- .expect.element("#input-text").to.have.property("value").that.equals(input);
+ .expect.element("#input-text").to.have.property("value").that.equals(input); // TODO
browser
.waitForElementVisible("#stale-indicator", 5000)