report(redesign): three dots for export button

[connorjclark]

#8185

@yuinchien the dots in your design use the material fonts icon font. I believe adding a font for just that is not ideal (@paulirish can confirm). I was hoping the unicode character ⋮ would suffice, but the spacing between dots is off.

[yuinchien]

@hoten i understand your concern, but it's important to have a consistent icon style throughout the report. The source file (svg and png) can be access here: https://icons.googleplex.com/#icon=ic_more_vert&search=more

Can we do inline svg instead of loading the whole font file?

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

ℹ️ Googlers: Go here for more info.

[exterkamp]

lgtm

[brendankenny]

proposal: what if we kept the share button on desktop and only used the three dots on a mobile breakpoint?

The share icon communicates more about what will contained in the drop down and it looks less like we took a mobile UI and blew it up to desktop size (and in devtools we won't suffer from a double three-dot menu icon)

[connorjclark]

proposal: what if we kept the share button on desktop and only used the three dots on a mobile breakpoint?

The share icon communicates more about what will contained in the drop down and it looks less like we took a mobile UI and blew it up to desktop size (and in devtools we won't suffer from a double three-dot menu icon)

@yuinchien

[yuinchien]

@hoten thanks for the suggestion. I realized the double menu icon situation after reading it, they are not aligned vertically or having similar sizes that you'd confuse the chrome system icon versus the menu icon in the report. It's also important to keep the icon consistent rather than switching it for diff form factors.

I did start with the share icon in my prototype, but visually they are huge and don't look pretty. Our design update strives for simplicity, I think the menu icon serves its purpose, people are used to access it for more actions. Can we keep the current design and track user's behaviour? If click rate drop significantly we can revisit the design :)

[paulirish]

i'm not following the thread here too well... where are we on this?

[connorjclark]

@brendankenny suggested keeping the share icon for desktop. @yuinchien gave reason not to.