refactor highlighter setup

Author: jaredly

frontend/Highlighter/setup.js

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+'use strict';
+
+var Highlighter = require('./Highlighter');
+
+import type * as Agent from '../../agent/Agent';
+
+module.exports = function setup(agent: Agent) {
+  var hl = new Highlighter(window, node => {
+    agent.selectFromDOMNode(node);
+  });
+  agent.on('highlight', data => hl.highlight(data.node, data.name));
+  agent.on('highlightMany', nodes => hl.highlightMany(nodes));
+  agent.on('hideHighlight', () => hl.hideHighlight());
+  agent.on('startInspecting', () => hl.startInspecting());
+  agent.on('stopInspecting', () => hl.stopInspecting());
+  agent.on('shutdown', () => {
+    hl.remove();
+  });
+}
+

shells/chrome/src/backend.js

@@ -12,7 +12,7 @@
 
 var Agent = require('../../../agent/Agent');
 var Bridge = require('../../../agent/Bridge');
-var Highlighter = require('../../../frontend/Highlighter/Highlighter');
+var setupHighlighter = require('../../../frontend/Highlighter/setup');
 var setupRNStyle = require('../../../plugins/ReactNativeStyle/setupBackend');
 
 var inject = require('../../../agent/inject');
@@ -71,31 +71,15 @@ function setup(hook) {
     setupRNStyle(bridge, agent, hook.resolveRNStyle);
   }
 
-  var hl;
   agent.on('shutdown', () => {
     hook.emit('shutdown');
     listeners.forEach(fn => {
       window.removeEventListener('message', fn);
     });
     listeners = [];
-    if (hl) {
-      hl.remove();
-    }
   });
 
   if (!isReactNative) {
-    hl = new Highlighter(window, node => {
-      agent.selectFromDOMNode(node);
-    });
-    // $FlowFixMe flow thinks hl might be undefined
-    agent.on('highlight', data => hl.highlight(data.node, data.name));
-    // $FlowFixMe flow thinks hl might be undefined
-    agent.on('highlightMany', nodes => hl.highlightMany(nodes));
-    // $FlowFixMe flow thinks hl might be undefined
-    agent.on('hideHighlight', () => hl.hideHighlight());
-    // $FlowFixMe flow thinks hl might be undefined
-    agent.on('startInspecting', () => hl.startInspecting());
-    // $FlowFixMe flow thinks hl might be undefined
-    agent.on('stopInspecting', () => hl.stopInspecting());
+    setupHighlighter(agent);
   }
 }

shells/firefox/src/backend.js

@@ -12,7 +12,7 @@
 
 var Agent = require('../../../agent/Agent');
 var Bridge = require('../../../agent/Bridge');
-var Highlighter = require('../../../frontend/Highlighter/Highlighter');
+var setupHighlighter = require('../../../frontend/Highlighter/setup');
 
 var inject = require('../../../agent/inject');
 
@@ -55,39 +55,27 @@ function setup() {
 
   var bridge = new Bridge();
   bridge.attach(wall);
-  var backend = new Agent(window);
-  backend.addBridge(bridge);
-  var hl;
+  var agent = new Agent(window);
+  agent.addBridge(bridge);
 
   var _connectTimeout = setTimeout(function () {
-    console.error('react-devtools backend got no connection');
+    console.error('react-devtools agent got no connection');
   }, 1000);
 
-  backend.once('connected', () => {
-    inject(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, backend, /* lookForOldReact= */true);
+  agent.once('connected', () => {
+    inject(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent, /* lookForOldReact= */true);
     clearTimeout(_connectTimeout);
   });
 
-  backend.on('shutdown', () => {
+  agent.on('shutdown', () => {
     listeners.forEach(fn => {
       window.removeEventListener('message', fn);
     });
     listeners = [];
-    if (hl) {
-      hl.remove();
-    }
   });
 
   if (window.document && window.document.createElement) {
-    hl = new Highlighter(window, node => {
-      backend.selectFromDOMNode(node);
-    });
-    // $FlowFixMe flow things hl might be undefined
-    backend.on('highlight', data => hl.highlight(data.node, data.name));
-    // $FlowFixMe flow things hl might be undefined
-    backend.on('highlightMany', nodes => hl.highlightMany(nodes));
-    // $FlowFixMe flow things hl might be undefined
-    backend.on('hideHighlight', () => hl.hideHighlight());
+    setupHighlighter(agent);
   }
 }
 

shells/plain/backend.js

@@ -12,7 +12,7 @@
 
 var Agent = require('../../agent/Agent');
 var Bridge = require('../../agent/Bridge');
-var Highlighter = require('../../frontend/Highlighter/Highlighter');
+var setupHighlighter = require('../../frontend/Highlighter/setup');
 
 var inject = require('../../agent/inject');
 
@@ -27,18 +27,9 @@ var wall = {
 
 var bridge = new Bridge();
 bridge.attach(wall);
-var backend = new Agent(window);
-backend.addBridge(bridge);
+var agent = new Agent(window);
+agent.addBridge(bridge);
 
-inject(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, backend);
+inject(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, agent);
 
-var hl = new Highlighter(window, node => {
-  backend.selectFromDOMNode(node);
-});
-hl.injectButton();
-backend.on('highlight', data => hl.highlight(data.node, data.name));
-backend.on('highlightMany', nodes => hl.highlightMany(nodes));
-backend.on('hideHighlight', () => hl.hideHighlight());
-
-backend.on('startInspecting', () => hl.startInspecting());
-backend.on('stopInspecting', () => hl.stopInspecting());
+setupHighlighter(agent);