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
@@ -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;