Bug 1409064 - Network Monitor to ES6 classes r=Honza

MozReview-Commit-ID: FBuucEQ8Zhs

--HG--
extra : rebase_source : 858b118df3ce44c8da5794c405d9b8f029f6c7e8

devtools/client/netmonitor/src/components/HeadersPanel.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -49,21 +49,28 @@ const SUMMARY_VERSION = L10N.getStr("netmonitor.summary.version");
  * Headers panel component
  * Lists basic information about the request
  */
-const HeadersPanel = createClass({
-  displayName: "HeadersPanel",
-
-  propTypes: {
-    cloneSelectedRequest: PropTypes.func.isRequired,
-    request: PropTypes.object.isRequired,
-    renderValue: PropTypes.func,
-    openLink: PropTypes.func,
-  },
-
-  getInitialState() {
+class HeadersPanel extends Component {
+  static get propTypes() {
     return {
+      cloneSelectedRequest: PropTypes.func.isRequired,
+      request: PropTypes.object.isRequired,
+      renderValue: PropTypes.func,
+      openLink: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       rawHeadersOpened: false,
     };
-  },
+
+    this.getProperties = this.getProperties.bind(this);
+    this.toggleRawHeaders = this.toggleRawHeaders.bind(this);
+    this.renderSummary = this.renderSummary.bind(this);
+    this.renderValue = this.renderValue.bind(this);
+  }
 
   getProperties(headers, title) {
     if (headers && headers.headers.length) {
@@ -80,13 +87,13 @@ const HeadersPanel = createClass({
     }
 
     return null;
-  },
+  }
 
   toggleRawHeaders() {
     this.setState({
       rawHeadersOpened: !this.state.rawHeadersOpened,
     });
-  },
+  }
 
   renderSummary(label, value) {
     return (
@@ -101,7 +108,7 @@ const HeadersPanel = createClass({
         }),
       )
     );
-  },
+  }
 
   renderValue(props) {
     const member = props.member;
@@ -127,7 +134,7 @@ const HeadersPanel = createClass({
         }) : null
       )
     );
-  },
+  }
 
   render() {
     const {
@@ -273,6 +280,6 @@ const HeadersPanel = createClass({
       )
     );
   }
-});
+}
 
 module.exports = HeadersPanel;

devtools/client/netmonitor/src/components/MonitorPanel.js

@@ -6,7 +6,7 @@
 
 const Services = require("Services");
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -29,33 +29,37 @@ const MediaQueryList = window.matchMedia("(min-width: 700px)");
  * Monitor panel component
  * The main panel for displaying various network request information
  */
-const MonitorPanel = createClass({
-  displayName: "MonitorPanel",
-
-  propTypes: {
-    connector: PropTypes.object.isRequired,
-    isEmpty: PropTypes.bool.isRequired,
-    networkDetailsOpen: PropTypes.bool.isRequired,
-    openNetworkDetails: PropTypes.func.isRequired,
-    request: PropTypes.object,
-    sourceMapService: PropTypes.object,
-    openLink: PropTypes.func,
-    updateRequest: PropTypes.func.isRequired,
-  },
-
-  getInitialState() {
+class MonitorPanel extends Component {
+  static get propTypes() {
     return {
+      connector: PropTypes.object.isRequired,
+      isEmpty: PropTypes.bool.isRequired,
+      networkDetailsOpen: PropTypes.bool.isRequired,
+      openNetworkDetails: PropTypes.func.isRequired,
+      request: PropTypes.object,
+      sourceMapService: PropTypes.object,
+      openLink: PropTypes.func,
+      updateRequest: PropTypes.func.isRequired,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       isVerticalSpliter: MediaQueryList.matches,
     };
-  },
+
+    this.onLayoutChange = this.onLayoutChange.bind(this);
+  }
 
   componentDidMount() {
     MediaQueryList.addListener(this.onLayoutChange);
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     updateFormDataSections(nextProps);
-  },
+  }
 
   componentWillUnmount() {
     MediaQueryList.removeListener(this.onLayoutChange);
@@ -70,13 +74,13 @@ const MonitorPanel = createClass({
       Services.prefs.setIntPref(
         "devtools.netmonitor.panes-network-details-height", clientHeight);
     }
-  },
+  }
 
   onLayoutChange() {
     this.setState({
       isVerticalSpliter: MediaQueryList.matches,
     });
-  },
+  }
 
   render() {
     let {
@@ -116,7 +120,7 @@ const MonitorPanel = createClass({
       )
     );
   }
-});
+}
 
 module.exports = connect(
   (state) => ({

devtools/client/netmonitor/src/components/ParamsPanel.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -39,23 +39,23 @@ const SECTION_NAMES = [
  * Params panel component
  * Displays the GET parameters and POST data of a request
  */
-const ParamsPanel = createClass({
-  displayName: "ParamsPanel",
-
-  propTypes: {
-    connector: PropTypes.object.isRequired,
-    openLink: PropTypes.func,
-    request: PropTypes.object.isRequired,
-    updateRequest: PropTypes.func.isRequired,
-  },
+class ParamsPanel extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+      request: PropTypes.object.isRequired,
+      updateRequest: PropTypes.func.isRequired,
+    };
+  }
 
   componentDidMount() {
     updateFormDataSections(this.props);
-  },
+  }
 
   componentWillReceiveProps(nextProps) {
     updateFormDataSections(nextProps);
-  },
+  }
 
   render() {
     let {
@@ -124,7 +124,7 @@ const ParamsPanel = createClass({
       )
     );
   }
-});
+}
 
 /**
  * Mapping array to dict for TreeView usage.

devtools/client/netmonitor/src/components/PropertiesView.js

@@ -7,7 +7,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -40,20 +40,20 @@ const EDITOR_CONFIG_ID = "EDITOR_CONFIG";
  * Source editor - Enable by specifying object level 1 property name to EDITOR_CONFIG_ID.
  * Rep - Default enabled.
  */
