Bug 1444301 - Adjust spacing of iframe button; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 778577 8c62b422a051fd6055fc3b6a25a1e5571a7bf747
parent 778576 2a2fb3f2fee762025329749c18289a4ce4558617
child 778578 50600b9c4470f35e03021f5fde0e3a016047af41
push id105521
push userbbirtles@mozilla.com
push dateFri, 06 Apr 2018 14:07:54 +0000
reviewersjryans
bugs1444301
milestone61.0a1
Bug 1444301 - Adjust spacing of iframe button; r?jryans This button is a little unbalanced: the icon is in the middle of the button but the drop-down arrow is flush up against the side. Now that it appears right before the separator it looks quite odd since the arrow is touching the separator. This patch adjusts the margins so that the contents sit more neatly inside the button. This patch also fixes the vertical position of the arrow so that it is a little lower, to match the mockup. MozReview-Commit-ID: 3P50X69paFb
devtools/client/themes/toolbox.css
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -233,22 +233,32 @@
   background-repeat: no-repeat;
 
   /* Override background-size from the command-button.
    The drop down arrow is smaller */
   background-size: 8px 4px !important;
   min-width: 32px;
 }
 
+#command-button-frames::before {
+  /* The frames button has a drop-down arrow making it asymmetrical.
+   * Drop the margin on the non-arrow side to make it fit more symmetrical. */
+  margin-inline-start: 0px;
+  /* The direction of devtools-button is forced to 'ltr' for text-as-image
+   * buttons. We don't need that here (there's no text in this button) and we
+   * want the logical properties to reflect the text direction so unset it. */
+  direction: unset;
+}
+
 #command-button-frames:-moz-locale-dir(ltr) {
-  background-position: right;
+  background-position: right 2px top 14px;
 }
 
 #command-button-frames:-moz-locale-dir(rtl) {
-  background-position: left;
+  background-position: left 2px top 14px;
 }
 
 /* Toolbox panels */
 
 .toolbox-panel {
   display: -moz-box;
   -moz-box-flex: 1;
   visibility: collapse;