Add StoredVars tab

packages/selenium-ide/src/neo/__test__/containers/Console/index.spec.js

@@ -49,4 +49,13 @@ describe("<Console />", () => {
     const unreadLogNotification = container.querySelector(".log.unread");
     expect(unreadLogNotification).toBeInTheDOM();
   });
+  it("should display an unread log notification when viewing the variables tab)", async () => {
+    const { container } = renderIntoDocument(<Console />);
+    const variablesTab = container.querySelector(".variables");
+    fireEvent.click(variablesTab);
+    await waitForElement(() => container.querySelector(".value-list"));
+    Logger.log("blah");
+    const unreadLogNotification = container.querySelector(".log.unread");
+    expect(unreadLogNotification).toBeInTheDOM();
+  });
 });

packages/selenium-ide/src/neo/components/ActionButtons/Clear/index.jsx

@@ -22,7 +22,7 @@ import classNames from "classnames";
 export default class ClearButton extends React.Component {
   render() {
     return (
-      <ActionButton data-tip="<p>Clear log</p>" {...this.props} className={classNames("si-clear", this.props.className)} />// eslint-disable-line react/prop-types
+      <ActionButton {...this.props} className={classNames("si-clear", this.props.className)} />// eslint-disable-line react/prop-types
     );
   }
 }

packages/selenium-ide/src/neo/components/ActionButtons/Delete/index.jsx

@@ -0,0 +1,28 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from "react";
+import ActionButton from "../ActionButton";
+import classNames from "classnames";
+
+export default class DeleteButton extends React.Component {
+  render() {
+    return (
+      <ActionButton data-tip="<p>Delete</p>" {...this.props} className={classNames("si-delete", this.props.className)} />// eslint-disable-line react/prop-types
+    );
+  }
+}

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

@@ -0,0 +1,88 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { observer } from "mobx-react";
+import DeleteButton from "../ActionButtons/Delete";
+import Input from "../FormInput";
+import "./style.css";
+
+@observer
+export default class Variable extends React.Component {
+  constructor(props){
+    super(props);
+    this.handleChanged = this.handleChanged.bind(this);
+    this.keyChanged = this.keyChanged.bind(this);
+    this.valueChanged = this.valueChanged.bind(this);
+    this.delete = this.delete.bind(this);
+    this.edit = this.edit.bind(this);
+    this.state = { key: this.props.keyVar || "", value: this.props.value || undefined };
+  }
+
+  handleChanged() {
+    this.edit();
+  }
+  delete() {
+    this.props.delete(this.props.keyVar);
+  }
+  edit(){
+    const validKey = this.state.key;
+    if (validKey && this.state.value != undefined) {
+      this.delete();
+      this.props.add(validKey, this.state.value);
+    }
+  }
+  keyChanged(key) {
+    this.setState({ key: key });
+  }
+  valueChanged(value) {
+    this.setState({ value: value });
+  }
+  render() {
+    return (
+      <li className="variable">
+        <Input
+          name={classNames("name", { "editable": !this.props.readOnly }, { "isAdding": this.props.isPristine })}
+          label=""
+          width={0}
+          disabled={this.props.readOnly ? true : false}
+          onChange={this.keyChanged}
+          value={this.state.key}
+          onBlur={this.handleChanged} />
+        <Input
+          name={classNames("value", { "editable": !this.props.readOnly }, { "isAdding": this.props.isPristine })}
+          label=""
+          width={0}
+          disabled={this.props.readOnly ? true : false}
+          onChange={this.valueChanged}
+          value={this.state.value || ""}
+          onBlur={this.handleChanged} />
+        { this.props.isPristine ? null : <DeleteButton className="deleteBtn" data-place="left" onClick={this.delete} disabled={this.props.readOnly}/> }
+      </li>
+    );
+  }
+  static propTypes = {
+    keyVar: PropTypes.string,
+    value: PropTypes.string,
+    delete: PropTypes.func,
+    add: PropTypes.func,
+    isPristine: PropTypes.bool,
+    readOnly: PropTypes.bool
+  };
+}

packages/selenium-ide/src/neo/components/Variable/style.css

@@ -0,0 +1,39 @@
+.variable {
+  font-size: 12px;
+  word-break: break-all;
+  display: flex;
+}
+
+.variable .form-input {
+  float: left;
+  width: 48%;
+  text-align: left;
+  border: 1px transparent solid;
+}
+
+.variable:not(.value-header):hover {
+  background-color: #f3f3f3;
+}
+
+.variable .deleteBtn {
+  width: 4%;
+  opacity: 0;
+  height: 100%;
+}
+
+.variable:hover .deleteBtn {
+  opacity: 1;
+}
+
+.variable .form-input input,
+.variable .form-input input:disabled {
+  background-color: transparent;
+  border: 1px transparent solid;
+  margin: 0;
+}
+
+.variable .form-input input:focus {
+  border: 1px #4ea1ff solid;
+  outline: 0;
+  background-color: white;
+}

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

