Color coded actions

[msaspence]

How do people feel about being able to color code actions?

My first thought was when { error: true } using some kind of red so that errors stand out in the error timeline. But then I got to thinking why not others why not let the application style its actions, so that a developer can more easily pick out actions from the timeline. Something like:

{
  type: MY_ACTION,
  payload: { .... }
  _inspector: {
    color: '#0f0',
    background: '#00f'
  }
}

I'm sure people will protest adding this configuration to application code bases in this way, I'm not mad about it. But I can't think of an alternative that isn't horribly complex.

[alexkuz]

Thanks for the idea!
I would just pass action in styling here:
https://github.com/alexkuz/redux-devtools-inspector/blob/master/src/ActionListRow.jsx#L52
so you can override theming like this:

theme = {
  ...
  actionListItem: ({ className }, isSelected, action) => {
    let style = {};
    if (action._inspector) {
      style = { ... };
    }
    return { className, style };
  }
}

[msaspence]

Cool, I'll probably have a play with this on Friday

[codeheroics]

Why not doing by building a map and giving it as new prop (actionStyles?) to Inspector?
eg.

{
  [COLORED_ACTION_NAME]: { /* styles */ },
  [COLORED_ACTION_NAME2]: { /* styles */ },
}

It'd avoid polluting action declarations with code specific to this particular monitor

[msaspence]

I agree, but you are going to need something in the application to configure the colors since it should be up to the application to decide how to style its various actions.

[codeheroics]

@msaspence Yes, I was suggesting to tell to Inspector how to style actions when it's initialized

// increment.js
export const INCREMENT = { type: 'INCREMENT' }

// devTools.js
import { INCREMENT } from '../actions/increment'

const actionStyles = {
  [INCREMENT]: { color: 'black', backgroundColor: 'yellow' }
}

createDevTools(
  <DockMonitor>
    <Inspector actionStyles={actionStyles} />
  </DockMonitor>
);

Then coloring actions would be a matter of testing for the existence of this.props.actionStyles[ACTION_NAME] inside redux-devtools-inspector

It's still in the application, but it's declared with all the configuration code concerning the devtools, and remains separated from the actions definitions

[msaspence]

Sorry, I was think in terms of the chrome extension, which I see now would come later and hook into this somehow. But this all makes sense, although I might look to implement it as a function map rather than a object map so that you can do things like regexing and matching against other action properties.