1619590 - Warning: Failed prop type: InspectAction: prop type `title` is invalid; it must be a function,

Status: RESOLVED FIXED

(DevTools :: about:debugging, defect, P3)

Description

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I am experiencing the following React warning in the Browser Console when opening about:debugging#/runtime/this-firefox

Warning: Failed prop type: InspectAction: prop type `title` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.
    in InspectAction (created by DebugTargetItem)
    in DebugTargetItem (created by DebugTargetList)
    in ul (created by DebugTargetList)
    in DebugTargetList (created by DebugTargetPane)
    in div (created by DebugTargetPane)
    in section (created by DebugTargetPane)
    in DebugTargetPane (created by WithLocalization(DebugTargetPane))
    in WithLocalization(DebugTargetPane) (created by RuntimePage)
    in Localized (created by RuntimePage)
    in article (created by RuntimePage)
    in RuntimePage (created by Connect(RuntimePage))
    in Connect(RuntimePage) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in main (created by App)
    in div (created by App)
    in Localized (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by WithLocalization(Connect(App)))
    in WithLocalization(Connect(App))
    in Router (created by HashRouter)
    in HashRouter
    in LocalizationProvider
    in Provider

There is also

Warning: Failed prop type: The prop `disabled` is marked as required in `_ActionButton`, but its value is `undefined`.
    in _ActionButton (created by ServiceWorkerAdditionalActions)
    in ServiceWorkerAdditionalActions (created by Connect(ServiceWorkerAdditionalActions))
    in Connect(ServiceWorkerAdditionalActions) (created by WithLocalization(Connect(ServiceWorkerAdditionalActions)))
    in WithLocalization(Connect(ServiceWorkerAdditionalActions)) (created by DebugTargetItem)
    in section (created by DebugTargetItem)
    in li (created by DebugTargetItem)
    in DebugTargetItem (created by DebugTargetList)
    in ul (created by DebugTargetList)
    in DebugTargetList (created by DebugTargetPane)
    in div (created by DebugTargetPane)
    in section (created by DebugTargetPane)
    in DebugTargetPane (created by WithLocalization(DebugTargetPane))
    in WithLocalization(DebugTargetPane) (created by RuntimePage)
    in Localized (created by RuntimePage)
    in article (created by RuntimePage)
    in RuntimePage (created by Connect(RuntimePage))
    in Connect(RuntimePage) (created by Route)
    in Route (created by App)
    in Switch (created by App)
    in main (created by App)
    in div (created by App)
    in Localized (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by WithLocalization(Connect(App)))
    in WithLocalization(Connect(App))
    in Router (created by HashRouter)
    in HashRouter
    in LocalizationProvider
    in Provider

Honza

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Julian, perhaps this could be good-first-bug?

Honza

Comment 2

[Julian Descottes [:jdescottes]]

Sure.

Our contributors documentation can be found at https://docs.firefox-dev.tools/

This bug is about fixing two react warnings which can appear when you open about:debugging#/runtime/this-firefox.
The second warning probably only appears if you have service workers registered. An easy way to register a service worker is to go to youtube.com.

In order to see React warnings, you must add the following line in your mozconfig file (https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options):

ac_add_options --enable-debug-js-modules

(this option is compatible with artifact builds)

Good first bugs are a great occasion to setup the environment and learn how to submit a patch, so here are some tips on the actual code change

The first react warning comes from https://searchfox.org/mozilla-central/rev/91f6c02fcf4c16f78fdc4417f61f192688294066/devtools/client/aboutdebugging/src/components/debugtarget/InspectAction.js#29 . The line reads:

  title: Types.string,

But the "string" type is not defined in Types (which are custom types we defined for about:debugging in devtools/client/aboutdebugging/src/types/index.js). Instead it should come from PropTypes. I think replacing Types with PropTypes on this line should fix the problem.

The second React warning comes from https://searchfox.org/mozilla-central/source/devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAdditionalActions.js . Here we have a "private" _ActionButton component which expects a disabled property. Since disabled is just a boolean property, I think removing the isRequired at https://searchfox.org/mozilla-central/rev/91f6c02fcf4c16f78fdc4417f61f192688294066/devtools/client/aboutdebugging/src/components/debugtarget/ServiceWorkerAdditionalActions.js#37 can be an appropriate fix.

Comment 3

[Manish Sahani]

Hi Jan, I would like to work on this. I have finished setting up the environment and this can be my start of the open-source journey.

Comment 4

[Julian Descottes [:jdescottes]]

Thanks Manish, assigning the bug to you. Let us know if you need any help to get setup.
Don't hesitate to use the "Request information from" UI down below to ping us and make sure we see your questions.

Comment 5

[Manish Sahani]

Thank you, Julian, for a great explanation. I have both of these and tested the dom/serviceworkers. is there anything I shall test.

Comment 6

[Manish Sahani]

I have fixed*

Comment 7

[Julian Descottes [:jdescottes]]

(In reply to Manish Sahani from comment #5)

Thank you, Julian, for a great explanation. I have both of these and tested the dom/serviceworkers. is there anything I shall test.

Great. That should be enough!

(In reply to Manish Sahani from comment #6)

I have fixed*

Note: you can edit your comments with the "pencil" icon :)

Comment 8

[Manish Sahani]

Haha, this is my first time so a bit nervous. Thank you for your help :)

one last thing I want to ask, who should I add in r=reviewer in my commit message?

Comment 9

[Julian Descottes [:jdescottes]]

(In reply to Manish Sahani from comment #8)

Haha, this is my first time so a bit nervous. Thank you for your help :)

one last thing I want to ask, who should I add in r=reviewer in my commit message?

r=jdescottes here.

Comment 10

[Manish Sahani]

Attachment: Bug 1619590 - Fix Failed prop type warnings in InspectAction and _ActionButton r=jdescottes

Comment 11

[Manish Sahani]

Attachment: Bug 1619590 - Fix Failed prop type warnings in InspectAction and _ActionButton r=jdescottes

The previous commit had an extra space, which caused linting problem. In this commit the linting errors have been removed.

Depends on D65217

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4926363449ff
Fix Failed prop type warnings in InspectAction and _ActionButton r=jdescottes

Comment 13

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/4926363449ff