krasimir / kuker

Kick-ass browser extension to debug your apps
https://chrome.google.com/webstore/detail/glgnienmpgmfpkigngkmieconbnkmlcn
MIT License
657 stars 26 forks source link

Kuker formatting of entries (left panel) #19

Closed brucou closed 4 years ago

brucou commented 4 years ago

@krasimir another question, I grabbed that there is an indent property that can be used to indent labels in the left panel (used in the MobX emitter) You also give one example with icons I could not however find out what is used to format the label as the stent emitter does. Here you can see that in the same line, some words are bold, and others are not, implying that label is not necessarily just a text.

Do you have at hand a list of the properties used in Kuker and thier semantics?

Many thanks

krasimir commented 4 years ago

Hey @brucou,

here's the component that you are interested in https://github.com/krasimir/kuker/tree/master/src/kuker-ui/components/Dashboard/Handlers/UnrecognizedEvent.js

This is how the event looks like on the left:

<div style={ style } onClick={ onClick } className={ className }>
  <TimeDiff timeDiff={ event.timeDiff } parentStyle={ style } />
  <div className='actionRowContent'>
    <i className={ 'fa ' + icon } style={{ marginRight: '0.5em' }}></i>
    <strong>{ label || event.type }</strong>
  </div>
</div>

This is the public API that Kuker offers. There are dedicated components for emitters like Stent and Redux. They are here https://github.com/krasimir/kuker/tree/master/src/kuker-ui/components/Dashboard/Handlers

brucou commented 4 years ago

Absolutely amazing, thanks!