Bug 1024913 - Move jsterm auto-focus handling into App.js; r=bgrins.
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 10 Sep 2018 10:22:47 +0000
changeset 435381 28becf26d84b6e6f767d71b3252d7643a75a4ef7
parent 435380 ab579e9e03e7b927b8d4645da6f27bfacc2bd2eb
child 435382 3025bb790d390f626897f8f3878d761254d60ec7
push id69008
push usernchevobbe@mozilla.com
push dateMon, 10 Sep 2018 11:59:01 +0000
treeherderautoland@28becf26d84b [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1024913
milestone64.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 1024913 - Move jsterm auto-focus handling into App.js; r=bgrins. The App component takes the whole document space, so we can move the code that listen for every click in the console UI to decide if the jsterm should be focused or not. This feels more like the React way, and will also provide us better access to the store and the props when we need them in this focus handling (like this will be the case for hiding the reverse search UI). Depends on D5150 Differential Revision: https://phabricator.services.mozilla.com/D5152
devtools/client/webconsole/components/App.js
devtools/client/webconsole/webconsole-output-wrapper.js
--- a/devtools/client/webconsole/components/App.js
+++ b/devtools/client/webconsole/components/App.js
@@ -45,19 +45,57 @@ class App extends Component {
       closeSplitConsole: PropTypes.func.isRequired,
       jstermCodeMirror: PropTypes.bool,
     };
   }
 
   constructor(props) {
     super(props);
 
+    this.onClick = this.onClick.bind(this);
     this.onPaste = this.onPaste.bind(this);
   }
 
+  onClick(event) {
+    const target = event.originalTarget || event.target;
+    const {
+      hud,
+    } = this.props;
+
+    // Do not focus on middle/right-click or 2+ clicks.
+    if (event.detail !== 1 || event.button !== 0) {
+      return;
+    }
+
+    // Do not focus if a link was clicked
+    if (target.closest("a")) {
+      return;
+    }
+
+    // Do not focus if an input field was clicked
+    if (target.closest("input")) {
+      return;
+    }
+    // Do not focus if something other than the output region was clicked
+    // (including e.g. the clear messages button in toolbar)
+    if (!target.closest(".webconsole-output-wrapper")) {
+      return;
+    }
+
+    // Do not focus if something is selected
+    const selection = hud.document.defaultView.getSelection();
+    if (selection && !selection.isCollapsed) {
+      return;
+    }
+
+    if (hud && hud.jsterm) {
+      hud.jsterm.focus();
+    }
+  }
+
   onPaste(event) {
     const {
       dispatch,
       hud,
       notifications,
     } = this.props;
 
     const {
@@ -135,16 +173,17 @@ class App extends Component {
     // * FilterBar - Buttons & free text for content filtering
     // * Content - List of logs & messages
     // * SideBar - Object inspector
     // * NotificationBox - Notifications for JSTerm (self-xss warning at the moment)
     // * JSTerm - Input command line.
     return (
       div({
         className: classNames.join(" "),
+        onClick: this.onClick,
         ref: node => {
           this.node = node;
         }},
         div({className: "webconsole-flex-wrapper"},
           FilterBar({
             hidePersistLogsCheckbox: hud.isBrowserConsole,
             serviceContainer: {
               attachRefToHud
--- a/devtools/client/webconsole/webconsole-output-wrapper.js
+++ b/devtools/client/webconsole/webconsole-output-wrapper.js
@@ -47,51 +47,16 @@ function WebConsoleOutputWrapper(parentN
 }
 
 WebConsoleOutputWrapper.prototype = {
   init: function() {
     return new Promise((resolve) => {
       const attachRefToHud = (id, node) => {
         this.hud[id] = node;
       };
-      // Focus the input line whenever the output area is clicked.
-      this.parentNode.addEventListener("click", (event) => {
-        // Do not focus on middle/right-click or 2+ clicks.
-        if (event.detail !== 1 || event.button !== 0) {
-          return;
-        }
-
-        // Do not focus if a link was clicked
-        const target = event.originalTarget || event.target;
-        if (target.closest("a")) {
-          return;
-        }
-
-        // Do not focus if an input field was clicked
-        if (target.closest("input")) {
-          return;
-        }
-
-        // Do not focus if something other than the output region was clicked
-        // (including e.g. the clear messages button in toolbar)
-        if (!target.closest(".webconsole-output-wrapper")) {
-          return;
-        }
-
-        // Do not focus if something is selected
-        const selection = this.document.defaultView.getSelection();
-        if (selection && !selection.isCollapsed) {
-          return;
-        }
-
-        if (this.hud && this.hud.jsterm) {
-          this.hud.jsterm.focus();
-        }
-      });
-
       const { hud } = this;
       const serviceContainer = {
         attachRefToHud,
         emitNewMessage: (node, messageId, timeStamp) => {
           hud.emit("new-messages", new Set([{
             node,
             messageId,
             timeStamp,