Bug 1354086 - update styling of combined buttons in the overflow panel, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Wed, 05 Jul 2017 19:32:08 +0100
changeset 418486 48e18b6a3c7ccc17ac59efa994d2b26268a59d26
parent 418485 ae0195a7359affc1d6e44befb827d948fece070d
child 418487 eadb66a18addce2862b1269fa10d288ee6ca4333
push id7566
push usermtabara@mozilla.com
push dateWed, 02 Aug 2017 08:25:16 +0000
treeherdermozilla-beta@86913f512c3c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1354086
milestone56.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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;
 }