Bug 1374088 - camera icon on 'Screenshort behavior' label is now correctly aligned; r=gl
authorTowkir Ahmed <towkir17@gmail.com>
Wed, 12 Jul 2017 13:40:07 -0400
changeset 607725 9b778f1f3c2d8ac62c12c7b3f510962e940256bf
parent 607724 872e9c8fec61fbc0596db21b3002472dea32d864
child 607726 e738e018fe57aa713c5b977c985b8809188ef591
push id68095
push userbmo:rbarker@mozilla.com
push dateWed, 12 Jul 2017 20:01:47 +0000
reviewersgl
bugs1374088
milestone56.0a1
Bug 1374088 - camera icon on 'Screenshort behavior' label is now correctly aligned; r=gl
devtools/client/framework/options-panel.css
devtools/client/framework/toolbox-options.xhtml
--- a/devtools/client/framework/options-panel.css
+++ b/devtools/client/framework/options-panel.css
@@ -105,17 +105,19 @@
 #devtools-sourceeditor-keybinding-select {
   min-width: 130px;
 }
 
 #devtools-sourceeditor-tabsize-select {
   min-width: 80px;
 }
 
-#screenshot-icon {
-  vertical-align: middle;
-  min-width: 0;
-  padding: 5px;
+#screenshot-options legend::after {
+  content: "";
+  display: inline-block;
+  background-image: url("chrome://devtools/skin/images/command-screenshot.svg");
+  width: 16px;
+  height: 16px;
+  vertical-align: sub;
+  margin-inline-start: 5px;
+  filter: var(--icon-filter);
+  opacity: 0.6;
 }
-
-#screenshot-icon::before {
-  background-image: url(chrome://devtools/skin/images/command-screenshot.svg);
-}
--- a/devtools/client/framework/toolbox-options.xhtml
+++ b/devtools/client/framework/toolbox-options.xhtml
@@ -104,19 +104,17 @@
         <label title="&options.stylesheetAutocompletion.tooltip;">
           <input type="checkbox"
                  data-pref="devtools.styleeditor.autocompletion-enabled"/>
           <span>&options.stylesheetAutocompletion.label;</span>
         </label>
       </fieldset>
 
       <fieldset id="screenshot-options" class="options-groupbox">
-        <legend>&options.screenshot.label;
-          <button id="screenshot-icon" disabled="true" class="devtools-button"></button>
-        </legend>
+        <legend>&options.screenshot.label;</legend>
         <label title="&options.screenshot.clipboard.tooltip;">
           <input type="checkbox"
                  id="devtools-screenshot-clipboard"
                  data-pref="devtools.screenshot.clipboard.enabled"/>
           <span>&options.screenshot.clipboard.label;</span>
         </label>
         <label title="&options.screenshot.audio.tooltip;">
           <input type="checkbox"