Bug 887256 - Show the 'Restart Now' link only once and reduce paddings and margins from Options Panel, r=jwalker

browser/devtools/framework/toolbox-options.js

@@ -181,19 +181,15 @@ OptionsPanel.prototype = {
   },
 
   /**
-   * Hides any label in a box with class "hidden-labels-box" at page load. The
+   * Handles checkbox click inside hbox with class "hidden-labels-box". The
-   * labels are shown again when the user click on the checkbox in the box.
+   * labels inside the hbox are shown again when the user click on the checkbox
+   * in the box.
    */
   prepareRestartPreferences: function() {
-    let labels = this.panelDoc.querySelectorAll(".hidden-labels-box > label");
-    for (let label of labels) {
-      label.style.display = "none";
-    }
     let checkboxes = this.panelDoc.querySelectorAll(".hidden-labels-box > checkbox");
     for (let checkbox of checkboxes) {
       checkbox.addEventListener("command", function(target) {
-        target.nextSibling.style.display = "";
+        target.parentNode.classList.toggle("visible");
-        target.nextSibling.nextSibling.style.display = "";
       }.bind(null, checkbox));
     }
   },

browser/themes/linux/devtools/toolbox.css

@@ -253,20 +253,20 @@
 }
 
 .options-vertical-pane {
-  margin: 15px;
+  margin: 5px;
   width: calc(50% - 30px);
   min-width: 400px;
   -moz-padding-start: 5px;
 }
 
 .options-vertical-pane > label {
-  padding: 5px 0;
+  padding: 2px 0;
   font-size: 1.4rem;
 }
 
 .options-groupbox {
   -moz-margin-start: 15px;
-  padding: 4px;
+  padding: 2px;
 }
 
 .options-groupbox > * {
@@ -285,3 +285,8 @@
   padding: 3px 0 0 !important; /* To align it with the checkbox */
   font-style: italic;
 }
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}

browser/themes/osx/devtools/toolbox.css

@@ -239,20 +239,20 @@
 }
 
 .options-vertical-pane {
-  margin: 15px;
+  margin: 5px;
   width: calc(50% - 30px);
   min-width: 400px;
   -moz-padding-start: 5px;
 }
 
 .options-vertical-pane > label {
-  padding: 5px 0;
+  padding: 2px 0;
   font-size: 1.4rem;
 }
 
 .options-groupbox {
   -moz-margin-start: 15px;
-  padding: 4px;
+  padding: 2px;
 }
 
 .options-groupbox > * {
@@ -271,3 +271,8 @@
   padding: 3px 0 0 !important; /* To align it with the checkbox */
   font-style: italic;
 }
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}

browser/themes/windows/devtools/toolbox.css

@@ -248,20 +248,20 @@
 }
 
 .options-vertical-pane {
-  margin: 15px;
+  margin: 5px;
   width: calc(50% - 30px);
   min-width: 400px;
   -moz-padding-start: 5px;
 }
 
 .options-vertical-pane > label {
-  padding: 5px 0;
+  padding: 2px 0;
   font-size: 1.4rem;
 }
 
 .options-groupbox {
   -moz-margin-start: 15px;
-  padding: 4px;
+  padding: 2px;
 }
 
 .options-groupbox > * {
@@ -280,3 +280,8 @@
   padding: 3px 0 0 !important; /* To align it with the checkbox */
   font-style: italic;
 }
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}