Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes draft
authorGabriel Luong <gabriel.luong@gmail.com>
Sun, 29 Apr 2018 23:55:25 -0400
changeset 789673 5c881b79104acc033e531c1f79a7bbe8206a8054
parent 789672 b3e2845ac301da9d9d015d4a268eb6abc9f434b0
push id108299
push userbmo:gl@mozilla.com
push dateMon, 30 Apr 2018 03:56:04 +0000
reviewersjdescottes
bugs1452206
milestone61.0a1
Bug 1452206 - Tweak spacing and alignment of items in the Inspector Layout panel. r=jdescottes MozReview-Commit-ID: HFnxL75WKBH
devtools/client/inspector/layout/components/Accordion.css
devtools/client/themes/boxmodel.css
devtools/client/themes/common.css
devtools/client/themes/layout.css
--- a/devtools/client/inspector/layout/components/Accordion.css
+++ b/devtools/client/inspector/layout/components/Accordion.css
@@ -44,18 +44,20 @@
 
 .accordion ._header:hover svg {
   fill: var(--theme-comment-alt);
 }
 
 .accordion ._content {
   border-bottom: 1px solid var(--theme-splitter-color);
   font-size: 11px;
+  padding: 4px;
 }
 
 .accordion div:last-child ._content {
   border-bottom: none;
 }
 
 .arrow {
   vertical-align: middle;
   display: inline-block;
+  padding: 0 2px 0 1px;
 }
--- a/devtools/client/themes/boxmodel.css
+++ b/devtools/client/themes/boxmodel.css
@@ -20,17 +20,17 @@
 }
 
 /* Header */
 
 .boxmodel-header,
 .boxmodel-info {
   display: flex;
   align-items: center;
-  padding: 4px 17px;
+  padding: 4px 19px;
 }
 
 .layout-geometry-editor::before {
   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
 }
 
 /* Main: contains the box-model regions */
 
@@ -342,26 +342,27 @@
 
 .boxmodel-properties-header {
   padding: 2px 3px;
 }
 
 .boxmodel-properties-expander {
   vertical-align: middle;
   display: inline-block;
+  margin: 0 2px 0 1px;
 }
 
 .boxmodel-properties-wrapper {
   column-width: 250px;
   column-gap: 20px;
   column-rule: 1px solid var(--theme-splitter-color);
 }
 
 .boxmodel-properties-wrapper .computed-property-view {
-  padding-inline-start: 17px;
+  padding-inline-start: 20px;
 }
 
 .boxmodel-properties-wrapper .computed-property-name-container {
   flex: 1;
 }
 
 .boxmodel-properties-wrapper .computed-property-value-container {
   flex: 1;
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -766,13 +766,12 @@ checkbox:-moz-focusring {
   opacity: 1;
   transform: scaleX(1);
 }
 
 /* No result message styles */
 
 .devtools-sidepanel-no-result {
   font-style: italic;
-  text-align: center;
-  padding: 0.5em;
+  padding: 0.5em 21px;
   -moz-user-select: none;
   font-size: 12px;
 }
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -13,18 +13,18 @@
  * Common styles for shared components
  */
 
 .flexbox-container,
 .grid-container {
   display: flex;
   flex-direction: column;
   flex: 1 auto;
-  align-items: center;
   min-width: 140px;
+  margin-inline-start: 16px;
 }
 
 .grid-container:first-child {
   margin-bottom: 10px;
 }
 
 .flexbox-container > span,
 .grid-container > span {
@@ -39,28 +39,29 @@
   margin: 0;
   padding: 0;
 }
 
 .flexbox-container li,
 .grid-container li {
   display: flex;
   align-items: center;
-  padding: 4px 0;
+  padding: 3px 0;
 }
 
 .flexbox-container input
 .grid-container input {
-  margin: 0 5px;
+  margin-inline-end: 7px;
 }
 
 .flexbox-container label,
 .grid-container label {
   display: flex;
   align-items: center;
+  margin-inline-start: -3px;
 }
 
 /**
  * Grid Container
  */
 
 #layout-flexbox-container,
 #layout-grid-container {
@@ -81,17 +82,17 @@
   margin: 5px 0;
 }
 
 /**
  * Grid Outline
  */
 
 .grid-outline-container {
-  margin: 5px 0;
+  margin: 5px;
 }
 
 .grid-outline-container svg {
   overflow: visible;
 }
 
 .grid-outline-border {
   fill: none;
@@ -133,17 +134,17 @@
 
 /**
  * Grid Item
  */
 
 .grid-color-swatch {
   width: 12px;
   height: 12px;
-  margin-left: 5px;
+  margin-inline-start: -1px;
   border: 1px solid var(--theme-highlight-gray);
   border-radius: 50%;
   cursor: pointer;
 }
 
 .grid-color-value {
   display: none;
 }