Improve usability of groupby-picker.

Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/6SabSQRCAYE.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.

Committed: https://chromium.googlesource.com/external/github.com/catapult-project/catapult/+/032f5e79f019a61bc8f4ffe61be7414f2df3f925

[benjhayden, 2016-10-28 16:03:30]

Patchset #1 (id:1) has been deleted

[benjhayden, 2016-10-28 16:07:16]

Description was changed from

==========
.
==========

to

==========
Improve usability of groupby-picker.


There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 16:07:27]

Description was changed from

==========
Improve usability of groupby-picker.


There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 17:15:55]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 17:48:13]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop, to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 17:48:39]

Patchset #1 (id:20001) has been deleted

[benjhayden, 2016-10-28 17:48:54]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 17:49:02]

Patchset #1 (id:40001) has been deleted

[benjhayden, 2016-10-28 17:51:22]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 1 to 2.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

[benjhayden, 2016-10-28 17:51:51]

Patchset #1 (id:60001) has been deleted

[benjhayden, 2016-10-28 18:36:09]

benjhayden@chromium.org changed reviewers:
+ charliea@chromium.org, eakuefner@chromium.org

[benjhayden, 2016-10-28 18:36:09]

PTAL :-)

[eakuefner, 2016-10-31 17:56:40]

lgtm

let's probably wait for charlie to make sure he thinks the ux is what we want,
but it sure looks nice to me.

[charliea (OOO until 10-5), 2016-10-31 20:50:33]

Controversial opinion that I'm hesitant to voice: I'm not convinced that the
proposed UI is better than the current one.

In the current UI, you have the problem where it takes two clicks to enable a
disabled column. Although it may not be optimal for power use, I personally
don't think this is a huge problem: I think people are used to drop downs enough
where they can navigate quickly. You also have IMO the greater problem of
discoverability: without hovering, it's not really obvious that you can interact
with the column titles at all (e.g. delete them, rearrange them).

In the new UI, you have the problem where changing the first group by into the
last group by requires you to "chase" the column by clicking the right arrow a
bunch of times and having that column hop out from under you and move to the
right every time that you click it. I also think that it's kind of strange that
columns that aren't active grouping columns appear interspersed with columns
that are active grouping columns: it makes it somewhat harder to tell what the
current grouping columns are.

