Allow multi-line input for commands (tested and working)

Ui.Vision Feature Suggestions
1

When I found out about UI.Vision, the first thing I checked was if I could get it to run my javascript.

I discovered that you can only enter single line commands so I investigated further and realized that getting multi-line commands to work was surprisingly easy.

Multi-line input is especially important for the executeScript command and also solves the problem Emil_Szymecki was having in the previous topic Cmd executeScript run extend *.js

The executeScript command can execute normal multi-line javascript snippets which are saved in the JSON source with \n inserted for each newline.

The only problem is that the target input field does not allow entering new lines since it is a input element and not a textarea.

The fix is simple, change the target input field into a text area and add a code-mirror editor which is linked to the target field into the bottom panel with the Logs/Variables/Screenshots/CSV/Visual.

This requires 2 changes to the popup.js file.

I have edited the Firefox addon and uploaded a modified version of the popup.js file aswell as the modified addon which you can install it if you have Firefox developer edition here:

Line 7602: Change target input to textarea and set fixed height/resize none

c.a.createElement(B.a.TextArea, {
  style: {
    height: "28px",
    resize: "none",
    flex: 1,
    maxWidth: "60%",
    marginRight: "10px"
  },
  placeholder: "target",
  disabled: !d,
  value: u && u.target,
  onChange: function(t) {
    return e.onDetailChange("target", t.target.value)
  },
  size: "default"
}),

Line 8370: Add a code mirror editor to the bottom panel

c.a.createElement(V.a.TabPane, {
  tab: "Target",
  key: "Target"
}, c.a.createElement(Jt.UnControlled, {
  ref: function(t) {
    e.codeMirror = t
  },
  className: this.props.sourceErrMsg ? "has-error" : "no-error",
  value: "",
  onFocus: function(t) {
    let input = document.querySelector('textarea[placeholder="target"]');
    t.setValue(input.value);
    return;
  },
  onChange: function(t) {
    let input = document.querySelector('textarea[placeholder="target"]'); 
    let lastValue = input.value;
    input.value = t.getValue();
    let event = new Event('input', { bubbles: true });
    event.simulated = true;
    let tracker = input._valueTracker;
    if (tracker) {
      tracker.setValue(lastValue);
    }
    input.dispatchEvent(event);
    return;
  },
  onCursor: function(t, r) {
    e.setState({
      cmEdtiorInstance: t
    }), r.sticky && e.setState({
      cursor: {
        line: r.line,
        ch: r.ch
      }
    })
  },
  options: {
    mode: {
      name: "javascript",
      json: 0
    },
    lineNumbers: !0,
    matchBrackets: !0,
    autoCloseBrackets: !0
  }
})),

I believe this would be a great enhancement since it enables users to easily include entire scripts in their macros instead of just javascript one liners allowing for more complex operations which would otherwise not be possible.

Please let me know if you think this would be a suitable enhancement or if you think there would need to be any additional changes.

2 Likes
2

This sounds very interesting, thanks for sharing this.

Question: As for the use cases, what kind of multi-line Javascript snippets do you have in mind? What do they do? In other words, I am looking for a few ideas to create test/demo cases for this feature.

3

I think this is a good feature the input box is to small to add some long multiline javascript.

1 Like
4

My main use case at the moment will be looping through the javascript array created by uploading a csv file, entering the details into a online form and modifying the array depending on the information scraped from the website.

The main advantage is readability and that I can write stuff like:

var text="";
for (i = 0; i < 5; i++) {
  text += "The number is " + i;
}
alert(text);

instead of

var text=""; for (i = 0; i < 5; i++) { text += "The number is " + i; } alert(text);

Once I have finished porting my macros into UI Vision i should be able to come up with a better example.

1 Like
5

Ok, thanks for the good info.

6

I do agree. Multi - Line Javascript would be extremely helpful. I’m using single line right now for the most complicated function which is often hard to write!!!

The one line example javascript belows looks into an array for existing element. Took me along time to figure out and is difficult to troubleshoot.

{
“Command”: “executeScript_Sandbox”,
“Target”: “var valueInArray = false;{myArrayStrings}.forEach(myArrayValue => {(myArrayValue == {myString}) ? valueInArray = true : ‘’ });return valueInArray;”,
“Value”: “myValueInArray”
},

1 Like
7

I hope admin can add this feature, it’s simple to add and help the macro creator to write code and read it.

8

Available in V5.8.8:

executescript
executescript1176×1080 1.38 MB

1 Like