WIP: Add control flow to the IDE

packages/selenium-ide/src/neo/components/TestRow/index.jsx

@@ -106,6 +106,7 @@ class TestRow extends React.Component {
     command: PropTypes.string.isRequired,
     target: PropTypes.string,
     value: PropTypes.string,
+    level: PropTypes.number,
     isBreakpoint: PropTypes.bool,
     toggleBreakpoint: PropTypes.func,
     onClick: PropTypes.func,
@@ -200,6 +201,7 @@ class TestRow extends React.Component {
     //setting component of context menu.
     this.props.setContextMenu(listMenu);
 
+    const index = this.props.index >= 0 ? <span className="index" style={{paddingRight: `${(this.props.level || 0) * 5}px`}}>{this.props.index + 1}.</span> : null;
     const rendered = <tr
       ref={node => {return(this.node = node || this.node);}}
       className={classNames(this.props.className, {"selected": this.props.selected}, {"break-point": this.props.isBreakpoint}, {"dragging": this.props.dragInProgress})}
@@ -214,12 +216,12 @@ class TestRow extends React.Component {
       }}>
       {this.props.comment ?
         <td className="comment" colSpan="3"><span></span>
-          {this.props.index >= 0 ? <span className="index">{this.props.index + 1}.</span> : null}
+          {index}
           <span>{this.props.comment}</span>
         </td> :
         <React.Fragment>
           <td><span></span>
-            {this.props.index >= 0 ? <span className="index">{this.props.index + 1}.</span> : null}
+            {index}
             <span className="command"><CommandName>{this.props.command}</CommandName></span>
           </td>
           <td><MultilineEllipsis lines={3}>{this.props.target}</MultilineEllipsis></td>

packages/selenium-ide/src/neo/components/TestTable/index.jsx

@@ -40,6 +40,7 @@ export default class TestTable extends React.Component {
     clearAllCommands: PropTypes.func
   };
   render() {
+    let level = 0;
     return ([
       <div key="header" className="test-table test-table-header">
         <table>
@@ -55,8 +56,9 @@ export default class TestTable extends React.Component {
       <div key="body" className="test-table test-table-body">
         <table>
           <tbody>
-            { this.props.commands ? this.props.commands.map((command, index) => (
-              <TestRow
+            {this.props.commands ? this.props.commands.map((command, index) => {
+              if (isBlockEnd(command.command) && level > 0) level--;
+              const row = <TestRow
                 key={command.id}
                 id={command.id}
                 className={classNames(PlaybackState.commandState.get(command.id) ? PlaybackState.commandState.get(command.id).state : "")}
@@ -66,6 +68,7 @@ export default class TestTable extends React.Component {
                 command={command.command}
                 target={command.target}
                 value={command.value}
+                level={level}
                 isBreakpoint={command.isBreakpoint}
                 toggleBreakpoint={command.toggleBreakpoint}
                 dragInProgress={UiState.dragInProgress}
@@ -83,8 +86,10 @@ export default class TestTable extends React.Component {
                 copyToClipboard={() => { UiState.copyToClipboard(command); }}
                 clearAllCommands={this.props.clearAllCommands}
                 setSectionFocus={UiState.setSectionFocus}
-              />
-            )).concat(
+              />;
+              if (isBlock(command.command)) level++;
+              return row;
+            }).concat(
               <TestRow
                 id={UiState.pristineCommand.id}
                 key={UiState.selectedTest.test.id}
@@ -104,3 +109,27 @@ export default class TestTable extends React.Component {
     ]);
   }
 }
+
+function isBlock(command) {
+  switch(command) {
+    case "if":
+    case "do":
+    case "while":
+    case "times":
+    case "else":
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isBlockEnd(command) {
+  switch(command) {
+    case "end":
+    case "endDo":
+    case "else":
+      return true;
+    default:
+      return false;
+  }
+}

packages/selenium-ide/src/neo/models/Command.js

@@ -106,14 +106,21 @@ export const Commands = Object.freeze({
   assertText: "assert text",
   assertTitle: "assert title",
   assertValue: "assert value",
+  break: "break",
   chooseCancelOnNextConfirmation: "choose cancel on next confirmation",
   chooseCancelOnNextPrompt: "choose cancel on next prompt",
   chooseOkOnNextConfirmation: "choose ok on next confirmation",
   clickAt: "click at",
+  continue: "continue",
+  do: "do",
   doubleClickAt: "double click at",
   dragAndDropToObject: "drag and drop to object",
   echo: "echo",
   editContent: "edit content",
+  else: "else",
+  end: "end",
+  endDo: "endDo",
+  if: "if",
   mouseDownAt: "mouse down at",
   mouseMoveAt: "mouse move at",
   mouseOut: "mouse out",
@@ -132,6 +139,7 @@ export const Commands = Object.freeze({
   storeText: "store text",
   storeTitle: "store title",
   submit: "submit",
+  times: "times",
   type: "type",
   verifyChecked: "verify checked",
   verifyNotChecked: "verify not checked",
@@ -147,7 +155,8 @@ export const Commands = Object.freeze({
   webdriverAnswerOnNextPrompt: "webdriver answer on next prompt",
   webdriverChooseCancelOnNextConfirmation: "webdriver choose cancel on next confirmation",
   webdriverChooseCancelOnNextPrompt: "webdriver choose cancel on next prompt",
-  webdriverChooseOkOnNextConfirmation: "webdriver choose ok on next confirmation"
+  webdriverChooseOkOnNextConfirmation: "webdriver choose ok on next confirmation",
+  while: "while"
 });
 
 export const CommandsArray = Object.freeze(Object.keys(Commands));