1393515 - Create a mixin to show exactly which properties should be added to shouldComponentUpdate()

Status: RESOLVED WONTFIX

(DevTools :: General, enhancement, P2)

Description

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

We should create a new mixin that can be used to identify exactly which properties should be added to shouldComponentUpdate() as this will greatly simplify the development process.

Output should be a complete shouldComponentUpdate function e.g.

```
shouldComponentUpdate(nextProps, nextState) {
  return this.props.depth !== nextProps.depth ||
         this.props.focused !== nextProps.focused;
  },
```

Of course, to get all of the props we will need to do everything that can be done with the component but this would save a *lot* of time when optimizing the React components.

Comment 1

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

Attachment: Screen Shot 2017-09-13 at 13.28.20.png

We can't auto-generate shouldComponentUpdate() because of the many object types we have but we can show exactly which properties have changed for a particular component.

Comment 2

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

Attachment: Bug 1393515 - Create mixin to show which props should be added to shouldComponentUpdate()

I know the formatting of the output is not formatted perfectly but it is the best we can do for now. I will post a follow-up bug to fix it.

You don't really need to review the library so you should focus on:
- devtools/client/shared/vendor/jsondiffpatch/UPDATING.md
  - Just a markdown document.
- devtools/shared/mixinService.js
  - Added jsondiffpatch
  - Renamed mixin methods to make them unique e.g. deepDiff_WhyDidYouUpdate...
    without this the mixins will not load.
- toolkit/content/license.html
  - Added the google-diff-match-patch license.
  - Added the jsondiffpatch license.

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

Comment 3

[Jason Laster [:jlast]]

Comment on attachment 8907696 [details]
Bug 1393515 - Create mixin to show which props should be added to shouldComponentUpdate()

https://reviewboard.mozilla.org/r/179360/#review186502

looks good. What is the process for turning this on? Do i need to know about the pref? Will this be needed if we upgrade react and can use react.pref?

Comment 4

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

For the moment we have decided to stick with using perf.html and React 16's excellent markers. If we decide to use HOCs we can always reopen this bug.