convore.json/groups/mozdevtools/devtools-meeting-2011-02-23/messages.json

[{"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298458865.2266171, "message": "One of the topics is the Inspector rethink:From my perspective I would say to steer clear of using canvas because the performance degrades depending on the size of the screen because it is rendered pixel by pixel. SVG is way better so SVG rendered in an SVG document over the content area works well and allows the drawing of complex shapes (for 2D & 3D transforms + image maps). If we are making it available through the API it should also be capable of highlighting multiple elements and the colors should also be customizeable.", "group_id": 491, "id": 186737}, {"user_id": 14680, "stars": [], "topic_id": 8290, "date_created": 1298464090.0920219, "message": "Makes sense to me. Perhaps it's already well known to everybody, but just to note that another advantage of having an inspector that doesn't modify the page is that also frozen pages can be inspected. This would enable inspecting of e.g. HTML popups (such as HTML context menus)  that disappear when loosing focus ('blur').", "group_id": 491, "id": 187175}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298468059.8693089, "message": "note also that canvas uses system drawing routines so they should be as fast as the OS allows.", "group_id": 491, "id": 187459}, {"user_id": 1597, "stars": [], "topic_id": 8290, "date_created": 1298466235.9169359, "message": "@MikeRatcliffe that's something we can talk about during today's meeting. thanks for bringing it up!", "group_id": 491, "id": 187359}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298467981.7938621, "message": "@MikeRatcliffe could you tell me where or how you got this information? Performance in what sense? I could see it using more memory because it has to rasterize the images, but that shouldn't be more costly than creating the DOM structure for SVG. I asked Vlad Vukicevic (creator of our Canvas implementation, WebGL, etc) about this and he he claimed it to be false.\n\nData please!", "group_id": 491, "id": 187458}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298477682.1254101, "message": "or btw, why Canvas? why SVG? isn't HTML+CSS enough for the Inspector?", "group_id": 491, "id": 188338}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298477553.8579791, "message": "i think canvas is faster for general rendering- think GUIs for games, or demoscene stuff.", "group_id": 491, "id": 188325}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298477644.1416659, "message": "we shouldn't pick the technology based on perf concerns, we should pick the one that best suits our needs. in that case i'd go for SVG or HTML+fancy CSS.", "group_id": 491, "id": 188331}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298477506.5169599, "message": "i think it's also about how you want to use SVG or Canvas. if you want to render the whole screen, pixel by pixel from your JS, then Canvas will perhaps be slower, depending on the computations you do", "group_id": 491, "id": 188324}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298477592.3466909, "message": "SVG is much better suited for web app user interfaces, where you want similar flexibility to HTML+CSS", "group_id": 491, "id": 188326}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298479264.556675, "message": "I created an implementation once that used canvas and noticed that it was much slower on larger screens. It is also one of the reasons that the Ace guys chose not to use a canvas implementation in the end. I have seen data on this somewhere but I a not sure where ...", "group_id": 491, "id": 188534}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298482151.8127251, "message": "unconvinced*. the typing is faily.", "group_id": 491, "id": 188942}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298479378.3503809, "message": "\"isn't HTML+CSS enough for the Inspector?\" No, it needs to be able to draw complex shapes to highlight SVG shapes, transformed shapes (the exact coordinates will be made available by element.getQuads when implemented) and image maps.", "group_id": 491, "id": 188560}, {"user_id": 5276, "stars": [], "topic_id": 8290, "date_created": 1298480628.96369, "message": "interesting point, mike. indeed, then the case is better for SVG over HTML+CSS, certainly not canvas since the use case here is something like a \"web app\" style of UI.", "group_id": 491, "id": 188748}, {"user_id": 1597, "stars": [], "topic_id": 8290, "date_created": 1298482223.1019931, "message": "I actually wonder if there's a reason to not just do HTML+CSS for most bits. I'm sure the mockup would clarify which bits are actually drawn", "group_id": 491, "id": 188952}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298479590.6800399, "message": "http://borismus.com/canvas-vs-svg-performance/ shows the performance degradation", "group_id": 491, "id": 188607}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298480254.5049131, "message": "Maybe in the early stages I could throw together a very basic inspector and compare canvas vs. SVG again. Some things would be more difficult in canvas (like border-radius) but if performance and memory are less then maybe we could run with it.", "group_id": 491, "id": 188682}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298480833.4545391, "message": "It is very true that SVG is much better suited for these simple shapes", "group_id": 491, "id": 188797}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298482225.687526, "message": "anyway, I agree we shouldn't start choosing a technology over another based on performance, we should decide based on the features we need to support.\n\nI think I'd like to be able to copy text out of an inspector layer which suggests HTML or SVG instead of Canvas.", "group_id": 491, "id": 188954}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298482308.735009, "message": "@dangoor I think we could for a large chunk of it. Some parts might make sense to do in SVG or Canvas, others in pure HTML+CSS. Lemme finish my mockup and we can talk about it.", "group_id": 491, "id": 188971}, {"user_id": 1723, "stars": [], "topic_id": 8290, "date_created": 1298482121.9382551, "message": "@MikeRatcliffe I'm unconvinved. The graphs in that blog post show a rising number for SVG over Canvas for large numbers of objects. I'm expecting a relatively small number. (like, less than a hundred).\n\nThe time vs. height graph is interesting, but note that the values in the Y axis are very small compared to the size being referenced. Assuming those are milliseconds vs. pixels, 10-15ms for 6000px seems like an acceptable performance hit for drawing, giving us approximately 6fps for a 6000px canvas element. In practice, we'll only be using browser-sized elements which will be considerably less than that.", "group_id": 491, "id": 188941}, {"user_id": 15182, "stars": [], "topic_id": 8290, "date_created": 1298482856.0446999, "message": "The way it is done in Firebug at the moment is to use divs for everything except image maps where we use canvas ;o) \n\nI never implemented an inline inspector but probably should. Inline elements are still highlighted using the box model and that is just plain ol' wrong.", "group_id": 491, "id": 189018}]