Initial Components pane for React#6018
Conversation
| if (!props.react) { | ||
| props.react = await getReactProps(evaluate); | ||
| } | ||
| props.react = await getReactProps(evaluate); |
There was a problem hiding this comment.
@jasonLaster @mmcote Is this OK that I remove this stuff? It was the easiest way to get what I wanted and it didn't seem necessary. I can put it back if needed ofc.
| pref("devtools.debugger.features.outline", true); | ||
| pref("devtools.debugger.features.column-breakpoints", true); | ||
| pref("devtools.debugger.features.replay", true); | ||
| pref("devtools.debugger.features.component-stack", true); |
There was a problem hiding this comment.
these flags will need to be added to assets/prefs as well
|
|
||
| getComponentStackItem() { | ||
| return { | ||
| header: "Components", |
There was a problem hiding this comment.
Lets add an L10N.getStr property here
| if (!props.react) { | ||
| props.react = await getReactProps(evaluate); | ||
| } | ||
| props.react = await getReactProps(evaluate); |
There was a problem hiding this comment.
I think we need to keep this, but we can refactor it...
for instance always extends props.react... not do that !props.react check
| # message to show more of the frames. | ||
| callStack.expand=Expand rows | ||
|
|
||
| # LOCALIZATION NOTE (components.header): Components right sidebar pane header. |
There was a problem hiding this comment.
Maybe something a bit more descriptive? e.g. 'Header pane in the right sidebar for React Components', assuming it's only for React
There was a problem hiding this comment.
How's this? f2c5442
'Header for the React Components pane in the right sidebar.'
For now, it's only for React.
| componentNames.result.preview && componentNames.result.preview.items; | ||
| if (items) { | ||
| return { | ||
| displayName: items[0], |
There was a problem hiding this comment.
hmm, i'd prefer not overriding displayName. The rationale is if you are debugging a site that is minified, but has source maps looking up the class name from the symbols table is not minified. Crazy, right?!?!
| if (!props.react) { | ||
| props.react = await getReactProps(evaluate); | ||
| } | ||
| merge(props.react, await getReactProps(evaluate)); |
There was a problem hiding this comment.
can we use splat here {...props.react, ...await getReactProps(evaluate) }
|
@calebstdenis can you rebase and fix the the circle tests |
| # message to show more of the frames. | ||
| callStack.expand=Expand rows | ||
|
|
||
| # LOCALIZATION NOTE (components.header): Header for the React Components pane |
There was a problem hiding this comment.
this should be Header for the Framwork Components
we want to add Ember soon :)
Appears when pausing in a React component. Lists the component and all its ancestors up the root. The intention is to eventually have something similar to the call stack but for React component hierarchies. ReactComponentStack is to the CallStack what FrameworkComponent is to the Scope pane.
I would've liked to remove mocking from the tests entirely to make them more robust, but my attempts at that failed.
|
Had to fix some Jest tests 487edd6 |
Related issue: #3792
Summary of Changes
Todo in a future PR:
connect?Test Plan
Screenshots/Videos