DevTools/Features/Layout

Please use "Edit with form" above to edit this page.

Status

Detailed Element Layout View
Stage	Development
Status	In progress
Release target	`
Health	OK
Status note	Initial patch is up.

{{#set:Feature name=Detailed Element Layout View

|Feature stage=Development |Feature status=In progress |Feature version=` |Feature health=OK |Feature status note=Initial patch is up. }}

Team

Product manager	Kevin Dangoor
Directly Responsible Individual	Kevin Dangoor
Lead engineer	Paul Rouget
Security lead	`
Privacy lead	`
Localization lead	`
Accessibility lead	`
QA lead	`
UX lead	`
Product marketing lead	`
Operations lead	`
Additional members	`

{{#set:Feature product manager=Kevin Dangoor

|Feature feature manager=Kevin Dangoor |Feature lead engineer=Paul Rouget |Feature security lead=` |Feature privacy lead=` |Feature localization lead=` |Feature accessibility lead=` |Feature qa lead=` |Feature ux lead=` |Feature product marketing lead=` |Feature operations lead=` |Feature additional members=` }}

Open issues/risks

`

Stage 1: Definition

1. Feature overview

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. 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.

2. Users & use cases

As with the Style Inspector, the use cases are similar:

1. a user is trying to fix a problem with their element's dimensions
2. a user is trying to learn about how another page is designed

3. Dependencies

`

4. Requirements

`

Non-goals

`

Stage 2: Design

5. Functional specification

Invoking the Layout Tool

In the Highlighter, click a "Layout" button on the Highlighter toolbar. The Layout tool will appear in the sidebar.

Layout View Display

The Layout tool displays the following information about the selected element (F1):

1. upper left corner coordinates (relative to the top left of the page)
2. outer box size (including everything below)
3. margins
4. borders
5. padding
6. inner box size (content size)

(optional) The box is represented with an aspect ratio that is similar to that of the original element (F2). This makes it easier for the user to mentally associate the numbers with the dimensions of their element.

6. User experience design

`

Stage 3: Planning

7. Implementation plan

See bug bug 683954

8. Reviews

Security review

`

Privacy review

`

Localization review

`

Accessibility

`

Quality Assurance review

`

Operations review

`

Stage 4: Development

9. Implementation

`

Stage 5: Release

10. Landing criteria

` {{#set:Feature open issues and risks=` |Feature overview=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. 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. |Feature users and use cases=As with the Style Inspector, the use cases are similar:

1. a user is trying to fix a problem with their element's dimensions
2. a user is trying to learn about how another page is designed

|Feature dependencies=` |Feature requirements=` |Feature non-goals=` |Feature functional spec===== Invoking the Layout Tool ====

In the Highlighter, click a "Layout" button on the Highlighter toolbar. The Layout tool will appear in the sidebar.

Layout View Display

The Layout tool displays the following information about the selected element (F1):

1. upper left corner coordinates (relative to the top left of the page)
2. outer box size (including everything below)
3. margins
4. borders
5. padding
6. inner box size (content size)

(optional) The box is represented with an aspect ratio that is similar to that of the original element (F2). This makes it easier for the user to mentally associate the numbers with the dimensions of their element. |Feature ux design=` |Feature implementation plan=See bug bug 683954 |Feature security review=` |Feature privacy review=` |Feature localization review=` |Feature accessibility review=` |Feature qa review=` |Feature operations review=` |Feature implementation notes=` |Feature landing criteria=` }}

Feature details

Priority	P2
Rank	999
Theme / Goal	`
Roadmap	Developer Tools
Secondary roadmap	`
Feature list	Desktop
Project	`
Engineering team	DevTools

{{#set:Feature priority=P2

|Feature rank=999 |Feature theme=` |Feature roadmap=Developer Tools |Feature secondary roadmap=` |Feature list=Desktop |Feature project=` |Feature engineering team=DevTools }}

Team status notes

	status	notes
Products	`	`
Engineering	`	`
Security	`	`
Privacy	`	`
Localization	`	`
Accessibility	`	`
Quality assurance	`	`
User experience	`	`
Product marketing	`	`
Operations	`	`

{{#set:Feature products status=`

|Feature products notes=` |Feature engineering status=` |Feature engineering notes=` |Feature security status=` |Feature security health=` |Feature security notes=` |Feature privacy status=` |Feature privacy notes=` |Feature localization status=` |Feature localization notes=` |Feature accessibility status=` |Feature accessibility notes=` |Feature qa status=` |Feature qa notes=` |Feature ux status=` |Feature ux notes=` |Feature product marketing status=` |Feature product marketing notes=` |Feature operations status=` |Feature operations notes=` }}