Update Overflow Menu Icon Asset in the toolbar & increase the touch target from 42 to 48dp |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Issue descriptionProposal deck here: https://docs.google.com/presentation/d/1g6hrdbzEV8_7wKPZoksiD-Pwts-P6nD6MU4haXV7Jkc/edit#slide=id.g22e0dc7a2d_0_346 The Material team has updated the overflow menu icon asset to have a bounding box that is 24x24dp instead of the old one we're currently using that's 14x24dp. Having a 14x24dp icon instead of the standard 24x24dp causes for a lot of special casing to fit standard Material templates. As a part of the snowflake effort to reduce one-off's we should update this to be consistent with the rest of our icon templates. Also, due to the old 14dp icon width, our current touch target for the overflow menu button in the toolbar is 42dp (while the touch target for the tab switcher is 48dp). Updating this would allow us to increase the touch target to the recommended 48dp. Redlines attached Icon asset here: https://icons.googleplex.com/#icon=ic_more_vert&search=more Spec and mocks in the proposal deck: https://docs.google.com/presentation/d/1g6hrdbzEV8_7wKPZoksiD-Pwts-P6nD6MU4haXV7Jkc/edit#slide=id.g22e0dc7a2d_0_346
,
Aug 9 2017
,
Oct 19 2017
Hannah, what do you think of these screenshots from my in-flight patch? Do the buttons need to come away from the omnibox background at all? I also swapped the asset in the infobar_translate_compact_content.xml, custom_tabs_toolbar.xml and on tablets. Tablets are still using a bit of a weird style (width: 43dp, paddingEnd: 3.5dp). Should we do something here?
,
Oct 19 2017
I'm looking at these blown up, and I think what I actually did is: 12dp [ ] 24dp : 12dp Since each icon is just centered in a 48dp box. Re-doing the XML to match spec's is going to be a bit more work than the 1/2 hour I spent on it this evening. I think I'll just swap the asset, to reduce the duplicate PNGs. This should have no visible impact, but I'll take a couple of screenshots.
,
Oct 19 2017
Screenshot attached of the (prototyped) 16dp [ ] 16dp : 16dp format. When the expand button is present, we could do either: 18dp ^ 18dp [ ] 18dp : 18dp or 16dp ^ 20dp [ ] 20dp : 16dp. I wonder if by doing this we're violating the spirit of the minimum touch target size. On the menu button, for example, if I try to tap the icon and end up too far right I'll still trigger the menu button, but if I tap too far left I might accidentally hit the tab switcher button since I have less touch slop on the left side.
,
Oct 19 2017
Screenshots of the simple asset swap in-flight CL here: https://chromium-review.googlesource.com/c/chromium/src/+/728341 Savings (in raw asset size, excluding xxxhdpi which we don't ship): 493B We always display btn_menu in 42-48dp box with the icon centered, so switching to a 24dp x 24dp icon had no visual effect.
,
Oct 19 2017
Note that on the in-flight CL a render test failed because the pixels at the edge of the dots are slightly different. I don't think this is at all human detectable, so I'm going to update the Golden image. Render test results: https://00e9e64bac9aaa60304f0d90e9fe0ca19555a0c7fa943b3db2-apidata.googleusercontent.com/download/storage/v1/b/chromium-result-details/o/ddbe77ca51c132aa71e96c6b701c9548887374cf?qk=AD5uMEtKqv1OUVXT1RPi5haScB4OTW3TNpNyaRjy8vJYZc5myHHY_8LBpqXhV0g6sS_zqpeGIb6gMkeDmDcVTFz4-Jc7mbliLZpQzfdgATZK0uT3rXURK7QW3habTKg2VNBlNW9TEkehVfPfiiZ29tu1tr4gBZ5l9r5czP7iNGjK7FtEVnLxbgenNddsnQyy-7xMD86FUsEgwKOra522ephMfMH0yP5MfppKyo-2mvxUrPyrfVIhdsvQAP5lkpalnngpzwiRyElK4BavaguSuUSKQzU1ICC5YqxmPzoIZ2xUQOsUi9IHEfPkxz1VLJRjifUq33N78omRv-P-xjfhuIv2hyzAm6jlwBRLa9PJgxLWR2g_voTQIjFLSZde5Cafqc-7b-WR2Wvs8q_8-lgaxaq3o4ja4yaEPssz9d8e33WibWmhuPxIATRmenfsbscKW2QRMdA5JdASQOu5-NsQKmzXLRmssjXLtfJKQ7tvtTD-4IqFR1DF48BhclA5W936R3IbLiA5O5jjY2nvMyhbT35d9gVjluFHfISUkUIm62KUgSWKAQj5kQJtmP1B_6RQkA4xPk_tX3CzOXhWIyVcar9XFyfG379wOEUQucSdK8MbK2kYBj6wi9eJoabHH2xvtphhLAy56TSjlgVtprj0XbBEjsx8gbtxoO5PAk6ZShV7BnSvvJJG_rj8T9y5fQdjDkRDthy8o0rFhdtQbwnF5TdQ04CY7uhkXkcCX14b8SR2zmromKfvpDBHRboDEQIHtwoKl4eXO32W5FNTXIqwYDdeBmWXXQDrAQ
,
Oct 19 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf commit 05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf Author: Theresa Wellington <twellington@google.com> Date: Thu Oct 19 20:44:12 2017 Remove btn_menu in favor of ic_more_vert_black_24dp BUG= 746712 Change-Id: I8fc4116433defb3ec7fe973d071c65f2885aeaee Reviewed-on: https://chromium-review.googlesource.com/728341 Commit-Queue: Theresa <twellington@chromium.org> Reviewed-by: Ted Choc <tedchoc@chromium.org> Cr-Commit-Position: refs/heads/master@{#510198} [delete] https://crrev.com/c09ae9d1985365d1aa7455eb25e7a70c1bcfe368/chrome/android/java/res/drawable-hdpi/btn_menu.png [delete] https://crrev.com/c09ae9d1985365d1aa7455eb25e7a70c1bcfe368/chrome/android/java/res/drawable-mdpi/btn_menu.png [delete] https://crrev.com/c09ae9d1985365d1aa7455eb25e7a70c1bcfe368/chrome/android/java/res/drawable-xhdpi/btn_menu.png [delete] https://crrev.com/c09ae9d1985365d1aa7455eb25e7a70c1bcfe368/chrome/android/java/res/drawable-xxhdpi/btn_menu.png [delete] https://crrev.com/c09ae9d1985365d1aa7455eb25e7a70c1bcfe368/chrome/android/java/res/drawable-xxxhdpi/btn_menu.png [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/res/layout/custom_tabs_toolbar.xml [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/res/layout/empty_background_view_tablet.xml [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/res/layout/infobar_translate_compact_content.xml [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/res/layout/toolbar_phone_common.xml [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/res/layout/toolbar_tablet.xml [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/android/java/src/org/chromium/chrome/browser/toolbar/ToolbarPhone.java [modify] https://crrev.com/05c2e003beeb23e09e6a6d3dcd7a51e4815eeaaf/chrome/test/data/android/render_tests/NewTabPageTest.new_tab_page.Nexus_5-19.png
,
Jan 19 2018
I took another look at the slide deck/code, and I'm wondering what the sizing/padding should be for the home icon on the left side of the toolbar?
,
Feb 6 2018
Moving back to available to make the padding update.
,
Apr 19 2018
,
Apr 23 2018
Hannah, please see the attached screenshots from a Nexus 5x. This is easier than it was when we first investigated for Chrome Home because now there are always only two buttons (tab switcher and menu). Tablets are little bit different/harder because we don't always have a tab switcher button. Should tablets be updated as well? If so, will you please create a spec for positioning when there is no tab switcher button?
,
Apr 24 2018
More screenshots from RTL w/ a home page button
,
Apr 30 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1 commit 2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1 Author: Theresa <twellington@chromium.org> Date: Mon Apr 30 20:24:56 2018 [Modern] Update overflow menu alignment Also remove the expand button left-over from Chrome Home. BUG= 746712 Change-Id: I3dd3aa2ce6c9ed16146859ec50356b4f73cf5a9d Reviewed-on: https://chromium-review.googlesource.com/1025172 Commit-Queue: Theresa <twellington@chromium.org> Reviewed-by: Matthew Jones <mdjones@chromium.org> Cr-Commit-Position: refs/heads/master@{#554858} [modify] https://crrev.com/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1/chrome/android/java/res/layout/toolbar_phone_common.xml [modify] https://crrev.com/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1/chrome/android/java/res/values-v17/styles.xml [modify] https://crrev.com/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1/chrome/android/java/strings/android_chrome_strings.grd [modify] https://crrev.com/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1/chrome/test/data/android/render_tests/NewTabPageTest.modern-new_tab_page.Nexus_5-19.png [modify] https://crrev.com/2b04fae0d9e358cc4a5ed1b7f17fd963ccd499a1/chrome/test/data/android/render_tests/NewTabPageTest.new_tab_page.Nexus_5-19.png
,
Apr 30 2018
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Comment 1 Deleted