New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 655359 link

Starred by 5 users

Issue metadata

Status: Assigned
Owner:
Last visit > 30 days ago
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 3
Type: Bug

Blocked on:
issue 730074
issue 753450

Blocking:
issue 734683



Sign in to add a comment

Redesign Clank context menu for better usability

Project Member Reported by k...@chromium.org, Oct 12 2016

Issue description

Today the Clank context menu is a dry list of items that can be difficult to parse immediately. Therefore, we would like to redesign the context menu to be easier to use.

Request from UI review is to include a version behind a flag that has no icons.

Proposal: https://docs.google.com/presentation/d/1kV2ghqoKxUtKZc4GQem8ARq3DZ-iqac2uYnb0iQzjFM/edit

UI Review Thread: https://groups.google.com/a/google.com/d/msg/chrome-ui-review/7rZvk7sRs4E/Lrn-HerxCQAJ
 

Comment 1 by k...@chromium.org, Oct 12 2016

Additional request from UI review is to keep UI review in the loop as we proceed with implementation so they can get a sense of image previews + visual weight of icons.

Comment 2 by rolfe@chromium.org, Oct 14 2016

Cc: rolfe@chromium.org
Adding myself as design contact while bbergeher@ is out. Also posting spec link so I can find it later:
https://bbergher.googleplex.com/specs/context-menu/
Owner: jwanda@chromium.org
Status: Assigned (was: Available)
Project Member

Comment 4 by bugdroid1@chromium.org, Mar 1 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/4de4918b64f6fc0bdd4022d452bd693a785d6074

commit 4de4918b64f6fc0bdd4022d452bd693a785d6074
Author: jwanda <jwanda@chromium.org>
Date: Wed Mar 01 22:46:14 2017

Refactor ChromeContextMenuPopulator population

In preparation for the redesign of Chrome's Context Menu this cl
refactors the population into a seperate method. As a result of this
refactor, several tests are now added to confirm that the context menu
shows what is expected in a context (which surprisingly wasn't there
beforehand).

BUG=655359

