Add + icon for adding watch expressions (#5916)

Author: darkwing

src/components/SecondaryPanes/Expressions.css

@@ -37,7 +37,6 @@
 }
 
 .input-expression::placeholder {
-  text-align: center;
   font-style: italic;
   color: var(--theme-comment);
 }
@@ -54,6 +53,7 @@
 }
 .expression-input-container {
   display: flex;
+  border: 1px solid var(--theme-highlight-blue);
 }
 
 .expression-container {

src/components/SecondaryPanes/Expressions.js

@@ -34,7 +34,9 @@ type Props = {
   evaluateExpressions: () => void,
   updateExpression: (input: string, expression: Expression) => void,
   deleteExpression: (expression: Expression) => void,
-  openLink: (url: string) => void
+  openLink: (url: string) => void,
+  showInput: boolean,
+  onExpressionAdded: () => void
 };
 
 class Expressions extends Component<Props, State> {
@@ -46,7 +48,12 @@ class Expressions extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    this.state = { editing: false, editIndex: -1, inputValue: "" };
+
+    this.state = {
+      editing: false,
+      editIndex: -1,
+      inputValue: ""
+    };
   }
 
   componentDidMount() {
@@ -71,12 +78,14 @@ class Expressions extends Component<Props, State> {
 
   shouldComponentUpdate(nextProps, nextState) {
     const { editing, inputValue } = this.state;
-    const { expressions, expressionError } = this.props;
+    const { expressions, expressionError, showInput } = this.props;
+
     return (
       expressions !== nextProps.expressions ||
       expressionError !== nextProps.expressionError ||
       editing !== nextState.editing ||
-      inputValue !== nextState.inputValue
+      inputValue !== nextState.inputValue ||
+      nextProps.showInput !== showInput
     );
   }
 
@@ -115,6 +124,15 @@ class Expressions extends Component<Props, State> {
     }
   };
 
+  hideInput = () => {
+    this.props.onExpressionAdded();
+  };
+
+  onBlur() {
+    this.clear();
+    this.hideInput();
+  }
+
   handleExistingSubmit = async (
     e: SyntheticEvent<HTMLFormElement>,
     expression: Expression
@@ -123,6 +141,7 @@ class Expressions extends Component<Props, State> {
     e.stopPropagation();
 
     this.props.updateExpression(this.state.inputValue, expression);
+    this.hideInput();
   };
 
   handleNewSubmit = async (e: SyntheticEvent<HTMLFormElement>) => {
@@ -137,6 +156,10 @@ class Expressions extends Component<Props, State> {
       editIndex: -1,
       inputValue: this.props.expressionError ? inputValue : ""
     });
+
+    if (!this.props.expressionError) {
+      this.hideInput();
+    }
   };
 
   renderExpression = (expression: Expression, index: number) => {
@@ -202,8 +225,9 @@ class Expressions extends Component<Props, State> {
             type="text"
             placeholder={placeholder}
             onChange={this.handleChange}
-            onBlur={this.clear}
+            onBlur={this.hideInput}
             onKeyDown={this.handleKeyDown}
+            autoFocus="true"
             value={!editing ? inputValue : ""}
           />
           <input type="submit" style={{ display: "none" }} />
@@ -240,11 +264,12 @@ class Expressions extends Component<Props, State> {
   }
 
   render() {
-    const { expressions } = this.props;
+    const { expressions, showInput } = this.props;
+
     return (
       <ul className="pane expressions-list">
         {expressions.map(this.renderExpression)}
-        {this.renderNewExpressionInput()}
+        {showInput && this.renderNewExpressionInput()}
       </ul>
     );
   }

src/components/SecondaryPanes/index.js

@@ -68,6 +68,10 @@ function debugBtn(onClick, type, className, tooltip) {
   );
 }
 
+type State = {
+  showExpressionsInput: boolean
+};
+
 type Props = {
   extra: Object,
   evaluateExpressions: Function,
@@ -86,7 +90,19 @@ type Props = {
   workers: WorkersList
 };
 
-class SecondaryPanes extends Component<Props> {
+class SecondaryPanes extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      showExpressionsInput: false
+    };
+  }
+
+  onExpressionAdded = () => {
+    this.setState({ showExpressionsInput: false });
+  };
+
   renderBreakpointsToggle() {
     const {
       toggleAllBreakpoints,
@@ -138,6 +154,15 @@ class SecondaryPanes extends Component<Props> {
         "refresh",
         "refresh",
         L10N.getStr("watchExpressions.refreshButton")
+      ),
+      debugBtn(
+        evt => {
+          evt.stopPropagation();
+          this.setState({ showExpressionsInput: true });
+        },
+        "plus",
+        "plus",
+        L10N.getStr("expressions.placeholder")
       )
     ];
   }
@@ -173,7 +198,12 @@ class SecondaryPanes extends Component<Props> {
       header: L10N.getStr("watchExpressions.header"),
       className: "watch-expressions-pane",
       buttons: this.watchExpressionHeaderButtons(),
-      component: <Expressions />,
+      component: (
+        <Expressions
+          showInput={this.state.showExpressionsInput}
+          onExpressionAdded={this.onExpressionAdded}
+        />
+      ),
       opened: prefs.expressionsVisible,
       onToggle: opened => {
         prefs.expressionsVisible = opened;

src/components/SecondaryPanes/tests/__snapshots__/Expressions.spec.js.snap

@@ -78,32 +78,6 @@ exports[`Expressions should always have unique keys 1`] = `
       </div>
     </div>
   </li>
-  <li
-    className="expression-input-container"
-  >
-    <form
-      className="expression-input-form"
-      onSubmit={[Function]}
-    >
-      <input
-        className="input-expression"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Add watch expression"
-        type="text"
-        value=""
-      />
-      <input
-        style={
-          Object {
-            "display": "none",
-          }
-        }
-        type="submit"
-      />
-    </form>
-  </li>
 </ul>
 `;
 
@@ -185,31 +159,5 @@ exports[`Expressions should render 1`] = `
       </div>
     </div>
   </li>
-  <li
-    className="expression-input-container"
-  >
-    <form
-      className="expression-input-form"
-      onSubmit={[Function]}
-    >
-      <input
-        className="input-expression"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder="Add watch expression"
-        type="text"
-        value=""
-      />
-      <input
-        style={
-          Object {
-            "display": "none",
-          }
-        }
-        type="submit"
-      />
-    </form>
-  </li>
 </ul>
 `;

src/test/mochitest/browser_dbg-expressions-error.js

@@ -10,6 +10,7 @@
  */
 
 const expressionSelectors = {
+  plusIcon: ".watch-expressions-pane button.plus",
   input: "input.input-expression"
 };
 
@@ -22,6 +23,7 @@ function getValue(dbg, index) {
 }
 
 async function addExpression(dbg, input) {
+  findElementWithSelector(dbg, expressionSelectors.plusIcon).click();
   const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION");
   findElementWithSelector(dbg, expressionSelectors.input).focus();
   type(dbg, input);

src/test/mochitest/browser_dbg-expressions.js

@@ -10,6 +10,7 @@
  */
 
 const expressionSelectors = {
+  plusIcon: ".watch-expressions-pane button.plus",
   input: "input.input-expression"
 };
 
@@ -33,6 +34,7 @@ function assertEmptyValue(dbg, index) {
 
 async function addExpression(dbg, input) {
   info("Adding an expression");
+  findElementWithSelector(dbg, expressionSelectors.plusIcon).click();
   findElementWithSelector(dbg, expressionSelectors.input).focus();
   type(dbg, input);
   pressKey(dbg, "Enter");