1452206 - Tweak spacing and alignment of items in the Inspector Layout panel

Status: RESOLVED FIXED

(DevTools :: Inspector, enhancement, P3)

Description

[Gabriel Luong [:gl] (ΦωΦ)]

https://mozilla.invisionapp.com/share/8XGK3L6EW6G#/screens

Comment 1

[Victoria Wang [:victoria]]

Below are some suggestions for the alignment, including general spacing tweaks for the Inspector sidebar. It should basically look like https://files.slack.com/files-pri/T027LFU12-FABPHHYEN/image.png

.accordion ._content
padding: 4px;

Accordion
.arrow  (also .boxmodel-properties-expander)
0px 2px 0 1px

.devtools-sidepanel-no-result
padding: 0.5em 21px;
remove text-align: center;

flexbox-container, .grid-container {
remove  align-items: center;
margin-left: 16px;

Fix for animation panel's .devtools-sidepanel-no-result
- less top padding
- center picker icon

.flexbox-container li, .grid-container li {
    padding: 3px 0;

.flexbox-container label, .grid-container label
margin-left: -3px;

All checkbox inputs:
margin-right: 7px;

.grid-color-swatch {
    margin-left: -1px;

.grid-outline-container {
    margin: 5px auto;

.boxmodel-header, .boxmodel-info {
    padding: 4px 19px;

.boxmodel-properties-wrapper .computed-property-view {
    padding-inline-start: 20px;

Comment 2

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel.

Review commit: https://reviewboard.mozilla.org/r/240668/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/240668/

Comment 3

[Julian Descottes [:jdescottes]]

Comment on attachment 8971928 [details]
Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel.

https://reviewboard.mozilla.org/r/240668/#review246322

Thanks Gabriel, looks good!

::: devtools/client/inspector/layout/components/Accordion.css:62
(Diff revision 1)
>  }
>  
>  .arrow {
>    vertical-align: middle;
>    display: inline-block;
> +  padding: 0 2px 0 1px;

should we use inline-start / inline-end here?

::: devtools/client/themes/boxmodel.css:350
(Diff revision 1)
>  }
>  
>  .boxmodel-properties-expander {
>    vertical-align: middle;
>    display: inline-block;
> +  margin: 0 2px 0 1px;

same comment

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/76f94d0c7c67
Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes

Comment 5

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/76f94d0c7c67