@@ -0,0 +1,81 @@
+// Licensed to the Software Freedom Conservancy (SFC) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The SFC licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+import React from "react";
+import PropTypes from "prop-types";
+import Variable from "../Variable";
+import { observer } from "mobx-react";
+import "./style.css";
+
+@observer
+export default class VariableList extends React.Component {
+  constructor(props){
+    super(props);
+    this.deleteVariable = this.deleteVariable.bind(this);
+    this.addVariable = this.addVariable.bind(this);
+    this._OnSubmit = this._OnSubmit.bind(this);
+  }
+  deleteVariable(key){
+    this.props.variables.deleteVariable(key);
+  }
+  addVariable(key, value){
+    this.props.variables.addVariable(key, value);
+  }
+  _OnSubmit(e) {
+    e.preventDefault();
+    // This set focus at deleteBtn for calling onBlur event that is to save value.
+    e.target[e.target.length - 1].focus();
+  }
+  render() {
+    const variables = this.props.variables;
+    const pristineID = Math.random();
+    return (
+      <form onSubmit={this._OnSubmit}>
+        <ul className="value-list">
+          <li className="value-header variable">
+            <strong className="name">Name</strong>
+            <strong className="value">Value</strong>
+            <div className="deleteBtn"/>
+          </li>
+          {variables.getEntries.map((storedMap) => (
+            <Variable
+              key={storedMap}
+              keyVar={storedMap[0]}
+              value={storedMap[1]}
+              add={this.addVariable}
+              delete={this.deleteVariable}
+              readOnly={this.props.readOnly}
+              isPristine={false}
+            />
+          )).concat(
+            <Variable
+              key={pristineID}
+              add={this.addVariable}
+              delete={this.deleteVariable}
+              isPristine={true}
+              readOnly={this.props.readOnly}
+            />)}
+          <input tabIndex="-1" type="submit"/>
+        </ul>
+      </form>
+    );
+  }
+  static propTypes = {
+    variables: PropTypes.object,
+    readOnly: PropTypes.bool
+  };
+}

packages/selenium-ide/src/neo/components/VariableList/style.css

@@ -0,0 +1,28 @@
+.value-list {
+  text-align: left;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.variable .name,
+.variable .value {
+  float: left;
+  padding: 4px 5px;
+  width: 48%;
+  text-align: left;
+  border: 1px transparent solid;
+}
+
+.value-list li:last-child {
+  margin-bottom: 3px;
+}
+
+.value-list input[type="submit"] {
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  border: none;
+}

packages/selenium-ide/src/neo/containers/Console/index.jsx

@@ -17,26 +17,27 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+import { observer } from "mobx-react";
+import { observe } from "mobx";
 import TabBar from "../../components/TabBar";
 import LogList from "../../components/LogList";
+import VariableList from "../../components/VariableList";
 import ClearButton from "../../components/ActionButtons/Clear";
 import { output } from "../../stores/view/Logs";
+import PlaybackState from "../../stores/view/PlaybackState";
 import PlaybackLogger from "../../side-effects/playback-logging";
-import "./style.css";
 import CommandReference from "../../components/CommandReference";
+import variables from "../../stores/view/Variables";
 import UiState from "../../stores/view/UiState";
-import { observer } from "mobx-react";
-import { observe } from "mobx";
 import { Commands } from "../../models/Command";
+import "./style.css";
 
 @observer
 export default class Console extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      tab: "Log",
-      logsUnread: false
-    };
+    this.state = { tab: "Log", logsUnread: false };
+    this.tabClicked = this.tabClicked.bind(this);
     this.playbackLogger = new PlaybackLogger();
     this.loggerDisposer = observe(output.logs, () => {
       this.setState({ logsUnread: this.state.tab === "Log" ? false : true });
@@ -58,24 +59,32 @@ export default class Console extends React.Component {
       logsUnread: tab === "Log" ? false : this.state.logsUnread
     });
   }
-  tabClicked(){
-    this.props.restoreSize();
+  //create different object which stores name and read status (e.g., unread boolean)
+  tabClicked(tab) {
+    this.setState({
+      tab
+    });
+    if(this.props.restoreSize) this.props.restoreSize();
   }
   scroll(to) {
     this.viewport.scrollTo(0, to);
   }
   render() {
     const command = UiState.selectedCommand ? Commands.list.get(UiState.selectedCommand.command) : undefined;
-    const tabs = [{ name: "Log", unread: this.state.logsUnread }, { name: "Reference", unread: false }];
+    const tabs = [{ name: "Log", unread: this.state.logsUnread }, { name: "Reference", unread: false }, { name: "Variables", unread: false }];
+    const readOnly = (PlaybackState.isPlaying && !PlaybackState.paused);
     return (
       <footer className="console" style={{
         height: this.props.height ? `${this.props.height}px` : "initial"
       }}>
-        <TabBar tabs={tabs} tabWidth={90} buttonsMargin={0} tabChanged={this.tabChangedHandler}>
-          <ClearButton onClick={output.clear} />
+        <TabBar tabs={tabs} tabWidth={90} buttonsMargin={0} tabChanged={this.tabChangedHandler} tabClicked={this.tabClicked}>
+          {this.state.tab === "Log" && <ClearButton data-tip="<p>Clear log</p>" onClick={output.clear} /> }
+          {this.state.tab === "Variables" && <ClearButton data-tip="<p>Clear Variable</p>" onClick={variables.clearVariables} disabled={readOnly}/> }
+          {this.state.tab === "Reference" && <ClearButton onClick={output.clear} /> }
         </TabBar>
         <div className="viewport" ref={this.setViewportRef}>
           {this.state.tab === "Log" && <LogList output={output} scrollTo={this.scroll}/> }
+          {this.state.tab === "Variables" && <VariableList variables={variables} readOnly={readOnly}/> }
           {this.state.tab === "Reference" && <CommandReference currentCommand={command}/> }
         </div>
       </footer>

packages/selenium-ide/src/neo/stores/view/Variables.js

@@ -15,7 +15,7 @@
 // specific language governing permissions and limitations
 // under the License.
 
-import { action, observable } from "mobx";
+import { action, observable, computed } from "mobx";
 
 class Variables {
   @observable storedVars = new Map();
@@ -36,6 +36,10 @@ class Variables {
   @action.bound clearVariables() {
     this.storedVars.clear();
   }
+
+  @computed get getEntries() {
+    return this.storedVars.entries().sort();
+  }
 }
 
 if (!window._variables) window._variables = new Variables();