allow selecting messages via selection boxes instead of classic selection
Categories
(Thunderbird :: Folder and Message Lists, enhancement)
Tracking
(Not tracked)
People
(Reporter: walgie, Assigned: alta88)
References
(Blocks 1 open bug)
Details
Attachments
(8 files, 11 obsolete files)
|
732 bytes,
image/svg+xml
|
Details | |
|
25.96 KB,
patch
|
aceman
:
review+
Paenglab
:
ui-review+
alta88
:
ui-review+
|
Details | Diff | Splinter Review |
|
2.06 KB,
image/png
|
Details | |
|
81.63 KB,
image/png
|
Details | |
|
712 bytes,
image/svg+xml
|
Details | |
|
10.03 KB,
patch
|
alta88
:
review+
|
Details | Diff | Splinter Review |
|
8.16 KB,
patch
|
alta88
:
review+
|
Details | Diff | Splinter Review |
|
1.25 KB,
patch
|
darktrojan
:
review+
|
Details | Diff | Splinter Review |
Many list UIs have such a column, even webmail interfaces have one as well. Most users can't find ctrl-click or shift-click or even ctrl-a and would prefer mousing to manage the threadpane list. There is an excellent extension Checkbox Column (which I had a small bit of input on) that does this perfectly. I will implement this feature based on the functionality in that extension, if UX preapproved. aleca? paenglab?
Comment 3•6 years ago
|
||
I think this makes sense, at least for touch based devices. Maybe not shown by default.
Comment 4•6 years ago
|
||
I agree with Richard.
It could be listed in a dedicated column users can show/hide if they want.
Features:
- Add optional Select Messages column to threadpane
- Multiselect/deselect messages with one click
- Double click on thread root or grouped header row toggle selects/deselects all child messages
- Toggle select all on column header click
- Three way column header icon: indicates selection of some, all, no messages
- Deselection of all messages prevents unwanted selection on message moves
Notes:
Grouped by header css has been consolidated into shared; the substantive change is margin-bottom.
Appearance has been tested on linux but hopefully is generic enough to work on win/osx as well,
Tested to ensure deselection does not affect message in tab/window operations.
The extreme tester will notice blank or nonmatching virtual saved search folder messages in a tab when switching tabs, this is an existing bug (Bug 1476880).
Comment 7•6 years ago
|
||
Comment 8•6 years ago
|
||
How it looks on Windows. Mac is similar.
Thanks for the tips. It turns out win needs its own margins (padding doesn't work) and for some reason needs important. This version looks ok on both win7 and linux, and it's been changed to work with both default and dark themes without anything special referring to a dark theme.
I've not ever seen list item selection columns without any visual, checkbox(circle) etc, for unchecked state. The same paradigm is used for all cycler columns (flags, junk, read). Maybe it should be a square (circle is less boring imo; just remove border-radius) or some other indicator. Maybe you have some other visual ideas.
The only other thing would be to have a :hover 'box' appear, but that pseudo selector doesn't work for tree cell or image or column. It would mean mouseover listeners and calculating the cell and setting a property (I do it in an extension). Rather not do it here. The nsITree is very hard to work with css wise..
Comment 10•6 years ago
|
||
Comment 11•6 years ago
|
||
I'm pretty sure you'll need to adjust some tests, at least this one: mail/test/mozmill/folder-display/test-columns.js. Let's not find out when it lands ;-)
Comment 12•6 years ago
|
||
Comment 13•6 years ago
|
||
| Assignee | ||
Comment 14•6 years ago
|
||
(In reply to Jorg K (GMT+2) from comment #11)
I'm pretty sure you'll need to adjust some tests, at least this one: mail/test/mozmill/folder-display/test-columns.js. Let's not find out when it lands ;-)
I haven't forgotten tests ;)
| Assignee | ||
Comment 15•6 years ago
|
||
(In reply to :aceman from comment #12)
Comment on attachment 9084436 [details] [diff] [review]
selectCol.patchReview of attachment 9084436 [details] [diff] [review]:
I like the idea.
I have noticed these problems:
Ok I get that this 'modernization' attempt on this ancient widget is a bridge too far..
::: mail/base/content/threadPane.js
@@ +187,5 @@
- // There is no longer any selection, clean up for correct state of things.
- if (selection.count == 0) {
- gFolderDisplay.displayedFolder.lastMessageLoaded = nsMsgKey_None;
- gFolderDisplay._mostRecentSelectionCounts[1] = 0
Missing semicolon?
Also what is in the _mostRecentSelectionCounts[0] now?
It is 0.
| Assignee | ||
Comment 16•6 years ago
|
||
(In reply to Alessandro Castellani (:aleca) from comment #13)
Comment on attachment 9084436 [details] [diff] [review]
selectCol.patchReview of attachment 9084436 [details] [diff] [review]:
This is a good start and I like that it can be controlled via dedicated
column.I'd like to suggest some changes for both UI and UX.
I don't think people realize how inflexible, specific, and supporting limited css these nsITreeView widgets are.
- UI changes
- Let's use native checkbox elements in the message rows. This will
guarantee the proper rendering of these elements and keep the visual
consistency with how TB currently looks.
Not possible, true native os speaking-wise. The closest analog is the Offline->Download/sync folder tree selection column. For linux/win, notchecked.gif is used and for osx, dot.svg is used. Just setting "checkbox" on the column doesn't mean you don't have to provide your own image. In case one might think |-moz-appearance: checkbox[-container]| works, it doesn't.
The next patch will use those images for unchecked, as currently done in Offline.
- Use a native checkbox element for the column header as well and keep it
as small as the header titles to not accidentally increase the column header
height.- We should consider adding a 3rd state to the checkbox in the column
header to cover the "Some messages selected" state. Something like:
- Empty checkbox: No message selected
- Checked checkbox: All messages selected
- Checkbox with an inset filled square: Some messages selected
It already does tristate ;)
- UX changes
- If a message is selected with a regular click on the row, the checkbox
shouldn't be checked.
Why? It can't both be selected and not selected. Selection in the tree means very specific things for any subsequent action made on those rows.
- If I select multiple messages via checkboxes, and then click on a message
row, my previously selected messages shouldn't be unselected.
As above, plus that would change 20 year old expected behavior when multiselecting then single clicking to clear all but the new selection. If such a radical change were to be made, then the selectCol would have to be not only not optional, but mandatory, and the sole way of selecting rows.
The point of the column is to easily and discoverably allow single handed multiselection and not change any existing paradigms.
Great work!
| Assignee | ||
Comment 17•6 years ago
|
||
... existing paradigms, other than the unwanted autoselection after explicit deselection bug.
| Assignee | ||
Comment 18•6 years ago
|
||
| Assignee | ||
Comment 19•6 years ago
|
||
| Assignee | ||
Comment 20•6 years ago
|
||
paenglab, the dark theme alters sizes incorrectly - on linux, the tree columns row height is 4px less, and on win it's 1 px less; this is a bug.
| Assignee | ||
Comment 21•6 years ago
|
||
| Assignee | ||
Comment 22•6 years ago
|
||
Notes: there's a typo for linux column padding, so that's fixed already. Please check osx - I used dot.svg should it be dot.png or perhaps something else? If something else, please provide an image that's suitable if it doesn't exist already.
Comment 23•6 years ago
|
||
Comment 24•6 years ago
|
||
(In reply to alta88 from comment #20)
paenglab, the dark theme alters sizes incorrectly - on linux, the tree columns row height is 4px less, and on win it's 1 px less; this is a bug.
Here on Windows 10 it's always 24px tall. On Linux it's hard to get always the correct height as different Linux themes have different heights. On my Ubuntu the height is correct.
| Assignee | ||
Comment 25•6 years ago
•
|
||
(In reply to alta88 from comment #22)
Notes: there's a typo for linux column padding, so that's fixed already.
A padding-left/right: 3px; would work too to centre the icon.
Please check osx - I used dot.svg should it be dot.png or perhaps something else? If something else, please provide an image that's suitable if it doesn't exist already.
I propose to move the check.gif and notchecked.gif to the shared folder and
let it load on all platforms. Then you can use them on Mac too.
Great. Can we (you are probably better) make a checkbox.svg?? This will make everything so much easier
Perhaps it can be 24x for numerous places it could be used, then it can be set to the appropriate width/height.
| Assignee | ||
Comment 26•6 years ago
|
||
Comment 27•6 years ago
|
||
Something like this?
Example code on the header:
.selectColumnHeader {
min-width: 28px;
cursor: pointer;
list-style-image: url("chrome://messenger/skin/icons/checkbox.svg");
}
.selectColumnHeader > .treecol-icon {
width: 16px;
height: 16px;
-moz-context-properties: fill, stroke, stroke-opacity;
fill: transparent;
stroke: currentColor;
stroke-opacity: 0;
}
.selectColumnHeader.someselected > .treecol-icon {
stroke-opacity: 0.3;
fill: currentColor;
}
.selectColumnHeader.allselected > .treecol-icon {
fill: currentColor;
}
| Assignee | ||
Comment 28•6 years ago
|
||
Incorporated the icon and rules. Any further css tweaks should go into a followup patch please.
| Assignee | ||
Comment 29•6 years ago
|
||
paenglab, check.svg is in shared but not registered in jar, should it be? it duplicates one in toolkit (global).
Comment 30•6 years ago
|
||
Comment 31•6 years ago
|
||
(In reply to alta88 from comment #29)
paenglab, check.svg is in shared but not registered in jar, should it be? it duplicates one in toolkit (global).
check.svg is not used and could be removed in our tree.
| Assignee | ||
Comment 32•6 years ago
|
||
(In reply to Richard Marti (:Paenglab) from comment #30)
Comment on attachment 9085329 [details] [diff] [review]
selectCol.patchReview of attachment 9085329 [details] [diff] [review]:
::: mail/themes/windows/mail/messageIcons.css
@@ +33,5 @@
- fill: currentColor;
+}+treechildren::-moz-tree-image(selectCol) {
- margin-inline-start: 6px;
Please remove this line. Then it looks the same as on Linux and Mac.
The checkbox in the rows is centered nicely on linux, but not on win without this. Maybe because I'm just editing the style file in devtools to simulate win. So ok.
(In reply to Richard Marti (:Paenglab) from comment #31)
(In reply to alta88 from comment #29)
paenglab, check.svg is in shared but not registered in jar, should it be? it duplicates one in toolkit (global).
check.svg is not used and could be removed in our tree.
I'll remove it in a final patch for checkin here.
Comment 33•6 years ago
|
||
This is how it looks on my Win 10 with the margin.
| Assignee | ||
Comment 34•6 years ago
•
|
||
(In reply to Richard Marti (:Paenglab) from comment #33)
Created attachment 9085496 [details]
checkbox-margin.pngThis is how it looks on my Win 10 with the margin.
Hmm, I'm testing with win7. What to do?
Edit: Yes, it could be an @media rule in mailWindow1.css, but that isn't part of the SearchDialog.xul. I had a version of the patch which added it there and fixed up the css in .xul, but then all the <menu> overrides broke the look of the search <menu>s. So all these rules are duplicated in messageIcons.css.
I guess it'll be an @media rule in win messageIcons.css for win7 and win8, right?
Comment 35•6 years ago
|
||
Checked on my Win7 VM and it looks the same with Basic and Classic. With removed margin it's looking correct.
| Assignee | ||
Comment 36•6 years ago
|
||
Ok, I'll just remove it from win.
Comment 37•6 years ago
|
||
Comment 38•6 years ago
|
||
We already have an horizontal SVG we can use for the some selected state:
url("chrome://messenger/skin/icons/hline.svg");
| Assignee | ||
Comment 39•6 years ago
|
||
| Assignee | ||
Comment 40•6 years ago
|
||
For the record, a horizontal line does not impart a meaning anywhere close to 'some selected', the way the original patch and paenglab's tweaks did. That, to me, means negation or undefined or initially unselected. And in the original extension and even here, the idea was for touchscreens to be supported, and for accessibility (dependent bug). Tiny images defeat both, unless Tb intends to support Touch Density the way Fx does. But time to move on.
| Assignee | ||
Comment 41•6 years ago
|
||
Comment 42•6 years ago
|
||
| Assignee | ||
Comment 43•6 years ago
|
||
To add: the vastly normal state is 'someselected' with 1 being the vast majority of that, so it makes most sense to use the row indicator (normal checked box or check). So none and all are far edge cases; indicator for none is easy, empty box; indicator for all should include an aspect of 'some', or be a clear indicator of all, like maybe the select all icon.
Comment 44•6 years ago
|
||
Sorry, I should have specified my recommendation better.
The hline should be used inside the checkbox border, not replacing it entirely.
As you can see from the screenshot attached, various applications handle the "some selected" in a couple of ways, like the horizontal line, or a filled inset background.
The hline indicates also the ability to unselect all, which it should be the default behaviour of the header checkbox if some are selected.
Comment 45•6 years ago
|
||
Okay, here's the checkbox with a horizontal stroke in it.
The CSS looks like this:
.selectColumnHeader > .treecol-icon,
treechildren::-moz-tree-image(selectCol) {
width: 14px;
height: 14px;
-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity;
fill: currentColor;
stroke: currentColor;
fill-opacity: 0;
stroke-opacity: 0;
}
.selectColumnHeader.someselected > .treecol-icon {
stroke-opacity: 1;
}
.selectColumnHeader.allselected > .treecol-icon,
treechildren::-moz-tree-image(selectCol, selected) {
fill-opacity: 1;
}
treechildren::-moz-tree-image(selectCol) {
width: 12px;
height: 12px;
}
Note: I increased the checkbox size a bit like I think it could work.
| Assignee | ||
Comment 46•6 years ago
|
||
updated tweaks.
Comment 47•6 years ago
|
||
Comment 48•6 years ago
|
||
Comment 49•6 years ago
|
||
Comment 50•6 years ago
|
||
Comment 51•6 years ago
|
||
(In reply to :aceman from comment #50)
Here it is. Was this explicitly decided by UX to be shown by default?
I'm against to show it by default.
Comment 52•6 years ago
|
||
Indeed, it shouldn't be visible by default.
It wasn't when I tested it and I had to enable that extra column.
| Assignee | ||
Comment 53•6 years ago
|
||
Was it decided that this column is shown in all new folders?
It is certainly not added to any existing configuration. It must be explicitly user enabled.
But it has been added to the default set for new subfolders and new profiles. Remove? Why isn't this a general feature that many will appreciate?
Comment 54•6 years ago
|
||
I personally prefer to have it as an opt-in option for the following reasons:
- The checkbox takes up a bit of space on an already tight message row, better not showing it by default.
- Our user base is already acquainted with the CTRL+click paradigm for multiple selections.
- It's always better to slowly ease in UX changes.
This is a great opportunity to do a quick survey after this feature has been out for a while, and consider hanging it from opt-in to opt-out.
Comment 55•6 years ago
|
||
Regarding opt-in vs opt-out, one thing we did for TB3 (or maybe 3.1? It's been a while...) was to have a little walkthrough of new features and let users pick whether they want the new behavior or to stick with the old. Since we're only updating with new features about once a year, we could probably provide a walkthrough like this without being too annoying. It'd be extra work to design the walkthrough, but it could also strike a nice balance between ensuring people are aware of the new feature and not being disruptive to users who are happy with how things are already.
| Assignee | ||
Comment 56•6 years ago
|
||
updated for no default.
| Assignee | ||
Comment 57•6 years ago
|
||
updated.
Comment 59•6 years ago
|
||
Sure, but then I won't land it now, well, unless the try is quick:
https://treeherder.mozilla.org/#/jobs?repo=try-comm-central&revision=4bd223ab821c8f3987599768c9abb93b4c23c5d5
Comment 60•6 years ago
|
||
Pushed by mozilla@jorgk.com:
https://hg.mozilla.org/comm-central/rev/51edb6fe5567
Allow selecting messages via select column instead of classic selection. r=aceman, ui-r=Paenglab
https://hg.mozilla.org/comm-central/rev/ac38dd59cf09
additional selectCol CSS tweaks. r=Paenglab,aleca
https://hg.mozilla.org/comm-central/rev/8bcc3b8b7c6f
Tests for addition of selectCol. r=aceman
Updated•6 years ago
|
Comment 62•6 years ago
|
||
Fix the broken Mochitest, see bug 1574673.
Comment 63•6 years ago
|
||
https://hg.mozilla.org/comm-central/rev/a67968a219c595706b9f01ccb71ce601c5001615
Follow-up: Adjust Mochitest browser_ext_menus.js::test_thread_pane. rs=bustage-fix CLOSED TREE DONTBUILD
If landed it to fix the test. I don't know why it was ever a good idea to click right in the corner at (0, 0).
Comment 64•6 years ago
|
||
Comment 65•6 years ago
|
||
Yes, but please stop all those Mochitests from failing most of the time ;-) - There are so many and inconsistent failures.
Description
•