Bug 897496 - [Australis] Fade out and cut off third-to-nth line of toolbarbutton labels in menupane. r=Gijs ui-r=mmaslaney a=gavin
authorJared Wein <jwein@mozilla.com>
Tue, 28 Jan 2014 10:35:00 +0000
changeset 176923 549234c1022db399febca1ff13966638a6782a6c
parent 176922 ed1d0b33ca0b196a021461c748711687bf442f66
child 176924 f909d0a379f03b2754b4e027b19a631cd9d984f3
push id5204
push usergijskruitbosch@gmail.com
push dateSat, 08 Feb 2014 22:42:39 +0000
treeherdermozilla-aurora@2b66d15a6218 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, mmaslaney, gavin
bugs897496
milestone29.0a2
Bug 897496 - [Australis] Fade out and cut off third-to-nth line of toolbarbutton labels in menupane. r=Gijs ui-r=mmaslaney a=gavin
browser/components/customizableui/content/panelUI.inc.xul
browser/themes/shared/customizableui/panelUIOverlay.inc.css
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -195,16 +195,28 @@
               label="&customizeMenu.addToPanel.label;"/>
   </menupopup>
 
   <menupopup id="customizationPanelContextMenu">
     <menuitem command="cmd_CustomizeToolbars"
               accesskey="&customizeMenu.addMoreItems.accesskey;"
               label="&customizeMenu.addMoreItems.label;"/>
   </menupopup>
+  <svg:svg height="0">
+    <svg:defs>
+      <svg:linearGradient gradientUnits="objectBoundingBox" id="menuPanelButtonTextFadeOut" x2="0" y2="1">
+        <svg:stop stop-color="white" offset=".66"/>
+        <svg:stop stop-color="rgb(128,128,128)" offset=".72"/>
+        <svg:stop stop-color="black" offset=".9"/>
+      </svg:linearGradient>
+      <svg:mask id="menuPanelButtonTextFadeOutMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox" x="0" y="0" width="100%" height="100%">
+        <svg:rect width="1" height="1" fill="url(#menuPanelButtonTextFadeOut)"/>
+      </svg:mask>
+    </svg:defs>
+  </svg:svg>
 </panel>
 
 <panel id="widget-overflow"
        role="group"
        type="arrow"
        level="top"
        hidden="true">
   <vbox id="widget-overflow-scroller">
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -103,19 +103,28 @@
 
 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
   padding: 0;
 }
 
 .panelUI-grid .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
-  margin: 2px 0 0;
   text-align: center;
   -moz-hyphens: auto;
+  mask: url(chrome://browser/content/browser.xul#menuPanelButtonTextFadeOutMask);
+  min-height: 3.5em;
+}
+
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
+  margin: 2px 0 0;
+}
+
+.panelUI-grid .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
+  margin: -1px 0 0;
 }
 
 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
   -moz-margin-start: 0;
 }
 
 #PanelUI-contents,
@@ -160,38 +169,57 @@ panelview:not([mainview]) .toolbarbutton
 #zoom-controls@inAnyPanel@ > toolbarbutton > .toolbarbutton-icon {
   min-width: 0;
   min-height: 0;
   margin: 0;
 }
 
 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
 .panelUI-grid .toolbarbutton-1,
-.customization-palette .toolbarbutton-1,
 .panel-customization-placeholder-child {
   -moz-appearance: none;
   -moz-box-orient: vertical;
-  min-width: calc(@menuPanelWidth@ / 3);
-  max-width: calc(@menuPanelWidth@ / 3);
-  height: calc(40px + 2.4em);
-  max-height: calc(40px + 2.4em);
+  width: calc(@menuPanelWidth@ / 3);
+  height: calc(40px + 4em);
+}
+
+.customization-palette .toolbarbutton-1 {
+  -moz-appearance: none;
+  -moz-box-orient: vertical;
+}
+
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
+  -moz-appearance: none;
+  -moz-box-orient: vertical;
+  width: calc(@menuPanelWidth@ / 3 - 2px);
+  height: calc(38px + 4em);
+  margin-top: 3px; /* Hack needed to get type=menu-button to properly align vertically. */
+  border: 0;
+}
+
+toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
+.panelUI-grid .toolbarbutton-1:not([type="menu-button"]),
+.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
+.customization-palette .toolbarbutton-1,
+.panel-customization-placeholder-child {
+  overflow: hidden;
 }
 
 .panel-customization-placeholder-child {
   margin: 6px 0 0;
   padding: 2px 6px;
   border: 1px solid transparent;
 }
 
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-box-align: center;
   width: 16px;
   -moz-margin-start: -16px;
   height: 40px;
-  max-height: 40px;
+  margin-bottom: 4em;
   padding: 0;
 }
 
 .panelUI-grid .toolbarbutton-1:not([buttonover])@buttonStateHover@ > .toolbarbutton-menubutton-dropmarker {
   background-color: hsla(210,4%,10%,.1) !important;
   border-radius: 0 0 0 2px;
 }
 
@@ -225,17 +253,28 @@ toolbaritem[cui-areatype="menu-panel"][s
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
 .panel-customization-placeholder-child > .toolbarbutton-icon {
   min-width: 32px;
   min-height: 32px;
-  margin: 4px;
+  /* Explanation for calc((A / B - C) / D), simplified to calc(X / Y - Z):
+     A / B (@menuPanelWidth@ / 3)
+       Each button is @menuPanelWidth@ / 3 wide.
+     C (46px)
+       The button icon is 32 pixels wide.
+       The button has 12px of horizontal padding (6 on each side).
+       The button has 2px of horizontal border (1 on each side).
+       Total width of button should therefore be 46px.
+     D (2)
+       Divide by 2 since each button has two horizontal margins.
+  */
+  margin: 4px calc(@menuPanelWidth@ / 6 - 23px);
 }
 
 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
   -moz-box-flex: 1;
 }
 
 #edit-controls@inAnyPanel@ > #copy-button,
 #zoom-controls@inAnyPanel@ > #zoom-reset-button {
@@ -414,22 +453,30 @@ panelview .toolbarbutton-1,
 .widget-overflow-list .toolbarbutton-1,
 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #edit-controls@inAnyPanel@ > toolbarbutton,
 #zoom-controls@inAnyPanel@ > toolbarbutton {
   -moz-appearance: none;
   padding: 2px 6px;
   background-color: hsla(210,4%,10%,0);
   border-radius: 2px;
-  border: 1px solid;
+  border-style: solid;
   border-color: hsla(210,4%,10%,0);
   transition-property: background-color, border-color;
   transition-duration: 150ms;
 }
 
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1,
+#edit-controls@inAnyPanel@ > toolbarbutton,
+#zoom-controls@inAnyPanel@ > toolbarbutton {
+  border-width: 1px;
+}
+
 .subviewbutton.panel-subview-footer {
   border-radius: 0;
   border: none;
 }
 
 .subviewbutton.panel-subview-footer > .toolbarbutton-text,
 .subviewbutton.panel-subview-footer > .menu-text {
   -moz-padding-start: 0;
@@ -458,20 +505,16 @@ panelview .toolbarbutton-1,
   -moz-margin-end: -4px;
 }
 
 panelview .toolbarbutton-1,
 .widget-overflow-list .toolbarbutton-1 {
   margin-top: 6px;
 }
 
-.panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-  border: 0;
-}
-
 panelview .toolbarbutton-1@buttonStateHover@,
 .subviewbutton@buttonStateHover@,
 .widget-overflow-list .toolbarbutton-1@buttonStateHover@,
 #edit-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@,
 #zoom-controls@inAnyPanel@ > toolbarbutton@buttonStateHover@ {
   background-color: hsla(210,4%,10%,.08);
   border-color: hsla(210,4%,10%,.1);
 }
@@ -541,17 +584,17 @@ panelview toolbarseparator,
 #PanelUI-footer.panel-multiview-anchor > #PanelUI-help,
 toolbarbutton.panel-multiview-anchor {
   background-color: Highlight;
   background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0));
   background-repeat: repeat-x;
   color: HighlightText;
 }
 
-toolbarpaletteitem[place="palette"] > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker,
+toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
   display: none;
 }
 
 #search-container[cui-areatype="menu-panel"],
 #wrapper-search-container[place="panel"] {
   width: @menuPanelWidth@;
 }