1411531 - Web Console needs to use ES6 classes so that we can switch it over to PureComponent

Status: RESOLVED FIXED

(DevTools :: Console, defect, P2)

Description

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

+++ This bug was initially created as a clone of Bug #1409064 +++

jlast pointed me at https://github.com/reactjs/react-codemod that can help automate these changes.

Comment 1

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: Bug 1411531 - Web Console to ES6 classes

Review commit: https://reviewboard.mozilla.org/r/192884/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/192884/

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8921852 [details]
Bug 1411531 - Web Console to ES6 classes

https://reviewboard.mozilla.org/r/192884/#review198130

r- because it breaks NET log in browser console (using old frontend) : "ReferenceError: Component is not defined"
That's the only thing that seem to break, everything else is working :)

::: devtools/client/webconsole/net/components/cookies-tab.js:19
(Diff revision 1)
>  /**
>   * This template represents 'Cookies' tab displayed when the user
>   * expands network log in the Console panel. It's responsible for rendering
>   * sent and received cookies.
>   */
> -var CookiesTab = React.createClass({
> +class CookiesTab extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/headers-tab.js:19
(Diff revision 1)
>  /**
>   * This template represents 'Headers' tab displayed when the user
>   * expands network log in the Console panel. It's responsible for rendering
>   * request and response HTTP headers.
>   */
> -var HeadersTab = React.createClass({
> +class HeadersTab extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/net-info-body.js:34
(Diff revision 1)
>   * 2) Params - URL parameters
>   * 3) Response - response body
>   * 4) Cookies - request and response cookies
>   * 5) Post - posted data
>   */
> -var NetInfoBody = React.createClass({
> +class NetInfoBody extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/net-info-group-list.js:17
(Diff revision 1)
>  
>  /**
>   * This template is responsible for rendering sections/groups inside tabs.
>   * It's used e.g to display Response and Request headers as separate groups.
>   */
> -var NetInfoGroupList = React.createClass({
> +class NetInfoGroupList extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/net-info-params.js:16
(Diff revision 1)
>  
>  /**
>   * This template renders list of parameters within a group.
>   * It's essentially a list of name + value pairs.
>   */
> -var NetInfoParams = React.createClass({
> +class NetInfoParams extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/params-tab.js:18
(Diff revision 1)
>  /**
>   * This template represents 'Params' tab displayed when the user
>   * expands network log in the Console panel. It's responsible for
>   * displaying URL parameters (query string).
>   */
> -var ParamsTab = React.createClass({
> +class ParamsTab extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/post-tab.js:30
(Diff revision 1)
>  /**
>   * This template represents 'Post' tab displayed when the user
>   * expands network log in the Console panel. It's responsible for
>   * displaying posted data (HTTP post body).
>   */
> -var PostTab = React.createClass({
> +class PostTab extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/response-tab.js:33
(Diff revision 1)
>   *
>   * In case of supported response mime-type (e.g. application/json,
>   * text/xml, etc.), the response is parsed using appropriate parser
>   * and rendered accordingly.
>   */
> -var ResponseTab = React.createClass({
> +class ResponseTab extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/size-limit.js:18
(Diff revision 1)
>   * This template represents a size limit notification message
>   * used e.g. in the Response tab when response body exceeds
>   * size limit. The message contains a link allowing the user
>   * to fetch the rest of the data from the backend (debugger server).
>   */
> -var SizeLimit = React.createClass({
> +class SizeLimit extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

::: devtools/client/webconsole/net/components/spinner.js:15
(Diff revision 1)
>  
>  /**
>   * This template represents a throbber displayed when the UI
>   * is waiting for data coming from the backend (debugging server).
>   */
> -var Spinner = React.createClass({
> +class Spinner extends Component {

shouldn't we import `Component` ? or use `React.Component` I guess

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 8921852 [details]
Bug 1411531 - Web Console to ES6 classes

https://reviewboard.mozilla.org/r/192884/#review198130

I'll fix this manually... this has happened because we haven't deconstructed React on require... other tools all appear to use this style:

```
const { Component, createFactory, DOM, PropTypes } =
  require("devtools/client/shared/vendor/react");
const NetInfoGroupList = createFactory(require("./net-info-group-list"));
const Spinner = createFactory(require("./spinner"));
```

But the network monitor components do this:
```
const React = require("devtools/client/shared/vendor/react");
const NetInfoGroupList = React.createFactory(require("./net-info-group-list"));
const Spinner = React.createFactory(require("./spinner"));

// Shortcuts
const DOM = React.DOM;
const PropTypes = React.PropTypes;
```

Comment 4

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 8921852 [details]
Bug 1411531 - Web Console to ES6 classes

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/192884/diff/1-2/

Comment 5

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=797442f34c99580ea1aaa25a40cd013ba6379017

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 8921852 [details]
Bug 1411531 - Web Console to ES6 classes

https://reviewboard.mozilla.org/r/192884/#review198192

Thanks mike. Let's land this if try is green

Comment 7

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Comment on attachment 8921852 [details]
Bug 1411531 - Web Console to ES6 classes

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/192884/diff/2-3/

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/56427ccc5fc9
Web Console to ES6 classes r=nchevobbe

Comment 9

[Attila Craciun [:arny]]

https://hg.mozilla.org/mozilla-central/rev/56427ccc5fc9