Replacing the three-dot icons in the Elements breadcrumbs by arrow icons instead

Patrick Brosset

unread,

Apr 28, 2021, 5:59:15 AM4/28/21

to devtoo...@chromium.org

Hi fellow devtoolers,

I’d like to suggest replacing the three-dot buttons that appear to the left and right of the breadcrumbs component in the Elements panel by arrow buttons instead.

Three-dot buttons (or “meatball menus”) have become a UI pattern recently that users expect will open a menu. In this case, they don’t, they just scroll the breadcrumbs to the left or the right.

Can I get a designer (not sure if Peter is on this list) to chime in on this and maybe suggest which icons should be used instead?

Thanks,

Patrick

Mathias Bynens

unread,

Apr 28, 2021, 6:01:05 AM4/28/21

to Patrick Brosset, Peter Müller, devtoo...@chromium.org

--
You received this message because you are subscribed to the Google Groups "devtools-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to devtools-dev...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/devtools-dev/AM7PR83MB0386B55782E8CBFACA9E3505F7409%40AM7PR83MB0386.EURPRD83.prod.outlook.com.

Benedikt Meurer

unread,

Apr 28, 2021, 8:30:21 AM4/28/21

to Mathias Bynens, Patrick Brosset, Peter Müller, devtoo...@chromium.org

Oh, definitely!

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/devtools-dev/CADizRgbTfqhvqz9sga4EujD2JM6UH%2B%2BELCvwi0oV8R8unB9Hyg%40mail.gmail.com.

--

Benedikt Meurer

Chromium DevTools TL

bme...@chromium.org

Google Germany GmbH

Erika-Mann-Straße 33

80636 München

Geschäftsführer: Paul Manicle, Halimah DeLaine Prado

Registergericht und -nummer: Hamburg, HRB 86891

Sitz der Gesellschaft: Hamburg

Diese E-Mail ist vertraulich. Falls sie diese fälschlicherweise erhalten haben sollten, leiten Sie diese bitte nicht an jemand anderes weiter, löschen Sie alle Kopien und Anhänge davon und lassen Sie mich bitte wissen, dass die E-Mail an die falsche Person gesendet wurde.

This e-mail is confidential. If you received this communication by mistake, please don't forward it to anyone else, please erase all copies and attachments, and please let me know that it has gone to the wrong person.

Benedikt Meurer

unread,

Apr 28, 2021, 8:30:53 AM4/28/21

to Mathias Bynens, Marian Mraz, Patrick Brosset, Peter Müller, devtoo...@chromium.org

+Marian Mraz can you advise here while Peter is out?

Bramus Van Damme

unread,

Apr 28, 2021, 10:32:36 AM4/28/21

to devtools-dev, bme...@chromium.org, patrick...@microsoft.com, Peter Müller, devtoo...@chromium.org, Mathias Bynens, Marian Mraz

A common way to indicate that scrolling is possible is to use scroll shadows, as pioneered by Lea Verou: https://lea.verou.me/2012/04/background-attachment-local/

If this approach would be considered, a modernized version (which uses CSS Custom Properties and also supports horizontal scroll containers) of Lea's approach can be found at https://codepen.io/bramus/pen/ExxgNrV

Marian Mraz

unread,

Apr 29, 2021, 5:26:53 AM4/29/21

to Benedikt Meurer, Mathias Bynens, Patrick Brosset, Peter Müller, devtoo...@chromium.org

Hi everyone,

Here is a mockup with updated arrows, let me know what you think:

Marian Mraz

unread,

Apr 29, 2021, 5:29:23 AM4/29/21

to Benedikt Meurer, Mathias Bynens, Patrick Brosset, Peter Müller, devtoo...@chromium.org

And here is the correct one that includes the shadow as well :)

Yang Guo

unread,

Apr 30, 2021, 4:29:40 AM4/30/21

to Marian Mraz, Benedikt Meurer, Mathias Bynens, Patrick Brosset, Peter Müller, devtoo...@chromium.org

I like it!

Yang

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/devtools-dev/CAAjfu76mff0%2B0RvKg%3DSGJ87uj%2Bu_GNHvnrCL9bszcaxtsXfqGA%40mail.gmail.com.

Reply all

Reply to author

Forward