{"action":"opened","issue":{"url":"https://api.github.com/repos/gaearon/redux-devtools/issues/74","labels_url":"https://api.github.com/repos/gaearon/redux-devtools/issues/74/labels{/name}","comments_url":"https://api.github.com/repos/gaearon/redux-devtools/issues/74/comments","events_url":"https://api.github.com/repos/gaearon/redux-devtools/issues/74/events","html_url":"https://github.com/gaearon/redux-devtools/issues/74","id":101578702,"number":74,"title":"Idea: Interface modularity","user":{"login":"dannykingme","id":2594189,"avatar_url":"https://avatars.githubusercontent.com/u/2594189?v=3","gravatar_id":"","url":"https://api.github.com/users/dannykingme","html_url":"https://github.com/dannykingme","followers_url":"https://api.github.com/users/dannykingme/followers","following_url":"https://api.github.com/users/dannykingme/following{/other_user}","gists_url":"https://api.github.com/users/dannykingme/gists{/gist_id}","starred_url":"https://api.github.com/users/dannykingme/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dannykingme/subscriptions","organizations_url":"https://api.github.com/users/dannykingme/orgs","repos_url":"https://api.github.com/users/dannykingme/repos","events_url":"https://api.github.com/users/dannykingme/events{/privacy}","received_events_url":"https://api.github.com/users/dannykingme/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-08-18T06:02:09Z","updated_at":"2015-08-18T06:02:09Z","closed_at":null,"body":"A problem I've noticed in the UI is that everything feels very ad hoc, and components don't really consider each other. The changes in #48 helped organize what's already built, but didn't do much to anticipate new features.\r\n\r\nAfter chatting with @gaearon I learned that there's still a lot of cool stuff yet to be added, e.g., state scrubbing, save & load, granular commit/sweep actions, etc. So in an effort to prevent some painful redesigns in the future, I tried thinking of a few simple ideas that'll help organize what's in the devtools UI now, and what might come later.\r\n\r\n<a href=\"https://danny.precursorapp.com/document/17592201472774\"><img src=\"https://danny.precursorapp.com/document/17592201472774.svg\"></a>\r\n\r\n<a href=\"https://danny.precursorapp.com/document/17592201472774\">Doc</a> • <a href=\"https://danny.precursorapp.com/document/17592201472774.svg\">SVG</a> • <a href=\"https://danny.precursorapp.com/document/17592201472774.svg?as-of=13194154961931\">Original</a>\r\n\r\nA few questions I assumed would be asked:\r\n\r\n#### Why not keep top-level events expanded?\r\nThe current implementation makes it hard to manipulate a lot of items at once, since just a few of them fill up the view. This isn't a huge problem at the moment, but if concepts like granular control of global actions, state scrubbing, or filtering are introduced the problem will grow.\r\n\r\n#### Why action drawers?\r\nSince everything is ad hoc at the moment, the UI keeps running out of room. The same effect could be achieved with a drop down or similar, but a drawer for event actions create consistency between the global actions. And since many of the actions would actually be the same (e.g., delete, commit, etc.) you can just use the same component and change the content based on context.\r\n\r\n#### Why icons for actions?\r\nBesides making it easier to quickly identify actions, it'll also act as a uniform guide that's easier to design around. I.e., components containing large amounts of actions are easy since they all have the same dimensions, etc.\r\n\r\nI'll be iterating on this wireframe and adding new ones. I'm hoping to have time to implement some of them myself soon as well. But at the very least, these wireframes can serve as a reference. Very open to feedback on anything. If you'd like access to the Precursor doc with the wireframe, [request it in the app](https://danny.precursorapp.com/document/17592201472774/sharing). Any changes will update the preview above."}}