Bug 966905 - [Australis] Headers and footers of subviews should be outside scrollable bits of those panels/subviews. r=Gijs

2014-02-08 18:27:56 -05:00 · 2014-02-08 18:27:56 -05:00 · 4576e41ddb
--- 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;
 }
--- 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>

--- 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>

--- 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;