-const PropertiesView = createClass({
-  displayName: "PropertiesView",
+class PropertiesView extends Component {
+  static get propTypes() {
+    return {
+      object: PropTypes.object,
+      enableInput: PropTypes.bool,
+      expandableStrings: PropTypes.bool,
+      filterPlaceHolder: PropTypes.string,
+      sectionNames: PropTypes.array,
+      openLink: PropTypes.func,
+      cropLimit: PropTypes.number
+    };
+  }
 
-  propTypes: {
-    object: PropTypes.object,
-    enableInput: PropTypes.bool,
-    expandableStrings: PropTypes.bool,
-    filterPlaceHolder: PropTypes.string,
-    sectionNames: PropTypes.array,
-    openLink: PropTypes.func,
-    cropLimit: PropTypes.number
-  },
-
-  getDefaultProps() {
+  static get defaultProps() {
     return {
       enableInput: true,
       enableFilter: true,
@@ -62,17 +62,26 @@ const PropertiesView = createClass({
       sectionNames: [],
       cropLimit: 1024
     };
-  },
+  }
 
-  getInitialState() {
-    return {
+  constructor(props) {
+    super(props);
+
+    this.state = {
       filterText: "",
     };
-  },
+
+    this.getRowClass = this.getRowClass.bind(this);
+    this.onFilter = this.onFilter.bind(this);
+    this.renderRowWithEditor = this.renderRowWithEditor.bind(this);
+    this.renderValueWithRep = this.renderValueWithRep.bind(this);
+    this.shouldRenderSearchBox = this.shouldRenderSearchBox.bind(this);
+    this.updateFilterText = this.updateFilterText.bind(this);
+  }
 
   getRowClass(object, sectionNames) {
     return sectionNames.includes(object.name) ? "tree-section" : "";
-  },
+  }
 
   onFilter(object, whiteList) {
     let { name, value } = object;
@@ -84,7 +93,7 @@ const PropertiesView = createClass({
 
     let jsonString = JSON.stringify({ [name]: value }).toLowerCase();
     return jsonString.includes(filterText.toLowerCase());
-  },
+  }
 
   renderRowWithEditor(props) {
     const { level, name, value, path } = props.member;
@@ -106,7 +115,7 @@ const PropertiesView = createClass({
     }
 
     return TreeRow(props);
-  },
+  }
 
   renderValueWithRep(props) {
     const { member } = props;
@@ -128,18 +137,18 @@ const PropertiesView = createClass({
       mode: MODE.TINY,
       cropLimit: this.props.cropLimit,
     }));
-  },
+  }
 
   shouldRenderSearchBox(object) {
     return this.props.enableFilter && object && Object.keys(object)
       .filter((section) => !object[section][EDITOR_CONFIG_ID]).length > 0;
-  },
+  }
 
   updateFilterText(filterText) {
     this.setState({
       filterText,
     });
-  },
+  }
 
   render() {
     const {
@@ -191,6 +200,6 @@ const PropertiesView = createClass({
       )
     );
   }
-});
+}
 
 module.exports = PropertiesView;

devtools/client/netmonitor/src/components/RequestListColumnCause.js

@@ -5,24 +5,24 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { div } = DOM;
 
-const RequestListColumnCause = createClass({
-  displayName: "RequestListColumnCause",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-    onCauseBadgeMouseDown: PropTypes.func.isRequired,
-  },
+class RequestListColumnCause extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onCauseBadgeMouseDown: PropTypes.func.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.cause !== nextProps.item.cause;
-  },
+  }
 
   render() {
     let {
@@ -49,6 +49,6 @@ const RequestListColumnCause = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnCause;

devtools/client/netmonitor/src/components/RequestListColumnContentSize.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,16 +13,16 @@ const { getFormattedSize } = require("../utils/format-utils");
 
 const { div } = DOM;
 
-const RequestListColumnContentSize = createClass({
-  displayName: "RequestListColumnContentSize",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnContentSize extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.contentSize !== nextProps.item.contentSize;
-  },
+  }
 
   render() {
     let { contentSize } = this.props.item;
@@ -31,6 +31,6 @@ const RequestListColumnContentSize = createClass({
       div({ className: "requests-list-column requests-list-size", title: size }, size)
     );
   }
-});
+}
 
 module.exports = RequestListColumnContentSize;

devtools/client/netmonitor/src/components/RequestListColumnCookies.js

@@ -5,19 +5,19 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { div } = DOM;
 
-const RequestListColumnCookies = createClass({
-  displayName: "RequestListColumnCookies",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnCookies extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     let { requestCookies: currRequestCookies = { cookies: [] } } = this.props.item;
@@ -25,7 +25,7 @@ const RequestListColumnCookies = createClass({
     currRequestCookies = currRequestCookies.cookies || currRequestCookies;
     nextRequestCookies = nextRequestCookies.cookies || nextRequestCookies;
     return currRequestCookies !== nextRequestCookies;
-  },
+  }
 
   render() {
     let { requestCookies = { cookies: [] } } = this.props.item;
@@ -38,6 +38,6 @@ const RequestListColumnCookies = createClass({
       }, requestCookiesLength)
     );
   }
-});
+}
 
 module.exports = RequestListColumnCookies;

devtools/client/netmonitor/src/components/RequestListColumnDomain.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -21,17 +21,17 @@ const UPDATED_DOMAIN_PROPS = [
   "urlDetails",
 ];
 
