Skip to content

Toggle color of debug pane while debugging#8157

Merged
Bjvanminnen merged 19 commits into
stagingfrom
debuggerHeaders
May 3, 2016
Merged

Toggle color of debug pane while debugging#8157
Bjvanminnen merged 19 commits into
stagingfrom
debuggerHeaders

Conversation

@Bjvanminnen

@Bjvanminnen Bjvanminnen commented May 2, 2016

Copy link
Copy Markdown
Contributor

Have the color of the header for the debug pane change when debugger is paused:

debuggercolor

I think this is ready for review now. I haven't sent through UI/eyes tests since the adhoc creation isn't working right now, but I've done quite a lot of manual testing/comparing with prod.

Comment thread apps/src/JSInterpreter.js Outdated
JSInterpreter.prototype.handleStepOut = function () {
this.paused = true;
this.nextStep = StepType.OUT;
this.studioApp.reduxStore_.dispatch(runState.setIsDebugging(this.paused));

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.

Another option would be to provide a setPaused method, which is the only place that mutates this.paused, and then does the mutation and dispatches our action.

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.

I think this whole thing needs a refactor at some point but this may not be the PR to do it, anyway.

var props = this.props;

// TODO: AnimationTab should likely use components from PaneHeader, at
// which point purpleHeader style should move in here.

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 should be addressed in a future PR.

var experiments = require('../experiments');

var BLOCKS_GLYPH_LIGHT = "data:image/gif;base64,R0lGODlhEAAQAIAAAP///////yH+GkNyZWF0ZWQgd2l0aCBHSU1QIG9uIGEgTWFjACH5BAEKAAEALAAAAAAQABAAAAIdjI+py40AowRp2molznBzB3LTIWpGGZEoda7gCxYAOw==";
var BLOCKS_GLYPH_DARK = "data:image/gif;base64,R0lGODlhEAAQAIAAAE1XX01XXyH+GkNyZWF0ZWQgd2l0aCBHSU1QIG9uIGEgTWFjACH5BAEKAAEALAAAAAAQABAAAAIdjI+py40AowRp2molznBzB3LTIWpGGZEoda7gCxYAOw==";

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.

Replaced the 256x256 image with a base64 encoded 16x16 image so that we can easily swap between light and dark without having to do an async image load (another option would be to background load in advance). We are losing something, as the original image had slightly rounded rects, but it was being rendered small enough that I don't think I can see the difference.

Comment thread apps/test/runStateTest.js

var runState = require('@cdo/apps/redux/runState');

describe('isRunning reducer', function () {

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.

👍 Nice testing.

@islemaster

Copy link
Copy Markdown
Contributor

This looks awesome! LGTM.

},
headerButtonMinecraft: {
backgroundColor: '#606060',
color: '#BFBFBF',

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.

These colors are not currently in color.scss. Not sure if we want them to (they're MC only) or what I should call them if we do want them to be.

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.

shrug I'd be cool with extracting them to constants within this file, if they're only reused here.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants