From 4576e41ddbc8effa83175dec12f618be940b9c1c Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Sat, 8 Feb 2014 18:27:56 -0500
Subject: [PATCH] Bug 966905 - [Australis] Headers and footers of subviews
 should be outside scrollable bits of those panels/subviews. r=Gijs

---
 browser/base/content/browser.css              |   4 -
 .../customizableui/content/panelUI.inc.xul    | 155 +++++++++---------
 .../customizableui/content/panelUI.xml        |  28 +++-
 .../customizableui/panelUIOverlay.inc.css     |  10 ++
 4 files changed, 112 insertions(+), 85 deletions(-)

diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index b9434c1921f3..5fcae9f5caa9 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -280,10 +280,6 @@ toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
   direction: rtl;
 }
 
-#panelMenu_bookmarksMenu {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
 #panelMenu_bookmarksMenu > .bookmark-item {
   max-width: none;
 }
diff --git a/browser/components/customizableui/content/panelUI.inc.xul b/browser/components/customizableui/content/panelUI.inc.xul
index f952ffa3f637..5bfec9b569e2 100644
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@@ -52,34 +52,36 @@
 
     <panelview id="PanelUI-history" flex="1">
       <label value="&appMenuHistory.label;" class="panel-subview-header"/>
-      <toolbarbutton id="appMenuViewHistorySidebar"
-                     label="&appMenuHistory.viewSidebar.label;"
-                     type="checkbox"
-                     class="subviewbutton"
-                     oncommand="toggleSidebar('viewHistorySidebar'); PanelUI.hide();">
-        <observes element="viewHistorySidebar" attribute="checked"/>
-      </toolbarbutton>
-      <toolbarbutton id="appMenuClearRecentHistory"
-                     label="&appMenuHistory.clearRecent.label;"
-                     class="subviewbutton"
-                     command="Tools:Sanitize"/>
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="appMenuViewHistorySidebar"
+                       label="&appMenuHistory.viewSidebar.label;"
+                       type="checkbox"
+                       class="subviewbutton"
+                       oncommand="toggleSidebar('viewHistorySidebar'); PanelUI.hide();">
+          <observes element="viewHistorySidebar" attribute="checked"/>
+        </toolbarbutton>
+        <toolbarbutton id="appMenuClearRecentHistory"
+                       label="&appMenuHistory.clearRecent.label;"
+                       class="subviewbutton"
+                       command="Tools:Sanitize"/>
 #ifdef MOZ_SERVICES_SYNC
-      <toolbarbutton id="sync-tabs-menuitem2"
-                     class="syncTabsMenuItem subviewbutton"
-                     label="&syncTabsMenu2.label;"
-                     oncommand="BrowserOpenSyncTabs();"
-                     disabled="true"/>
+        <toolbarbutton id="sync-tabs-menuitem2"
+                       class="syncTabsMenuItem subviewbutton"
+                       label="&syncTabsMenu2.label;"
+                       oncommand="BrowserOpenSyncTabs();"
+                       disabled="true"/>
 #endif
-      <toolbarbutton id="appMenuRestoreLastSession"
-                     label="&appMenuHistory.restoreSession.label;"
-                     class="subviewbutton"
-                     command="Browser:RestoreLastSession"/>
-      <menuseparator id="PanelUI-recentlyClosedTabs-separator"/>
-      <vbox id="PanelUI-recentlyClosedTabs" tooltip="bhTooltip"/>
-      <menuseparator id="PanelUI-recentlyClosedWindows-separator"/>
-      <vbox id="PanelUI-recentlyClosedWindows" tooltip="bhTooltip"/>
-      <menuseparator id="PanelUI-historyItems-separator"/>
-      <vbox id="PanelUI-historyItems" tooltip="bhTooltip"/>
+        <toolbarbutton id="appMenuRestoreLastSession"
+                       label="&appMenuHistory.restoreSession.label;"
+                       class="subviewbutton"
+                       command="Browser:RestoreLastSession"/>
+        <menuseparator id="PanelUI-recentlyClosedTabs-separator"/>
+        <vbox id="PanelUI-recentlyClosedTabs" tooltip="bhTooltip"/>
+        <menuseparator id="PanelUI-recentlyClosedWindows-separator"/>
+        <vbox id="PanelUI-recentlyClosedWindows" tooltip="bhTooltip"/>
+        <menuseparator id="PanelUI-historyItems-separator"/>
+        <vbox id="PanelUI-historyItems" tooltip="bhTooltip"/>
+      </vbox>
       <toolbarbutton id="PanelUI-historyMore"
                      class="panel-subview-footer subviewbutton"
                      label="&appMenuHistory.showAll.label;"
@@ -88,44 +90,46 @@
 
     <panelview id="PanelUI-bookmarks" flex="1" class="PanelUI-subView">
       <label value="&bookmarksMenu.label;" class="panel-subview-header"/>
-      <toolbarbutton id="panelMenuBookmarkThisPage"
-                     class="subviewbutton"
-                     observes="bookmarkThisPageBroadcaster"
-                     command="Browser:AddBookmarkAs"
-                     onclick="PanelUI.hide();"/>
-      <toolbarseparator/>
-      <toolbarbutton id="panelMenu_viewBookmarksSidebar"
-                     label="&viewBookmarksSidebar2.label;"
-                     class="subviewbutton"
-                     oncommand="toggleSidebar('viewBookmarksSidebar'); PanelUI.hide();">
-        <observes element="viewBookmarksSidebar" attribute="checked"/>
-      </toolbarbutton>
-      <toolbarbutton id="panelMenu_viewBookmarksToolbar"
-                     label="&viewBookmarksToolbar.label;"
-                     type="checkbox"
-                     toolbarId="PersonalToolbar"
-                     class="subviewbutton"
-                     oncommand="onViewToolbarCommand(event); PanelUI.hide();"/>
-      <toolbarseparator/>
-      <toolbarbutton id="panelMenu_bookmarksToolbar"
-                     label="&personalbarCmd.label;"
-                     class="subviewbutton"
-                     oncommand="PlacesCommandHook.showPlacesOrganizer('BookmarksToolbar'); PanelUI.hide();"/>
-      <toolbarbutton id="panelMenu_unsortedBookmarks"
-                     label="&unsortedBookmarksCmd.label;"
-                     class="subviewbutton"
-                     oncommand="PlacesCommandHook.showPlacesOrganizer('UnfiledBookmarks'); PanelUI.hide();"/>
-      <toolbarseparator/>
-      <toolbaritem id="panelMenu_bookmarksMenu"
-                   flex="1"
-                   orient="vertical"
-                   smoothscroll="false"
-                   onclick="if (event.button == 1) BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
-                   oncommand="BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
-                   flatList="true"
-                   tooltip="bhTooltip">
-        <!-- bookmarks menu items will go here -->
-      </toolbaritem>
+      <vbox class="panel-subview-body">
+        <toolbarbutton id="panelMenuBookmarkThisPage"
+                       class="subviewbutton"
+                       observes="bookmarkThisPageBroadcaster"
+                       command="Browser:AddBookmarkAs"
+                       onclick="PanelUI.hide();"/>
+        <toolbarseparator/>
+        <toolbarbutton id="panelMenu_viewBookmarksSidebar"
+                       label="&viewBookmarksSidebar2.label;"
+                       class="subviewbutton"
+                       oncommand="toggleSidebar('viewBookmarksSidebar'); PanelUI.hide();">
+          <observes element="viewBookmarksSidebar" attribute="checked"/>
+        </toolbarbutton>
+        <toolbarbutton id="panelMenu_viewBookmarksToolbar"
+                       label="&viewBookmarksToolbar.label;"
+                       type="checkbox"
+                       toolbarId="PersonalToolbar"
+                       class="subviewbutton"
+                       oncommand="onViewToolbarCommand(event); PanelUI.hide();"/>
+        <toolbarseparator/>
+        <toolbarbutton id="panelMenu_bookmarksToolbar"
+                       label="&personalbarCmd.label;"
+                       class="subviewbutton"
+                       oncommand="PlacesCommandHook.showPlacesOrganizer('BookmarksToolbar'); PanelUI.hide();"/>
+        <toolbarbutton id="panelMenu_unsortedBookmarks"
+                       label="&unsortedBookmarksCmd.label;"
+                       class="subviewbutton"
+                       oncommand="PlacesCommandHook.showPlacesOrganizer('UnfiledBookmarks'); PanelUI.hide();"/>
+        <toolbarseparator/>
+        <toolbaritem id="panelMenu_bookmarksMenu"
+                     flex="1"
+                     orient="vertical"
+                     smoothscroll="false"
+                     onclick="if (event.button == 1) BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
+                     oncommand="BookmarkingUI.onPanelMenuViewCommand(event, this._placesView);"
+                     flatList="true"
+                     tooltip="bhTooltip">
+          <!-- bookmarks menu items will go here -->
+        </toolbaritem>
+      </vbox>
       <toolbarbutton id="panelMenu_showAllBookmarks"
                      label="&showAllBookmarks2.label;"
                      class="subviewbutton panel-subview-footer"
