Bug 1444301 - Adjust spacing of iframe button; r?jryans draft
authorBrian Birtles <birtles@gmail.com>
Thu, 05 Apr 2018 10:13:22 +0900
changeset 777597 63d61ba74858d1e2bb732de3676a10702e3cb262
parent 777596 71e0f05c6be88ae41cd4673390deed9996d84bf7
child 777598 7bbbef963cb4cbb4af0faea2e833660470f82d40
push id105256
push userbmo:bbirtles@mozilla.com
push dateThu, 05 Apr 2018 01:56:46 +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,28 @@
   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;
 #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;