Review-Url: https://codereview.chromium.org/2710833002
Cr-Commit-Position: refs/heads/master@{#454077}

[modify] https://crrev.com/4de4918b64f6fc0bdd4022d452bd693a785d6074/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ChromeContextMenuPopulator.java
[modify] https://crrev.com/4de4918b64f6fc0bdd4022d452bd693a785d6074/chrome/android/javatests/src/org/chromium/chrome/browser/contextmenu/ContextMenuTest.java

Comment 5 by k...@chromium.org, Mar 28 2017

Labels: -Restrict-View-Google
Unrestricting

Comment 6 by rolfe@chromium.org, Mar 30 2017

Cc: -rolfe@chromium.org
Removing myself - bbergher is your go-to for the redesign
Project Member

Comment 7 by bugdroid1@chromium.org, Mar 30 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/9da055f6be5c0e37d9bab627182d957d64e605de

commit 9da055f6be5c0e37d9bab627182d957d64e605de
Author: jwanda <jwanda@chromium.org>
Date: Thu Mar 30 15:54:06 2017

Add multi line to Tabular Context Menu

This will let the user see the rest of the header text when clicking on
the textview. This also adds a test case so that way we know it works
well.

BUG=655359

Review-Url: https://codereview.chromium.org/2775393002
Cr-Commit-Position: refs/heads/master@{#460778}

[modify] https://crrev.com/9da055f6be5c0e37d9bab627182d957d64e605de/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
[modify] https://crrev.com/9da055f6be5c0e37d9bab627182d957d64e605de/chrome/android/javatests/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUiTest.java

Project Member

Comment 8 by bugdroid1@chromium.org, Mar 31 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/88172028d81d3cedbf5f315bbbd0f280dd252ce4

commit 88172028d81d3cedbf5f315bbbd0f280dd252ce4
Author: jwanda <jwanda@chromium.org>
Date: Fri Mar 31 22:28:34 2017

Show the image header for the Context Menu

This CL should show an image above the context menu. It also adds a
background as we wait for the image to load. Screenshots are below:

https://drive.google.com/open?id=0B6D5A57VLDpeajkxZTBwVWZMcm8
https://drive.google.com/open?id=0B6D5A57VLDpeZWtIWlR1UlRyQ3c
https://drive.google.com/open?id=0B6D5A57VLDpeY0dpU3lTT3NDb1k

BUG=655359

Review-Url: https://codereview.chromium.org/2777773002
Cr-Commit-Position: refs/heads/master@{#461254}

[add] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/drawable/checkerboard_background.xml
[add] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/drawable/tabular_context_menu_image_border.xml
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/layout/tabular_context_menu_page.xml
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/values-sw600dp/dimens.xml
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/values/colors.xml
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/res/values/dimens.xml
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ContextMenuHelper.java
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuListAdapter.java
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/android/javatests/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUiTest.java
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/browser/ui/android/context_menu_helper.cc
[modify] https://crrev.com/88172028d81d3cedbf5f315bbbd0f280dd252ce4/chrome/browser/ui/android/context_menu_helper.h

Project Member

Comment 9 by bugdroid1@chromium.org, Mar 31 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b91d264cd53075aabecd1bce709b9c7146c978e9

commit b91d264cd53075aabecd1bce709b9c7146c978e9
Author: jwanda <jwanda@chromium.org>
Date: Fri Mar 31 23:22:27 2017

Add a Share Icon to Tabular Context Menu

For one of the last changes on the context menu, I'll be adding a direct
share Icon so if a person clicks on it, it will share with any app. It's
pretty slick. Feel free to check out the video of the work in action.

This is activated when someone shares an item within the page.

--Screenshot--
https://drive.google.com/open?id=0B6D5A57VLDpeWEl1SXZrRGk1eXc

--Video--
https://drive.google.com/open?id=0B6D5A57VLDpecDRDNWZsb2toMjQ

BUG=655359

Review-Url: https://codereview.chromium.org/2775373002
Cr-Commit-Position: refs/heads/master@{#461269}

[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/res/layout/tabular_context_menu_row.xml
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ContextMenuHelper.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ContextMenuUi.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/PlatformContextMenuUi.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuListAdapter.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/java/src/org/chromium/chrome/browser/share/ShareHelper.java
[modify] https://crrev.com/b91d264cd53075aabecd1bce709b9c7146c978e9/chrome/android/javatests/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUiTest.java

Cc: jwanda@chromium.org
Owner: danielpark@chromium.org
Project Member

Comment 12 by bugdroid1@chromium.org, Apr 26 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/dda362aee9ed4b1e7d52c1781b2ab31de3e21109

commit dda362aee9ed4b1e7d52c1781b2ab31de3e21109
Author: injae <injae@google.com>
Date: Wed Apr 26 21:28:41 2017

refactored TabularContextMenuUi.java

moved createPagerView higher up, slight refactoring on logic around displayImageHeader

BUG=655359

Review-Url: https://codereview.chromium.org/2843833002
Cr-Commit-Position: refs/heads/master@{#467464}

[modify] https://crrev.com/dda362aee9ed4b1e7d52c1781b2ab31de3e21109/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java

these are screenshots for posterity on how the tab menus' colors and shapes should look (ignore the missing resize)
Screenshot_20170502-093901.png
127 KB View Download
Screenshot_20170502-093907.png
157 KB View Download
Screenshot_20170502-093910.png
320 KB View Download
Project Member

Comment 15 by bugdroid1@chromium.org, May 2 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8b24c49c7e35918e4aa21ba770e0e0bc54c8dd0c

commit 8b24c49c7e35918e4aa21ba770e0e0bc54c8dd0c
Author: injae <injae@google.com>
Date: Tue May 02 18:53:43 2017

dynamic context menu resizing

added logic to dynamically adjust menu size after tab switches

BUG=655359

Review-Url: https://codereview.chromium.org/2848453002
Cr-Commit-Position: refs/heads/master@{#468724}

[modify] https://crrev.com/8b24c49c7e35918e4aa21ba770e0e0bc54c8dd0c/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuViewPager.java

Project Member

Comment 16 by bugdroid1@chromium.org, May 9 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/830937ec4ec791325c178c119566b6ec88632449

commit 830937ec4ec791325c178c119566b6ec88632449
Author: injae <injae@google.com>
Date: Tue May 09 22:09:57 2017

changed ordering of context menu to display image/video tab before link tab

moved isAnchor if statement to after isImage & isVideo

BUG=655359

Review-Url: https://codereview.chromium.org/2841543003
Cr-Commit-Position: refs/heads/master@{#470427}

[modify] https://crrev.com/830937ec4ec791325c178c119566b6ec88632449/chrome/android/java/res/layout/tabular_context_menu.xml
[modify] https://crrev.com/830937ec4ec791325c178c119566b6ec88632449/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ChromeContextMenuPopulator.java

Cc: -jwanda@chromium.org -tedc...@chromium.org -bbergher@chromium.org -k...@chromium.org
videos showing the context menu inc animations on tablets & phones
demo on phone.mp4
6.7 MB View Download
demo on tablet.mp4
8.0 MB View Download

Comment 18 by k...@chromium.org, May 22 2017

Cc: tedc...@chromium.org bbergher@chromium.org k...@chromium.org
Nice! (did you remove the cc's for a reason btw?)

Looks great.  Only nit is the Link -> Image height jump. Do you know if we're planning on addressing that?
Yeah, it would be great to implement the smooth transition we discussed. There are also some small visual tweaks to be made – are you ready for that kind of pixel-level review?

Comment 20 by k...@chromium.org, Jun 6 2017

Blockedon: 730074
Project Member

Comment 21 by bugdroid1@chromium.org, Jun 13 2017

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/facb458c362b51cbe79dc41b6a2680c8b76ea4c5

commit facb458c362b51cbe79dc41b6a2680c8b76ea4c5
Author: injae <injae@google.com>
Date: Tue Jun 13 19:37:26 2017

added scale animation for context menu

BUG=655359,  730330 

Review-Url: https://codereview.chromium.org/2868403003
Cr-Commit-Position: refs/heads/master@{#479100}

[add] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/res/drawable/grey_with_top_rounded_corners.xml
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/res/layout/tabular_context_menu.xml
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/res/values/dimens.xml
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/browseractions/BrowserActionActivity.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ContextMenuHelper.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/ContextMenuParams.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUi.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuViewPager.java
[add] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java/src/org/chromium/chrome/browser/widget/ContextMenuDialog.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/java_sources.gni
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/javatests/src/org/chromium/chrome/browser/contextmenu/TabularContextMenuUiTest.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/android/junit/src/org/chromium/chrome/browser/contextmenu/ChromeContextMenuPopulatorTest.java
[modify] https://crrev.com/facb458c362b51cbe79dc41b6a2680c8b76ea4c5/chrome/browser/ui/android/context_menu_helper.cc

Comment 22 by k...@chromium.org, Jun 19 2017

Blocking: 734683
Blockedon: 753450
Cc: -bbergher@chromium.org
Cc: twelling...@chromium.org
Fyi, I just landed a patch to make the bottom system navigation bar white on OMR1+. With this treatment, the tabular context menu looks odd since the scrim doesn't cover the system controls (see attached screenshot)

I think there are two options:
 - Increase the scrim height and possibly needs to invert the navigation button colors to match other dialogs
 - Make the bottom system nav for this context menu black (for now) by using a different style than DialogWhenLarge

More details here: https://bugs.chromium.org/p/chromium/issues/detail?id=778736#c31
Screenshot_20171204-093907.png
500 KB View Download

Comment 26 by k...@chromium.org, Feb 15 2018

Cc: -k...@chromium.org
Cc: hannahs@chromium.org
Quick update, am currently in a thread with Reviewers for my latest proposal (which applies snowflake styles to Bruno's latest designs): https://folio.googleplex.com/contextmenu/Interactive%20redlines#%3Fz=width&f=hidden

Will follow up as soon as I have approval!
Hello everybody,

Could somebody from you look into bugs/fr submitted my "mwiacek" too?

I was submitting various things, but they were less or more suspended or dropped, examples:

1. unifying context menu from NTP and webpages (I have even partially working code, which is displaying webpage context menus for NTP elements)

2. displaying link title with/instead of URL in the header

3. resizing context menu after expanding url this way, that menu options are still visible

4. displaying "switch to tab" (instead of "open in new tab" or as extra menu option)

etc.

I don't have ability to comment internally on things.
Cc: danielpark@chromium.org pnangunoori@chromium.org
 Issue 798226  has been merged into this issue.
Cc: -danielpark@chromium.org
Owner: lzbylut@chromium.org
Assigning back to product until this feature is placed on the clank app team roadmap.

Sign in to add a comment