New issue
Advanced search Search tips

Issue 822072 link

Starred by 6 users

Issue metadata

Status: Fixed
Owner:
Closed: Jun 2018
Cc:
Components:
EstimatedDays: 5
NextAction: ----
OS: ----
Pri: 2
Type: Bug

Blocking:
issue 821991
issue 834503



Sign in to add a comment

Bookmarks bar updates for MD refresh

Project Member Reported by pbos@chromium.org, Mar 14 2018

Issue description

Spec not fully clear, requires color and layout tweaks
 

Comment 1 by pbos@chromium.org, Mar 15 2018

Labels: Proj-MdRefresh
Owner: bsep@chromium.org
Status: Assigned (was: Available)
Labels: -Pri-3 Target-69 Pri-2

Comment 4 by bsep@chromium.org, Apr 18 2018

Owner: pbos@chromium.org
Delegating

Comment 5 Deleted

Comment 6 by bettes@chromium.org, Apr 18 2018

Blocking: 834503

Comment 7 Deleted

Comment 8 by bettes@chromium.org, Apr 18 2018

From go/chrome-ux-gm2:
https://docs.google.com/presentation/d/1EO7TOpIMJ7QHjaTVw9St-q6naKwtXX2TwzMirG5EsKY/edit#slide=id.g36e7d8d795_33_231

Tearsheet: go/chrome-ux-gm2-core
Screen Shot 2018-04-18 at 4.49.47 PM.png
170 KB View Download
Project Member

Comment 9 by bugdroid1@chromium.org, Apr 25 2018

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

commit 08b2f2f5e240061e5f7c4903b148734e43f16750
Author: Peter Boström <pbos@chromium.org>
Date: Wed Apr 25 23:43:22 2018

Change spacing and corners for Material refresh

* Adds 2dips of bottom margin and 2dips of padding between items (for
  all layout modes).
* Uses 4dips of rounded-corner radius under Refresh (already in use
  under touchable).

Bug:  chromium:822072 
Change-Id: I6fba6c49a01fa5f79cc33fe2e53aa998e350e03b
Reviewed-on: https://chromium-review.googlesource.com/1026392
Commit-Queue: Bret Sepulveda <bsep@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Cr-Commit-Position: refs/heads/master@{#553825}
[modify] https://crrev.com/08b2f2f5e240061e5f7c4903b148734e43f16750/chrome/browser/ui/views/bookmarks/bookmark_bar_view.cc

Project Member

Comment 10 by bugdroid1@chromium.org, May 1 2018

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

commit 4b03b6b0dc4ac74aa495105e14a0c7e3c4ca2505
Author: Peter Boström <pbos@chromium.org>
Date: Tue May 01 01:35:54 2018

Increase bookmark-bar height to 32dp

Matches MD Refresh specs and addresses bug where bookmark favicons were
clipped as a recent change added 2dp of bottom margin without increasing
the total bookmark-bar height.

Bug:  chromium:822072 ,  chromium:837891 
Change-Id: Icb4c400db62a50110b31bf28dc38968911e24bb2
Reviewed-on: https://chromium-review.googlesource.com/1036608
Commit-Queue: Peter Boström <pbos@chromium.org>
Commit-Queue: Peter Kasting <pkasting@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#554959}
[modify] https://crrev.com/4b03b6b0dc4ac74aa495105e14a0c7e3c4ca2505/chrome/browser/ui/layout_constants.cc

Project Member

Comment 11 by bugdroid1@chromium.org, May 10 2018

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

commit 4116d5a4121a0e7cc7b0cd4d399838d324d527b0
Author: Peter Boström <pbos@chromium.org>
Date: Thu May 10 01:44:42 2018

Align bookmark buttons with toolbar buttons

* Increases horizontal margins for bookmarks bar but removes additional
  margin for the detached bar.
* Uses 8dp margins for toolbar view for all non-touch layouts to align
  with the bookmarks bar.
* Uses corner-radius metric directly for ink-drops, matching toolbar
  buttons.
* Insets bookmark buttons by 2dp for older layouts as they use 24dp
  ink-drops.

Bug:  chromium:822072 ,  chromium:836251 
Change-Id: If7ba788678732be29921e4ef5d90e8e80815efd7
Reviewed-on: https://chromium-review.googlesource.com/1043255
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557414}
[modify] https://crrev.com/4116d5a4121a0e7cc7b0cd4d399838d324d527b0/chrome/browser/ui/views/bookmarks/bookmark_bar_view.cc
[modify] https://crrev.com/4116d5a4121a0e7cc7b0cd4d399838d324d527b0/chrome/browser/ui/views/toolbar/toolbar_view.cc
[modify] https://crrev.com/4116d5a4121a0e7cc7b0cd4d399838d324d527b0/chrome/test/data/extensions/api_test/window_update/sizing/test.js

Project Member

Comment 12 by bugdroid1@chromium.org, May 11 2018

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

commit 404e6fccc348d8781d25888d0f3aa587a8806739
Author: Peter Boström <pbos@chromium.org>
Date: Fri May 11 00:46:34 2018

Use circular ink-drops for toolbar and bookmarks

