Bug 1349691: Polish the grid inspector and layout tab. r?gl draft
authorStanford Lockhart <lockhart@cs.dal.ca>
Wed, 29 Mar 2017 17:31:46 -0300
changeset 553349 91be98c1e2b5b20a4216ddf6df3ef8da97449001
parent 552691 272ce6c2572164f5f6a9fba2a980ba9ccf50770c
child 622037 cd24430f4877297d3e4a313d69e914a6c057d00f
push id51604
push userbmo:lockhart@cs.dal.ca
push dateWed, 29 Mar 2017 21:15:32 +0000
reviewersgl
bugs1349691
milestone55.0a1
Bug 1349691: Polish the grid inspector and layout tab. r?gl MozReview-Commit-ID: DPYqfcDRKcs
devtools/client/inspector/grids/components/GridDisplaySettings.js
devtools/client/inspector/layout/components/App.js
devtools/client/themes/layout.css
--- a/devtools/client/inspector/grids/components/GridDisplaySettings.js
+++ b/devtools/client/inspector/grids/components/GridDisplaySettings.js
@@ -51,31 +51,35 @@ module.exports = createClass({
       },
       dom.span(
         {},
         getStr("layout.gridDisplaySettings")
       ),
       dom.ul(
         {},
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showInfiniteLines,
                 onChange: this.onShowInfiniteLinesCheckboxClick,
               }
             ),
             getStr("layout.extendGridLinesInfinitely")
           )
         ),
         dom.li(
-          {},
+          {
+            className: "grid-settings-item"
+          },
           dom.label(
             {},
             dom.input(
               {
                 type: "checkbox",
                 checked: highlighterSettings.showGridLineNumbers,
                 onChange: this.onShowGridLineNumbersCheckboxClick,
               }
--- a/devtools/client/inspector/layout/components/App.js
+++ b/devtools/client/inspector/layout/components/App.js
@@ -47,16 +47,17 @@ const App = createClass({
   },
 
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     return dom.div(
       {
         id: "layout-container",
+        className: "devtools-monospace"
       },
       Accordion({
         items: [
           {
             header: BOXMODEL_L10N.getStr("boxmodel.title"),
             component: BoxModel,
             componentProps: this.props,
             opened: true,
--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -13,41 +13,43 @@
  * Common styles for shared components
  */
 
 .grid-container {
   display: flex;
   flex-direction: column;
   flex: 1;
   align-items: center;
+  min-width: 140px;
 }
 
 .grid-container > span {
   font-weight: bold;
   margin-bottom: 3px;
 }
 
 .grid-container > ul {
   list-style: none;
   margin: 0;
   padding: 0;
 }
 
-.grid-container li {
+.grid-container .grid-item {
   padding: 4px 0;
 }
 
 /**
  * Grid Container
  */
 
 #layout-grid-container {
   display: flex;
   flex-direction: column;
   margin: 5px;
+  padding: 10px;
 }
 
 /**
  * Grid Content
  */
 
 .grid-content {
   display: flex;
@@ -108,8 +110,20 @@
   border: 1px solid var(--theme-highlight-gray);
   border-radius: 50%;
   cursor: pointer;
 }
 
 .grid-color-value {
   display: none;
 }
+
+/**
+ * Settings Item
+ */
+
+.grid-settings-item {
+  margin-bottom: 1px;
+}
+
+.grid-settings-item label {
+  line-height: 22px;
+}