MozillaWiki

Firefox/Projects/Inspector: Difference between revisions

Page Discussion

Firefox/Projects/Inspector (view source)

Revision as of 15:14, 6 October 2010

7,192 bytes added ,  6 October 2010
→‎Current Status
 
(32 intermediate revisions by 2 users not shown)
Line 16: Line 16:
=== Repository ===
=== Repository ===


[http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector/ http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector/]
* [http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector/ http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector/]
 
Rebased after initial checkin:
* [http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector-2/ http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector-2/]
 
Rebased after Tree Panel implementation:
* [http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector-3 http://hg.mozilla.org/users/rcampbell_mozilla.com/mozilla-inspector-3]


== Current Status ==
== Current Status ==


<onlyinclude>Dynamic highlighting working better. Tree selection on highlight now working. Need to suppress some events, and handle others, like scrolling. Added initial patch to {{bug|547453}}</onlyinclude>
<onlyinclude>Moved to Firefox.next</onlyinclude>


== Next Steps ==
== Next Steps ==


* create popup editors (0.6)
** ['''done'''] file bug - {{bug|575234}}
** ['''done'''] create panel
** wire it up
* rewrite tree view (0.5)
** ['''done''']file a bug
** ['''done''']create panel
** ['''done''']import DOMplate
** ['''done''']implement DOM representation
** ['''done''']modify inspect/selection behavior
** write tests
* watch for location changes
* ['''done'''] modify test cases to not use setTimeout
* better highlighter logic
** nested documents
*** highlighter works in iframes, style panel does not
** ['''done'''] OOB testing, boundaries largely sanitized now
* propagate events through highlighter panel
** DOMMouseScroll {{bug|560830}}
** ['''done'''] click
** ['''done'''] mousemove fixed in {{bug|560829}}
* style panel 0.2 {{bug|560692}}
** ['''done'''] create panel
** ['''done'''] listbox
** ['''done'''] CSS rules for element
** ['''done'''] inherited CSS rules for element
** resizer - partially working, not resizing vertically?
* ['''done'''] experiment with WindowDragging utils on toolbars
** not gonna work.
* DOM panel 0.3 {{bug|561782}}
** ['''done'''] create panel
** ['''done'''] create properties
** ['''done'''] write test
* inspector control panel / toolbar (0.4)
** add next/prev inspected object
** ['''done'''] create buttons for style and dom panels
** ['''done'''] add control toolbar to tree panel
** ['''done'''] add resizer to tree panel
== Completed Steps ==
* better highlighter logic
** ['''done'''] create code to return object under highlighter (testing)
** ['''done'''] watch for out-of-bounds
** ['''done'''] invisible nodes
* ['''done'''] watch for tab switches, close inspector UI
* ['''done'''] migrate startup extension code to Firefox
* ['''done'''] migrate startup extension code to Firefox
* ['''done'''] create dom tree panel (+ associated widgetry)
* ['''done'''] create dom tree panel (+ associated widgetry)
* ['''done'''] highlight node code
* ['''done'''] highlight node code
* ['''done'''] document tree model
* ['''done'''] document tree model
* better highlighter logic (watch for out-of-bounds, invisible nodes, test nested documents, etc)
** OOB testing, boundaries largely sanitized now
* ['''done'''] dynamic highlighting
* ['''done'''] dynamic highlighting
* ['''done'''] <strike>create and install background image for highlighter panel</strike> - ''remove, we don't need this''
* ['''done'''] <strike>create and install background image for highlighter panel</strike> - ''remove, we don't need this''
* <strike>fix dynamic highlighter offset bug(s)</strike>
* ['''done'''] select dynamically highlit node in tree panel
* ['''done'''] select dynamically highlit node in tree panel
* propagate events through highlighter panel
** click done
** mousemoves mostly working, some weirdness happening
* ['''done'''] create browser chrome tests
* ['''done'''] create browser chrome tests
* ['''done'''] ensure working on windows and linux (currently developing on mac)
* ['''done'''] ensure working on windows and linux (currently developing on mac)
** tested on windows
** tested on windows
* ['''done'''] handle document scrolling
* ['''done'''] handle document scrolling
* style panel


== Related Bugs ==  
== Related Bugs ==  


{{bug|547453}} {{bug|560692}}
<strike>{{bug|547453}}</strike>, {{bug|560692}}, {{bug|560829}}, {{bug|560830}}, {{bug|560831}}, {{bug|575234}}, {{bug|562168}}, {{bug|566084}}
 
Ehsan's list:
 
* {{bug|566081}} NEW Inspect doesn't work inside iframes
* {{bug|566083}} NEW Inspect disappears when switching tabs
* {{bug|566084}} NEW Inspect gets disabled when navigating to new pages
* {{bug|566085}} NEW Inspect is oblivious to DOM changes
* {{bug|566086}} NEW Highlight area overlays the inspector
* {{bug|566087}} REOP Inspect in image documents
* {{bug|566088}} NEW Inspect panel doesn't correctly follow the browser window resizing
* {{bug|566089}} NEW Highlight area is very jittery when scrolling
* {{bug|566091}} NEW Inspect panel doesn't differentiate between attribute nodes and elements in a useful way
* {{bug|566092}} NEW Inspector highlight doesn't handle reflows correctly
* {{bug|566363}} NEW Inspect highlight behaves strangely in SVG documents


== Team ==
== Team ==
Line 82: Line 141:
This is making me reconsider the toolpalette above. It might make more sense to drop a toolbar onto the Tree panel and used text-buttons. The extra space in the toolbar would also act as a drag-target en lieu of a title bar.
This is making me reconsider the toolpalette above. It might make more sense to drop a toolbar onto the Tree panel and used text-buttons. The extra space in the toolbar would also act as a drag-target en lieu of a title bar.


== Goals/Use Cases ==
== Goals ==


* Provide basic web page inspector functionality
* Provide basic web page inspector functionality
* be visually pleasing
* be visually pleasing
=== Use Cases ===
==== Inspect an element in a webpage ====
Right click on an element, choose Inspect from the context menu and have the element displayed in the treeview, style and DOM panels. The node will be highlighted with the Highlighter panel. The highlighter panel can display positioning information about the element as well as provide rulers and guides to aid in understanding the layout.
==== Inspect a document ====
Open the Inspector, view the document in the tree panel, scrolling and expanding as needed. Selected nodes update the style and DOM panels as well as position the highlighter in the webpage. The tree panel shows a hierarchical view of the webpage and allows Jimbo to expand and collapse nodes to see the structure of the web page. This is a different kind of view than view source and it will update as the page changes due to DOM manipulation.
==== Edit nodes ====
Open the inspector and select an element. Double click to edit attributes in a node, styles in the style panel or object properties in the DOM panel. Edited attributes and style properties should be highlighted to stand out.
It should also be possible to dump a log of the modified properties and rules that should make it convenient for a developer to reintegrate modifications into their website's files for deployment.
==== Remove a node ====
Right click in the tree panel or an an element to remove a selected node from a web page. Reload will get it back. This can be useful to see what effect a particular element has on the layout of the rest of the document, or just to remove a particular element from the page. E.g., a &lt;blink&gt; node.
==== Position Inspector components (panels) ====
It should be possible for a user to position and size individual inspector components on their screen. Closing individual panels and panel positions and sizes should be saved when reopened.
==== View and edit node layout information ====
The inspector should present layout information about a node in the highlighter itself. Tweaking position in the style panel or the DOM should update the position of the element on the fly.
==== Rulers and Guides for Inspecting Layout ====
The highlighter will have the ability to display Rulers and Guides on the webpage which can then show the various offsets and paddings associated with an inspected node.
Maybe a user would like to measure the distance between two nodes and understand why they spaced the way they are. Using the inspector with guides, they should be able to see all of the necessary offsets and paddings that make up their placement.
==== Positioning ====
When inspecting a page's layout, it might be useful to find all of the elements on a page that have a certain type of positioning. The Rulers and Guides controls should have the ability to highlight all nodes with a certain type of positioning. Or highlight nodes that do not have default static positioning.
==== Understand a widget ====
It should be possible to inspect an element in a web-page with interesting behavior. Sometimes a webpage or application can vary the DOM tree by adding subnodes or making a node hidden or visible when a user does something (mouseover/hover, clicking, etc). These behaviors should be tracked and the inspector should present this information to the user as it happens. Inspecting a node should also display pseudo-classes (e.g., :hover, :active, :focus) and their rules if associated.
For example, say you have a webpage with some nodes that are displayed when a user mouses over a particular control on that page. Our user Georgina wants to know what is causing that DOM node to appear, so she highlights the control and inspects its attributes. It's likely this control will have an event associated with it, and the events panel will list that there is a mouseover event and potentially have a link to the JS source code (via view-source:) that uses it.
==== Inspector History and Console Interaction ====
The inspector keeps track of a number of nodes visited. These can be retraced through the Next/Previous buttons on the inspector's HTML panel's toolbar. In addition, these should set the Firebug Command Line API variables $0, $1, etc. for easy access in the Console.
Someone using the Inspector could, for example, inspect a series of nodes related to a particular control on a webpage. Then, in the console, they could programmatically access them using the $0, $1 mnemonics and then manipulate the DOM objects, print their properties or trigger the inspector.


== Non Goals ==
== Non Goals ==


* We are not providing mechanisms to construct Xpaths for a particular node
* We are not providing mechanisms to construct Xpaths for a particular node
* <strike>XUL Inspector</strike> ''works on xul docs anyway''
* <strike>XUL Inspector</strike> ''works on xul docs in content anyway''
* We should not try to present JavaScript or provide means to debug scripts
* We should not try to present JavaScript or provide means to debug scripts


Line 113: Line 222:


=== 0.2 ===
=== 0.2 ===
* Style panel (read-only)
* Style panel (read-only) {{bug|560692}}
** panel
** panel
** richlistbox
*** auto-dim on inspecting.
*** toolbar as titlebar.
** richlistbox|listbox ?
*** Currently using listbox due to lack of documentation on richlistbox. Investigating.
** test cases
** test cases
*** panel open
*** panel open
Line 169: Line 281:
* Rewriting the treeview
* Rewriting the treeview
** replace xul tree widget with html? richlistbox?
** replace xul tree widget with html? richlistbox?
** use jquery based tree implementation? (jstree)
** <strike>use jquery based tree implementation? (jstree)</strike>
** or, can this be done with xul tree widget and a smarter treeview object?
** use domplate-based source tree solution
** features
** features
*** twisties
*** twisties
Line 189: Line 301:
** popup text widgets over editor target
** popup text widgets over editor target
'''Estimated Time:''' 1-2 weeks
'''Estimated Time:''' 1-2 weeks
=== 0.6.1 ===
* CSS Editor
'''Estimated Time:''' 2-3 days


=== 0.7 ===
=== 0.7 ===
Kdangoor
canmove, Confirmed users, Bureaucrats and Sysops emeriti
1,093

edits

Retrieved from "https://wiki.allizom.org/Special:MobileDiff/217242...258838"