Closed Bug 1452206 Opened 2 years ago Closed 2 years ago

Tweak spacing and alignment of items in the Inspector Layout panel

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(firefox61 fixed)

RESOLVED FIXED
Firefox 61
Tracking Status
firefox61 --- fixed

People

(Reporter: gl, Assigned: gl)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

Attachments

(1 file)

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;
Summary: Left align the checkbox items in the grid panel → Tweak spacing and alignment of items in the Inspector Layout panel
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
Attachment #8971928 - Flags: review?(jdescottes) → review+
Pushed by gabriel.luong@gmail.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/76f94d0c7c67
Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes
https://hg.mozilla.org/mozilla-central/rev/76f94d0c7c67
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Depends on: 1458381
See Also: → 1459142
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.