Adds circular inkdrops for the toolbar and pill-shaped ones for entries
in the bookmarks bar for Refresh. This removes the recent move to 8dp
squircles for Refresh and Touch and instead unifies them as rounded.

Also tones down EMPHASIS_HIGH for non-touchable and non-refresh as they
are not ready for rounded corners.

Bug:  chromium:822069 ,  chromium:822072 
Change-Id: Ie619f40834127ebfde59621a86fae42e7d8c4f23
Reviewed-on: https://chromium-review.googlesource.com/1053379
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Reviewed-by: Michael Wasserman <msw@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557743}
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/bookmarks/bookmark_bar_view.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/harmony/chrome_layout_provider.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/harmony/chrome_layout_provider.h
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/harmony/material_refresh_layout_provider.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/harmony/material_refresh_layout_provider.h
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/toolbar/browser_app_menu_button.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/toolbar/toolbar_action_view.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/chrome/browser/ui/views/toolbar/toolbar_button.cc
[modify] https://crrev.com/404e6fccc348d8781d25888d0f3aa587a8806739/ui/views/layout/layout_provider.cc

Pbos, can we bump the text from 800 --> 700 please? 
Only an idea: At the moment the spacing in the bookmarks hover button is 8px at the left/between/right. Reducing it by 2px to 6px at all 3 places would have the following nice effect:

If you use only the favicon, the button looks at the moment squeezed by 32x28. Reducing it by 2px at all 3 sides would make it more roundish at 28x28 like the rest of the buttons of the Toolbar. WDYT - Thanks :-)
Actual_favicon_only_not_round_32x28.png
42.7 KB View Download
Expected_favicon_only_round_button_28x28.png
42.7 KB View Download
_actual.png
19.5 KB View Download
_expected_reduced_2px.png
19.7 KB View Download
Project Member

Comment 15 by bugdroid1@chromium.org, May 23 2018

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

commit 9aeecc40704b65ff20988cdcb1f32c76c28b0184
Author: Peter Boström <pbos@chromium.org>
Date: Wed May 23 18:55:34 2018

Use GoogleGrey700 as newer bookmarks-bar color

Updates the bookmarks-bar text color to use GG700 for Touchable and MD
Refresh layouts. This matches bettes@' request in the related bug.

Bug:  chromium:822072 
Change-Id: I514aacd1db1e967920e4052fc8414989fdc0236a
Reviewed-on: https://chromium-review.googlesource.com/1066138
Reviewed-by: Evan Stade <estade@chromium.org>
Commit-Queue: Peter Boström <pbos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561185}
[modify] https://crrev.com/9aeecc40704b65ff20988cdcb1f32c76c28b0184/chrome/browser/themes/theme_properties.cc

Comment 16 by pbos@chromium.org, May 24 2018

+bettes@ for #14, it makes square favicons a lot tighter so it depends on what we want to optimize for, but the circular property of favicon-only bookmarks is indeed neat.
tighter-square.png
6.2 KB View Download

Comment 17 by pbos@chromium.org, May 24 2018

Cc: meh...@chromium.org bettes@chromium.org
.. and actually +bettes@, see comment 16 and 14 please. :)

Comment 18 by pbos@chromium.org, May 24 2018

Here's the tighter pill-shape when used with text.
tighter-pill.png
3.9 KB View Download
Hey pbos@: Looks nice :-) Not sure, if the touch-refresh-mode has to be considered then too? It is also squeezed, but the opposite way. Maybe it needs some +padding on the left/right to be circular too.
Touch-Refresh.png
9.8 KB View Download
EstimatedDays: 5
Triage: what's left here? If ready, assign to bettes@ for QA.

Comment 22 by pbos@chromium.org, Jun 1 2018

I've a pending CL that makes both Refresh and Touchable Refresh inkdrops circular (when using favicon only). Other than that I think we're in fairly good shape. I'll reassign it to bettes@ when it gets reviewed and lands.
Project Member

Comment 23 by bugdroid1@chromium.org, Jun 7 2018

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

commit e0a7fd622e70bd84e27e82b6876a8fb087187574
Author: Peter Boström <pbos@chromium.org>
Date: Thu Jun 07 00:21:21 2018

Adjust bookmark inkdrop insets for MD Refresh

This provides circular inkdrops for favicon-only bookmarks for both
Refresh and Touchable Refresh (the insets are different for the larger
buttons). As this makes the ink-drop end cap start at the center of the
favicon, this also looks significantly better for circular favicons.

The change also fixes the way-too-small insets in Touchable Refresh (as
they were overridden by Refresh in MaterialRefreshLayoutProvider).

Bug:  chromium:822072 ,  chromium:834503 
Change-Id: I12586a7588a0fb5163d25b43ebd327df65da6862
Reviewed-on: https://chromium-review.googlesource.com/1082477
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Cr-Commit-Position: refs/heads/master@{#565115}
[modify] https://crrev.com/e0a7fd622e70bd84e27e82b6876a8fb087187574/chrome/browser/ui/views/harmony/material_refresh_layout_provider.cc

Comment 24 by pbos@chromium.org, Jun 7 2018

Cc: pbos@chromium.org
Owner: bettes@chromium.org
bettes@ please review :)
Status: Fixed (was: Assigned)

Sign in to add a comment