@@ -146,22 +150,23 @@
 
     <panelview id="PanelUI-developer" flex="1">
       <label value="&webDeveloperMenu.label;" class="panel-subview-header"/>
-      <vbox id="PanelUI-developerItems"/>
+      <vbox id="PanelUI-developerItems" class="panel-subview-body"/>
     </panelview>
 
     <panelview id="PanelUI-characterEncodingView" flex="1">
       <label value="&charsetMenu.label;" class="panel-subview-header"/>
-
-      <vbox id="PanelUI-characterEncodingView-pinned"
-            class="PanelUI-characterEncodingView-list"/>
-      <toolbarseparator/>
-      <vbox id="PanelUI-characterEncodingView-charsets"
-            class="PanelUI-characterEncodingView-list"/>
-      <toolbarseparator/>
-      <vbox>
-        <label id="PanelUI-characterEncodingView-autodetect-label"/>
-        <vbox id="PanelUI-characterEncodingView-autodetect"
+      <vbox class="panel-subview-body">
+        <vbox id="PanelUI-characterEncodingView-pinned"
               class="PanelUI-characterEncodingView-list"/>
+        <toolbarseparator/>
+        <vbox id="PanelUI-characterEncodingView-charsets"
+              class="PanelUI-characterEncodingView-list"/>
+        <toolbarseparator/>
+        <vbox>
+          <label id="PanelUI-characterEncodingView-autodetect-label"/>
+          <vbox id="PanelUI-characterEncodingView-autodetect"
+                class="PanelUI-characterEncodingView-list"/>
+        </vbox>
       </vbox>
     </panelview>
 
diff --git a/browser/components/customizableui/content/panelUI.xml b/browser/components/customizableui/content/panelUI.xml
index 80c164696024..63eb103049d2 100644
--- a/browser/components/customizableui/content/panelUI.xml
+++ b/browser/components/customizableui/content/panelUI.xml
@@ -200,8 +200,7 @@
 
           this._currentSubView = viewNode;
 
-          // Now we have to transition to transition the panel. There are a few parts
-          // to this:
+          // Now we have to transition the panel. There are a few parts to this:
           //
           // 1) The main view content gets shifted so that the center of the anchor
           //    node is at the left-most edge of the panel.
@@ -222,7 +221,9 @@
             this._viewContainer.removeEventListener("transitionend", trans);
             this._transitioning = false;
           }.bind(this));
-          this._viewContainer.style.height = this._subViews.scrollHeight + "px";
+
+          let newHeight = this._heightOfSubview(viewNode);
+          this._viewContainer.style.height = newHeight + "px";
 
           this._subViewObserver.observe(viewNode, {
             attributes: true,
@@ -293,7 +294,7 @@
               break;
             case "popuphidden":
               this.removeAttribute("panelopen");
-              this._mainView.style.height = "";
+              this._mainView.style.removeProperty("height");
               this.showMainView();
               break;
           }
@@ -313,8 +314,8 @@
       <method name="_syncContainerWithSubView">
         <body><![CDATA[
           if (!this.ignoreMutations && this.showingSubView) {
-            this._viewContainer.style.height =
-              this._subViews.scrollHeight + "px";
+            let newHeight = this._heightOfSubview(this._currentSubView);
+            this._viewContainer.style.height = newHeight + "px";
           }
         ]]></body>
       </method>
@@ -327,6 +328,21 @@
         ]]></body>
       </method>
 
+      <method name="_heightOfSubview">
+        <parameter name="aSubview"/>
+        <body><![CDATA[
+          let body = aSubview.querySelector(".panel-subview-body");
+          let height = body ? body.scrollHeight : aSubview.scrollHeight;
+          if (body) {
+            let header = aSubview.querySelector(".panel-subview-header");
+            let footer = aSubview.querySelector(".panel-subview-footer");
+            height += (header ? header.scrollHeight : 0) +
+                      (footer ? footer.scrollHeight : 0);
+          }
+          return height;
+        ]]></body>
+      </method>
+
     </implementation>
   </binding>
 
diff --git a/browser/themes/shared/customizableui/panelUIOverlay.inc.css b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
index acaf0c4dca4a..c3e97e88b9e5 100644
--- a/browser/themes/shared/customizableui/panelUIOverlay.inc.css
+++ b/browser/themes/shared/customizableui/panelUIOverlay.inc.css
@@ -54,6 +54,16 @@
   -moz-box-flex: 1;
 }
 
+.panel-subview-body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  -moz-box-flex: 1;
+}
+
+#PanelUI-popup .panel-subview-body {
+  margin: -4px;
+}
+
 .panel-subview-header,
 .subviewbutton.panel-subview-footer {
   padding: 12px;