Bug 1373968 - size overflow panel appropriately in customize mode and align arrow with overflow button, r=mikedeboer
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 23 Jun 2017 14:29:00 +0100
changeset 366470 1cac0f305c702ae3319be2188c39198ef9e31f58
parent 366469 e311e58d0ce0d171cab3b57b1d16135e11c8dd75
child 366471 e5f5ef449435b0dd45528990f51caba6398fd3c3
push id45604
push usergijskruitbosch@gmail.com
push dateWed, 28 Jun 2017 22:23:42 +0000
treeherderautoland@1cac0f305c70 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmikedeboer
bugs1373968
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 1373968 - size overflow panel appropriately in customize mode and align arrow with overflow button, r=mikedeboer MozReview-Commit-ID: FV0TKuD0saa
browser/base/content/browser.css
browser/components/customizableui/content/customizeMode.inc.xul
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1228,29 +1228,52 @@ toolbarpaletteitem[place="palette"] > #d
 }
 
 #customization-container[photon] > #customization-content-container > #customization-palette-container {
   flex-grow: 1;
 }
 
 #customization-panelHolder > #widget-overflow-fixed-list {
   padding-bottom: 50px; /* Make sure there's always space to drop stuff. */
+  flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+#customization-container:not([photon]) #customization-panelHolder {
+  overflow-y: hidden;
 }
 
-#customization-panelHolder {
-  overflow-y: hidden;
+#customization-container[photon] #customization-panel-container {
+  display: flex;
+  flex-direction: column;
+  flex: none;
+}
+
+#customization-container[photon] #customization-panelWrapper,
+#customization-container[photon] #customization-panelWrapper > .panel-arrowcontent,
+#customization-container[photon] #customization-panelHolder {
+  flex-direction: column;
+  display: flex;
+  min-height: 0;
+}
+
+#customization-container[photon] #customization-panelWrapper {
+  flex: 1 1 auto;
+  height: 0; /* Don't let my contents affect ancestors' content-based sizing */
+  align-items: end; /* align to the end on the cross-axis (affects arrow) */
 }
 
 #customization-panelWrapper,
 #customization-panelWrapper > .panel-arrowcontent {
   -moz-box-flex: 1;
 }
 
-#customization-panelWrapper > .panel-arrowcontent {
-  padding: 0 !important;
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowcontent {
   overflow: hidden;
 }
 
 #customization-panelHolder > #PanelUI-mainView {
   display: flex;
   flex-direction: column;
   /* Hack alert - by manually setting the preferred height to 0, we convince
      #PanelUI-mainView to shrink when the window gets smaller in customization
--- a/browser/components/customizableui/content/customizeMode.inc.xul
+++ b/browser/components/customizableui/content/customizeMode.inc.xul
@@ -67,21 +67,17 @@
               oncommand="gCustomizeMode.exit();"
               label="&customizeMode.done;"
               class="customizationmode-button"/>
     </hbox>
   </box>
   <box id="customization-content-container"/>
   <vbox id="customization-panel-container">
     <vbox id="customization-panelWrapper">
-      <html:style html:type="text/html" scoped="scoped">
-        @import url(chrome://global/skin/popup.css);
-      </html:style>
       <box class="panel-arrowbox">
-        <box flex="1"/>
         <image class="panel-arrow" side="top"/>
       </box>
       <box class="panel-arrowcontent" side="top" flex="1">
         <hbox id="customization-panelHolder"/>
         <box class="panel-inner-arrowcontentfooter" hidden="true"/>
       </box>
     </vbox>
   </vbox>
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -475,9 +475,81 @@ toolbarpaletteitem[place="toolbar"]:not(
 .customization-lwtheme-menu-footeritem:hover {
   background: linear-gradient(var(--arrowpanel-dimmed) 40%, transparent) padding-box;
 }
 
 .customization-lwtheme-menu-footeritem:first-child {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
 
+#customization-panelWrapper > .panel-arrowcontent {
+  color: var(--arrowpanel-color);
+  background: var(--arrowpanel-background);
+  background-clip: padding-box;
+  border: 1px solid var(--arrowpanel-border-color);
+%ifdef XP_MACOSX
+  box-shadow: 0 0 0 1px var(--arrowpanel-border-color);
+  -moz-appearance: none;
+  border-radius: var(--arrowpanel-border-radius);
+%else
+  box-shadow: 0 0 4px hsla(0,0%,0%,.2);
+%endif
+}
+
+#customization-panelWrapper > .panel-arrowbox {
+  position: relative;
+  height: 10px;
+%ifndef XP_MACOSX
+  margin-bottom: 2px;
+%endif
+}
+
+#customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+%ifdef XP_MACOSX
+  list-style-image: var(--panel-arrow-image-vertical,
+                        url("chrome://global/skin/arrow/panelarrow-vertical.png"));
+  /* The OS X image is 2px narrower than the windows/linux one.
+   * Add padding to compensate: */
+  padding: 0 1px;
+  /* specify width for hidpi image to fit correctly */
+  width: 20px;
+%else
+  list-style-image: var(--panel-arrow-image-vertical,
+                        url("chrome://global/skin/arrow/panelarrow-vertical-themed.svg"));
+%endif
+  /* The arrow needs to point to the overflow button. The numbers involved
+   * are:
+   * overflow button width: (16px + 2 * 2px padding
+   * + 2 * toolbarbutton-inner-padding)
+   * hamburger button width: (16px + 2 * 5px padding
+   * + 2 * toolbarbutton-inner-padding)
+   * hamburger button border + margin: 1px + 2px
+   * The total desired offset from the right edge of the window is thus:
+   * 10px + toolbarbutton-inner-padding (center of overflow button) +
+   * 29px + 2 * toolbarbutton-inner-padding
+   * The #customization-panel-container has a 25px margin, so that leaves:
+   * 14px + 3 * toolbarbutton-inner-padding
+   * Finally, we need to center the arrow, which is 20px wide, so subtract
+   * 10px.
+   */
+  margin-inline-end: calc(4px + 3 * var(--toolbarbutton-inner-padding));
+}
+
+%ifdef XP_MACOSX
+@media (min-resolution: 2dppx) {
+  #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+    list-style-image: var(--panel-arrow-image-vertical,
+                          url("chrome://global/skin/arrow/panelarrow-vertical@2x.png"));
+  }
+}
+%endif
+
+/* Non-photon adjustments. Remove when we stop supporting non-photon. */
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox {
+  margin-bottom: -1px;
+}
+
+#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowbox > .panel-arrow[side="top"] {
+  margin-inline-end: 0;
+  margin-inline-start: 22.35em;
+}
+
 %include customizeTip.inc.css