{"action":"created","issue":{"url":"https://api.github.com/repos/Microsoft/pxt/issues/4205","repository_url":"https://api.github.com/repos/Microsoft/pxt","labels_url":"https://api.github.com/repos/Microsoft/pxt/issues/4205/labels{/name}","comments_url":"https://api.github.com/repos/Microsoft/pxt/issues/4205/comments","events_url":"https://api.github.com/repos/Microsoft/pxt/issues/4205/events","html_url":"https://github.com/Microsoft/pxt/pull/4205","id":317454796,"number":4205,"title":"New Blockly toolbox","user":{"login":"samelhusseini","id":16690124,"avatar_url":"https://avatars3.githubusercontent.com/u/16690124?v=4","gravatar_id":"","url":"https://api.github.com/users/samelhusseini","html_url":"https://github.com/samelhusseini","followers_url":"https://api.github.com/users/samelhusseini/followers","following_url":"https://api.github.com/users/samelhusseini/following{/other_user}","gists_url":"https://api.github.com/users/samelhusseini/gists{/gist_id}","starred_url":"https://api.github.com/users/samelhusseini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samelhusseini/subscriptions","organizations_url":"https://api.github.com/users/samelhusseini/orgs","repos_url":"https://api.github.com/users/samelhusseini/repos","events_url":"https://api.github.com/users/samelhusseini/events{/privacy}","received_events_url":"https://api.github.com/users/samelhusseini/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":17,"created_at":"2018-04-25T02:04:22Z","updated_at":"2018-04-27T18:01:41Z","closed_at":null,"author_association":"MEMBER","pull_request":{"url":"https://api.github.com/repos/Microsoft/pxt/pulls/4205","html_url":"https://github.com/Microsoft/pxt/pull/4205","diff_url":"https://github.com/Microsoft/pxt/pull/4205.diff","patch_url":"https://github.com/Microsoft/pxt/pull/4205.patch"},"body":"Note: This is a huge change. \r\n\r\nThe simple idea here is to move the Blockly toolbox to our web app (written in react). So far we'd been relying on Blockly for creating the toolbox, which meant that for any change to the toolbox we had to regenerate the toolbox XML that Blockly would understand and call it to update the toolbox. It also gave us little flexibility as to what we do in the toolbox. \r\n\r\nThis change breaks that pattern and takes complete control of the toolbox. We generate the categories, sub categories, search etc. The only way we communicate to Blockly is by calling the Blockly toolbox flyout show method with an XML list of Blocks. \r\n\r\nThis also means we're entirely in charge of caching the Block XML ourselves. \r\nAnother big shift with this change is to move the need to duplicate logic between the Blockly and monaco toolboxes. This merges the two, were Blocks.tsx and Monaco.tsx are still in charge of their respective flyouts but the toolbox is created and managed separately. \r\n\r\nBy doing this we've resolved a few issues: \r\n- Monaco toolbox not having search (now it's consistent with Blockly)\r\n- Monaco toolbox not having subcategories (now it does)\r\n- Search not showing operator or any block mutations (eg: plus, minus, times, etc)\r\n- Accessibility of the Blockly toolbox (navigating around) and moving between toolbox categories and the search box. \r\n\r\nThis change also refactors the toolbox extension logic to make it easier to define custom toolboxes. initExtensions is passed a copy of the toolbox schema and is able to return a different schema based on that, without the need to redefine blocks that should be re-used or moved under a separate category. \r\n\r\nOther changes: \r\n- Built in icons are now defined in one place (in blockIcons in pxtarget) rather than having all sorts of css around the place. We also no longer inject CSS icons, but add them inline.\r\n\r\nIssues to look into for this change: \r\n- [x] (Won't fix in this change) https://github.com/Microsoft/pxt/issues/2410\r\n- [x] Fixes https://github.com/Microsoft/pxt/issues/2317\r\n- [x] Fixes https://github.com/Microsoft/pxt-adafruit/issues/504\r\n- [x] Fixes https://github.com/Microsoft/pxt-adafruit/issues/673\r\n- [ ] https://github.com/Microsoft/pxt-adafruit/issues/584\r\n\r\nKnown issues: \r\n- [x] (Fixed) Unrelated by I realised custom.ts is completely broken\r\n- [x] (Fixed) Unrelated by the monaco editor isn't loading in RTL\r\n- [x] (Fixed) There's a small gap when the toolbox is invisible (pxtjson)\r\n- [x] (Fixed) Related to the nojquery change, the render method in blocklyrenderer relies on that. \r\n- [x] (Fixed) Unrelated a race condition when loading apis where in some cases we end up resetting the host and then calling apiInfo which loads apis with no blocks and you get a toolbox with just built in blocks, old issue but I now checking for empty host options before loading apiinfo\r\n\r\nTested: \r\n- [x] Toolbox categories\r\n- [x] Toolbox with no categories\r\n- [x] Tutorials (filter toolbox)\r\n- [x] Toolbox extensions (pxt-neoanim)\r\n- [x] Toolbox groups\r\n- [x] Toolbox subcategories\r\n- [x] Extending the toolbox (pxt-chibitronics)\r\n- [x] Adding a custom.ts file\r\n- [x] RTL languages\r\n- [x] pxtJson -> Blocks (directly load workspace)\r\n- [x] PXT json with no categories\r\n- [x] Sandbox mode (no toolbox)\r\n- [x] PXTJson -> Blocks (fresh reload)\r\n\r\nBesides some of the features brought to the Monaco toolbox, everything should look just the same with this change. Ultimately this should make future work much easier, cleaner, and avoid bugs.\r\n\r\nBuild that can be used for testing: \r\nhttps://makecode.adafruit.com/app/55c8502145094654bb064449a23576acf443d620-1e11c7937d\r\n\r\nTested on:\r\n- [x] IE\r\n- [x] Edge 16\r\n- [x] Chrome Mac\r\n- [x] Firefox Mac\r\n- [x] Safari"},"comment":{"url":"https://api.github.com/repos/Microsoft/pxt/issues/comments/385048382","html_url":"https://github.com/Microsoft/pxt/pull/4205#issuecomment-385048382","issue_url":"https://api.github.com/repos/Microsoft/pxt/issues/4205","id":385048382,"user":{"login":"samelhusseini","id":16690124,"avatar_url":"https://avatars3.githubusercontent.com/u/16690124?v=4","gravatar_id":"","url":"https://api.github.com/users/samelhusseini","html_url":"https://github.com/samelhusseini","followers_url":"https://api.github.com/users/samelhusseini/followers","following_url":"https://api.github.com/users/samelhusseini/following{/other_user}","gists_url":"https://api.github.com/users/samelhusseini/gists{/gist_id}","starred_url":"https://api.github.com/users/samelhusseini/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samelhusseini/subscriptions","organizations_url":"https://api.github.com/users/samelhusseini/orgs","repos_url":"https://api.github.com/users/samelhusseini/repos","events_url":"https://api.github.com/users/samelhusseini/events{/privacy}","received_events_url":"https://api.github.com/users/samelhusseini/received_events","type":"User","site_admin":false},"created_at":"2018-04-27T18:01:41Z","updated_at":"2018-04-27T18:01:41Z","author_association":"MEMBER","body":"This is just what React does when any react element crashes. I don't have enough requirements to create a guard. what should it do? what should it look like? \r\n\r\nThis smells like scope creep. @abchatra to consult. "}}
{"actor":{"display_login":"samelhusseini"}}