Bug 1422341 - Prepare VisibilityHandler.js for React 16 r=Honza
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Fri, 01 Dec 2017 16:30:30 +0000
changeset 395245 8bc4c9d724e76360fed82573a18edbd68718d251
parent 395244 72a55f3902489b59edb3a650cc27d9693f413529
child 395246 f3ea755aa8c49605a6805c4b8d1d78ae4297343b
push id33037
push userdluca@mozilla.com
push dateWed, 06 Dec 2017 21:58:29 +0000
treeherdermozilla-central@155c25df7f18 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1422341
milestone59.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 1422341 - Prepare VisibilityHandler.js for React 16 r=Honza MozReview-Commit-ID: 9apN31q36qo
devtools/client/shared/components/VisibilityHandler.js
--- a/devtools/client/shared/components/VisibilityHandler.js
+++ b/devtools/client/shared/components/VisibilityHandler.js
@@ -8,40 +8,48 @@
  * Helper class to disable panel rendering when it is in background.
  *
  * Toolbox code hides the iframes when switching to another panel
  * and triggers `visibilitychange` events.
  *
  * See devtools/client/framework/toolbox.js:setIframeVisible().
  */
 
-const {
-  createClass,
-} = require("devtools/client/shared/vendor/react");
+const { Component } = require("devtools/client/shared/vendor/react");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class VisibilityHandler extends Component {
+  static get propTypes() {
+    return {
+      children: PropTypes.element.isRequired
+    };
+  }
 
-const VisibilityHandler = createClass({
+  constructor(props) {
+    super(props);
 
-  displayName: "VisiblityHandler",
+    this.onVisibilityChange = this.onVisibilityChange.bind(this);
+  }
+
+  componentDidMount() {
+    window.addEventListener("visibilitychange", this.onVisibilityChange);
+  }
 
   shouldComponentUpdate() {
     return document.visibilityState == "visible";
-  },
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("visibilitychange", this.onVisibilityChange);
+  }
 
   onVisibilityChange() {
     if (document.visibilityState == "visible") {
       this.forceUpdate();
     }
-  },
-
-  componentDidMount() {
-    window.addEventListener("visibilitychange", this.onVisibilityChange);
-  },
-
-  componentWillUnmount() {
-    window.removeEventListener("visibilitychange", this.onVisibilityChange);
-  },
+  }
 
   render() {
     return this.props.children;
   }
-});
+}
 
 module.exports = VisibilityHandler;