Bug 1354086 - update styling of combined buttons in the overflow panel, r?mikedeboer draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 05 Jul 2017 19:32:08 +0100
changeset 611496 e090c553a36d9e0d6824435868f03a1d3116d416
parent 611495 a22ebfa1b1be72b95bd51dc0a9acb244153fb95d
child 611497 26085c4d76f79a2d38339c7009f498499d4452ea
push id69242
push usergijskruitbosch@gmail.com
push dateWed, 19 Jul 2017 20:25:10 +0000
reviewersmikedeboer
bugs1354086
milestone56.0a1
Bug 1354086 - update styling of combined buttons in the overflow panel, r?mikedeboer MozReview-Commit-ID: Kk1QkOU6GZz
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1304,17 +1304,17 @@ photonpanelmultiview .subviewbutton[chec
   list-style-image: url(chrome://browser/skin/check.svg);
 }
 
 photonpanelmultiview .subviewbutton > .menu-iconic-left {
   -moz-appearance: none;
   margin-inline-end: 0;
 }
 
-photonpanelmultiview .toolbaritem-combined-buttons@inAnyPanel@ {
+#appMenu-popup .toolbaritem-combined-buttons {
   -moz-box-align: center;
   -moz-box-orient: horizontal;
   border: 0;
   border-radius: 0;
   margin-inline-end: 8px;
 }
 
 photonpanelmultiview .toolbaritem-combined-buttons > label {
@@ -1605,16 +1605,17 @@ toolbarpaletteitem[place="palette"] > .t
 }
 
 toolbarpaletteitem[place="palette"] > #search-container {
   min-width: 7em;
   width: 7em;
   min-height: 37px;
 }
 
+%ifndef MOZ_PHOTON_THEME
 .toolbaritem-combined-buttons@inAnyPanel@ {
   background-color: transparent;
   border-radius: 2px;
   border: 1px solid;
   border-color: transparent;
   border-bottom-color: var(--panel-separator-color);
   padding: 0;
   transition-property: background-color, border-color;
@@ -1625,38 +1626,52 @@ toolbarpaletteitem[place="palette"] > #s
 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@ {
   border-top-color: transparent !important;
 }
 
 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons@inAnyPanel@,
 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
   margin-top: -1px;
 }
+%endif
 
-:root:not([photon-structure]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
+.toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton {
   border: 0;
-  padding: .5em;
   margin: 0;
   -moz-box-flex: 1;
+%ifndef MOZ_PHOTON_THEME
   min-width: calc(@menuPanelButtonWidth@);
   max-width: calc(@menuPanelButtonWidth@);
+  padding: .5em;
   /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
      1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
   height: calc(2.2em + 4px);
   max-height: none;
+%else
+  padding-top: 4px;
+  padding-bottom: 4px;
+%endif
   -moz-box-orient: horizontal;
 }
 
-:root:not([photon-structure]) #edit-controls@inAnyPanel@ > #copy-button,
-:root:not([photon-structure]) #zoom-controls@inAnyPanel@ > #zoom-reset-button {
+%ifdef MOZ_PHOTON_THEME
+/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */
+toolbarpaletteitem[place=panel] > .toolbaritem-combined-buttons > toolbarbutton {
+  min-width: calc(@menuPanelButtonWidth@ - 1px);
+  max-width: calc(@menuPanelButtonWidth@ - 1px);
+}
+%else
+#edit-controls@inAnyPanel@ > #copy-button,
+#zoom-controls@inAnyPanel@ > #zoom-reset-button {
   /* reduce the width with 2px for this button to compensate for two separators
      of 1px. */
   min-width: calc(@menuPanelButtonWidth@ - 2px);
   max-width: calc(@menuPanelButtonWidth@ - 2px);
 }
+%endif
 
 #main-window:not([customizing]) .toolbaritem-combined-buttons@inAnyPanel@ > toolbarbutton[disabled] > .toolbarbutton-icon {
   opacity: .25;
 }
 
 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
 %ifdef XP_MACOSX
   min-width: 6ch;
@@ -1748,16 +1763,17 @@ toolbaritem[overflowedItem=true],
 }
 
 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
   text-align: start;
   padding-inline-start: .5em;
 }
 
+%ifndef MOZ_PHOTON_THEME
 .widget-overflow-list > .toolbaritem-combined-buttons {
   min-height: 28px;
 }
 
 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
   content: "";
   display: -moz-box;
   width: 1px;
@@ -1765,16 +1781,17 @@ toolbaritem[overflowedItem=true],
   margin-inline-end: -1px;
   background-image: linear-gradient(hsla(210,54%,20%,.2) 0, hsla(210,54%,20%,.2) 18px);
   background-clip: padding-box;
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1px 18px;
   box-shadow: 0 0 0 1px hsla(0,0%,100%,.2);
 }
+%endif
 
 .subviewbutton[checked="true"] {
   background: url("chrome://global/skin/menu/shared-menu-check.png") center left 7px / 11px 11px no-repeat transparent;
 }
 
 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
   background-position: center right 7px;
 }