canmove, Confirmed users
1,189
edits
Firefox/Projects/Inspector: Difference between revisions
→Use Cases
| Line 124: | Line 124: | ||
=== Use Cases === | === 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. | Right click on an element, choose Inspect from the context menu and have the element displayed in the treeview, style and DOM panels. | ||
==== 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. | Open the Inspector, view the document in the tree panel, scrolling and expanding as needed. Selected nodes update the style and DOM panels. | ||
==== 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. | 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. | ||
==== Remove a node ==== | |||
Right click in the tree panel to remove a selected node from a web page. | Right click in the tree panel to remove a selected node from a web page. | ||
==== 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. | |||
==== 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. | |||
== Non Goals == | == Non Goals == | ||