Bug 1444301 - Adjust spacing of iframe button; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 777697 ec6adc7b9c6547230f4555c1ebc139b9a3046130
parent 777596 71e0f05c6be88ae41cd4673390deed9996d84bf7
child 777698 080a1128854bb9e8e8f347ff118e45e5e033422a
push id105266
push userbmo:bbirtles@mozilla.com
push dateThu, 05 Apr 2018 07:52:20 +0000
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
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -269,22 +269,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;