Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

[WhyPaused] Move why paused to the call stack#3119

Merged
jasonLaster merged 7 commits into
firefox-devtools:masterfrom
zaggy:move-why-paused-to-the-call-stack
Jun 8, 2017
Merged

[WhyPaused] Move why paused to the call stack#3119
jasonLaster merged 7 commits into
firefox-devtools:masterfrom
zaggy:move-why-paused-to-the-call-stack

Conversation

@zaggy

@zaggy zaggy commented Jun 7, 2017

Copy link
Copy Markdown
Contributor

Associated Issue: #3111

Summary of Changes

  • Moved WhyPaused component to the end of the call stack
  • Changed formatting to a more subtle one
  • Centered the text

I definitely don't like the color of text in dark theme (it looks too visible), but I need your feedback on this.

Test Plan

  • Open any page in debugger and set a breakpoint
  • make debugger break code execution on breakpoint
  • See the WhyPaused component to appear at the end of the call stack

Screenshots/Videos (OPTIONAL)

Dark theme Light theme Firebug theme
image image image

@jasonLaster jasonLaster left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great. one small comment

return dom.div(
{ className: "pane frames" },
this.renderFrames(frames),
WhyPaused(),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

now that WhyPaused is a child of Frames, it would be nice to pass pauseInfo down WhyPause({ pauseInfo }). This means we no longer need to have the connect logic in WhyPaused too :)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

diff --git a/src/components/SecondaryPanes/WhyPaused.js b/src/components/SecondaryPanes/WhyPaused.js
index 5741743..d96978d 100644
--- a/src/components/SecondaryPanes/WhyPaused.js
+++ b/src/components/SecondaryPanes/WhyPaused.js
@@ -23,7 +23,7 @@ function renderExceptionSummary(exception) {
   return `${name}: ${message}`;
 }

-class WhyPaused extends Component {
+export default class WhyPaused extends Component {
   renderMessage(pauseInfo: Pause) {
     if (!pauseInfo) {
       return null;
@@ -66,10 +66,3 @@ WhyPaused.displayName = "WhyPaused";
 WhyPaused.propTypes = {
   pauseInfo: PropTypes.object
 };
-
-export default connect(
-  state => ({
-    pauseInfo: getPause(state)
-  }),
-  dispatch => bindActionCreators(actions, dispatch)
-)(WhyPaused);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely agree. Had a thought about making it a stateless component, but didn't know what do you guys think about that.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing an unnecessary connect is a great idea. I think you can go ahead with making it stateless.

@jasonLaster

Copy link
Copy Markdown
Contributor

Also, looks like you need to rebase to fix our test on master and run jest -u src to update the component snapsnots

@clarkbw

clarkbw commented Jun 7, 2017

Copy link
Copy Markdown
Contributor

Really nice! How does this look with the error message? I think we had trouble with a centered layout when there was also an error message. You can see those when you pause on exceptions.

@zaggy zaggy force-pushed the move-why-paused-to-the-call-stack branch from 972d486 to 0b30920 Compare June 7, 2017 23:01
@codecov

codecov Bot commented Jun 7, 2017

Copy link
Copy Markdown

Codecov Report

Merging #3119 into master will increase coverage by 18.35%.
The diff coverage is 100%.

Impacted file tree graph

@@             Coverage Diff             @@
##           master    #3119       +/-   ##
===========================================
+ Coverage   47.63%   65.98%   +18.35%     
===========================================
  Files          95       76       -19     
  Lines        4012     2699     -1313     
  Branches      821      544      -277     
===========================================
- Hits         1911     1781      -130     
+ Misses       2101      918     -1183
Impacted Files Coverage Δ
src/components/SecondaryPanes/Frames/WhyPaused.js 11.11% <ø> (ø)
src/components/SecondaryPanes/Frames/index.js 70.27% <100%> (+0.4%) ⬆️
src/utils/pause.js 50% <0%> (-31.25%) ⬇️
src/utils/editor/index.js 7.14% <0%> (-7.15%) ⬇️
src/actions/pause.js 18% <0%> (-1.24%) ⬇️
src/reducers/breakpoints.js 89.03% <0%> (-1.17%) ⬇️
src/utils/frame.js 85.57% <0%> (ø) ⬆️
src/utils/breakpoint/index.js 91.66% <0%> (ø) ⬆️
src/components/Editor/ConditionalPanel.js
... and 25 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d61bb3e...0b30920. Read the comment docs.

@codecov

codecov Bot commented Jun 7, 2017

Copy link
Copy Markdown

Codecov Report

Merging #3119 into master will increase coverage by 0.03%.
The diff coverage is 90.9%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3119      +/-   ##
==========================================
+ Coverage   47.51%   47.54%   +0.03%     
==========================================
  Files          95       95              
  Lines        4003     3998       -5     
  Branches      821      821              
==========================================
- Hits         1902     1901       -1     
+ Misses       2101     2097       -4
Impacted Files Coverage Δ
src/components/SecondaryPanes/Frames/index.js 69.86% <100%> (ø) ⬆️
src/components/SecondaryPanes/Frames/WhyPaused.js 90.47% <90.47%> (ø)
src/utils/pause.js 86.66% <0%> (+6.66%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 439ab3f...6943dc1. Read the comment docs.

@zaggy

zaggy commented Jun 8, 2017

Copy link
Copy Markdown
Contributor Author

some tests are failing still and I don't get why. It looked like jest -u src command completed successfully locally and I pushed updated snapshots.

Comment thread docs/updates/README.md
* We now disable out of scope lines when the debugger pauses.
* We have huge updates to preview - it's faster, more consistent, and works for HTML elements
* Breakpoints are kept in sync as code changes. Big thanks to [@codehag]
* Breakpoints are kept in sync as code changes. Big thanks to [codehag][@codehag]

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was changed because lint-md was yelling on this. Maybe I was wrong here... Sorry

@codehag codehag Jun 8, 2017

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no worries :D i think we all fixed it because it was wrong on master

@codehag

codehag commented Jun 8, 2017

Copy link
Copy Markdown
Contributor

It might be that not all the tests ran, and one of the tests that was out of date wasn't updated. I updated that right now... should be ok. lets see!

@jasonLaster jasonLaster left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

@jasonLaster jasonLaster merged commit cd5b279 into firefox-devtools:master Jun 8, 2017
@jasonLaster

jasonLaster commented Jun 8, 2017

Copy link
Copy Markdown
Contributor

Thanks @zaggy! This is a really nice style win. One small style nit, which we can do in a follow up is style the errors red. Here's a before and after with some of the CSS I used to sketch it

before

screen shot 2017-06-08 at 9 53 41 am

after

screen shot 2017-06-08 at 9 52 51 am

CSS

screen shot 2017-06-08 at 9 51 58 am

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants