Detailed Element Layout

Summary

• The browser goes through quite a few computations in order to decide how big an element should be on the page. The purpose of the Layout tool is to help the user see detailed information about the final dimensions of a page element.
• Some layout information will be displayed in the Highlighter directly (like after this feature lands, however). Due to space constraints, all of the useful numbers cannot be displayed there. The Layout tool will provide the details that can't be easily represented over the page element itself.

References

• Feature Wiki page

Use Cases

• As with the Style Inspector, the use cases are similar:
  • a user is trying to fix a problem with their element's dimensions
  • a user is trying to learn about how another page is designed

Test Cases

• The test cases for this feature can be viewed here or in Moztrap here.

Important Bugs

• 683954 - [Layout] Implement an abstract view of the layout of the selected node
• 663778 - [layout] Draw layout information of the selected node
• 674887 - Find a better place for the Layout View
• 747218 - [layout view] Pref on the layout view
• 747220 - [layout view] update the UI
• 766526 - [layout view] update the node dimension (not the whole view) when node is unlocked

Not Tested

• TBD

Sign off Criteria

• All the test cases were executed.
• All the major bugs have been fixed.