Closed Bug 1411531 Opened 7 years ago Closed 7 years ago

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

Categories

(DevTools :: Console, defect, P2)

Product:
DevTools
Component:
Console
Type:
defect

Tracking

(firefox58 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 58
Tracking Flags:
Tracking Status
firefox58 --- fixed

People

(Reporter: miker, Assigned: miker)

References

Details

Attachments

(1 file)

Bug 1411531 - Web Console to ES6 classes
59 bytes, text/x-review-board-request
nchevobbe
: review+
Details 
+++ 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 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
Attachment #8921852 - Flags: review?(nchevobbe) → review-
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 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
Attachment #8921852 - Flags: review?(nchevobbe) → review+
Pushed by mratcliffe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/56427ccc5fc9
Web Console to ES6 classes r=nchevobbe
https://hg.mozilla.org/mozilla-central/rev/56427ccc5fc9
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
status-firefox58: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: