victorporof / Tilt

Tilt: a WebGL-based 3D visualization of a Webpage
http://blog.mozilla.com/tilt/
Other
493 stars 56 forks source link

How about making it useful? It definitely needs Attributes Inspector + inspect in DOMi #8

Closed Drugoy closed 13 years ago

Drugoy commented 13 years ago

I use Attributes Inspector button for CustomButtons extension which is the great tool that show the info (in a tooltip) about the hovered element on the page and I can inspect it in DOMi if I middle-click (or ctrl+left-click) it. But it's not working with Tilt. If Tilt is running then it just shows a single item (canvas) on the page and nothing else. So could you please add a similar tool for inspecting the elements of the page by just pointing at them with a cursor and being able to send them to inspect in DOMi? That would be totally awesome and I think even more useful then FireBug for writing/editing CSS styles.

grssam commented 13 years ago

Did you know that double clicking any element will give its html source code. Also the css things is being developed , it is not complete yet and thus hidden in the tilt you have installed.

victorporof commented 13 years ago

There are also plans to integrate Tilt with Style Inspector and Style Editor, both currently developed in the devtools area. Like scrapmac said, viewing the HTML is available by double clicking, and CSS will be available in the next release. Editing the code and modifying the DOM is more complicated for now, but definitely a planned feature and will also be implemented soon. See the wiki for more information about planned features and TODOs.

Drugoy commented 13 years ago

Yeah, I know about double clicking, but how to move up/down in the DOM tree? Attributes Inspector allows to do that. And the info that Tilt gathers about an element - it's simply not full enough. An example: scroll down this page. Activate Tilt and double click the input field where it is asked to write in your name. Tilt shows me only that this element is using html tag "input" and has id = author. That's it. And if I use Attributes Inspector - it also shows me the same info + type (text), size (25), value (it's empty), name (author). Just the same information that DOMi shows about that element.

See the wiki for more information about planned features and TODOs.

Could you please point at TODO list? I've found only this wiki and there is nothing about TODO. EDIT: ah, now I've found that wiki. But why not represent the todo list as "issues"? it's way more convenient I think, as people may discuss some features and their realization in comments + discuss bugs etc.

victorporof commented 13 years ago

Hey, thanks for all the ideas. It will most likely be very useful to show all the attributes for a html node, not just the id and/or class. I will also add these in the next release. Regarding the TODOs, I'm not really sure this is the best time to do it as issues. Tilt is in alpha stage now, there are simply too many features which must be added. Next build will be beta, and after most of the "MUST DO" stuff gets out of the way, TODOs will be best suitable as issues.

Drugoy commented 13 years ago

Regarding the TODOs, I'm not really sure this is the best time to do it as issues. Tilt is in alpha stage now, there are simply too many features which must be added. Next build will be beta, and after most of the "MUST DO" stuff gets out of the way, TODOs will be best suitable as issues.

I just offered, it's up to you which way is more comfortable for you. Whatever you say, just don't stop the development of this awesome extension :)

victorporof commented 13 years ago

Hey, it's a great idea! TODOs will definitely be handled as issues, just in a month or two. There are no plans to stop developing this extension in the near/far future, so no worries there :)

victorporof commented 13 years ago

You can now inspect both the css and attributes in the panel editor. Waiting for feedback :)

Drugoy commented 13 years ago

WOW! Just WOW! That is totally awesome! I like it's new interface at left, that shows the page's structure. And of course I like it's new functionality: seems like you want to make Tilt totally replace DOMi. All I wish now is that there was a special regime to inspect chrome of the browser. Indeed, the whole idea of such visualization is great!

victorporof commented 13 years ago

Thank you :) There was a time when XUL worked just as HTML in Tilt, but some recent optimizations broke this. Will reimplement this feature for the next release.

victorporof commented 13 years ago

Added rudimentary XUL support. May not be exact, but it's a start.

victorporof commented 13 years ago

Closing this issue, for other requests and problems with XUL, start a new special issue.

Drugoy commented 13 years ago

How to inspect the browser's face?

victorporof commented 13 years ago

Just like any XUL window, open chrome://browser/content/browser.xul in the url bar, then open Tilt.