Bug 1389966 - Make toolbarbuttons in the bookmarks toolbar adjust to toolbar height. r=Gijs draft
authorJohann Hofmann <jhofmann@mozilla.com>
Mon, 18 Sep 2017 23:41:51 +0200
changeset 666903 b25ce69a6dbf475f4c6a2793506c23f27d3ab9e3
parent 666884 e4261f5b96ebfd63e7cb8af3035ff9fea90c74a5
child 732229 6d5a364151d7b09c3facec49fd14e1fe4231a937
push id80542
push userbmo:jhofmann@mozilla.com
push dateTue, 19 Sep 2017 11:14:56 +0000
reviewersGijs
bugs1389966
milestone57.0a1
Bug 1389966 - Make toolbarbuttons in the bookmarks toolbar adjust to toolbar height. r=Gijs Regular bookmark items can grow flexibly because they apply hover background and padding on the parent toolbarbutton element instead of its contents, like .toolbarbutton-1 does. This patch adds a few hacky overrides to fix that. MozReview-Commit-ID: 9225cIxcY3o
browser/themes/shared/toolbarbuttons.inc.css
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -1,15 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :root {
   --toolbarbutton-hover-transition-duration: 150ms;
-  --toolbarbutton-active-transition-duration: 10ms;
 
   --toolbarbutton-inner-padding: 6px;
 
   /* These hover and active colors should work on both light and dark
      backgrounds. We'll later set colors that cater for light and dark
      backgrounds specifically when we can detect them. */
   --toolbarbutton-hover-background: hsla(0,0%,70%,.4);
   --toolbarbutton-active-background: hsla(0,0%,70%,.6);
@@ -168,35 +167,36 @@ toolbar .toolbaritem-combined-buttons:no
   background-size: 1px 16px;
   opacity: .2;
 }
 
 toolbar[brighttext] .toolbaritem-combined-buttons > separator {
   opacity: .3;
 }
 
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover,
 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]),
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack {
   background-color: var(--toolbarbutton-hover-background);
   color: inherit;
 }
 
+#PersonalToolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active),
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),
 toolbarbutton.bookmark-item[open="true"],
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
 toolbar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
   background-color: var(--toolbarbutton-active-background);
-  transition-duration: var(--toolbarbutton-active-transition-duration);
   color: inherit;
 }
 
 toolbar .toolbarbutton-1[checked]:not(:active):hover > .toolbarbutton-icon {
   background-color: var(--toolbarbutton-hover-background);
   transition: background-color .4s;
 }
 
@@ -287,16 +287,18 @@ toolbarbutton.bookmark-item {
 }
 
 /* Not in a :not(...) clause in the rule above to avoid unduly increasing
  * that rule's specificity. */
 #bookmarks-toolbar-placeholder {
   max-width: unset;
 }
 
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
 .bookmark-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 /* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text {
   display: -moz-box !important;
@@ -306,8 +308,25 @@ toolbarbutton.bookmark-item {
   margin-inline-end: 4px;
 }
 
 /* Remove a pixel of margin on the end so that the badge doesn't
  * overflow the toolbar and push the button into the overflow menu. */
 :root[uidensity=compact] .toolbarbutton-badge {
   margin-inline-end: -7px !important;
 }
+
+/* To allow toolbarbuttons in the bookmarks toolbar to grow in
+ * height with the toolbar (like bookmark items), we apply background
+ * and padding to the buttons, not the button contents. This rule
+ * overrides attributes that would otherwise be duplicated. */
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-text,
+#PersonalToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
+  padding: 0 !important;
+  background: none !important;
+  min-height: 16px;
+}
+
+#PersonalToolbar .toolbarbutton-1 {
+  padding: 0 var(--toolbarbutton-inner-padding);
+  border-radius: var(--toolbarbutton-border-radius);
+}