1325914 - fix react-dev warnings

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P1)

Description

[[e-mail]]

When you set `ac_add_options --enable-debug-js-modules` in mozconfig, the js debugger will pop some warnings from react-dev:

Warning: Unknown DOM property readonly. Did you mean readOnly?
    in input (created by TreeCell)
    in div (created by TreeCell)
    in span (created by TreeCell)
    in td (created by TreeCell)
    in TreeCell (created by TreeRow)
    in tr (created by TreeRow)
    in TreeRow (created by TreeView)
    in tbody (created by TreeView)
    in table (created by TreeView)
    in TreeView (created by SecurityPanel)
    in div (created by SecurityPanel)
    in SecurityPanel (created by Connect(SecurityPanel))
    in Connect(SecurityPanel)
    in Provider


Warning: Failed prop type: Required prop `state` was not specified in `FilterButtons`.
    in FilterButtons (created by Connect(FilterButtons))
    in Connect(FilterButtons) (created by Toolbar)
    in span (created by Toolbar)
    in span (created by Toolbar)
    in Toolbar
    in Provider

Warning: Failed prop type: FilterButtons: prop type `triggerFilterType` is invalid; it must be a function, usually from React.PropTypes.
    in FilterButtons (created by Connect(FilterButtons))
    in Connect(FilterButtons) (created by Toolbar)
    in span (created by Toolbar)
    in span (created by Toolbar)
    in Toolbar
    in Provider

Warning: Failed prop type: Required prop `securityInfo` was not specified in `SecurityPanel`.
    in SecurityPanel (created by Connect(SecurityPanel))
    in Connect(SecurityPanel)
    in Provider

Warning: Failed prop type: Required prop `url` was not specified in `SecurityPanel`.
    in SecurityPanel (created by Connect(SecurityPanel))
    in Connect(SecurityPanel)
    in Provider


"Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `FilterButtons`. See https://fb.me/react-warning-keys for more information.
    in button (created by FilterButtons)
    in FilterButtons (created by Connect(FilterButtons))
    in Connect(FilterButtons) (created by Toolbar)
    in span (created by Toolbar)
    in span (created by Toolbar)
    in Toolbar
    in Provider"


The `readOnly` miss spell should be fixed.


There are several `Stateless function components cannot be given refs` warnings as well, ex:

Warning: Stateless function components cannot be given refs (See ref "wrappedInstance" in ToggleButton created by Connect(ToggleButton)). Attempts to access this ref will fail.


StateOverflow said it could be fixed by upgrading to react-redux 4, which wont attach ref to the wrapped component by default

http://stackoverflow.com/questions/35952607/what-does-stateless-function-components-cannot-be-given-refs-mean

Comment 1

[[e-mail]]

Attachment: Bug 1325914 - fix react-dev warnings;

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

Comment 2

[[e-mail]]

Comment on attachment 8821973 [details]
Bug 1325914 - fix react-dev warnings;

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

Comment 3

[[e-mail]]

The PR fixed warnings except the ref related warnings, which need update react-redux.

To mitigate any side effects I recommend update redux and react-redux in a separate bug.

Comment 4

[Ricky Chien [:rickychien] (inactive)]

Comment on attachment 8821973 [details]
Bug 1325914 - fix react-dev warnings;

https://reviewboard.mozilla.org/r/101050/#review101638

Comment 5

[Ricky Chien [:rickychien] (inactive)]

Note that this bug doesn't clean up all react warnings in one sweep. Fred, please file another bug for sweeping all warnings, and put it in Reserve - Backlog. It might be worth to fix these warnings after moving netmonitor to github.

Comment 6

[[e-mail]]

tracked in Bug 1326137 , thanks

Comment 7

[Ryan VanderMeulen [:RyanVM]]

Autoland couldn't rebase this for landing.

Comment 8

[[e-mail]]

Thanks for notice, rebased on latest branch.

Comment 9

[[e-mail]]

Comment on attachment 8821973 [details]
Bug 1325914 - fix react-dev warnings;

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

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3d6a5b17632d
fix react-dev warnings; r=rickychien

Comment 11

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/mozilla-central/rev/3d6a5b17632d