Bug 563428 - Quick Filter Bar does not auto-collapse at startup when vertical layout is in use. v1 collapse mo better with requested changes. r=bwinton

mail/base/content/msgMail3PaneWindow.js

@@ -249,6 +249,37 @@ function UpdateMailPaneConfig(aMsgWindowInitialized) {
       if (gDBView && GetNumSelectedMessages() == 1)
         gDBView.reloadMessage();
     }
+
+    // The quick filter bar gets badly lied to due to standard XUL/XBL problems,
+    //  so we need to generate synthetic notifications after a delay on those
+    //  nodes that care about overflow.  The 'lie' comes in the form of being
+    //  given (at startup) an overflow event with a tiny clientWidth (100), then
+    //  a more tiny resize event (clientWidth = 32), then a resize event that
+    //  claims the entire horizontal space is allocated to us
+    //  (clientWidth = 1036).  It would appear that when the messagepane's XBL
+    //  binding (or maybe the splitter's?) finally activates, the quick filter
+    //  pane gets resized down without any notification.
+    // Our solution tries to be generic and help out any code with an onoverflow
+    //  handler.  We will also generate an onresize notification if it turns out
+    //  that onoverflow is not appropriate (and such a handler is registered).
+    //  This does require that XUL attributes were used to register the handlers
+    //  rather than addEventListener.
+    // The choice of the delay is basically a kludge because something like 10ms
+    //  may be insufficient to ensure we get enqueued after whatever triggers
+    //  the layout discontinuity.  (We need to wait for a paint to happen to
+    //  trigger the XBL binding, and then there may be more complexities...)
+    setTimeout(function UpdateMailPaneConfig_deferredFixup() {
+      let threadPaneBox = document.getElementById("threadPaneBox");
+      let overflowNodes =
+        threadPaneBox.querySelectorAll("[onoverflow]");
+      for (let iNode = 0; iNode < overflowNodes.length; iNode++) {
+        let node = overflowNodes[iNode];
+        if (node.scrollWidth > node.clientWidth)
+          node.onoverflow();
+        else if (node.onresize)
+          node.onresize();
+      }
+    }, 1500);
   }
 }
 

mail/base/content/quickFilterBar.js

@@ -66,7 +66,9 @@ let QuickFilterBarMuxer = {
 
     // -- window hookups
     let dis = this;
-    window.addEventListener("resize", function() {
+    // know when a resize happens so we can expand things collapsed by our
+    //  overflow handler (registered by attribute in the XUL file).
+    window.addEventListener("resize", function QFBM_resizeWrap() {
                               dis.onWindowResize();
                             }, false);
 
@@ -326,6 +328,12 @@ let QuickFilterBarMuxer = {
    */
   _minExpandedBarWidth: null,
 
+  /**
+   * Where we stash the minwidth for the text search box, if present, when
+   *  _buttonLabelsCollapsed.
+   */
+  _savedOffTextWidgetMinWidth: null,
+
   /**
    * Our general strategy is this:
    * - All collapsible buttons are set to not flex and live in the
@@ -334,13 +342,15 @@ let QuickFilterBarMuxer = {
    * - All flexy widgets have some minimum size configured.
    * - When the bar starts to overflow we save off the (minimum) size of the bar
    *   so that once it gets large enough again we can restore the buttons.
+   * - On overflow we also lose the minwidth constraint on the search box so it
+   *   resizes down in a reasonable fashion.
    *
    * This method handles the overflow case where we transition to collapsed
    * buttons.  Our onWindowResize logic handles detecting when it is time to
    * un-collapse.
    */
   onOverflow: function QFBM_onOverflow() {
-    // if we are already collapsed, there is nothing more to do.
+    // If we are already collapsed, there is nothing more to do.
     if (this._buttonLabelsCollapsed)
       return;
 
@@ -352,7 +362,14 @@ let QuickFilterBarMuxer = {
     this._minExpandedBarWidth = quickFilterBarBox.scrollWidth;
     this._buttonLabelsCollapsed = true;
 
+    let textWidget = document.getElementById(QuickFilterManager.textBoxDomId);
+    if (textWidget) {
+      this._savedOffTextWidgetMinWidth = textWidget.getAttribute("minwidth");
+      textWidget.removeAttribute("minwidth");
+    }
+
     collapsibleButtonBox.setAttribute("shrink", "true");
+
   },
 
   /**
@@ -374,6 +391,13 @@ let QuickFilterBarMuxer = {
     this._buttonLabelsCollapsed = false;
     this._minExpandedBarWidth = null;
 
+    // restore the text widget's min width...
+    let textWidget = document.getElementById(QuickFilterManager.textBoxDomId);
+    if (textWidget && this._savedOffTextWidgetMinWidth) {
+      textWidget.setAttribute("minwidth", this._savedOffTextWidgetMinWidth);
+      this._savedOffTextWidgetMinWidth = null;
+    }
+
     let collapsibleButtonBox =
       document.getElementById("quick-filter-bar-collapsible-buttons");
     collapsibleButtonBox.removeAttribute("shrink");