Add new style to page switcher

Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067
Review-Url: https://codereview.chromium.org/2942523002
Cr-Commit-Position: refs/heads/master@{#479487}
Committed: https://chromium.googlesource.com/chromium/src/+/997174a8a84df91727a37259fb5ee7ea6ee7e1a2

[weidongg, 2017-06-14 03:38:18]

The CQ bit was checked by weidongg@chromium.org to run a CQ dry run

[commit-bot: I haz the power, 2017-06-14 03:38:29]

Dry run: 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, 2017-06-14 04:11:57]

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

[commit-bot: I haz the power, 2017-06-14 04:11:58]

Dry run: This issue passed the CQ dry run.

[weidongg, 2017-06-14 17:19:48]

Description was changed from

==========
Add new style to page switcher

1. Add ink drop ripple and highlight to the the button when it is
clicked.
2. Modify button when it is selected or not selected.

BUG=732067
==========

to

==========
Add new style to page switcher

1. Add ink drop ripple and highlight to the the button when it is
clicked.
2. Modify button when it is selected or not selected.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067
==========

[weidongg, 2017-06-14 17:24:32]

Description was changed from

==========
Add new style to page switcher

1. Add ink drop ripple and highlight to the the button when it is
clicked.
2. Modify button when it is selected or not selected.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067
==========

to

==========
Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when
clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067
==========

[weidongg, 2017-06-14 17:25:48]

weidongg@chromium.org changed reviewers:
+ xiyuan@chromium.org

[weidongg, 2017-06-14 17:25:49]

xiyuan@, please review the changes.

[xiyuan, 2017-06-14 18:21:50]

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
File ui/app_list/views/page_switcher_vertical.cc (right):

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:78: return event.IsMouseEvent() &&
We stripped out gesture events here. Would this affect how the button handle
touches? That is, would tap on a button still trigger a page switch?

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:111: new
views::CircleLayerDelegate(kInkDropHighlightColor,
nit: base::MakeUnique() ?

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:160: bool selected_;
nit: initalize member in-place

i.e.

  bool selected_= false;

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:229: buttons_->SetLayoutManager(new
views::BoxLayout(
Move this to where |buttons_| is created. Resetting layout manager in Layout is
bad in general.

[weidongg, 2017-06-14 18:40:13]

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
File ui/app_list/views/page_switcher_vertical.cc (right):

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:78: return event.IsMouseEvent() &&
On 2017/06/14 18:21:49, xiyuan wrote:
> We stripped out gesture events here. Would this affect how the button handle
> touches? That is, would tap on a button still trigger a page switch?

Yes, the page switch button is un-usable for tap according to the spec here:
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZY5BZ8F2qhKy/files/MCGAAf...

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:111: new
views::CircleLayerDelegate(kInkDropHighlightColor,
On 2017/06/14 18:21:50, xiyuan wrote:
> nit: base::MakeUnique() ?

Done.

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:160: bool selected_;
On 2017/06/14 18:21:50, xiyuan wrote:
> nit: initalize member in-place
> 
> i.e.
> 
>   bool selected_= false;

Done.

https://codereview.chromium.org/2942523002/diff/40001/ui/app_list/views/page_...
ui/app_list/views/page_switcher_vertical.cc:229: buttons_->SetLayoutManager(new
views::BoxLayout(
On 2017/06/14 18:21:49, xiyuan wrote:
> Move this to where |buttons_| is created. Resetting layout manager in Layout
is
> bad in general.

Good to know, thanks. Done.

[xiyuan, 2017-06-14 19:32:26]

lgtm

[weidongg, 2017-06-14 19:39:50]

The CQ bit was checked by weidongg@chromium.org

[commit-bot: I haz the power, 2017-06-14 19:40:20]

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, 2017-06-14 20:20:08]

CQ is committing da patch.

Bot data: {"patchset_id": 60001, "attempt_start_ts": 1497469190010520,
"parent_rev": "0394a689e2f1a1dad9b7512b8d87f0fdc3ea87d1", "commit_rev":
"997174a8a84df91727a37259fb5ee7ea6ee7e1a2"}

[commit-bot: I haz the power, 2017-06-14 20:20:20]

Description was changed from

==========
Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when
clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067
==========

to

==========
Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when
clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067

Review-Url: https://codereview.chromium.org/2942523002
Cr-Commit-Position: refs/heads/master@{#479487}
Committed:
https://chromium.googlesource.com/chromium/src/+/997174a8a84df91727a37259fb5e...
==========

[commit-bot: I haz the power, 2017-06-14 20:20:21]

Committed patchset #4 (id:60001) as
https://chromium.googlesource.com/chromium/src/+/997174a8a84df91727a37259fb5e...

[weidongg, 2017-06-15 16:31:45]

Description was changed from

==========
Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when
clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067

Review-Url: https://codereview.chromium.org/2942523002
Cr-Commit-Position: refs/heads/master@{#479487}
Committed:
https://chromium.googlesource.com/chromium/src/+/997174a8a84df91727a37259fb5e...
==========

to

==========
Add new style to page switcher

1. Change button from slim rectangle to circle.
2. Apply different effect when the corresponding page of the button
   is selected.
3. Add ink drop ripple and highlight to the button, which are shown when
clicked.

- screenshot:
https://screenshot.googleplex.com/jd3w9v2q5xm

BUG=732067

Review-Url: https://codereview.chromium.org/2942523002
Cr-Commit-Position: refs/heads/master@{#479487}
Committed:
https://chromium.googlesource.com/chromium/src/+/997174a8a84df91727a37259fb5e...
==========

[weidongg, 2017-06-15 16:33:06]

weidongg@chromium.org changed reviewers:
+ newcomer@chromium.org