Bug 1024913 - Move jsterm auto-focus handling into App.js; r=bgrins.
☠☠ backed out by bda5c062ad28 ☠ ☠
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Mon, 10 Sep 2018 05:15:58 +0000
changeset 435361 7f269add6e5497c1735189b07cd6d17cf6166293
parent 435360 ccd6afc2a739f8fbb25c5439de12e885287ac1c2
child 435362 c4e5a7ff8e53cc3d8ad7d8eec573f6678de66ee8
push id68992
push usernchevobbe@mozilla.com
push dateMon, 10 Sep 2018 05:41:27 +0000
treeherderautoland@7f269add6e54 [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,