Bug 1525492 - [release 123] Fix 7835 - Focus on inputs if plus is clicked but panel is closed (#7836). r=dwalsh
☠☠ backed out by d7e70a8d8b18 ☠ ☠
authorDavid Walsh <davidwalsh83@gmail.com>
Tue, 05 Feb 2019 18:25:38 -0800
changeset 457430 a53660e895611091362a072a3b8d7eaa59528fa1
parent 457429 5f647aeba4fda22a90d5dcc0e042f4083ebf0869
child 457431 27131c9432a17aa202ece0cf8398e6ec40681cdc
push id111727
push userjlaster@mozilla.com
push dateWed, 06 Feb 2019 19:27:21 +0000
treeherdermozilla-inbound@e97ff8f77380 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalsh
bugs1525492
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1525492 - [release 123] Fix 7835 - Focus on inputs if plus is clicked but panel is closed (#7836). r=dwalsh
devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.js
devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.js
devtools/client/debugger/new/test/mochitest/browser.ini
devtools/client/debugger/new/test/mochitest/browser_dbg-expressions-focus.js
devtools/client/debugger/new/test/mochitest/browser_dbg-expressions.js
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.js
@@ -66,20 +66,27 @@ class Expressions extends Component<Prop
       editing: false,
       editIndex: -1,
       inputValue: "",
       focused: false
     };
   }
 
   componentDidMount() {
-    const { expressions, evaluateExpressions } = this.props;
+    const { expressions, evaluateExpressions, showInput } = this.props;
+
     if (expressions.size > 0) {
       evaluateExpressions();
     }
+
+    // Ensures that the input is focused when the "+"
+    // is clicked while the panel is collapsed
+    if (showInput && this._input) {
+      this._input.focus();
+    }
   }
 
   clear = () => {
     this.setState(() => {
       this.props.clearExpressionError();
       return { editing: false, editIndex: -1, inputValue: "" };
     });
   };
--- a/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.js
+++ b/devtools/client/debugger/new/src/components/SecondaryPanes/XHRBreakpoints.js
@@ -54,16 +54,26 @@ class XHRBreakpoints extends Component<P
       editing: false,
       inputValue: "",
       inputMethod: "",
       focused: false,
       editIndex: -1
     };
   }
 
+  componentDidMount() {
+    const { showInput } = this.props;
+
+    // Ensures that the input is focused when the "+"
+    // is clicked while the panel is collapsed
+    if (this._input && showInput) {
+      this._input.focus();
+    }
+  }
+
   componentDidUpdate(prevProps, prevState) {
     const input = this._input;
 
     if (!input) {
       return;
     }
 
     if (!prevState.editing && this.state.editing) {
--- a/devtools/client/debugger/new/test/mochitest/browser.ini
+++ b/devtools/client/debugger/new/test/mochitest/browser.ini
@@ -695,16 +695,17 @@ skip-if = (verify && !debug && (os == 'l
 skip-if = (os == "win" && ccov) # Bug 1424154
 [browser_dbg-debugger-buttons.js]
 [browser_dbg-editor-gutter.js]
 [browser_dbg-editor-select.js]
 [browser_dbg-editor-highlight.js]
 [browser_dbg-ember-quickstart.js]
 [browser_dbg-expressions.js]
 [browser_dbg-expressions-error.js]
+[browser_dbg-expressions-focus.js]
 [browser_dbg-iframes.js]
 [browser_dbg-inline-cache.js]
 skip-if = ccov && os == 'win' # Bug 1443132
 [browser_dbg-inspector-integration.js]
 [browser_dbg-keyboard-navigation.js]
 [browser_dbg-keyboard-shortcuts.js]
 skip-if = os == "linux" # bug 1351952
 [browser_dbg-layout-changes.js]
new file mode 100644
--- /dev/null
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-expressions-focus.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+// Ensures the input is displayed and focused when "+" is clicked
+add_task(async function() {
+  const dbg = await initDebugger("doc-script-switching.html");
+  // Close the panel
+  clickElementWithSelector(dbg, ".watch-expressions-pane ._header");
+  // Click + to add the new expression
+  clickElementWithSelector(dbg, ".watch-expressions-pane ._header .plus");
+  // Ensure element gets focused
+  await waitForElementWithSelector(dbg, ".expression-input-container.focused");
+  // Ensure the element is focused
+  is(
+    dbg.win.document.activeElement.classList.contains("input-expression"),
+    true
+  );
+});
--- a/devtools/client/debugger/new/test/mochitest/browser_dbg-expressions.js
+++ b/devtools/client/debugger/new/test/mochitest/browser_dbg-expressions.js
@@ -1,10 +1,11 @@
-/* Any copyright is dedicated to the Public Domain.
- * http://creativecommons.org/publicdomain/zero/1.0/ */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 /**
  * tests the watch expressions component
  * 1. add watch expressions
  * 2. edit watch expressions
  * 3. delete watch expressions
  * 4. expanding properties when not paused
  */