IMO the current UI of https://screenshot.googleplex.com/wZKUPMsdszK.png is
clearer than https://screenshot.googleplex.com/QnPrTzwsbfX.png. I think that if
we add a greater than sign between each of the grouping columns, it becomes even
clearer (https://screenshot.googleplex.com/NzSeVQfy9PK.png). 

Then, we can do some work to make it look more like a "chip" (see
https://ardf69.github.io/md-chip/components/md-chip/, and click "demo" in the
upper right corner). If we change the background color, make the X always
appear, add some rounded corners, etc., we end up with something like
https://screenshot.googleplex.com/vBOiKZ1y8sV, which IMO is quite a bit better.
A good last step IMO is to add "grab handles" to each of the chips, which are
the icon usually associated with being able to grab a UI element - something
like
https://github.com/FortAwesome/Font-Awesome/issues/816#issuecomment-21468405. My
Chrome inspector-foo isn't good enough to give a mock of this, but you get the
idea.

I think that the current UI with some of those changes is more intuitive and
user-friendly than the proposed UI.

[benjhayden, 2016-11-01 19:02:00]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/bLNwg43pDHb.png
https://screenshot.googleplex.com/b5QCcxzzD9h.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/G5FfYuDZYg2.png
https://screenshot.googleplex.com/X5eBdLCNrdG.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in
histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.
==========

[benjhayden, 2016-11-01 19:03:58]

I made it hide buttons that have no effect instead of disabling them in order to
limit the visual noise, and updated the description to mention keeping an eye
out for new designs.
PTAL?

[charliea (OOO until 10-5), 2016-11-01 20:18:27]

lgtm w/ comments

If it's alright with you, I may poke at this later to see how much code we can
get rid of with a full conversion to Polymer w/ data binding: I suspect that
it'd be pretty drastic, but I don't want to hold up your work on a ton of
Polymer-related changes.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
File tracing/tracing/ui/base/grouping_table_groupby_picker.html (right):

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:39: #left, #right {
My vote is for the buttons to have a fixed size regardless of the content above
them and just float:left and float:right. Having different sized buttons
depending on a different label for the text above just looks a little funny to
me. I don't care too much, though.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:51: <button id="left"
on-click="moveUp_">&lt;</button>
Maybe use &larr; and &rarr; instead?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:107: moveUp_:
function() {
Maybe moveLeft_ and moveRight_?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:145: var groups = [];
I think this can be either:

return this.$.container.children.map((child) => child.group);

or 

return [...this.$.container].children.map((child) => child.group);

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:179: var groups = [];
I think this can be:

this.possibleGroups.filter(group => group.enabled);

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:188: set
currentGroupKeys(newKeys) {
Looks like this requires the two keys to be in the same order?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:191: return;
I think it might be good to throw an error here: the caller likely didn't intend
to do this

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:222: moveUp_:
function(groupEl) {
same comment about moveLeft_/moveRight_

[benjhayden, 2016-11-01 22:44:54]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/G5FfYuDZYg2.png
https://screenshot.googleplex.com/X5eBdLCNrdG.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in
histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/6SabSQRCAYE.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in
histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.
==========

[benjhayden, 2016-11-01 22:53:04]

Thanks! PTAL?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
File tracing/tracing/ui/base/grouping_table_groupby_picker.html (right):

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:39: #left, #right {
On 2016/11/01 at 20:18:27, charliea wrote:
> My vote is for the buttons to have a fixed size regardless of the content
above them and just float:left and float:right. Having different sized buttons
depending on a different label for the text above just looks a little funny to
me. I don't care too much, though.

PTAL at the new screenshot :-)

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:51: <button id="left"
on-click="moveUp_">&lt;</button>
On 2016/11/01 at 20:18:27, charliea wrote:
> Maybe use &larr; and &rarr; instead?

I think I'll use the black left/right pointing triangles since that's what
tr-ui-b-table uses, if that's ok.
http://unicode-table.com/en/sets/arrows-symbols/
"Thunderstorm" is officially the best-named arrow.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:107: moveUp_:
function() {
On 2016/11/01 at 20:18:27, charliea wrote:
> Maybe moveLeft_ and moveRight_?

Done.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:145: var groups = [];
On 2016/11/01 at 20:18:27, charliea wrote:
> I think this can be either:
> 
> return this.$.container.children.map((child) => child.group);
> 
> or 
> 
> return [...this.$.container].children.map((child) => child.group);

Done.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:179: var groups = [];
On 2016/11/01 at 20:18:27, charliea wrote:
> I think this can be:
> 
> this.possibleGroups.filter(group => group.enabled);

Hm, it's the group elements, not the group objects, that know if they're
enabled.
And I don't want to modify the group objects to set enabled on them because they
could be shared between multiple groupby-pickers.

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:188: set
currentGroupKeys(newKeys) {
On 2016/11/01 at 20:18:27, charliea wrote:
> Looks like this requires the two keys to be in the same order?

Sorry?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:191: return;
On 2016/11/01 at 20:18:27, charliea wrote:
> I think it might be good to throw an error here: the caller likely didn't
intend to do this

Sorry, why not?

https://codereview.chromium.org/2458873002/diff/100001/tracing/tracing/ui/bas...
tracing/tracing/ui/base/grouping_table_groupby_picker.html:222: moveUp_:
function(groupEl) {
On 2016/11/01 at 20:18:27, charliea wrote:
> same comment about moveLeft_/moveRight_

Done.

[benjhayden, 2016-11-02 20:16:52]

The CQ bit was checked by benjhayden@chromium.org

[benjhayden, 2016-11-02 20:16:53]

The patchset sent to the CQ was uploaded after l-g-t-m from
eakuefner@chromium.org, charliea@chromium.org
Link to the patchset: https://codereview.chromium.org/2458873002/#ps140001
(title: ".")

[commit-bot: I haz the power, 2016-11-02 20:17:03]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-11-02 20:39:25]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2016-11-02 20:39:27]

Try jobs failed on following builders:
  Catapult Android Tryserver on master.tryserver.client.catapult (JOB_FAILED,
https://build.chromium.org/p/tryserver.client.catapult/builders/Catapult%20An...)

[benjhayden, 2016-11-02 22:08:24]

The CQ bit was checked by benjhayden@chromium.org

[commit-bot: I haz the power, 2016-11-02 22:08:27]

CQ is trying da patch. Follow status at
 
https://chromium-cq-status.appspot.com/v2/patch-status/codereview.chromium.or...

[commit-bot: I haz the power, 2016-11-02 23:01:11]

Description was changed from

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/6SabSQRCAYE.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in
histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.
==========

to

==========
Improve usability of groupby-picker.

There are 2 kinds of discoverability issues with the current groupby-picker:
You need to click Add another in order to see disabled possible groupings, and
You need to hover over a grouping and pay close attention to see its close
button
and figure out that the hand cursor suggests draggability.

This CL changes the groupby-picker away from drag-drop to use more discoverable
checkboxes and buttons.

https://screenshot.googleplex.com/6SabSQRCAYE.png

All available grouping keys are always visible.
No hover effects.
No mysterious cursor changes.
This reduces the number of clicks required to enable a disabled grouping key
from 2 to 1.
This simplifies the gestures required to reorder grouping keys from a
complicated mousedown-drag-mouseup gesture to 1 click, or click-move-click, or
click-move-click-move-click, etc.

Buttons that have no effect (like the left/right buttons for disabled groupings)
are hidden in order to limit visual noise, but there are still lots of buttons
when there are lots of enabled categories, which can happen in
histogram-set-table.
We'll keep a look out for emerging web designs that are more minimalist while
maintaining the discoverability of buttons and checkboxes.

Committed:
https://chromium.googlesource.com/external/github.com/catapult-project/catapu...
==========

[commit-bot: I haz the power, 2016-11-02 23:01:12]

Committed patchset #4 (id:140001) as
https://chromium.googlesource.com/external/github.com/catapult-project/catapu...