-const RequestListColumnDomain = createClass({
-  displayName: "RequestListColumnDomain",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-    onSecurityIconMouseDown: PropTypes.func.isRequired,
-  },
+class RequestListColumnDomain extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_DOMAIN_PROPS, this.props.item, nextProps.item);
-  },
+  }
 
   render() {
     let { item, onSecurityIconMouseDown } = this.props;
@@ -61,6 +61,6 @@ const RequestListColumnDomain = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnDomain;

devtools/client/netmonitor/src/components/RequestListColumnDuration.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,16 +13,16 @@ const { getFormattedTime } = require("../utils/format-utils");
 
 const { div } = DOM;
 
-const RequestListColumnDuration = createClass({
-  displayName: "RequestListColumnDuration",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnDuration extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.totalTime !== nextProps.item.totalTime;
-  },
+  }
 
   render() {
     let { totalTime } = this.props.item;
@@ -36,6 +36,6 @@ const RequestListColumnDuration = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnDuration;

devtools/client/netmonitor/src/components/RequestListColumnEndTime.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -14,17 +14,17 @@ const { getEndTime } = require("../utils/request-utils");
 
 const { div } = DOM;
 
-const RequestListColumnEndTime = createClass({
-  displayName: "RequestListColumnEndTime",
-
-  propTypes: {
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnEndTime extends Component {
+  static get propTypes() {
+    return {
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return getEndTime(this.props.item) !== getEndTime(nextProps.item);
-  },
+  }
 
   render() {
     let { firstRequestStartedMillis, item } = this.props;
@@ -39,6 +39,6 @@ const RequestListColumnEndTime = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnEndTime;

devtools/client/netmonitor/src/components/RequestListColumnFile.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -18,17 +18,17 @@ const UPDATED_FILE_PROPS = [
   "urlDetails",
 ];
 
-const RequestListColumnFile = createClass({
-  displayName: "RequestListColumnFile",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-    onThumbnailMouseDown: PropTypes.func.isRequired,
-  },
+class RequestListColumnFile extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      onThumbnailMouseDown: PropTypes.func.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_FILE_PROPS, this.props.item, nextProps.item);
-  },
+  }
 
   render() {
     let {
@@ -50,6 +50,6 @@ const RequestListColumnFile = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnFile;

devtools/client/netmonitor/src/components/RequestListColumnLatency.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,18 +13,18 @@ const { getFormattedTime } = require("../utils/format-utils");
 
 const { div } = DOM;
 
-const RequestListColumnLatency = createClass({
-  displayName: "RequestListColumnLatency",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnLatency extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     let { eventTimings: currEventTimings = { timings: {} } } = this.props.item;
     let { eventTimings: nextEventTimings = { timings: {} } } = nextProps.item;
     return currEventTimings.timings.wait !== nextEventTimings.timings.wait;
-  },
+  }
 
   render() {
     let { eventTimings = { timings: {} } } = this.props.item;
@@ -39,6 +39,6 @@ const RequestListColumnLatency = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnLatency;

devtools/client/netmonitor/src/components/RequestListColumnMethod.js

@@ -5,28 +5,28 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { div } = DOM;
 
-const RequestListColumnMethod = createClass({
-  displayName: "RequestListColumnMethod",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnMethod extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.method !== nextProps.item.method;
-  },
+  }
 
   render() {
     let { method } = this.props.item;
     return div({ className: "requests-list-column requests-list-method" }, method);
   }
-});
+}
 
 module.exports = RequestListColumnMethod;

devtools/client/netmonitor/src/components/RequestListColumnProtocol.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,17 +13,17 @@ const { getFormattedProtocol } = require("../utils/request-utils");
 
 const { div } = DOM;
 
-const RequestListColumnProtocol = createClass({
-  displayName: "RequestListColumnProtocol",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnProtocol extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return getFormattedProtocol(this.props.item) !==
       getFormattedProtocol(nextProps.item);
-  },
+  }
 
   render() {
     let protocol = getFormattedProtocol(this.props.item);
@@ -37,6 +37,6 @@ const RequestListColumnProtocol = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnProtocol;

devtools/client/netmonitor/src/components/RequestListColumnRemoteIp.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,16 +13,16 @@ const { getFormattedIPAndPort } = require("../utils/format-utils");
 
 const { div } = DOM;
 
-const RequestListColumnRemoteIP = createClass({
-  displayName: "RequestListColumnRemoteIP",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnRemoteIP extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.remoteAddress !== nextProps.item.remoteAddress;
-  },
+  }
 
   render() {
     let { remoteAddress, remotePort } = this.props.item;
@@ -35,6 +35,6 @@ const RequestListColumnRemoteIP = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnRemoteIP;

devtools/client/netmonitor/src/components/RequestListColumnResponseHeader.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -17,19 +17,19 @@ const { div } = DOM;
  * Renders a response header column in the requests list.  The actual
  * header to show is passed as a prop.
  */
-const RequestListColumnResponseHeader = createClass({
-  displayName: "RequestListColumnResponseHeader",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-    header: PropTypes.string.isRequired,
-  },
+class RequestListColumnResponseHeader extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+      header: PropTypes.string.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     const currHeader = getResponseHeader(this.props.item, this.props.header);
     const nextHeader = getResponseHeader(nextProps.item, nextProps.header);
     return currHeader !== nextHeader;
-  },
+  }
 
   render() {
     let header = getResponseHeader(this.props.item, this.props.header);
@@ -42,6 +42,6 @@ const RequestListColumnResponseHeader = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnResponseHeader;

devtools/client/netmonitor/src/components/RequestListColumnResponseTime.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -14,17 +14,17 @@ const { getResponseTime } = require("../utils/request-utils");
 
 const { div } = DOM;
 
-const RequestListColumnResponseTime = createClass({
-  displayName: "RequestListColumnResponseTime",
-
-  propTypes: {
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnResponseTime extends Component {
+  static get propTypes() {
+    return {
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return getResponseTime(this.props.item) !== getResponseTime(nextProps.item);
-  },
+  }
 
   render() {
     let { firstRequestStartedMillis, item } = this.props;
@@ -40,6 +40,6 @@ const RequestListColumnResponseTime = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnResponseTime;

devtools/client/netmonitor/src/components/RequestListColumnScheme.js

@@ -5,23 +5,23 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { div } = DOM;
 
-const RequestListColumnScheme = createClass({
-  displayName: "RequestListColumnScheme",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnScheme extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.urlDetails.scheme !== nextProps.item.urlDetails.scheme;
-  },
+  }
 
   render() {
     const { urlDetails } = this.props.item;
@@ -34,6 +34,6 @@ const RequestListColumnScheme = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnScheme;

devtools/client/netmonitor/src/components/RequestListColumnSetCookies.js

@@ -5,19 +5,19 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
 
 const { div } = DOM;
 
-const RequestListColumnSetCookies = createClass({
-  displayName: "RequestListColumnSetCookies",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnSetCookies extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     let { responseCookies: currResponseCookies = { cookies: [] } } = this.props.item;
@@ -25,7 +25,7 @@ const RequestListColumnSetCookies = createClass({
     currResponseCookies = currResponseCookies.cookies || currResponseCookies;
     nextResponseCookies = nextResponseCookies.cookies || nextResponseCookies;
     return currResponseCookies !== nextResponseCookies;
-  },
+  }
 
   render() {
     let { responseCookies = { cookies: [] } } = this.props.item;
@@ -38,6 +38,6 @@ const RequestListColumnSetCookies = createClass({
       }, responseCookiesLength)
     );
   }
-});
+}
 
 module.exports = RequestListColumnSetCookies;

devtools/client/netmonitor/src/components/RequestListColumnStartTime.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -14,18 +14,18 @@ const { getStartTime } = require("../utils/request-utils");
 
 const { div } = DOM;
 
-const RequestListColumnStartTime = createClass({
-  displayName: "RequestListColumnStartTime",
-
-  propTypes: {
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnStartTime extends Component {
+  static get propTypes() {
+    return {
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return getStartTime(this.props.item, this.props.firstRequestStartedMillis)
       !== getStartTime(nextProps.item, nextProps.firstRequestStartedMillis);
-  },
+  }
 
   render() {
     let { firstRequestStartedMillis, item } = this.props;
@@ -40,6 +40,6 @@ const RequestListColumnStartTime = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnStartTime;

devtools/client/netmonitor/src/components/RequestListColumnStatus.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -21,16 +21,16 @@ const UPDATED_STATUS_PROPS = [
   "statusText",
 ];
 
-const RequestListColumnStatus = createClass({
-  displayName: "RequestListColumnStatus",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnStatus extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_STATUS_PROPS, this.props.item, nextProps.item);
-  },
+  }
 
   render() {
     let { fromCache, fromServiceWorker, status, statusText } = this.props.item;
@@ -69,6 +69,6 @@ const RequestListColumnStatus = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnStatus;

devtools/client/netmonitor/src/components/RequestListColumnTransferredSize.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -21,16 +21,16 @@ const UPDATED_TRANSFERRED_PROPS = [
   "fromServiceWorker",
 ];
 
-const RequestListColumnTransferredSize = createClass({
-  displayName: "RequestListColumnTransferredSize",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnTransferredSize extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_TRANSFERRED_PROPS, this.props.item, nextProps.item);
-  },
+  }
 
   render() {
     let { fromCache, fromServiceWorker, status, transferredSize } = this.props.item;
@@ -52,6 +52,6 @@ const RequestListColumnTransferredSize = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnTransferredSize;

devtools/client/netmonitor/src/components/RequestListColumnType.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -13,16 +13,16 @@ const { getAbbreviatedMimeType } = require("../utils/request-utils");
 
 const { div } = DOM;
 
-const RequestListColumnType = createClass({
-  displayName: "RequestListColumnType",
-
-  propTypes: {
-    item: PropTypes.object.isRequired,
-  },
+class RequestListColumnType extends Component {
+  static get propTypes() {
+    return {
+      item: PropTypes.object.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return this.props.item.mimeType !== nextProps.item.mimeType;
-  },
+  }
 
   render() {
     let { mimeType } = this.props.item;
@@ -41,6 +41,6 @@ const RequestListColumnType = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListColumnType;

devtools/client/netmonitor/src/components/RequestListColumnWaterfall.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -23,19 +23,19 @@ const UPDATED_WATERFALL_PROPS = [
 // List of properties of the timing info we want to create boxes for
 const TIMING_KEYS = ["blocked", "dns", "connect", "ssl", "send", "wait", "receive"];
 
-const RequestListColumnWaterfall = createClass({
-  displayName: "RequestListColumnWaterfall",
-
-  propTypes: {
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    item: PropTypes.object.isRequired,
-    onWaterfallMouseDown: PropTypes.func.isRequired,
-  },
+class RequestListColumnWaterfall extends Component {
+  static get propTypes() {
+    return {
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+    };
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item) ||
       this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis;
-  },
+  }
 
   render() {
     let { firstRequestStartedMillis, item, onWaterfallMouseDown } = this.props;
@@ -62,7 +62,7 @@ const RequestListColumnWaterfall = createClass({
       )
     );
   }
-});
+}
 
 function timingTooltip(item) {
   let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;

devtools/client/netmonitor/src/components/RequestListContent.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -31,25 +31,36 @@ const REQUESTS_TOOLTIP_TOGGLE_DELAY = 500;
 /**
  * Renders the actual contents of the request list.
  */
-const RequestListContent = createClass({
-  displayName: "RequestListContent",
+class RequestListContent extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      columns: PropTypes.object.isRequired,
+      dispatch: PropTypes.func.isRequired,
+      displayedRequests: PropTypes.object.isRequired,
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      fromCache: PropTypes.bool,
+      onCauseBadgeMouseDown: PropTypes.func.isRequired,
+      onItemMouseDown: PropTypes.func.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+      onSelectDelta: PropTypes.func.isRequired,
+      onThumbnailMouseDown: PropTypes.func.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+      scale: PropTypes.number,
+      selectedRequestId: PropTypes.string,
+    };
+  }
 
-  propTypes: {
-    connector: PropTypes.object.isRequired,
-    columns: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    displayedRequests: PropTypes.object.isRequired,
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    fromCache: PropTypes.bool,
-    onCauseBadgeMouseDown: PropTypes.func.isRequired,
-    onItemMouseDown: PropTypes.func.isRequired,
-    onSecurityIconMouseDown: PropTypes.func.isRequired,
-    onSelectDelta: PropTypes.func.isRequired,
-    onThumbnailMouseDown: PropTypes.func.isRequired,
-    onWaterfallMouseDown: PropTypes.func.isRequired,
-    scale: PropTypes.number,
-    selectedRequestId: PropTypes.string,
-  },
+  constructor(props) {
+    super(props);
+    this.setScalingStyles = this.setScalingStyles.bind(this);
+    this.isScrolledToBottom = this.isScrolledToBottom.bind(this);
+    this.onHover = this.onHover.bind(this);
+    this.onScroll = this.onScroll.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.onFocusedNodeChange = this.onFocusedNodeChange.bind(this);
+  }
 
   componentWillMount() {
     const { dispatch, connector } = this.props;
@@ -60,7 +71,7 @@ const RequestListContent = createClass({
       openStatistics: (open) => dispatch(Actions.openStatistics(connector, open)),
     });
     this.tooltip = new HTMLTooltip(window.parent.document, { type: "arrow" });
-  },
+  }
 
   componentDidMount() {
     // Set the CSS variables for waterfall scaling
@@ -74,14 +85,14 @@ const RequestListContent = createClass({
 
     // Install event handler to hide the tooltip on scroll
     this.refs.contentEl.addEventListener("scroll", this.onScroll, true);
-  },
+  }
 
   componentWillUpdate(nextProps) {
     // Check if the list is scrolled to bottom before the UI update.
     // The scroll is ever needed only if new rows are added to the list.
     const delta = nextProps.displayedRequests.size - this.props.displayedRequests.size;
     this.shouldScrollBottom = delta > 0 && this.isScrolledToBottom();
-  },
+  }
 
   componentDidUpdate(prevProps) {
     // Update the CSS variables for waterfall scaling after props change
@@ -92,14 +103,14 @@ const RequestListContent = createClass({
       let node = this.refs.contentEl;
       node.scrollTop = node.scrollHeight;
     }
-  },
+  }
 
   componentWillUnmount() {
     this.refs.contentEl.removeEventListener("scroll", this.onScroll, true);
 
     // Uninstall the tooltip event handler
     this.tooltip.stopTogglingOnHover();
-  },
+  }
 
   /**
    * Set the CSS variables for waterfall scaling. If React supported setting CSS
@@ -119,7 +130,7 @@ const RequestListContent = createClass({
     style.removeProperty("--timings-rev-scale");
     style.setProperty("--timings-scale", scale);
     style.setProperty("--timings-rev-scale", 1 / scale);
-  },
+  }
 
   isScrolledToBottom() {
     const { contentEl } = this.refs;
@@ -133,7 +144,7 @@ const RequestListContent = createClass({
     let contentRect = contentEl.getBoundingClientRect();
 
     return (lastChildRect.height + lastChildRect.top) <= contentRect.bottom;
-  },
+  }
 
   /**
    * The predicate used when deciding whether a popup should be shown
@@ -165,14 +176,14 @@ const RequestListContent = createClass({
     }
 
     return false;
-  },
+  }
 
   /**
    * Scroll listener for the requests menu view.
    */
   onScroll() {
     this.tooltip.hide();
-  },
+  }
 
   /**
    * Handler for keyboard events. For arrow up/down, page up/down, home/end,
@@ -210,12 +221,12 @@ const RequestListContent = createClass({
       evt.stopPropagation();
       this.props.onSelectDelta(delta);
     }
-  },
+  }
 
   onContextMenu(evt) {
     evt.preventDefault();
     this.contextMenu.open(evt);
-  },
+  }
 
   /**
    * If selection has just changed (by keyboard navigation), don't keep the list
@@ -223,7 +234,7 @@ const RequestListContent = createClass({
    */
   onFocusedNodeChange() {
     this.shouldScrollBottom = false;
-  },
+  }
 
   render() {
     const {
@@ -267,8 +278,8 @@ const RequestListContent = createClass({
         )
       )
     );
-  },
-});
+  }
+}
 
 module.exports = connect(
   (state) => ({

devtools/client/netmonitor/src/components/RequestListEmptyNotice.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -32,14 +32,14 @@ const PERFORMANCE_NOTICE_3 = L10N.getStr("netmonitor.perfNotice3");
  * UI displayed when the request list is empty. Contains instructions on reloading
  * the page and on triggering performance analysis of the page.
  */
-const RequestListEmptyNotice = createClass({
-  displayName: "RequestListEmptyNotice",
-
-  propTypes: {
-    connector: PropTypes.object.isRequired,
-    onReloadClick: PropTypes.func.isRequired,
-    onPerfClick: PropTypes.func.isRequired,
-  },
+class RequestListEmptyNotice extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      onReloadClick: PropTypes.func.isRequired,
+      onPerfClick: PropTypes.func.isRequired,
+    };
+  }
 
   render() {
     return div(
@@ -71,7 +71,7 @@ const RequestListEmptyNotice = createClass({
       )
     );
   }
-});
+}
 
 module.exports = connect(
   undefined,

devtools/client/netmonitor/src/components/RequestListHeader.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   PropTypes,
   DOM,
 } = require("devtools/client/shared/vendor/react");
@@ -27,19 +27,26 @@ const { div, button } = DOM;
  * Displays tick marks in the waterfall column header.
  * Also draws the waterfall background canvas and updates it when needed.
  */
-const RequestListHeader = createClass({
-  displayName: "RequestListHeader",
+class RequestListHeader extends Component {
+  static get propTypes() {
+    return {
+      columns: PropTypes.object.isRequired,
+      resetColumns: PropTypes.func.isRequired,
+      resizeWaterfall: PropTypes.func.isRequired,
+      scale: PropTypes.number,
+      sort: PropTypes.object,
+      sortBy: PropTypes.func.isRequired,
+      toggleColumn: PropTypes.func.isRequired,
+      waterfallWidth: PropTypes.number,
+    };
+  }
 
-  propTypes: {
-    columns: PropTypes.object.isRequired,
-    resetColumns: PropTypes.func.isRequired,
-    resizeWaterfall: PropTypes.func.isRequired,
-    scale: PropTypes.number,
-    sort: PropTypes.object,
-    sortBy: PropTypes.func.isRequired,
-    toggleColumn: PropTypes.func.isRequired,
-    waterfallWidth: PropTypes.number,
-  },
+  constructor(props) {
+    super(props);
+    this.onContextMenu = this.onContextMenu.bind(this);
+    this.drawBackground = this.drawBackground.bind(this);
+    this.resizeWaterfall = this.resizeWaterfall.bind(this);
+  }
 
   componentWillMount() {
     const { resetColumns, toggleColumn } = this.props;
@@ -47,7 +54,7 @@ const RequestListHeader = createClass({
       resetColumns,
       toggleColumn,
     });
-  },
+  }
 
   componentDidMount() {
     // Create the object that takes care of drawing the waterfall canvas background
@@ -56,23 +63,23 @@ const RequestListHeader = createClass({
     this.resizeWaterfall();
     window.addEventListener("resize", this.resizeWaterfall);
     addThemeObserver(this.drawBackground);
-  },
+  }
 
   componentDidUpdate() {
     this.drawBackground();
-  },
+  }
 
   componentWillUnmount() {
     this.background.destroy();
     this.background = null;
     window.removeEventListener("resize", this.resizeWaterfall);
     removeThemeObserver(this.drawBackground);
-  },
+  }
 
   onContextMenu(evt) {
     evt.preventDefault();
     this.contextMenu.open(evt);
-  },
+  }
 
   drawBackground() {
     // The background component is theme dependent, so add the current theme to the props.
@@ -80,7 +87,7 @@ const RequestListHeader = createClass({
       theme: getTheme()
     });
     this.background.draw(props);
-  },
+  }
 
   resizeWaterfall() {
     let waterfallHeader = this.refs.waterfallHeader;
@@ -91,7 +98,7 @@ const RequestListHeader = createClass({
       this._resizeTimerId = window.requestIdleCallback(() =>
         this.props.resizeWaterfall(waterfallHeader.getBoundingClientRect().width));
     }
-  },
+  }
 
   render() {
     let { columns, scale, sort, sortBy, waterfallWidth } = this.props;
@@ -141,7 +148,7 @@ const RequestListHeader = createClass({
       )
     );
   }
-});
+}
 
 /**
  * Build the waterfall header - timing tick marks with the right spacing

devtools/client/netmonitor/src/components/RequestListItem.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -73,37 +73,37 @@ const UPDATED_REQ_PROPS = [
 /**
  * Render one row in the request list.
  */
-const RequestListItem = createClass({
-  displayName: "RequestListItem",
-
-  propTypes: {
-    columns: PropTypes.object.isRequired,
-    item: PropTypes.object.isRequired,
-    index: PropTypes.number.isRequired,
-    isSelected: PropTypes.bool.isRequired,
-    firstRequestStartedMillis: PropTypes.number.isRequired,
-    fromCache: PropTypes.bool,
-    onCauseBadgeMouseDown: PropTypes.func.isRequired,
-    onContextMenu: PropTypes.func.isRequired,
-    onFocusedNodeChange: PropTypes.func,
-    onMouseDown: PropTypes.func.isRequired,
-    onSecurityIconMouseDown: PropTypes.func.isRequired,
-    onThumbnailMouseDown: PropTypes.func.isRequired,
-    onWaterfallMouseDown: PropTypes.func.isRequired,
-    waterfallWidth: PropTypes.number,
-  },
+class RequestListItem extends Component {
+  static get propTypes() {
+    return {
+      columns: PropTypes.object.isRequired,
+      item: PropTypes.object.isRequired,
+      index: PropTypes.number.isRequired,
+      isSelected: PropTypes.bool.isRequired,
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      fromCache: PropTypes.bool,
+      onCauseBadgeMouseDown: PropTypes.func.isRequired,
+      onContextMenu: PropTypes.func.isRequired,
+      onFocusedNodeChange: PropTypes.func,
+      onMouseDown: PropTypes.func.isRequired,
+      onSecurityIconMouseDown: PropTypes.func.isRequired,
+      onThumbnailMouseDown: PropTypes.func.isRequired,
+      onWaterfallMouseDown: PropTypes.func.isRequired,
+      waterfallWidth: PropTypes.number,
+    };
+  }
 
   componentDidMount() {
     if (this.props.isSelected) {
       this.refs.listItem.focus();
     }
-  },
+  }
 
   shouldComponentUpdate(nextProps) {
     return !propertiesEqual(UPDATED_REQ_ITEM_PROPS, this.props.item, nextProps.item) ||
       !propertiesEqual(UPDATED_REQ_PROPS, this.props, nextProps) ||
       !I.is(this.props.columns, nextProps.columns);
-  },
+  }
 
   componentDidUpdate(prevProps) {
     if (!prevProps.isSelected && this.props.isSelected) {
@@ -112,7 +112,7 @@ const RequestListItem = createClass({
         this.props.onFocusedNodeChange();
       }
     }
-  },
+  }
 
   render() {
     let {
@@ -174,6 +174,6 @@ const RequestListItem = createClass({
       )
     );
   }
-});
+}
 
 module.exports = RequestListItem;

devtools/client/netmonitor/src/components/ResponsePanel.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -34,22 +34,27 @@ const JSON_VIEW_MIME_TYPE = "application/vnd.mozilla.json.view";
  * Response panel component
  * Displays the GET parameters and POST data of a request
  */
-const ResponsePanel = createClass({
-  displayName: "ResponsePanel",
-
-  propTypes: {
-    request: PropTypes.object.isRequired,
-    openLink: PropTypes.func,
-  },
-
-  getInitialState() {
+class ResponsePanel extends Component {
+  static get propTypes() {
     return {
+      request: PropTypes.object.isRequired,
+      openLink: PropTypes.func,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       imageDimensions: {
         width: 0,
         height: 0,
       },
     };
-  },
+
+    this.updateImageDimemsions = this.updateImageDimemsions.bind(this);
+    this.isJSON = this.isJSON.bind(this);
+  }
 
   updateImageDimemsions({ target }) {
     this.setState({
@@ -58,7 +63,7 @@ const ResponsePanel = createClass({
         height: target.naturalHeight,
       },
     });
-  },
+  }
 
   // Handle json, which we tentatively identify by checking the MIME type
   // for "json" after any word boundary. This works for the standard
@@ -114,7 +119,7 @@ const ResponsePanel = createClass({
     }
 
     return null;
-  },
+  }
 
   render() {
     let { openLink, request } = this.props;
@@ -193,6 +198,6 @@ const ResponsePanel = createClass({
       )
     );
   }
-});
+}
 
 module.exports = ResponsePanel;

devtools/client/netmonitor/src/components/SourceEditor.js

@@ -5,7 +5,7 @@
 "use strict";
 
 const {
-  createClass,
+  Component,
   DOM,
   PropTypes,
 } = require("devtools/client/shared/vendor/react");
@@ -17,15 +17,15 @@ const { div } = DOM;
 /**
  * CodeMirror editor as a React component
  */
-const SourceEditor = createClass({
-  displayName: "SourceEditor",
-
-  propTypes: {
-    // Source editor syntax hightligh mode, which is a mime type defined in CodeMirror
-    mode: PropTypes.string,
-    // Source editor content
-    text: PropTypes.string,
-  },
+class SourceEditor extends Component {
+  static get propTypes() {
+    return {
+      // Source editor syntax hightligh mode, which is a mime type defined in CodeMirror
+      mode: PropTypes.string,
+      // Source editor content
+      text: PropTypes.string,
+    };
+  }
 
   componentDidMount() {
     const { mode, text } = this.props;
@@ -43,7 +43,7 @@ const SourceEditor = createClass({
     this.editorTimeout = setTimeout(() => {
       this.editor.appendToLocalElement(this.refs.editorElement);
     });
-  },
+  }
 
   componentDidUpdate(prevProps) {
     const { mode, text } = this.props;
@@ -56,12 +56,12 @@ const SourceEditor = createClass({
     if (prevProps.text !== text) {
       this.editor.setText(text);
     }
-  },
+  }
 
   componentWillUnmount() {
     clearTimeout(this.editorTimeout);
     this.editor.destroy();
-  },
+  }
 
   render() {
     return (
@@ -71,6 +71,6 @@ const SourceEditor = createClass({
       })
     );
   }
-});
+}
 
 module.exports = SourceEditor;

devtools/client/netmonitor/src/components/StatisticsPanel.js

@@ -7,7 +7,7 @@
 const ReactDOM = require("devtools/client/shared/vendor/react-dom");
 const { FILTER_TAGS } = require("../constants");
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -40,25 +40,34 @@ const CHARTS_CACHE_DISABLED = L10N.getStr("charts.cacheDisabled");
  * Performance analysis tool which shows you how long the browser takes to
  * download the different parts of your site.
  */
-const StatisticsPanel = createClass({
-  displayName: "StatisticsPanel",
-
-  propTypes: {
-    connector: PropTypes.object.isRequired,
-    closeStatistics: PropTypes.func.isRequired,
-    enableRequestFilterTypeOnly: PropTypes.func.isRequired,
-    requests: PropTypes.object,
-  },
-
-  getInitialState() {
+class StatisticsPanel extends Component {
+  static get propTypes() {
     return {
+      connector: PropTypes.object.isRequired,
+      closeStatistics: PropTypes.func.isRequired,
+      enableRequestFilterTypeOnly: PropTypes.func.isRequired,
+      requests: PropTypes.object,
+    };
+  }
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
       isVerticalSpliter: MediaQueryList.matches,
     };
-  },
+
+    this.createMDNLink = this.createMDNLink.bind(this);
+    this.unmountMDNLinkContainers = this.unmountMDNLinkContainers.bind(this);
+    this.createChart = this.createChart.bind(this);
+    this.sanitizeChartDataSource = this.sanitizeChartDataSource.bind(this);
+    this.responseIsFresh = this.responseIsFresh.bind(this);
+    this.onLayoutChange = this.onLayoutChange.bind(this);
+  }
 
   componentWillMount() {
     this.mdnLinkContainerNodes = new Map();
-  },
+  }
 
   componentDidUpdate(prevProps) {
     MediaQueryList.addListener(this.onLayoutChange);
@@ -83,12 +92,12 @@ const StatisticsPanel = createClass({
 
     this.createMDNLink("primedCacheChart", getPerformanceAnalysisURL());
     this.createMDNLink("emptyCacheChart", getPerformanceAnalysisURL());
-  },
+  }
 
   componentWillUnmount() {
     MediaQueryList.removeListener(this.onLayoutChange);
     this.unmountMDNLinkContainers();
-  },
+  }
 
   createMDNLink(chartId, url) {
     if (this.mdnLinkContainerNodes.has(chartId)) {
@@ -103,13 +112,13 @@ const StatisticsPanel = createClass({
     title.appendChild(containerNode);
     ReactDOM.render(MDNLink({ url }), containerNode);
     this.mdnLinkContainerNodes.set(chartId, containerNode);
-  },
+  }
 
   unmountMDNLinkContainers() {
     for (let [, node] of this.mdnLinkContainerNodes) {
       ReactDOM.unmountComponentAtNode(node);
     }
-  },
+  }
 
   createChart({ id, title, data }) {
     // Create a new chart.
@@ -166,7 +175,7 @@ const StatisticsPanel = createClass({
     }
 
     container.appendChild(chart.node);
-  },
+  }
 
   sanitizeChartDataSource(requests, emptyCache) {
     const data = FILTER_TAGS.map((type) => ({
@@ -225,7 +234,7 @@ const StatisticsPanel = createClass({
     }
 
     return data.filter(e => e.count > 0);
-  },
+  }
 
   /**
    * Checks if the "Expiration Calculations" defined in section 13.2.4 of the
@@ -263,13 +272,13 @@ const StatisticsPanel = createClass({
     }
 
     return false;
-  },
+  }
 
   onLayoutChange() {
     this.setState({
       isVerticalSpliter: MediaQueryList.matches,
     });
-  },
+  }
 
   render() {
     const { closeStatistics } = this.props;
@@ -297,7 +306,7 @@ const StatisticsPanel = createClass({
       )
     );
   }
-});
+}
 
 module.exports = connect(
   (state) => ({

devtools/client/netmonitor/src/components/Toolbar.js

@@ -6,7 +6,7 @@
 
 const Services = require("Services");
 const {
-  createClass,
+  Component,
   createFactory,
   DOM,
   PropTypes,
@@ -56,58 +56,65 @@ const DISABLE_CACHE_LABEL = L10N.getStr("netmonitor.toolbar.disableCache.label")
  * Toolbar contains a set of useful tools to control network requests
  * as well as set of filters for filtering the content.
  */
-const Toolbar = createClass({
-  displayName: "Toolbar",
+class Toolbar extends Component {
+  static get propTypes() {
+    return {
+      toggleRecording: PropTypes.func.isRequired,
+      recording: PropTypes.bool.isRequired,
+      clearRequests: PropTypes.func.isRequired,
+      requestFilterTypes: PropTypes.array.isRequired,
+      setRequestFilterText: PropTypes.func.isRequired,
+      networkDetailsToggleDisabled: PropTypes.bool.isRequired,
+      networkDetailsOpen: PropTypes.bool.isRequired,
+      toggleNetworkDetails: PropTypes.func.isRequired,
+      enablePersistentLogs: PropTypes.func.isRequired,
+      togglePersistentLogs: PropTypes.func.isRequired,
+      persistentLogsEnabled: PropTypes.bool.isRequired,
+      disableBrowserCache: PropTypes.func.isRequired,
+      toggleBrowserCache: PropTypes.func.isRequired,
+      browserCacheDisabled: PropTypes.bool.isRequired,
+      toggleRequestFilterType: PropTypes.func.isRequired,
+      filteredRequests: PropTypes.object.isRequired,
+    };
+  }
 
-  propTypes: {
-    toggleRecording: PropTypes.func.isRequired,
-    recording: PropTypes.bool.isRequired,
-    clearRequests: PropTypes.func.isRequired,
-    requestFilterTypes: PropTypes.array.isRequired,
-    setRequestFilterText: PropTypes.func.isRequired,
-    networkDetailsToggleDisabled: PropTypes.bool.isRequired,
-    networkDetailsOpen: PropTypes.bool.isRequired,
-    toggleNetworkDetails: PropTypes.func.isRequired,
-    enablePersistentLogs: PropTypes.func.isRequired,
-    togglePersistentLogs: PropTypes.func.isRequired,
-    persistentLogsEnabled: PropTypes.bool.isRequired,
-    disableBrowserCache: PropTypes.func.isRequired,
-    toggleBrowserCache: PropTypes.func.isRequired,
-    browserCacheDisabled: PropTypes.bool.isRequired,
-    toggleRequestFilterType: PropTypes.func.isRequired,
-    filteredRequests: PropTypes.object.isRequired,
-  },
+  constructor(props) {
+    super(props);
+    this.toggleRequestFilterType = this.toggleRequestFilterType.bind(this);
+    this.updatePersistentLogsEnabled = this.updatePersistentLogsEnabled.bind(this);
+    this.updateBrowserCacheDisabled = this.updateBrowserCacheDisabled.bind(this);
+  }
 
   componentDidMount() {
     Services.prefs.addObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                this.updatePersistentLogsEnabled);
     Services.prefs.addObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                this.updateBrowserCacheDisabled);
-  },
+  }
 
   componentWillUnmount() {
     Services.prefs.removeObserver(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF,
                                   this.updatePersistentLogsEnabled);
     Services.prefs.removeObserver(DEVTOOLS_DISABLE_CACHE_PREF,
                                   this.updateBrowserCacheDisabled);
-  },
+  }
 
   toggleRequestFilterType(evt) {
     if (evt.type === "keydown" && (evt.key !== "" || evt.key !== "Enter")) {
       return;
     }
     this.props.toggleRequestFilterType(evt.target.dataset.key);
-  },
+  }
 
   updatePersistentLogsEnabled() {
     this.props.enablePersistentLogs(
       Services.prefs.getBoolPref(DEVTOOLS_ENABLE_PERSISTENT_LOG_PREF));
-  },
+  }
 
   updateBrowserCacheDisabled() {
     this.props.disableBrowserCache(
       Services.prefs.getBoolPref(DEVTOOLS_DISABLE_CACHE_PREF));
-  },
+  }
 
   render() {
     let {
@@ -226,8 +233,8 @@ const Toolbar = createClass({
         )
       )
     );
-  },
-});
+  }
+}
 
 module.exports = connect(
   (state) => ({