592248 - Quick Filter Bar is too wide, when in Vertical View --> Search Text Field is very small

Status: RESOLVED FIXED

(Thunderbird :: Search, defect)

Description

[Martin]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.8) Gecko/20100802 Lightning/1.0b2 Thunderbird/3.1.2

When in "Vertical View" Layout, the message list is rather narrow and so is the space for the quick search bar ontop of the message list. A lot of space here gets wasted by the message displayed to the left of the search text field, saying "1 message" or "no results" after a search. So the text field gets squashed on the right. Is it possible to display this "no results" or "3 messages" text in the next row, the one giving the choice of the filtered item, and putting it in front of "Filter messages by:..."? Thus the search text field could start directly to the right of the attachment icon in the quick search bar. 

One other problem that is associated: In some themes, the icons in the quick search bar are replaced by text which is too long to fit into the narrow quick search bar of the "vertical view" layout. Some configurability of the Quick Search Bar might help. 

Reproducible: Always

Steps to Reproduce:
1. View -> Layout -> Vertical View
2. View -> Toolsbars -> Quick Filter Bar
3. Choose folder with emails and enter search text. 
Actual Results:  
Even before the third step it's obvious that the quick search bar is too wide for vertical view. After entering the search text, you see why: The message "no results" (in other languages even longer text) is displayed to the left of the search text field, taking up too much space. 

Expected Results:  
display this "no results" or "2 messages" text somewhere else, e.g. in the next row, on the left of "filter messages by:"

I was using the standard theme. The problem gets worse with other themes that use text instead of icons in the quick filter bar, thus making it even wider.

Comment 1

[Bryan Clark (DevTools PM) [:clarkbw]]

I think we're going to get rid of the "Quick Filter" or "Schnellfilter" text.

This is a great bug for someone looking to do their first patch!  You're just removing code that already exists.

Find all instances of this: qfb-filter-label
http://mxr.mozilla.org/comm-central/search?string=qfb-filter-label

And the strings related: quickFilterBar.barLabel
http://mxr.mozilla.org/comm-central/search?string=quickFilterBar.barLabel

Submit a patch that removes those things and we should get the space back.

Comment 2

[Jim Porter (:squib)]

Would it make sense to have the quick filter bar extend over the message pane in the vertical layout?

Comment 3

[Bryan Clark (DevTools PM) [:clarkbw]]

(In reply to comment #2)
> Would it make sense to have the quick filter bar extend over the message pane
> in the vertical layout?

Yeah, I think that would work as we end up clearing out the message anyway and only messages that match the search can be displayed.

If you're thinking about taking that on we can track both those items in this bug.  I was hoping we could get somebody new on the label removal part.

Adding dmose to see if he knows of any new devs looking to get started with a small change that can land fairly quickly.

Comment 4

[Jim Porter (:squib)]

Attachment: Make quick filter bar appear over thread and message panes in vertical mode

This does what I suggested above. Not asking for review yet, since it might cause some mozmill test failures and I want to check that out first.

Comment 5

[Jim Porter (:squib)]

Attachment: Make the best use of available space for the quick filter bar

This patch expands upon my previous patch and remove the "Quick filter" label, as well as making the textbox a bit flexier so that we don't have a bunch of empty, wasted space. Screenshots/try build forthcoming.

Comment 6

[Jim Porter (:squib)]

Attachment: Vertical view with patch

Comment 7

[Jim Porter (:squib)]

Try build incoming: http://arbpl.visophyte.org/?tree=ThunderbirdTry&pushid=800

Comment 8

[Jim Porter (:squib)]

Comment on attachment 543343 [details] [diff] [review]
Make the best use of available space for the quick filter bar

Requesting review, since it looks like the oranges from try are unrelated to this patch...

Comment 9

[Jim Porter (:squib)]

Comment on attachment 543343 [details] [diff] [review]
Make the best use of available space for the quick filter bar

Now that I think about it, switching review to :asuth and ui-review to :bwinton...

Comment 10

[Andrew Sutherland [:asuth] (he/him)]

Comment on attachment 543343 [details] [diff] [review]
Make the best use of available space for the quick filter bar

But what of our most excellent "quick filter bar" branding and the impact on bug reporting?  I think we should go the other way and instead also add a "Thread Pane:" label to the thread pane! ;)

(In case the winking smiley did not make it clear, I am making a joke there; while I do actually think there will be some terminology slippage, it's a deficiency of our bug reporting mechanism that we don't have a picture you can click on to show where the problem is...)

Unfortunately, the migration out to messagesBox means that the quick filter bar lives outside the display deck which means that you can see the quick filter bar when the account central box is displayed.  (This would also happen for any extensions that put new cards in the display deck.  I would only expect extensions that want to integrate with the folder pane to do that, and I'm not aware of any, but it should be kept in mind.)

We already have a mechanism in place to hide the "qfb-show-filter-bar" button that lives on the tab bar, and it is working appropriately, so it's probably fine to just add logic to collapse (not hide) the "quick-filter-bar" when we do that.  Restoration may be slightly more complicated but still straightforward.

Because of this additional wrinkle, I would suggest adding an additional mozmill test.  I think it will be a relatively simple/straightforward test, just change from a folder with the quick-filter-bar displayed to the account central tab and make sure it got collapsed/whatever.

Comment 11

[Jim Porter (:squib)]

Hmm, perhaps I'm going in the wrong direction with this patch anyway. If our goal were to look like Asa's proposal[1], then the QFB should stay where it is. I suppose where it should go depends a lot on whether you're the sort of person who leaves the QFB open all the time (I'm not). We should probably decide on where we're going with the UI in broader terms before we move stuff around too much...

[1] http://weblogs.mozillazine.org/asa/archives/2011/07/primary_thunderbird.html

Comment 12

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 543344 [details]
Vertical view with patch

(In reply to comment #11)
> Hmm, perhaps I'm going in the wrong direction with this patch anyway. If our
> goal were to look like Asa's proposal[1], then the QFB should stay where it
> is. I suppose where it should go depends a lot on whether you're the sort of
> person who leaves the QFB open all the time (I'm not). We should probably
> decide on where we're going with the UI in broader terms before we move
> stuff around too much...

I chatted with Asa on IRC, and we both agree that this is an improvement.  (His proposal was being intentionally conservative.  I think we can make more wide-sweeping changes for the better than he thought we could.)

The main concern is that it will make it easy to mis-hit the QFB when people are aiming for the header buttons.  But, if you add a border between it and the message header, that should make it visually distinct from the header, and make it harder to hit by accident.  So ui-r=me with that addition.

The future of the UI is tabs-on-top, if that helps.  ;)  Or, in this more specific instance, the future is a merged Gloda and Quick Filter bar that likely lives somewhere new.

Thanks,
Blake.

Comment 13

[Jim Porter (:squib)]

Attachment: Make sure the QFB is hidden in account central

Ok, I finally fixed this to hide the QFB when account central is showing.

The test for this is really simple, but should be sufficient: since the QFB defaults to visible, we just need to make sure it hides when we select an account and then shows again when we select a folder.

UI-wise, I also added a splitter between the pin and the filter buttons to emphasize that the pin is not a filter. Finally, I increased the flex value on the text box as a bonus, since I think it makes a little bit better use of space when the window is very wide. I can remove that if people don't like it though.

Comment 14

[Jim Porter (:squib)]

Attachment: What it looks like now

For reference, here's what it looks like with the latest patch.

Comment 15

[Andrew Sutherland [:asuth] (he/him)]

Comment on attachment 560685 [details] [diff] [review]
Make sure the QFB is hidden in account central

The UI changes sound good, but just to be sure... (and it will be easy thanks to your providing the screenshot!)

Comment 16

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 560685 [details] [diff] [review]
Make sure the QFB is hidden in account central

So, it's close, but as you can see in <http://dl.dropbox.com/u/2301433/Screenshots/SmallExtraFilters.png> the difference in size between the big main bar and small extra filters is just a little too jarring for me.

Possible solutions:
* Make the bottom part larger.
* Make it all one colour so that it blends.

But I suspect neither of those will mess with the code much, so asuth should feel free to continue on with the review.  :)

Thanks,
Blake.

Comment 17

[Jim Porter (:squib)]

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #16)
> Comment on attachment 560685 [details] [diff] [review]
> Make sure the QFB is hidden in account central
> 
> So, it's close, but as you can see in
> <http://dl.dropbox.com/u/2301433/Screenshots/SmallExtraFilters.png> the
> difference in size between the big main bar and small extra filters is just
> a little too jarring for me.

Is this any different from how it used to be?

Comment 18

[Jim Porter (:squib)]

Since we're planning on merging the two search/filter boxes, should this be WONTFIX?

Comment 19

[Philippe Schnoebelen]

The initial report states that "Even before the third step it's obvious that the quick search bar is too wide for vertical view". YES!!!! In vertical view layout, there should be less empty space wasted to the left of the Search Text field.

Comment 20

[Asa Dotzler [:asa]]

OK. there's a patch here that makes life a billion times better for vertical view folks and covers my problem from bug 714340. Can we land it? It's an improvement and doesn't appear to regress anything. Please to be landing this.

Comment 22

[Jim Porter (:squib)]

Blake, regarding comment 17, is there anything that we need to do here? It'd be nice to land this (even though it stalled for 2 years!).

Comment 23

[Blake Winton (:bwinton) (:☕️)]

Well, ideally we'ld increase the padding on the bottom part a bit, but at this point let's just land it and if it annoys anyone other than me, they can file a follow-up bug.  ;)

Comment 24

[Blake Winton (:bwinton) (:☕️)]

Comment on attachment 560685 [details] [diff] [review]
Make sure the QFB is hidden in account central

(ui-r=me, ftr.)

Comment 25

[Jim Porter (:squib)]

Attachment: Fix bitrot

This fixes the bitrot and makes things a little cleverer, thanks to the magic of XUL observers. Now any time the cmd_toggleQuickFilterBar command is disabled, the quick filter bar will automatically be hidden. Much nicer than the old way of manually updating the collapsed state; this does require a bit of CSS magic and an update to the tests, though.

Comment 26

[Jim Porter (:squib)]

Try run: https://tbpl.mozilla.org/?tree=Thunderbird-Try&rev=c8a1bcd2c49e

Comment 27

[Marc Gutt]

If you don't want to wait for this fix use this code in userChrome.css:
/* remove quick search sticky sign */
#qfb-sticky {
	display: none !important;
}
/* remove "Quick Filter" text */
#qfb-filter-label {
	display: none !important;
}
/* move quick search-box to the left */
#qfb-qs-textbox {
	margin:0 0 0 -174px !important;
}

Comment 28

[Magnus Melin [:mkmelin]]

Comment on attachment 8371266 [details] [diff] [review]
Fix bitrot

Review of attachment 8371266 [details] [diff] [review]:
-----------------------------------------------------------------

Nice! I think in vertical view the qfb could need a bottom border or something, so that it's clearly separated from the message header area (as both have lots of buttons). We could add it here or in a followup. r=mkmelin

Comment 29

[Jim Porter (:squib)]

Landed: https://hg.mozilla.org/comm-central/rev/badfd6923c90

And it only took me 3 years to actually land! :D

Comment 30

[Jim Porter (:squib)]

Landed a fix for the test bustage: https://hg.mozilla.org/comm-central/rev/1e4b2d3e3c4f

I gotta sleep now, so if this is still broken, sorry about that! :/

Comment 31

[David.P]

This fix is not good when you have a very wide display, or Thunderbird spanning two monitors:

http://666kb.com/i/crw7z2nefkak5ysrh.png

The filter box(es) are over the message (to the right) and far from the message list pane (to the left).

Can the Quick Filter bar (or its components) be made into normal customizable/movable toolbar items?

Or at least make the Filter Box(es) justified to the left on the toolbar.

Comment 32

[Marc Gutt]

(In reply to David.P from comment #31)
> This fix is not good when you have a very wide display, or Thunderbird
> spanning two monitors:
> 
> http://666kb.com/i/crw7z2nefkak5ysrh.png

Can't confirm that:
https://www.maxrev.de/2014-09-17-17-39-12-posteingang-gutt-it-mozilla-thunderbird-bild-413295.htm

The red line is the middle of my two monitors. As you can see the search box is still part of the left monitor. It seems that you are using a special search addon (you're having two search fields in your screenshot). Maybe this causes the problem.

Comment 33

[David.P]

I don't think so Marc. You don't even seem to have the native Thunderbird Quick Filter Bar (the one that is too wide now) visible. Instead, what you are using seems to be the "Quick Filter Toolbar" Addon.

Comment 34

[Marc Gutt]

I'm using Lightning (calendar) and NewScrollbars only. Here you can see my Thunderbird in Safe Mode (Menu -> Help -> Restart without Add-Ons) without any modification:
https://www.maxrev.de/2014-09-30-15-44-18-posteingang-gutt-it-mozilla-thunderbird-bild-414647.htm

As you can see it results the same output.

Your problem is the Add-On "Expression search". It seems that this addon changes the width to a fixed value.

Comment 35

[David.P]

True, the Add-On "Expression search" renders the standard Quick Filter Box to a fixed width.

However, in your screenshot (same with my TB) it is still not so great to have this giant flush right Quick Filter Box.

I'd rather have the Quick Filter Box flush left. I tried to fiddle with your above CSS code but couldn't make the Quick Filter Box (and the "Expression search" Quick Filter Box) flush left  :(

http://i.imgur.com/jUZve23.png

Comment 36

[Marc Gutt]

I've tried a little bit around but I wasn't able to make it perfect. Maybe you wan't to try it. Use this code in UserChrome.css:
/* quick search main (parent) element */
#quick-filter-bar-main-bar {
	display:block !important;
}
/* quick search drawing-pin icon */
/* this css does not work?! */
#qfb-sticky {
	display:block !important;
	float:right !important;
}
/* both elements seem to be invisible and are between the filter buttons and the textbox */
#qfb-filter-bar-spacer, #qfb-results-label {
}
/* quick search filter buttons */
#quick-filter-bar-collapsible-buttons {
	display:block !important;
	float:right !important;
}
/* quick search input */
#qfb-qs-textbox {
	display:block !important;
	float:left !important;
}

Comment 37

[David.P]

Thanks! Will try to fiddle with your code.

Comment 38

[Aleš Berka]

I have recently upgraded Thunderbird and realized the Quick Search Bar is now spanning above Message List and Message Pane. I was 100 % satisfied with the old solution, Is there any way to get it back (QSB above Message List only)? Any option/UserChrome.css settings?
TIA!

Comment 39

[David.P]

Try to fiddle with the CSS code two posts above yours. Report back if it worked.

Comment 40

[Richard van den Berg]

I have the same problem with the flush right search box. The old one on the left was perfect. Having the search box above the message text instead of the message list is counter intuitive. 

Instead of fiddling with CSS individually should we open a new bug report for this?

Comment 41

[David.P]

I agree with filing a new bug (couldn't manage to successfully do the "fiddle" part myself).

Comment 42

[Richard van den Berg]

Is bug 570815 at all related?

Comment 43

[David.P]

Phew, not shure. However from there, maybe this is interesting:

https://addons.mozilla.org/en-US/thunderbird/addon/unified-search-187593/

Comment 44

[Marc Gutt]

I think it should be opened again as it refers to the same styling problem. The problem with < TB30 was this:
https://www.maxrev.de/2014-11-06-13-35-04-2014-02-04-21-02-16-inbox-guttit-mozilla-thunder-bild-418835.htm

And after fiddling around my solution with CSS was this and this is really perfect:
https://www.maxrev.de/2014-02-06-00-49-51-posteingang-gutt-it-mozilla-thunderbird-bild-386190.htm

This is what to do:
- remove the words "Quick Filter" if screen size is to small
- remove the empty space between the icons and the search field

Comment 45

[Wayne Mery (:wsmwk)]

We tend not to reopen bugs that were previously closed FIXED for various reasons, unless it was closed recently which it was not.  A new bug should be filed, unless squib indicates otherwise.

Comment 46

[Jim Porter (:squib)]

Yes, file a new bug. One alternative would be to use the old position for the QFB, but have it wrap to two lines if it's really narrow.

Comment 47

[github]

For the sake of anyone else reading this far, the new bug was bug 1061818.